fix: add check for wrong cards

src/lib/components/billing/paymentBoxes.svelte

@@ -29,13 +29,15 @@
                 }
             }
         });
-
-        observer.observe(element, { childList: true });
     });
 
     onDestroy(() => {
         observer.disconnect();
     });
+
+    $: if (element) {
+        observer.observe(element, { childList: true });
+    }
 </script>
 
 <RadioBoxes elements={methods} total={methods?.length} variableName="$id" name="payment" bind:group>

src/lib/layout/containerHeader.svelte

@@ -102,7 +102,7 @@
 {/if}
 
 <header class:u-flex={isFlex} class="u-gap-12 common-section u-main-space-between u-flex-wrap">
-    <div class="u-flex u-cross-child-center u-gap-16 u-flex-wrap">
+    <div class="u-flex u-cross-child-center u-cross-center u-gap-16 u-flex-wrap">
         <Heading tag={titleTag} size={titleSize}>{title}</Heading>
         {#if isCloud && isLimited}
             <DropList bind:show={showDropdown} width="16">

src/routes/console/account/payments/paymentModal.svelte

@@ -55,14 +55,16 @@
                 }
             }
         });
-
-        observer.observe(element, { childList: true });
     });
 
     onDestroy(() => {
         observer.disconnect();
         document.documentElement.classList.remove('u-overflow-hidden');
     });
+
+    $: if (element) {
+        observer.observe(element, { childList: true });
+    }
 </script>
 
 <FakeModal bind:show title="Add payment method" bind:error onSubmit={handleSubmit}>

src/routes/console/wizard/cloudOrganization/paymentDetails.svelte

@@ -19,23 +19,44 @@
     let methods: PaymentList;
     let name: string;
     let budgetEnabled = false;
+    let initialPaymentMethodId: string;
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
-        $createOrganization.paymentMethodId =
+        initialPaymentMethodId =
             methods.paymentMethods.find((method) => !!method?.last4)?.$id ?? null;
+        $createOrganization.paymentMethodId = initialPaymentMethodId;
     });
 
     async function handleSubmit() {
         if ($createOrganization.billingBudget < 0) {
             throw new Error('Budget cannot be negative');
         }
-        try {
-            const method = await submitStripeCard(name);
-            $createOrganization.paymentMethodId = method.$id;
-            invalidate(Dependencies.PAYMENT_METHODS);
-        } catch (e) {
-            throw new Error('Something went wrong. Please try again.');
+        if ($createOrganization.paymentMethodId) {
+            const card = await sdk.forConsole.billing.getPaymentMethod(
+                $createOrganization.paymentMethodId
+            );
+            if (!card?.last4) {
+                throw new Error(
+                    'The payment method you selected is not valid. Please select a different one.'
+                );
+            }
+        } else {
+            try {
+                const method = await submitStripeCard(name);
+                const card = await sdk.forConsole.billing.getPaymentMethod(method.$id);
+                if (card?.last4) {
+                    $createOrganization.paymentMethodId = card.$id;
+                } else {
+                    throw new Error(
+                        'The payment method you selected is not valid. Please select a different one.'
+                    );
+                }
+                invalidate(Dependencies.PAYMENT_METHODS);
+            } catch (e) {
+                $createOrganization.paymentMethodId = initialPaymentMethodId;
+                throw new Error(e.message);
+            }
         }
     }
 

src/routes/console/wizard/cloudOrganizationChangeTier/paymentDetails.svelte

@@ -18,16 +18,17 @@
     let filteredMethods: PaymentMethodData[];
     let name: string;
     let budgetEnabled = false;
-
+    let initialPaymentMethodId: string;
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
         filteredMethods = methods?.paymentMethods.filter((method) => !!method?.last4);
 
-        $changeOrganizationTier.paymentMethodId =
+        initialPaymentMethodId =
             $organization?.paymentMethodId ??
             $organization?.backupPaymentMethodId ??
             filteredMethods[0]?.$id ??
             null;
+        $changeOrganizationTier.paymentMethodId = initialPaymentMethodId;
         $changeOrganizationTier.billingBudget = $organization?.billingBudget;
         budgetEnabled = !!$organization?.billingBudget;
     });
@@ -36,19 +37,36 @@
         if ($changeOrganizationTier.billingBudget < 0) {
             throw new Error('Budget cannot be negative');
         }
+        if ($changeOrganizationTier.paymentMethodId) {
+            const card = await sdk.forConsole.billing.getPaymentMethod(
+                $changeOrganizationTier.paymentMethodId
+            );
+            if (!card?.last4) {
+                throw new Error(
+                    'The payment method you selected is not valid. Please select a different one.'
+                );
+            }
+        } else {
+            try {
+                await submitStripeCard(name);
+                const latestMethods = await sdk.forConsole.billing.listPaymentMethods();
+                const paymentMethod = symmetricDifference(
+                    methods.paymentMethods,
+                    latestMethods.paymentMethods
+                )[0] as PaymentMethodData;
+                const card = await sdk.forConsole.billing.getPaymentMethod(paymentMethod.$id);
+                if (card?.last4) {
+                    $changeOrganizationTier.paymentMethodId = paymentMethod.$id;
+                } else {
+                    throw new Error(
+                        'The payment method you selected is not valid. Please select a different one.'
+                    );
+                }
 
-        try {
-            await submitStripeCard(name);
-            const latestMethods = await sdk.forConsole.billing.listPaymentMethods();
-            const paymentMethod = symmetricDifference(
-                methods.paymentMethods,
-                latestMethods.paymentMethods
-            )[0] as PaymentMethodData;
-
-            $changeOrganizationTier.paymentMethodId = paymentMethod.$id;
-            invalidate(Dependencies.PAYMENT_METHODS);
-        } catch (e) {
-            throw new Error(e.message);
+                invalidate(Dependencies.PAYMENT_METHODS);
+            } catch (e) {
+                throw new Error(e.message);
+            }
         }
     }