From 4de6350d8af79fd7c4c38bfcdf8d3442c615cc83 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:01:35 -0700
Subject: [PATCH] Add wizard for creating provider

---
 src/lib/components/labelCard.svelte           |  11 ++
 .../messaging/providers/+page.svelte          |  23 ++--
 .../messaging/providers/+page.ts              |   7 +-
 .../messaging/providers/create.svelte         | 120 +++++++++---------
 .../providers/createProviderDropdown.svelte   |  38 ++++++
 .../messaging/providers/store.ts              |  75 +++++++++++
 .../messaging/providers/wizard/step1.svelte   |  23 ++++
 .../messaging/providers/wizard/step2.svelte   |  20 +++
 .../messaging/providers/wizard/step3.svelte   |  16 +++
 .../messaging/providers/wizard/step4.svelte   |  17 +++
 .../messaging/providers/wizard/store.ts       |   4 +
 11 files changed, 277 insertions(+), 77 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/step1.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/step2.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/step3.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/step4.svelte
 create mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/store.ts

diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index 5565b392e4..a13f4c1d7e 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+    import { app } from '$lib/stores/app';
+    import { base } from '$app/paths';
+
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
     export let padding = 1;
     export let icon: string = null;
+    export let imageIcon: string = null;
     export let fullHeight = true;
     export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
     export let backgroundColor: string = null;
@@ -47,5 +51,12 @@
         {#if icon}
             <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
         {/if}
+        {#if imageIcon}
+            <img
+                class="u-margin-inline-start-auto"
+                style:--p-text-size="1.25rem"
+                src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
+                alt={imageIcon} />
+        {/if}
     </div>
 </label>
diff --git a/src/routes/console/project-[project]/messaging/providers/+page.svelte b/src/routes/console/project-[project]/messaging/providers/+page.svelte
index 20a3cd774f..985f01292c 100644
--- a/src/routes/console/project-[project]/messaging/providers/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/+page.svelte
@@ -23,23 +23,20 @@
         Id,
         ViewSelector
     } from '$lib/components';
-    import Create from './create.svelte';
-    import { goto } from '$app/navigation';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import { showCreate, columns } from './store';
+    import { columns } from './store';
     import { Pill } from '$lib/elements';
     import Filters from '../../databases/database-[database]/collection-[collection]/(filters)/filters.svelte';
+    import CreateProviderDropdown from './createProviderDropdown.svelte';
 
     export let data: PageData;
+
+    let showCreateDropdown = false;
     let selected: string[] = [];
 
     const project = $page.params.project;
-    const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
-        await goto(`${base}/console/project-${project}/messaging/topics/topic-${event.detail.$id}`);
-    };
 </script>
 
 <Container>
@@ -47,7 +44,7 @@
         <div class="u-flex u-main-space-between">
             <Heading tag="h2" size="5">Providers</Heading>
             <div class="is-only-mobile">
-                <Button on:click={() => ($showCreate = true)} event="create_provider">
+                <Button on:click={() => (showCreateDropdown = true)} event="create_provider">
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Create provider</span>
                 </Button>
@@ -64,10 +61,11 @@
                     hideView
                     allowNoColumns
                     showColsTextMobile />
-                <Button on:click={() => ($showCreate = true)} event="create_provider">
+                <!-- <Button on:click={() => (showCreateDropdown = true)} event="create_provider">
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Create provider</span>
-                </Button>
+                </Button> -->
+                <CreateProviderDropdown bind:showCreateDropdown />
             </div>
         </SearchQuery>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
@@ -148,7 +146,7 @@
             limit={data.limit}
             offset={data.offset}
             total={data.providers.total} />
-    {:else if data.search}
+    {:else if data.search && data.search != 'empty'}
         <EmptySearch>
             <div class="u-text-center">
                 <b>Sorry, we couldn't find '{data.search}'</b>
@@ -161,10 +159,7 @@
     {:else}
         <Empty
             single
-            on:click={() => ($showCreate = true)}
             href="https://appwrite.io/docs/references/cloud/client-web/teams"
             target="team" />
     {/if}
 </Container>
-
-<Create bind:showCreate={$showCreate} on:created={topicCreated} />
diff --git a/src/routes/console/project-[project]/messaging/providers/+page.ts b/src/routes/console/project-[project]/messaging/providers/+page.ts
index fa830c8c55..cbb2816a17 100644
--- a/src/routes/console/project-[project]/messaging/providers/+page.ts
+++ b/src/routes/console/project-[project]/messaging/providers/+page.ts
@@ -138,12 +138,17 @@ export const load = async ({ url, route }) => {
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
+    let providers: { providers: Provider[]; total: number } = { providers: [], total: 0 };
+    if (!search) {
+        providers = data;
+    }
+
     return {
         offset,
         limit,
         search,
         page,
         view,
-        providers: data
+        providers
     };
 };
diff --git a/src/routes/console/project-[project]/messaging/providers/create.svelte b/src/routes/console/project-[project]/messaging/providers/create.svelte
index 65528f2c00..d0c1d473f0 100644
--- a/src/routes/console/project-[project]/messaging/providers/create.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/create.svelte
@@ -1,68 +1,64 @@
 <script lang="ts">
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, Button, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { ID } from '@appwrite.io/console';
-    import { createEventDispatcher } from 'svelte';
+    import { onDestroy } from 'svelte';
+    import { Wizard } from '$lib/layout';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import Step3 from './wizard/step3.svelte';
+    import Step4 from './wizard/step4.svelte';
 
-    export let showCreate = false;
-
-    const dispatch = createEventDispatcher();
-
-    let name: string, id: string, error: string;
-    let showCustomId = false;
+    async function create() {
+        // try {
+        //     await sdk.forProject.databases.createDocument(
+        //         databaseId,
+        //         collectionId,
+        //         $createDocument.id ?? ID.unique(),
+        //         $createDocument.document,
+        //         $createDocument.permissions
+        //     );
+        //     await invalidate(Dependencies.DOCUMENTS);
+        //     addNotification({
+        //         message: 'Document has been created',
+        //         type: 'success'
+        //     });
+        //     trackEvent(Submit.DocumentCreate, {
+        //         customId: !!$createDocument.id
+        //     });
+        //     createDocument.reset();
+        //     wizard.hide();
+        // } catch (error) {
+        //     addNotification({
+        //         message: error.message,
+        //         type: 'error'
+        //     });
+        //     trackError(error, Submit.DocumentCreate);
+        // }
+    }
 
-    const create = async () => {
-        try {
-            const team = await sdk.forProject.teams.create(id ?? ID.unique(), name);
-            name = '';
-            showCreate = false;
-            showCustomId = false;
-            addNotification({
-                type: 'success',
-                message: `${team.name} has been created`
-            });
-            trackEvent(Submit.TeamCreate, {
-                customId: !!id
-            });
-            dispatch('created', team);
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.TeamCreate);
-        }
-    };
+    onDestroy(() => {
+        console.log('destroy');
+    });
 
-    $: if (!showCreate) {
-        showCustomId = false;
-        error = null;
-    }
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Proivder',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Initialize',
+        component: Step2
+        // optional: true
+    });
+    stepsComponents.set(3, {
+        label: 'Configure',
+        component: Step3
+        // optional: true
+    });
+    stepsComponents.set(4, {
+        label: 'Finalize',
+        component: Step4
+        // optional: true
+    });
 </script>
 
-<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="Enter name"
-            autofocus={true}
-            required
-            bind:value={name} />
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}
-                    ><span class="icon-pencil" aria-hidden="true" />
-                    <span class="text"> Team ID </span>
-                </Pill>
-            </div>
-        {:else}
-            <CustomId bind:show={showCustomId} name="Team" bind:id />
-        {/if}
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        <Button submit>Create</Button>
-    </svelte:fragment>
-</Modal>
+<Wizard title="Create provider" steps={stepsComponents} on:finish={create} />
diff --git a/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
new file mode 100644
index 0000000000..f1b8f056c5
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { DropList, DropListItem } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { wizard } from '$lib/stores/wizard';
+    import { providers } from './store';
+    import Create from './create.svelte';
+    import { providerType } from './wizard/store';
+
+    export let showCreateDropdown = false;
+
+    function openWizard() {
+        wizard.start(Create);
+    }
+</script>
+
+<DropList bind:show={showCreateDropdown} scrollable>
+    <slot>
+        <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create provider</span>
+        </Button>
+    </slot>
+    <svelte:fragment slot="list">
+        {#each Object.entries(providers) as [type, provider]}
+            <DropListItem
+                icon={provider.icon}
+                on:click={() => {
+                    console.log(type);
+                    if (type !== 'email' && type !== 'sms' && type !== 'push') return;
+                    $providerType = type;
+                    showCreateDropdown = false;
+                    openWizard();
+                }}>
+                {provider.name}
+            </DropListItem>
+        {/each}
+    </svelte:fragment>
+</DropList>
diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index fe1716cb0b..6d0a068984 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import type { Column } from '$lib/components/viewSelector.svelte';
 
 export let showCreate = writable(false);
+export let showCreateDropdown = writable(false);
 
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Provider ID', show: true, width: 140 },
@@ -10,3 +11,77 @@ export const columns = writable<Column[]>([
     { id: 'channel', title: 'Channel', show: true, width: 100 },
     { id: 'status', title: 'Status', show: true, width: 120 }
 ]);
+
+export const providers = {
+    sms: {
+        name: 'SMS',
+        text: 'SMS',
+        icon: 'annotation',
+        providers: {
+            twilio: {
+                imageIcon: 'twilio',
+                title: 'Twilio',
+                description: ''
+            },
+            msg91: {
+                imageIcon: 'msg91',
+                title: 'MSG91',
+                description: ''
+            },
+            telesign: {
+                imageIcon: 'telesign',
+                title: 'Telesign',
+                description: ''
+            },
+            textmagic: {
+                imageIcon: 'textmagic',
+                title: 'Textmagic',
+                description: ''
+            },
+            vonage: {
+                imageIcon: 'vonage',
+                title: 'Vonage',
+                description: ''
+            }
+        }
+    },
+    email: {
+        name: 'Email',
+        text: 'emails',
+        icon: 'mail',
+        providers: {
+            mailgun: {
+                imageIcon: 'mailgun',
+                title: 'Mailgun',
+                description: ''
+            },
+            sendgrid: {
+                imageIcon: 'sendgrid',
+                title: 'Sendgrid',
+                description: ''
+            }
+        }
+    },
+    push: {
+        name: 'Push notification',
+        text: 'notifications',
+        icon: 'device-mobile',
+        providers: {
+            fcm: {
+                imageIcon: 'firebase',
+                title: 'FCM',
+                description: 'Firebase Cloud Messaging'
+            },
+            apns: {
+                imageIcon: 'apple',
+                title: 'APNS',
+                description: 'Apple Push Notification Service'
+            },
+            mqtt: {
+                imageIcon: 'mqtt',
+                title: 'MQTT',
+                description: 'Message Queuing Telemtry Transport'
+            }
+        }
+    }
+};
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/step1.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/step1.svelte
new file mode 100644
index 0000000000..90c638c674
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/step1.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { providerType, provider } from './store';
+    import { LabelCard } from '$lib/components';
+    import { providers } from '../store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Provider</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Select a provider you would like to enable for sending {providers[$providerType].text}.
+    </svelte:fragment>
+    <div class="grid-box">
+        {#each Object.entries(providers[$providerType].providers) as [value, option]}
+            <LabelCard name="provider" {value} bind:group={$provider} imageIcon={option.imageIcon}>
+                <svelte:fragment slot="title">{option.title}</svelte:fragment>
+                {#if option.description}
+                    {option.description}
+                {/if}
+            </LabelCard>
+        {/each}
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/step2.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/step2.svelte
new file mode 100644
index 0000000000..ea28bc2fa9
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/step2.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { providers } from '../store';
+    import { providerType, provider } from './store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Initialize</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Follow the steps below to enable {providers[$providerType].providers[$provider].title} for sending
+        {providers[$providerType].text}. Need a hand? Follow the full guide in our
+        <a
+            href="https://appwrite.io/docs/advanced/platform/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
+            documentation</a
+        >.
+    </svelte:fragment>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/step3.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/step3.svelte
new file mode 100644
index 0000000000..789843dd94
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/step3.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Events</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set the events that will trigger your function. Maximum 100 events allowed.<a
+            href="https://appwrite.io/docs/advanced/platform/events"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
+            Learn more about events.
+        </a>.
+    </svelte:fragment>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/step4.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/step4.svelte
new file mode 100644
index 0000000000..3d790c658c
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/step4.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+    import { FormList } from '$lib/elements/forms';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Schedule</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set a Cron schedule to trigger your function. Leave blank for no schedule. <a
+            href="https://appwrite.io/docs/products/functions/quick-start"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">More details on Cron syntax here</a
+        >.
+    </svelte:fragment>
+    <FormList></FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/store.ts b/src/routes/console/project-[project]/messaging/providers/wizard/store.ts
new file mode 100644
index 0000000000..40d005f8f4
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/store.ts
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const providerType = writable<'push' | 'sms' | 'email'>(null);
+export const provider = writable<string>('mailgun');