diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index 710be90..57f7c3b 100644 --- a/client/src/pages/Events.jsx +++ b/client/src/pages/Events.jsx @@ -99,6 +99,23 @@ const DEFAULT_EXPANDED_GROUPS = EVENT_GROUPS.reduce((acc, group) => { acc[group.id] = group.defaultExpanded; return acc; }, {}); +const EVENT_TEMPLATE_STATUS_CONFIG = { + unselected: { + label: 'No template selected', + wrapper: 'border-gray-200 bg-gray-50 text-gray-500', + dot: 'bg-gray-400', + }, + pending_whitelisting: { + label: 'Pending Whitelisting', + wrapper: 'border-amber-200 bg-amber-50 text-amber-700', + dot: 'bg-amber-500', + }, + whitelisted: { + label: 'Published', + wrapper: 'border-green-200 bg-green-50 text-green-700', + dot: 'bg-green-500', + }, +}; function getEventGroupId(event) { const slug = String(event?.slug || ''); @@ -194,11 +211,17 @@ function syncDraftsWithVariants(existingDrafts, variantsBySlug) { function buildTemplateUiState(templates = []) { const nextVariants = {}; const nextGenState = {}; + const nextTemplateStatusBySlug = {}; templates.forEach((template) => { if (!template?.eventSlug) return; if (template.selectedTemplate) { + if (template.status === 'whitelisted') { + nextTemplateStatusBySlug[template.eventSlug] = 'whitelisted'; + } else { + nextTemplateStatusBySlug[template.eventSlug] = 'pending_whitelisting'; + } nextGenState[template.eventSlug] = 'selected'; return; } @@ -209,7 +232,7 @@ function buildTemplateUiState(templates = []) { } }); - return { nextVariants, nextGenState }; + return { nextVariants, nextGenState, nextTemplateStatusBySlug }; } export default function Events() { @@ -229,6 +252,7 @@ export default function Events() { const [selectingVariantKey, setSelectingVariantKey] = useState(''); const [openVariableMenuKey, setOpenVariableMenuKey] = useState(''); const [activeCaretVariantKey, setActiveCaretVariantKey] = useState(''); + const [templateStatusBySlug, setTemplateStatusBySlug] = useState({}); const [error, setError] = useState(''); const [readyToGenerate, setReadyToGenerate] = useState(false); @@ -259,12 +283,13 @@ export default function Events() { ]); const templates = templatesRes.data.templates || []; - const { nextVariants, nextGenState } = buildTemplateUiState(templates); + const { nextVariants, nextGenState, nextTemplateStatusBySlug } = buildTemplateUiState(templates); setEvents(eventsRes.data.events || []); setReadyToGenerate(!!activeProfileRes.data?.activeProfile?.rawCurl); setVariants(nextVariants); setGenState(nextGenState); + setTemplateStatusBySlug(nextTemplateStatusBySlug); setVariantDrafts((currentDrafts) => syncDraftsWithVariants(currentDrafts, nextVariants)); } catch { setError('Failed to load events'); @@ -323,6 +348,11 @@ export default function Events() { })); setOpenVariableMenuKey(''); setActiveCaretVariantKey(''); + setTemplateStatusBySlug((currentStatuses) => { + const nextStatuses = { ...currentStatuses }; + delete nextStatuses[slug]; + return nextStatuses; + }); setGenState((state) => ({ ...state, [slug]: 'done' })); } catch (err) { setError(err.response?.data?.error || 'Generation failed'); @@ -390,8 +420,9 @@ export default function Events() { setOpenVariableMenuKey(''); setActiveCaretVariantKey(''); setGenState((state) => ({ ...state, [slug]: 'selected' })); + setTemplateStatusBySlug((currentStatuses) => ({ ...currentStatuses, [slug]: 'pending_whitelisting' })); if (shouldAutoAdvance) { - navigate(`/${businessId}/templates`); + navigate(`/${businessId}/templates?event=${encodeURIComponent(slug)}`); } } catch (err) { setError(err.response?.data?.error || 'Failed to select template'); @@ -617,6 +648,9 @@ export default function Events() { {group.events.map((event) => { const state = genState[event.slug] || 'idle'; const eventVariants = variants[event.slug] || []; + const templateStatus = templateStatusBySlug[event.slug] || 'unselected'; + const statusConfig = EVENT_TEMPLATE_STATUS_CONFIG[templateStatus] || EVENT_TEMPLATE_STATUS_CONFIG.unselected; + const canViewTemplate = templateStatus !== 'unselected'; return (