From 431c5c2cf35c1b9fab4cf8e5530ec1bf2134d571 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 2 Feb 2024 16:54:13 +0100
Subject: [PATCH 1/4] feat: retry failed payments

---
 src/lib/actions/analytics.ts                  |  1 +
 src/lib/stores/stripe.ts                      | 10 ++-
 .../billing/paymentHistory.svelte             | 26 ++++++-
 .../billing/retryPaymentModal.svelte          | 76 +++++++++++++++++++
 4 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index ad6f5ab71f..181592ef0c 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -263,6 +263,7 @@ export enum Submit {
     PaymentMethodCreate = 'submit_payment_method_create',
     PaymentMethodUpdate = 'submit_payment_method_update',
     PaymentMethodDelete = 'submit_payment_method_delete',
+    RetryPayment = 'submit_retry_payment',
     BillingAddressCreate = 'submit_billing_address_create',
     BillingAddressUpdate = 'submit_billing_address_update',
     BillingAddressDelete = 'submit_billing_address_delete',
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index 963adcf9e6..ac8163af5a 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -101,9 +101,15 @@ export async function submitStripeCard(name: string, urlRoute?: string) {
     }
 }
 
-export async function confirmPayment(orgId: string, clientSecret: string, paymentMethodId: string) {
+export async function confirmPayment(
+    orgId: string,
+    clientSecret: string,
+    paymentMethodId: string,
+    route?: string
+) {
     try {
-        const url = `${window.location.origin}/console/organization-${orgId}/billing`;
+        const url =
+            window.location.origin + route ? route : `/console/organization-${orgId}/billing`;
 
         const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(paymentMethodId);
 
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index d0b628c72a..8ca0b69d91 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -3,6 +3,7 @@
     import {
         CardGrid,
         DropList,
+        DropListItem,
         DropListLink,
         EmptySearch,
         Heading,
@@ -20,13 +21,17 @@
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import type { InvoiceList } from '$lib/sdk/billing';
+    import type { Invoice, 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';
 
     let showDropdown = [];
+    let showRetryModal = false;
+    let selectedInvoice: Invoice | null = null;
 
     let offset = 0;
     let invoiceList: InvoiceList = {
@@ -122,6 +127,21 @@
                                                 event="download_invoice">
                                                 Download PDF
                                             </DropListLink>
+                                            {#if status === 'overdue' || status === 'failed'}
+                                                <DropListItem
+                                                    icon="refresh"
+                                                    on:click={() => {
+                                                        selectedInvoice = invoice;
+                                                        showRetryModal = true;
+                                                        showDropdown[i] = !showDropdown[i];
+                                                        trackEvent(`click_retry_payment`, {
+                                                            from: 'button',
+                                                            source: 'billing_invoice_menu'
+                                                        });
+                                                    }}>
+                                                    Retry payment
+                                                </DropListItem>
+                                            {/if}
                                         </svelte:fragment>
                                     </DropList>
                                 </TableCell>
@@ -144,3 +164,7 @@
         {/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
new file mode 100644
index 0000000000..b2aa266deb
--- /dev/null
+++ b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { FakeModal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import type { Invoice } from '$lib/sdk/billing';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { page } from '$app/stores';
+    import { VARS } from '$lib/system';
+    import { confirmPayment } from '$lib/stores/stripe';
+    import { organization } from '$lib/stores/organization';
+    import { toLocaleDate } from '$lib/helpers/date';
+
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
+    export let show = false;
+    export let invoice: Invoice;
+    let error: string = null;
+    let isButtonDisabled = false;
+
+    async function handleSubmit() {
+        isButtonDisabled = true;
+        try {
+            await confirmPayment(
+                $organization.$id,
+                invoice.clientSecret,
+                $organization.paymentMethodId
+            );
+            invalidate(Dependencies.ORGANIZATION);
+            invalidate(Dependencies.INVOICES);
+
+            trackEvent(Submit.RetryPayment);
+            addNotification({
+                type: 'success',
+                message: `Payment has been successfully processed`
+            });
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.RetryPayment);
+        } finally {
+            isButtonDisabled = false;
+        }
+    }
+
+    $: if (!show) {
+        invoice = null;
+    }
+</script>
+
+<FakeModal
+    bind:show
+    bind:error
+    state="warning"
+    onSubmit={handleSubmit}
+    size="big"
+    headerDivider={false}
+    title="Retry payment">
+    <!-- TODO: format currency -->
+    <p class="text">
+        Your payment of <span class="inline-tag">${invoice.amount}</span> due on {toLocaleDate(
+            invoice.dueAt
+        )} has failed. Retry your payment to avoid service interruptions with your projects.
+    </p>
+
+    <Button
+        external
+        link
+        href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}>
+        View invoice
+    </Button>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit disabled={isButtonDisabled}>Retry</Button>
+    </svelte:fragment>
+</FakeModal>

From 62adbd503aba7cfedefa387cd0e6227c35044e11 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Feb 2024 15:35:50 +0100
Subject: [PATCH 2/4] fix and expand paymentBoxes

---
 .../components/billing/paymentBoxes.svelte    |  41 +++++-
 src/lib/components/radioBoxes.svelte          |   8 +-
 .../billing/paymentHistory.svelte             |   2 +-
 .../billing/replaceCard.svelte                | 132 ++----------------
 .../billing/retryPaymentModal.svelte          |  20 +++
 5 files changed, 74 insertions(+), 129 deletions(-)

diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index 240ad1c0cc..32a010718d 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
-    import { FormList, InputText } from '$lib/elements/forms';
+    import { FormList, InputChoice, InputText } from '$lib/elements/forms';
     import { onDestroy, onMount } from 'svelte';
     import { CreditCardBrandImage, RadioBoxes } from '..';
     import { unmountPaymentElement } from '$lib/stores/stripe';
+    import { Pill } from '$lib/elements';
 
     export let methods: Record<string, unknown>[];
     export let group: string;
     export let name: string;
+    export let defaultMethod: string = null;
+    export let backupMethod: string = null;
+    export let disabledCondition: string = null;
+    export let setAsDefault = false;
+    export let showSetAsDefault = false;
 
     let element: HTMLDivElement;
     let loader: HTMLDivElement;
@@ -42,13 +48,36 @@
     }
 </script>
 
-<RadioBoxes elements={methods} total={methods?.length} variableName="$id" name="payment" bind:group>
+<RadioBoxes
+    elements={methods}
+    total={methods?.length}
+    variableName="$id"
+    name="payment"
+    bind:group
+    {disabledCondition}>
     <svelte:fragment slot="element" let:element>
         <slot {element}>
-            <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
-                <span>
-                    <span class="u-capitalize">{element.brand}</span> ending in {element.last4}</span>
-                <CreditCardBrandImage brand={element.brand?.toString()} />
+            <span class="u-flex u-gap-16 u-flex-vertical">
+                <span class="u-flex u-gap-16">
+                    <span class="u-flex u-cross-center u-gap-8" style="padding-inline:0.25rem">
+                        <span>
+                            <span class="u-capitalize">{element.brand}</span> ending in {element.last4}</span>
+                        <CreditCardBrandImage brand={element.brand?.toString()} />
+                    </span>
+                    {#if element.$id === backupMethod}
+                        <Pill>Backup</Pill>
+                    {:else if element.$id === defaultMethod}
+                        <Pill>Default</Pill>
+                    {/if}
+                </span>
+                {#if !!defaultMethod && element.$id !== defaultMethod && group === element.$id && showSetAsDefault}
+                    <ul>
+                        <InputChoice
+                            bind:value={setAsDefault}
+                            id="default"
+                            label="Set as default payment method for this organization" />
+                    </ul>
+                {/if}
             </span>
         </slot>
     </svelte:fragment>
diff --git a/src/lib/components/radioBoxes.svelte b/src/lib/components/radioBoxes.svelte
index 4e3b4bf924..4a798660be 100644
--- a/src/lib/components/radioBoxes.svelte
+++ b/src/lib/components/radioBoxes.svelte
@@ -13,7 +13,7 @@
     {#if total}
         {#each elements as element}
             {@const value = element[variableName]?.toString()}
-            <div class="box" data-private>
+            <ul class="box" data-private>
                 <InputRadio
                     id={`${name}-${value}`}
                     {value}
@@ -22,11 +22,11 @@
                     disabled={disabledCondition ? value === disabledCondition : false}>
                     <slot name="element" {element} />
                 </InputRadio>
-            </div>
+            </ul>
         {/each}
     {/if}
 
-    <div class="box">
+    <ul class="box">
         {#if total}
             <InputRadio id="payment-method" value={null} {name} bind:group>
                 <slot name="new">
@@ -37,5 +37,5 @@
         {#if group === null}
             <slot />
         {/if}
-    </div>
+    </ul>
 </div>
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index 8ca0b69d91..0057863c7f 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -127,7 +127,7 @@
                                                 event="download_invoice">
                                                 Download PDF
                                             </DropListLink>
-                                            {#if status === 'overdue' || status === 'failed'}
+                                            {#if status === 'overdue' || status === 'failed' || true}
                                                 <DropListItem
                                                     icon="refresh"
                                                     on:click={() => {
diff --git a/src/routes/console/organization-[organization]/billing/replaceCard.svelte b/src/routes/console/organization-[organization]/billing/replaceCard.svelte
index 8dfc4fe501..e253489906 100644
--- a/src/routes/console/organization-[organization]/billing/replaceCard.svelte
+++ b/src/routes/console/organization-[organization]/billing/replaceCard.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { CreditCardBrandImage, FakeModal } from '$lib/components';
-    import { Button, FormList, InputRadio, InputText } from '$lib/elements/forms';
+    import { FakeModal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-    import { initializeStripe, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
-    import { onDestroy, onMount } from 'svelte';
+    import { submitStripeCard } from '$lib/stores/stripe';
+    import { onMount } from 'svelte';
     import type { PaymentList } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Pill } from '$lib/elements';
+    import { PaymentBoxes } from '$lib/components/billing';
 
     export let show = false;
     export let isBackup = false;
@@ -18,10 +18,6 @@
     let selectedPaymentMethodId: string;
     let name: string;
     let error: string;
-    let element: HTMLDivElement;
-    let loader: HTMLDivElement;
-
-    let observer: MutationObserver;
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
@@ -32,27 +28,6 @@
         selectedPaymentMethodId = isBackup
             ? $organization.backupPaymentMethodId
             : $organization.paymentMethodId;
-
-        observer = new MutationObserver((mutationsList) => {
-            for (let mutation of mutationsList) {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length > 0) {
-                        for (let node of Array.from(mutation.addedNodes)) {
-                            if (
-                                node instanceof Element &&
-                                node.className.toLowerCase().includes('__privatestripeelement')
-                            ) {
-                                loader.style.display = 'none';
-                            }
-                        }
-                    }
-                }
-            }
-        });
-    });
-
-    onDestroy(() => {
-        observer.disconnect();
     });
 
     async function handleSubmit() {
@@ -105,19 +80,8 @@
         }
     }
 
-    $: if (selectedPaymentMethodId === null && !$isStripeInitialized && show) {
-        initializeStripe();
-    }
-
     $: filteredMethods = methods?.paymentMethods.filter((method) => !!method?.last4);
 
-    $: if (show) {
-        isStripeInitialized.set(false);
-        if (element) {
-            observer.observe(element, { childList: true });
-        }
-    }
-
     $: if (!show) {
         selectedPaymentMethodId = null;
     }
@@ -131,70 +95,16 @@
     headerDivider={false}
     title="Replace payment method">
     <p class="text">Replace the existing payment method for your organization.</p>
-    <FormList>
-        <div class:boxes-wrapper={methods?.total}>
-            {#if methods?.total}
-                {#each filteredMethods as method}
-                    <div class="box">
-                        <InputRadio
-                            id={`payment-method-${method.$id}`}
-                            disabled={isBackup
-                                ? method.$id === $organization.paymentMethodId
-                                : method.$id === $organization.backupPaymentMethodId}
-                            value={method.$id}
-                            name="payment"
-                            bind:group={selectedPaymentMethodId}>
-                            <span class="u-flex u-gap-16 u-main-space-between">
-                                <span
-                                    class="u-flex u-cross-center u-gap-8"
-                                    style="padding-inline:0.25rem">
-                                    <span>
-                                        <span class="u-capitalize">{method.brand}</span> ending in {method.last4}</span>
-                                    <CreditCardBrandImage brand={method.brand} />
-                                </span>
-                                {#if method.$id === $organization.backupPaymentMethodId}
-                                    <Pill>Backup</Pill>
-                                {:else if method.$id === $organization.paymentMethodId}
-                                    <Pill>Default</Pill>
-                                {/if}
-                            </span>
-                        </InputRadio>
-                    </div>
-                {/each}
-            {/if}
 
-            <div class="box">
-                {#if methods?.total}
-                    <InputRadio
-                        id="payment-method"
-                        value={null}
-                        name="payment"
-                        bind:group={selectedPaymentMethodId}>
-                        <span style="padding-inline:0.25rem">Add new payment method</span>
-                    </InputRadio>
-                {/if}
-                {#if selectedPaymentMethodId === null}
-                    <FormList>
-                        <InputText
-                            id="name"
-                            label="Cardholder name"
-                            placeholder="Cardholder name"
-                            bind:value={name}
-                            required
-                            autofocus={true} />
-                        <div class="aw-stripe-container" data-private>
-                            <div class="loader-container" bind:this={loader}>
-                                <div class="loader"></div>
-                            </div>
-                            <div id="payment-element" bind:this={element}>
-                                <!-- Stripe will create form elements here -->
-                            </div>
-                        </div>
-                    </FormList>
-                {/if}
-            </div>
-        </div>
-    </FormList>
+    <PaymentBoxes
+        methods={filteredMethods}
+        bind:name
+        bind:group={selectedPaymentMethodId}
+        defaultMethod={$organization?.paymentMethodId}
+        backupMethod={$organization?.backupPaymentMethodId}
+        disabledCondition={isBackup
+            ? $organization.paymentMethodId
+            : $organization.backupPaymentMethodId} />
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button
@@ -206,17 +116,3 @@
         </Button>
     </svelte:fragment>
 </FakeModal>
-
-<style lang="scss">
-    .aw-stripe-container {
-        min-height: 295px;
-        position: relative;
-        .loader-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 0;
-        }
-    }
-</style>
diff --git a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
index b2aa266deb..cd3b3ad16b 100644
--- a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
@@ -11,12 +11,22 @@
     import { confirmPayment } from '$lib/stores/stripe';
     import { organization } from '$lib/stores/organization';
     import { toLocaleDate } from '$lib/helpers/date';
+    import { PaymentBoxes } from '$lib/components/billing';
+    import { paymentMethods } from '$lib/stores/billing';
+    import { onMount } from 'svelte';
 
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
     export let show = false;
     export let invoice: Invoice;
     let error: string = null;
     let isButtonDisabled = false;
+    let name: string;
+    let paymentMethodId: string;
+    let setAsDefault = false;
+
+    onMount(() => {
+        paymentMethodId = $organization.paymentMethodId;
+    });
 
     async function handleSubmit() {
         isButtonDisabled = true;
@@ -42,6 +52,7 @@
             isButtonDisabled = false;
         }
     }
+    $: filteredMethods = $paymentMethods?.paymentMethods.filter((method) => !!method?.last4);
 
     $: if (!show) {
         invoice = null;
@@ -69,6 +80,15 @@
         href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}>
         View invoice
     </Button>
+
+    <PaymentBoxes
+        methods={filteredMethods}
+        defaultMethod={$organization?.paymentMethodId}
+        backupMethod={$organization?.backupPaymentMethodId}
+        showSetAsDefault
+        bind:setAsDefault
+        bind:name
+        bind:group={paymentMethodId} />
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button secondary submit disabled={isButtonDisabled}>Retry</Button>

From 8714fb89fc8cc4373e9a9dce8de0a4611f703983 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Feb 2024 18:14:30 +0100
Subject: [PATCH 3/4] feat: retry payment

---
 .../components/billing/paymentBoxes.svelte    | 10 +++-
 src/lib/sdk/billing.ts                        | 22 +++++++++
 .../billing/retryPaymentModal.svelte          | 46 +++++++++++++++++--
 3 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index 32a010718d..e964c3d773 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -70,7 +70,7 @@
                         <Pill>Default</Pill>
                     {/if}
                 </span>
-                {#if !!defaultMethod && element.$id !== defaultMethod && group === element.$id && showSetAsDefault}
+                {#if !!defaultMethod && element.$id !== defaultMethod && group === element.$id && showSetAsDefault && element.$id !== backupMethod}
                     <ul>
                         <InputChoice
                             bind:value={setAsDefault}
@@ -102,6 +102,14 @@
                 <!-- Stripe will create form elements here -->
             </div>
         </div>
+        {#if showSetAsDefault}
+            <ul>
+                <InputChoice
+                    bind:value={setAsDefault}
+                    id="default"
+                    label="Set as default payment method for this organization" />
+            </ul>
+        {/if}
     </FormList>
 </RadioBoxes>
 
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 96d6baee48..6254488292 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -523,6 +523,28 @@ export class Billing {
         );
     }
 
+    async retryPayment(
+        organizationId: string,
+        invoiceId: string,
+        paymentMethodId: string
+    ): Promise<string> {
+        const path = `/organizations/${organizationId}/invoices/${invoiceId}/retry`;
+        const params = {
+            organizationId,
+            invoiceId,
+            paymentMethodId
+        };
+        const uri = new URL(this.client.config.endpoint + path);
+        return await this.client.call(
+            'get',
+            uri,
+            {
+                'content-type': 'application/json'
+            },
+            params
+        );
+    }
+
     async listUsage(
         organizationId: string,
         startDate: string = undefined,
diff --git a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
index cd3b3ad16b..51bd49e5c5 100644
--- a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
@@ -8,12 +8,18 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { page } from '$app/stores';
     import { VARS } from '$lib/system';
-    import { confirmPayment } from '$lib/stores/stripe';
+    import {
+        confirmPayment,
+        initializeStripe,
+        isStripeInitialized,
+        submitStripeCard
+    } from '$lib/stores/stripe';
     import { organization } from '$lib/stores/organization';
     import { toLocaleDate } from '$lib/helpers/date';
     import { PaymentBoxes } from '$lib/components/billing';
     import { paymentMethods } from '$lib/stores/billing';
     import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
 
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
     export let show = false;
@@ -31,10 +37,36 @@
     async function handleSubmit() {
         isButtonDisabled = true;
         try {
+            if (paymentMethodId === null) {
+                try {
+                    const method = await submitStripeCard(name);
+                    const card = await sdk.forConsole.billing.getPaymentMethod(method.$id);
+                    if (card?.last4) {
+                        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) {
+                    paymentMethodId = $organization.paymentMethodId;
+                    error = e.message;
+                }
+            }
+            if (setAsDefault) {
+                await sdk.forConsole.billing.setDefaultPaymentMethod(paymentMethodId);
+            }
+            const clientSecret = await sdk.forConsole.billing.retryPayment(
+                $organization.$id,
+                invoice.$id,
+                paymentMethodId
+            );
+
             await confirmPayment(
                 $organization.$id,
-                invoice.clientSecret,
-                $organization.paymentMethodId
+                clientSecret,
+                paymentMethodId ? paymentMethodId : $organization.paymentMethodId
             );
             invalidate(Dependencies.ORGANIZATION);
             invalidate(Dependencies.INVOICES);
@@ -52,6 +84,14 @@
             isButtonDisabled = false;
         }
     }
+
+    $: if (paymentMethodId === null && !$isStripeInitialized) {
+        initializeStripe();
+    }
+
+    $: if (paymentMethodId) {
+        isStripeInitialized.set(false);
+    }
     $: filteredMethods = $paymentMethods?.paymentMethods.filter((method) => !!method?.last4);
 
     $: if (!show) {

From 1be6de0c9766f7b1c88712dc59519b526e62d0d7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Feb 2024 11:15:07 +0100
Subject: [PATCH 4/4] Update billing functionality and fix payment history
 display

---
 src/lib/sdk/billing.ts                                      | 6 +++---
 src/lib/stores/stripe.ts                                    | 2 +-
 .../billing/paymentHistory.svelte                           | 2 +-
 .../billing/retryPaymentModal.svelte                        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 6254488292..698f783777 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -527,8 +527,8 @@ export class Billing {
         organizationId: string,
         invoiceId: string,
         paymentMethodId: string
-    ): Promise<string> {
-        const path = `/organizations/${organizationId}/invoices/${invoiceId}/retry`;
+    ): Promise<Invoice> {
+        const path = `/organizations/${organizationId}/invoices/${invoiceId}/payments`;
         const params = {
             organizationId,
             invoiceId,
@@ -536,7 +536,7 @@ export class Billing {
         };
         const uri = new URL(this.client.config.endpoint + path);
         return await this.client.call(
-            'get',
+            'post',
             uri,
             {
                 'content-type': 'application/json'
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index ac8163af5a..5730a4c866 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -109,7 +109,7 @@ export async function confirmPayment(
 ) {
     try {
         const url =
-            window.location.origin + route ? route : `/console/organization-${orgId}/billing`;
+            window.location.origin + (route ? route : `/console/organization-${orgId}/billing`);
 
         const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(paymentMethodId);
 
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index 0057863c7f..8ca0b69d91 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -127,7 +127,7 @@
                                                 event="download_invoice">
                                                 Download PDF
                                             </DropListLink>
-                                            {#if status === 'overdue' || status === 'failed' || true}
+                                            {#if status === 'overdue' || status === 'failed'}
                                                 <DropListItem
                                                     icon="refresh"
                                                     on:click={() => {
diff --git a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
index 51bd49e5c5..ae47a07487 100644
--- a/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/console/organization-[organization]/billing/retryPaymentModal.svelte
@@ -57,7 +57,7 @@
             if (setAsDefault) {
                 await sdk.forConsole.billing.setDefaultPaymentMethod(paymentMethodId);
             }
-            const clientSecret = await sdk.forConsole.billing.retryPayment(
+            const { clientSecret } = await sdk.forConsole.billing.retryPayment(
                 $organization.$id,
                 invoice.$id,
                 paymentMethodId