From 8e0b6898af93fc494001bc853c9360a39b5de71a Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 7 Feb 2024 14:38:26 +0100 Subject: [PATCH 1/4] feat: retry payment email flow --- .../billing/+page.svelte | 59 ++++++++++++------- .../billing/paymentHistory.svelte | 14 ++--- .../billing/store.ts | 5 +- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/src/routes/console/organization-[organization]/billing/+page.svelte b/src/routes/console/organization-[organization]/billing/+page.svelte index a6055bedbb..379814dd17 100644 --- a/src/routes/console/organization-[organization]/billing/+page.svelte +++ b/src/routes/console/organization-[organization]/billing/+page.svelte @@ -20,6 +20,8 @@ import { wizard } from '$lib/stores/wizard'; import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte'; import { BillingPlan } from '$lib/constants'; + import RetryPaymentModal from './retryPaymentModal.svelte'; + import { selectedInvoice, showRetryModal } from './store'; $: defaultPaymentMethod = $paymentMethods?.paymentMethods?.find( (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId @@ -30,29 +32,40 @@ ); onMount(async () => { - if ( - $page.url.searchParams.has('type') && - $page.url.searchParams.get('type') === 'upgrade' - ) { - wizard.start(ChangeOrganizationTierCloud); - } + if ($page.url.searchParams.has('type')) { + if ($page.url.searchParams.get('type') === 'upgrade') { + wizard.start(ChangeOrganizationTierCloud); + } + + if ( + $page.url.searchParams.has('invoice') && + $page.url.searchParams.get('type') === 'confirmation' + ) { + const invoiceId = $page.url.searchParams.get('invoice'); + const invoice = await sdk.forConsole.billing.getInvoice( + $page.params.organization, + invoiceId + ); - if ( - $page.url.searchParams.has('invoice') && - $page.url.searchParams.has('type') && - $page.url.searchParams.get('type') === 'confirmation' - ) { - const invoiceId = $page.url.searchParams.get('invoice'); - const invoice = await sdk.forConsole.billing.getInvoice( - $page.params.organization, - invoiceId - ); + await confirmPayment( + $organization.$id, + invoice.clientSecret, + $organization.paymentMethodId + ); + } - await confirmPayment( - $organization.$id, - invoice.clientSecret, - $organization.paymentMethodId - ); + if ( + $page.url.searchParams.has('invoice') && + $page.url.searchParams.get('type') === 'retry' + ) { + const invoiceId = $page.url.searchParams.get('invoice'); + const invoice = await sdk.forConsole.billing.getInvoice( + $page.params.organization, + invoiceId + ); + selectedInvoice.set(invoice); + showRetryModal.set(true); + } } if ($page.url.searchParams.has('clientSecret')) { const clientSecret = $page.url.searchParams.get('clientSecret'); @@ -101,3 +114,7 @@ {/if} + +{#if $selectedInvoice} + +{/if} diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte index 8ca0b69d91..ea71e20619 100644 --- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte +++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte @@ -21,17 +21,15 @@ TableScroll } from '$lib/elements/table'; import { toLocaleDate } from '$lib/helpers/date'; - import type { Invoice, InvoiceList } from '$lib/sdk/billing'; + import type { InvoiceList } from '$lib/sdk/billing'; import { sdk } from '$lib/stores/sdk'; import { VARS } from '$lib/system'; import { Query } from '@appwrite.io/console'; import { onMount } from 'svelte'; - import RetryPaymentModal from './retryPaymentModal.svelte'; import { trackEvent } from '$lib/actions/analytics'; + import { selectedInvoice, showRetryModal } from './store'; let showDropdown = []; - let showRetryModal = false; - let selectedInvoice: Invoice | null = null; let offset = 0; let invoiceList: InvoiceList = { @@ -131,8 +129,8 @@ { - selectedInvoice = invoice; - showRetryModal = true; + $selectedInvoice = invoice; + $showRetryModal = true; showDropdown[i] = !showDropdown[i]; trackEvent(`click_retry_payment`, { from: 'button', @@ -164,7 +162,3 @@ {/if} - -{#if selectedInvoice} - -{/if} diff --git a/src/routes/console/organization-[organization]/billing/store.ts b/src/routes/console/organization-[organization]/billing/store.ts index e75622d62b..314b4b31cb 100644 --- a/src/routes/console/organization-[organization]/billing/store.ts +++ b/src/routes/console/organization-[organization]/billing/store.ts @@ -1,6 +1,6 @@ import { page } from '$app/stores'; import type { WizardStepsType } from '$lib/layout/wizard.svelte'; -import type { AggregationList } from '$lib/sdk/billing'; +import type { AggregationList, Invoice } from '$lib/sdk/billing'; import { derived, writable } from 'svelte/store'; export const aggregationList = derived( @@ -13,3 +13,6 @@ export const addCreditWizardStore = writable<{ coupon: string; paymentMethodId: coupon: null, paymentMethodId: null }); + +export let selectedInvoice = writable(null); +export let showRetryModal = writable(false); From 3c024bc32a8690801797847e715eaee04ef45778 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 7 Feb 2024 16:19:51 +0100 Subject: [PATCH 2/4] fix: linter --- .../console/organization-[organization]/billing/store.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/console/organization-[organization]/billing/store.ts b/src/routes/console/organization-[organization]/billing/store.ts index 314b4b31cb..ca081c2917 100644 --- a/src/routes/console/organization-[organization]/billing/store.ts +++ b/src/routes/console/organization-[organization]/billing/store.ts @@ -14,5 +14,5 @@ export const addCreditWizardStore = writable<{ coupon: string; paymentMethodId: paymentMethodId: null }); -export let selectedInvoice = writable(null); -export let showRetryModal = writable(false); +export const selectedInvoice = writable(null); +export const showRetryModal = writable(false); From e4eec358b85e92b98a7f7090d9a6023e31df0acd Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 8 Feb 2024 16:30:31 +0100 Subject: [PATCH 3/4] fix: remove setAsDefault when switching payment method --- src/lib/components/billing/paymentBoxes.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte index e964c3d773..0ff377796d 100644 --- a/src/lib/components/billing/paymentBoxes.svelte +++ b/src/lib/components/billing/paymentBoxes.svelte @@ -46,6 +46,11 @@ $: if (element) { observer.observe(element, { childList: true }); } + + //Set setAsDefault as false when group changes + $: if (group || group === null) { + setAsDefault = false; + } Date: Mon, 12 Feb 2024 11:34:27 +0100 Subject: [PATCH 4/4] fix: disable set as default --- .../organization-[organization]/billing/retryPaymentModal.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte index ae47a07487..8287827735 100644 --- a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte +++ b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte @@ -125,7 +125,6 @@ methods={filteredMethods} defaultMethod={$organization?.paymentMethodId} backupMethod={$organization?.backupPaymentMethodId} - showSetAsDefault bind:setAsDefault bind:name bind:group={paymentMethodId} />