From 80e81b1cf5f2d96e09df4d330d25ce1c0cbc1e3a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 29 Nov 2023 21:09:45 -0800
Subject: [PATCH 1/4] Update create message wizard to support SMS

---
 .../messaging/smsPhone.svelte                 |  14 ++
 .../messaging/wizard/smsFormList.svelte       | 137 ++++++++++++++++++
 .../messaging/wizard/step1.svelte             |   8 +-
 .../messaging/wizard/step2.svelte             |   3 +-
 4 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/smsPhone.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte

diff --git a/src/routes/console/project-[project]/messaging/smsPhone.svelte b/src/routes/console/project-[project]/messaging/smsPhone.svelte
new file mode 100644
index 0000000000..c7db28c112
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/smsPhone.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export let content = '';
+</script>
+
+<!-- TODO: Style to look like a phone -->
+<div class="phone card is-only-desktop">
+    {content}
+</div>
+
+<style lang="scss">
+    .phone {
+        inline-size: calc(320 * 1rem / 16);
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
new file mode 100644
index 0000000000..02de8c60f0
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -0,0 +1,137 @@
+<script context="module" lang="ts">
+    export async function createSMSMessage(params: EmailMessageParams) {
+        const response = await sdk.forProject.client.call(
+            'POST',
+            new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/sms'),
+            {
+                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                'content-type': 'application/json',
+                'X-Appwrite-Mode': 'admin'
+            },
+            params
+        );
+
+        return response.json();
+    }
+</script>
+
+<script lang="ts">
+    import { messageParams, providerType, type EmailMessageParams, MessageStatuses } from './store';
+    import {
+        Button,
+        FormList,
+        InputEmail,
+        InputRadio,
+        InputText,
+        InputTextarea
+    } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
+    import { CustomId, Modal } from '$lib/components';
+    import { user } from '$lib/stores/user';
+    import { clickOnEnter } from '$lib/helpers/a11y';
+    import { ID } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { ProviderTypes } from '../providerType.svelte';
+    import SMSPhone from '../smsPhone.svelte';
+
+    let showCustomId = false;
+    let showTest = false;
+    let selected = 'self';
+    let otherEmail = '';
+
+    async function sendTestSMS() {
+        const email = selected === 'self' ? $user.email : otherEmail;
+        console.log(email);
+
+        createSMSMessage({
+            topics: $messageParams[ProviderTypes.Email]?.topics || [],
+            targets: $messageParams[ProviderTypes.Email]?.targets || [],
+            description: $messageParams[ProviderTypes.Email]?.description || 'Test message',
+            status: MessageStatuses.PROCESSING,
+            messageId: ID.unique(),
+            // TODO: properly handle the test email address
+            users: ['steven'],
+            subject: $messageParams[ProviderTypes.Email]?.subject || '',
+            content: $messageParams[ProviderTypes.Email]?.content || '',
+            html: $messageParams[ProviderTypes.Email]?.html || false
+        });
+    }
+
+    $: otherEmail = selected === 'self' ? '' : otherEmail;
+</script>
+
+<div class="u-flex u-gap-24">
+    <FormList class="u-stretch">
+        <div class="u-colum-gap-2">
+            <InputTextarea
+                id="message"
+                label="Message"
+                placeholder="Type here..."
+                bind:value={$messageParams[$providerType]['content']}>
+            </InputTextarea>
+            <!-- TODO: Add support for draft messages -->
+            <!-- <div class="u-flex u-main-end">
+                <Button text on:click={() => (showTest = true)}>Send test message</Button>
+            </div> -->
+            <Modal title="Send test message" bind:show={showTest} onSubmit={sendTestSMS} size="big">
+                <slot />
+                <InputRadio
+                    label={$user.phone}
+                    bind:group={selected}
+                    value="self"
+                    id="self"
+                    name="selected" />
+                <InputRadio
+                    label="Other"
+                    bind:group={selected}
+                    value="other"
+                    id="other"
+                    name="selected"
+                    fullWidth>
+                    <svelte:fragment slot="description">
+                        Enter the phone number to which the test message will be
+                        <div
+                            on:click={() => (selected = 'other')}
+                            on:keyup|self={clickOnEnter}
+                            role="button"
+                            tabindex="0">
+                            <InputEmail
+                                showLabel={false}
+                                id="email"
+                                label="Email"
+                                placeholder="Enter email"
+                                bind:value={otherEmail} />
+                        </div>
+                    </svelte:fragment>
+                </InputRadio>
+
+                <svelte:fragment slot="footer">
+                    <Button secondary on:click={() => (showTest = false)}>Cancel</Button>
+                    <Button submit>Send</Button>
+                </svelte:fragment>
+            </Modal>
+        </div>
+        <InputText
+            id="description"
+            label="Description"
+            placeholder="Enter description"
+            tooltip="Provide a summary of the message. Users won't see this description."
+            bind:value={$messageParams[$providerType]['description']}>
+        </InputText>
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Message ID
+                    </span></Pill>
+            </div>
+        {:else}
+            <CustomId
+                bind:show={showCustomId}
+                name="Message"
+                bind:id={$messageParams[$providerType].messageId}
+                autofocus={false} />
+        {/if}
+    </FormList>
+    <SMSPhone content={$messageParams[$providerType]['content']} />
+</div>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
index 01c7048733..dcdc4ed00b 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
@@ -2,7 +2,9 @@
     import { WizardStep } from '$lib/layout';
     import { messageParams, providerType } from './store';
     import { providers } from '../providers/store';
+    import { ProviderTypes } from '../providerType.svelte';
     import EmailFormList from './emailFormList.svelte';
+    import SmsFormList from './smsFormList.svelte';
 
     async function beforeSubmit() {
         console.log($messageParams[$providerType]);
@@ -16,5 +18,9 @@
         Create an {providers[$providerType].text} that will be displayed to your subscribers. Learn more
         in our documentation.
     </svelte:fragment>
-    <EmailFormList />
+    {#if $providerType === ProviderTypes.Email}
+        <EmailFormList />
+    {:else if $providerType === ProviderTypes.Sms}
+        <SmsFormList />
+    {/if}
 </WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
index 60f734edff..3b1c0433fa 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step2.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Card } from '$lib/components';
     import UserTargetsModal, { type Target } from '../userTargetsModal.svelte';
-    import { ProviderTypes } from '../providerType.svelte';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -93,7 +92,7 @@
 </WizardStep>
 
 <UserTargetsModal
-    providerType={ProviderTypes.Email}
+    providerType={$providerType}
     bind:show={showDropdown}
     bind:targetsById={$targetsById}
     on:update={update} />

From ff42635303e1ec86d064f82c1c082c520917f2a4 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 2/4] 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>

From 6a39aaadaa444b69541b0a60f72e37f88d43a5a1 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 2 Jan 2024 15:54:41 +0100
Subject: [PATCH 3/4] Update
 src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte

---
 .../project-[project]/messaging/wizard/smsFormList.svelte        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
index 02de8c60f0..fe5842dfaa 100644
--- a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -41,7 +41,6 @@
 
     async function sendTestSMS() {
         const email = selected === 'self' ? $user.email : otherEmail;
-        console.log(email);
 
         createSMSMessage({
             topics: $messageParams[ProviderTypes.Email]?.topics || [],

From f9931d23f3d0b1d693c65d73d939632f541fa2e6 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 2 Jan 2024 15:54:46 +0100
Subject: [PATCH 4/4] Update
 src/routes/console/project-[project]/messaging/wizard/step1.svelte

---
 .../console/project-[project]/messaging/wizard/step1.svelte      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
index dcdc4ed00b..7ef32a000d 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
@@ -7,7 +7,6 @@
     import SmsFormList from './smsFormList.svelte';
 
     async function beforeSubmit() {
-        console.log($messageParams[$providerType]);
     }
 </script>