Add end-to-end tests for user and team billing features

This commit introduces end-to-end tests for the user and team billing features. It also enhances existing billing configurations, logging, and error handling mechanisms. Refactoring has been done to simplify the code and make it more readable. Adjustments have also been made in the visual aspects of some components. The addition of these tests will help ensure the reliability of the billing features.

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

@@ -0,0 +1,87 @@
+import { Page, expect } from '@playwright/test';
+
+export class StripePageObject {
+  private page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  plans() {
+    return this.page.locator('[data-test-plan]');
+  }
+
+  getStripeCheckoutIframe() {
+    return this.page.frameLocator('[name="embedded-checkout"]');
+  }
+
+  async fillForm(params: {
+    billingName?: string;
+    cardNumber?: string;
+    expiry?: string;
+    cvc?: string;
+    billingCountry?: string;
+  } = {}) {
+    expect(() => {
+      return this.getStripeCheckoutIframe().locator('form').isVisible();
+    });
+
+    const billingName = this.billingName();
+    const cardNumber = this.cardNumber();
+    const expiry = this.expiry();
+    const cvc = this.cvc();
+    const billingCountry = this.billingCountry();
+
+    await billingName.fill(params.billingName ?? 'Mr Makerkit');
+    await cardNumber.fill(params.cardNumber ?? '4242424242424242');
+    await expiry.fill(params.expiry ?? '1228');
+    await cvc.fill(params.cvc ?? '123');
+    await billingCountry.selectOption(params.billingCountry ?? 'IT');
+  }
+
+  submitForm() {
+    return this.getStripeCheckoutIframe().locator('form button').click();
+  }
+
+  cardNumber() {
+    return this.getStripeCheckoutIframe().locator('#cardNumber');
+  }
+
+  cvc() {
+    return this.getStripeCheckoutIframe().locator('#cardCvc');
+  }
+
+  expiry() {
+    return this.getStripeCheckoutIframe().locator('#cardExpiry');
+  }
+
+  billingName() {
+    return this.getStripeCheckoutIframe().locator('#billingName');
+  }
+
+  cardForm() {
+    return this.getStripeCheckoutIframe().locator('form');
+  }
+
+  billingCountry() {
+    return this.getStripeCheckoutIframe().locator('#billingCountry');
+  }
+
+  selectPlan(index: number = 0) {
+    const plans = this.plans();
+
+    return plans.nth(index).click();
+  }
+
+  manageBillingButton() {
+    return this.page.locator('manage-billing-redirect-button');
+  }
+
+  successStatus() {
+    return this.page.locator('[data-test="payment-return-success"]');
+  }
+
+  proceedToCheckout() {
+    return this.page.click('[data-test="checkout-submit-button"]');
+  }
+}