From d3d7ad165047614b6ab672939ff4552f5116dad1 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:28:14 -0800
Subject: [PATCH 1/2] feat(messaging): fix need a hand section of provider
 wizard

1. Link the "Read the full guide..." row to the docs.
2. Make "Invite a team..." row open the invite modal.
---
 .../providers/wizard/configure.svelte         | 71 +++++++++++++------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
index 1fc3860b0..7ecbf953c 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
@@ -9,12 +9,14 @@
         InputText,
         InputPassword
     } from '$lib/elements/forms';
-
     import InputPhone from '$lib/elements/forms/inputPhone.svelte';
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
     import { providers } from '../store';
     import { providerType, provider, providerParams } from './store';
+    import { Table, TableBody, TableCell, TableRowButton, TableRowLink } from '$lib/elements/table';
+    import { newMemberModal } from '$lib/stores/organization';
+    import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
 
     let files: Record<string, FileList> = {};
     const inputs = providers[$providerType].providers[$provider].configure;
@@ -154,27 +156,52 @@
         {/each}
     </FormList>
 
-    <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
+    <div class="need-a-hand u-flex-vertical u-gap-8">
+        <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
 
-    <div
-        class="u-flex u-cross-center u-main-space-between u-padding-block-16"
-        style="border-block-end: solid .0625rem hsl(var(--color-border))">
-        <div class="u-flex u-cross-center u-gap-16">
-            <div class="avatar is-size-small">
-                <span class="icon-book-open" style:--p-text-size="1.25rem" aria-hidden="true" />
-            </div>
-            Read the full guide in the documentation
-        </div>
-        <span class="icon-arrow-right" aria-hidden="true" />
-    </div>
-
-    <div class="u-flex u-cross-center u-main-space-between u-padding-block-16">
-        <div class="u-flex u-cross-center u-gap-16">
-            <div class="avatar is-size-small">
-                <span class="icon-user-group" style:--p-text-size="1.25rem" aria-hidden="true" />
-            </div>
-            Invite a team member to complete this step
-        </div>
-        <span class="icon-arrow-right" aria-hidden="true" />
+        <Table noMargin noStyles>
+            <TableBody>
+                <TableRowLink href={`https://appwrite.io/docs/messaging/${$provider}`}>
+                    <TableCell>
+                        <div class="u-flex u-cross-center u-main-space-between u-padding-block-8">
+                            <div class="u-flex u-cross-center u-gap-16">
+                                <div class="avatar is-size-small">
+                                    <span
+                                        class="icon-book-open"
+                                        style:--p-text-size="1.25rem"
+                                        aria-hidden="true" />
+                                </div>
+                                Read the full guide in the documentation
+                            </div>
+                            <span class="icon-arrow-right" aria-hidden="true" />
+                        </div>
+                    </TableCell>
+                </TableRowLink>
+                <TableRowButton on:click={() => ($newMemberModal = true)}>
+                    <TableCell>
+                        <div class="u-flex u-cross-center u-main-space-between u-padding-block-8">
+                            <div class="u-flex u-cross-center u-gap-16">
+                                <div class="avatar is-size-small">
+                                    <span
+                                        class="icon-user-group"
+                                        style:--p-text-size="1.25rem"
+                                        aria-hidden="true" />
+                                </div>
+                                Invite a team member to complete this step
+                            </div>
+                            <span class="icon-arrow-right" aria-hidden="true" />
+                        </div>
+                    </TableCell>
+                </TableRowButton>
+            </TableBody>
+        </Table>
     </div>
 </WizardStep>
+
+<CreateMember bind:showCreate={$newMemberModal} />
+
+<style lang="scss">
+    .need-a-hand :global(.table-row):last-child:last-child {
+        border-block-end: none;
+    }
+</style>

From 89013cc9e6d8ed6e3f05e242750b2d19ebebc014 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:31:30 -0800
Subject: [PATCH 2/2] feat(messaging): add details on how to setup a provider

---
 .../messaging/providers/store.ts              | 10 +++++
 .../providers/wizard/configure.svelte         | 41 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 9df85042f..c93e5f445 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -22,6 +22,7 @@ type ProvidersMap = {
                 classIcon?: string;
                 title: string;
                 description: string;
+                needAHand?: string[];
                 configure: {
                     label: string;
                     name: string;
@@ -56,6 +57,11 @@ export const providers: ProvidersMap = {
                 imageIcon: 'firebase',
                 title: 'FCM',
                 description: 'Firebase Cloud Messaging',
+                needAHand: [
+                    'Create a <b><a class="link" href="https://firebase.google.com" target="_blank" rel="noopener noreferrer">Firebase</a></b> project.',
+                    'Head to <b>Firebase dashboard -> Settings -> Project settings -> Cloud Messaging.</b>',
+                    "If FCM is disabled, click the three-dots menu and open the link. On the following page, click 'Enable' (it might take a few minutes for the action to complete)."
+                ],
                 configure: [
                     {
                         label: 'Service account JSON (.json file)',
@@ -355,6 +361,10 @@ export const providers: ProvidersMap = {
                 imageIcon: 'twilio',
                 title: 'Twilio',
                 description: '',
+                needAHand: [
+                    'Create an account in <b><a class="link" href="https://console.twilio.com/" target="_blank" rel="noopener noreferrer">Twilio</a></b>.',
+                    'Head to <b>Twilio console -> Get a Twilio phone number.</b>'
+                ],
                 configure: [
                     {
                         label: 'Account SID',
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
index 7ecbf953c..47222cc82 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte
@@ -17,6 +17,11 @@
     import { Table, TableBody, TableCell, TableRowButton, TableRowLink } from '$lib/elements/table';
     import { newMemberModal } from '$lib/stores/organization';
     import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
+    import Collapsible from '$lib/components/collapsible.svelte';
+    import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
+    import Provider from '../../provider.svelte';
+    import { MessagingProviderType } from '@appwrite.io/console';
+    import ProviderTypeComponent from '$routes/console/project-[project]/messaging/providerType.svelte';
 
     let files: Record<string, FileList> = {};
     const inputs = providers[$providerType].providers[$provider].configure;
@@ -159,11 +164,43 @@
     <div class="need-a-hand u-flex-vertical u-gap-8">
         <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
 
+        {#if providers[$providerType].providers[$provider].needAHand}
+            {@const needAHand = providers[$providerType].providers[$provider].needAHand}
+            <div class="box u-padding-inline-8 u-padding-0 u-border-width-0">
+                <Collapsible>
+                    <CollapsibleItem withIndentation>
+                        <svelte:fragment slot="beforetitle">
+                            <div class="u-flex u-cross-center u-gap-16">
+                                <div class="avatar is-size-small">
+                                    <span
+                                        class="icon-info"
+                                        style:--p-text-size="1.25rem"
+                                        aria-hidden="true" />
+                                </div>
+                                <span class="body-text-2 u-small u-bold"
+                                    >How to enable <Provider provider={$provider} noIcon />
+                                    {#if $providerType == MessagingProviderType.Push}notifications{:else}<ProviderTypeComponent
+                                            type={$providerType}
+                                            noIcon />{/if} service?</span>
+                            </div>
+                        </svelte:fragment>
+                        <div class="u-flex-vertical u-gap-16">
+                            {#each needAHand as p}
+                                <p>
+                                    {@html p}
+                                </p>
+                            {/each}
+                        </div>
+                    </CollapsibleItem>
+                </Collapsible>
+            </div>
+        {/if}
+
         <Table noMargin noStyles>
             <TableBody>
                 <TableRowLink href={`https://appwrite.io/docs/messaging/${$provider}`}>
                     <TableCell>
-                        <div class="u-flex u-cross-center u-main-space-between u-padding-block-8">
+                        <div class="u-flex u-cross-center u-main-space-between u-padding-8">
                             <div class="u-flex u-cross-center u-gap-16">
                                 <div class="avatar is-size-small">
                                     <span
@@ -179,7 +216,7 @@
                 </TableRowLink>
                 <TableRowButton on:click={() => ($newMemberModal = true)}>
                     <TableCell>
-                        <div class="u-flex u-cross-center u-main-space-between u-padding-block-8">
+                        <div class="u-flex u-cross-center u-main-space-between u-padding-8">
                             <div class="u-flex u-cross-center u-gap-16">
                                 <div class="avatar is-size-small">
                                     <span