Merge pull request #2278 from appwrite/fix-e2e

Fix: e2e flow

Author: abnegate

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

@@ -10,7 +10,6 @@ test('upgrade - free tier', async ({ page }) => {
         await page.getByRole('link', { name: 'Upgrade', exact: true }).click();
         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);
 

e2e/steps/pro-project.ts

@@ -7,12 +7,15 @@ type Metadata = {
 };
 
 export async function enterCreditCard(page: Page) {
-    const dialog = page.locator('.modal').filter({
-        hasText: 'add payment method'
-    });
-    await dialog.waitFor({
-        state: 'visible'
-    });
+    // click the `add` button inside correct view layer
+    await page
+        .locator('#no-payments-card-stack')
+        .getByRole('button', { name: 'add' })
+        .first()
+        .click();
+
+    const dialog = page.locator('.modal').filter({ hasText: 'add payment method' });
+    await dialog.waitFor({ state: 'visible' });
     await page.getByPlaceholder('cardholder').fill('Test User');
     const stripe = page.locator('[title="Secure payment input frame"]').nth(0).contentFrame();
     await stripe.locator('id=Field-numberInput').fill('4242424242424242');
@@ -35,7 +38,6 @@ export async function createProProject(page: Page): Promise<Metadata> {
         await page.getByRole('radio', { name: /^Pro\b/ }).check();
         // `create organization` because there's already free created on start!
         await page.getByRole('button', { name: 'create organization' }).click();
-        await page.getByRole('button', { name: 'add' }).first().click();
         await enterCreditCard(page);
         // skip members
         await page.getByRole('button', { name: 'create organization' }).click();

src/lib/components/billing/selectPaymentMethod.svelte

@@ -78,7 +78,7 @@
         </Layout.Stack>
     {:else}
         <Card.Base variant="secondary" radius="s" padding="xs">
-            <Layout.Stack direction="row">
+            <Layout.Stack direction="row" id="no-payments-card-stack">
                 <Layout.Stack direction="row" gap="xxs" alignItems="center">
                     <Icon
                         icon={IconExclamationCircle}

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

@@ -143,11 +143,10 @@
                 null
             );
 
-            trackDowngradeFeedback();
-
-            await invalidate(Dependencies.ORGANIZATION);
+            await Promise.all([trackDowngradeFeedback(), invalidate(Dependencies.ORGANIZATION)]);
 
             await goto(previousPage);
+
             addNotification({
                 type: 'success',
                 message: `${$organization.name} plan has been successfully updated.`