can you help me masters? thanks a lot
im trying to use https://www.wix.com/velo/example/quick-book-and-pending-appointments tutorial but not work
pendingAppointments collection
The quick book page code
//-------------Imports-------------//
// Import the wix-data module for working with collections.
import wixData from "wix-data";
// Import the wix-bookings module for getting available service slots.
import wixBookings from "wix-bookings";
import { setVisitorId } from 'public/managevisitors.js'
//-------------Global Variables-------------//
let visitorId;
// The ID of the Free Consultation service from the Bookings/Services collection.
const serviceId = "371e7fc0-c04b-4a88-8c1b-d8abf5d4b493";
// Map of available slots.
let slotsMap = {};
//-------------Lightbox Setup-------------//
$w.onReady(function () {
visitorId = setVisitorId();
// Get today's date.
let today = new Date();
// List of the days of the week.
const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
//-------------Dropdowns Setup-------------//
// Get a list of the next 7 days of the week, starting from today. Use that list to create
// another list with labels and values and use it to populate the dayPicker dropdown.
$w("#dayPicker").options = getWeekDays(today).map(day => {
return {
// Set the label to be the name of the day of the week and its formatted date (e.g Tue 18/12/2018).
label: `${daysOfTheWeek[day.date.getDay()]} ${day.date.toLocaleDateString("en-GB")}`,
// Set the value to be the ISO string representation of the date (e.g. 2018-12-17T22:00:00.000Z).
value: day.date.toISOString()
}
});
// When a day of the week is selected in the day dropdown, populate the time dropdown with the times of
// slots that are available on the selected day.
$w("#dayPicker").onChange((event, $w) => {
const selectedDate = new Date(event.target.value);
findAvailableSlots(selectedDate);
});
// When the submit button is clicked, check that all the fields are valid and then insert the requested slot's
// information into the pendingAppointments collection.
$w("#submitButton").onClick(() => validateAndSubmitForm());
});
async function findAvailableSlots(dateString) {
// Reset the slot map to be empty.
slotsMap = {};
// Get the beginning time of the selected date.
const startDateTime = getMidnight(dateString);
// Get the ending time of the selected date.
const endDateTime = getNextMidnight(dateString);
// Set the options object which contains the date restrictions.
const options = {
startDateTime,
endDateTime
};
// Get all available slots which are not already pending approval for the selected day.
const availableSlots = await getNonPendingAvailableSlots(serviceId, options);
// If no available slots are found:
if (availableSlots.length === 0) {
// Reset the time dropdown.
$w("#slotPicker").options = [];
$w("#slotPicker").placeholder = "No sessions this day";
$w("#slotPicker").selectedIndex = undefined;
$w("#slotPicker").disable();
}
// Otherwise, when available slots are found:
else {
// Populate the time dropdown with the start time of the available slot and store the
// available slots in the slot map by ID.
$w("#slotPicker").options = availableSlots.map((slot, id) => {
const uniqueId = new Date().getUTCMilliseconds().toString() // Generate a short unique ID to identify options in the slotPicker
slotsMap[uniqueId] = slot;
let startTime = slot.startDateTime;
let timeString = getTimeOfDay(startTime);
return {
label: timeString,
value: uniqueId + id
}
});
// Reset the time dropdown's placeholder text.
$w("#slotPicker").placeholder = "Pick a time";
// Reset the time dropdown, so no item is selected.
$w("#slotPicker").selectedIndex = undefined;
$w("#slotPicker").enable();
}
}
//-------------Form Submission-------------//
async function validateAndSubmitForm() {
// Hide the error state.
$w("#errorMessage").hide();
$w("#submitButton").disable();
// List of fields in the booking form.
const formFields = ["nameInput", "emailInput", "ageInput", "dayPicker", "slotPicker", "agreementCheckbox"];
// If all the fields have valid values:
if (formFields.every(input => $w(`#${input}`).valid)) {
// Get the selected slot object from the slot map.
const slot = slotsMap[$w("#slotPicker").value];
// Create a new request item to be inserted in the pendingAppointments collection containing the form field
// values, the slot object, and set its status to pending.
const newRequest = {
name: $w("#nameInput").value,
email: $w("#emailInput").value,
age: $w("#ageInput").value,
requestedSlot: slot,
visitorId: visitorId,
status: "PENDING"
};
// Insert the requested slot information into the pendingAppointments collection.
await wixData.insert("pendingAppointments", newRequest);
// Show the thank you state.
$w("#formGroup").hide();
$w("#thankYouText").show();
}
// If some of the fields have invalid values:
else {
// Show the error state.
$w("#errorMessage").show();
$w("#submitButton").enable();
}
}
//-------------Slot Availability Determination-------------//
// Get all available slots which are not already pending approval.
async function getNonPendingAvailableSlots(requestedServiceId, options = {}) {
// Get the IDs of all the appointments that have been requested but are still pending approval.
const pending = (await getPendingAppointments()).map(appointment => appointment._id);
// Get all of the service's available slots during the given date range.
let availableSlots = (await wixBookings.getServiceAvailability(requestedServiceId, options)).slots;
// Filter out of the available slots all slots that are pending approval.
availableSlots = availableSlots.filter(slot => !pending.includes(slot._id));
// Return the filtered list.
return availableSlots;
}
// Get the appointments that are pending from the pendingAppointments collection.
async function getPendingAppointments() {
return (await wixData.query("pendingAppointments").find()).items.filter(item => item.status === "PENDING");
}
//-------------Date Helpers-------------//
// Get a list of the next 7 days of the week, starting from a given date.
function getWeekDays(startDate) {
// Create an empty list of days.
let weekDays = [];
// Get the midnight that started today's day.
let current = getMidnight(startDate);
// For 7 days:
for (let i = 0; i < 7; i++) {
// Add to the list of days an object with a running day ID and the day's date.
weekDays.push({
_id: "day" + i,
date: current
});
// Get the midnight of the next day.
current = getNextMidnight(current);
}
// Return the list of days.
return weekDays;
}
// Get the midnight that started the given date's day.
function getMidnight(date) {
// Create a new date which is a copy of the given date.
let midnight = new Date(date);
// Set the new date's time to the previous midnight.
midnight.setHours(0, 0, 0, 0);
// Return the new date.
return midnight;
}
// Get the midnight that starts the day after the given date.
function getNextMidnight(date) {
// Create a new date which is a copy of the given date.
let midnight = new Date(date);
// Set the new date's time to the next midnight.
midnight.setHours(24, 0, 0, 0);
// Return the new date.
return midnight;
}
// Get the time of the given date formatted as HH:MM AM/PM.
function getTimeOfDay(date) {
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }).toLowerCase();
}