From d03e53b75276a64f43a80fdef4f3372d04b0bbb8 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:30:54 -0800
Subject: [PATCH 1/4] feat(messaging): update settings form list to allow
 grouping inputs

---
 src/lib/elements/forms/inputDomain.svelte     |   3 +-
 src/lib/elements/forms/inputEmail.svelte      |   3 +-
 src/lib/elements/forms/inputPassword.svelte   |   3 +-
 src/lib/elements/forms/inputPhone.svelte      |   3 +-
 .../provider-[provider]/updateSettings.svelte |  15 +-
 .../providers/settingsFormInput.svelte        | 147 ++++++++++++++++++
 .../providers/settingsFormList.svelte         | 119 ++------------
 .../messaging/providers/store.ts              |   3 +-
 .../providers/wizard/settings.svelte          |  10 +-
 9 files changed, 191 insertions(+), 115 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte

diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 26f0b972c..d98a8fe2b 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
@@ -49,7 +50,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index e72c15543..d19dc41ca 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -18,6 +18,7 @@
     export let autocomplete = false;
     export let tooltip: string = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -58,7 +59,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 1ddd2826e..2b665a4c6 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -17,6 +17,7 @@
     export let minlength = 8;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -49,7 +50,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show={showPopover} display="inline-block">
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 2d7f87248..94bf36115 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let isPopoverDefined = true;
+    export let fullWidth = false;
 
     const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
@@ -48,7 +49,7 @@
     }
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} hide={!showLabel} for={id}>
         {label}{#if $$slots.popover && isPopoverDefined}
             <Drop bind:show display="inline-block">
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
index c4c5a912f..e1fe4b242 100644
--- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -13,12 +13,13 @@
     import { onMount } from 'svelte';
     import CreateMember from '$routes/console/organization-[organization]/createMember.svelte';
 
-    export let inputs: ProviderInput[];
+    export let inputs: (ProviderInput | ProviderInput[])[];
     export let providerType: MessagingProviderType;
     export let provider: Providers;
     export let providerId: string;
     export let params: object;
 
+    let flattened: ProviderInput[] = [];
     let formValues: object = {};
     let originalfiles: Record<string, FileList> = {};
     let files: Record<string, FileList> = {};
@@ -41,7 +42,15 @@
     }
 
     onMount(() => {
-        for (const input of inputs) {
+        flattened = [];
+        for (const i of inputs) {
+            if (Array.isArray(i)) {
+                flattened.push(...i);
+            } else {
+                flattened.push(i);
+            }
+        }
+        for (const input of flattened) {
             const value = params[input.name];
             formValues[input.name] = value;
             if (input.type === 'file' && typeof value == 'string' && value.length > 0) {
@@ -198,7 +207,7 @@
     }
 
     $: updated =
-        inputs
+        flattened
             .filter((input) => input.type !== 'file')
             .some((input) => formValues[input.name] !== params[input.name]) ||
         Object.keys(files).some((key) => files[key] !== originalfiles[key]);
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
new file mode 100644
index 000000000..6bec64045
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import {
+        InputDomain,
+        InputEmail,
+        InputFile,
+        InputSelect,
+        InputPhone,
+        InputSwitch,
+        InputText,
+        InputPassword
+    } from '$lib/elements/forms';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import PopoverContent from './popoverContent.svelte';
+    import type {
+        ProviderInput,
+        TwilioProviderParams,
+        Msg91ProviderParams,
+        TelesignProviderParams,
+        TextmagicProviderParams,
+        VonageProviderParams,
+        MailgunProviderParams,
+        SendgridProviderParams,
+        SMTPProviderParams,
+        FCMProviderParams,
+        APNSProviderParams
+    } from './store';
+
+    export let files: Record<string, FileList>;
+    export let input: ProviderInput;
+    export let params: Partial<
+        | TwilioProviderParams
+        | Msg91ProviderParams
+        | TelesignProviderParams
+        | TextmagicProviderParams
+        | VonageProviderParams
+        | MailgunProviderParams
+        | SendgridProviderParams
+        | SMTPProviderParams
+        | FCMProviderParams
+        | APNSProviderParams
+    >;
+    export let fullWidth = false;
+
+    let popoverImage = input.popoverImage;
+</script>
+
+{#if input.type === 'text'}
+    <InputText
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputText>
+{:else if input.type === 'password'}
+    <InputPassword
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        showPasswordButton
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputPassword>
+{:else if input.type === 'email'}
+    <InputEmail
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputEmail>
+{:else if input.type === 'domain'}
+    <InputDomain
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputDomain>
+{:else if input.type === 'phone'}
+    <InputPhone
+        id={input.name}
+        label={input.label}
+        placeholder={input.placeholder}
+        required={!input.optional}
+        isPopoverDefined={input.popover !== undefined}
+        {fullWidth}
+        bind:value={params[input.name]}>
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputPhone>
+{:else if input.type === 'file'}
+    <InputFile
+        label={input.label}
+        allowedFileExtensions={input.allowedFileExtensions}
+        required={!input.optional}
+        tooltip={input.tooltip}
+        isPopoverDefined={input.popover !== undefined}
+        bind:files={files[input.name]}>
+        {fullWidth}
+        <svelte:fragment slot="popover">
+            <PopoverContent lines={input.popover} {popoverImage} />
+        </svelte:fragment>
+    </InputFile>
+{:else if input.type === 'switch'}
+    <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
+        <svelte:fragment slot="description">
+            <p>{@html input.description}</p>
+        </svelte:fragment>
+    </InputSwitch>
+{:else if input.type === 'checkbox'}
+    <InputCheckbox label={input.label} id={input.name} bind:checked={params[input.name]}>
+        <svelte:fragment slot="description">
+            {input.description}
+        </svelte:fragment>
+    </InputCheckbox>
+{:else if input.type === 'select'}
+    <InputSelect
+        label={input.label}
+        id={input.name}
+        options={input.options}
+        required={!input.optional}
+        bind:value={params[input.name]} />
+{/if}
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 609b55790..356ea4759 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -1,17 +1,6 @@
 <script lang="ts">
-    import {
-        FormList,
-        InputDomain,
-        InputEmail,
-        InputFile,
-        InputSelect,
-        InputPhone,
-        InputSwitch,
-        InputText,
-        InputPassword
-    } from '$lib/elements/forms';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
-    import PopoverContent from './popoverContent.svelte';
+    import { FormItem, FormList } from '$lib/elements/forms';
+    import SettingsFormInput from './settingsFormInput.svelte';
     import type {
         ProviderInput,
         TwilioProviderParams,
@@ -27,7 +16,7 @@
     } from './store';
 
     export let files: Record<string, FileList>;
-    export let inputs: ProviderInput[];
+    export let inputs: (ProviderInput | ProviderInput[])[];
     export let params: Partial<
         | TwilioProviderParams
         | Msg91ProviderParams
@@ -44,98 +33,16 @@
 
 <FormList>
     {#each inputs as input}
-        {@const popoverImage = input.popoverImage}
-        {#if input.type === 'text'}
-            <InputText
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputText>
-        {:else if input.type === 'password'}
-            <InputPassword
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                showPasswordButton
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputPassword>
-        {:else if input.type === 'email'}
-            <InputEmail
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputEmail>
-        {:else if input.type === 'domain'}
-            <InputDomain
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputDomain>
-        {:else if input.type === 'phone'}
-            <InputPhone
-                id={input.name}
-                label={input.label}
-                placeholder={input.placeholder}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputPhone>
-        {:else if input.type === 'file'}
-            <InputFile
-                label={input.label}
-                allowedFileExtensions={input.allowedFileExtensions}
-                required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
-                bind:files={files[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
-            </InputFile>
-        {:else if input.type === 'switch'}
-            <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
-                <svelte:fragment slot="description">
-                    <p>{@html input.description}</p>
-                </svelte:fragment>
-            </InputSwitch>
-        {:else if input.type === 'checkbox'}
-            <InputCheckbox label={input.label} id={input.name} bind:checked={params[input.name]}>
-                <svelte:fragment slot="description">
-                    {input.description}
-                </svelte:fragment>
-            </InputCheckbox>
-        {:else if input.type === 'select'}
-            <InputSelect
-                label={input.label}
-                id={input.name}
-                options={input.options}
-                required={!input.optional}
-                bind:value={params[input.name]} />
+        {#if Array.isArray(input)}
+            <FormItem isMultiple>
+                {#each input as i}
+                    <div class="u-flex u-flex-basis-50-percent">
+                        <SettingsFormInput input={i} bind:params bind:files fullWidth />
+                    </div>
+                {/each}
+            </FormItem>
+        {:else}
+            <SettingsFormInput {input} bind:params bind:files />
         {/if}
     {/each}
 </FormList>
diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 37bcd459c..906278948 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -26,6 +26,7 @@ export type ProviderInput = {
         | 'checkbox';
     placeholder?: string;
     description?: string;
+    tooltip?: string;
     popover?: string[];
     popoverImage?: { src: { light: string; dark: string }; alt: string };
     allowedFileExtensions?: string[];
@@ -45,7 +46,7 @@ type ProvidersMap = {
                 title: string;
                 description: string;
                 needAHand?: string[];
-                configure: ProviderInput[];
+                configure: (ProviderInput | ProviderInput[])[];
             };
         };
     };
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
index 46dc634e5..23c2ec44b 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte
@@ -21,7 +21,15 @@
     let open = false;
 
     onMount(() => {
-        for (const input of inputs) {
+        const flattened = [];
+        for (const i of inputs) {
+            if (Array.isArray(i)) {
+                flattened.push(...i);
+            } else {
+                flattened.push(i);
+            }
+        }
+        for (const input of flattened) {
             if (input.type === 'file' && $providerParams[$provider][input.name].length > 0) {
                 const dataTransfer = new DataTransfer();
                 const f = new File(

From 5a9a7828960f44347d6085b11d988713eac74444 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:34:28 -0800
Subject: [PATCH 2/4] feat(messaging): group sender and reply to fields

---
 .../messaging/providers/store.ts              | 174 ++++++++++--------
 1 file changed, 93 insertions(+), 81 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 906278948..731b760d9 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -219,33 +219,37 @@ export const providers: ProvidersMap = {
                         description:
                             'Enable the EU region setting if your domain is within the European Union.'
                     },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    }
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ]
                 ]
             },
             [Providers.Sendgrid]: {
@@ -264,66 +268,43 @@ export const providers: ProvidersMap = {
                             'Head to <b>Settings -> API Keys -> Create API key.</b>'
                         ]
                     },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    }
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ]
                 ]
             },
             [Providers.SMTP]: {
                 title: 'SMTP',
                 description: '',
                 configure: [
-                    {
-                        label: 'Sender name',
-                        name: 'fromName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Sender email',
-                        name: 'fromEmail',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    },
-                    {
-                        label: 'Reply to name',
-                        name: 'replyToName',
-                        type: 'text',
-                        optional: true,
-                        placeholder: 'Enter name'
-                    },
-                    {
-                        label: 'Reply to email',
-                        name: 'replyToEmail',
-                        type: 'email',
-                        optional: true,
-                        placeholder: 'Enter email'
-                    },
                     {
                         label: 'Server host',
                         name: 'host',
@@ -368,6 +349,37 @@ export const providers: ProvidersMap = {
                         type: 'checkbox',
                         optional: true
                     },
+                    [
+                        {
+                            label: 'Sender email',
+                            name: 'fromEmail',
+                            type: 'email',
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Sender name',
+                            name: 'fromName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
+                    [
+                        {
+                            label: 'Reply-to email',
+                            name: 'replyToEmail',
+                            type: 'email',
+                            optional: true,
+                            placeholder: 'Enter email'
+                        },
+                        {
+                            label: 'Reply-to name',
+                            name: 'replyToName',
+                            type: 'text',
+                            optional: true,
+                            placeholder: 'Enter name'
+                        }
+                    ],
                     {
                         label: 'Mailer',
                         name: 'mailer',

From 64d46a10bcfaaee239677f109d67915df2f6cda8 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:37:16 -0800
Subject: [PATCH 3/4] feat(messaging): clarify SMTP mailer field

---
 .../project-[project]/messaging/providers/store.ts        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 731b760d9..8b511b4c6 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -381,15 +381,13 @@ export const providers: ProvidersMap = {
                         }
                     ],
                     {
-                        label: 'Mailer',
+                        label: 'X-Mailer header',
                         name: 'mailer',
                         type: 'text',
                         optional: true,
                         placeholder: 'Enter mailer',
-                        popover: [
-                            '<b>What is the Mailer?</b>',
-                            'The value to use for the X-Mailer header.'
-                        ]
+                        tooltip:
+                            'The X-Mailer header is used to identify the software or client used for composing or sending the email. It typically includes information such as the name and version of the email program, aiding in troubleshooting and debugging.'
                     }
                 ]
             }

From 5f82fbda4070c6e253266cf15361ad189a6f8633 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:39:41 -0800
Subject: [PATCH 4/4] feat(messaging): SMTP design review fixes

---
 .../project-[project]/messaging/providers/store.ts  |  3 ++-
 .../messaging/providers/wizard/provider.svelte      | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 8b511b4c6..fd597b9e2 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -302,8 +302,9 @@ export const providers: ProvidersMap = {
                 ]
             },
             [Providers.SMTP]: {
+                classIcon: 'mail',
                 title: 'SMTP',
-                description: '',
+                description: 'Generic SMTP server.',
                 configure: [
                     {
                         label: 'Server host',
diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
index cda98136b..9b41f6d63 100644
--- a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte
@@ -134,6 +134,7 @@
 
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Provider</svelte:fragment>
+    <div class="u-sep-block-start u-padding-block-end-32" />
     <FormList gap={16}>
         <InputText
             id="name"
@@ -173,3 +174,15 @@
         </div>
     </FormList>
 </WizardStep>
+
+<style lang="scss">
+    .grid-box {
+        --grid-gap: 1rem;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    :global(body:not(.theme-dark)) .grid-box :global(.card) {
+        --p-card-bg-color-default: var(--color-neutral-5);
+        --p-card-bg-color-hover: var(--color-neutral-10);
+    }
+</style>