From dcaa8eb2f5f8d7f4cf8db880c196e5820dda0f6d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 16 Feb 2024 11:09:10 -0800
Subject: [PATCH] Replace the update provider wizard with a settings card

---
 .../messaging/provider.svelte                 |  89 +++----
 .../provider-[provider]/+page.svelte          | 147 +++++++++++
 .../providers/provider-[provider]/store.ts    |   6 +-
 .../provider-[provider]/updateSettings.svelte | 233 ++++++++++++++++++
 .../provider-[provider]/updateStatus.svelte   | 144 -----------
 .../messaging/providers/update.svelte         | 163 ------------
 6 files changed, 428 insertions(+), 354 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
 delete mode 100644 src/routes/console/project-[project]/messaging/providers/update.svelte

diff --git a/src/routes/console/project-[project]/messaging/provider.svelte b/src/routes/console/project-[project]/messaging/provider.svelte
index e130ea23f..a78eb75c0 100644
--- a/src/routes/console/project-[project]/messaging/provider.svelte
+++ b/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}
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
index 2262f62ac..e6e4f4a55 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts
index 441524d17..d4211320e 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts
+++ b/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);
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
new file mode 100644
index 000000000..66a39bcbb
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import type { ProviderInput } from '../store';
+    import { Providers, getProviderDisplayNameAndIcon } from '../../provider.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { MessagingProviderType, type Models } from '@appwrite.io/console';
+    import SettingsFormList from '../settingsFormList.svelte';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
+
+    export let inputs: ProviderInput[];
+    export let providerType: MessagingProviderType;
+    export let provider: Providers;
+    export let providerId: string;
+    export let params: object;
+
+    let formValues: object = {};
+    let originalfiles: Record<string, FileList> = {};
+    let files: Record<string, FileList> = {};
+    let updated = false;
+    let newMemberModal = false;
+    let message = '';
+
+    const { displayName } = getProviderDisplayNameAndIcon(provider);
+
+    switch (providerType) {
+        case MessagingProviderType.Push:
+            message = 'notifications';
+            break;
+        case MessagingProviderType.Sms:
+            message = 'SMS';
+            break;
+        case MessagingProviderType.Email:
+            message = 'emails';
+            break;
+    }
+
+    onMount(() => {
+        for (const input of inputs) {
+            const value = params[input.name];
+            formValues[input.name] = value;
+            if (input.type === 'file' && typeof value == 'string' && value.length > 0) {
+                const dataTransfer = new DataTransfer();
+                const f = new File([value], `${input.name}.${input.allowedFileExtensions}`);
+                dataTransfer.items.add(f);
+                files[input.name] = dataTransfer.files;
+                originalfiles[input.name] = dataTransfer.files;
+            }
+        }
+    });
+
+    async function update() {
+        try {
+            const promises = [];
+            for (const [key, value] of Object.entries(files)) {
+                const promise = value[0].text().then((text) => {
+                    formValues[key] = text;
+                });
+                promises.push(promise);
+            }
+            await Promise.all(promises);
+            let response: Models.Provider;
+            switch (provider) {
+                case Providers.Twilio:
+                    response = await sdk.forProject.messaging.updateTwilioProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['accountSid'],
+                        formValues['authToken'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Msg91:
+                    response = await sdk.forProject.messaging.updateMsg91Provider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['senderId'],
+                        formValues['authKey'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Telesign:
+                    response = await sdk.forProject.messaging.updateTelesignProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['username'],
+                        formValues['password'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Textmagic:
+                    response = await sdk.forProject.messaging.updateTextmagicProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['username'],
+                        formValues['apiKey'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Vonage:
+                    response = await sdk.forProject.messaging.updateVonageProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['apiSecret'],
+                        formValues['from']
+                    );
+                    break;
+                case Providers.Mailgun:
+                    response = await sdk.forProject.messaging.updateMailgunProvider(
+                        providerId,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['domain'],
+                        formValues['isEuRegion'],
+                        undefined,
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined
+                    );
+                    break;
+                case Providers.Sendgrid:
+                    response = await sdk.forProject.messaging.updateSendgridProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['apiKey'],
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined
+                    );
+                    break;
+                case Providers.SMTP:
+                    response = await sdk.forProject.messaging.updateSMTPProvider(
+                        providerId,
+                        undefined,
+                        formValues['host'],
+                        formValues['port'] || undefined,
+                        formValues['username'] || undefined,
+                        formValues['password'] || undefined,
+                        formValues['encryption'],
+                        formValues['autoTLS'],
+                        formValues['fromName'] || undefined,
+                        formValues['fromEmail'],
+                        formValues['replyToName'] || undefined,
+                        formValues['replyToEmail'] || undefined,
+                        undefined
+                    );
+                    break;
+                case Providers.FCM:
+                    response = await sdk.forProject.messaging.updateFCMProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        JSON.parse(formValues['serviceAccountJSON'])
+                    );
+                    break;
+                case Providers.APNS:
+                    response = await sdk.forProject.messaging.updateAPNSProvider(
+                        providerId,
+                        undefined,
+                        undefined,
+                        formValues['authKey'],
+                        formValues['authKeyId'],
+                        formValues['teamId'],
+                        formValues['bundleId']
+                    );
+                    break;
+            }
+            originalfiles = files;
+            await invalidate(Dependencies.MESSAGING_PROVIDER);
+            addNotification({
+                type: 'success',
+                message: `${response.name} has been updated`
+            });
+            trackEvent(Submit.MessagingProviderUpdate, {
+                provider: provider
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingProviderUpdate);
+        }
+    }
+
+    $: updated =
+        inputs
+            .filter((input) => input.type !== 'file')
+            .some((input) => formValues[input.name] !== params[input.name]) ||
+        Object.keys(files).some((key) => files[key] !== originalfiles[key]);
+</script>
+
+<Form onSubmit={update}>
+    <CardGrid>
+        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
+            <Heading tag="h6" size="7">Settings</Heading>
+        </div>
+        <p>
+            Configure the settings to <Button
+                link
+                href={`https://appwrite.io/docs/products/messaging/providers/${provider}`}
+                external>enable {displayName}</Button> to send {message}, or <Button
+                link
+                on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the
+            provider settings.
+        </p>
+        <svelte:fragment slot="aside">
+            <SettingsFormList bind:files {inputs} bind:params={formValues} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <div class="u-flex u-flex-wrap u-gap-12">
+                <Button disabled={!updated} submit>Update</Button>
+            </div>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<CreateMember bind:showCreate={newMemberModal} />
diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
index 78d81d5d9..27d179154 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
@@ -5,16 +5,11 @@
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
-    import { MessagingProviderType } from '@appwrite.io/console';
     import Provider, { Providers } from '../../provider.svelte';
     import ProviderType from '../../providerType.svelte';
-    import Update from '../update.svelte';
-    import { providerParams, providerType, provider } from '../store';
     import { provider as providerData } from './store';
 
     let enabled: boolean = null;
@@ -23,144 +18,6 @@
         enabled ??= $providerData.enabled;
     });
 
-    function configure() {
-        if (!isValueOfStringEnum(MessagingProviderType, $providerData.type)) {
-            throw new Error(`Invalid provider type: ${$providerData.type}`);
-        }
-
-        if (!isValueOfStringEnum(Providers, $providerData.provider)) {
-            throw new Error(`Invalid provider: ${$providerData.provider}`);
-        }
-        $providerType = $providerData.type;
-        $provider = $providerData.provider;
-
-        switch ($provider) {
-            case Providers.Twilio:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    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:
-                $providerParams[$provider] = {
-                    providerId: $providerData.$id,
-                    name: $providerData.name,
-                    enabled: $providerData.enabled
-                };
-                if ('serviceAccountJSON' in $providerData.credentials) {
-                    const serviceAccountJSON = $providerData.credentials['serviceAccountJSON'];
-                    if (typeof serviceAccountJSON === 'string') {
-                        $providerParams[$provider].serviceAccountJSON = serviceAccountJSON;
-                    } else if (serviceAccountJSON instanceof Object) {
-                        $providerParams[$provider].serviceAccountJSON =
-                            JSON.stringify(serviceAccountJSON);
-                    }
-                }
-                break;
-            case Providers.APNS:
-                $providerParams[$provider] = {
-                    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;
-        }
-
-        wizard.start(Update);
-    }
-
     async function updateStatus() {
         try {
             let response = { $id: '', name: '' };
@@ -292,7 +149,6 @@
 
     <svelte:fragment slot="actions">
         <div class="u-flex u-flex-wrap u-gap-12">
-            <Button secondary on:click={() => configure()}>Configure</Button>
             <Button disabled={$providerData.enabled === enabled} on:click={() => updateStatus()}
                 >Update</Button>
         </div>
diff --git a/src/routes/console/project-[project]/messaging/providers/update.svelte b/src/routes/console/project-[project]/messaging/providers/update.svelte
deleted file mode 100644
index f20606214..000000000
--- a/src/routes/console/project-[project]/messaging/providers/update.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts">
-    import { Wizard } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizard.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';
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { project } from '../../store';
-    import { wizard } from '$lib/stores/wizard';
-    import { provider, providerParams } from './store';
-    import { Providers } from '../provider.svelte';
-    import { Dependencies } from '$lib/constants';
-    import type { Models } from '@appwrite.io/console';
-
-    async function update() {
-        try {
-            let response: Models.Provider;
-            const providerId = $providerParams[$provider].providerId;
-            switch ($provider) {
-                case Providers.Twilio:
-                    response = await sdk.forProject.messaging.updateTwilioProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].accountSid,
-                        $providerParams[$provider].authToken,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Msg91:
-                    response = await sdk.forProject.messaging.updateMsg91Provider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].senderId,
-                        $providerParams[$provider].authKey,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Telesign:
-                    response = await sdk.forProject.messaging.updateTelesignProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].username,
-                        $providerParams[$provider].password,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Textmagic:
-                    response = await sdk.forProject.messaging.updateTextmagicProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].username,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Vonage:
-                    response = await sdk.forProject.messaging.updateVonageProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].apiSecret,
-                        $providerParams[$provider].from
-                    );
-                    break;
-                case Providers.Mailgun:
-                    response = await sdk.forProject.messaging.updateMailgunProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].domain,
-                        $providerParams[$provider].isEuRegion,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined
-                    );
-                    break;
-                case Providers.Sendgrid:
-                    response = await sdk.forProject.messaging.updateSendgridProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].apiKey,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined
-                    );
-                    break;
-                case Providers.SMTP:
-                    response = await sdk.forProject.messaging.updateSMTPProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].host,
-                        $providerParams[$provider].port || undefined,
-                        $providerParams[$provider].username || undefined,
-                        $providerParams[$provider].password || undefined,
-                        $providerParams[$provider].encryption,
-                        $providerParams[$provider].autoTLS,
-                        $providerParams[$provider].fromName || undefined,
-                        $providerParams[$provider].fromEmail,
-                        $providerParams[$provider].replyToName || undefined,
-                        $providerParams[$provider].replyToEmail || undefined,
-                        $providerParams[$provider].enabled
-                    );
-                    break;
-                case Providers.FCM:
-                    response = await sdk.forProject.messaging.updateFCMProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        JSON.parse($providerParams[$provider].serviceAccountJSON)
-                    );
-                    break;
-                case Providers.APNS:
-                    response = await sdk.forProject.messaging.updateAPNSProvider(
-                        providerId,
-                        $providerParams[$provider].name,
-                        $providerParams[$provider].enabled,
-                        $providerParams[$provider].authKey,
-                        $providerParams[$provider].authKeyId,
-                        $providerParams[$provider].teamId,
-                        $providerParams[$provider].bundleId
-                    );
-                    break;
-            }
-            await invalidate(Dependencies.MESSAGING_PROVIDER);
-            wizard.hide();
-            addNotification({
-                type: 'success',
-                message: `${response.name} has been updated`
-            });
-            trackEvent(Submit.MessagingProviderUpdate, {
-                provider: $provider
-            });
-            await goto(
-                `${base}/console/project-${$project.$id}/messaging/providers/provider-${response.$id}`
-            );
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.MessagingProviderUpdate);
-        }
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Settings
-    });
-</script>
-
-<Wizard title="Update provider" steps={stepsComponents} on:finish={update} finalAction="Update" />