feat: error message for invalid variables in custom event name

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -0,0 +1,144 @@
+import type { FC } from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
+import { useForm, useFormContext } from "react-hook-form";
+
+import type { EventNameObjectType } from "@calcom/core/event";
+import { getEventName } from "@calcom/core/event";
+import { validateCustomEventName } from "@calcom/core/event";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Dialog, DialogClose, DialogFooter, DialogContent, TextField } from "@calcom/ui";
+
+interface FormValues {
+ customEventName: string;
+}
+
+interface CustomEventTypeModalFormProps {
+ placeHolder: string;
+ close: () => void;
+ setValue: (value: string) => void;
+ event: EventNameObjectType;
+ defaultValue: string;
+}
+
+const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
+ const { t } = useLocale();
+ const { placeHolder, close, setValue, event } = props;
+ const { register, handleSubmit, watch, getValues } = useFormContext<FormValues>();
+ const onSubmit: SubmitHandler<FormValues> = (data) => {
+ setValue(data.customEventName);
+ close();
+ };
+
+ // const customEventName = watch("customEventName");
+ const previewText = getEventName({ ...event, eventName: watch("customEventName") });
+ const placeHolder_ = watch("customEventName") === "" ? previewText : placeHolder;
+
+ return (
+ <form
+ id="custom-event-name"
+ onSubmit={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const isEmpty = getValues("customEventName") === "";
+ if (isEmpty) {
+ setValue("");
+ }
+
+ handleSubmit(onSubmit)(e);
+ }}>
+ <TextField
+ label={t("event_name_in_calendar")}
+ type="text"
+ placeholder={placeHolder_}
+ {...register("customEventName", {
+ validate: (value) => validateCustomEventName(value, t("invalid_event_name_variables")),
+ })}
+ className="mb-0"
+ />
+ <div className="pt-6 text-sm">
+ <div className="mb-6 rounded-md bg-gray-100 p-2">
+ <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+ <div className="mb-2.5 flex font-normal">
+ <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
+ <p className="text-gray-900">{t("event_name_info")}</p>
+ </div>
+ <div className="mb-2.5 flex font-normal">
+ <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
+ <p className="text-gray-900">{t("your_full_name")}</p>
+ </div>
+ <div className="mb-2.5 flex font-normal">
+ <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
+ <p className="text-gray-900">{t("scheduler_full_name")}</p>
+ </div>
+ <div className="mb-1 flex font-normal">
+ <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
+ <p className="text-gray-900">{t("location_info")}</p>
+ </div>
+ </div>
+ <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
+ <div
+ className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
+ style={{
+ backgroundImage: "url(/calendar-preview.svg)",
+ }}>
+ <div className="m-auto flex items-center justify-center self-stretch">
+ <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
+ <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
+ <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </form>
+ );
+};
+
+interface CustomEventTypeModalProps {
+ placeHolder: string;
+ defaultValue: string;
+ close: () => void;
+ setValue: (value: string) => void;
+ event: EventNameObjectType;
+}
+
+const CustomEventTypeModal: FC<CustomEventTypeModalProps> = (props) => {
+ const { t } = useLocale();
+
+ const { defaultValue, placeHolder, close, setValue, event } = props;
+
+ const methods = useForm<FormValues>({
+ defaultValues: {
+ customEventName: defaultValue,
+ },
+ });
+
+ return (
+ <Dialog open={true} onOpenChange={close}>
+ <DialogContent
+ title={t("custom_event_name")}
+ description={t("custom_event_name_description")}
+ type="creation"
+ enableOverflow>
+ <FormProvider {...methods}>
+ <CustomEventTypeModalForm
+ event={event}
+ close={close}
+ setValue={setValue}
+ placeHolder={placeHolder}
+ defaultValue={defaultValue}
+ />
+ </FormProvider>
+ <DialogFooter>
+ <DialogClose>{t("cancel")}</DialogClose>
+
+ <Button form="custom-event-name" type="submit" color="primary">
+ {t("create")}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ );
+};
+
+export default CustomEventTypeModal;

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,3 +1,4 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import type { CustomInputParsed, EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
@@ -17,9 +18,7 @@ import {
  Button,
  Checkbox,
  Dialog,
- DialogClose,
  DialogContent,
- DialogFooter,
  Label,
  SettingsToggle,
  showToast,
@@ -32,6 +31,8 @@ import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
+const CustomEventTypeModal = dynamic(() => import("@components/eventtype/CustomEventTypeModal"));
+
 const generateHashedLink = (id: number) => {
  const translator = short();
  const seed = `${id}:${new Date().getTime()}`;
@@ -66,7 +67,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  host: eventType.users[0]?.name || "Nameless",
  t,
  };
- const [previewText, setPreviewText] = useState(getEventName(eventNameObject));
+
  const [customInputs, setCustomInputs] = useState<CustomInputParsed[]>(
  eventType.customInputs.sort((a, b) => a.id - b.id) || []
  );
@@ -82,16 +83,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  setCustomInputs([...customInputs]);
  };
 
- const replaceEventNamePlaceholder = (eventNameObject: EventNameObjectType, previewEventName: string) =>
- previewEventName
- .replace("{Event type title}", eventNameObject.eventType)
- .replace("{Scheduler}", eventNameObject.attendeeName)
- .replace("{Organiser}", eventNameObject.host);
-
- const changePreviewText = (eventNameObject: EventNameObjectType, previewEventName: string) => {
- setPreviewText(replaceEventNamePlaceholder(eventNameObject, previewEventName));
- };
-
  useEffect(() => {
  !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
  }, [eventType.users, hashedUrl, team?.id]);
@@ -102,8 +93,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  }
  }, [eventType.customInputs]);
 
- const eventNamePlaceholder = replaceEventNamePlaceholder(eventNameObject, t("meeting_with_user"));
+ const eventNamePlaceholder = getEventName({
+ ...eventNameObject,
+ eventName: formMethods.watch("eventName"),
+ });
 
+ const closeEventNameTip = () => setShowEventNameTip(false);
+
+ const setEventName = (value: string) => formMethods.setValue("eventName", value);
  return (
  <div className="flex flex-col space-y-8">
  {/**
@@ -146,14 +143,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  type="text"
  placeholder={eventNamePlaceholder}
  defaultValue={eventType.eventName || ""}
- {...formMethods.register("eventName", {
- onChange: (e) => {
- if (!e.target.value || !formMethods.getValues("eventName")) {
- return setPreviewText(getEventName(eventNameObject));
- }
- changePreviewText(eventNameObject, e.target.value);
- },
- })}
+ {...formMethods.register("eventName")}
  addOnSuffix={
  <Button
  type="button"
@@ -162,6 +152,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  color="minimal"
  className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
  onClick={() => setShowEventNameTip((old) => !old)}
+ aria-label="edit custom name"
  />
  }
  />
@@ -407,73 +398,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
  />
 
  {showEventNameTip && (
- <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
- <DialogContent
- title={t("custom_event_name")}
- description={t("custom_event_name_description")}
- type="creation"
- enableOverflow>
- <TextField
- label={t("event_name_in_calendar")}
- type="text"
- placeholder={eventNamePlaceholder}
- defaultValue={eventType.eventName || ""}
- {...formMethods.register("eventName", {
- onChange: (e) => {
- if (!e.target.value || !formMethods.getValues("eventName")) {
- return setPreviewText(getEventName(eventNameObject));
- }
- changePreviewText(eventNameObject, e.target.value);
- },
- })}
- className="mb-0"
- />
- <div className="text-sm">
- <div className="mb-6 rounded-md bg-gray-100 p-2">
- <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
- <div className="mb-2.5 flex font-normal">
- <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
- <p className="text-gray-900">{t("event_name_info")}</p>
- </div>
- <div className="mb-2.5 flex font-normal">
- <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
- <p className="text-gray-900">{t("your_full_name")}</p>
- </div>
- <div className="mb-2.5 flex font-normal">
- <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
- <p className="text-gray-900">{t("scheduler_full_name")}</p>
- </div>
- <div className="mb-1 flex font-normal">
- <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
- <p className="text-gray-900">{t("location_info")}</p>
- </div>
- </div>
- <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
- <div
- className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
- style={{
- backgroundImage: "url(/calendar-preview.svg)",
- }}>
- <div className="m-auto flex items-center justify-center self-stretch">
- <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
- <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">
- {previewText}
- </p>
- <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
- </div>
- </div>
- </div>
- </div>
- <DialogFooter>
- <DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")}>
- {t("cancel")}
- </DialogClose>
- <Button color="primary" onClick={() => setShowEventNameTip(false)}>
- {t("create")}
- </Button>
- </DialogFooter>
- </DialogContent>
- </Dialog>
+ <CustomEventTypeModal
+ close={closeEventNameTip}
+ setValue={setEventName}
+ defaultValue={eventType.eventName || ""}
+ placeHolder={eventNamePlaceholder}
+ event={eventNameObject}
+ />
  )}
  <Controller
  name="customInputs"

apps/web/pages/event-types/[type]/index.tsx

@@ -8,6 +8,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { validateCustomEventName } from "@calcom/core/event";
 import type { EventLocationType } from "@calcom/core/location";
 import { validateBookingLimitOrder } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -213,6 +214,12 @@ const EventTypePage = (props: EventTypeSetupProps) => {
  .object({
  // Length if string, is converted to a number or it can be a number
  // Make it optional because it's not submitted from all tabs of the page
+ eventName: z
+ .string()
+ .refine((val) => validateCustomEventName(val, t("invalid_event_name_variables")) === true, {
+ message: t("invalid_event_name_variables"),
+ })
+ .optional(),
  length: z.union([z.string().transform((val) => +val), z.number()]).optional(),
  })
  // TODO: Add schema for other fields later.

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

@@ -1624,5 +1624,6 @@
  "no_responses_yet": "No responses yet",
  "this_will_be_the_placeholder": "This will be the placeholder",
  "verification_code": "Verification code",
- "verify": "Verify"
+ "verify": "Verify",
+ "invalid_event_name_variables":"There is an invalid variable in your event name"
 }

packages/core/event.ts

@@ -1,4 +1,4 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 
 import { guessEventLocationType } from "@calcom/app-store/locations";
 
@@ -43,3 +43,17 @@ export function getEventName(eventNameObj: EventNameObjectType, forAttendeeView
  .replace("{HOST/ATTENDEE}", forAttendeeView ? eventNameObj.host : eventNameObj.attendeeName)
  );
 }
+
+export const validateCustomEventName = (value: string, message: string) => {
+ const validVariables = ["{Event type title}", "{Organiser}", "{Scheduler}", "{Location}"];
+ const matches = value.match(/\{([^}]+)\}/g);
+ if (matches?.length) {
+ for (const item of matches) {
+ if (!validVariables.includes(item)) {
+ return message;
+ }
+ }
+ }
+
+ return true;
+};