Add support for saving messages as draft

src/lib/actions/analytics.ts

@@ -294,6 +294,7 @@ export enum Submit {
     MessagingProviderDelete = 'submit_messaging_provider_delete',
     MessagingProviderUpdate = 'submit_messaging_provider_update',
     MessagingMessageCreate = 'submit_messaging_message_create',
+    MessagingMessageUpdate = 'submit_messaging_message_update',
     MessagingMessageDelete = 'submit_messaging_message_delete',
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',

src/lib/layout/wizard.svelte

@@ -6,6 +6,10 @@
             component: typeof SvelteComponent<unknown>;
             optional?: boolean;
             disabled?: boolean;
+            actions?: {
+                label: string;
+                onClick: () => Promise<void>;
+            }[];
         }
     >;
 </script>
@@ -127,6 +131,7 @@
 
     $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
     $: isLastStep = $wizard.step === steps.size;
+    $: currentStep = steps.get($wizard.step);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -175,7 +180,7 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional}
+                    {#if !isLastStep && currentStep?.optional}
                         <Button text on:click={() => dispatch('finish')}>
                             Skip optional steps
                         </Button>
@@ -187,6 +192,13 @@
                         <Button secondary on:click={previousStep}>Back</Button>
                     {/if}
 
+                    {#if currentStep?.actions}
+                        {#each currentStep.actions as action}
+                            <Button secondary on:click={action.onClick}>
+                                {action.label}</Button>
+                        {/each}
+                    {/if}
+
                     <Button submit disabled={$wizard.nextDisabled}>
                         {isLastStep ? finalAction : 'Next'}
                     </Button>

src/routes/console/project-[project]/messaging/createMessageDropdown.svelte

@@ -3,8 +3,8 @@
     import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import { providers } from './providers/store';
-    import Create from './create.svelte';
-    import { messageParams, providerType, targetsById } from './wizard/store';
+    import Wizard from './wizard.svelte';
+    import { messageParams, operation, providerType, targetsById } from './wizard/store';
     import { ProviderTypes } from './providerType.svelte';
     import { topicsById } from './store';
 
@@ -30,6 +30,7 @@
                     )
                         return;
                     $providerType = type;
+                    $operation = 'create';
                     $topicsById = {};
                     $targetsById = {};
                     const common = {
@@ -60,7 +61,7 @@
                             break;
                     }
                     showCreateDropdown = false;
-                    wizard.start(Create);
+                    wizard.start(Wizard);
                 }}>
                 {option.name}
             </DropListItem>

src/routes/console/project-[project]/messaging/message-[message]/+layout.ts

@@ -22,7 +22,51 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             }
         );
 
+        const topicsById = {};
+        const topicsPromise = Promise.allSettled(
+            response.topics.map((topicId) => {
+                return sdk.forProject.client.call(
+                    'GET',
+                    new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${topicId}`),
+                    {
+                        'X-Appwrite-Project': sdk.forProject.client.config.project,
+                        'content-type': 'application/json',
+                        'X-Appwrite-Mode': 'admin'
+                    }
+                );
+            })
+        ).then((results) => {
+            results.forEach((result) => {
+                if (result.status === 'fulfilled') {
+                    topicsById[result.value.$id] = result.value;
+                }
+            });
+        });
+
+        const targetsById = {};
+        const targetsPromise = sdk.forProject.client
+            .call(
+                'GET',
+                new URL(
+                    `${sdk.forProject.client.config.endpoint}/messaging/messages/${params.message}/targets`
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            )
+            .then((response) => {
+                response.targets.forEach((target) => {
+                    targetsById[target.$id] = target;
+                });
+            });
+
+        await Promise.allSettled([topicsPromise, targetsPromise]);
+
         return {
+            topicsById,
+            targetsById,
             header: Header,
             breadcrumbs: Breadcrumbs,
             message: response

src/routes/console/project-[project]/messaging/message-[message]/+page.svelte

@@ -7,16 +7,107 @@
     import { ProviderTypes } from '../providerType.svelte';
     import SMSPreview from './smsPreview.svelte';
     import PushPreview from './pushPreview.svelte';
+    import {
+        MessageStatuses,
+        messageParams,
+        operation,
+        providerType,
+        targetsById
+    } from '../wizard/store';
+    import { topicsById } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import Wizard from '../wizard.svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    async function onEdit() {
+        $operation = 'update';
+        $providerType = $message.providerType;
+        $topicsById = {};
+        $targetsById = {};
+
+        $topicsById = data.topicsById;
+        $targetsById = data.targetsById;
+
+        $messageParams[$providerType] = {
+            messageId: $message.$id,
+            topics: $message.topics,
+            users: $message.users,
+            targets: $message.targets,
+            description: $message.description,
+            status: MessageStatuses.DRAFT,
+            scheduledAt: $message.scheduledAt
+        };
+
+        switch ($providerType) {
+            case ProviderTypes.Email:
+                {
+                    const { data } = $message;
+                    const params = ['subject', 'content', 'html'];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                }
+                break;
+            case ProviderTypes.Sms:
+                {
+                    const { data } = $message;
+                    const params = ['content'];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                }
+                break;
+            case ProviderTypes.Push:
+                {
+                    const { data } = $message;
+                    const params = [
+                        'title',
+                        'body',
+                        'action',
+                        'icon',
+                        'sound',
+                        'color',
+                        'tag',
+                        'badge'
+                    ];
+                    params.forEach((key) => {
+                        if (typeof data[key] !== 'undefined') {
+                            $messageParams[$providerType][key] = data[key];
+                        }
+                    });
+                    const dataEntries: [string, string][] = [];
+                    Object.entries(data['data'] ?? {}).forEach(([key, value]) => {
+                        dataEntries.push([key, value.toString()]);
+                    });
+                    $messageParams[$providerType]['data'] = dataEntries || [['', '']];
+                }
+                break;
+        }
+
+        wizard.start(Wizard);
+    }
 </script>
 
 <Container>
     <Overview />
     {#if $message.providerType === ProviderTypes.Email}
-        <EmailPreview />
+        <EmailPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {:else if $message.providerType === ProviderTypes.Sms}
-        <SMSPreview />
+        <SMSPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {:else if $message.providerType === ProviderTypes.Push}
-        <PushPreview />
+        <PushPreview
+            message={$message}
+            onEdit={$message.status === MessageStatuses.DRAFT ? onEdit : null} />
     {/if}
     <Delete />
 </Container>

src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import { FormList, InputText, InputTextarea } from '$lib/elements/forms';
-    import { message } from './store';
+    import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
+    import type { Message } from '../store';
+
+    export let message: Message;
+    export let onEdit: () => void = null;
 </script>
 
 <CardGrid>
@@ -14,20 +17,17 @@
                 id="subject"
                 label="Subject"
                 disabled={true}
-                bind:value={$message.data.subject}>
+                bind:value={message.data.subject}>
             </InputText>
             <InputTextarea
                 id="message"
                 label="Message"
                 disabled={true}
-                bind:value={$message.data.content}>
+                bind:value={message.data.content}>
             </InputTextarea>
+            <div class="u-flex u-main-end">
+                <Button secondary disabled={onEdit == null} on:click={onEdit}>Edit message</Button>
+            </div>
         </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>