From 04041f5a9fd4dbc4d46cfef55212d1e79b86a6fe Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Jun 2024 17:05:48 +0200
Subject: [PATCH] fix: primary button behavior in new wizard

---
 .../billing/selectPaymentMethod.svelte        | 57 +++++++++++++------
 src/lib/elements/forms/helper.svelte          |  4 +-
 .../change-plan/+page.svelte                  | 12 ++--
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte
index a35f81b6a..ccd4f4a9e 100644
--- a/src/lib/components/billing/selectPaymentMethod.svelte
+++ b/src/lib/components/billing/selectPaymentMethod.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, InputChoice, InputSelectSearch, InputText } from '$lib/elements/forms';
+    import { Button, Helper, InputChoice, InputSelectSearch, InputText } from '$lib/elements/forms';
     import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import { hasStripePublicKey, isCloud } from '$lib/system';
@@ -14,6 +14,18 @@
 
     let showTaxId = false;
     let showPaymentModal = false;
+    let input: HTMLInputElement;
+    let error: string;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (input.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = input.validationMessage;
+    };
 
     async function cardSaved(event: CustomEvent<PaymentMethodData>) {
         value = event.detail.$id;
@@ -85,22 +97,33 @@
         </svelte:fragment>
     </InputSelectSearch>
 {:else}
-    <Card
-        isDashed
-        style="--p-card-padding:0.75rem; --p-card-bg-color: transparent; --p-card-border-radius: 0.5rem"
-        isTile>
-        <div class="u-flex u-main-space-between u-cross-center">
-            <p class="u-flex u-gap-8 u-cross-center">
-                <span
-                    class="icon-exclamation u-color-text-warning"
-                    style:font-size="var(--icon-size-medium)"></span>
-                <span class="text">A payment method is required</span>
-            </p>
-            <Button secondary on:click={() => (showPaymentModal = true)}>
-                <span class="icon-plus"></span> <span class="text">Add</span>
-            </Button>
-        </div>
-    </Card>
+    <div>
+        <input
+            bind:this={input}
+            on:invalid={handleInvalid}
+            required
+            class="u-hide"
+            type="text"
+            name="method"
+            id="method" />
+        <Card
+            isDashed
+            style="--p-card-padding:0.75rem; --p-card-bg-color: transparent; --p-card-border-radius: 0.5rem"
+            isTile>
+            <div class="u-flex u-main-space-between u-cross-center">
+                <p>
+                    <span class="icon-exclamation-circle"></span>
+                    <span class="text">No saved payment methods</span>
+                </p>
+                <Button secondary on:click={() => (showPaymentModal = true)}>
+                    <span class="icon-plus"></span> <span class="text">Add</span>
+                </Button>
+            </div>
+        </Card>
+        {#if error}
+            <Helper class="u-position-relative" type="warning">{error}</Helper>
+        {/if}
+    </div>
 {/if}
 
 {#if showPaymentModal && isCloud && hasStripePublicKey}
diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index f2485d1fe..9f002bb82 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
+    let classes = '';
+    export { classes as class };
 </script>
 
 <p
-    class="helper u-margin-block-start-8"
+    class="helper u-margin-block-start-8 {classes}"
     class:u-color-text-info={type === 'info'}
     class:u-color-text-danger={type === 'error'}
     class:u-color-text-success={type === 'success'}
diff --git a/src/routes/console/organization-[organization]/change-plan/+page.svelte b/src/routes/console/organization-[organization]/change-plan/+page.svelte
index 06cf72e2b..5eb18fbb2 100644
--- a/src/routes/console/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/console/organization-[organization]/change-plan/+page.svelte
@@ -242,12 +242,7 @@
     $: if (billingPlan === BillingPlan.PRO) {
         loadPaymentMethods();
     }
-    $: isButtonDisabled =
-        $organization.billingPlan === billingPlan
-            ? true
-            : isUpgrade
-              ? !paymentMethodId
-              : !feedbackDowngradeReason;
+    $: isButtonDisabled = $organization.billingPlan === billingPlan;
 </script>
 
 <svelte:head>
@@ -255,8 +250,9 @@
 </svelte:head>
 
 <WizardSecondaryContainer bind:showExitModal href={previousPage}>
-    <WizardSecondaryHeader confirmExit on:exit={() => (showExitModal = true)}
-        >Change plan</WizardSecondaryHeader>
+    <WizardSecondaryHeader confirmExit on:exit={() => (showExitModal = true)}>
+        Change plan
+    </WizardSecondaryHeader>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <Label class="label u-margin-block-start-16">Select plan</Label>