improvements.

Author: ItzNotABug

src/routes/(console)/account/payments/editPaymentModal.svelte

@@ -12,12 +12,12 @@
     let {
         show = $bindable(false),
         isLinked = false,
-        selectedPaymentMethod,
+        selectedPaymentMethod
     }: {
         show: boolean;
         isLinked?: boolean;
         selectedPaymentMethod: PaymentMethodData;
-    } = $props()
+    } = $props();
 
     let year: number | null = $state(null);
     let month: string | null = $state(null);

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

@@ -20,12 +20,15 @@
     import { Alert } from '@appwrite.io/pink-svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { base } from '$app/paths';
     import type { PageData } from './$types';
+    import { resolve } from '$app/paths';
 
     export let data: PageData;
 
     $: organization = data.organization;
+    $: baseUrl = resolve('/(console)/organization-[organization]/billing', {
+        organization: organization.$id
+    });
 
     onMount(async () => {
         if (page.url.searchParams.has('type')) {
@@ -47,7 +50,7 @@
                     organization.$id,
                     invoice.clientSecret,
                     organization.paymentMethodId,
-                    `${base}/organization-${organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
+                    `${baseUrl}?type=validate-invoice&invoice=${invoice.$id}`
                 );
             }
 
@@ -140,8 +143,7 @@
         methods={data?.paymentMethods}
         organization={data?.organization}
         backupMethod={data.backupPaymentMethod}
-        primaryMethod={data.primaryPaymentMethod}
-    />
+        primaryMethod={data.primaryPaymentMethod} />
 
     <BillingAddress
         organization={data?.organization}

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

@@ -83,10 +83,7 @@ export const load: PageLoad = async ({ parent, depends, url, route }) => {
 
     // make number
     const credits = availableCredit ? availableCredit.available : null;
-    const {
-        backup,
-        primary
-    } = getOrganizationPaymentMethods(organization, paymentMethods)
+    const { backup, primary } = getOrganizationPaymentMethods(organization, paymentMethods);
 
     return {
         paymentMethods,

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

@@ -68,8 +68,7 @@
         bind:error
         bind:open={showDelete}
         title="Remove payment method"
-        onSubmit={isBackup ? removeBackupMethod : removeDefaultMethod}
-    >
+        onSubmit={isBackup ? removeBackupMethod : removeDefaultMethod}>
         <Typography.Text>
             Are you sure you want to remove the payment method from <b>{$organization?.name}</b>?
         </Typography.Text>

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

@@ -13,17 +13,29 @@
     import { PaymentBoxes } from '$lib/components/billing';
     import type { PaymentMethod } from '@stripe/stripe-js';
 
-    export let organization: Organization;
-    export let show = false;
-    export let isBackup = false;
-    export let methods: PaymentList;
+    let {
+        show = false,
+        isBackup = false,
+        methods,
+        organization
+    }: {
+        show?: boolean;
+        isBackup?: boolean;
+        methods: PaymentList;
+        organization: Organization;
+    } = $props();
 
-    let name: string;
-    let error: string = null;
-    let selectedPaymentMethodId: string;
-    let showState: boolean = false;
-    let state: string = '';
-    let paymentMethod: PaymentMethod | null = null;
+    let name: string | null = $state(null);
+    let error: string | null = $state(null);
+    let showState: boolean = $state(false);
+    let countryState: string | null = $state(null);
+    let paymentMethod: PaymentMethod | null = $state(null);
+    let selectedPaymentMethodId: string | null = $state(null);
+
+    const filteredMethods = $derived(methods?.paymentMethods.filter((method) => !!method?.last4));
+    const submitEvent = $derived(
+        isBackup ? Submit.OrganizationBackupPaymentDelete : Submit.OrganizationPaymentDelete
+    );
 
     onMount(async () => {
         if (!organization.paymentMethodId && !organization.backupPaymentMethodId) {
@@ -45,12 +57,12 @@
     async function handleSubmit() {
         try {
             if (selectedPaymentMethodId === '$new') {
-                if (showState && !state) {
+                if (showState && !countryState) {
                     throw Error('Please select a state');
                 }
                 let method: PaymentMethodData;
                 if (showState) {
-                    method = await setPaymentMethod(paymentMethod.id, name, state);
+                    method = await setPaymentMethod(paymentMethod.id, name, countryState);
                 } else {
                     const card = await submitStripeCard(name, organization.$id);
                     if (card && Object.hasOwn(card, 'id')) {
@@ -69,21 +81,17 @@
                 ? await addBackupPaymentMethod(selectedPaymentMethodId)
                 : await addPaymentMethod(selectedPaymentMethodId);
 
+            await invalidate(Dependencies.PAYMENT_METHODS);
+
             addNotification({
                 type: 'success',
                 message: `Your ${isBackup ? 'backup' : 'default'} payment method has been updated`
             });
-            await invalidate(Dependencies.PAYMENT_METHODS);
-            trackEvent(
-                isBackup ? Submit.OrganizationBackupPaymentDelete : Submit.OrganizationPaymentDelete
-            );
+            trackEvent(submitEvent);
             show = false;
-        } catch (e) {
-            error = e.message;
-            trackError(
-                e,
-                isBackup ? Submit.OrganizationBackupPaymentDelete : Submit.OrganizationPaymentDelete
-            );
+        } catch (err) {
+            error = err.message;
+            trackError(err, submitEvent);
         }
     }
 
@@ -93,8 +101,8 @@
                 organization.$id,
                 paymentMethodId
             );
-        } catch (e) {
-            error = e.message;
+        } catch (err) {
+            error = err.message;
         }
     }
 
@@ -104,23 +112,21 @@
                 organization.$id,
                 paymentMethodId
             );
-        } catch (e) {
-            error = e.message;
+        } catch (err) {
+            error = err.message;
         }
     }
-
-    $: filteredMethods = methods?.paymentMethods.filter((method) => !!method?.last4);
 </script>
 
 <FakeModal bind:show bind:error onSubmit={handleSubmit} size="big" title="Replace payment method">
     <p class="text">Replace the existing payment method for your organization.</p>
 
     <PaymentBoxes
-        methods={filteredMethods}
         bind:name
-        bind:paymentMethod
         bind:showState
-        bind:state
+        bind:paymentMethod
+        methods={filteredMethods}
+        bind:state={countryState}
         bind:group={selectedPaymentMethodId}
         defaultMethod={organization?.paymentMethodId}
         backupMethod={organization?.backupPaymentMethodId}