Merge pull request #776 from appwrite/feat-retry-payment-email-flow

feat: retry payment email flow
appwrite · Feb 12, 2024 · 6c69f5b · 6c69f5b
2 parents afcae38 + b1aec3d
commit 6c69f5b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 35 deletions.
diff --git 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;
+    }
 </script>
 
 <RadioBoxes

diff --git 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}
     <AvailableCredit />
 </Container>
+
+{#if $selectedInvoice}
+    <RetryPaymentModal bind:show={$showRetryModal} bind:invoice={$selectedInvoice} />
+{/if}
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -22,17 +22,15 @@
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { formatCurrency } from '$lib/helpers/numbers';
-    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 = {
@@ -130,13 +128,12 @@
                                                 event="download_invoice">
                                                 Download PDF
                                             </DropListLink>
-                                            <!-- {#if status === 'overdue' || status === 'failed'} -->
-                                            {#if false}
+                                            {#if status === 'overdue' || status === 'failed'}
                                                 <DropListItem
                                                     icon="refresh"
                                                     on:click={() => {
-                                                        selectedInvoice = invoice;
-                                                        showRetryModal = true;
+                                                        $selectedInvoice = invoice;
+                                                        $showRetryModal = true;
                                                         showDropdown[i] = !showDropdown[i];
                                                         trackEvent(`click_retry_payment`, {
                                                             from: 'button',
@@ -168,7 +165,3 @@
         {/if}
     </svelte:fragment>
 </CardGrid>
-
-{#if selectedInvoice}
-    <RetryPaymentModal bind:show={showRetryModal} bind:invoice={selectedInvoice} />
-{/if}
diff --git 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} />

diff --git 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 const selectedInvoice = writable<Invoice>(null);
+export const showRetryModal = writable(false);