Merge pull request #1101 from trycompai/main

[comp] Production Deploy

Author: claudfuen

apps/app/e2e/tests/middleware-onboarding.spec.ts

@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test';
+import { authenticateTestUser, clearAuth } from '../utils/auth-helpers';
+import { generateTestData } from '../utils/helpers';
+
+test.describe('Middleware Onboarding Behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await clearAuth(page);
+  });
+
+  test('user with null onboardingCompleted is NOT redirected to onboarding', async ({ page }) => {
+    const testData = generateTestData();
+
+    // Create user with org (onboardingCompleted will be null by default)
+    await authenticateTestUser(page, {
+      email: testData.email,
+      name: testData.userName,
+      skipOrg: false, // Creates org with null onboardingCompleted
+    });
+
+    // Try to access organization page
+    await page.goto('/');
+
+    // Should NOT be redirected to onboarding
+    await page.waitForTimeout(2000); // Give time for any redirects
+    expect(page.url()).not.toContain('/onboarding');
+
+    // Should be on an authenticated page (org page, frameworks, etc)
+    const isOnOrgPage =
+      page.url().includes('/org_') ||
+      page.url().includes('/frameworks') ||
+      page.url().includes('/setup');
+    expect(isOnOrgPage).toBeTruthy();
+  });
+
+  test('user without org is redirected to setup', async ({ page }) => {
+    const testData = generateTestData();
+
+    // Create user without org
+    await authenticateTestUser(page, {
+      email: testData.email,
+      name: testData.userName,
+      skipOrg: true,
+    });
+
+    // Navigate to root
+    await page.goto('/');
+
+    // Should be redirected to setup
+    await page.waitForURL(/\/setup\/[a-zA-Z0-9]+/, { timeout: 10000 });
+    expect(page.url()).toContain('/setup/');
+  });
+
+  test('unauthenticated user is redirected to auth', async ({ page }) => {
+    // Try to access protected route without auth
+    await page.goto('/org_123/frameworks');
+
+    // Should be redirected to auth
+    await page.waitForURL(/\/auth/, { timeout: 5000 });
+    expect(page.url()).toContain('/auth');
+  });
+});

apps/app/e2e/tests/onboarding.spec.ts

@@ -269,7 +269,8 @@ test.describe('Onboarding Flow', () => {
     await secondNextButton.click();
 
     // Next button should be disabled when website is empty
-    await expect(page.locator('button:has-text("Next")')).toBeDisabled();
+    const nextButton = page.locator('button:has-text("Next")');
+    await expect(nextButton).toBeDisabled();
 
     // Fill website with simple text (will become valid with .com added)
     await fillFormField(page, 'input[name="website"]', 'testwebsite');

apps/app/e2e/tests/split-onboarding.spec.ts

@@ -1,29 +1,55 @@
 import { expect, test } from '@playwright/test';
+import { authenticateTestUser, clearAuth } from '../utils/auth-helpers';
 import { generateTestData } from '../utils/helpers';
 
 test.describe('Split Onboarding Flow', () => {
+  test.beforeEach(async ({ page }) => {
+    // Clear any existing auth state
+    await clearAuth(page);
+  });
+
   test('new user completes split onboarding: 3 steps → payment → 9 steps → product access', async ({
     page,
   }) => {
     const testData = generateTestData();
     const website = `example${Date.now()}.com`;
 
-    // Start at setup
+    // Authenticate user first
+    await authenticateTestUser(page, {
+      email: testData.email,
+      name: testData.userName,
+      skipOrg: true, // Don't create org, user will go through setup
+    });
+
+    // Navigate to setup
     await page.goto('/setup');
 
+    // Should redirect to /setup/[setupId]
+    await page.waitForURL(/\/setup\/[a-zA-Z0-9]+/, { timeout: 10000 });
+
+    // Wait for content to load
+    await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
+
     // Step 1: Select framework
-    await expect(page.getByText('Which compliance frameworks do you need?')).toBeVisible();
-    await page.getByRole('checkbox', { name: 'SOC 2' }).click();
+    await expect(page.locator('text=/compliance frameworks/i').first()).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Check if framework is already selected, if not select one
+    const checkedFrameworks = await page.locator('input[type="checkbox"]:checked').count();
+    if (checkedFrameworks === 0) {
+      await page.locator('label:has-text("SOC 2")').click();
+    }
     await page.getByRole('button', { name: 'Next' }).click();
 
     // Step 2: Organization name
-    await expect(page.getByText("What's your organization's name?")).toBeVisible();
-    await page.getByPlaceholder("Enter your organization's name").fill(testData.organizationName);
+    await page.waitForSelector('input[name="organizationName"]', { timeout: 10000 });
+    await page.locator('input[name="organizationName"]').fill(testData.organizationName);
     await page.getByRole('button', { name: 'Next' }).click();
 
     // Step 3: Website
-    await expect(page.getByText("What's your organization's domain?")).toBeVisible();
-    await page.getByPlaceholder('example.com').fill(website);
+    await page.waitForSelector('input[name="website"]', { timeout: 10000 });
+    await page.locator('input[name="website"]').fill(website);
     await page.getByRole('button', { name: 'Next' }).click();
 
     // Should redirect to upgrade page
@@ -92,13 +118,32 @@ test.describe('Split Onboarding Flow', () => {
     const testData = generateTestData();
     const website = `example${Date.now()}.com`;
 
+    // Authenticate user first
+    await authenticateTestUser(page, {
+      email: testData.email,
+      name: testData.userName,
+      skipOrg: true,
+    });
+
     // First create org through minimal flow
     await page.goto('/setup');
-    await page.getByRole('checkbox', { name: 'SOC 2' }).click();
+    await page.waitForURL(/\/setup\/[a-zA-Z0-9]+/, { timeout: 10000 });
+
+    // Select framework
+    const checkedFrameworks = await page.locator('input[type="checkbox"]:checked').count();
+    if (checkedFrameworks === 0) {
+      await page.locator('label:has-text("SOC 2")').click();
+    }
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder("Enter your organization's name").fill(testData.organizationName);
+
+    // Fill organization name
+    await page.waitForSelector('input[name="organizationName"]', { timeout: 10000 });
+    await page.locator('input[name="organizationName"]').fill(testData.organizationName);
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder('example.com').fill(website);
+
+    // Fill website
+    await page.waitForSelector('input[name="website"]', { timeout: 10000 });
+    await page.locator('input[name="website"]').fill(website);
     await page.getByRole('button', { name: 'Next' }).click();
 
     const orgIdMatch = page.url().match(/org_[a-zA-Z0-9]+/);
@@ -129,12 +174,31 @@ test.describe('Split Onboarding Flow', () => {
     const firstOrg = generateTestData();
     const firstWebsite = `example${Date.now()}.com`;
 
+    // Authenticate user first
+    await authenticateTestUser(page, {
+      email: firstOrg.email,
+      name: firstOrg.userName,
+      skipOrg: true,
+    });
+
     await page.goto('/setup');
-    await page.getByRole('checkbox', { name: 'SOC 2' }).click();
+    await page.waitForURL(/\/setup\/[a-zA-Z0-9]+/, { timeout: 10000 });
+
+    // Select framework
+    const checkedFrameworks = await page.locator('input[type="checkbox"]:checked').count();
+    if (checkedFrameworks === 0) {
+      await page.locator('label:has-text("SOC 2")').click();
+    }
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder("Enter your organization's name").fill(firstOrg.organizationName);
+
+    // Fill organization name
+    await page.waitForSelector('input[name="organizationName"]', { timeout: 10000 });
+    await page.locator('input[name="organizationName"]').fill(firstOrg.organizationName);
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder('example.com').fill(firstWebsite);
+
+    // Fill website
+    await page.waitForSelector('input[name="website"]', { timeout: 10000 });
+    await page.locator('input[name="website"]').fill(firstWebsite);
     await page.getByRole('button', { name: 'Next' }).click();
 
     const firstOrgIdMatch = page.url().match(/org_[a-zA-Z0-9]+/);
@@ -144,22 +208,28 @@ test.describe('Split Onboarding Flow', () => {
     // Now create additional org using dropdown
     await page.goto(`/upgrade/${firstOrgId}`);
 
-    // Open org switcher
-    await page.getByRole('button', { name: firstOrg.organizationName }).click();
-    await page.getByText('Create Organization').click();
+    // Try navigating directly to setup with intent
+    await page.goto('/setup?intent=create-additional');
 
-    // Should be at setup with intent
-    await expect(page).toHaveURL('/setup?intent=create-additional');
+    // Should redirect to /setup/[setupId] with intent preserved
+    await page.waitForURL(/\/setup\/[a-zA-Z0-9]+\?intent=create-additional/, { timeout: 10000 });
 
     // Complete setup for second org
     const secondOrg = generateTestData();
     const secondWebsite = `example${Date.now() + 1}.com`;
 
-    await page.getByRole('checkbox', { name: 'ISO 27001' }).click();
+    // Select a different framework
+    await page.locator('label:has-text("ISO 27001")').click();
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder("Enter your organization's name").fill(secondOrg.organizationName);
+
+    // Fill organization name
+    await page.waitForSelector('input[name="organizationName"]', { timeout: 10000 });
+    await page.locator('input[name="organizationName"]').fill(secondOrg.organizationName);
     await page.getByRole('button', { name: 'Next' }).click();
-    await page.getByPlaceholder('example.com').fill(secondWebsite);
+
+    // Fill website
+    await page.waitForSelector('input[name="website"]', { timeout: 10000 });
+    await page.locator('input[name="website"]').fill(secondWebsite);
     await page.getByRole('button', { name: 'Next' }).click();
 
     // Should redirect to upgrade for the new org

apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx

@@ -46,20 +46,20 @@ export function PostPaymentOnboarding({
         // Set to max scale when finalizing
         window.dispatchEvent(
           new CustomEvent('onboarding-step-change', {
-            detail: { stepIndex: 8, totalSteps: 9, progress: 1 },
+            detail: { stepIndex: totalSteps - 1, totalSteps, progress: 1 },
           }),
         );
       } else {
-        const progress = stepIndex / 8; // 8 because we have 9 steps (0-8)
+        const progress = stepIndex / (totalSteps - 1);
         // Dispatch custom event to notify the background wrapper
         window.dispatchEvent(
           new CustomEvent('onboarding-step-change', {
-            detail: { stepIndex, totalSteps: 9, progress },
+            detail: { stepIndex, totalSteps, progress },
           }),
         );
       }
     }
-  }, [stepIndex, isFinalizing]);
+  }, [stepIndex, isFinalizing, totalSteps]);
 
   return (
     <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">

apps/app/src/app/(app)/setup/components/AnimatedGradientBackground.tsx

@@ -159,12 +159,12 @@ void main() {
   float mouseDistance = length(mouseOffset);
   
   // Dynamic color palette that shifts based on deformation and mouse
-  vec3 color1 = mix(vec3(0.1, 0.9, 0.4), vec3(0.9, 0.1, 0.2), u_rage);    // Green to red
-  vec3 color2 = mix(vec3(0.0, 0.7, 0.5), vec3(0.7, 0.0, 0.1), u_rage);    // Teal to dark red
-  vec3 color3 = mix(vec3(0.3, 1.0, 0.3), vec3(1.0, 0.3, 0.0), u_rage);    // Electric green to orange-red
+  vec3 color1 = mix(vec3(0.024, 0.306, 0.231), vec3(0.9, 0.1, 0.2), u_rage);    // emerald-900 to red
+  vec3 color2 = mix(vec3(0.024, 0.18, 0.133), vec3(0.7, 0.0, 0.1), u_rage);    // emerald-950 to dark red
+  vec3 color3 = mix(vec3(0.024, 0.373, 0.275), vec3(1.0, 0.3, 0.0), u_rage);    // emerald-800 to orange-red
   
-  // Keyboard glow effect - more subtle cyan tint
-  vec3 glowColor = mix(vec3(0.3, 0.9, 0.8), vec3(1.0, 0.3, 0.3), u_rage);
+  // Keyboard glow effect - emerald tint
+  vec3 glowColor = mix(vec3(0.016, 0.471, 0.341), vec3(1.0, 0.3, 0.3), u_rage);  // emerald-700
   float glowIntensity = u_glow * 0.25 * (1.0 + u_rage * 0.5);
   
   // Pulse effect - very subtle white tint
@@ -176,8 +176,8 @@ void main() {
   vec3 baseColor = mix(color1, color2, sin(deformIntensity + u_time * 0.5) * 0.5 + 0.5);
   baseColor = mix(baseColor, color3, smoothstep(0.1, 0.3, abs(vNoise)));
   
-  // Boost base color saturation
-  baseColor = baseColor * 1.2;
+  // Subtle boost to maintain deep emerald richness
+  baseColor = baseColor * 1.08;
   
   // Mix in glow color based on keyboard activity - very subtle to preserve vibrancy
   baseColor = mix(baseColor, glowColor, glowIntensity * rimLight * 0.3);
@@ -187,38 +187,38 @@ void main() {
   
   // Extra glow where stretched towards mouse
   float stretchGlow = smoothstep(0.3, 0.7, dot(normalize(vPosition), normalize(vec3(mouseOffset, 0.0))));
-  baseColor += mix(vec3(0.1, 0.4, 0.2), vec3(0.4, 0.1, 0.0), u_rage) * stretchGlow * 0.4;
+  baseColor += mix(vec3(0.024, 0.373, 0.275), vec3(0.4, 0.1, 0.0), u_rage) * stretchGlow * 0.4;  // emerald-800
   
   // Holographic interference patterns enhanced by keyboard glow
   float interference = sin(vPosition.x * 15.0 + u_time) * sin(vPosition.y * 15.0 - u_time * 0.7);
   interference *= 0.1 * rimLight * (1.0 + u_glow * 1.5 + u_rage * 2.0);
-  baseColor += vec3(interference * 0.2, interference * 0.5, interference * 0.3);
+  baseColor += vec3(interference * 0.02, interference * 0.3, interference * 0.2);
   
   // Electric rim effect enhanced by mouse proximity and keyboard glow
   float electricRim = pow(rimLight, 0.5);
-  vec3 electricColor = mix(vec3(0.4, 1.0, 0.6), vec3(1.0, 0.4, 0.2), u_rage);
+  vec3 electricColor = mix(vec3(0.02, 0.588, 0.412), vec3(1.0, 0.4, 0.2), u_rage);  // emerald-600
   float electric = sin(atan(vPosition.y, vPosition.x) * 20.0 + u_time * 3.0) * electricRim;
   electric = smoothstep(0.6, 1.0, electric) * 0.3;
   electric *= 1.0 + (1.0 - mouseDistance) * 0.5 + u_glow * 0.5 + u_rage * 1.0;
   
   // Core energy with color variation
   float centerDistance = length(vPosition) / 2.2;
   float coreGlow = smoothstep(1.0, 0.0, centerDistance) * 0.5;
-  vec3 coreColor = mix(vec3(0.5, 1.0, 0.7), vec3(0.3, 0.8, 1.0), sin(u_time * 1.5) * 0.5 + 0.5);
+  vec3 coreColor = mix(vec3(0.016, 0.471, 0.341), vec3(0.024, 0.306, 0.231), sin(u_time * 1.5) * 0.5 + 0.5);  // emerald-700 to emerald-900
   coreColor = mix(coreColor, vec3(1.0, 0.5, 0.3), u_rage);
   coreColor = mix(coreColor, glowColor, u_glow * 0.3);
   
   // Combine all effects
   vec3 finalColor = baseColor;
   finalColor += electricColor * electric;
   finalColor += coreColor * coreGlow * (1.0 + u_pulse * 0.3);
-  finalColor += electricColor * electricRim * 0.6;
+  finalColor += electricColor * electricRim * 0.25;
   
   // Keyboard effect - flowing energy waves instead of dots
   float flowingEnergy = sin(vPosition.x * 10.0 - u_time * 5.0 + vPosition.y * 5.0) * 
                         cos(vPosition.y * 8.0 + u_time * 4.0 - vPosition.z * 3.0);
   flowingEnergy = smoothstep(0.7, 1.0, abs(flowingEnergy)) * u_glow;
-  vec3 energyColor = mix(vec3(0.2, 1.0, 0.8), vec3(0.5, 0.8, 1.0), sin(u_time * 2.0) * 0.5 + 0.5);
+  vec3 energyColor = mix(vec3(0.02, 0.588, 0.412), vec3(0.016, 0.471, 0.341), sin(u_time * 2.0) * 0.5 + 0.5);  // emerald-600 to emerald-700
   energyColor = mix(energyColor, vec3(1.0, 0.3, 0.2), u_rage);
   finalColor += energyColor * flowingEnergy * rimLight * 0.6;
   
@@ -474,7 +474,7 @@ interface AnimatedGradientBackgroundProps {
 
 export function AnimatedGradientBackground({ scale = 1 }: AnimatedGradientBackgroundProps) {
   return (
-    <div className="fixed inset-0 -z-10 opacity-40">
+    <div className="fixed inset-0 -z-10 opacity-50">
       <Canvas
         camera={{
           position: [0, 0, 7],

apps/app/src/app/(app)/upgrade/[orgId]/components/AnimatedPricingBanner.tsx

@@ -38,7 +38,7 @@ export function AnimatedPricingBanner() {
       <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 backdrop-blur-md" />
 
       {/* Clipped animated background */}
-      <div className="absolute inset-0 overflow-hidden opacity-60">
+      <div className="absolute inset-0 overflow-hidden opacity-70">
         <div className="absolute inset-0 scale-[3] translate-y-1/2">
           <AnimatedGradientBackground scale={2} />
         </div>