Merge branch 'main' into fix-1997-bring-back-the-current-version-in-the-footer

Author: HarshMN2345

.github/workflows/publish.yml

@@ -99,7 +99,7 @@ jobs:
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
             - name: Extract metadata (tags, labels) for Docker
               id: meta
-              uses: docker/metadata-action@v5
+              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
               with:
                   images: appwrite/console
                   tags: |

e2e/steps/pro-project.ts

@@ -14,12 +14,15 @@ export async function enterCreditCard(page: Page) {
         state: 'visible'
     });
     await page.getByPlaceholder('cardholder').fill('Test User');
-    const stripe = page.frameLocator('[title="Secure payment input frame"]');
+    const stripe = page.locator('[title="Secure payment input frame"]').nth(0).contentFrame();
     await stripe.locator('id=Field-numberInput').fill('4242424242424242');
     await stripe.locator('id=Field-expiryInput').fill('1250');
     await stripe.locator('id=Field-cvcInput').fill('123');
     await stripe.locator('id=Field-countryInput').selectOption('DE');
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
+    await page.locator('id=state-picker').click(); // open dropdown
+    await page.getByRole('option', { name: 'Alabama' }).click();
+    await dialog.getByRole('button', { name: 'Add', exact: true }).click();
     await dialog.waitFor({
         state: 'hidden'
     });

package.json

@@ -22,11 +22,11 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289",
+        "@appwrite.io/console": "^1.10.0",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@d93a5e9",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@95bdb79",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@d93a5e9",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -5,9 +5,9 @@
         <meta
             name="description"
             content="Appwrite is an open-source platform for building applications at any scale, using your preferred programming languages and tools." />
-        <link rel="icon" type="image/svg+xml" href="/console/logos/appwrite-icon.svg" />
-        <link rel="mask-icon" type="image/png" href="/console/logos/appwrite-icon.png" />
-        <link rel="stylesheet" href="/console/css/loading.css" />
+        <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/logos/appwrite-icon.svg" />
+        <link rel="mask-icon" type="image/png" href="%sveltekit.assets%/logos/appwrite-icon.png" />
+        <link rel="stylesheet" href="%sveltekit.assets%/css/loading.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         %sveltekit.head%
     </head>
@@ -40,13 +40,13 @@
                 <div></div>
             </div>
             <img
-                src="/console/images/appwrite-logo-light.svg"
+                src="%sveltekit.assets%/images/appwrite-logo-light.svg"
                 width="120"
                 height="22"
                 class="logo-light"
                 alt="Appwrite Logo" />
             <img
-                src="/console/images/appwrite-logo-dark.svg"
+                src="%sveltekit.assets%/images/appwrite-logo-dark.svg"
                 width="120"
                 height="22"
                 class="logo-dark"

src/app.html

@@ -24,7 +24,9 @@
     let error = $state<string | null>(null);
 
     onMount(() => {
-        projects = page.data.projects?.projects || [];
+        const currentOrgId = page.data.organization?.$id;
+        projects =
+            page.data.currentOrgId === currentOrgId ? page.data.allProjects?.projects || [] : [];
     });
 
     let projectsToArchive = $derived(
@@ -71,7 +73,8 @@
 
 <Modal bind:show={showSelectProject} title={'Manage projects'} onSubmit={updateSelected}>
     <svelte:fragment slot="description">
-        Choose which two projects to keep. Projects over the limit will be blocked after this date.
+        Choose which {$currentPlan?.projects || 2} projects to keep. Projects over the limit will be
+        blocked after this date.
     </svelte:fragment>
     {#if error}
         <Alert.Inline status="error" title="Error">{error}</Alert.Inline>

src/lib/components/billing/alerts/selectProjectCloud.svelte

@@ -5,6 +5,8 @@
     import { initializeStripe, unmountPaymentElement } from '$lib/stores/stripe';
     import { Badge, Card, Layout } from '@appwrite.io/pink-svelte';
     import type { PaymentMethodData } from '$lib/sdk/billing';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let methods: PaymentMethodData[];
     export let group: string;
@@ -14,6 +16,9 @@
     export let disabledCondition: string = null;
     export let setAsDefault = false;
     export let showSetAsDefault = false;
+    export let showState = false;
+    export let paymentMethod: PaymentMethod | null = null;
+    export let state: string = '';
 
     let element: HTMLDivElement;
     let loader: HTMLDivElement;
@@ -79,25 +84,29 @@
     {/each}
     <Card.Selector title="Add new payment method" name="$new" bind:group value="$new" />
     {#if group === '$new'}
-        <InputText
-            id="name"
-            label="Cardholder name"
-            placeholder="Cardholder name"
-            bind:value={name}
-            required
-            autofocus={true} />
+        {#if showState}
+            <StatePicker card={paymentMethod} bind:state />
+        {:else}
+            <InputText
+                id="name"
+                label="Cardholder name"
+                placeholder="Cardholder name"
+                bind:value={name}
+                required
+                autofocus={true} />
 
-        <div class="aw-stripe-container" data-private>
-            <div class="loader-container" bind:this={loader}>
-                <div class="loader"></div>
+            <div class="aw-stripe-container" data-private>
+                <div class="loader-container" bind:this={loader}>
+                    <div class="loader"></div>
+                </div>
+                <div bind:this={element}></div>
             </div>
-            <div bind:this={element}></div>
-        </div>
-        {#if showSetAsDefault}
-            <InputChoice
-                bind:value={setAsDefault}
-                id="default"
-                label="Set as default payment method for this organization" />
+            {#if showSetAsDefault}
+                <InputChoice
+                    bind:value={setAsDefault}
+                    id="default"
+                    label="Set as default payment method for this organization" />
+            {/if}
         {/if}
     {/if}
 </Layout.Stack>

src/lib/components/billing/paymentBoxes.svelte

@@ -2,12 +2,14 @@
     import { FakeModal } from '$lib/components';
     import { InputText, Button } from '$lib/elements/forms';
     import { createEventDispatcher, onMount } from 'svelte';
-    import { initializeStripe, submitStripeCard } from '$lib/stores/stripe';
+    import { initializeStripe, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
     import { Spinner } from '@appwrite.io/pink-svelte';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let show = false;
 
@@ -16,10 +18,36 @@
     let name: string;
     let error: string;
     let modal: FakeModal;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     async function handleSubmit() {
         try {
+            if (showState && !state) {
+                throw Error('Please select a state');
+            }
+
+            if (showState) {
+                const card = await setPaymentMethod(paymentMethod.id, name, state);
+                modal.closeModal();
+                await invalidate(Dependencies.PAYMENT_METHODS);
+                dispatch('submit', card);
+                addNotification({
+                    type: 'success',
+                    message: 'A new payment method has been added to your account'
+                });
+                return;
+            }
+
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
+            if (card && Object.hasOwn(card, 'id')) {
+                if ((card as PaymentMethod).card.country === 'US') {
+                    paymentMethod = card as PaymentMethod;
+                    showState = true;
+                    return;
+                }
+            }
             modal.closeModal();
             await invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
@@ -73,28 +101,30 @@
     bind:error
     onSubmit={handleSubmit}>
     <slot />
-    <InputText
-        id="name"
-        required
-        autofocus={true}
-        bind:value={name}
-        label="Cardholder name"
-        placeholder="Cardholder name" />
-
-    <div class="aw-stripe-container" data-private>
-        {#if isLoading}
-            <div class="loader-element">
-                <Spinner />
+    {#if showState}
+        <StatePicker card={paymentMethod} bind:state />
+    {:else}
+        <InputText
+            id="name"
+            required
+            autofocus={true}
+            bind:value={name}
+            label="Cardholder name"
+            placeholder="Cardholder name" />
+        <div class="aw-stripe-container" data-private>
+            {#if isLoading}
+                <div class="loader-element">
+                    <Spinner />
+                </div>
+            {/if}
+            <div
+                style:display={isLoading ? 'none' : 'initial'}
+                class="stripe-element"
+                bind:this={element}>
+                <!-- Stripe will create form elements here -->
             </div>
-        {/if}
-
-        <div
-            style:display={isLoading ? 'none' : 'initial'}
-            class="stripe-element"
-            bind:this={element}>
-            <!-- Stripe will create form elements here -->
         </div>
-    </div>
+    {/if}
     <slot name="end"></slot>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>