Add support for creating SMS messages

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>

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>

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>

src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte

@@ -0,0 +1,136 @@
+<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;
+
+        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>

src/routes/console/project-[project]/messaging/wizard/step1.svelte

@@ -2,10 +2,11 @@
     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]);
     }
 </script>
 
@@ -16,5 +17,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>

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} />