Merge pull request #2078 from appwrite/fix-undefined-name

fix: undefined errors around billing pages

Author: ItzNotABug

src/lib/constants.ts

@@ -18,7 +18,7 @@ export enum Dependencies {
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
     UPGRADE_PLAN = 'dependency:upgrade_plan',
-    CREATE_ORGANIZATION = 'dependency:create_organization',
+    ORGANIZATIONS = 'dependency:organizations',
     PAYMENT_METHODS = 'dependency:paymentMethods',
     ORGANIZATION = 'dependency:organization',
     MEMBERS = 'dependency:members',

src/lib/stores/billing.ts

@@ -287,6 +287,7 @@ export function checkForEnterpriseTrial(org: Organization) {
 }
 
 export function calculateEnterpriseTrial(org: Organization) {
+    if (!org || !org.billingNextInvoiceDate) return 0;
     const endDate = new Date(org.billingNextInvoiceDate);
     const startDate = new Date(org.billingCurrentInvoiceDate);
     const today = new Date();

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

@@ -56,7 +56,7 @@
             if (organization) {
                 org = await sdk.forConsole.billing.setBillingAddress(organization, response.$id);
                 trackEvent(Submit.OrganizationBillingAddressUpdate);
-                await invalidate(Dependencies.ORGANIZATION);
+                await invalidate(Dependencies.ORGANIZATIONS);
             }
             await invalidate(Dependencies.ADDRESS);
 

src/routes/(console)/create-organization/+page.ts

@@ -6,7 +6,7 @@ import type { Organization } from '$lib/stores/organization';
 
 export const load: PageLoad = async ({ url, parent, depends }) => {
     const { organizations } = await parent();
-    depends(Dependencies.CREATE_ORGANIZATION);
+    depends(Dependencies.ORGANIZATIONS);
 
     const [coupon, paymentMethods] = await Promise.all([
         getCoupon(url),

src/routes/(console)/onboarding/create-organization/+page.svelte

@@ -50,7 +50,7 @@
 
                 // fixes an edge case where
                 // the org is not available for some reason!
-                await invalidate(Dependencies.CREATE_ORGANIZATION);
+                await invalidate(Dependencies.ORGANIZATIONS);
             }
             isLoading = false;
         }

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

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
     import BudgetCap from './budgetCap.svelte';
     import PlanSummary from './planSummary.svelte';
     import BillingAddress from './billingAddress.svelte';
@@ -25,14 +24,15 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
+    let organization = data.organization;
 
     // why are these reactive?
     $: defaultPaymentMethod = data?.paymentMethods?.paymentMethods?.find(
-        (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
+        (method: PaymentMethodData) => method.$id === organization?.paymentMethodId
     );
 
     $: backupPaymentMethod = data?.paymentMethods?.paymentMethods?.find(
-        (method: PaymentMethodData) => method.$id === $organization?.backupPaymentMethodId
+        (method: PaymentMethodData) => method.$id === organization?.backupPaymentMethodId
     );
 
     onMount(async () => {
@@ -52,10 +52,10 @@
                 );
 
                 await confirmPayment(
-                    $organization.$id,
+                    organization.$id,
                     invoice.clientSecret,
-                    $organization.paymentMethodId,
-                    `${base}/organization-${$organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
+                    organization.paymentMethodId,
+                    `${base}/organization-${organization.$id}/billing?type=validate-invoice&invoice=${invoice.$id}`
                 );
             }
 
@@ -64,7 +64,7 @@
                 page.url.searchParams.get('type') === 'validate-invoice'
             ) {
                 const invoiceId = page.url.searchParams.get('invoice');
-                await sdk.forConsole.billing.updateInvoiceStatus($organization.$id, invoiceId);
+                await sdk.forConsole.billing.updateInvoiceStatus(organization.$id, invoiceId);
                 invalidate(Dependencies.INVOICES);
                 invalidate(Dependencies.ORGANIZATION);
             }
@@ -84,7 +84,7 @@
         }
         if (page.url.searchParams.has('clientSecret')) {
             const clientSecret = page.url.searchParams.get('clientSecret');
-            await confirmPayment($organization.$id, clientSecret, $organization.paymentMethodId);
+            await confirmPayment(organization.$id, clientSecret, organization.paymentMethodId);
         }
     });
 </script>
@@ -93,7 +93,7 @@
     {#if $failedInvoice}
         {#if $failedInvoice?.lastError}
             <Alert.Inline status="error">
-                The scheduled payment for {$organization.name} failed due to following error: {$failedInvoice.lastError}
+                The scheduled payment for {organization.name} failed due to following error: {$failedInvoice.lastError}
                 <svelte:fragment slot="actions">
                     <Button
                         text
@@ -106,7 +106,7 @@
         {:else}
             <Alert.Inline
                 status="error"
-                title={`The scheduled payment for ${$organization.name} failed`}>
+                title={`The scheduled payment for ${organization.name} failed`}>
                 To avoid service disruptions in organization's your projects, please verify your
                 payment details and update them if necessary.
             </Alert.Inline>
@@ -115,29 +115,33 @@
     {#if defaultPaymentMethod?.failed && !backupPaymentMethod}
         <Alert.Inline
             status="error"
-            title={`The default payment method for ${$organization.name} has expired`}>
+            title={`The default payment method for ${organization.name} has expired`}>
             To avoid service disruptions in your organization's projects, please update your payment
             details.
         </Alert.Inline>
     {/if}
-    {#if $organization?.billingPlanDowngrade}
+    {#if organization?.billingPlanDowngrade}
         <Alert.Inline status="info">
-            Your organization has changed to {tierToPlan($organization?.billingPlanDowngrade).name} plan.
-            You will continue to have access to {tierToPlan($organization?.billingPlan).name} plan features
-            until your billing period ends on {toLocaleDate($organization.billingNextInvoiceDate)}.
+            Your organization has changed to {tierToPlan(organization?.billingPlanDowngrade).name} plan.
+            You will continue to have access to {tierToPlan(organization?.billingPlan).name} plan features
+            until your billing period ends on {toLocaleDate(organization.billingNextInvoiceDate)}.
         </Alert.Inline>
     {/if}
     <Typography.Title>Billing</Typography.Title>
     <PlanSummary
         availableCredit={data?.availableCredit}
-        currentPlan={data?.aggregationBillingPlan}
+        currentPlan={data?.currentPlan}
         currentAggregation={data?.billingAggregation}
         currentInvoice={data?.billingInvoice} />
     <PaymentHistory />
-    <PaymentMethods methods={data?.paymentMethods} />
-    <BillingAddress {data} />
+    <PaymentMethods organization={data?.organization} methods={data?.paymentMethods} />
+    <BillingAddress
+        organization={data?.organization}
+        billingAddress={data?.billingAddress}
+        locale={data?.locale}
+        countryList={data?.countryList} />
     <TaxId />
-    <BudgetCap />
+    <BudgetCap organization={data?.organization} currentPlan={data?.currentPlan} />
     <AvailableCredit areCreditsSupported={data.areCreditsSupported} />
 </Container>
 

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

@@ -7,7 +7,7 @@ import type { PageLoad } from './$types';
 import { isCloud } from '$lib/system';
 
 export const load: PageLoad = async ({ parent, depends }) => {
-    const { organization, scopes, currentPlan, countryList, locale, plansInfo } = await parent();
+    const { organization, scopes, currentPlan, countryList, locale } = await parent();
 
     if (!scopes.includes('billing.read')) {
         return redirect(301, `/console/organization-${organization.$id}`);
@@ -64,18 +64,13 @@ export const load: PageLoad = async ({ parent, depends }) => {
         areCreditsSupported ? sdk.forConsole.billing.getAvailableCredit(organization.$id) : null
     ]);
 
-    const aggregationBillingPlan = plansInfo.get(
-        billingAggregation?.plan ?? organization.billingPlan
-    );
-
     // make number
     const credits = availableCredit ? availableCredit.available : null;
 
     return {
         paymentMethods,
         addressList,
         billingAddress,
-        aggregationBillingPlan,
         availableCredit: credits,
         billingAggregation,
         billingInvoice,

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

@@ -7,7 +7,7 @@
     import type { Address } from '$lib/sdk/billing';
     import { addressList } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import RemoveAddress from './removeAddress.svelte';
     import { user } from '$lib/stores/user';
@@ -23,14 +23,11 @@
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
 
-    export let data: PageData;
-
-    const locale: Models.Locale = data.locale;
-    const countryList: Models.CountryList = data.countryList;
-
-    let billingAddress: Address = data?.billingAddress;
+    export let organization: Organization;
+    export let locale: Models.Locale;
+    export let countryList: Models.CountryList;
+    export let billingAddress: Address;
 
     let showCreate = false;
     let showEdit = false;
@@ -39,16 +36,16 @@
 
     async function addAddress(addressId: string) {
         try {
-            await sdk.forConsole.billing.setBillingAddress($organization.$id, addressId);
+            await sdk.forConsole.billing.setBillingAddress(organization.$id, addressId);
 
             addNotification({
                 type: 'success',
-                message: `A new billing address has been added to ${$organization.name}`
+                message: `A new billing address has been added to ${organization.name}`
             });
             trackEvent(Submit.OrganizationBillingAddressUpdate);
 
             invalidate(Dependencies.ADDRESS);
-            invalidate(Dependencies.ORGANIZATION);
+            invalidate(Dependencies.ORGANIZATIONS);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -63,7 +60,7 @@
     <svelte:fragment slot="title">Billing address</svelte:fragment>
     View or update your billing address. This address will be included in your invoices from Appwrite.
     <svelte:fragment slot="aside">
-        {#if $organization?.billingAddressId && billingAddress}
+        {#if organization?.billingAddressId && billingAddress}
             <Card.Base variant="secondary" padding="s">
                 <Layout.Stack direction="row" justifyContent="space-between">
                     <div>
@@ -140,7 +137,7 @@
 </CardGrid>
 
 {#if showCreate}
-    <AddressModal bind:show={showCreate} organization={$organization?.$id} {countryList} {locale} />
+    <AddressModal bind:show={showCreate} organization={organization?.$id} {countryList} {locale} />
 {/if}
 {#if showEdit}
     <EditAddressModal

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

@@ -7,18 +7,20 @@
     import { Button, Form } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
-    import { currentPlan, organization } from '$lib/stores/organization';
+    import { type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
     import { Alert, Icon, Table } from '@appwrite.io/pink-svelte';
     import { IconTrash } from '@appwrite.io/pink-icons-svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import type { Plan } from '$lib/sdk/billing';
 
+    export let organization: Organization;
+    export let currentPlan: Plan;
     export let alertsEnabled = false;
 
     let search: string;
     let selectedAlert: number;
-    let alerts: number[] = [];
+    let alerts: number[] = organization?.budgetAlerts ?? [];
 
     $: options = [
         { value: 25, label: '25%', disabled: false },
@@ -33,10 +35,6 @@
         };
     });
 
-    onMount(() => {
-        alerts = $organization?.budgetAlerts ?? [];
-    });
-
     function addAlert() {
         if (alerts.some((alert) => alert === selectedAlert)) {
             return;
@@ -50,8 +48,8 @@
     async function updateBudget() {
         try {
             await sdk.forConsole.billing.updateBudget(
-                $organization.$id,
-                $organization.billingBudget,
+                organization.$id,
+                organization.billingBudget,
                 alerts
             );
 
@@ -60,7 +58,7 @@
             addNotification({
                 type: 'success',
                 isHtml: true,
-                message: `<span> ${alerts.length === 0 ? 'Budget alerts removed from' : alerts.length > 1 ? `Budget alerts added to` : 'A budget alert has been added to'} <b>${$organization.name}</b> </span>`
+                message: `<span> ${alerts.length === 0 ? 'Budget alerts removed from' : alerts.length > 1 ? `Budget alerts added to` : 'A budget alert has been added to'} <b>${organization.name}</b> </span>`
             });
             trackEvent(Submit.BudgetAlertsUpdate, {
                 alerts
@@ -75,26 +73,26 @@
     }
 
     $: isButtonDisabled =
-        symmetricDifference(alerts, $organization.budgetAlerts).length === 0 || !alertsEnabled;
+        symmetricDifference(alerts, organization.budgetAlerts).length === 0 || !alertsEnabled;
 </script>
 
 <CardGrid>
     <svelte:fragment slot="title">Billing alerts</svelte:fragment>
-    {#if !$currentPlan.budgeting}
+    {#if !currentPlan.budgeting}
         Get notified by email when your organization meets a percentage of your budget cap. <b
-            >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
+            >{tierToPlan(organization.billingPlan).name} organizations will receive one notification
             at 75% resource usage.</b>
     {:else}
         Get notified by email when your organization meets or exceeds a percentage of your specified
         billing alert(s).
     {/if}
     <svelte:fragment slot="aside">
-        {#if !$currentPlan.budgeting}
+        {#if !currentPlan.budgeting}
             <Alert.Inline status="info" title="Billing alerts are a Pro plan feature">
                 Upgrade to a Pro plan to manage when you receive billing alerts for your
                 organization.
             </Alert.Inline>
-        {:else if !$currentPlan.budgetCapEnabled}
+        {:else if !currentPlan.budgetCapEnabled}
             <Alert.Inline status="info" title="Budget cap disabled">
                 Budget caps are not supported on your current plan. For more information, please
                 reach out to your customer success manager.
@@ -150,7 +148,7 @@
 
     <svelte:fragment slot="actions">
         <Form onSubmit={updateBudget}>
-            {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
+            {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                 <Button
                     secondary
                     href={$upgradeURL}