Refactor E2E tests, update utils, and modify plan-picker validation

Several changes have been made to optimize the testing and validation workflows. The end-to-end tests for user billing, invitations, account, team billing, and team accounts have been retouched for improved performance and better accuracy. There has been a minor modification in the validation rules for plan-picker in the billing component. Furthermore, modifications are made to several utility functions to fine-tune their operations.

apps/e2e/tests/utils/billing.po.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { Page, expect } from '@playwright/test';
 
 import { StripePageObject } from './stripe.po';
 
@@ -13,10 +13,17 @@ export class BillingPageObject {
     return this.page.locator('[data-test-plan]');
   }
 
-  selectPlan(index: number = 0) {
-    const plans = this.plans();
+  async selectPlan(index = 0) {
+    await expect(async () => {
+      const plans = this.plans();
+      const plan = plans.nth(index);
 
-    return plans.nth(index).click();
+      await expect(plan).toBeVisible();
+
+      await this.page.waitForTimeout(500);
+
+      await plan.click();
+    }).toPass();
   }
 
   manageBillingButton() {

apps/e2e/tests/utils/stripe.po.ts

@@ -11,6 +11,12 @@ export class StripePageObject {
     return this.page.frameLocator('[name="embedded-checkout"]');
   }
 
+  async waitForForm() {
+    return expect(async () => {
+      await expect(this.billingCountry()).toBeVisible();
+    }).toPass();
+  }
+
   async fillForm(params: {
     billingName?: string;
     cardNumber?: string;
@@ -18,10 +24,6 @@ export class StripePageObject {
     cvc?: string;
     billingCountry?: string;
   } = {}) {
-    expect(() => {
-      return this.getStripeCheckoutIframe().locator('form').isVisible();
-    });
-
     const billingName = this.billingName();
     const cardNumber = this.cardNumber();
     const expiry = this.expiry();
@@ -55,10 +57,6 @@ export class StripePageObject {
     return this.getStripeCheckoutIframe().locator('#billingName');
   }
 
-  cardForm() {
-    return this.getStripeCheckoutIframe().locator('form');
-  }
-
   billingCountry() {
     return this.getStripeCheckoutIframe().locator('#billingCountry');
   }