// Activities modal controller — Pattern: ICR feedback widget (Mc32os8LhA4Kgcvkh) // Processors: Load Schedule (aaSKC8ijtirCt99Xr), Register (ze8CSvrnpZSHmwgms) var PROCESSOR_LOAD_SCHEDULE = "aaSKC8ijtirCt99Xr"; var PROCESSOR_REGISTER = "ze8CSvrnpZSHmwgms"; var PROCESSOR_ITINERARY = "kLBRwJ7NsR6idAruf"; var _modalScheduleData = null; var _modalContentId = null; var _modalContentTypeId = null; var _signInPoll = null; var _waiverAccepted = false; // Namespace object for HTML onclick handlers var activityModal = {}; // ───────────────────────────────────────────────────────────────── // STATE MANAGEMENT — Pattern: ICR feedbackWidget setState() // ───────────────────────────────────────────────────────────────── function getActModal() { return document.getElementById("act-modal"); } function getActState() { var modal = getActModal(); return modal ? modal.getAttribute("data-state") : "closed"; } function setActState(state) { var modal = getActModal(); if (!modal) return; modal.setAttribute("data-state", state); // Update header subtitle based on state var sub = modal.querySelector(".act-modal-header-sub"); if (sub) { if (state === "auth") { sub.textContent = "Enter your ticket ID to view activities"; } else if (state === "loading") { sub.textContent = "Loading your activities..."; } else if (state === "waiver") { sub.textContent = "Please review and accept the waiver"; } else if (state === "schedule") { sub.textContent = "Select activities to register"; } } // Manage body scroll and header z-index — Pattern: ICR feedbackWidget setState() var mainMenu = document.getElementById("mainMenu"); if (state === "closed") { document.body.style.overflow = ""; if (mainMenu) mainMenu.style.zIndex = ""; } else { document.body.style.overflow = "hidden"; if (mainMenu) mainMenu.style.zIndex = "0"; } } // ───────────────────────────────────────────────────────────────── // PANEL CONTROLS // ───────────────────────────────────────────────────────────────── function openActModal(contentId, contentTypeId) { _modalContentId = contentId; _modalContentTypeId = contentTypeId; _modalScheduleData = null; _waiverAccepted = false; // Check if user is already signed in — skip auth entirely var person = phoros.person(); if (person && person.emailAddress) { setActState("loading"); phoros.processor( PROCESSOR_LOAD_SCHEDULE, { event_content_id: _modalContentId, contentType_id: _modalContentTypeId, emailAddress: person.emailAddress, }, function (err, res) { if (err || !res || !res.verified) { // Signed in but no ticket found — fall back to auth form _showAuthForm(); if (res && res.text) { showActAlert(res.text); } else { showActAlert("No ticket found for your account. Please enter your ticket ID."); } return; } _modalScheduleData = res; if (!_maybeShowWaiver(res)) { renderActSchedule(res); } } ); return; } // Not signed in — show auth form _showAuthForm(); } function _showAuthForm() { // Reset form var form = document.getElementById("act-modal-form"); if (form) form.reset(); hideActAlert(); // Reset verify button var btn = document.getElementById("act-verify-btn"); if (btn) { btn.disabled = false; var span = btn.querySelector("span"); if (span) span.textContent = "View Activities"; } setActState("auth"); // Focus ticket ID input after animation setTimeout(function () { var input = document.getElementById("act-ticket"); if (input) input.focus(); }, 350); } function closeActModal() { if (_signInPoll) { clearInterval(_signInPoll); _signInPoll = null; } setActState("closed"); } // ───────────────────────────────────────────────────────────────── // ALERT HANDLING — Pattern: ICR showFeedbackAlert() // ───────────────────────────────────────────────────────────────── function showActAlert(message) { var alertEl = document.getElementById("act-modal-alert"); if (!alertEl) return; alertEl.textContent = message; alertEl.classList.add("visible"); } function hideActAlert() { var alertEl = document.getElementById("act-modal-alert"); if (alertEl) alertEl.classList.remove("visible"); } // ───────────────────────────────────────────────────────────────── // AUTH FORM — verify ticket holder // ───────────────────────────────────────────────────────────────── function handleActVerify(event) { event.preventDefault(); hideActAlert(); var ticketId = document.getElementById("act-ticket").value.trim(); if (!ticketId) { showActAlert("Please enter your ticket ID."); return; } // Show loading spinner during verification setActState("loading"); phoros.processor( PROCESSOR_LOAD_SCHEDULE, { event_content_id: _modalContentId, contentType_id: _modalContentTypeId, eventTicket_id: ticketId, }, function (err, res) { if (err || !res) { _showAuthForm(); showActAlert("Something went wrong. Please try again."); return; } if (!res.verified) { _showAuthForm(); showActAlert(res.text || "Verification failed. Please check your ticket ID."); return; } _modalScheduleData = res; if (!_maybeShowWaiver(res)) { renderActSchedule(res); } } ); } // ───────────────────────────────────────────────────────────────── // SCHEDULE RENDERING — builds DOM cards // ───────────────────────────────────────────────────────────────── function _maybeShowWaiver(data) { if (data.waiver && data.waiver.text) { // Populate waiver content var titleEl = document.getElementById("act-waiver-title"); if (titleEl) titleEl.textContent = data.waiver.title || "Waiver"; var textEl = document.getElementById("act-waiver-text"); if (textEl) textEl.innerHTML = data.waiver.text; setActState("waiver"); return true; } return false; } activityModal.acceptWaiver = function () { _waiverAccepted = true; if (_modalScheduleData) { renderActSchedule(_modalScheduleData); } }; function renderActSchedule(data) { // Ticket info bar — createElement pattern per ICR Production Standards var infoEl = document.getElementById("act-ticket-info"); if (infoEl) { infoEl.textContent = ""; var nameSpan = document.createElement("span"); nameSpan.className = "ticket-name"; nameSpan.textContent = ((data.ticketHolder.firstName || "") + " " + (data.ticketHolder.lastName || "")).trim(); var typeSpan = document.createElement("span"); typeSpan.className = "ticket-type"; typeSpan.textContent = "(" + (data.ticketHolder.ticketType || "Ticket Holder") + ")"; infoEl.appendChild(nameSpan); infoEl.appendChild(typeSpan); } // Build cards var cardsEl = document.getElementById("act-cards"); if (!cardsEl) return; cardsEl.textContent = ""; var schedule = data.schedule || []; if (!schedule.length) { var emptyDiv = document.createElement("div"); emptyDiv.className = "act-modal-empty"; emptyDiv.textContent = "No activities are currently available for your ticket type."; cardsEl.appendChild(emptyDiv); setActState("schedule"); return; } schedule.forEach(function (act) { cardsEl.appendChild(buildActCard(act)); }); setActState("schedule"); } function buildActCard(act) { var card = document.createElement("div"); card.className = "act-card"; if (act.isRegistered) card.className += " act-card--registered"; else if (act.isFull) card.className += " act-card--full"; else if (act.hasConflict) card.className += " act-card--conflict"; else if (act.hasCategoryConflict) card.className += " act-card--conflict"; // Top row: name + badge var top = document.createElement("div"); top.className = "act-card-top"; var nameDiv = document.createElement("div"); nameDiv.className = "act-card-name"; nameDiv.textContent = act.name || "Activity"; top.appendChild(nameDiv); if (act.isRegistered) { var badge = document.createElement("span"); badge.className = "act-card-badge act-card-badge--registered"; badge.textContent = "Registered"; top.appendChild(badge); } else if (act.isFull) { var badge = document.createElement("span"); badge.className = "act-card-badge act-card-badge--full"; badge.textContent = "Full"; top.appendChild(badge); } else if (act.hasConflict) { var badge = document.createElement("span"); badge.className = "act-card-badge act-card-badge--conflict"; badge.textContent = "Conflict"; top.appendChild(badge); } else if (act.hasCategoryConflict) { var badge = document.createElement("span"); badge.className = "act-card-badge act-card-badge--conflict"; badge.textContent = "Category Conflict"; top.appendChild(badge); } card.appendChild(top); // Time slot if (act.timeSlotLabel) { var timeDiv = document.createElement("div"); timeDiv.className = "act-card-time"; var clockIcon = document.createElement("i"); clockIcon.className = "clock outline icon"; timeDiv.appendChild(clockIcon); timeDiv.appendChild(document.createTextNode(" " + act.timeSlotLabel)); card.appendChild(timeDiv); } // Description if (act.description) { var descDiv = document.createElement("div"); descDiv.className = "act-card-desc"; descDiv.textContent = act.description; card.appendChild(descDiv); } // Category label if (act.category) { var catDiv = document.createElement("div"); catDiv.className = "act-card-category"; catDiv.textContent = act.category; card.appendChild(catDiv); } // Capacity bar (alwaysHideCapacity only suppresses the numeric spots count text) var _showCap = act.capacity > 0 && (act.capacityTrigger === 0 || !act.capacityTrigger || act.remaining <= act.capacityTrigger); if (_showCap) { var pct = Math.round((act.registered / act.capacity) * 100); var barColor = pct < 60 ? "#14f1d9" : pct < 85 ? "#f39c12" : "#e74c3c"; var capDiv = document.createElement("div"); capDiv.className = "act-card-capacity"; var barOuter = document.createElement("div"); barOuter.className = "act-card-bar"; var barFill = document.createElement("div"); barFill.className = "act-card-bar-fill"; barFill.style.width = pct + "%"; barFill.style.background = barColor; barOuter.appendChild(barFill); capDiv.appendChild(barOuter); if (!act.alwaysHideCapacity) { var spotsDiv = document.createElement("div"); spotsDiv.className = "act-card-spots"; spotsDiv.textContent = act.remaining + " of " + act.capacity + " spots"; capDiv.appendChild(spotsDiv); } card.appendChild(capDiv); } // Action area var actionDiv = document.createElement("div"); actionDiv.className = "act-card-action"; if (act.isRegistered) { var status = document.createElement("div"); status.className = "act-card-status act-card-status--registered"; var checkIcon = document.createElement("i"); checkIcon.className = "check icon"; status.appendChild(checkIcon); status.appendChild(document.createTextNode(" Registered")); actionDiv.appendChild(status); if (act.allowUnregister !== false) { var unregBtn = document.createElement("button"); unregBtn.className = "act-card-unregister"; unregBtn.onclick = function () { activityModal.unregister(act.id, unregBtn); }; unregBtn.appendChild(document.createTextNode("Unregister")); actionDiv.appendChild(unregBtn); } } else if (act.isFull) { if (act.allowCapOverride) { var regBtn = document.createElement("button"); regBtn.className = "act-card-register"; regBtn.setAttribute("data-activity-id", act.id); regBtn.onclick = function () { activityModal.register(act.id, regBtn); }; var plusIcon = document.createElement("i"); plusIcon.className = "plus icon"; regBtn.appendChild(plusIcon); regBtn.appendChild(document.createTextNode(" Register")); actionDiv.appendChild(regBtn); } else { var status = document.createElement("div"); status.className = "act-card-status act-card-status--full"; status.textContent = "No spots remaining"; actionDiv.appendChild(status); } } else if (act.hasConflict) { var status = document.createElement("div"); status.className = "act-card-status act-card-status--conflict"; var warnIcon = document.createElement("i"); warnIcon.className = "exclamation triangle icon"; status.appendChild(warnIcon); status.appendChild(document.createTextNode(" Conflicts with " + (act.conflictWith || "another activity"))); actionDiv.appendChild(status); } else if (act.hasCategoryConflict) { var status = document.createElement("div"); status.className = "act-card-status act-card-status--conflict"; var warnIcon = document.createElement("i"); warnIcon.className = "exclamation triangle icon"; status.appendChild(warnIcon); status.appendChild(document.createTextNode(" Category conflict with " + (act.categoryConflictWith || "another activity"))); actionDiv.appendChild(status); } else { var regBtn = document.createElement("button"); regBtn.className = "act-card-register"; regBtn.setAttribute("data-activity-id", act.id); regBtn.onclick = function () { activityModal.register(act.id, regBtn); }; var plusIcon = document.createElement("i"); plusIcon.className = "plus icon"; regBtn.appendChild(plusIcon); regBtn.appendChild(document.createTextNode(" Register")); actionDiv.appendChild(regBtn); } card.appendChild(actionDiv); return card; } // ───────────────────────────────────────────────────────────────── // REGISTRATION // ───────────────────────────────────────────────────────────────── function registerForAct(activityId, btnEl) { if (!_modalScheduleData) return; // Disable button, show loading text — textContent per ICR Production Standards if (btnEl) { btnEl.disabled = true; btnEl.textContent = ""; var spinIcon = document.createElement("i"); spinIcon.className = "spinner loading icon"; btnEl.appendChild(spinIcon); btnEl.appendChild(document.createTextNode(" Registering...")); } phoros.processor( PROCESSOR_REGISTER, { event_content_id: _modalScheduleData.event_content_id, contentType_id: _modalScheduleData.contentType_id, eventTicket_id: _modalScheduleData.ticketHolder.eventTicket_id, emailAddress: _modalScheduleData.ticketHolder.emailAddress, activity_id: activityId, waiver_accepted: _waiverAccepted, }, function (err, res) { if (err || !res) { Swal.fire({ icon: "error", title: "Error", text: "Something went wrong. Please try again.", confirmButtonColor: "#091744" }); // Re-enable button resetRegisterBtn(btnEl); return; } if (res.icon === "success") { // Show success message, then reload schedule — Pattern: registerSchedule:168-178 Swal.fire({ icon: "success", title: res.title, text: res.text, confirmButtonColor: "#091744", }).then(function () { reloadActSchedule(); }); } else { Swal.fire({ icon: res.icon, title: res.title, text: res.text, confirmButtonColor: "#091744" }); resetRegisterBtn(btnEl); } } ); } function unregisterForAct(activityId, btnEl) { if (!_modalScheduleData) return; // Confirm before unregistering Swal.fire({ icon: "warning", title: "Unregister?", text: "Are you sure you want to unregister from this activity?", showCancelButton: true, confirmButtonText: "Yes, unregister", cancelButtonText: "Cancel", confirmButtonColor: "#d9534f", }).then(function (result) { if (!result.isConfirmed) return; // Disable button, show loading if (btnEl) { btnEl.disabled = true; btnEl.textContent = "Cancelling..."; } phoros.processor( PROCESSOR_REGISTER, { action: "unregister", event_content_id: _modalScheduleData.event_content_id, contentType_id: _modalScheduleData.contentType_id, emailAddress: _modalScheduleData.ticketHolder.emailAddress, activity_id: activityId, }, function (err, res) { if (err || !res) { Swal.fire({ icon: "error", title: "Error", text: "Something went wrong. Please try again.", confirmButtonColor: "#091744" }); if (btnEl) { btnEl.disabled = false; btnEl.textContent = "Unregister"; } return; } if (res.icon === "success") { Swal.fire({ icon: "success", title: res.title, text: res.text, confirmButtonColor: "#091744", }).then(function () { reloadActSchedule(); }); } else { Swal.fire({ icon: res.icon, title: res.title, text: res.text, confirmButtonColor: "#091744" }); if (btnEl) { btnEl.disabled = false; btnEl.textContent = "Unregister"; } } } ); }); } function reloadActSchedule() { if (!_modalScheduleData) return; // Show loading state while reloading setActState("loading"); phoros.processor( PROCESSOR_LOAD_SCHEDULE, { event_content_id: _modalScheduleData.event_content_id, contentType_id: _modalScheduleData.contentType_id, emailAddress: _modalScheduleData.ticketHolder.emailAddress, eventTicket_id: _modalScheduleData.ticketHolder.eventTicket_id, }, function (err, res) { if (err || !res || !res.verified) { Swal.fire({ icon: "error", title: "Error", text: "Could not reload activities. Please try again.", confirmButtonColor: "#091744" }); // Fall back to schedule state so user sees last known cards setActState("schedule"); return; } _modalScheduleData = res; renderActSchedule(res); } ); } // ───────────────────────────────────────────────────────────────── // UTILITY // ───────────────────────────────────────────────────────────────── function resetRegisterBtn(btnEl) { if (!btnEl) return; btnEl.disabled = false; btnEl.textContent = ""; var icon = document.createElement("i"); icon.className = "plus icon"; btnEl.appendChild(icon); btnEl.appendChild(document.createTextNode(" Register")); } // ───────────────────────────────────────────────────────────────── // KEYBOARD HANDLING — Pattern: ICR handleFeedbackKeydown() // ───────────────────────────────────────────────────────────────── function handleActKeydown(event) { var state = getActState(); if (state !== "closed" && event.key === "Escape") { closeActModal(); } } // ───────────────────────────────────────────────────────────────── // NAMESPACE BINDING — for HTML onclick handlers // ───────────────────────────────────────────────────────────────── function signInForAct() { // Close the activity modal temporarily so the Phoros sign-in modal can appear setActState("closed"); // Trigger Phoros built-in sign-in modal phoros.person(true); // Poll for sign-in completion — check every 500ms if person is now available if (_signInPoll) { clearInterval(_signInPoll); _signInPoll = null; } var _signInPollCount = 0; _signInPoll = setInterval(function () { _signInPollCount++; var person = phoros.person(); // Stop polling after 2 minutes (240 checks) if (_signInPollCount > 240) { clearInterval(_signInPoll); _signInPoll = null; return; } if (person && person.emailAddress && _modalContentId) { clearInterval(_signInPoll); _signInPoll = null; // Person signed in — auto-load schedule setActState("loading"); phoros.processor( PROCESSOR_LOAD_SCHEDULE, { event_content_id: _modalContentId, contentType_id: _modalContentTypeId, emailAddress: person.emailAddress, }, function (err, res) { if (err || !res || !res.verified) { _showAuthForm(); showActAlert(res && res.text ? res.text : "No ticket found for your account. Please enter your ticket ID."); return; } _modalScheduleData = res; renderActSchedule(res); } ); } }, 500); } // ───────────────────────────────────────────────────────────────── // ITINERARY EMAIL — sends registered activities to patron's email // ───────────────────────────────────────────────────────────────── function doneActModal() { if (!_modalScheduleData || !_modalScheduleData.ticketHolder) return; var btn = document.getElementById("act-done-btn"); if (btn) { btn.disabled = true; var span = btn.querySelector("span"); if (span) span.textContent = "Sending..."; } phoros.processor( PROCESSOR_ITINERARY, { event_content_id: _modalScheduleData.event_content_id, contentType_id: _modalScheduleData.contentType_id, emailAddress: _modalScheduleData.ticketHolder.emailAddress, eventTicket_id: _modalScheduleData.ticketHolder.eventTicket_id, }, function (err, res) { if (btn) { btn.disabled = false; var span = btn.querySelector("span"); if (span) span.textContent = "Get My Itinerary"; } if (err || !res) { Swal.fire({ icon: "error", title: "Error", text: "Something went wrong. Please try again.", confirmButtonColor: "#091744" }); return; } Swal.fire({ icon: res.icon, title: res.title, text: res.text, confirmButtonColor: "#091744", }).then(function () { if (res.icon === "success") { closeActModal(); } }); } ); } activityModal.open = openActModal; activityModal.close = closeActModal; activityModal.handleVerify = handleActVerify; activityModal.register = registerForAct; activityModal.unregister = unregisterForAct; activityModal.signIn = signInForAct; activityModal.done = doneActModal; // ───────────────────────────────────────────────────────────────── // INIT // ───────────────────────────────────────────────────────────────── document.addEventListener("keydown", handleActKeydown); // ═══════════════════════════════════════════════════════════════ // SHARE EVENT (existing) // ═══════════════════════════════════════════════════════════════ var shareEvent = async function (_id, name) { console.log(_id, name); const copyLink = "https://eventrra.org/?p=event&c=" + _id; try { await navigator.clipboard.writeText(copyLink); Swal.fire({ title: "Link Copied", icon: "success", text: "Link has been copied to your clipboard.", showCancelButton: false, showConfirmButton: true, confirmButtonText: "Continue", position: "bottom", toast: true, }); } catch (err) { console.error("Error copying to clipboard:", err); } if (navigator.share) { try { await navigator.share({ title: 'Share "' + name + '"', text: name, url: copyLink, }); console.log("Content shared successfully"); } catch (err) { console.error("Error sharing content:", err); } } }; // ═══════════════════════════════════════════════════════════════ // ANIMATION (existing) // ═══════════════════════════════════════════════════════════════ function updateAnimationClass() { const elements = document.querySelectorAll(".this .animate"); console.log("elements", elements); if (!elements.length) return; const animationClasses = ["animate_up", "animate_left", "animate_down", "animate_right"]; elements.forEach((element) => { element.classList.remove(...animationClasses); const randomClass = animationClasses[Math.floor(Math.random() * animationClasses.length)]; element.classList.add(randomClass); }); } updateAnimationClass(); var mainContent_this = document.querySelectorAll(".this .animate_up, .this .animate_down, .this .animate_right, .this .animate_left"); var mainContent_thisObserver = new IntersectionObserver( function (entries, observer) { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("visible"); } else { entry.target.classList.remove("visible"); } }); }, { root: null, rootMargin: "0px", threshold: 0.1, } ); mainContent_this.forEach((container) => { mainContent_thisObserver.observe(container); }); // ═══════════════════════════════════════════════════════════════ // FYGARO PAYMENT BUTTON — TEMP (existing) // ═══════════════════════════════════════════════════════════════ (function() { var SPECIAL_CODE = "yLGimZxftefxmdZy5"; var FYGARO_SRC = "https://api.fygaro.com/api/v1/payments/payment-button/2093272f-0f1a-4942-8f49-9efbcf52a041/render/"; // Get query param 'c' var params = new URLSearchParams(window.location.search); var cParam = (window.phoros && phoros.router && typeof phoros.router.query === "function") ? (phoros.router.query() && phoros.router.query().c) : params.get("c"); if (cParam === SPECIAL_CODE) { // Find the existing "Get Tickets" button(s) document.querySelectorAll(".buyTicketsButton").forEach(function(origBtn) { // Create the new Fygaro button var fygaroBtn = document.createElement("div"); fygaroBtn.className = "buyTicketsButton fygaroButton"; fygaroBtn.innerHTML = ' Pay with Fygaro'; fygaroBtn.style.backgroundColor = "#28a745"; // optional styling fygaroBtn.style.marginLeft = "8px"; fygaroBtn.style.display = "inline-block"; fygaroBtn.style.cursor = "pointer"; // Mount hidden div for Fygaro script var mount = document.getElementById("fygaro-payment-mount"); if (!mount) { mount = document.createElement("div"); mount.id = "fygaro-payment-mount"; mount.style.position = "fixed"; mount.style.left = "-9999px"; mount.style.top = "0"; document.body.appendChild(mount); } // On click, load and trigger Fygaro payment fygaroBtn.addEventListener("click", function() { // Remove old script if any var oldScript = document.getElementById("fygaroScript"); if (oldScript) oldScript.remove(); var s = document.createElement("script"); s.id = "fygaroScript"; s.type = "text/javascript"; s.src = FYGARO_SRC; s.onload = function() { setTimeout(function() { var payBtn = mount.querySelector("button, a, [role='button']"); if (payBtn) { payBtn.click(); } else { console.warn("Fygaro button not found."); } }, 100); }; mount.appendChild(s); }); // Insert the Fygaro button right after the Get Tickets button origBtn.insertAdjacentElement("afterend", fygaroBtn); }); } })(); // ═══════════════════════════════════════════════════════════════ // RSVP MODAL — Spec #1373 W3 (Public RSVP flow) // Reuses .act-modal-* CSS primitives; new states: option-select, form, success. // Reads option data from the hidden #rsvp-options-cache (Spacebars-iterated). // ═══════════════════════════════════════════════════════════════ var SUBMIT_RSVP_PROCESSOR = "tN4Xuoq3fLEtLCpqz"; var _rsvpModalContentId = null; var _rsvpModalContentTypeId = null; var _rsvpModalSelectedOptionId = null; // Namespace object for HTML onclick handlers var rsvpModal = {}; function _getRsvpModal() { return document.getElementById("rsvp-modal"); } function _setRsvpState(state) { var modal = _getRsvpModal(); if (!modal) return; modal.setAttribute("data-state", state); var sub = modal.querySelector("#rsvp-modal-sub"); if (sub) { if (state === "option-select") sub.textContent = "Choose an option"; else if (state === "loading") sub.textContent = "Working..."; else if (state === "form") sub.textContent = "Reserve your spot"; else if (state === "success") sub.textContent = "All set"; else sub.textContent = "Reserve your spot"; } var mainMenu = document.getElementById("mainMenu"); if (state === "closed") { document.body.style.overflow = ""; if (mainMenu) mainMenu.style.zIndex = ""; } else { document.body.style.overflow = "hidden"; if (mainMenu) mainMenu.style.zIndex = "0"; } } function _readRsvpOptionsFromCache() { var cache = document.getElementById("rsvp-options-cache"); if (!cache) return []; var optionEls = cache.querySelectorAll(".rsvp-option-cache"); var out = []; for (var i = 0; i < optionEls.length; i++) { var el = optionEls[i]; var customFields = []; var cfEls = el.querySelectorAll(".rsvp-cf-cache"); for (var c = 0; c < cfEls.length; c++) { var cfEl = cfEls[c]; var optEls = cfEl.querySelectorAll(".rsvp-cf-opt-cache"); var options = []; for (var oi = 0; oi < optEls.length; oi++) { options.push({ label: optEls[oi].getAttribute("data-label") || "", value: optEls[oi].getAttribute("data-value") || "" }); } customFields.push({ id: cfEl.getAttribute("data-cf-id") || "", title: cfEl.getAttribute("data-cf-title") || "", type: cfEl.getAttribute("data-cf-type") || "text", placeholder: cfEl.getAttribute("data-cf-placeholder") || "", required: cfEl.getAttribute("data-cf-required") === "true", options: options.length ? options : null }); } var capacity = Number(el.getAttribute("data-capacity")) || 0; var capacityUsed = Number(el.getAttribute("data-capacity-used")) || 0; out.push({ id: el.getAttribute("data-id") || "", name: el.getAttribute("data-name") || "", description: el.getAttribute("data-description") || "", capacity: capacity, capacityUsed: capacityUsed, acceptingRsvps: el.getAttribute("data-accepting-rsvps") !== "false", cutOffDate: el.getAttribute("data-cut-off-date") || null, customFields: customFields }); } return out; } function _findRsvpOption(optionId, optionsArr) { var list = optionsArr || _readRsvpOptionsFromCache(); for (var i = 0; i < list.length; i++) { if (list[i].id === optionId) return list[i]; } return null; } function _isRsvpOptionFull(option) { return option.capacity > 0 && (option.capacityUsed || 0) >= option.capacity; } function _isRsvpOptionClosed(option) { if (!option.acceptingRsvps) return true; if (option.cutOffDate) { var cutoff = new Date(option.cutOffDate); if (!isNaN(cutoff.getTime())) { cutoff.setHours(23, 59, 59, 999); if (cutoff < new Date()) return true; } } return false; } function _renderRsvpOptionCards(options) { var container = document.getElementById("rsvp-option-cards"); if (!container) return; container.textContent = ""; for (var i = 0; i < options.length; i++) { var opt = options[i]; var isFull = _isRsvpOptionFull(opt); var isClosed = _isRsvpOptionClosed(opt); var card = document.createElement("button"); card.type = "button"; card.className = "rsvp-option-card"; card.setAttribute("data-rsvp-option-id", opt.id); if (isFull || isClosed) { card.classList.add("rsvp-option-card--full"); card.disabled = true; } else { (function (id) { card.onclick = function () { rsvpModal.selectOption(id); }; })(opt.id); } var name = document.createElement("div"); name.className = "rsvp-option-card-name"; name.textContent = opt.name; if (isFull) { var badge = document.createElement("span"); badge.className = "rsvp-option-card-full-badge"; badge.textContent = "Full"; name.appendChild(badge); } else if (isClosed) { var cBadge = document.createElement("span"); cBadge.className = "rsvp-option-card-full-badge"; cBadge.textContent = "Closed"; name.appendChild(cBadge); } card.appendChild(name); if (opt.description) { var desc = document.createElement("div"); desc.className = "rsvp-option-card-desc"; desc.textContent = opt.description; card.appendChild(desc); } if (opt.capacity > 0) { var meta = document.createElement("div"); meta.className = "rsvp-option-card-meta"; var remaining = Math.max(0, opt.capacity - (opt.capacityUsed || 0)); meta.textContent = remaining + " of " + opt.capacity + " spots remaining"; card.appendChild(meta); } container.appendChild(card); } } function _buildRsvpField(cf, name) { var wrap = document.createElement("div"); wrap.className = "rsvp-field"; var label = document.createElement("label"); label.textContent = cf.title + (cf.required ? " *" : ""); var input; if (cf.type === "textarea") { input = document.createElement("textarea"); } else if (cf.type === "selection") { input = document.createElement("select"); var blank = document.createElement("option"); blank.value = ""; blank.textContent = "— Select —"; input.appendChild(blank); var optsArr = cf.options || []; for (var i = 0; i < optsArr.length; i++) { var optEl = document.createElement("option"); optEl.value = optsArr[i].value; optEl.textContent = optsArr[i].label; input.appendChild(optEl); } } else if (cf.type === "selectize") { // Render as checkbox group (multi-select) wrap.classList.add("rsvp-field-checkbox-group"); wrap.appendChild(label); var group = document.createElement("div"); group.className = "rsvp-checkbox-group"; var optsArr2 = cf.options || []; for (var j = 0; j < optsArr2.length; j++) { var lblEl = document.createElement("label"); lblEl.className = "rsvp-checkbox-label"; var cb = document.createElement("input"); cb.type = "checkbox"; cb.name = name; cb.value = optsArr2[j].value; lblEl.appendChild(cb); lblEl.appendChild(document.createTextNode(" " + optsArr2[j].label)); group.appendChild(lblEl); } wrap.appendChild(group); return wrap; } else if (cf.type === "toggle") { wrap.classList.add("rsvp-field-toggle"); var toggleLabel = document.createElement("label"); toggleLabel.className = "rsvp-toggle-label"; input = document.createElement("input"); input.type = "checkbox"; input.name = name; toggleLabel.appendChild(input); toggleLabel.appendChild(document.createTextNode(" " + cf.title + (cf.required ? " *" : ""))); wrap.appendChild(toggleLabel); if (cf.required) input.required = true; return wrap; } else if (cf.type === "number") { input = document.createElement("input"); input.type = "number"; } else if (cf.type === "date") { input = document.createElement("input"); input.type = "date"; } else { input = document.createElement("input"); input.type = "text"; } input.name = name; if (cf.placeholder) input.placeholder = cf.placeholder; if (cf.required) input.required = true; wrap.appendChild(label); wrap.appendChild(input); return wrap; } function _renderRsvpForm(option) { var area = document.getElementById("rsvp-modal-form-area"); if (!area) return; area.textContent = ""; var form = document.createElement("form"); form.id = "rsvp-form-active"; form.className = "rsvp-form"; form.setAttribute("data-rsvp-option-id", option.id); form.onsubmit = function (event) { return rsvpModal.submit(event); }; // Title + description var heading = document.createElement("h4"); heading.textContent = option.name; form.appendChild(heading); if (option.description) { var desc = document.createElement("p"); desc.className = "rsvp-form-desc"; desc.textContent = option.description; form.appendChild(desc); } // Standard patron contact fields form.appendChild(_buildRsvpField({ type: "text", title: "Full Name", required: true, placeholder: "Jane Doe" }, "_rsvp_fullName")); form.appendChild(_buildRsvpField({ type: "text", title: "Email", required: true, placeholder: "you@example.com" }, "_rsvp_email")); // Override email field input type for HTML5 validation var emailInput = form.querySelector('[name="_rsvp_email"]'); if (emailInput) emailInput.type = "email"; form.appendChild(_buildRsvpField({ type: "text", title: "Phone (optional)", placeholder: "+1 555 0100" }, "_rsvp_phone")); var phoneInput = form.querySelector('[name="_rsvp_phone"]'); if (phoneInput) phoneInput.type = "tel"; // Custom fields per option var cfList = option.customFields || []; for (var i = 0; i < cfList.length; i++) { form.appendChild(_buildRsvpField(cfList[i], "cf_" + cfList[i].id)); } // Submit button var submitBtn = document.createElement("button"); submitBtn.type = "submit"; submitBtn.className = "rsvp-submit-btn"; submitBtn.textContent = "Submit RSVP"; form.appendChild(submitBtn); area.appendChild(form); } rsvpModal.open = function (content_id, contentType_id) { _rsvpModalContentId = content_id; _rsvpModalContentTypeId = contentType_id; _rsvpModalSelectedOptionId = null; var options = _readRsvpOptionsFromCache(); if (!options.length) { Swal.fire("Unavailable", "No RSVP options are currently available.", "info"); return; } // Filter to surfaces that are bookable var bookable = []; for (var i = 0; i < options.length; i++) { bookable.push(options[i]); } if (bookable.length === 1) { // Skip option-select — go straight to form for the only option _rsvpModalSelectedOptionId = bookable[0].id; if (_isRsvpOptionFull(bookable[0]) || _isRsvpOptionClosed(bookable[0])) { Swal.fire( _isRsvpOptionFull(bookable[0]) ? "Full" : "Closed", _isRsvpOptionFull(bookable[0]) ? "This RSVP option has reached its capacity." : "This RSVP option is no longer accepting submissions.", "warning" ); return; } _renderRsvpForm(bookable[0]); _setRsvpState("form"); } else { _renderRsvpOptionCards(bookable); _setRsvpState("option-select"); } }; rsvpModal.selectOption = function (optionId) { var option = _findRsvpOption(optionId); if (!option) { Swal.fire("Error", "Option not found.", "error"); return; } if (_isRsvpOptionFull(option) || _isRsvpOptionClosed(option)) { Swal.fire( _isRsvpOptionFull(option) ? "Full" : "Closed", _isRsvpOptionFull(option) ? "This option is full." : "This option is no longer accepting submissions.", "warning" ); return; } _rsvpModalSelectedOptionId = optionId; _renderRsvpForm(option); _setRsvpState("form"); }; rsvpModal.submit = function (event) { if (event && event.preventDefault) event.preventDefault(); var optionId = _rsvpModalSelectedOptionId; var option = _findRsvpOption(optionId); if (!option) { Swal.fire("Error", "Option not found. Refresh and try again.", "error"); return false; } var form = document.getElementById("rsvp-form-active"); if (!form) { Swal.fire("Error", "Form not found.", "error"); return false; } if (typeof form.checkValidity === "function" && !form.checkValidity()) { if (typeof form.reportValidity === "function") form.reportValidity(); return false; } var fullName = ((form.querySelector('[name="_rsvp_fullName"]') || {}).value || "").trim(); var email = ((form.querySelector('[name="_rsvp_email"]') || {}).value || "").trim(); var phone = ((form.querySelector('[name="_rsvp_phone"]') || {}).value || "").trim(); // Gather customField answers from DOM var answers = []; var cfList = option.customFields || []; for (var i = 0; i < cfList.length; i++) { var cf = cfList[i]; var fieldName = "cf_" + cf.id; var raw; if (cf.type === "toggle") { var tEl = form.querySelector('[name="' + fieldName + '"]'); raw = !!(tEl && tEl.checked); } else if (cf.type === "selectize") { var checked = form.querySelectorAll('[name="' + fieldName + '"]:checked'); raw = []; for (var j = 0; j < checked.length; j++) raw.push(checked[j].value); } else { var el = form.querySelector('[name="' + fieldName + '"]'); raw = el ? el.value : ""; if (cf.type === "number" && raw !== "") { var n = Number(raw); if (isFinite(n)) raw = n; } } answers.push({ fieldId: cf.id, title: cf.title, type: cf.type, value: raw }); } _setRsvpState("loading"); phoros.processor(SUBMIT_RSVP_PROCESSOR, { event_content_id: _rsvpModalContentId, contentType_id: _rsvpModalContentTypeId, option_id: optionId, fullName: fullName, email: email, phone: phone, answers: answers }, function (err, res) { if (err || !res) { _setRsvpState("form"); Swal.fire("Error", "Could not submit RSVP. Please try again.", "error"); return; } if (res.icon === "success") { _setRsvpState("success"); } else { _setRsvpState("form"); Swal.fire(res.title || "Notice", res.text || "", res.icon || "info"); } }); return false; }; rsvpModal.close = function () { _setRsvpState("closed"); _rsvpModalSelectedOptionId = null; };