Update Zod package, improve code formatting, and add awaiting indicators

This commit includes three main changes. First, it updates the Zod library from version 3.23.4 to 3.23.5 across all relevant packages. Second, code readability has been enhanced by formatting modifications in several TypeScript files. Lastly, the user feedback on certain operations such as creating a team or charging for a payment is strengthened, by displaying an awaiting indicator until the operation is complete.

apps/e2e/tests/team-accounts/team-accounts.po.ts

@@ -1,4 +1,5 @@
-import { expect, Page } from '@playwright/test';
+import { Page, expect } from '@playwright/test';
+
 import { AuthPageObject } from '../authentication/auth.po';
 
 export class TeamAccountsPageObject {
@@ -15,34 +16,40 @@ export class TeamAccountsPageObject {
     await this.createTeam(params);
   }
 
-  async getTeamFromSelector(teamSlug: string) {
-    await this.openAccountsSelector();
-
-    return this.page.locator(`[data-test="account-selector-team"][data-value="${teamSlug}"]`);
+  getTeamFromSelector(teamSlug: string) {
+    return this.page.locator(
+      `[data-test="account-selector-team"][data-value="${teamSlug}"]`,
+    );
   }
 
-  async selectAccount(teamName: string) {
-    await this.page.click(`[data-test="account-selector-team"][data-name="${teamName}"]`);
+  selectAccount(teamName: string) {
+    return this.page.click(
+      `[data-test="account-selector-team"][data-name="${teamName}"]`,
+    );
   }
 
-  async getTeams() {
-    await this.openAccountsSelector();
-
+  getTeams() {
     return this.page.locator('[data-test="account-selector-team"]');
   }
 
   goToSettings() {
-    return this.page.locator('a', {
-      hasText: 'Settings',
-    }).click();
+    return this.page
+      .locator('a', {
+        hasText: 'Settings',
+      })
+      .click();
   }
 
   goToBilling() {
-    return this.page.getByRole('button', { name: 'Billing' }).click();
+    return this.page
+      .locator('a', {
+        hasText: 'Billing',
+      })
+      .click();
   }
 
-  async openAccountsSelector() {
-    await this.page.click('[data-test="account-selector-trigger"]');
+  openAccountsSelector() {
+    return this.page.click('[data-test="account-selector-trigger"]');
   }
 
   async createTeam({ teamName, slug } = this.createTeamName()) {
@@ -51,23 +58,36 @@ export class TeamAccountsPageObject {
     await this.page.click('[data-test="create-team-account-trigger"]');
     await this.page.fill('[data-test="create-team-form"] input', teamName);
     await this.page.click('[data-test="create-team-form"] button:last-child');
+
+    await this.page.waitForURL(`/home/${slug}`);
   }
 
   async updateName(name: string) {
-    await this.page.fill('[data-test="update-team-account-name-form"] input', name);
+    await this.page.fill(
+      '[data-test="update-team-account-name-form"] input',
+      name,
+    );
+
     await this.page.click('[data-test="update-team-account-name-form"] button');
   }
 
   async deleteAccount(teamName: string) {
     await this.page.click('[data-test="delete-team-trigger"]');
 
-    expect(await this.page.locator('[data-test="delete-team-form-confirm-input"]').isVisible()).toBeTruthy();
+    expect(
+      await this.page
+        .locator('[data-test="delete-team-form-confirm-input"]')
+        .isVisible(),
+    ).toBeTruthy();
 
-    await this.page.fill('[data-test="delete-team-form-confirm-input"]', teamName);
+    await this.page.fill(
+      '[data-test="delete-team-form-confirm-input"]',
+      teamName,
+    );
     await this.page.click('[data-test="delete-team-form-confirm-button"]');
   }
 
-   createTeamName() {
+  createTeamName() {
     const random = (Math.random() * 100000000).toFixed(0);
 
     const teamName = `Team-Name-${random}`;
@@ -75,4 +95,4 @@ export class TeamAccountsPageObject {
 
     return { teamName, slug };
   }
-}
+}

apps/e2e/tests/team-accounts/team-accounts.spec.ts

@@ -1,4 +1,5 @@
-import { expect, Page, test } from '@playwright/test';
+import { Page, expect, test } from '@playwright/test';
+
 import { TeamAccountsPageObject } from './team-accounts.po';
 
 test.describe('Team Accounts', () => {
@@ -13,7 +14,7 @@ test.describe('Team Accounts', () => {
   test('user can update their team name (and slug)', async () => {
     await teamAccounts.setup();
 
-    const {teamName, slug} = teamAccounts.createTeamName();
+    const { teamName, slug } = teamAccounts.createTeamName();
 
     await teamAccounts.goToSettings();
     await teamAccounts.updateName(teamName);
@@ -21,7 +22,9 @@ test.describe('Team Accounts', () => {
     // the slug should be updated to match the new team name
     await page.waitForURL(`http://localhost:3000/home/${slug}/settings`);
 
-    await expect(await teamAccounts.getTeamFromSelector(slug)).toBeVisible();
+    await teamAccounts.openAccountsSelector();
+
+    await expect(teamAccounts.getTeamFromSelector(slug)).toBeVisible();
   });
 });
 
@@ -34,7 +37,10 @@ test.describe('Account Deletion', () => {
     await teamAccounts.goToSettings();
 
     await teamAccounts.deleteAccount(params.teamName);
+    await teamAccounts.openAccountsSelector();
 
-    await expect(await teamAccounts.getTeamFromSelector(params.slug)).not.toBeVisible();
+    await expect(
+      teamAccounts.getTeamFromSelector(params.slug),
+    ).not.toBeVisible();
   });
-});
+});