From 98e7188d71618b695838857cc468fabf8b6cf7de Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:44:43 -0800
Subject: [PATCH] Update create message wizard to support push

---
 .../project-[project]/messaging/create.svelte |   4 +-
 .../messaging/pushPhone.svelte                |  16 ++
 .../messaging/wizard/pushFormList.svelte      | 142 ++++++++++++++++++
 .../messaging/wizard/step1.svelte             |   3 +
 4 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/pushPhone.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte

diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
index 3c9924a976..d0aa3a6097 100644
--- a/src/routes/console/project-[project]/messaging/create.svelte
+++ b/src/routes/console/project-[project]/messaging/create.svelte
@@ -56,9 +56,7 @@
                 case ProviderTypes.Push:
                     response = await sdk.forProject.client.call(
                         'POST',
-                        new URL(
-                            sdk.forProject.client.config.endpoint + '/messaging/providers/telesign'
-                        ),
+                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'),
                         {
                             'X-Appwrite-Project': sdk.forProject.client.config.project,
                             'content-type': 'application/json',
diff --git a/src/routes/console/project-[project]/messaging/pushPhone.svelte b/src/routes/console/project-[project]/messaging/pushPhone.svelte
new file mode 100644
index 0000000000..2acfc19f85
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/pushPhone.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let title = '';
+    export let body = '';
+</script>
+
+<!-- TODO: Style to look like a push notification -->
+<div class="phone card is-only-desktop">
+    <p class="body-text-1 u-bold">{title}</p>
+    <p class="body-text-2">{body}</p>
+</div>
+
+<style lang="scss">
+    .phone {
+        inline-size: calc(320 * 1rem / 16);
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
new file mode 100644
index 0000000000..0895ecc176
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
@@ -0,0 +1,142 @@
+<script context="module" lang="ts">
+    export async function createPushMessage(params: PushMessageParams) {
+        const response = await sdk.forProject.client.call(
+            'POST',
+            new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'),
+            {
+                '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, MessageStatuses, type PushMessageParams } 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 PushPhone from '../pushPhone.svelte';
+
+    let showCustomId = false;
+    let showTest = false;
+    let selected = 'self';
+    let otherEmail = '';
+
+    async function sendTestMessage() {
+        const email = selected === 'self' ? $user.email : otherEmail;
+        console.log(email);
+
+        createPushMessage({
+            topics: $messageParams[ProviderTypes.Push]?.topics || [],
+            targets: $messageParams[ProviderTypes.Push]?.targets || [],
+            description: $messageParams[ProviderTypes.Push]?.description || 'Test push',
+            status: MessageStatuses.PROCESSING,
+            messageId: ID.unique(),
+            // TODO: properly handle the test email address
+            users: ['steven'],
+            body: $messageParams[ProviderTypes.Push]?.body || '',
+            title: $messageParams[ProviderTypes.Push]?.title || '',
+            data: $messageParams[ProviderTypes.Push]?.data || {}
+        });
+    }
+
+    $: otherEmail = selected === 'self' ? '' : otherEmail;
+</script>
+
+<div class="u-flex u-gap-24">
+    <FormList class="u-stretch">
+        <InputText
+            id="title"
+            label="Title"
+            placeholder="Enter title"
+            bind:value={$messageParams[$providerType]['title']}>
+        </InputText>
+        <div class="u-colum-gap-2">
+            <InputTextarea
+                id="message"
+                label="Message"
+                placeholder="Type here..."
+                bind:value={$messageParams[$providerType]['body']}>
+            </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={sendTestMessage}
+                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>
+        {#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>
+    <PushPhone
+        title={$messageParams[$providerType]['title']}
+        body={$messageParams[$providerType]['body']} />
+</div>
diff --git a/src/routes/console/project-[project]/messaging/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
index dcdc4ed00b..822a332b41 100644
--- a/src/routes/console/project-[project]/messaging/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/step1.svelte
@@ -5,6 +5,7 @@
     import { ProviderTypes } from '../providerType.svelte';
     import EmailFormList from './emailFormList.svelte';
     import SmsFormList from './smsFormList.svelte';
+    import PushFormList from './pushFormList.svelte';
 
     async function beforeSubmit() {
         console.log($messageParams[$providerType]);
@@ -22,5 +23,7 @@
         <EmailFormList />
     {:else if $providerType === ProviderTypes.Sms}
         <SmsFormList />
+    {:else if $providerType === ProviderTypes.Push}
+        <PushFormList />
     {/if}
 </WizardStep>