Update message detail to show push preview

Author: stnguyen90

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>

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>