From 4db7402b40527e52eb2b8e6df8cd0b246f214bf1 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:56:52 -0800
Subject: [PATCH] Update message detail to show push preview

---
 .../messaging/message-[message]/+page.svelte  |  3 ++
 .../message-[message]/pushPreview.svelte      | 31 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte

diff --git a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
index 8c5734c02a..c949eba855 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -6,6 +6,7 @@
     import { message } from './store';
     import { ProviderTypes } from '../providerType.svelte';
     import SMSPreview from './smsPreview.svelte';
+    import PushPreview from './pushPreview.svelte';
 </script>
 
 <Container>
@@ -14,6 +15,8 @@
         <EmailPreview />
     {:else if $message.providerType === ProviderTypes.Sms}
         <SMSPreview />
+    {:else if $message.providerType === ProviderTypes.Push}
+        <PushPreview />
     {/if}
     <Delete />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
new file mode 100644
index 0000000000..e632394d5c
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { FormList, InputText, InputTextarea } from '$lib/elements/forms';
+    import { message } from './store';
+    import PushPhone from '../pushPhone.svelte';
+</script>
+
+<CardGrid>
+    <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
+        <Heading tag="h6" size="7">Preview</Heading>
+        <PushPhone title={$message.data.title} body={$message.data.body} />
+    </div>
+    <svelte:fragment slot="aside">
+        <FormList>
+            <InputText id="title" label="Title" disabled={true} bind:value={$message.data.title}>
+            </InputText>
+            <InputTextarea
+                id="message"
+                label="Message"
+                disabled={true}
+                bind:value={$message.data.body}>
+            </InputTextarea>
+        </FormList>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <!-- TODO: Add support for editing draft messages -->
+        <!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
+            >Edit message</Button> -->
+    </svelte:fragment>
+</CardGrid>