From 1f57b21c89eab2e3abe7fbdbb0a999847e2246d1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 27 May 2025 15:07:08 +0200
Subject: [PATCH] fix: create organization payment methods not updating

---
 .../billing/selectPaymentMethod.svelte        |  1 +
 src/lib/constants.ts                          |  1 +
 .../create-organization/+page.svelte          | 37 ++++++++++++-------
 .../(console)/create-organization/+page.ts    |  5 ++-
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte
index dac287731f..7dfe14a2ed 100644
--- a/src/lib/components/billing/selectPaymentMethod.svelte
+++ b/src/lib/components/billing/selectPaymentMethod.svelte
@@ -21,6 +21,7 @@
     async function cardSaved(event: CustomEvent<PaymentMethodData>) {
         value = event.detail.$id;
         invalidate(Dependencies.UPGRADE_PLAN);
+        invalidate(Dependencies.CREATE_ORGANIZATION);
     }
 
     onMount(() => {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 58ae2e443b..067b354dd9 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -18,6 +18,7 @@ export enum Dependencies {
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
     UPGRADE_PLAN = 'dependency:upgrade_plan',
+    CREATE_ORGANIZATION = 'dependency:create_organization',
     PAYMENT_METHODS = 'dependency:paymentMethods',
     ORGANIZATION = 'dependency:organization',
     MEMBERS = 'dependency:members',
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
index 5599131ceb..77049390e7 100644
--- a/src/routes/(console)/create-organization/+page.svelte
+++ b/src/routes/(console)/create-organization/+page.svelte
@@ -213,20 +213,29 @@
             </Fieldset>
             {#if selectedPlan !== BillingPlan.FREE}
                 <Fieldset legend="Payment">
-                    <SelectPaymentMethod
-                        methods={data.paymentMethods}
-                        bind:value={paymentMethodId}
-                        bind:taxId>
-                        <svelte:fragment slot="actions">
-                            {#if !selectedCoupon?.code}
-                                <Divider vertical style="height: 2rem;" />
-                                <Button compact on:click={() => (showCreditModal = true)}>
-                                    <Icon icon={IconPlus} slot="start" size="s" />
-                                    Add credits
-                                </Button>
-                            {/if}
-                        </svelte:fragment>
-                    </SelectPaymentMethod>
+                    <Layout.Stack gap="s" alignItems="flex-start">
+                        <SelectPaymentMethod
+                            methods={data.paymentMethods}
+                            bind:value={paymentMethodId}
+                            bind:taxId>
+                            <svelte:fragment slot="actions">
+                                {#if !selectedCoupon?.code && paymentMethodId}
+                                    <Divider vertical style="height: 2rem;" />
+                                    <Button compact on:click={() => (showCreditModal = true)}>
+                                        <Icon icon={IconPlus} slot="start" size="s" />
+                                        Add credits
+                                    </Button>
+                                {/if}
+                            </svelte:fragment>
+                        </SelectPaymentMethod>
+
+                        {#if !selectedCoupon?.code && !paymentMethodId}
+                            <Button compact on:click={() => (showCreditModal = true)}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add credits
+                            </Button>
+                        {/if}
+                    </Layout.Stack>
                 </Fieldset>
                 <Fieldset legend="Invite members">
                     <InputTags
diff --git a/src/routes/(console)/create-organization/+page.ts b/src/routes/(console)/create-organization/+page.ts
index 6c3cfe2f00..c3eff35d6a 100644
--- a/src/routes/(console)/create-organization/+page.ts
+++ b/src/routes/(console)/create-organization/+page.ts
@@ -1,10 +1,11 @@
-import { BillingPlan } from '$lib/constants';
+import { BillingPlan, Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 import type { Coupon } from '$lib/sdk/billing';
 import type { Organization } from '$lib/stores/organization';
 
-export const load: PageLoad = async ({ url, parent }) => {
+export const load: PageLoad = async ({ url, parent, depends }) => {
+    depends(Dependencies.CREATE_ORGANIZATION);
     const { organizations } = await parent();
     const [coupon, paymentMethods] = await Promise.all([
         getCoupon(url),