// Velo Code for your Dog Boarding selection page
import wixLocation from 'wix-location';
import { session } from 'wix-storage';
import { formatDate } from 'public/utils.jsw';
// --- CONFIGURATION ---
// You can easily change prices or the next page URL here.
const PRICE_CONFIG = {
small: 50,
big: 60
};
const BOOKING_FORM_URL = '/booking-form';
// --- PAGE STATE ---
// This array will store all the dates the user has selected.
let selectedDates = []; // Example: [{ _id: '2025-10-26', date: DateObject, dateString: 'October 26, 2025' }]
// --- INITIALIZATION ---
// This function runs when the page is ready.
$w.onReady(() => {
// Set default values for the inputs.
$w('#dropoffRadio').value = 'am';
$w('#sizeDropdown').value = 'small';
// Set up what happens for each item in the repeater.
$w('#datesRepeater').onItemReady(($item, itemData) => {
$item('#dateText').text = itemData.dateString;
$item('#removeButton').onClick(() => {
// Remove the clicked date from our array.
selectedDates = selectedDates.filter(d => d._id !== itemData._id);
refreshDatesDisplay();
updateSummary();
});
});
// --- EVENT HANDLERS ---
$w('#addButton').onClick(handleAddDate);
$w('#sizeDropdown').onChange(updateSummary);
$w('#dropoffRadio').onChange(updateSummary);
$w('#nextButton').onClick(navigateToNextPage);
// --- INITIAL DISPLAY ---
refreshDatesDisplay();
updateSummary();
});
// --- CORE FUNCTIONS ---
/**
* Handles the 'Add Date' button click.
*/
function handleAddDate() {
const dateValue = $w('#datePicker').value;
if (!dateValue) {
$w('#summaryText').text = "Please select a date before adding.";
return;
}
const dateId = dateValue.toISOString().split('T')[0]; // Format: 'YYYY-MM-DD'
// Check if the date has already been added.
if (selectedDates.some(d => d._id === dateId)) {
$w('#summaryText').text = "This date is already in your list.";
return;
}
selectedDates.push({
_id: dateId,
date: dateValue,
dateString: formatDate(dateValue)
});
// Keep the list of dates sorted.
selectedDates.sort((a, b) => a.date - b.date);
refreshDatesDisplay();
updateSummary();
}
/**
* Updates the repeater to show the currently selected dates.
*/
function refreshDatesDisplay() {
$w('#datesRepeater').data = selectedDates;
// If no dates are selected, hide the repeater. Otherwise, show it.
(selectedDates.length > 0) ? $w('#datesRepeater').expand() : $w('#datesRepeater').collapse();
}
/**
* Calculates the total cost based on current selections.
* @returns {object} An object with nights, unitPrice, and total.
*/
function calculateTotal() {
const nights = selectedDates.length;
const size = $w('#sizeDropdown').value || 'small';
const unitPrice = PRICE_CONFIG[size];
const total = unitPrice * nights;
return { nights, unitPrice, total };
}
/**
* Updates the summary text with all the details and the final price.
*/
function updateSummary() {
const { nights, unitPrice, total } = calculateTotal();
if (nights === 0) {
$w('#summaryText').text = "Please select the dates for your dog's stay.";
return;
}
const sizeLabel = $w('#sizeDropdown').options.find(opt => opt.value === $w('#sizeDropdown').value)?.label || 'Dog Size';
const timeLabel = $w('#dropoffRadio').options.find(opt => opt.value === $w('#dropoffRadio').value)?.label || 'Drop-off Time';
const datesString = selectedDates.map(d => d.dateString).join(', ');
$w('#summaryText').text =
`Selected Dates: ${datesString}\n` +
`Dog Size: ${sizeLabel}\n` +
`Drop-off Time: ${timeLabel}\n\n` +
`Total: ${nights} nights x $${unitPrice}/night = $${total}`;
}
/**
* Saves the data and navigates to the next page.
*/
function navigateToNextPage() {
if (selectedDates.length === 0) {
$w('#summaryText').text = "Please add at least one date to continue.";
return;
}
const { nights, unitPrice, total } = calculateTotal();
// Prepare all the data to pass to the next page.
const bookingData = {
dates: selectedDates.map(d => d._id), // ['2025-10-26', '2025-10-27']
datesHuman: selectedDates.map(d => d.dateString), // ['October 26, 2025', ...]
dropoff: $w('#dropoffRadio').value, // 'am' or 'pm'
size: $w('#sizeDropdown').value, // 'small' or 'big'
pricePerNight: unitPrice,
totalNights: nights,
totalPrice: total
};
// Use session storage to securely pass the data.
session.setItem('boardingSelection', JSON.stringify(bookingData));
// Go to the booking form page.
wixLocation.to(BOOKING_FORM_URL);
}