feat: Add {first name} variable to Organizer & Scheduler custom event… (#14156)

* feat: Add {first name} variable to Organizer & Scheduler custom event name

* fix: use split name booking field

* remove unwanted translation changes

* Update packages/core/event.ts

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

* chore: improve code

* add scheduler last name

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -19,11 +19,12 @@ interface CustomEventTypeModalFormProps {
   setValue: (value: string) => void;
   event: EventNameObjectType;
   defaultValue: string;
+  isNameFieldSplit: boolean;
 }
 
 const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
   const { t } = useLocale();
-  const { placeHolder, close, setValue, event } = props;
+  const { placeHolder, close, setValue, event, isNameFieldSplit } = props;
   const { register, handleSubmit, watch, getValues } = useFormContext<FormValues>();
   const onSubmit: SubmitHandler<FormValues> = (data) => {
     setValue(data.customEventName);
@@ -68,10 +69,26 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
             <p className="text-subtle ml-1 mr-5 w-28">{`{Organiser}`}</p>
             <p className="text-emphasis">{t("your_full_name")}</p>
           </div>
+          <div className="mb-2.5 flex font-normal">
+            <p className="text-subtle ml-1 mr-5 w-28">{`{Organiser first name}`}</p>
+            <p className="text-emphasis">{t("organizer_first_name")}</p>
+          </div>
           <div className="mb-2.5 flex font-normal">
             <p className="text-subtle ml-1 mr-5 w-28">{`{Scheduler}`}</p>
             <p className="text-emphasis">{t("scheduler_full_name")}</p>
           </div>
+          {isNameFieldSplit && (
+            <div className="mb-2.5 flex font-normal">
+              <p className="text-subtle ml-1 mr-5 w-28">{`{Scheduler first name}`}</p>
+              <p className="text-emphasis">{t("scheduler_first_name")}</p>
+            </div>
+          )}
+          {isNameFieldSplit && (
+            <div className="mb-2.5 flex font-normal">
+              <p className="text-subtle ml-1 mr-5 w-28">{`{Scheduler last name}`}</p>
+              <p className="text-emphasis">{t("scheduler_last_name")}</p>
+            </div>
+          )}
           <div className="mb-1 flex font-normal">
             <p className="text-subtle ml-1 mr-5 w-28">{`{Location}`}</p>
             <p className="text-emphasis">{t("location_info")}</p>
@@ -101,12 +118,13 @@ interface CustomEventTypeModalProps {
   close: () => void;
   setValue: (value: string) => void;
   event: EventNameObjectType;
+  isNameFieldSplit: boolean;
 }
 
 const CustomEventTypeModal: FC<CustomEventTypeModalProps> = (props) => {
   const { t } = useLocale();
 
-  const { defaultValue, placeHolder, close, setValue, event } = props;
+  const { defaultValue, placeHolder, close, setValue, event, isNameFieldSplit } = props;
 
   const methods = useForm<FormValues>({
     defaultValues: {
@@ -128,6 +146,7 @@ const CustomEventTypeModal: FC<CustomEventTypeModalProps> = (props) => {
             setValue={setValue}
             placeHolder={placeHolder}
             defaultValue={defaultValue}
+            isNameFieldSplit={isNameFieldSplit}
           />
         </FormProvider>
         <DialogFooter>

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -65,6 +65,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     bookingFields[name] = `${name} input`;
   });
 
+  const nameBookingField = formMethods.getValues().bookingFields.find((field) => field.name === "name");
+  const isSplit = (nameBookingField && nameBookingField.variant === "firstAndLastName") ?? false;
+
   const eventNameObject: EventNameObjectType = {
     attendeeName: t("scheduler"),
     eventType: formMethods.getValues("title"),
@@ -564,6 +567,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           setValue={(val: string) => formMethods.setValue("eventName", val, { shouldDirty: true })}
           defaultValue={formMethods.getValues("eventName")}
           placeHolder={eventNamePlaceholder}
+          isNameFieldSplit={isSplit}
           event={eventNameObject}
         />
       )}

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

@@ -2385,6 +2385,9 @@
   "add_email": "Add Email",
   "add_email_description": "Add an email address to replace your primary or to use as an alternative email on your event types.",
   "confirm_email": "Confirm your email",
+  "scheduler_first_name": "The first name of the person booking",
+  "scheduler_last_name": "The last name of the person booking",
+  "organizer_first_name": "Your first name",
   "confirm_email_description": "We sent an email to <strong>{{email}}</strong>. Click the link in the email to verify this address.",
   "send_event_details_to": "Send event details to",
   "schedule_tz_without_end_date": "Schedule timezone without end date",

packages/core/event.ts

@@ -57,11 +57,23 @@ export function getEventName(eventNameObj: EventNameObjectType, forAttendeeView
     .replaceAll("{Event type title}", eventNameObj.eventType)
     .replaceAll("{Scheduler}", attendeeName)
     .replaceAll("{Organiser}", eventNameObj.host)
+    .replaceAll("{Organiser first name}", eventNameObj.host.split(" ")[0])
     .replaceAll("{USER}", attendeeName)
     .replaceAll("{ATTENDEE}", attendeeName)
     .replaceAll("{HOST}", eventNameObj.host)
     .replaceAll("{HOST/ATTENDEE}", forAttendeeView ? eventNameObj.host : attendeeName);
 
+  const { bookingFields } = eventNameObj || {};
+  const { name } = bookingFields || {};
+
+  if (name && typeof name === "object" && !Array.isArray(name) && typeof name.firstName === "string") {
+    dynamicEventName = dynamicEventName.replaceAll("{Scheduler first name}", name.firstName.toString());
+  }
+
+  if (name && typeof name === "object" && !Array.isArray(name) && typeof name.lastName === "string") {
+    dynamicEventName = dynamicEventName.replaceAll("{Scheduler last name}", name.lastName.toString());
+  }
+
   const customInputvariables = dynamicEventName.match(/\{(.+?)}/g)?.map((variable) => {
     return variable.replace("{", "").replace("}", "");
   });
@@ -105,6 +117,9 @@ export const validateCustomEventName = (
     "{Organiser}",
     "{Scheduler}",
     "{Location}",
+    "{Organiser first name}",
+    "{Scheduler first name}",
+    "{Scheduler last name}",
     //allowed for fallback reasons
     "{LOCATION}",
     "{HOST/ATTENDEE}",