From a314f7833b8ac3fdacfa5a37a24bc01182bc0871 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 30 Nov 2023 12:10:15 -0800
Subject: [PATCH] Update message detail to show SMS preview

---
 .../messaging/message-[message]/+page.svelte  |  3 ++
 .../message-[message]/smsPreview.svelte       | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/routes/console/project-[project]/messaging/message-[message]/smsPreview.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 1867a5dacd..8c5734c02a 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/+page.svelte
@@ -5,12 +5,15 @@
     import Overview from './overview.svelte';
     import { message } from './store';
     import { ProviderTypes } from '../providerType.svelte';
+    import SMSPreview from './smsPreview.svelte';
 </script>
 
 <Container>
     <Overview />
     {#if $message.providerType === ProviderTypes.Email}
         <EmailPreview />
+    {:else if $message.providerType === ProviderTypes.Sms}
+        <SMSPreview />
     {/if}
     <Delete />
 </Container>
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
new file mode 100644
index 0000000000..5648c9bf23
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { FormList, InputTextarea } from '$lib/elements/forms';
+    import { message } from './store';
+    import SMSPhone from '../smsPhone.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>
+        <SMSPhone content={$message.data.content} />
+    </div>
+    <svelte:fragment slot="aside">
+        <FormList>
+            <InputTextarea
+                id="message"
+                label="Message"
+                disabled={true}
+                bind:value={$message.data.content}>
+            </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>