feat: Rerouting a booking with corrected responses (calcom#17074)

* POC working with no TS error

* cleanup

* Fix query booking

* Simplify things

* Support rerouting to different event

* self-review fixes

* Some improvements

* add more tests

* Remove members relation query

* Udits feedback

* Dont show CTAs when non-eventTypeRedirectUrl action route is chosen

---------

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

Author: hariombalhara

apps/web/components/booking/BookingListItem.tsx

@@ -20,6 +20,7 @@ import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
+import type { Ensure } from "@calcom/types/utils";
 import type { ActionType } from "@calcom/ui";
 import {
   Badge,
@@ -48,6 +49,7 @@ import { AddGuestsDialog } from "@components/dialog/AddGuestsDialog";
 import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { ReassignDialog } from "@components/dialog/ReassignDialog";
+import { RerouteDialog } from "@components/dialog/RerouteDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 
 type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"];
@@ -65,9 +67,43 @@ type BookingItemProps = BookingItem & {
   };
 };
 
+type ParsedBooking = ReturnType<typeof buildParsedBooking>;
+type TeamEvent = Ensure<NonNullable<ParsedBooking["eventType"]>, "team">;
+type TeamEventBooking = Omit<ParsedBooking, "eventType"> & {
+  eventType: TeamEvent;
+};
+type ReroutableBooking = Ensure<TeamEventBooking, "routedFromRoutingFormReponse">;
+
+function buildParsedBooking(booking: BookingItemProps) {
+  // The way we fetch bookings there could be eventType object even without an eventType, but id confirms its existence
+  const bookingEventType = booking.eventType.id
+    ? (booking.eventType as Ensure<
+        typeof booking.eventType,
+        // It would only ensure that the props are present, if they are optional in the original type. So, it is safe to assert here.
+        "id" | "length" | "title" | "slug" | "schedulingType" | "team"
+      >)
+    : null;
+
+  const bookingMetadata = bookingMetadataSchema.parse(booking.metadata ?? null);
+  return {
+    ...booking,
+    eventType: bookingEventType,
+    metadata: bookingMetadata,
+  };
+}
+
+const isBookingReroutable = (booking: ParsedBooking): booking is ReroutableBooking => {
+  // We support only team bookings for now for rerouting
+  // Though `routedFromRoutingFormReponse` could be there for a non-team booking, we don't want to support it for now.
+  // Let's not support re-routing for a booking without an event-type for now.
+  // Such a booking has its event-type deleted and there might not be something to reroute to.
+  return !!booking.routedFromRoutingFormReponse && !!booking.eventType?.team;
+};
+
 function BookingListItem(booking: BookingItemProps) {
-  const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
+  const parsedBooking = buildParsedBooking(booking);
 
+  const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
   const {
     t,
     i18n: { language },
@@ -107,7 +143,7 @@ function BookingListItem(booking: BookingItemProps) {
   const paymentAppData = getPaymentAppData(booking.eventType);
 
   const location = booking.location as ReturnType<typeof getEventLocationValue>;
-  const locationVideoCallUrl = bookingMetadataSchema.parse(booking?.metadata || {})?.videoCallUrl;
+  const locationVideoCallUrl = parsedBooking.metadata?.videoCallUrl;
 
   const { resolvedTheme, forcedTheme } = useGetTheme();
   const hasDarkTheme = !forcedTheme && resolvedTheme === "dark";
@@ -191,6 +227,18 @@ function BookingListItem(booking: BookingItemProps) {
         setIsOpenRescheduleDialog(true);
       },
     },
+    ...(isBookingReroutable(parsedBooking)
+      ? [
+          {
+            id: "reroute",
+            label: t("reroute"),
+            onClick: () => {
+              setRerouteDialogIsOpen(true);
+            },
+            icon: "waypoints" as const,
+          },
+        ]
+      : []),
     {
       id: "change_location",
       label: t("edit_location"),
@@ -275,6 +323,7 @@ function BookingListItem(booking: BookingItemProps) {
   const [isOpenReassignDialog, setIsOpenReassignDialog] = useState(false);
   const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
   const [isOpenAddGuestsDialog, setIsOpenAddGuestsDialog] = useState(false);
+  const [rerouteDialogIsOpen, setRerouteDialogIsOpen] = useState(false);
   const setLocationMutation = trpc.viewer.bookings.editLocation.useMutation({
     onSuccess: () => {
       showToast(t("location_updated"), "success");
@@ -360,6 +409,7 @@ function BookingListItem(booking: BookingItemProps) {
       phoneNumber: attendee.phoneNumber,
     };
   });
+
   return (
     <>
       <RescheduleDialog
@@ -620,6 +670,13 @@ function BookingListItem(booking: BookingItemProps) {
           )}
         </td>
       </tr>
+      {isBookingReroutable(parsedBooking) && (
+        <RerouteDialog
+          isOpenDialog={rerouteDialogIsOpen}
+          setIsOpenDialog={setRerouteDialogIsOpen}
+          booking={{ ...parsedBooking, eventType: parsedBooking.eventType }}
+        />
+      )}
     </>
   );
 }
@@ -722,7 +779,7 @@ const FirstAttendee = ({
       className=" hover:text-blue-500"
       href={`mailto:${user.email}`}
       onClick={(e) => e.stopPropagation()}>
-      {user.name}
+      {user.name || user.email}
     </a>
   );
 };