From df25ae6a3d3d6bcf12210967964980dbea180f38 Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Wed, 1 Feb 2023 17:55:16 +0545 Subject: [PATCH] [CAL-845] Improve the custom event name modal UI/UX (#6660) Co-authored-by: gitstart-calcom --- .../components/eventtype/EventAdvancedTab.tsx | 90 +++++- apps/web/pages/booking/[uid].tsx | 2 +- apps/web/public/calendar-preview.svg | 283 ++++++++++++++++++ apps/web/public/static/locales/en/common.json | 11 +- packages/core/event.ts | 15 +- 5 files changed, 377 insertions(+), 24 deletions(-) create mode 100644 apps/web/public/calendar-preview.svg diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx index a1ad7fc816..4088a0f922 100644 --- a/apps/web/components/eventtype/EventAdvancedTab.tsx +++ b/apps/web/components/eventtype/EventAdvancedTab.tsx @@ -5,6 +5,8 @@ import { Controller, useFormContext } from "react-hook-form"; import short from "short-uuid"; import { v5 as uuidv5 } from "uuid"; +import type { EventNameObjectType } from "@calcom/core/event"; +import { getEventName } from "@calcom/core/event"; import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector"; import CustomInputItem from "@calcom/features/eventtypes/components/CustomInputItem"; import { APP_NAME, CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants"; @@ -57,6 +59,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick( eventType.customInputs.sort((a, b) => a.id - b.id) || [] ); @@ -72,6 +82,15 @@ export const EventAdvancedTab = ({ eventType, team }: Pick { + setPreviewText( + previewEventName + .replace("{Event type title}", eventNameObject.eventType) + .replace("{Scheduler}", eventNameObject.attendeeName) + .replace("{Organiser}", eventNameObject.host) + ); + }; + useEffect(() => { !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id)); }, [eventType.users, hashedUrl, team?.id]); @@ -120,11 +139,18 @@ export const EventAdvancedTab = ({ eventType, team }: Pick { + if (!e.target.value || !formMethods.getValues("eventName")) { + return setPreviewText(getEventName(eventNameObject)); + } + changePreviewText(eventNameObject, e.target.value); + }, + })} addOnSuffix={ - formMethods.setValue("eventName", eventType.eventName ?? "")} /> diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 8fee2fd5df..c7463a7577 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -240,7 +240,7 @@ export default function Success(props: SuccessProps) { const giphyAppData = getEventTypeAppData(eventType, "giphy"); const giphyImage = giphyAppData?.thankYouPage; - const eventName = getEventName(eventNameObject, true); + const eventName = getEventName(eventNameObject); const needsConfirmation = eventType.requiresConfirmation && reschedule != true; const isCancelled = status === "CANCELLED" || status === "REJECTED"; const telemetry = useTelemetry(); diff --git a/apps/web/public/calendar-preview.svg b/apps/web/public/calendar-preview.svg new file mode 100644 index 0000000000..cc84eede7f --- /dev/null +++ b/apps/web/public/calendar-preview.svg @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 05e7a4fc52..a0cc921aab 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -461,6 +461,7 @@ "slots_load_fail": "Could not load the available time slots.", "additional_guests": "Add guests", "your_name": "Your name", + "your_full_name": "Your full name", "email_address": "Email address", "enter_valid_email": "Please enter a valid email", "location": "Location", @@ -676,8 +677,9 @@ "add_attendees": "Add attendees", "show_advanced_settings": "Show advanced settings", "event_name": "Event Name", + "event_name_in_calendar": "Event name in calendar", "event_name_tooltip": "The name that will appear in calendars", - "meeting_with_user": "Meeting with {{attendeeName}}", + "meeting_with_user": "{Event type title} between {Organiser} & {Scheduler}", "additional_inputs": "Additional Inputs", "additional_input_description": "Require scheduler to input additional inputs prior the booking is confirmed", "label": "Label", @@ -1088,6 +1090,7 @@ "broken_video_action": "We could not add the <1>{{location}} meeting link to your scheduled event. Contact your invitees or update your calendar event to add the details. You can either <3> change your location on the event type or try <5>removing and adding the app again.", "broken_calendar_action": "We could not update your <1>{{calendar}}. <2> Please check your calendar settings or remove and add your calendar again ", "attendee_name": "Attendee's name", + "scheduler_full_name": "The full name of the person booking", "broken_integration": "Broken integration", "problem_adding_video_link": "There was a problem adding a video link", "problem_updating_calendar": "There was a problem updating your calendar", @@ -1240,7 +1243,7 @@ "event_name_info": "The event type name", "event_date_info": "The event date", "event_time_info": "The event start time", - "location_info": "The event location", + "location_info": "The location of the event", "organizer_name_info": "Your name", "additional_notes_info": "The additional notes of booking", "attendee_name_info": "The person booking's name", @@ -1553,5 +1556,7 @@ "email_no_user_step_three":"Set your Availability", "email_no_user_step_four":"Join {{teamName}}", "email_no_user_signoff":"Happy Scheduling from the {{appName}} team", - "impersonation_user_tip": "You are about to impersonate a user, which means you can make changes on their behalf. Please be careful." + "impersonation_user_tip": "You are about to impersonate a user, which means you can make changes on their behalf. Please be careful.", + "available_variables": "Available variables", + "scheduler": "{Scheduler}" } diff --git a/packages/core/event.ts b/packages/core/event.ts index 355ecf500d..007c23fcd2 100644 --- a/packages/core/event.ts +++ b/packages/core/event.ts @@ -2,7 +2,7 @@ import { TFunction } from "next-i18next"; import { guessEventLocationType } from "@calcom/app-store/locations"; -type EventNameObjectType = { +export type EventNameObjectType = { attendeeName: string; eventType: string; eventName?: string | null; @@ -11,7 +11,7 @@ type EventNameObjectType = { t: TFunction; }; -export function getEventName(eventNameObj: EventNameObjectType, forAttendeeView = false) { +export function getEventName(eventNameObj: EventNameObjectType) { if (!eventNameObj.eventName) return eventNameObj.t("event_between_users", { eventName: eventNameObj.eventType, @@ -22,20 +22,19 @@ export function getEventName(eventNameObj: EventNameObjectType, forAttendeeView let eventName = eventNameObj.eventName; let locationString = eventNameObj.location || ""; - if (eventNameObj.eventName.includes("{LOCATION}")) { + if (eventNameObj.eventName.includes("{Location}")) { const eventLocationType = guessEventLocationType(eventNameObj.location); if (eventLocationType) { locationString = eventLocationType.label; } - eventName = eventName.replace("{LOCATION}", locationString); + eventName = eventName.replace("{Location}", locationString); } return ( eventName // Need this for compatibility with older event names - .replace("{USER}", eventNameObj.attendeeName) - .replace("{ATTENDEE}", eventNameObj.attendeeName) - .replace("{HOST}", eventNameObj.host) - .replace("{HOST/ATTENDEE}", forAttendeeView ? eventNameObj.host : eventNameObj.attendeeName) + .replace("{Event type title}", eventNameObj.eventType) + .replace("{Scheduler}", eventNameObj.attendeeName) + .replace("{Organiser}", eventNameObj.host) ); }