Merge branch 'main' into dat-567

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/lib/layout/wizard.svelte

@@ -50,7 +50,7 @@
             if (confirmExit) {
                 showExitModal = true;
             } else {
-                goto(href);
+                goBack();
                 trackEvent('wizard_exit', {
                     from: 'escape'
                 });
@@ -58,6 +58,8 @@
         }
     }
 
+    const goBack = () => goto(href);
+
     onMount(() => ($isNewWizardStatusOpen = true));
 
     onDestroy(() => ($isNewWizardStatusOpen = false));
@@ -77,7 +79,7 @@
         if (confirmExit) {
             showExitModal = true;
         } else {
-            goto(href);
+            goBack();
             trackEvent('wizard_exit', {
                 from: 'button'
             });

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

@@ -271,11 +271,7 @@
     <title>Change plan - Appwrite</title>
 </svelte:head>
 
-<Wizard
-    title="Change plan"
-    href={`${base}/organization-${page.params.organization}`}
-    bind:showExitModal
-    confirmExit>
+<Wizard title="Change plan" href={previousPage} bind:showExitModal confirmExit>
     <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
         <Layout.Stack gap="xxl">
             <Fieldset legend="Select plan">
@@ -338,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/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte

@@ -52,7 +52,7 @@
                     </Button>
                 </Layout.Stack>
             </div>
-            <Paginator items={members.memberships} hideFooter={members?.total <= 5}>
+            <Paginator items={members?.memberships} hideFooter={members?.total <= 5}>
                 {#snippet children(paginatedItems: typeof members.memberships)}
                     <Table.Root columns={2} let:root>
                         <svelte:fragment slot="header" let:root>

src/routes/(console)/project-[region]-[project]/auth/security/updateSessionLength.svelte

@@ -7,11 +7,13 @@
     import { createTimeUnitPair } from '$lib/helpers/unit';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { project } from '../../store';
+    import { project as projectStore } from '../../store';
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/state';
 
-    const { value, unit, baseValue, units } = createTimeUnitPair($project?.authDuration);
-    const options = units.map((v) => ({ label: v.name, value: v.name }));
+    const project = $derived($projectStore ?? page.data?.project);
+    const { value, unit, baseValue, units } = $derived(createTimeUnitPair(project?.authDuration));
+    const options = $derived(units.map((v) => ({ label: v.name, value: v.name })));
 
     async function updateSessionLength() {
         try {
@@ -43,7 +45,7 @@
         </Layout.Stack>
     </svelte:fragment>
     <svelte:fragment slot="actions">
-        <Button disabled={$baseValue === $project.authDuration} on:click={updateSessionLength}>
+        <Button disabled={$baseValue === project.authDuration} on:click={updateSessionLength}>
             Update
         </Button>
     </svelte:fragment>

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()