From b018ee34a7850445a113e37994fc42c0604fec94 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Thu, 23 Feb 2023 21:16:36 +0530
Subject: [PATCH] fix: placeholder in custom event name (#7247)

* fix: replace placeholder

* refactor: replace placeholder into a separate function
---
 .../components/eventtype/EventAdvancedTab.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index d9cdad9861..400b3ec25b 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -82,13 +82,14 @@ 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(
-      previewEventName
-        .replace("{Event type title}", eventNameObject.eventType)
-        .replace("{Scheduler}", eventNameObject.attendeeName)
-        .replace("{Organiser}", eventNameObject.host)
-    );
+    setPreviewText(replaceEventNamePlaceholder(eventNameObject, previewEventName));
   };
 
   useEffect(() => {
@@ -101,6 +102,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     }
   }, [eventType.customInputs]);
 
+  const eventNamePlaceholder = replaceEventNamePlaceholder(eventNameObject, t("meeting_with_user"));
+
   return (
     <div className="flex flex-col space-y-8">
       {/**
@@ -141,7 +144,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <TextField
           label={t("event_name_in_calendar")}
           type="text"
-          placeholder={t("meeting_with_user")}
+          placeholder={eventNamePlaceholder}
           defaultValue={eventType.eventName || ""}
           {...formMethods.register("eventName", {
             onChange: (e) => {
@@ -413,7 +416,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <TextField
               label={t("event_name_in_calendar")}
               type="text"
-              placeholder={t("meeting_with_user")}
+              placeholder={eventNamePlaceholder}
               defaultValue={eventType.eventName || ""}
               {...formMethods.register("eventName", {
                 onChange: (e) => {