I was trying to replicate the functionality mentioned in the below two videos for creating a custom booking system.
https://www.youtube.com/watch?v=lEEIaJyKzM8
https://www.youtube.com/watch?v=_hKsMICCfAM
There are two issues that I am getting while trying to follow the code in the videos.
1. When trying to add the slot._id to the slotPicker dropdown, wix gives error saying that the value of the dropdown exceeds 400 chars. The slot._id I am getting from the API is more than 400 chars. Eg : 4XH3LWgKG5txVlW2EDckWeLceXMrFoQG3X11PHA2hGmTHELEwRaWLXF9JzhI1w2GB5eK6tgXz2EZT3FbXFGfCypATbruniAzL235GS6a9eDz7kTJCzI3m3EWO3XoYHTQi2bUtfe3BW7u488dnb3yhEYyUNfb8RDJdNxmlYlBVHLUrpNjZonqNSKczIGvZ27cV6hJHFZkkBE68EbuizBYCLkazLBQHZ2Y0BEc5KfEe9xEkoJwlNQhbVjLZ4w6l4Abf5NLHIZjqrVMY5KCVw092pk4Hhyu4A5TVgcWdOvz4hCevSj0XcMk61hREBMOoVl7kHMftRj55luEu7zGuGgIAIVYqdZmAY6wD4DhNiCUAOj8YSecJlwRmgbdBeHaRqq5urv9tkPzt628OEiaNhuClKf00iyrssv1xgWQn
I tried to work around this issue by storing the slot Id in another variable.
2. When trying to checkOutBooking, it gives the below error.
{code: 500, message: âBOOKINGS_SYSTEM_ERRORâ}
Below is the code I am using. This is still developmentâŚhence there is some hard coding.
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixUsers from 'wix-users';
import wixBookings from 'wix-bookings';
import wixData from 'wix-data';
const serviceId = 'e48bff50-7e67-4c57-bcfe-a6385daddf76';
let slotsMap = {};
let currentUserEmail = "";
let slotIDmap = [];
$w.onReady(function() {
populateExpertList();
$w('#datePicker').disable();
$w('#slotPicker').disable();
let selectedExpert = "";
$w('#expertSelector').onChange((event, $w) => {
selectedExpert = $w('#expertSelector').value;
console.log("Selected Expert = " + selectedExpert);
$w('#datePicker').enable();
$w('#datePicker').selectedIndex = undefined;
$w('#slotPicker').disable();
});
let user = wixUsers.currentUser;
user.getEmail()
.then((email) => {
let userEmail = email; // "user@something.com"
currentUserEmail = email
$w('#loggedInUserName').text = userEmail;
});
const today = new Date();
const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
$w('#datePicker').options = getWeekDays(today).map(day => {
return {
label: `${daysOfTheWeek[day.date.getDay()]} ${day.date.toLocaleDateString("en-GB")}`,
value: day.date.toISOString()
}
});
$w('#datePicker').onChange((event, $w) => {
const selectedDate = new Date(event.target.value);
findAvailableSlots(selectedDate, selectedExpert);
});
$w('#submitButton').onClick(() => validateAndSubmitForm());
});
//=============================================================
async function findAvailableSlots(dateString, selectedExpert) {
slotsMap = {};
const startDateTime = getMidnight(dateString);
const endDateTime = getNextMidnight(dateString);
const options = {
startDateTime,
endDateTime
}
const availableSlots = await getServiceAvailableSlots(serviceId, options, selectedExpert);
console.log("Number of availableSlots= " + availableSlots.length);
for (let i = 0; i < availableSlots.length; i++) {
slotIDmap[i] = availableSlots[i]._id;
}
console.log("MAP=>" + slotIDmap);
let index = -1;
if (availableSlots.length === 0) {
$w('#slotPicker').options = [];
$w('#slotPicker').placeholder = 'No Slots available for this day';
$w('#slotPicker').selectedIndex = undefined;
$w('#slotPicker').disable();
} else {
$w('#slotPicker').options = availableSlots.map(slot => {
slotsMap[slot._id] = slot;
let startTime = slot.startDateTime;
let timeString = getTimeOfDay(startTime);
console.log("timeString = " + timeString);
console.log("slot._id = " + slot._id);
index = index + 1;
console.log("index = >" + index);
console.log("------------------")
return {
label: timeString,
value: index + ""
}
});
$w('#slotPicker').placeholder = 'Pick a time slot';
$w('#slotPicker').selectedIndex = undefined;
$w('#slotPicker').enable();
}
}
//======================================================
async function validateAndSubmitForm() {
const formFields = ['datePicker', 'slotPicker', 'expertSelector']; //Add expert picker as well.
console.log("selected index of slot =>" + $w('#slotPicker').value);
const selectedSlot = slotsMap[slotIDmap[$w('#slotPicker').value]];
console.log("selected slot =>" + selectedSlot.staffMemberId);
console.log("selected slot =>" + selectedSlot._id);
console.log("selected slot serviceId =>" + selectedSlot.serviceId);
const service = await (getService(selectedSlot.serviceId));
let bookingFormFields = [{
_id: getFieldId(service, "Name"),
value: "Some Name"
},
{
_id: getFieldId(service, "Email"),
value: currentUserEmail
},
{
_id: getFieldId(service, "Phone Number"),
value: "121212121212"
}
];
console.log("bookingFormFields =>" + bookingFormFields);
console.log("selectedSlot =>" + selectedSlot);
const bookingInfo = {
"slot": selectedSlot,
"formFields": bookingFormFields
};
const bookingResponse = await wixBookings.checkoutBooking(bookingInfo);
console.log("Bookng Status =>" + bookingResponse.status);
}
//==============================================================
async function populateExpertList() {
await wixData.query("Bookings/Staff")
.find()
.then((results) => {
$w('#expertSelector').options = results.items.map(item => {
return {
label: item.name,
value: item._id
}
});
});
$w('#expertSelector').placeholder = 'Pick an Expert First';
}
//==============================================================
async function getServiceAvailableSlots(requestedServiceId, options = {}, selectedExpert) {
let availableSlots = (await wixBookings.getServiceAvailability(requestedServiceId, options)).slots;
availableSlots = availableSlots.filter(slot => slot.staffMemberId === selectedExpert);
return availableSlots;
}
//=============================================================
function getMidnight(date) {
let midnight = new Date(date);
midnight.setHours(0, 0, 0, 0);
return midnight;
}
//============================================================
function getNextMidnight(date) {
let midnight = new Date(date);
midnight.setHours(24, 0, 0, 0);
return midnight;
}
//============================================================
function getWeekDays(startDate) {
let weekDays = [];
let current = getMidnight(startDate);
for (let i = 0; i < 14; i++) {
weekDays.push({
_id: "day" + i,
date: current
});
current = getNextMidnight(current);
}
return weekDays;
}
//==========================================================
function getTimeOfDay(date) {
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
}).toLowerCase();
}
//==========================================================
function getService(id) {
return wixData.get("Bookings/Services", id);
}
//==========================================================
function getFieldId(service, label) {
return service.form.fields.filter(field => field.label === label)[0]._id;
}
If not, does anyone have a workaround for how to make a booking using a custom booking process?