fix: resolve ticket modal issues and improve functionality

- Fixed modal background opacity from 0.5 to 0.75 for better visibility - Fixed X button close functionality in TicketTypeModal - Resolved CORS issues by removing credentials: 'include' from Supabase client - Fixed onSave callback signature mismatch in TicketsTab component - Removed old initEmbedModal function references causing JavaScript errors - Added comprehensive Playwright tests for ticket button functionality - Verified modal works correctly in both light and dark modes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-16 08:45:39 -06:00
parent 92ab9406be
commit a049472a13
53 changed files with 2044 additions and 498 deletions
--- a/test-buttons-auth.cjs
+++ b/test-buttons-auth.cjs
@@ -0,0 +1,132 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Button Functionality with Auth Bypass', () => {
+  test('should test buttons with direct component access', async ({ page }) => {
+    console.log('Testing button functionality...');
+    
+    // Navigate directly to manage page and check what happens
+    await page.goto('http://localhost:3000/events/test/manage');
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(2000);
+    
+    const currentUrl = page.url();
+    console.log(`Current URL: ${currentUrl}`);
+    
+    // Take screenshot
+    await page.screenshot({ path: 'manage-page-debug.png', fullPage: true });
+    
+    // Check what's actually loaded on the page
+    const pageContent = await page.evaluate(() => {
+      return {
+        title: document.title,
+        hasReactScript: !!document.querySelector('script[src*="react"]'),
+        hasAstroScript: !!document.querySelector('script[src*="astro"]'),
+        hasEmbedModalWrapper: !!document.querySelector('embed-modal-wrapper'),
+        reactRoots: document.querySelectorAll('[data-reactroot]').length,
+        allScripts: Array.from(document.querySelectorAll('script[src]')).map(s => s.src.split('/').pop()),
+        embedButton: !!document.getElementById('embed-code-btn'),
+        hasClientLoad: !!document.querySelector('[data-astro-cid]'),
+        bodyHTML: document.body.innerHTML.substring(0, 1000) // First 1000 chars
+      };
+    });
+    
+    console.log('Page analysis:', JSON.stringify(pageContent, null, 2));
+    
+    // Check for console errors during page load
+    const errors = [];
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+        console.log('Console error:', msg.text());
+      }
+    });
+    
+    page.on('pageerror', error => {
+      errors.push(error.message);
+      console.log('Page error:', error.message);
+    });
+    
+    // Try to directly access a manage page that might not require auth
+    await page.goto('http://localhost:3000/dashboard');
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(2000);
+    
+    console.log('Dashboard URL:', page.url());
+    await page.screenshot({ path: 'dashboard-debug.png', fullPage: true });
+    
+    // Check if we can access any page that has buttons
+    await page.goto('http://localhost:3000/');
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(2000);
+    
+    console.log('Homepage URL:', page.url());
+    await page.screenshot({ path: 'homepage-debug.png', fullPage: true });
+    
+    // Look for any buttons on homepage
+    const homeButtons = await page.locator('button').count();
+    console.log(`Homepage buttons found: ${homeButtons}`);
+    
+    if (homeButtons > 0) {
+      const buttonTexts = await page.locator('button').allTextContents();
+      console.log('Homepage button texts:', buttonTexts);
+    }
+    
+    // Check for React components on homepage
+    const homeReactInfo = await page.evaluate(() => {
+      return {
+        reactElements: document.querySelectorAll('[data-reactroot], [data-react-class]').length,
+        clientLoadElements: document.querySelectorAll('[client\\:load]').length,
+        astroIslands: document.querySelectorAll('astro-island').length,
+        embedModalWrapper: !!document.querySelector('embed-modal-wrapper')
+      };
+    });
+    
+    console.log('Homepage React info:', homeReactInfo);
+    
+    console.log('All errors found:', errors);
+  });
+  
+  test('should check specific component loading issues', async ({ page }) => {
+    console.log('Checking component loading...');
+    
+    // Navigate to homepage first
+    await page.goto('http://localhost:3000/');
+    await page.waitForLoadState('networkidle');
+    
+    // Wait for potential React hydration
+    await page.waitForTimeout(5000);
+    
+    // Check if React is loaded
+    const reactStatus = await page.evaluate(() => {
+      return {
+        hasReact: typeof React !== 'undefined',
+        hasReactDOM: typeof ReactDOM !== 'undefined',
+        windowKeys: Object.keys(window).filter(key => key.toLowerCase().includes('react')),
+        astroIslands: Array.from(document.querySelectorAll('astro-island')).map(island => ({
+          component: island.getAttribute('component-export'),
+          clientDirective: island.getAttribute('client'),
+          props: island.getAttribute('props')
+        }))
+      };
+    });
+    
+    console.log('React status:', JSON.stringify(reactStatus, null, 2));
+    
+    // Try to manually test if we can create the embed modal
+    const manualTest = await page.evaluate(() => {
+      // Try to simulate what should happen when embed button is clicked
+      const embedBtn = document.getElementById('embed-code-btn');
+      if (embedBtn) {
+        console.log('Found embed button');
+        return {
+          embedButtonExists: true,
+          hasClickListener: embedBtn.onclick !== null,
+          buttonHTML: embedBtn.outerHTML
+        };
+      }
+      return { embedButtonExists: false };
+    });
+    
+    console.log('Manual embed test:', manualTest);
+  });
+});