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
bottom of page
