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

@@ -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
 

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
 });

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;

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>