diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte index 62170b8137..c6ead89112 100644 --- a/src/lib/components/billing/paymentBoxes.svelte +++ b/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 }); + } diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte index 4411b6f81e..08a7813f12 100644 --- a/src/lib/layout/containerHeader.svelte +++ b/src/lib/layout/containerHeader.svelte @@ -102,7 +102,7 @@ {/if}
-
+
{title} {#if isCloud && isLimited} diff --git a/src/routes/console/account/payments/paymentModal.svelte b/src/routes/console/account/payments/paymentModal.svelte index 02390978b3..abe6767fee 100644 --- a/src/routes/console/account/payments/paymentModal.svelte +++ b/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 }); + } diff --git a/src/routes/console/wizard/cloudOrganization/paymentDetails.svelte b/src/routes/console/wizard/cloudOrganization/paymentDetails.svelte index 5dc5821b0f..b9378f5f1d 100644 --- a/src/routes/console/wizard/cloudOrganization/paymentDetails.svelte +++ b/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); + } } } diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/paymentDetails.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/paymentDetails.svelte index 4a0e90c6e4..b829437199 100644 --- a/src/routes/console/wizard/cloudOrganizationChangeTier/paymentDetails.svelte +++ b/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); + } } }