import wixLocationFrontend from 'wix-location-frontend'; const DEPOSIT_AMOUNT = 30; const UPGRADE_OPTIONS = [ { id: "extra-glass", name: "Extra Glass Pack", price: 15 }, { id: "premium-room", name: "Premium Room Upgrade", price: 25 }, { id: "slow-motion", name: "Slow-Motion Video", price: 10 }, { id: "protective-gear", name: "Premium Protective Gear", price: 8 } ]; let bookingTotal = 100; let selectedUpgrades = []; $w.onReady(function () { initialisePage(); }); function initialisePage() { setInitialVisibility(); wireEvents(); loadBookingFromUrl(); renderUpgradeOptions(); updateSummary(); } function setInitialVisibility() { safelyHide("#errorText"); safelyHide("#successText"); safelyHide("#loadingText"); } function wireEvents() { safelyOnClick("#lookupBookingButton", lookupBooking); safelyOnClick("#payBalanceButton", continueToPayment); safelyOnClick("#copyBookingCodeButton", copyBookingCode); } function loadBookingFromUrl() { const query = wixLocationFrontend.query || {}; const bookingId = query.bookingId || query.booking || ""; if (bookingId && $w("#bookingIdInput")) { $w("#bookingIdInput").value = bookingId; } } function renderUpgradeOptions() { if (!$w("#upgradesRepeater")) { return; } $w("#upgradesRepeater").data = UPGRADE_OPTIONS.map((upgrade) => ({ _id: upgrade.id, name: upgrade.name, price: upgrade.price, selected: false })); $w("#upgradesRepeater").onItemReady(($item, itemData) => { if ($item("#upgradeName")) { $item("#upgradeName").text = itemData.name; } if ($item("#upgradePrice")) { $item("#upgradePrice").text = `+$${itemData.price.toFixed(2)}`; } if ($item("#upgradeCheckbox")) { $item("#upgradeCheckbox").checked = selectedUpgrades.includes(itemData.id); $item("#upgradeCheckbox").onChange((event) => { toggleUpgrade(itemData.id, event.target.checked); }); } }); } function toggleUpgrade(upgradeId, isSelected) { if (isSelected && !selectedUpgrades.includes(upgradeId)) { selectedUpgrades.push(upgradeId); } if (!isSelected) { selectedUpgrades = selectedUpgrades.filter((id) => id !== upgradeId); } updateSummary(); } function updateSummary() { const upgradeTotal = selectedUpgrades.reduce((sum, upgradeId) => { const upgrade = UPGRADE_OPTIONS.find((item) => item.id === upgradeId); return sum + (upgrade ? upgrade.price : 0); }, 0); const fullAmount = bookingTotal + upgradeTotal; const remainingBalance = Math.max(fullAmount - DEPOSIT_AMOUNT, 0); setText("#bookingTotalText", formatMoney(bookingTotal)); setText("#depositText", `-${formatMoney(DEPOSIT_AMOUNT)}`); setText("#upgradesTotalText", formatMoney(upgradeTotal)); setText("#fullAmountText", formatMoney(fullAmount)); setText("#remainingBalanceText", formatMoney(remainingBalance)); if ($w("#payBalanceButton")) { $w("#payBalanceButton").label = remainingBalance > 0 ? `Pay Remaining ${formatMoney(remainingBalance)}` : "Complete Booking"; } } async function lookupBooking() { const bookingId = ($w("#bookingIdInput")?.value || "").trim(); clearMessage(); if (!bookingId) { showError("Enter the booking confirmation number first."); return; } showLoading(true); try { // Replace this demo lookup with a backend web method that validates the // booking owner, retrieves the authoritative booking total, and confirms // that the deposit was successfully paid. Never trust a browser value for // the booking total or deposit status. const booking = await getBookingFromSecureBackend(bookingId); bookingTotal = booking.total; setText("#customerNameText", booking.customerName ? `Hi, ${booking.customerName}!` : "Booking found"); setText("#bookingCodeText", bookingId); showSuccess("Booking found. Your $30 deposit has been applied below."); updateSummary(); } catch (error) { showError(error.message || "We could not find that booking. Check the confirmation number and try again."); } finally { showLoading(false); } } async function continueToPayment() { const bookingId = ($w("#bookingIdInput")?.value || "").trim(); const upgradeTotal = selectedUpgrades.reduce((sum, upgradeId) => { const upgrade = UPGRADE_OPTIONS.find((item) => item.id === upgradeId); return sum + (upgrade ? upgrade.price : 0); }, 0); if (!bookingId) { showError("Enter and verify your booking confirmation number before paying."); return; } const remainingBalance = Math.max(bookingTotal + upgradeTotal - DEPOSIT_AMOUNT, 0); // Production recommendation: call a backend web method here. The backend // should re-read the booking and deposit, calculate the balance, create an // order/payment for the balance plus upgrades, and return the payment URL or // payment ID. A client-side coupon/code alone can be copied and reused. if (remainingBalance === 0) { showSuccess("Your booking is fully paid. We will add the selected upgrades to your reservation."); return; } wixLocationFrontend.to(`/balance-checkout?bookingId=${encodeURIComponent(bookingId)}&upgradeIds=${encodeURIComponent(selectedUpgrades.join(","))}`); } async function copyBookingCode() { const bookingId = ($w("#bookingIdInput")?.value || "").trim(); if (!bookingId || typeof navigator === "undefined" || !navigator.clipboard) { showError("Copy is unavailable. Please select your confirmation number manually."); return; } await navigator.clipboard.writeText(bookingId); showSuccess("Confirmation number copied."); } async function getBookingFromSecureBackend(bookingId) { // Demo fallback so the page works before the backend is connected. // Replace this function with: // import { getBookingBalance } from "backend/bookingBalance.web"; // return getBookingBalance(bookingId); if (bookingId.length < 4) { throw new Error("That confirmation number is too short."); } return { customerName: "", total: 100 }; } function formatMoney(amount) { return `$${Number(amount).toFixed(2)}`; } function setText(selector, value) { if ($w(selector)) { $w(selector).text = value; } } function safelyHide(selector) { if ($w(selector)) { $w(selector).hide(); } } function safelyOnClick(selector, handler) { if ($w(selector)) { $w(selector).onClick(handler); } } function showLoading(isLoading) { if ($w("#loadingText")) { isLoading ? $w("#loadingText").show() : $w("#loadingText").hide(); } if ($w("#lookupBookingButton")) { $w("#lookupBookingButton").disable(); if (!isLoading) { $w("#lookupBookingButton").enable(); } } } function clearMessage() { safelyHide("#errorText"); safelyHide("#successText"); } function showError(message) { if ($w("#errorText")) { $w("#errorText").text = message; $w("#errorText").show(); } } function showSuccess(message) { if ($w("#successText")) { $w("#successText").text = message; $w("#successText").show(); } }

top of page