add attendee's email as dynamic text variable (#5258)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

apps/web/public/static/locales/en/common.json

@@ -1336,5 +1336,7 @@
   "limit_future_bookings_description":"Limit how far in the future this event can be booked",
   "no_event_types": "No event types setup",
   "no_event_types_description": "{{name}} has not setup any event types for you to book.",
-  "number_sms_notifications": "Phone number (SMS\u00a0notifications)"
+  "number_sms_notifications": "Phone number (SMS\u00a0notifications)",
+  "attendee_email_workflow": "Attendee email",
+  "attendee_email_info": "The person booking's email"
 }

packages/features/ee/workflows/api/scheduleEmailReminders.ts

@@ -118,6 +118,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
               eventName: reminder.booking?.eventType?.title || "",
               organizerName: reminder.booking?.user?.name || "",
               attendeeName: reminder.booking?.attendees[0].name,
+              attendeeEmail: reminder.booking?.attendees[0].email,
               eventDate: dayjs(reminder.booking?.startTime).tz(timeZone),
               eventTime: dayjs(reminder.booking?.startTime).tz(timeZone),
               timeZone: timeZone,

packages/features/ee/workflows/api/scheduleSMSReminders.ts

@@ -88,6 +88,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
               eventName: reminder.booking?.eventType?.title,
               organizerName: reminder.booking?.user?.name || "",
               attendeeName: reminder.booking?.attendees[0].name,
+              attendeeEmail: reminder.booking?.attendees[0].email,
               eventDate: dayjs(reminder.booking?.startTime).tz(timeZone),
               eventTime: dayjs(reminder.booking?.startTime).tz(timeZone),
               timeZone: timeZone,

packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx

@@ -20,6 +20,7 @@ const variables = [
   "location",
   "organizer_name",
   "attendee_name",
+  "attendee_email",
   "additional_notes",
 ];
 
@@ -28,29 +29,29 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger className="focus:bg-transparent focus:ring-transparent focus:ring-offset-0 ">
-        <Label className="mb-0">
-          <div className="flex items-center">
-            {t("add_variable")}
-            <Icon.FiChevronDown className="ml-1 h-4 w-4" />
-          </div>
-        </Label>
+      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
+        <div className="flex items-center ">
+          {t("add_variable")}
+          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="h-40 overflow-scroll">
-        <div className="p-3">
-          <div className="mb-2 text-xs text-gray-500">{t("add_dynamic_variables").toLocaleUpperCase()}</div>
+        <div className="pt-4 pb-1">
+          <div className="mb-2 px-4 text-left text-xs text-gray-500">
+            {t("add_dynamic_variables").toLocaleUpperCase()}
+          </div>
           {variables.map((variable) => (
-            <DropdownMenuItem key={variable}>
+            <DropdownMenuItem key={variable} className="hover:ring-0">
               <button
                 key={variable}
                 type="button"
-                className="w-full py-2"
+                className="w-full px-4 py-2"
                 onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
-                <div className="md:grid md:grid-cols-2">
+                <div className="sm:grid sm:grid-cols-2">
                   <div className="mr-3 text-left md:col-span-1">
                     {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
                   </div>
-                  <div className="invisible text-left text-gray-600 md:visible md:col-span-1">
+                  <div className="hidden text-left text-gray-600 sm:col-span-1 sm:flex">
                     {t(`${variable}_info`)}
                   </div>
                 </div>

packages/features/ee/workflows/lib/reminders/emailReminderManager.ts

@@ -99,6 +99,7 @@ export const scheduleEmailReminder = async (
         eventName: evt.title || "",
         organizerName: evt.organizer.name,
         attendeeName: evt.attendees[0].name,
+        attendeeEmail: evt.attendees[0].email,
         eventDate: dayjs(startTime).tz(timeZone),
         eventTime: dayjs(startTime).tz(timeZone),
         timeZone: timeZone,

packages/features/ee/workflows/lib/reminders/smsReminderManager.ts

@@ -76,6 +76,7 @@ export const scheduleSMSReminder = async (
         eventName: evt.title,
         organizerName: evt.organizer.name,
         attendeeName: evt.attendees[0].name,
+        attendeeEmail: evt.attendees[0].email,
         eventDate: dayjs(evt.startTime).tz(timeZone),
         eventTime: dayjs(evt.startTime).tz(timeZone),
         timeZone: timeZone,

packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts

@@ -6,6 +6,7 @@ export type VariablesType = {
   eventName?: string;
   organizerName?: string;
   attendeeName?: string;
+  attendeeEmail?: string;
   eventDate?: Dayjs;
   eventTime?: Dayjs;
   timeZone?: string;
@@ -31,7 +32,8 @@ const customTemplate = async (text: string, variables: VariablesType, locale: st
     .replaceAll("{EVENT_DATE}", variables.eventDate?.locale(locale).format("dddd, MMMM D, YYYY") || "")
     .replaceAll("{EVENT_TIME}", timeWithTimeZone)
     .replaceAll("{LOCATION}", locationString)
-    .replaceAll("{ADDITIONAL_NOTES}", variables.additionalNotes || "");
+    .replaceAll("{ADDITIONAL_NOTES}", variables.additionalNotes || "")
+    .replaceAll("{ATTENDEE_EMAIL}", variables.attendeeEmail || "");
 
   const customInputvariables = dynamicText.match(/\{(.+?)}/g)?.map((variable) => {
     return variable.replace("{", "").replace("}", "");