fix billing wizard

Author: lohanidamodar

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

@@ -1,17 +1,21 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
-    import type { PaymentList } from '$lib/sdk/billing';
+    import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
+    import { isStripeInitialized, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { sdk } from '$lib/stores/sdk';
     import { PaymentBoxes } from '$lib/components/billing';
     import { addCreditWizardStore } from '../store';
     import { organization } from '$lib/stores/organization';
+    import type { PaymentMethod } from '@stripe/stripe-js';
 
     let methods: PaymentList;
     let name: string;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
@@ -21,7 +25,24 @@
 
     async function handleSubmit() {
         try {
-            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;
+                }
+            }
             $addCreditWizardStore.paymentMethodId = method.$id;
             invalidate(Dependencies.PAYMENT_METHODS);
         } catch (e) {
@@ -45,6 +66,9 @@
 
     <p class="text"><b>Payment method</b></p>
     <PaymentBoxes
+        bind:paymentMethod
+        bind:showState
+        bind:state
         methods={filteredMethods}
         bind:name
         bind:group={$addCreditWizardStore.paymentMethodId} />