Hi. I built a quick booking system very similar to this example: https://www.wix.com/corvid/example/quick-book-and-pending-appointments
So basically, the site visitor inputs the information on the main page, which is sent to the database and to a pending appointments admin page, where I can approve or dismiss his request. If I click the approve button, as on the example, the code books the slot chosen by the client.
Bookings has automated emails once a booking is made, but I wanted to make a nice design for my booking confirmation email, something more on the lines of the Wix Triggered Email designs. Can I then disable the Automated Emails and edit the appointments admin page code mentioned above to send an email once i approve and the booking is confirmed?
I thought of sending a TriggeredEmail or even something like emailjs.com, once the booking is confirmed. Is that possible?
I saw in another thread that it is possible to send triggered emails to not-loggedIn (in WIX system) users if I have the user information ( https://www.wix.com/corvid/forum/main/comment/5b5f2cc4a84b0300148ae8f6 ), which I do since I have the client’s booking information, with the following code:
create contactObject with firstName, lastName, email, ...
wix-createContact(contactObject) => contactId [REMEMBER This For your Triggered email}
then
wix-crm.emailContact('triggeredEmailName", contactId [from createContact])
Or even, another option, instead of TriggeredEmails, is to use emailjs.com as in this example (https://girizano.wixsite.com/codecorner/post/send-email-thru-gmail-and-others-in-wix-code), but i’m having trouble to put it all together, how to populate the email with the booking info and then sending email in the code I already have…and then again I would need to disable the Automated Emails Wix sends or else the client would receive 2 emails.
Here’s the code that approves the request on my appointments admin page:
async function approveRequest(pendingRequest, index) {
const slot = pendingRequest.requestedSlot;
const service = await getService(slot.serviceId);
let formFields = [{
_id: getFieldId(service, "Nome"),
value: pendingRequest.nome
},
{
_id: getFieldId(service, "Email"),
value: pendingRequest.email
},
{
_id: getFieldId(service, "Nascimento"),
value: pendingRequest.dataNascimento
},
{
_id: getFieldId(service, "WhatsApp"),
value: pendingRequest.whatsapp
},
];
const bookingInfo = {
slot,
formFields
};
const bookingResponse = await wixBookings.checkoutBooking(bookingInfo);
if (bookingResponse.status === "Confirmed") {
pendingRequest.status = "APPROVED";
await wixData.update("pendingAppointments", pendingRequest);
refreshData();
}
else {
$w("#approveButton").enable();
}
}
Does anyone have an input, how I could go about on this issue?
Here’s the full page code, if anyone needs to take a look, but it’s quite similar to the example I mentioned in the beginning.
import wixData from "wix-data";
import wixBookings from "wix-bookings";
import wixLocation from "wix-location";
$w.onReady(function () {
$w("#pendingRequestsDataset").onReady(() => {
if ($w("#pendingRequestsDataset").getTotalCount() === 0) {
$w("#noPendingRequests").show();
}
});
});
export function requestsRepeater_itemReady($item, itemData, index) {
const slot = itemData.requestedSlot;
const start = new Date(slot.startDateTime);
$item("#date").text = getDate(start);
$item("#time").text = getTimeOfDay(start);
$item("#dismissButton").onClick(async () => {
$item("#dismissButton").disable();
$item("#approveButton").disable();
await dismissRequest(itemData, index);
});
$item("#approveButton").onClick(async () => {
$item("#dismissButton").disable();
$item("#approveButton").disable();
await approveRequest(itemData, index);
});
}
export function dismissedRequests_itemReady($item, itemData, index) {
$item("#emailButton").onClick(() => {
const subject = "Thanks For Getting in Touch";
wixLocation.to(`mailto:${itemData.email}?subject=${subject}`);
});
}
async function dismissRequest(pendingRequest, index) {
pendingRequest.status = "DISMISSED";
await wixData.update("pendingAppointments", pendingRequest);
refreshData();
}
async function approveRequest(pendingRequest, index) {
const slot = pendingRequest.requestedSlot;
const service = await getService(slot.serviceId);
let formFields = [{
_id: getFieldId(service, "Nome"),
value: pendingRequest.nome
},
{
_id: getFieldId(service, "Email"),
value: pendingRequest.email
},
{
_id: getFieldId(service, "Nascimento"),
value: pendingRequest.dataNascimento
},
{
_id: getFieldId(service, "WhatsApp"),
value: pendingRequest.whatsapp
},
];
const bookingInfo = {
slot,
formFields
};
const bookingResponse = await wixBookings.checkoutBooking(bookingInfo);
if (bookingResponse.status === "Confirmed") {
pendingRequest.status = "APPROVED";
await wixData.update("pendingAppointments", pendingRequest);
refreshData();
}
else {
$w("#approveButton").enable();
}
}
function getService(id) {
return wixData.get("Bookings/Services", id);
}
function getFieldId(service, label) {
return service.form.fields.filter(field => field.label === label)[0]._id;
}
function refreshData() {
$w("#pendingRequestsDataset").refresh().then(() => {
if ($w("#pendingRequestsDataset").getTotalCount() === 0) {
$w("#noPendingRequests").show();
}
});
$w("#dismissedRequestsDataset").refresh();
}
function getTimeOfDay(date) {
return date.toLocaleTimeString([], { hour: "2-digit", minute:"2-digit"});
}
function getDate(date) {
return date.toLocaleDateString("en-GB", {day: "numeric", month: "numeric", year: "numeric" });
}
