Update nodemailer to use patient email as recipient and add toasts when email is sent.

src/components/AdminAppointmentDetailsPopup.tsx

@@ -197,19 +197,21 @@ const AdminAppointmentDetailsPopup = ({
           const confirmationEmailData: ConfirmationEmailData = {
             first_name: data![0].first_name,
             last_name: data![0].last_name,
+            email: data![0].email,
             appointment_type: data![0].appointment_type!,
             scheduled_date: data![0].scheduled_date,
             scheduled_time: data![0].scheduled_time,
           };
           emailConfirmationHandler(confirmationEmailData)
             .then(() => {
-              console.log(
-                'Successfully sent confirmation email for: ',
-                confirmationEmailData,
-              );
+              toast({
+                title: 'Successfully sent confirmation email!',
+                description:
+                  'The patient has been sent an email with the details of this confirmed appointment.',
+              });
             })
             .catch((error: Error) => {
-              console.log(error);
+              console.log('Failed to send confirmation email: ', error);
             });
         })
         .catch((error: Error) => {

src/components/AppointmentForm.tsx

@@ -133,9 +133,14 @@ const AppointmentForm = ({
           emailHandler(createdAppointment)
             .then(() => {
               console.log('Sucessfully sent email for appointment');
+              toast({
+                title: 'Request email sent!',
+                description:
+                  'A message was sent to the provided email containing the appointment request information.',
+              });
             })
             .catch((error: Error) => {
-              console.log(error);
+              console.log('Failed to send request email: ', error);
             });
         })
         .catch((error) => {

src/components/actions.ts

@@ -79,7 +79,7 @@ export const getAppointment = async (appointmentId: string | undefined) => {
     const { data, error } = await supabase
       .from('Appointments')
       .select(
-        'first_name, last_name, appointment_type, scheduled_date, scheduled_time',
+        'first_name, last_name, email, appointment_type, scheduled_date, scheduled_time',
       )
       .eq('id', appointmentId);
     if (error) {

src/components/ui/use-toast.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
 
-const TOAST_LIMIT = 1;
+const TOAST_LIMIT = 2;
 const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {

src/config/emailContent.ts

@@ -10,7 +10,6 @@ const CONTACT_MESSAGE_FIELDS: ContactMessageFields = {
   last_name: 'Last Name: ',
   mobile_phone: 'Phone Number: ',
   email: 'Email: ',
-  dob: 'Date of Birth: ',
   requested_date: 'Requested Date: ',
   requested_time: 'Requested Time: ',
   appointment_type: 'Appointmet Type: ',
@@ -19,6 +18,7 @@ const CONTACT_MESSAGE_FIELDS: ContactMessageFields = {
 };
 
 export const generateEmailContent = (data: Appointment) => {
+  delete data.practice_id;
   const stringData = Object.entries(data).reduce((str: string, [key, val]) => {
     return (str += `${CONTACT_MESSAGE_FIELDS[key]}: \n${val as string} \n\n`);
   }, '');
@@ -31,6 +31,7 @@ export const generateEmailContent = (data: Appointment) => {
     }</p></div>`);
   }, '');
   return {
+    to: data.email,
     subject: `Connectient Appointment Request`,
     text: stringData,
     html: `<!doctypehtml><title></title><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="IE=edge"http-equiv=X-UA-Compatible><style>a,body,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table{border-collapse:collapse!important}body{height:100%!important;margin:0!important;padding:0!important;width:100%!important}@media screen and (max-width:525px){.wrapper{width:100%!important;max-width:100%!important}.responsive-table{width:100%!important}.padding{padding:10px 5% 15px 5%!important}.section-padding{padding:0 15px 50px 15px!important}}.form-container{margin-bottom:24px;padding:20px;border:1px dashed #ccc}.form-heading{color:#2a2a2a;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;text-align:left;line-height:20px;font-size:18px;margin:0 0 8px;padding:0}.form-answer{color:#2a2a2a;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;text-align:left;line-height:20px;font-size:1.2rem;margin:0 0 24px;padding:0}div[style*='margin: 16px 0;']{margin:0!important}</style><body style=margin:0!important;padding:0!important;background:#fff><div style=display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden></div><div style="margin:20px 50px;font-size:1.1rem"><p>Hi ${data.first_name},<p>Thanks for using Connectient Appointment Request System! Your appointment at Essential Dental Solutions has been successfully requested. Our staff will give you a call at the contact number provided within 48 hours to schedule and confirm your appointment. Below is the information submitted with your request. If you have any questions or concerns, please contact us at (868) 387-1325.<p style="margin: 0;">Essential Dental Solutions Staff<p style="margin: 0;">1054 SS Erin Road, Debe.<p style="margin: 0;">Trinidad <span>&</span> Tobago<p style="margin: 0;">(868) 387-1325 | (868) 361-3469</div><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td class=section-padding style="padding:10px 15px 30px 15px"align=center bgcolor=#ffffff><table border=0 cellpadding=0 cellspacing=0 width=100% class=responsive-table style=max-width:500px><tr><td><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td class="message-content padding"style=padding:0;font-size:16px;line-height:25px;color:#232323><h2>Appointment Request Information</h2><div class=form-container>${htmlData}</div></table></table></table></table>`,
@@ -41,6 +42,7 @@ export const generateEmailContent = (data: Appointment) => {
 const CONFIRMATION_MESSAGE_FIELDS: ContactMessageFields = {
   first_name: 'First Name: ',
   last_name: 'Last Name: ',
+  email: 'Email: ',
   appointment_type: 'Appointment Type: ',
   scheduled_date: 'Appointment Date: ',
   scheduled_time: 'Appointment Time: ',
@@ -63,6 +65,7 @@ export const generateConfirmationEmailContent = (
     }</p></div>`);
   }, '');
   return {
+    to: data.email,
     subject: `Connectient Appointment Confirmation`,
     text: stringData,
     html: `<!doctypehtml><title></title><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="IE=edge"http-equiv=X-UA-Compatible><style>a,body,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table{border-collapse:collapse!important}body{height:100%!important;margin:0!important;padding:0!important;width:100%!important}@media screen and (max-width:525px){.wrapper{width:100%!important;max-width:100%!important}.responsive-table{width:100%!important}.padding{padding:10px 5% 15px 5%!important}.section-padding{padding:0 15px 50px 15px!important}}.form-container{margin-bottom:24px;padding:20px;border:1px dashed #ccc}.form-heading{color:#2a2a2a;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;text-align:left;line-height:20px;font-size:18px;margin:0 0 8px;padding:0}.form-answer{color:#2a2a2a;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;text-align:left;line-height:20px;font-size:1.2rem;margin:0 0 24px;padding:0}div[style*='margin: 16px 0;']{margin:0!important}</style><body style=margin:0!important;padding:0!important;background:#fff><div style=display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden></div><div style="margin:20px 50px;font-size:1.1rem"><p>Hi ${data.first_name},<p>Thanks for using Connectient Appointment Request System! Your appointment at Essential Dental Solutions has been successfully confirmed. Below is the scheduled date and time for your appointment. Cancellations are allowed up to 24 hours before your appointment. If you have any questions or concerns, please contact us at (868) 387-1325. We look forward to seeing you!<p style="margin: 0;">Essential Dental Solutions Staff<p style="margin: 0;">1054 SS Erin Road, Debe.<p style="margin: 0;">Trinidad <span>&</span> Tobago<p style="margin: 0;">(868) 387-1325 | (868) 361-3469</div><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td class=section-padding style="padding:10px 15px 30px 15px"align=center bgcolor=#ffffff><table border=0 cellpadding=0 cellspacing=0 width=100% class=responsive-table style=max-width:500px><tr><td><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td class="message-content padding"style=padding:0;font-size:16px;line-height:25px;color:#232323><h2>Appointment Confirmation Information</h2><div class=form-container>${htmlData}</div></table></table></table></table>`,

src/config/nodemailer.tsx

@@ -13,5 +13,4 @@ export const transporter = nodemailer.createTransport({
 
 export const mailOptions = {
   from: email,
-  to: email,
 };

src/types/ConfirmationEmailData.ts

@@ -1,6 +1,7 @@
 type ConfirmationEmailData = {
   first_name: string;
   last_name: string;
+  email: string;
   appointment_type: string | null;
   scheduled_date: string | null | undefined;
   scheduled_time: string | null | undefined;