From bb19d6d207247d72d750f0ec18e3e2988418e157 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 15 Apr 2024 13:16:04 +0800
Subject: [PATCH] Update playwright config and refactor billing error pages

An environment variable has been added to playwright config for running the server command. On billing error pages, an icon was added to the error message, and the duplicate billing error page was refactored to import from the existing page instead of maintaining separate code. Also, changes were made to the workflow to reflect new Playwright server command.
---
 .github/workflows/workflow.yml                |  4 +-
 apps/e2e/playwright.config.ts                 | 18 ++++----
 .../(dashboard)/home/(user)/billing/error.tsx | 42 ++-----------------
 .../home/[account]/billing/error.tsx          |  4 ++
 4 files changed, 17 insertions(+), 51 deletions(-)

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index 47d03b9a5..21db6de65 100644
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -54,6 +54,7 @@ jobs:
       SUPABASE_DB_WEBHOOK_SECRET: ${{ secrets.SUPABASE_DB_WEBHOOK_SECRET }}
       STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+      PLAYWRIGHT_SERVER_COMMAND: pnpm --filter web start:test
 
     steps:
       - uses: actions/checkout@v4
@@ -109,9 +110,6 @@ jobs:
       - 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
 
diff --git a/apps/e2e/playwright.config.ts b/apps/e2e/playwright.config.ts
index 8bdf5c871..5e3fca501 100644
--- a/apps/e2e/playwright.config.ts
+++ b/apps/e2e/playwright.config.ts
@@ -67,14 +67,12 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  /*
-    webServer: {
-      cwd: '../../',
-      command: 'pnpm run dev',
-      url: 'http://localhost:3000',
-      reuseExistingServer: !process.env.CI,
-      stdout: 'pipe',
-      stderr: 'pipe',
-    }
-   */
+  webServer: process.env.PLAYWRIGHT_SERVER_COMMAND ? {
+    cwd: '../../',
+    command: process.env.PLAYWRIGHT_SERVER_COMMAND,
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  } : undefined
 });
diff --git a/apps/web/app/(dashboard)/home/(user)/billing/error.tsx b/apps/web/app/(dashboard)/home/(user)/billing/error.tsx
index 7fa5431a1..e4a931d1b 100644
--- a/apps/web/app/(dashboard)/home/(user)/billing/error.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/billing/error.tsx
@@ -1,41 +1,7 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+import BillingErrorPage from '~/(dashboard)/home/[account]/billing/error';
 
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-import { Button } from '@kit/ui/button';
-import { PageBody, PageHeader } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';
-
-export default function BillingErrorPage() {
-  const router = useRouter();
-
-  return (
-    <>
-      <PageHeader
-        title={<Trans i18nKey={'common:billingTabLabel'} />}
-        description={<Trans i18nKey={'common:billingTabDescription'} />}
-      />
-
-      <PageBody>
-        <div className={'flex flex-col space-y-4'}>
-          <Alert variant={'destructive'}>
-            <AlertTitle>
-              <Trans i18nKey={'billing:planPickerAlertErrorTitle'} />
-            </AlertTitle>
-
-            <AlertDescription>
-              <Trans i18nKey={'billing:planPickerAlertErrorDescription'} />
-            </AlertDescription>
-          </Alert>
-
-          <div>
-            <Button variant={'outline'} onClick={() => router.refresh()}>
-              <Trans i18nKey={'common:retry'} />
-            </Button>
-          </div>
-        </div>
-      </PageBody>
-    </>
-  );
-}
+export default BillingErrorPage;
diff --git a/apps/web/app/(dashboard)/home/[account]/billing/error.tsx b/apps/web/app/(dashboard)/home/[account]/billing/error.tsx
index 7fa5431a1..509bbdb22 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/error.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/error.tsx
@@ -2,6 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';
 import { PageBody, PageHeader } from '@kit/ui/page';
@@ -20,6 +22,8 @@ export default function BillingErrorPage() {
       <PageBody>
         <div className={'flex flex-col space-y-4'}>
           <Alert variant={'destructive'}>
+            <ExclamationTriangleIcon className={'h-4'} />
+
             <AlertTitle>
               <Trans i18nKey={'billing:planPickerAlertErrorTitle'} />
             </AlertTitle>