(() => { "use strict"; if (window.__FRONTDOOR_BOOKING_RUNTIME_MOUNTED__) return; const config = window.__FRONTDOOR_PREVIEW_CONFIG__; if (!config || !config.nonce || !window.parent || window.parent === window) return; window.__FRONTDOOR_BOOKING_RUNTIME_MOUNTED__ = true; const hidePreviewPageSelector = () => { const navigationPattern = /(?:ไปที่|ไปยังหน้า|ไปยังขั้นตอน|go to page|navigate to|booking step|step navigation|ขั้นตอนการจอง)/i; document.querySelectorAll("select,[data-frontdoor-page-selector]").forEach((selector) => { const marked = selector.matches("[data-frontdoor-page-selector]"); const wrapper = selector.closest("label,[data-frontdoor-page-selector-wrapper],[class*='page-selector'],[class*='page-select'],[class*='page-nav'],[class*='step-nav']"); const contextNode = wrapper || selector.parentElement; const context = String(contextNode?.textContent || "").replace(/\s+/g, " ").trim(); const isNavigation = marked || navigationPattern.test(context); if (!isNavigation) return; const parent = selector.parentElement; const compactParent = parent && parent !== document.body && parent !== document.documentElement && !/^(?:main|section|article|header|nav)$/i.test(parent.tagName) && parent.querySelectorAll("select").length === 1 && parent.children.length <= 3 ? parent : null; const node = wrapper || compactParent || selector; if (node === document.body || node === document.documentElement) { selector.hidden = true; selector.setAttribute("aria-hidden", "true"); selector.style.setProperty("display", "none", "important"); return; } node.hidden = true; node.setAttribute("aria-hidden", "true"); node.style.setProperty("display", "none", "important"); }); }; hidePreviewPageSelector(); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", hidePreviewPageSelector, { once: true }); } const hidePreviewBookingScaffold = () => { const inlineBookingPage = config.inline_booking === true; // A one-page preview is still the generated site surface. Hiding its only // schedule section can remove the entire design and leave an apparently // blank iframe. Only replace the static scaffold when the host explicitly // mounted the dedicated inline booking page. if (!inlineBookingPage) return; const schedulePattern = /(?:choose\s*(?:a\s+)?date\s*(?:and|&)\s*time|select\s*(?:an?\s+)?date(?:\s+to\s+see)?|selectdateandtime|availability(?:\s+shown)?|no\s+time\s+slots?|choose\s+(?:a\s+)?resource|เลือกวัน(?:ที่)?(?:และเวลา)?|เวลาที่ว่าง|ไม่มีช่วงเวลาว่าง|เลือกทรัพยากร)/i; const hasScheduleControl = (node) => Boolean(node.querySelector( "input[type='date'],[role='grid'],table,[class*='calendar'],[class*='Calendar'],[class*='date-picker'],[class*='datepicker']", )); const isGeneratedNode = (node) => node && node !== host && !node.closest("[data-frontdoor-runtime-root]"); const hide = (node) => { if (!isGeneratedNode(node)) return; node.hidden = true; node.setAttribute("aria-hidden", "true"); node.setAttribute("data-frontdoor-static-booking-hidden", "true"); node.style.setProperty("display", "none", "important"); }; const candidates = [...document.querySelectorAll("main,section,article,form,div")] .filter((node) => { if (!isGeneratedNode(node)) return false; const text = String(node.textContent || "").replace(/\s+/g, " ").trim(); return schedulePattern.test(text) && (hasScheduleControl(node) || node.querySelector("h1,h2,h3,h4")); }); const main = candidates.find((node) => node.tagName === "MAIN"); const bodyChild = candidates.find((node) => node.parentElement === document.body); const target = main || bodyChild || candidates[0]; if (target) hide(target); }; const english = (document.documentElement.lang || "").toLowerCase().startsWith("en"); const copy = { th: { book: "จองเวลา", close: "ปิด", activities: "เลือกบริการ", activitiesHint: "เลือกสิ่งที่ต้องการจอง", schedule: "เลือกวันและเวลา", scheduleHint: "เลือกวันและช่วงเวลาที่ยังว่าง", checkout: "ยืนยันการจอง", checkoutHint: "กรอกข้อมูลติดต่อและตรวจสอบยอดชำระ", ticket: "จองสำเร็จ", ticketHint: "เก็บข้อมูลนี้ไว้สำหรับตรวจสอบการจอง", back: "ย้อนกลับ", next: "ไปต่อ", loading: "กำลังโหลดข้อมูลการจอง…", catalogError: "ยังโหลดบริการจองไม่ได้ กรุณาลองใหม่อีกครั้ง", availabilityError: "ยังโหลดเวลาว่างไม่ได้ กรุณาลองใหม่อีกครั้ง", noSlots: "ไม่มีช่วงเวลาว่างในวันนี้", toBeConfirmed: "ต้องยืนยันเวลาว่างกับร้านค้า", date: "วันที่", resource: "เลือกสถานที่ / ทรัพยากร", anyResource: "ให้ระบบเลือกให้", selected: "เลือกแล้ว", name: "ชื่อผู้จอง", phone: "เบอร์โทรศัพท์", email: "อีเมล", payment: "การชำระเงิน", free: "ไม่มีค่าใช้จ่าย", bankTransfer: "โอนเงินผ่านธนาคาร", bank: "ธนาคาร", accountName: "ชื่อบัญชี", accountNumber: "เลขที่บัญชี", slip: "หลักฐานการโอน", chooseFile: "เลือกไฟล์", noFile: "ยังไม่ได้เลือกไฟล์", submit: "ยืนยันและจอง", submitting: "กำลังสร้างการจอง…", required: "กรุณากรอกข้อมูลที่จำเป็นให้ครบ", slipRequired: "กรุณาอัปโหลดหลักฐานการโอน", runtimeUnavailable: "Booking runtime ยังไม่ได้ตั้งค่าใน Builder", order: "เลขคำสั่งซื้อ", bookingId: "รหัสการจอง", status: "สถานะ", refresh: "อัปเดตสถานะ", refreshed: "อัปเดตแล้ว", home: "จองรายการอื่น", total: "ยอดรวม", resourceUnknown: "ทรัพยากรที่ระบบจัดสรรให้", }, en: { book: "Book a time", close: "Close", activities: "Choose a service", activitiesHint: "Select what you want to book", schedule: "Choose date and time", scheduleHint: "Select an available date and slot", checkout: "Confirm booking", checkoutHint: "Add your contact details and review the total", ticket: "Booking confirmed", ticketHint: "Keep these details for your booking reference", back: "Back", next: "Continue", loading: "Loading booking data…", catalogError: "Booking services could not be loaded. Please try again.", availabilityError: "Available times could not be loaded. Please try again.", noSlots: "No time slots are available for this date.", toBeConfirmed: "Availability needs to be confirmed by the venue.", date: "Date", resource: "Choose a resource", anyResource: "Let the venue assign one", selected: "Selected", name: "Booker name", phone: "Phone", email: "Email", payment: "Payment", free: "Free", bankTransfer: "Bank transfer", bank: "Bank", accountName: "Account name", accountNumber: "Account number", slip: "Payment slip", chooseFile: "Choose file", noFile: "No file chosen", submit: "Confirm and book", submitting: "Creating booking…", required: "Please complete the required fields.", slipRequired: "Please upload your payment slip.", runtimeUnavailable: "The Builder booking runtime is not configured.", order: "Order", bookingId: "Booking ID", status: "Status", refresh: "Refresh status", refreshed: "Updated", home: "Book another", total: "Total", resourceUnknown: "Resource assigned by the venue", }, }; const t = (key) => (english ? copy.en[key] : copy.th[key]) || key; const escapeHtml = (value) => String(value ?? "").replace(/[&<>"']/g, (character) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'", })[character]); const escapeAttribute = escapeHtml; const finiteNumber = (value, fallback = 0) => { const number = Number(value); return Number.isFinite(number) ? number : fallback; }; const money = (value) => { const number = finiteNumber(value); return (english ? "฿" : "฿") + number.toLocaleString(english ? "en-US" : "th-TH"); }; const today = () => { const date = new Date(); const offset = date.getTimezoneOffset() * 60000; return new Date(date.getTime() - offset).toISOString().slice(0, 10); }; const monthWindow = (date) => { const value = /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : today(); const [year, month] = value.split("-").map(Number); const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate(); return { from: year + "-" + String(month).padStart(2, "0") + "-01", to: year + "-" + String(month).padStart(2, "0") + "-" + String(lastDay).padStart(2, "0"), }; }; const record = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {}; const array = (value) => Array.isArray(value) ? value : []; const stringList = (value) => Array.isArray(value) ? value.map((item) => String(item).trim()).filter(Boolean) : typeof value === "string" ? value.split(",").map((item) => item.trim()).filter(Boolean) : []; const payloadRecord = (value) => { let current = record(value); for (let depth = 0; depth < 4; depth += 1) { const nested = [current.data, current.result, current.payload, current.availability, current.occupancy].find((item) => item && typeof item === "object" && !Array.isArray(item)); const arrays = [current.time_slots, current.slots, current.available_slots, current.entries]; if (arrays.some((items) => Array.isArray(items) && items.length) || !nested) return current; const next = record(nested); if (Array.isArray(current.resources) && !Array.isArray(next.resources)) next.resources = current.resources; current = next; } return current; }; const activityList = (catalog) => { const found = []; const visit = (value) => { if (!value || typeof value !== "object") return; if (Array.isArray(value)) { value.forEach(visit); return; } Object.entries(value).forEach(([key, child]) => { if (key === "activities" && Array.isArray(child)) { child.forEach((item) => { if (record(item).id) found.push(item); }); } visit(child); }); }; visit(catalog); const seen = new Set(); return found.reduce((items, item) => { const value = record(item); const id = String(value.id || "").trim(); if (!id || seen.has(id)) return items; seen.add(id); items.push(value.id === id ? value : Object.assign({}, value, { id })); return items; }, []); }; const catalogResources = (catalog) => { const found = []; const visit = (value) => { if (!value || typeof value !== "object") return; if (Array.isArray(value)) { value.forEach(visit); return; } Object.entries(value).forEach(([key, child]) => { if (key === "resources" && Array.isArray(child)) found.push(...child); visit(child); }); }; visit(catalog); const seen = new Set(); return found.filter((resource) => { const id = String(record(resource).id || "").trim(); if (!id || seen.has(id)) return false; seen.add(id); return true; }); }; const activityResources = (activity, catalog) => { const rawIds = activity.resource_ids ?? activity.resourceIds; const ids = stringList(rawIds); const resources = catalogResources(catalog).filter((resource) => { const item = record(resource); return String(item.activity_id || item.activityId || "") === String(activity.id) && (!ids.length || ids.includes(String(item.id))); }); return resources.length ? resources : ids.map((id) => ({ id, name: id, activity_id: activity.id })); }; const activityPrice = (activity) => { const item = record(activity); if (item.start_from !== undefined || item.startFrom !== undefined) return finiteNumber(item.start_from ?? item.startFrom); if (item.booking_type === "all-day" || item.bookingType === "all-day") return finiteNumber(item.price_per_day ?? item.pricePerDay ?? item.price_per_slot ?? item.pricePerSlot); return finiteNumber(item.price_per_slot ?? item.pricePerSlot ?? item.price_per_day ?? item.pricePerDay); }; const paymentMode = (activity) => { const item = record(activity); if (item.payment_mode === "free" || item.payment_mode === "bank_transfer") return item.payment_mode; return activityPrice(item) === 0 ? "free" : "bank_transfer"; }; const safeImageUrl = (value) => { if (typeof value !== "string" || !value.trim()) return ""; try { const url = new URL(value); return url.protocol === "https:" ? url.href : ""; } catch { return /^data:image\/(?:png|jpeg|webp);base64,/i.test(value) ? value : ""; } }; const imageUrlFromValue = (value) => { const direct = safeImageUrl(value); if (direct) return direct; const item = record(value); for (const key of ["url", "src", "href", "image_url", "imageUrl"]) { const candidate = safeImageUrl(item[key]); if (candidate) return candidate; } return ""; }; const activityImage = (activity) => { const item = record(activity); for (const key of [ "image", "image_url", "imageUrl", "thumbnail", "thumbnail_url", "thumbnailUrl", "cover", "cover_image", "cover_image_url", "coverImageUrl", "photo", "photo_url", "photoUrl", "media", "media_url", "mediaUrl", ]) { const candidate = imageUrlFromValue(item[key]); if (candidate) return candidate; } return ""; }; let requestNumber = 0; const pending = new Map(); window.addEventListener("message", (event) => { const data = event.data; if (event.source !== window.parent || !data || data.type !== "frontdoor:response" || data.nonce !== config.nonce) return; const request = pending.get(data.id); if (!request) return; pending.delete(data.id); window.clearTimeout(request.timer); if (data.ok) { request.resolve(data.value); return; } const error = new Error(data.value?.error?.message || t("runtimeUnavailable")); error.providerCode = data.value?.error?.details?.provider_code; request.reject(error); }); const request = (operation, payload) => new Promise((resolve, reject) => { const id = "preview-" + Date.now() + "-" + (++requestNumber); const timer = window.setTimeout(() => { pending.delete(id); reject(new Error(t("runtimeUnavailable"))); }, 30000); pending.set(id, { resolve, reject, timer }); window.parent.postMessage({ type: "frontdoor:request", nonce: config.nonce, id, operation, payload: payload || {}, }, "*"); }); const host = document.createElement("div"); host.setAttribute("data-frontdoor-runtime-root", "true"); const inlineBooking = config.inline_booking === true; const singlePage = config.single_page === true; const cornerStyle = String(config.corner_style || ""); if (cornerStyle) host.setAttribute("data-fd-corner-style", cornerStyle); if (inlineBooking) host.setAttribute("data-fd-inline", "true"); const root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host; root.innerHTML = ""; const launcher = root.querySelector("[data-fd-launcher]"); const cardStyle = document.createElement("style"); cardStyle.textContent = ".fd-card-media{display:block;width:calc(100% + 30px);aspect-ratio:16/9;margin:-15px -15px 12px;overflow:hidden;border-radius:14px 14px 0 0;background:#eef5f3}.fd-card-media .fd-activity-image{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:center;border-radius:0}.fd-card-title{display:block}"; cardStyle.textContent += ":host([data-fd-inline]){display:block;width:min(100%,980px);margin:24px auto;position:relative;z-index:1}:host([data-fd-inline]) .fd-launcher{display:none}:host([data-fd-inline]) .fd-modal{position:static;inset:auto;display:block;padding:0}:host([data-fd-inline]) .fd-backdrop{display:none}:host([data-fd-inline]) .fd-dialog{width:100%;max-height:none;overflow:visible;border-radius:18px;box-shadow:0 18px 50px #10252226}:host([data-fd-inline]) .fd-close{display:none}.fd-calendar{margin:4px 0 18px;padding:14px;border:1px solid #d9ebe7;border-radius:15px;background:#f8fcfb}.fd-calendar-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.fd-calendar-month{margin:0;font-size:16px;font-weight:800}.fd-calendar-nav{display:flex;gap:6px}.fd-calendar-nav .fd-button{min-width:40px;padding:8px}.fd-calendar-weekdays,.fd-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.fd-calendar-weekday{color:#64727d;font-size:11px;font-weight:800;text-align:center}.fd-calendar-grid{margin-top:7px}.fd-calendar-day{min-height:42px;padding:6px 2px;border:1px solid #d9ebe7;border-radius:9px;background:#fff;color:#17212b;font:700 13px system-ui,sans-serif;cursor:pointer}.fd-calendar-day:hover,.fd-calendar-day[aria-pressed=true]{border-color:var(--primary,#18b7aa);background:var(--primary,#18b7aa);color:var(--primary-foreground,#fff)}.fd-calendar-day[data-status=unavailable]{background:#edf1f1;color:#8a9898;cursor:not-allowed}.fd-calendar-day[data-status=unknown]{border-style:dashed}.fd-calendar-day:disabled{opacity:.72}.fd-calendar-day--empty{visibility:hidden;pointer-events:none}.fd-date-native{font-size:12px}.fd-date-native input{height:38px;font-size:13px}@media(max-width:480px){:host([data-fd-inline]){width:calc(100% - 24px);margin:14px auto}.fd-calendar{padding:10px}.fd-calendar-weekdays,.fd-calendar-grid{gap:4px}.fd-calendar-day{min-height:38px;font-size:12px}}"; cardStyle.textContent += ".fd-file{position:relative}.fd-file-button{border:0;font:inherit;line-height:1}.fd-file input{display:block;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}"; cardStyle.textContent += ".fd-ticket{position:relative;overflow:hidden;padding:22px;background:linear-gradient(135deg,#effbf9 0%,#ffffff 76%)}.fd-ticket::before{content:\"\";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#18b7aa,#8ddfd5)}.fd-ticket h3{margin-bottom:6px;font-size:22px;letter-spacing:-.02em}.fd-ticket p{max-width:58ch}.fd-ticket dl{margin-top:18px;padding-top:15px;border-top:1px solid #d9ebe7}.fd-ticket dd[data-fd-status]{justify-self:end;padding:4px 10px;border:1px solid #b8ece5;border-radius:999px;background:#e9fbf8;color:#087d76}.fd-actions{align-items:center;margin-top:20px;padding-top:4px}.fd-actions .fd-button{transition:background .18s ease,border-color .18s ease,transform .18s ease}.fd-actions .fd-button:hover{transform:translateY(-1px)}.fd-actions .fd-status-button{margin-top:0;border-color:#18b7aa;background:#e9fbf8;color:#087d76}.fd-actions .fd-status-button:hover{background:#d9f5f1}:host([data-fd-inline]) .fd-dialog{border-color:#cfe7e3;box-shadow:0 18px 45px #1025221f}:host([data-fd-inline]) .fd-head{padding:26px 28px 14px;background:linear-gradient(180deg,#ffffff 0%,#f7fcfb 100%)}:host([data-fd-inline]) .fd-content{padding:12px 28px 28px}@media(max-width:480px){:host([data-fd-inline]) .fd-head,:host([data-fd-inline]) .fd-content{padding-left:16px;padding-right:16px}.fd-ticket{padding:18px}.fd-ticket dd[data-fd-status]{padding-inline:8px}}"; cardStyle.textContent += ".fd-ticket-qr{display:grid;place-items:center;width:fit-content;max-width:100%;margin:18px auto 2px;padding:12px;border:1px solid #d9ebe7;border-radius:14px;background:#fff;box-shadow:0 8px 20px #10252212}.fd-ticket-qr img{display:block;width:208px;height:208px;max-width:100%;object-fit:contain;background:#fff}"; root.append(cardStyle); if (cornerStyle === "sharp") { const cornerOverride = document.createElement("style"); cornerOverride.textContent = ':host([data-fd-corner-style="sharp"]) *{border-radius:0 !important}'; root.append(cornerOverride); } const modal = root.querySelector("[data-fd-modal]"); const content = root.querySelector("[data-fd-content]"); const title = root.querySelector(".fd-title"); const subtitle = root.querySelector("[data-fd-subtitle]"); const alert = root.querySelector("[data-fd-alert]"); const state = { open: false, view: "activities", catalog: null, activities: [], activity: null, date: today(), availability: null, occupancy: null, selectedSlot: null, resourceId: "", knownResources: [], customer: { name: "", phone: "", email: "" }, file: null, slipUpload: null, booking: null, loading: false, submitting: false, error: "", idempotencyKey: null, availabilityKey: null, requestedActivityId: String(config.initial_activity_id || "").trim(), }; const showError = (message) => { state.error = message || ""; alert.textContent = state.error; alert.hidden = !state.error; }; const setView = (view) => { state.view = view; state.error = ""; render(); }; const open = (activityId) => { const requestedActivityId = typeof activityId === "string" ? activityId.trim() : ""; state.open = true; if (requestedActivityId) state.requestedActivityId = requestedActivityId; modal.hidden = false; modal.setAttribute("aria-hidden", "false"); if (!state.catalog && !state.loading) loadCatalog(); else if (state.requestedActivityId) { const requested = state.requestedActivityId; state.requestedActivityId = ""; if (state.activities.some((item) => String(record(item).id) === requested)) { selectActivity(requested); return; } } render(); }; const close = () => { state.open = false; modal.hidden = true; modal.setAttribute("aria-hidden", "true"); }; const loadCatalog = () => { state.loading = true; state.error = ""; render(); request("catalog", {}).then((catalog) => { state.catalog = record(catalog); state.activities = activityList(state.catalog); state.loading = false; const requested = state.requestedActivityId; state.requestedActivityId = ""; if (requested && state.activities.some((item) => String(record(item).id) === requested)) { selectActivity(requested); return; } state.view = state.activities.length ? "activities" : "error"; if (!state.activities.length) state.error = t("catalogError"); render(); }).catch((error) => { state.loading = false; state.view = "error"; state.error = error.message || t("catalogError"); render(); }); }; const eventSlot = (activity) => { const schedule = record(activity.event_schedule); if (!schedule.date || !schedule.start_time || !schedule.end_time) return null; return { id: String(schedule.start_time) + "-" + String(schedule.end_time), start_time: String(schedule.start_time), end_time: String(schedule.end_time), available: true, price_amount: activityPrice(activity), resource_ids: array(activity.resource_ids), }; }; const selectActivity = (activityId) => { const activity = state.activities.find((item) => String(record(item).id) === String(activityId)); if (!activity) return; state.activity = activity; state.date = today(); state.availability = null; state.occupancy = null; state.selectedSlot = eventSlot(activity); state.resourceId = ""; state.knownResources = []; state.idempotencyKey = null; state.slipUpload = null; if (state.selectedSlot) { state.date = String(record(activity.event_schedule).date); state.view = "checkout"; render(); return; } state.view = "schedule"; render(); loadScheduleData(); }; const resourceOptions = () => { const activity = record(state.activity); const configuredResources = activityResources(activity, state.catalog); const resourceIds = stringList(activity.resource_ids ?? activity.resourceIds); const responseResources = array(payloadRecord(state.availability).resources); const merged = new Map(); [...state.knownResources, ...configuredResources, ...responseResources].forEach((item) => { const value = record(item); const id = String(value.id || "").trim(); if (!id || (resourceIds.length && !resourceIds.includes(id))) return; merged.set(id, Object.assign({}, merged.get(id) || {}, value, { id })); }); state.knownResources = [...merged.values()]; return state.knownResources; }; const availabilityRequest = () => { const activity = record(state.activity); const resourceIds = stringList(activity.resource_ids ?? activity.resourceIds); if (state.resourceId) { return { type: "specific", resource_id: state.resourceId }; } return { type: "any", ...(resourceIds.length ? { resource_ids: resourceIds } : {}) }; }; const loadScheduleData = () => { if (!state.activity || !state.date) return; const key = String(state.activity.id) + "|" + state.date + "|" + JSON.stringify(availabilityRequest()); state.availabilityKey = key; state.loading = true; state.selectedSlot = null; state.idempotencyKey = null; state.slipUpload = null; state.error = ""; render(); const window = monthWindow(state.date); Promise.all([ request("availability", { activity_id: String(state.activity.id), date: state.date, resource_preference: availabilityRequest(), }), request("occupancy", window).catch(() => null), ]).then(([availability, occupancy]) => { if (state.availabilityKey !== key) return; state.availability = record(availability); state.occupancy = occupancy; state.loading = false; state.resourceId = state.resourceId || ""; render(); }).catch((error) => { if (state.availabilityKey !== key) return; state.loading = false; state.error = error.message || t("availabilityError"); render(); }); }; const availabilitySlotSource = () => { const payload = payloadRecord(state.availability); if (Array.isArray(payload.time_slots) && payload.time_slots.length) return { slots: payload.time_slots, availableOnly: false }; if (Array.isArray(payload.slots) && payload.slots.length) return { slots: payload.slots, availableOnly: false }; if (Array.isArray(payload.available_slots)) return { slots: payload.available_slots, availableOnly: true }; if (Array.isArray(payload.time_slots)) return { slots: payload.time_slots, availableOnly: false }; if (Array.isArray(payload.slots)) return { slots: payload.slots, availableOnly: false }; return { slots: [], availableOnly: false }; }; const normalizeSlot = (slot, index, availableOnly) => { const item = record(slot); const start = String(item.start_time ?? item.startTime ?? ""); const end = String(item.end_time ?? item.endTime ?? ""); const id = String(item.id ?? item.slot_id ?? item.slotId ?? (start && end ? start + "-" + end : "slot-" + index)); return Object.assign({}, item, { id, start_time: start, end_time: end, available: (() => { const hasAvailabilityFlag = ["available", "is_available", "isAvailable", "bookable", "is_bookable", "isBookable", "status", "availability"].some((key) => item[key] !== undefined && item[key] !== null); const value = item.available ?? item.is_available ?? item.isAvailable ?? item.bookable ?? item.is_bookable ?? item.isBookable ?? item.status ?? item.availability; return availableOnly || value === true || value === 1 || /^(?:available|open|free|true|1)$/i.test(String(value ?? "")) || !hasAvailabilityFlag; })(), ...(item.price_amount === undefined && item.priceAmount !== undefined ? { price_amount: item.priceAmount } : {}), ...(item.resource_ids === undefined && item.resourceIds !== undefined ? { resource_ids: item.resourceIds } : {}), }); }; const availableSlots = () => { const source = availabilitySlotSource(); return source.slots.map((slot, index) => normalizeSlot(slot, index, source.availableOnly)).filter((slot) => slot.available === true); }; const availabilityIsKnown = () => { const payload = payloadRecord(state.availability); return ["time_slots", "slots", "available_slots"].some((key) => Array.isArray(payload[key])); }; const selectedResourceId = () => { return state.resourceId; }; const slotPrice = (slot) => { const item = record(slot); return item.price_amount === undefined && item.priceAmount === undefined ? activityPrice(state.activity || {}) : finiteNumber(item.price_amount ?? item.priceAmount, 0); }; const slotGroups = () => { const groups = { morning: [], afternoon: [], evening: [] }; availableSlots().forEach((slot) => { const hour = parseInt(String(record(slot).start_time || "0").split(":")[0], 10); if (hour < 12) groups.morning.push(slot); else if (hour < 17) groups.afternoon.push(slot); else groups.evening.push(slot); }); return groups; }; const occupancyNote = () => { const entries = array(payloadRecord(state.occupancy).entries); const entry = entries.find((item) => String(record(item).day ?? record(item).date ?? "") === state.date); if (!entry) return ""; const value = String(record(entry).availability ?? record(entry).status ?? "").toLowerCase(); return /^(full|unavailable|occupied|booked|closed)$/.test(value) ? t("noSlots") : ""; }; const calendarStatus = (date) => { const entry = array(payloadRecord(state.occupancy).entries).find((item) => String(record(item).day ?? record(item).date ?? "") === date); if (!entry) return "unknown"; const value = String(record(entry).availability ?? record(entry).status ?? "").toLowerCase(); if (/^(full|unavailable|occupied|booked|closed)$/.test(value)) return "unavailable"; if (/^(available|open|free)$/.test(value)) return "available"; return "unknown"; }; const calendarMonthLabel = (date) => { const [year, month] = date.split("-").map(Number); return new Intl.DateTimeFormat(english ? "en-US" : "th-TH-u-ca-gregory", { year: "numeric", month: "long", timeZone: "UTC" }).format(new Date(Date.UTC(year, month - 1, 1))); }; const calendarMarkup = () => { const [year, month] = state.date.split("-").map(Number); const monthValue = String(month).padStart(2, "0"); const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate(); const leading = new Date(Date.UTC(year, month - 1, 1)).getUTCDay(); const weekdays = english ? ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] : ["อา.", "จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส."]; const cells = []; for (let index = 0; index < leading; index += 1) cells.push(""); for (let day = 1; day <= lastDay; day += 1) { const date = year + "-" + monthValue + "-" + String(day).padStart(2, "0"); const status = calendarStatus(date); const selected = date === state.date; const disabled = status === "unavailable"; cells.push(""); } return "

" + escapeHtml(calendarMonthLabel(state.date)) + "

" + weekdays.map((day) => "" + escapeHtml(day) + "").join("") + "

" + cells.join("") + "

"; }; const shiftCalendarMonth = (offset) => { const [year, month, day] = state.date.split("-").map(Number); const next = new Date(Date.UTC(year, month - 1 + Number(offset), 1)); const nextYear = next.getUTCFullYear(); const nextMonth = next.getUTCMonth() + 1; const lastDay = new Date(Date.UTC(nextYear, nextMonth, 0)).getUTCDate(); state.date = nextYear + "-" + String(nextMonth).padStart(2, "0") + "-" + String(Math.min(day || 1, lastDay)).padStart(2, "0"); loadScheduleData(); }; const activitiesMarkup = () => { if (state.loading && !state.activities.length) return "

" + escapeHtml(t("loading")) + "

"; if (!state.activities.length) return "

" + escapeHtml(state.error || t("catalogError")) + "

"; return "

" + state.activities.map((activity) => { const item = record(activity); const image = activityImage(item); return ""; }).join("") + "

"; }; const scheduleMarkup = () => { const groups = slotGroups(); const options = resourceOptions(); const note = occupancyNote(); const groupMarkup = [["morning", "Morning"], ["afternoon", "Afternoon"], ["evening", "Evening"]].map(([key, label]) => { const slots = groups[key]; if (!slots.length) return ""; return "

" + label + "

" + slots.map((slot) => { const item = record(slot); const selected = state.selectedSlot && String(record(state.selectedSlot).id) === String(item.id); return ""; }).join("") + "

"; }).join(""); const availabilityKnown = availabilityIsKnown(); const empty = !state.loading && !groupMarkup; return calendarMarkup() + "" + escapeHtml(t("date")) + "" + (options.length > 1 ? "" + escapeHtml(t("resource")) + "" : "") + (note ? "

" + escapeHtml(note) + "

" : "") + (state.loading ? "

" + escapeHtml(t("loading")) + "

" : empty ? "

" + escapeHtml(availabilityKnown ? t("noSlots") : t("toBeConfirmed")) + "

" : "

" + groupMarkup + "

") + "

"; }; const paymentConfig = () => record(record(state.catalog).payment).bank_transfer || {}; const contactRequirements = () => { const value = record(record(state.catalog).contact_requirements); return { phone: value.phone !== false, email: value.email === true }; }; const checkoutMarkup = () => { const activity = record(state.activity); const slot = record(state.selectedSlot); const resource = selectedResourceId(); const total = slotPrice(slot); const mode = paymentMode(activity); const requirements = contactRequirements(); const payment = paymentConfig(); const qr = safeImageUrl(payment.qr_image_url); const paymentMarkup = mode === "free" ? "

" + escapeHtml(t("payment")) + "

" + escapeHtml(t("free")) + "

" : "

" + escapeHtml(t("bankTransfer")) + "

" + escapeHtml(t("bank")) + ": " + escapeHtml(payment.bank_name || t("toBeConfirmed")) + "" + escapeHtml(t("accountName")) + ": " + escapeHtml(payment.account_name || t("toBeConfirmed")) + "" + escapeHtml(t("accountNumber")) + ": " + escapeHtml(payment.account_number || t("toBeConfirmed")) + "

" + (qr ? " $\"Payment$ " : "") + "

" + escapeHtml(t("slip")) + "" + escapeHtml(state.file?.name || t("noFile")) + "

"; return ""; }; const bookingLine = () => { const slot = record(state.selectedSlot); const activity = record(state.activity); const resourceId = selectedResourceId(); const resourcePreference = resourceId ? { type: "specific", resource_id: resourceId } : { type: "any", ...(stringList(activity.resource_ids ?? activity.resourceIds).length ? { resource_ids: stringList(activity.resource_ids ?? activity.resourceIds) } : {}) }; return { activity_id: String(activity.id), selection: { date: state.date, start_time: String(slot.start_time || "00:00"), end_time: String(slot.end_time || "23:59"), slot_ids: (slot.id ?? slot.slot_id ?? slot.slotId) ? [String(slot.id ?? slot.slot_id ?? slot.slotId)] : [], resource_preference: resourcePreference, }, pricing: { subtotal_amount: slotPrice(slot), total_amount: slotPrice(slot) }, }; }; const readFile = (file) => new Promise((resolve, reject) => { if (!file) return reject(new Error(t("slipRequired"))); if (file.size > 5 * 1024 * 1024) return reject(new Error(t("slipRequired"))); if (!['image/png', 'image/jpeg', 'image/webp', 'application/pdf'].includes(String(file.type || '').toLowerCase())) return reject(new Error(t("slipRequired"))); const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = () => reject(new Error(t("slipRequired"))); reader.readAsDataURL(file); }); const submitCheckout = async (form) => { const formData = new FormData(form); state.customer = { name: String(formData.get("name") || "").trim(), phone: String(formData.get("phone") || "").trim(), email: String(formData.get("email") || "").trim(), }; const requirements = contactRequirements(); if (!state.customer.name || (requirements.phone && !state.customer.phone) || (requirements.email && !state.customer.email)) { showError(t("required")); return; } const mode = paymentMode(state.activity || {}); state.submitting = true; state.error = ""; render(); try { let slip = state.slipUpload; if (mode !== "free" && !slip) { const dataUrl = await readFile(state.file); slip = await request("slip_upload", { file_name: state.file.name, content_type: state.file.type || "application/octet-stream", data_url: dataUrl, }); state.slipUpload = slip; } if (mode !== "free" && !slip?.slip_upload_id) throw new Error(t("slipRequired")); state.idempotencyKey = state.idempotencyKey || (window.crypto?.randomUUID ? window.crypto.randomUUID() : "preview-" + Date.now()); const total = slotPrice(state.selectedSlot); const result = await request("create_booking", { idempotency_key: state.idempotencyKey, customer: { name: state.customer.name, ...(state.customer.phone ? { phone: state.customer.phone } : {}), ...(state.customer.email ? { email: state.customer.email } : {}), }, payment: mode === "free" ? { method: "free" } : { method: "bank_transfer", evidence: { type: "slip_upload", upload_id: slip.slip_upload_id } }, bookings: [bookingLine()], pricing: { subtotal_amount: total, discount_total: 0, total_amount: total }, }); state.booking = result; state.submitting = false; state.view = "ticket"; render(); } catch (error) { state.submitting = false; state.error = error.message || t("runtimeUnavailable"); render(); } }; const bookingResult = () => { const result = record(state.booking); const items = array(result.order_items); const item = items.find((value) => record(value).item_type === "booking_slot") || items[0] || {}; return { result, item: record(item), booking: record(record(item).booking) }; }; const ticketMarkup = () => { const info = bookingResult(); const booking = info.booking; const providerId = booking.provider_booking_id || booking.booking_id || info.result.order_code || info.result.order_id || "pending"; const status = info.result.payment_status || info.result.order_status || "pending"; const verifyUrl = typeof booking.ticket_verify_url === "string" && /^https:\/\//i.test(booking.ticket_verify_url) ? booking.ticket_verify_url : ""; return "

" + escapeHtml(t("order")) + ": " + escapeHtml(info.result.order_code || info.result.order_id || "—") + "
" + escapeHtml(t("bookingId")) + ": " + escapeHtml(providerId) + "
" + escapeHtml(t("status")) + ": " + escapeHtml(status) + "
" + escapeHtml(t("date")) + ": " + escapeHtml(state.date) + "

" + (verifyUrl ? "" + escapeHtml(t("bookingId")) + " ↗" : "") + "

"; }; const safeTicketQrImageUrl = (value) => { const direct = safeImageUrl(value); if (direct) return direct; return typeof value === "string" && /^data:image\/svg\+xml(?:;charset=utf-8)?,/i.test(value) ? value : ""; }; const mountTicketQr = () => { const ticket = root.querySelector(".fd-ticket"); const qrImageUrl = safeTicketQrImageUrl(bookingResult().booking.ticket_qr_image_url); if (!ticket || !qrImageUrl) return; const figure = document.createElement("div"); figure.className = "fd-ticket-qr"; const image = document.createElement("img"); image.src = qrImageUrl; image.alt = english ? "Booking QR ticket" : "QR สำหรับตั๋วการจอง"; image.width = 208; image.height = 208; figure.append(image); ticket.insertBefore(figure, ticket.querySelector("dl")); }; const normalizeLabel = (value) => String(value || "").toLowerCase().replace(/\s+/g, " ").trim(); const isBookingActionLabel = (value) => { const label = normalizeLabel(value); if (!label || label.length > 180) return false; return /^(?:book(?:\s+(?:a\s+time|now|this\s+(?:slot|service)))?|reserve(?:\s+now)?|confirm\s+(?:and\s+)?book(?:ing)?|confirm\s+(?:your\s+)?reservation|finali[sz]e\s+(?:your\s+)?booking|complete\s+(?:your\s+)?booking|submit\s+(?:your\s+)?booking|จอง|เริ่มจอง|ยืนยัน(?:การจอง|และจอง|เพื่อจอง))/i.test(label) || /(?:confirm|ยืนยัน).*(?:book|booking|reserve|reservation|จอง)/i.test(label); }; const activityIdFromTarget = (target) => { const candidates = [target]; const card = target.closest("[data-frontdoor-activity-id],[data-activity-id],[data-service-id],[data-activity-card],[data-service-card],article,li,[class*='activity-card'],[class*='service-card']"); if (card && card !== target) candidates.push(card); for (const candidate of candidates) { for (const attribute of ["data-frontdoor-activity-id", "data-activity-id", "data-service-id"]) { const value = candidate.getAttribute(attribute); if (value && value.trim()) return value.trim(); } } for (const candidate of candidates) { const label = normalizeLabel(candidate.textContent); if (!label || label.length > 500) continue; const match = state.activities.find((activity) => { const item = record(activity); const name = normalizeLabel(item.name || item.title || item.label); const id = normalizeLabel(item.id); return (name.length > 1 && (label === name || label.includes(name))) || (id.length > 1 && (label === id || label.includes(id))); }); if (match) return String(record(match).id); } return ""; }; const headerHomeTarget = (target) => { const link = target.closest("a"); const header = link?.closest("header"); if (!link || !header) return false; const href = String(link.getAttribute("href") || "").trim(); const [path, hash] = href.split("#"); const pathToken = (path.split("?")[0].split("/").pop() || "").replace(/\.html?$/i, "").toLowerCase(); const hashToken = String(hash || "").split("?")[0].toLowerCase(); const className = typeof link.className === "string" ? link.className : ""; const metadata = [ className, link.id, link.getAttribute("aria-label") || "", link.getAttribute("title") || "", link.querySelector("img")?.getAttribute("alt") || "", link.textContent || "", ].join(" "); const rootHref = (!pathToken && (!hashToken || /^(?:home|top|index|landing)$/.test(hashToken))) || /^(?:home|top|index|landing)$/.test(pathToken); const brand = Boolean(link.querySelector("img,svg")) || /(?:brand|logo|home|หน้าแรก|หน้าหลัก|beranda)/i.test(metadata); const firstHeaderLink = header.querySelector("a"); const likelyBrand = firstHeaderLink === link && (!href || /^(?:https?:|\/\/)/i.test(href)) && !/(?:book|reserve|activity|service|schedule|checkout|ticket|จอง|กิจกรรม|บริการ)/i.test(metadata); return rootHref || brand || likelyBrand || (!link.closest("nav") && !href); }; const pageIdFromTarget = (target) => { const explicit = target.getAttribute("data-frontdoor-page") || target.getAttribute("data-target-page") || target.getAttribute("data-page-id"); if (explicit && explicit.trim()) return explicit.trim(); if (headerHomeTarget(target)) return "home"; const href = target.getAttribute("href") || ""; if (/^(?:https?:|mailto:|tel:|javascript:)/i.test(href)) return ""; const [path, hash] = href.split("#"); const candidate = (path.split("?")[0].split("/").pop() || hash || "").replace(/\.html?$/i, "").trim(); if (candidate && /(?:home|landing|activit|service|schedule|booking|checkout|payment|ticket|success)/i.test(candidate)) return candidate; const label = normalizeLabel(target.textContent); if (/^(?:explore|view|browse|see|choose|select)\s+(?:all\s+)?(?:the\s+)?(?:activities|services)\b/i.test(label) || /^(?:สำรวจ|ดู|เลือก)\s*(?:กิจกรรม|บริการ)/i.test(label)) return "activities"; return ""; }; const navigateToPage = (pageId, target, activityId = "") => { window.parent.postMessage({ type: "frontdoor:navigate", nonce: config.nonce, page_id: pageId, href: target.getAttribute("href") || "", label: String(target.textContent || "").trim(), ...(activityId ? { activity_id: String(activityId) } : {}), }, "*"); }; const render = () => { if (!state.open) return; const labels = { activities: [t("activities"), t("activitiesHint")], schedule: [t("schedule"), t("scheduleHint")], checkout: [t("checkout"), t("checkoutHint")], ticket: [t("ticket"), t("ticketHint")], error: [t("activities"), t("catalogError")], }; const heading = labels[state.view] || labels.activities; title.textContent = heading[0]; subtitle.textContent = heading[1]; const closeButton = root.querySelector(".fd-close"); closeButton.setAttribute("aria-label", t("close")); closeButton.title = t("close"); showError(state.error); if (state.view === "activities") content.innerHTML = activitiesMarkup(); else if (state.view === "schedule") content.innerHTML = scheduleMarkup(); else if (state.view === "checkout") content.innerHTML = checkoutMarkup(); else if (state.view === "ticket") { content.innerHTML = ticketMarkup(); mountTicketQr(); } else content.innerHTML = "

" + escapeHtml(state.error || t("catalogError")) + "

"; }; const refreshOrder = () => { const result = bookingResult(); const orderId = result.result.order_id; if (!orderId) return; const button = root.querySelector("[data-fd-refresh]"); if (button) button.disabled = true; request("order_status", { order_id: orderId }).then((latest) => { state.booking = Object.assign({}, state.booking, latest); render(); }).catch((error) => { showError(error.message || t("runtimeUnavailable")); if (button) button.disabled = false; }); }; root.addEventListener("click", (event) => { const target = event.target instanceof Element ? event.target.closest("[data-fd-close],[data-fd-activity],[data-fd-slot],[data-fd-date-day],[data-fd-month],[data-fd-back],[data-fd-next],[data-fd-retry],[data-fd-home],[data-fd-refresh],[data-fd-file-picker],[data-fd-submit]") : null; if (!target) return; if (target.hasAttribute("data-fd-close")) return close(); if (target.hasAttribute("data-fd-file-picker")) { root.querySelector("[data-fd-slip]")?.click(); return; } if (target.hasAttribute("data-fd-submit")) { const form = root.querySelector("[data-fd-checkout]"); if (!(form instanceof HTMLFormElement) || !form.checkValidity()) { form?.reportValidity?.(); return; } void submitCheckout(form); return; } if (target.hasAttribute("data-fd-activity")) return selectActivity(target.getAttribute("data-fd-activity")); if (target.hasAttribute("data-fd-month")) return shiftCalendarMonth(target.getAttribute("data-fd-month")); if (target.hasAttribute("data-fd-date-day")) { const date = target.getAttribute("data-fd-date-day"); if (!date || target.hasAttribute("disabled")) return; state.date = date; loadScheduleData(); return; } if (target.hasAttribute("data-fd-slot")) { const id = target.getAttribute("data-fd-slot"); state.selectedSlot = availableSlots().find((slot) => String(record(slot).id) === String(id)) || null; state.idempotencyKey = null; state.slipUpload = null; render(); return; } if (target.hasAttribute("data-fd-back")) { if (state.view === "schedule") setView("activities"); else if (state.view === "checkout") setView(state.selectedSlot && state.activity?.event_schedule ? "activities" : "schedule"); return; } if (target.hasAttribute("data-fd-next")) { if (state.selectedSlot) setView("checkout"); return; } if (target.hasAttribute("data-fd-retry")) return loadCatalog(); if (target.hasAttribute("data-fd-home")) { state.activity = null; state.selectedSlot = null; state.booking = null; state.file = null; state.slipUpload = null; state.idempotencyKey = null; setView("activities"); return; } if (target.hasAttribute("data-fd-refresh")) return refreshOrder(); }); root.addEventListener("change", (event) => { const target = event.target; if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement)) return; if (target.hasAttribute("data-fd-date")) { state.date = target.value; loadScheduleData(); return; } if (target.hasAttribute("data-fd-resource")) { state.resourceId = target.value; loadScheduleData(); return; } if (target.hasAttribute("data-fd-slip")) { state.file = target.files?.[0] || null; const fileName = root.querySelector("[data-fd-file-name]"); if (fileName) fileName.textContent = state.file?.name || t("noFile"); } }); root.addEventListener("submit", (event) => { const form = event.target; if (!(form instanceof HTMLFormElement) || !form.hasAttribute("data-fd-checkout")) return; event.preventDefault(); void submitCheckout(form); }); launcher.addEventListener("click", open); document.addEventListener("click", (event) => { const target = event.target instanceof Element ? event.target.closest("a,button,input[type=submit],input[type=button],[role=button],[data-frontdoor-action],[data-frontdoor-activity-id],[data-activity-id],[data-service-id],[data-activity-card],[data-service-card],article,li,[class*='activity-card'],[class*='service-card']") : null; if (!target || host.contains(target)) return; const label = String(target.textContent || target.getAttribute("aria-label") || target.getAttribute("title") || target.getAttribute("value") || "").trim(); const explicit = target.getAttribute("data-frontdoor-action") === "book" || target.getAttribute("data-booking-action") === "book"; const bookingAction = explicit || isBookingActionLabel(label); const activityId = activityIdFromTarget(target); if (activityId) { event.preventDefault(); event.stopPropagation(); if (singlePage) open(activityId); else navigateToPage("schedule", target, activityId); return; } const pageId = bookingAction ? "" : pageIdFromTarget(target); if (pageId) { event.preventDefault(); event.stopPropagation(); navigateToPage(pageId, target); return; } if (bookingAction) { event.preventDefault(); event.stopPropagation(); if (inlineBooking) { state.open = true; state.view = state.activity ? "schedule" : "activities"; render(); } else open(""); return; } }, true); document.addEventListener("change", (event) => { const target = event.target; if (target instanceof HTMLSelectElement && target.matches("[data-frontdoor-page-selector]")) { const option = target.selectedOptions?.[0]; const pageId = option?.getAttribute("data-frontdoor-page") || option?.value || ""; if (!pageId.trim()) return; event.preventDefault(); event.stopPropagation(); navigateToPage(pageId.trim(), option || target); return; } if (inlineBooking && target instanceof HTMLInputElement && target.type === "date" && target.value && state.activity) { event.preventDefault(); event.stopPropagation(); state.date = target.value; loadScheduleData(); } }, true); document.addEventListener("keydown", (event) => { if (event.key === "Escape" && state.open) close(); }); const mountInlineHost = () => { const generatedHeader = document.body.querySelector(":scope > header") || document.body.querySelector("header"); const generatedMain = document.body.querySelector(":scope > main"); const anchor = generatedHeader?.nextElementSibling || generatedMain; if (anchor?.parentElement) { anchor.parentElement.insertBefore(host, anchor); return; } if (generatedHeader?.parentElement) { generatedHeader.parentElement.append(host); return; } document.body.prepend(host); }; const mountRuntime = () => { if (!document.body) return; if (inlineBooking) { mountInlineHost(); hidePreviewBookingScaffold(); open(state.requestedActivityId); } else { document.body.append(host); hidePreviewBookingScaffold(); loadCatalog(); } }; if (document.body) mountRuntime(); else document.addEventListener("DOMContentLoaded", mountRuntime, { once: true }); })();

เสกหน้าร้าน ด้วย Frontdoor

เริ่มสร้างเว็บไซต์