Update billing navigation and increase test timeout

Changes include updating the user and team billing specs to increase visibility timeout and alter navigation route post-billing. Minor adjustments have been made to the page aesthetics and redirection logic. Also, refactored import statements for code organization purposes. Changes in the build script are also reflected in the commit.

.github/workflows/workflow.yml

@@ -45,9 +45,6 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Production Build (test env)
-        run: pnpm --filter web build:test
-
   test:
     name: ⚫️ Test
     timeout-minutes: 8
@@ -105,12 +102,19 @@ jobs:
       - name: Supabase Server
         run: pnpm run supabase:web:start -- -x studio,migra,deno-relay,pgadmin-schema-diff,imgproxy,logflare
 
-      - name: Run App
+      - name: Stripe CLI
         run: |
-          pnpm run dev &
+          pnpm run stripe:listen &
+
+      - name: Production Build (test env)
+        run: pnpm --filter web build:test
+
+      - name: Run App
+        run: pnpm --filter web start:test
 
       - name: Run Playwright tests
         run: pnpm run test
+
       - uses: actions/upload-artifact@v4
         if: always()
         with:

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

@@ -38,9 +38,7 @@ export class TeamAccountsPageObject {
   }
 
   goToBilling() {
-    return this.page.locator('a', {
-      hasText: 'Billing',
-    }).click();
+    return this.page.getByRole('button', { name: 'Billing' }).click();
   }
 
   async openAccountsSelector() {

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

@@ -20,10 +20,11 @@ test.describe('Team Billing', () => {
     await po.billing.stripe.fillForm();
     await po.billing.stripe.submitForm();
 
-    await expect(po.billing.successStatus()).toBeVisible();
-    await po.billing.returnToHome();
+    await expect(po.billing.successStatus()).toBeVisible({
+      timeout: 30000,
+    });
 
-    await po.teamAccounts.goToBilling();
+    await po.billing.returnToBilling();
 
     await expect(await po.billing.getStatus()).toContainText('Trial');
     await expect(po.billing.manageBillingButton()).toBeVisible();

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

@@ -19,14 +19,11 @@ test.describe('User Billing', () => {
     await po.billing.stripe.fillForm();
     await po.billing.stripe.submitForm();
 
-    await expect(po.billing.successStatus()).toBeVisible();
-    await po.billing.returnToHome();
-
-    const link = page.locator('button', {
-      hasText: 'Billing'
+    await expect(po.billing.successStatus()).toBeVisible({
+      timeout: 30000,
     });
 
-    await link.click();
+    await po.billing.returnToBilling();
 
     await expect(await po.billing.getStatus()).toContainText('Trial');
     await expect(po.billing.manageBillingButton()).toBeVisible();

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

@@ -28,11 +28,11 @@ export class BillingPageObject {
     return this.page.locator('[data-test="payment-return-success"]');
   }
 
-  async returnToHome() {
+  async returnToBilling() {
     // wait a bit for the webhook to be processed
     await this.page.waitForTimeout(1000);
 
-    return this.page.locator('[data-test="checkout-success-back-link"] button').click();
+    await this.page.locator('[data-test="checkout-success-back-link"]').click();
   }
 
   proceedToCheckout() {

apps/web/app/(dashboard)/home/(user)/billing/return/page.tsx

@@ -1,5 +1,5 @@
 // We reuse the page from the billing module
 // as there is no need to create a new one.
-import ReturnCheckoutSessionPage from '../../../[account]/billing/return/page';
+import ReturnCheckoutSessionPage from '~/(dashboard)/home/[account]/billing/return/page';
 
 export default ReturnCheckoutSessionPage;

apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx

@@ -95,6 +95,10 @@ async function loadCheckoutSession(sessionId: string) {
   };
 }
 
+/**
+ * Revalidates the layout to update cached pages
+ * and redirects back to the home page.
+ */
 // eslint-disable-next-line @typescript-eslint/require-await
 async function onRedirect() {
   'use server';
@@ -103,6 +107,6 @@ async function onRedirect() {
   // which may have changed due to the billing session
   revalidatePath('/home', 'layout');
 
-  // redirect back
-  redirect('../');
+  // redirect back to billing page
+  redirect('../billing');
 }

apps/web/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "analyze": "ANALYZE=true pnpm run build",
     "build": "pnpm with-env next build",
-    "build:test": "pnpm with-env:test next build",
+    "build:test": "NODE_ENV=test pnpm with-env:test next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev --turbo",
     "next:lint": "next lint",

packages/billing/gateway/src/components/billing-session-status.tsx

@@ -20,15 +20,14 @@ export function BillingSessionStatus({
     <section
       data-test={'payment-return-success'}
       className={
-        'fade-in mx-auto max-w-xl rounded-xl border p-16 xl:drop-shadow-sm' +
-        ' dark:border-dark-800 border-gray-100' +
+        'fade-in dark:border-border mx-auto max-w-xl rounded-xl border border-transparent p-16 xl:drop-shadow-2xl' +
         ' bg-background animate-in slide-in-from-bottom-8 ease-out' +
-        ' zoom-in-50 dark:shadow-primary/40 duration-1000 dark:shadow-2xl'
+        ' zoom-in-50 dark:shadow-primary/20 duration-1000 dark:shadow-2xl'
       }
     >
       <div
         className={
-          'flex flex-col items-center justify-center space-y-4 text-center'
+          'flex flex-col items-center justify-center space-y-6 text-center'
         }
       >
         <Check
@@ -54,8 +53,11 @@ export function BillingSessionStatus({
           </p>
         </div>
 
-        <form data-test={'checkout-success-back-link'}>
-          <Button formAction={onRedirect}>
+        <form>
+          <Button
+            data-test={'checkout-success-back-link'}
+            formAction={onRedirect}
+          >
             <span>
               <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
             </span>