Automated Email Notification on Booking

Most of the instructions necessary for creating an automated email notification when website visitors create a booking reservation can be found in this Velo Tutorial. If the video at that link doesn't load, you can try this link instead.

Start by completing Step 1: Create an Account with SendGrid, then Step 2a: Store Secrets in the Secrets Manager, and Step 2b: Add the SendGrid npm Package. Skip Step 2c. Next, complete all of Step 3: Write Backend Code in the sendEmail.jsw Web Module. We are now done with what we need from the tutorial.

We will now add our own frontend code to call the sendEmail function. Go to the page where the Booking Calendar has been added and open up the code window. Replace the code with the following:

import { sendEmail } from 'backend/sendEmail.jsw';
const SUCCESS_CODE = 202;

$w.onReady(function () {

	$w('#calendar1').onDatesReserved(async ({data: dates}) => {
		let body = `start: ${dates.start.toString()}, end: ${dates.end.toString()}\n` +
			`itemId: ${dates.itemId}\n` +
			`first name: ${dates.first}\nlast name: ${dates.last}\n` +
			`email: ${dates.email}\nphone: ${dates.phone}`;
		const result = await sendEmail('your.email@gmail.com', 'Dates Reserved', body);
		if (result[0].statusCode !== SUCCESS_CODE) {
			console.log('Error sending email, please verify your SendGrid account details.');
		}
	});

});

Change 'your.email@gmail.com' to the email address where you want to receive the notification email. Feel free to make any other changes to the body or title of the email that you desire. Preview the website and confirm that making a new booking results in an automatic email notification.

The onDatesReserved function is called whenever a booking reservation is made with the Booking Calendar, so if there is any other functionality you desire at this time, code can be added here to perform it.