Merge pull request #2060 from appwrite/fix-payments-state

Author: ItzNotABug

e2e/journeys/upgrade-free-tier.spec.ts

@@ -11,7 +11,12 @@ test('upgrade - free tier', async ({ page }) => {
         await page.waitForURL(/\/organization-[^/]+\/change-plan/);
         await page.locator('input[value="tier-1"]').click();
         await page.getByRole('button', { name: 'add' }).first().click();
+
         await enterCreditCard(page);
+
+        // wait for a second after adding a card to update the UI.
+        await page.waitForSelector('button#method[role="combobox"]');
+
         // skip members
         await page.getByRole('button', { name: 'change plan' }).click();
         await page.waitForURL(/\/console\/project-(?:[a-z0-9]+-)?([^/]+)\/get-started/);

src/lib/components/billing/paymentModal.svelte

@@ -21,7 +21,7 @@
         try {
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
             modal.closeModal();
-            invalidate(Dependencies.PAYMENT_METHODS);
+            await invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
             addNotification({
                 type: 'success',

src/lib/components/billing/selectPaymentMethod.svelte

@@ -20,8 +20,19 @@
 
     async function cardSaved(event: CustomEvent<PaymentMethodData>) {
         value = event.detail.$id;
-        invalidate(Dependencies.UPGRADE_PLAN);
-        invalidate(Dependencies.CREATE_ORGANIZATION);
+
+        if (value) {
+            methods = {
+                ...methods,
+                total: methods.total + 1,
+                paymentMethods: [...methods.paymentMethods, event.detail]
+            };
+        }
+
+        await Promise.all([
+            invalidate(Dependencies.UPGRADE_PLAN),
+            invalidate(Dependencies.ORGANIZATION)
+        ]);
     }
 
     onMount(() => {

src/lib/components/breadcrumbs.svelte

@@ -101,7 +101,8 @@
 
     async function createProjectsBottomSheet(organization: Organization): Promise<SheetMenu> {
         isLoadingProjects = true;
-        loadedProjects = await projects;
+        // null on non-org/project path like `onboarding`.
+        loadedProjects = (await projects) ?? loadedProjects;
         isLoadingProjects = false;
 
         const createProjectItem = {

src/routes/(console)/+layout.svelte

@@ -316,15 +316,19 @@
 
     $: checkForUsageLimits($organization);
 
-    $: projects = sdk.forConsole.projects.list([
-        Query.equal(
-            'teamId',
-            // id from page params ?? id from store ?? id from preferences
-            page.params.organization ?? currentOrganizationId ?? data.currentOrgId
-        ),
-        Query.limit(5),
-        Query.orderDesc('$updatedAt')
-    ]);
+    $: isOnOnboarding = page.route?.id?.includes('/(console)/onboarding');
+
+    $: projects = isOnOnboarding
+        ? null
+        : sdk.forConsole.projects.list([
+              Query.equal(
+                  'teamId',
+                  // id from page params ?? id from store ?? id from preferences
+                  page.params.organization ?? currentOrganizationId ?? data.currentOrgId
+              ),
+              Query.limit(5),
+              Query.orderDesc('$updatedAt')
+          ]);
 
     $: if ($requestedMigration) {
         openMigrationWizard();

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

@@ -5,8 +5,9 @@ import type { Coupon } from '$lib/sdk/billing';
 import type { Organization } from '$lib/stores/organization';
 
 export const load: PageLoad = async ({ url, parent, depends }) => {
-    depends(Dependencies.CREATE_ORGANIZATION);
     const { organizations } = await parent();
+    depends(Dependencies.CREATE_ORGANIZATION);
+
     const [coupon, paymentMethods] = await Promise.all([
         getCoupon(url),
         sdk.forConsole.billing.listPaymentMethods()

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

@@ -2,14 +2,14 @@
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
-    import { BillingPlan } from '$lib/constants';
+    import { BillingPlan, Dependencies } from '$lib/constants';
     import { tierToPlan } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { loadAvailableRegions } from '$routes/(console)/regions';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Button, Card, Layout, Input, Typography, Spinner } from '@appwrite.io/pink-svelte';
     import { Form } from '$lib/elements/forms/index.js';
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
 
     let isLoading = false;
@@ -47,6 +47,10 @@
             if (organization) {
                 loadAvailableRegions(organization?.$id).then();
                 await goto(`${base}/organization-${organization.$id}`);
+
+                // fixes an edge case where
+                // the org is not available for some reason!
+                await invalidate(Dependencies.CREATE_ORGANIZATION);
             }
             isLoading = false;
         }

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

@@ -334,12 +334,12 @@
                             </Layout.Stack>
                         </Layout.Stack>
                     </Fieldset>
-                {:then paymentMethods}
+                {:then}
                     <Fieldset legend="Payment">
                         <SelectPaymentMethod
-                            methods={paymentMethods}
+                            bind:taxId
                             bind:value={paymentMethodId}
-                            bind:taxId>
+                            bind:methods={paymentMethods}>
                             <svelte:fragment slot="actions">
                                 {#if !selectedCoupon?.code}
                                     {#if paymentMethodId}

src/routes/+layout.ts

@@ -16,6 +16,7 @@ export const ssr = false;
 
 export const load: LayoutLoad = async ({ depends, url, route }) => {
     depends(Dependencies.ACCOUNT);
+    depends(Dependencies.CREATE_ORGANIZATION);
 
     const [account, error] = (await sdk.forConsole.account
         .get()