Replace the update provider wizard with a settings card

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

@@ -11,6 +11,50 @@
         FCM = 'fcm',
         APNS = 'apns'
     }
+
+    export function getProviderDisplayNameAndIcon(provider: Providers | string) {
+        let icon = '';
+        let displayName = provider.charAt(0).toUpperCase() + provider.slice(1);
+
+        switch (provider) {
+            case Providers.FCM:
+                icon = 'firebase';
+                displayName = 'FCM';
+                break;
+            case Providers.APNS:
+                icon = 'apple';
+                displayName = 'APNS';
+                break;
+            case Providers.Sendgrid:
+                icon = 'sendgrid';
+                break;
+            case Providers.Mailgun:
+                icon = 'mailgun';
+                break;
+            case Providers.SMTP:
+                icon = 'smtp';
+                displayName = 'SMTP';
+                break;
+            case Providers.Twilio:
+                icon = 'twilio';
+                break;
+            case Providers.Telesign:
+                icon = 'telesign';
+                break;
+            case Providers.Msg91:
+                icon = 'msg91';
+                displayName = 'MSG91';
+                break;
+            case Providers.Textmagic:
+                icon = 'textmagic';
+                displayName = 'Textmagic';
+                break;
+            case Providers.Vonage:
+                icon = 'vonage';
+                break;
+        }
+        return { icon, displayName };
+    }
 </script>
 
 <script lang="ts">
@@ -22,8 +66,7 @@
     export let noIcon = false;
     export let size: 's' | 'm' | 'l' = 'm';
 
-    let icon = '';
-    let displayName = name || provider.charAt(0).toUpperCase() + provider.slice(1);
+    const { icon, displayName } = getProviderDisplayNameAndIcon(provider);
 
     let textSize = '1.25rem';
     switch (size) {
@@ -34,44 +77,6 @@
             textSize = '1.5rem';
             break;
     }
-
-    switch (provider) {
-        case Providers.FCM:
-            icon = 'firebase';
-            displayName = name || 'FCM';
-            break;
-        case Providers.APNS:
-            icon = 'apple';
-            displayName = name || 'APNS';
-            break;
-        case Providers.Sendgrid:
-            icon = 'sendgrid';
-            break;
-        case Providers.Mailgun:
-            icon = 'mailgun';
-            break;
-        case Providers.SMTP:
-            icon = 'smtp';
-            displayName = name || 'SMTP';
-            break;
-        case Providers.Twilio:
-            icon = 'twilio';
-            break;
-        case Providers.Telesign:
-            icon = 'telesign';
-            break;
-        case Providers.Msg91:
-            icon = 'msg91';
-            displayName = name || 'MSG91';
-            break;
-        case Providers.Textmagic:
-            icon = 'textmagic';
-            displayName = name || 'TextMagic';
-            break;
-        case Providers.Vonage:
-            icon = 'vonage';
-            break;
-    }
 </script>
 
 {#if icon === ''}
@@ -89,12 +94,12 @@
                     <img
                         style:--p-text-size={textSize}
                         src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                        alt={displayName} />
+                        alt={name || displayName} />
                 {/if}
             </div>
         {/if}
         <slot>
-            {displayName}
+            {name || displayName}
         </slot>
     </div>
 {/if}

src/routes/console/project-[project]/messaging/providers/create.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
     import { Wizard } from '$lib/layout';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Provider from './wizard/provider.svelte';
-    import Configure from './wizard/configure.svelte';
+    import Settings from './wizard/settings.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
@@ -154,18 +153,14 @@
         }
     }
 
-    onDestroy(() => {
-        console.log('destroy');
-    });
-
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
         label: 'Proivder',
         component: Provider
     });
     stepsComponents.set(2, {
-        label: 'Configure',
-        component: Configure
+        label: 'Settings',
+        component: Settings
     });
 </script>
 

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

@@ -2,11 +2,158 @@
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
     import UpdateName from './updateName.svelte';
+    import UpdateSettings from './updateSettings.svelte';
     import UpdateStatus from './updateStatus.svelte';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { MessagingProviderType } from '@appwrite.io/console';
+    import { Providers } from '../../provider.svelte';
+    import { providers } from '../store';
+    import { provider as providerData } from './store';
+
+    let providerType: MessagingProviderType;
+    if (isValueOfStringEnum(MessagingProviderType, $providerData.type)) {
+        providerType = $providerData.type;
+    }
+
+    let provider: Providers;
+    if (isValueOfStringEnum(Providers, $providerData.provider)) {
+        provider = $providerData.provider;
+    }
+
+    let params: object = {};
+
+    $: switch (provider) {
+        case Providers.Twilio:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                accountSid: $providerData.credentials['accountSid'],
+                authToken: $providerData.credentials['authToken'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Msg91:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                from: $providerData.options['from'],
+                senderId: $providerData.credentials['senderId'],
+                authKey: $providerData.credentials['authKey']
+            };
+            break;
+        case Providers.Telesign:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                username: $providerData.credentials['username'],
+                password: $providerData.credentials['password'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Textmagic:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                username: $providerData.credentials['username'],
+                apiKey: $providerData.credentials['apiKey'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Vonage:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                apiKey: $providerData.credentials['apiKey'],
+                apiSecret: $providerData.credentials['apiSecret'],
+                from: $providerData.options['from']
+            };
+            break;
+        case Providers.Mailgun:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                isEuRegion: false,
+                fromEmail: $providerData.options['fromEmail'],
+                fromName: $providerData.options['fromName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                replyToName: $providerData.options['replyToName'],
+                apiKey: $providerData.credentials['apiKey'],
+                domain: $providerData.credentials['domain']
+            };
+            break;
+        case Providers.Sendgrid:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                apiKey: $providerData.credentials['apiKey'],
+                fromEmail: $providerData.options['fromEmail'],
+                fromName: $providerData.options['fromName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                replyToName: $providerData.options['replyToName']
+            };
+            break;
+        case Providers.SMTP:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                host: $providerData.credentials['host'],
+                port: $providerData.credentials['port'],
+                username: $providerData.credentials['username'],
+                password: $providerData.credentials['password'],
+                fromName: $providerData.options['fromName'],
+                fromEmail: $providerData.options['fromEmail'],
+                replyToName: $providerData.options['replyToName'],
+                replyToEmail: $providerData.options['replyToEmail'],
+                encryption: $providerData.options['encryption'],
+                autoTLS: $providerData.options['autoTLS'],
+                mailer: $providerData.options['mailer']
+            };
+            break;
+        case Providers.FCM:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled
+            };
+            if ('serviceAccountJSON' in $providerData.credentials) {
+                const serviceAccountJSON = $providerData.credentials['serviceAccountJSON'];
+                if (typeof serviceAccountJSON === 'string') {
+                    params['serviceAccountJSON'] = serviceAccountJSON;
+                } else if (serviceAccountJSON instanceof Object) {
+                    params['serviceAccountJSON'] = JSON.stringify(serviceAccountJSON);
+                }
+            }
+            break;
+        case Providers.APNS:
+            params = {
+                providerId: $providerData.$id,
+                name: $providerData.name,
+                enabled: $providerData.enabled,
+                authKey: $providerData.credentials['authKey'],
+                authKeyId: $providerData.credentials['authKeyId'],
+                teamId: $providerData.credentials['teamId'],
+                bundleId: $providerData.credentials['bundleId']
+            };
+            break;
+    }
 </script>
 
 <Container>
     <UpdateStatus />
     <UpdateName />
+    <UpdateSettings
+        inputs={providers[providerType].providers[provider].configure}
+        providerId={$providerData.$id}
+        {providerType}
+        {provider}
+        {params} />
     <DangerZone />
 </Container>

src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts

@@ -2,8 +2,4 @@ import { derived } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 
-export const provider = derived(
-    page,
-    // TODO: Set actual type
-    ($page) => $page.data.provider as Models.Provider
-);
+export const provider = derived(page, ($page) => $page.data.provider as Models.Provider);