Refactor e2e test code and reduce test timeout

The end-to-end tests have been refactored for clarity and maintainability. This includes changes in how the 'Billing' link is accessed, addition of comments and small coding improvements. Moreover, the test timeout has been reduced from 2 minutes to 1 for efficiency. Changes were also applied to the text content in locales file and minor fixes in component styling.

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

@@ -1,6 +1,5 @@
 import { expect, Page, test } from '@playwright/test';
 import { TeamBillingPageObject } from './team-billing.po';
-import exp from 'node:constants';
 
 test.describe('Team Billing', () => {
   let page: Page;

apps/e2e/tests/user-billing/user-billing.spec.ts

@@ -12,7 +12,7 @@ test.describe('User Billing', () => {
     await po.setup();
   });
 
-  test('user can subscribe to a plan', async ({page}) => {
+  test('user can subscribe to a plan', async ({ page }) => {
     await po.billing.selectPlan(0);
     await po.billing.proceedToCheckout();
 
@@ -22,9 +22,11 @@ test.describe('User Billing', () => {
     await expect(po.billing.successStatus()).toBeVisible();
     await po.billing.returnToHome();
 
-    await page.locator('a', {
-      hasText: 'Billing',
-    }).click();
+    const link = page.locator('a', {
+      hasText: 'Billing'
+    });
+
+    await link.click();
 
     await expect(await po.billing.getStatus()).toContainText('Active');
     await expect(po.billing.manageBillingButton()).toBeVisible();

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

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { StripePageObject } from './stripe.po';
 
 export class BillingPageObject {
@@ -29,6 +29,7 @@ export class BillingPageObject {
   }
 
   async returnToHome() {
+    // wait a bit for the webhook to be processed
     await this.page.waitForTimeout(1000);
 
     await this.successStatus().locator('button').click();