Dynamic group booking follow-up (#2430)

apps/web/components/booking/pages/BookingPage.tsx

@@ -116,6 +116,7 @@ const BookingPage = ({
           name: attendees[0].name,
           email: attendees[0].email,
           location,
+          eventName: profile.eventName || "",
         },
       });
     },

apps/web/pages/[user]/book.tsx

@@ -6,7 +6,12 @@ import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
 import { getLocationLabels } from "@calcom/app-store/utils";
-import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
+import {
+  getDefaultEvent,
+  getDynamicEventName,
+  getGroupName,
+  getUsernameList,
+} from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { asStringOrThrow } from "@lib/asStringOrNull";
@@ -187,6 +192,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         })
           ? false
           : true,
+        eventName: getDynamicEventName(dynamicNames, eventTypeSlug),
       }
     : {
         name: user.name || user.username,
@@ -195,6 +201,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         theme: user.theme,
         brandColor: user.brandColor,
         darkBrandColor: user.darkBrandColor,
+        eventName: null,
       };
 
   const t = await getTranslation(context.locale ?? "en", "common");

apps/web/pages/api/cancel.ts

@@ -112,7 +112,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const evt: CalendarEvent = {
     title: bookingToDelete?.title,
-    type: bookingToDelete?.eventType?.title as string,
+    type: (bookingToDelete?.eventType?.title as string) || bookingToDelete?.title,
     description: bookingToDelete?.description || "",
     startTime: bookingToDelete?.startTime ? dayjs(bookingToDelete.startTime).format() : "",
     endTime: bookingToDelete?.endTime ? dayjs(bookingToDelete.endTime).format() : "",
@@ -128,7 +128,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     destinationCalendar: bookingToDelete?.destinationCalendar || bookingToDelete?.user.destinationCalendar,
     cancellationReason: cancellationReason,
   };
-
   // Hook up the webhook logic here
   const eventTrigger: WebhookTriggerEvents = "BOOKING_CANCELLED";
   // Send Webhook call if hooked to BOOKING.CANCELLED

apps/web/pages/success.tsx

@@ -145,7 +145,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
   const eventNameObject = {
     attendeeName,
     eventType: props.eventType.title,
-    eventName: props.eventType.eventName,
+    eventName: (props.dynamicEventName as string) || props.eventType.eventName,
     host: props.profile.name || "Nameless",
     t,
   };
@@ -456,6 +456,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const typeId = parseInt(asStringOrNull(context.query.type) ?? "");
   const typeSlug = asStringOrNull(context.query.eventSlug) ?? "15min";
+  const dynamicEventName = asStringOrNull(context.query.eventName) ?? "";
 
   if (isNaN(typeId)) {
     return {
@@ -498,6 +499,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     };
   }
 
+  // if (!typeId) eventType["eventName"] = getDynamicEventName(users, typeSlug);
+
   const profile = {
     name: eventType.team?.name || eventType.users[0]?.name || null,
     email: eventType.team ? null : eventType.users[0].email || null,
@@ -512,6 +515,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       profile,
       eventType,
       trpcState: ssr.dehydrate(),
+      dynamicEventName,
     },
   };
 }

apps/web/pages/team/[slug]/book.tsx

@@ -110,6 +110,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         theme: null /* Teams don't have a theme, and `BookingPage` uses it */,
         brandColor: null /* Teams don't have a brandColor, and `BookingPage` uses it */,
         darkBrandColor: null /* Teams don't have a darkBrandColor, and `BookingPage` uses it */,
+        eventName: null,
       },
       eventType: eventTypeObject,
       booking,

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

@@ -151,7 +151,7 @@
   "unconfirmed": "Unconfirmed",
   "guests": "Guests",
   "guest": "Guest",
-  "web_conferencing_details_to_follow": "Web conferencing details to follow.",
+  "web_conferencing_details_to_follow": "Web conferencing details to follow in the confirmation email.",
   "the_username": "The username",
   "username": "Username",
   "is_still_available": "is still available.",

packages/lib/defaultEvents.ts

@@ -83,7 +83,7 @@ const commons = {
 
 const min15Event = {
   length: 15,
-  slug: "15min",
+  slug: "15",
   title: "15min",
   eventName: "Dynamic Collective 15min Event",
   description: "Dynamic Collective 15min Event",
@@ -91,7 +91,7 @@ const min15Event = {
 };
 const min30Event = {
   length: 30,
-  slug: "30min",
+  slug: "30",
   title: "30min",
   eventName: "Dynamic Collective 30min Event",
   description: "Dynamic Collective 30min Event",
@@ -99,7 +99,7 @@ const min30Event = {
 };
 const min60Event = {
   length: 60,
-  slug: "60min",
+  slug: "60",
   title: "60min",
   eventName: "Dynamic Collective 60min Event",
   description: "Dynamic Collective 60min Event",
@@ -109,7 +109,12 @@ const min60Event = {
 const defaultEvents = [min15Event, min30Event, min60Event];
 
 export const getDynamicEventDescription = (dynamicUsernames: string[], slug: string): string => {
-  return `Book a ${slug} event with ${dynamicUsernames.join(", ")}`;
+  return `Book a ${slug} min event with ${dynamicUsernames.join(", ")}`;
+};
+
+export const getDynamicEventName = (dynamicNames: string[], slug: string): string => {
+  const lastUser = dynamicNames.pop();
+  return `Dynamic Collective ${slug} min event with ${dynamicNames.join(", ")} & ${lastUser}`;
 };
 
 export const getDefaultEvent = (slug: string) => {