tyler/blackcanyontickets
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

fix: resolve ticket modal issues and improve functionality

Browse Source 
- 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>
This commit is contained in:
dzinesco
2025-07-16 08:45:39 -06:00
parent 92ab9406be
commit a049472a13
53 changed files with 2044 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/EventHeader.astro
View File

@@ -1,4 +1,6 @@
---
import SimpleEmbedTest from './SimpleEmbedTest.tsx';
interface Props {
eventId: string;
}
@@ -118,6 +120,12 @@ const { eventId } = Astro.props;
</div>
</div>
<!-- Simple Embed Test -->
<SimpleEmbedTest
client:load
eventId={eventId}
/>
<script define:vars={{ eventId }}>
// Initialize event header when page loads
document.addEventListener('DOMContentLoaded', async () => {
@@ -220,82 +228,7 @@ const { eventId } = Astro.props;
// Event handlers will be added after functions are defined
// Function to show embed modal
function showEmbedModal(eventId, eventSlug, eventTitle) {
// Create modal backdrop
const backdrop = document.createElement('div');
backdrop.className = 'fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center p-4';
backdrop.style.display = 'flex';
// Create modal content
const modal = document.createElement('div');
modal.className = 'bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto';
const embedUrl = `${window.location.origin}/e/${eventSlug}`;
const iframeCode = `<iframe src="${embedUrl}" width="100%" height="600" frameborder="0"></iframe>`;
modal.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-900">Embed Your Event</h2>
<button id="close-embed-modal" class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Direct Link</label>
<div class="flex">
<input type="text" value="${embedUrl}" readonly
class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md bg-gray-50 text-sm" />
<button onclick="copyToClipboard('${embedUrl}')"
class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 text-sm">
Copy
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Embed Code</label>
<div class="flex">
<textarea readonly rows="3"
class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md bg-gray-50 text-sm font-mono">${iframeCode}</textarea>
<button onclick="copyToClipboard('${iframeCode.replace(/'/g, '\\\'')}')"
class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 text-sm">
Copy
</button>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-medium text-blue-900 mb-2">How to use:</h3>
<ul class="text-sm text-blue-800 space-y-1">
<li>• Copy the direct link to share via email or social media</li>
<li>• Use the embed code to add this event to your website</li>
<li>• The embedded page is fully responsive and mobile-friendly</li>
</ul>
</div>
</div>
</div>
`;
backdrop.appendChild(modal);
document.body.appendChild(backdrop);
// Add event listeners
document.getElementById('close-embed-modal').addEventListener('click', () => {
document.body.removeChild(backdrop);
});
backdrop.addEventListener('click', (e) => {
if (e.target === backdrop) {
document.body.removeChild(backdrop);
}
});
}
// Function to show edit event modal
function showEditEventModal(event) {
@@ -540,22 +473,31 @@ const { eventId } = Astro.props;
if (embedBtn) {
embedBtn.addEventListener('click', () => {
// Get event details for the embed modal
const eventTitle = document.getElementById('event-title').textContent;
const eventSlug = document.getElementById('preview-link').href.split('/e/')[1];
const previewLink = document.getElementById('preview-link').href;
const eventSlug = previewLink ? previewLink.split('/e/')[1] : 'loading';
// Get eventId from the URL
const urlParts = window.location.pathname.split('/');
const currentEventId = urlParts[urlParts.indexOf('events') + 1];
// Create and show embed modal
showEmbedModal(currentEventId, eventSlug, eventTitle);
// Show embed modal using React component
if (window.openEmbedModal) {
window.openEmbedModal(currentEventId, eventSlug);
} else {
// Fallback: show simple alert for debugging
alert(`Embed Modal Debug:\nEvent ID: ${currentEventId}\nEvent Slug: ${eventSlug}\nwindow.openEmbedModal: ${typeof window.openEmbedModal}`);
console.log('Embed button clicked but window.openEmbedModal not available');
console.log('Available window properties:', Object.keys(window).filter(k => k.includes('embed')));
}
});
}
}
// Add event listeners after DOM is loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addEventListeners);
document.addEventListener('DOMContentLoaded', () => {
addEventListeners();
});
} else {
addEventListeners();
}