fix: undefined (reading 'paymentMethodId') in replace card

Author: stnguyen90

src/routes/(console)/organization-[organization]/billing/+page.svelte

@@ -134,7 +134,7 @@
         currentAggregation={data?.billingAggregation}
         currentInvoice={data?.billingInvoice} />
     <PaymentHistory />
-    <PaymentMethods methods={data?.paymentMethods} />
+    <PaymentMethods organization={data?.organization} methods={data?.paymentMethods} />
     <BillingAddress {data} />
     <TaxId />
     <BudgetCap organization={data?.organization} currentPlan={data?.currentPlan} />

src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte

@@ -5,7 +5,7 @@
     import { CardGrid, CreditCardBrandImage, CreditCardInfo } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { hasStripePublicKey, isCloud } from '$lib/system';
     import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
@@ -34,6 +34,7 @@
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
 
+    export let organization: Organization;
     export let methods: PaymentList;
 
     let showPayment = false;
@@ -47,12 +48,12 @@
     async function addPaymentMethod(paymentMethodId: string) {
         try {
             await sdk.forConsole.billing.setOrganizationPaymentMethod(
-                $organization.$id,
+                organization.$id,
                 paymentMethodId
             );
             addNotification({
                 type: 'success',
-                message: `A new payment method has been added to ${$organization.name}`
+                message: `A new payment method has been added to ${organization.name}`
             });
             trackEvent(Submit.OrganizationPaymentUpdate);
             invalidate(Dependencies.ORGANIZATION);
@@ -68,12 +69,12 @@
     async function addBackupPaymentMethod(paymentMethodId: string) {
         try {
             await sdk.forConsole.billing.setOrganizationPaymentMethodBackup(
-                $organization.$id,
+                organization.$id,
                 paymentMethodId
             );
             addNotification({
                 type: 'success',
-                message: `A new payment method has been added to ${$organization.name}`
+                message: `A new payment method has been added to ${organization.name}`
             });
             invalidate(Dependencies.ORGANIZATION);
         } catch (error) {
@@ -85,15 +86,15 @@
         }
     }
 
-    $: if ($organization?.backupPaymentMethodId) {
+    $: if (organization?.backupPaymentMethodId) {
         sdk.forConsole.billing
-            .getOrganizationPaymentMethod($organization.$id, $organization.backupPaymentMethodId)
+            .getOrganizationPaymentMethod(organization.$id, organization.backupPaymentMethodId)
             .then((res) => (backupPaymentMethod = res));
     }
 
-    $: if ($organization?.paymentMethodId) {
+    $: if (organization?.paymentMethodId) {
         sdk.forConsole.billing
-            .getOrganizationPaymentMethod($organization.$id, $organization.paymentMethodId)
+            .getOrganizationPaymentMethod(organization.$id, organization.paymentMethodId)
             .then((res) => (defaultPaymentMethod = res));
     }
 
@@ -112,7 +113,7 @@
     <svelte:fragment slot="title">Payment methods</svelte:fragment>
     View or update your organization payment methods here.
     <svelte:fragment slot="aside">
-        {#if $organization?.paymentMethodId}
+        {#if organization?.paymentMethodId}
             <Table.Root
                 let:root
                 columns={[
@@ -168,7 +169,7 @@
                         </Popover>
                     </Table.Cell>
                 </Table.Row.Base>
-                {#if $organization?.backupPaymentMethodId}
+                {#if organization?.backupPaymentMethodId}
                     <Table.Row.Base {root}>
                         <CreditCardInfo {root} isBackup paymentMethod={backupPaymentMethod} />
                         <Table.Cell column="actions" {root}>
@@ -209,9 +210,9 @@
                     </Table.Row.Base>
                 {/if}
             </Table.Root>
-            {#if !$organization?.backupPaymentMethodId}
+            {#if !organization?.backupPaymentMethodId}
                 {@const filteredPaymentMethods = methods.paymentMethods.filter(
-                    (o) => !!o.last4 && o.$id !== $organization?.paymentMethodId
+                    (o) => !!o.last4 && o.$id !== organization?.paymentMethodId
                 )}
                 <div>
                     <Popover let:toggle placement="bottom-start" padding="none">
@@ -264,7 +265,7 @@
             {/if}
         {:else}
             {@const filteredPaymentMethods = methods.paymentMethods.filter(
-                (o) => !!o.last4 && o.$id !== $organization?.backupPaymentMethodId
+                (o) => !!o.last4 && o.$id !== organization?.backupPaymentMethodId
             )}
             <Card.Base>
                 <Layout.Stack justifyContent="center" alignItems="center" gap="m">
@@ -319,15 +320,15 @@
         bind:show={showEdit} />
 {/if}
 {#if isCloud && hasStripePublicKey}
-    <ReplaceCard {methods} bind:show={showReplace} isBackup={isSelectedBackup} />
+    <ReplaceCard {organization} {methods} bind:show={showReplace} isBackup={isSelectedBackup} />
 {/if}
 {#if showDelete && isCloud && hasStripePublicKey}
     {@const hasOtherMethod = isSelectedBackup
-        ? !!$organization?.paymentMethodId
-        : !!$organization?.backupPaymentMethodId}
+        ? !!organization?.paymentMethodId
+        : !!organization?.backupPaymentMethodId}
     <DeleteOrgPayment
         bind:showDelete
         {hasOtherMethod}
         isBackup={isSelectedBackup}
-        disabled={$organization?.billingPlan !== BillingPlan.FREE && !hasOtherMethod} />
+        disabled={organization?.billingPlan !== BillingPlan.FREE && !hasOtherMethod} />
 {/if}

src/routes/(console)/organization-[organization]/billing/replaceCard.svelte

@@ -3,7 +3,7 @@
     import { FakeModal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
-    import { organization } from '$lib/stores/organization';
+    import type { Organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
     import { submitStripeCard } from '$lib/stores/stripe';
     import { onMount } from 'svelte';
@@ -12,6 +12,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { PaymentBoxes } from '$lib/components/billing';
 
+    export let organization: Organization;
     export let show = false;
     export let isBackup = false;
     export let methods: PaymentList;
@@ -21,12 +22,12 @@
     let selectedPaymentMethodId: string;
 
     onMount(async () => {
-        if (!$organization.paymentMethodId && !$organization.backupPaymentMethodId) {
+        if (!organization.paymentMethodId && !organization.backupPaymentMethodId) {
             selectedPaymentMethodId = methods?.total ? methods.paymentMethods[0].$id : null;
         } else {
             selectedPaymentMethodId = isBackup
-                ? $organization.backupPaymentMethodId
-                : $organization.paymentMethodId;
+                ? organization.backupPaymentMethodId
+                : organization.paymentMethodId;
             // If the selected payment method does not belong to the current user, select the first one.
             if (
                 methods?.total &&
@@ -40,7 +41,7 @@
     async function handleSubmit() {
         try {
             if (selectedPaymentMethodId === '$new') {
-                const method = await submitStripeCard(name, $organization.$id);
+                const method = await submitStripeCard(name, organization.$id);
                 selectedPaymentMethodId = method.$id;
             }
             isBackup
@@ -68,7 +69,7 @@
     async function addPaymentMethod(paymentMethodId: string) {
         try {
             await sdk.forConsole.billing.setOrganizationPaymentMethod(
-                $organization.$id,
+                organization.$id,
                 paymentMethodId
             );
         } catch (e) {
@@ -79,7 +80,7 @@
     async function addBackupPaymentMethod(paymentMethodId: string) {
         try {
             await sdk.forConsole.billing.setOrganizationPaymentMethodBackup(
-                $organization.$id,
+                organization.$id,
                 paymentMethodId
             );
         } catch (e) {
@@ -97,18 +98,18 @@
         methods={filteredMethods}
         bind:name
         bind:group={selectedPaymentMethodId}
-        defaultMethod={$organization?.paymentMethodId}
-        backupMethod={$organization?.backupPaymentMethodId}
+        defaultMethod={organization?.paymentMethodId}
+        backupMethod={organization?.backupPaymentMethodId}
         disabledCondition={isBackup
-            ? $organization.paymentMethodId
-            : $organization.backupPaymentMethodId} />
+            ? organization.paymentMethodId
+            : organization.backupPaymentMethodId} />
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button
             secondary
             submit
             disabled={selectedPaymentMethodId ===
-                (isBackup ? $organization.backupPaymentMethodId : $organization.paymentMethodId)}>
+                (isBackup ? organization.backupPaymentMethodId : organization.paymentMethodId)}>
             Save
         </Button>
     </svelte:fragment>