Fix replace card

Author: lohanidamodar

src/lib/components/billing/paymentBoxes.svelte

@@ -5,6 +5,8 @@
     import { initializeStripe, unmountPaymentElement } from '$lib/stores/stripe';
     import { Badge, Card, Layout } from '@appwrite.io/pink-svelte';
     import type { PaymentMethodData } from '$lib/sdk/billing';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let methods: PaymentMethodData[];
     export let group: string;
@@ -14,6 +16,9 @@
     export let disabledCondition: string = null;
     export let setAsDefault = false;
     export let showSetAsDefault = false;
+    export let showState = false;
+    export let paymentMethod: PaymentMethod | null = null;
+    export let state: string = '';
 
     let element: HTMLDivElement;
     let loader: HTMLDivElement;
@@ -79,25 +84,29 @@
     {/each}
     <Card.Selector title="Add new payment method" name="$new" bind:group value="$new" />
     {#if group === '$new'}
-        <InputText
-            id="name"
-            label="Cardholder name"
-            placeholder="Cardholder name"
-            bind:value={name}
-            required
-            autofocus={true} />
+        {#if showState}
+            <StatePicker card={paymentMethod} bind:state />
+        {:else}
+            <InputText
+                id="name"
+                label="Cardholder name"
+                placeholder="Cardholder name"
+                bind:value={name}
+                required
+                autofocus={true} />
 
-        <div class="aw-stripe-container" data-private>
-            <div class="loader-container" bind:this={loader}>
-                <div class="loader"></div>
+            <div class="aw-stripe-container" data-private>
+                <div class="loader-container" bind:this={loader}>
+                    <div class="loader"></div>
+                </div>
+                <div bind:this={element}></div>
             </div>
-            <div bind:this={element}></div>
-        </div>
-        {#if showSetAsDefault}
-            <InputChoice
-                bind:value={setAsDefault}
-                id="default"
-                label="Set as default payment method for this organization" />
+            {#if showSetAsDefault}
+                <InputChoice
+                    bind:value={setAsDefault}
+                    id="default"
+                    label="Set as default payment method for this organization" />
+            {/if}
         {/if}
     {/if}
 </Layout.Stack>

src/lib/components/billing/statePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { states } from './state.ts';
+    import { states } from './state';
     import { InputSelect } from '$lib/elements/forms';
     import type { PaymentMethod } from '@stripe/stripe-js';
     import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte';

src/routes/(console)/organization-[organization]/billing/replaceCard.svelte

@@ -5,12 +5,13 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-    import { submitStripeCard } from '$lib/stores/stripe';
+    import { setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { onMount } from 'svelte';
-    import type { PaymentList } from '$lib/sdk/billing';
+    import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { PaymentBoxes } from '$lib/components/billing';
+    import type { PaymentMethod } from '@stripe/stripe-js';
 
     export let organization: Organization;
     export let show = false;
@@ -20,6 +21,9 @@
     let name: string;
     let error: string;
     let selectedPaymentMethodId: string;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     onMount(async () => {
         if (!organization.paymentMethodId && !organization.backupPaymentMethodId) {
@@ -41,7 +45,24 @@
     async function handleSubmit() {
         try {
             if (selectedPaymentMethodId === '$new') {
-                const method = await submitStripeCard(name, organization.$id);
+                if (showState && !state) {
+                    throw Error('Please select a state');
+                }
+                let method: PaymentMethodData;
+                if (showState) {
+                    method = await setPaymentMethod(paymentMethod.id, name, state);
+                } else {
+                    const card = await submitStripeCard(name, organization.$id);
+                    if (card && Object.hasOwn(card, 'id')) {
+                        if ((card as PaymentMethod).card.country === 'US') {
+                            paymentMethod = card as PaymentMethod;
+                            showState = true;
+                            return;
+                        }
+                    } else if (card && Object.hasOwn(card, '$id')) {
+                        method = card as PaymentMethodData;
+                    }
+                }
                 selectedPaymentMethodId = method.$id;
             }
             isBackup
@@ -97,6 +118,9 @@
     <PaymentBoxes
         methods={filteredMethods}
         bind:name
+        bind:paymentMethod
+        bind:showState
+        bind:state
         bind:group={selectedPaymentMethodId}
         defaultMethod={organization?.paymentMethodId}
         backupMethod={organization?.backupPaymentMethodId}