perf: replace OR conditions with UNION in bookings query

apps/web/components/booking/BookingListItem.tsx

@@ -79,13 +79,14 @@ 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 bookingEventType =
+    booking.eventType && 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 {
@@ -119,15 +120,17 @@ function BookingListItem(booking: BookingItemProps) {
   const [isNoShowDialogOpen, setIsNoShowDialogOpen] = useState<boolean>(false);
   const cardCharged = booking?.payment[0]?.success;
 
-  const attendeeList = booking.attendees.map((attendee) => {
-    return {
-      name: attendee.name,
-      email: attendee.email,
-      id: attendee.id,
-      noShow: attendee.noShow || false,
-      phoneNumber: attendee.phoneNumber,
-    };
-  });
+  const attendeeList = booking.attendees.map(
+    (attendee: { name: string; email: string; id: number; noShow?: boolean; phoneNumber?: string }) => {
+      return {
+        name: attendee.name,
+        email: attendee.email,
+        id: attendee.id,
+        noShow: attendee.noShow || false,
+        phoneNumber: attendee.phoneNumber,
+      };
+    }
+  );
 
   const noShowMutation = trpc.viewer.markNoShow.useMutation({
     onSuccess: async (data) => {
@@ -169,15 +172,17 @@ function BookingListItem(booking: BookingItemProps) {
   const isTabUnconfirmed = booking.listingStatus === "unconfirmed";
   const isBookingFromRoutingForm = isBookingReroutable(parsedBooking);
 
-  const paymentAppData = getPaymentAppData(booking.eventType);
+  const paymentAppData = booking.eventType
+    ? getPaymentAppData(booking.eventType)
+    : { enabled: false, price: 0 };
 
   const location = booking.location as ReturnType<typeof getEventLocationValue>;
   const locationVideoCallUrl = parsedBooking.metadata?.videoCallUrl;
 
   const { resolvedTheme, forcedTheme } = useGetTheme();
   const hasDarkTheme = !forcedTheme && resolvedTheme === "dark";
   const eventTypeColor =
-    booking.eventType.eventTypeColor &&
+    booking.eventType?.eventTypeColor &&
     booking.eventType.eventTypeColor[hasDarkTheme ? "darkEventTypeColor" : "lightEventTypeColor"];
 
   const locationToDisplay = getSuccessPageLocationMessage(
@@ -221,8 +226,8 @@ function BookingListItem(booking: BookingItemProps) {
       disabled: mutation.isPending,
     },
     // For bookings with payment, only confirm if the booking is paid for
-    ...((isPending && !paymentAppData.enabled) ||
-    (paymentAppData.enabled && !!paymentAppData.price && booking.paid)
+    ...((isPending && !paymentAppData?.enabled) ||
+    (paymentAppData?.enabled && !!paymentAppData?.price && booking.paid)
       ? [
           {
             id: "confirm",
@@ -239,7 +244,7 @@ function BookingListItem(booking: BookingItemProps) {
   ];
 
   const editBookingActions: ActionType[] = [
-    ...(isBookingInPast && !booking.eventType.allowReschedulingPastBookings
+    ...(isBookingInPast && booking.eventType && !booking.eventType.allowReschedulingPastBookings
       ? []
       : [
           {
@@ -294,7 +299,7 @@ function BookingListItem(booking: BookingItemProps) {
         ]),
   ];
 
-  if (booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN) {
+  if (booking.eventType && booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN) {
     editBookingActions.push({
       id: "reassign ",
       label: t("reassign"),
@@ -358,8 +363,8 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
-  const isDisabledCancelling = booking.eventType.disableCancelling;
-  const isDisabledRescheduling = booking.eventType.disableRescheduling;
+  const isDisabledCancelling = booking.eventType?.disableCancelling || false;
+  const isDisabledRescheduling = booking.eventType?.disableRescheduling || false;
 
   if (isTabRecurring && isRecurring) {
     bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
@@ -475,7 +480,7 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
-  const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
+  const showPendingPayment = paymentAppData?.enabled && booking.payment.length && !booking.paid;
 
   return (
     <>
@@ -739,11 +744,21 @@ function BookingListItem(booking: BookingItemProps) {
         />
       </div>
 
-      {isBookingFromRoutingForm && (
+      {isBookingFromRoutingForm && parsedBooking.eventType && (
         <RerouteDialog
           isOpenDialog={rerouteDialogIsOpen}
           setIsOpenDialog={setRerouteDialogIsOpen}
-          booking={{ ...parsedBooking, eventType: parsedBooking.eventType }}
+          booking={{
+            ...parsedBooking,
+            eventType: {
+              id: parsedBooking.eventType.id,
+              title: parsedBooking.eventType.title,
+              slug: parsedBooking.eventType.slug,
+              length: parsedBooking.eventType.length,
+              schedulingType: parsedBooking.eventType.schedulingType,
+              team: parsedBooking.eventType.team,
+            },
+          }}
         />
       )}
     </>

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -39,10 +39,10 @@ type BookingListingStatus = (typeof validStatuses)[number];
 type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
 
 type RecurringInfo = {
-  recurringEventId: string | null;
+  recurringEventId: string;
   count: number;
-  firstDate: Date | null;
-  bookings: { [key: string]: Date[] };
+  firstDate: Date;
+  bookings: { CANCELLED: Date[]; ACCEPTED: Date[]; REJECTED: Date[]; PENDING: Date[]; AWAITING_HOST: Date[] };
 };
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
@@ -139,7 +139,7 @@ function BookingsContent({ status }: BookingsProps) {
     const columnHelper = createColumnHelper<RowData>();
 
     return [
-      columnHelper.accessor((row) => row.type === "data" && row.booking.eventType.id, {
+      columnHelper.accessor((row) => row.type === "data" && row.booking.eventType?.id, {
         id: "eventTypeId",
         header: t("event_type"),
         enableColumnFilter: true,
@@ -151,7 +151,7 @@ function BookingsContent({ status }: BookingsProps) {
           },
         },
       }),
-      columnHelper.accessor((row) => row.type === "data" && row.booking.eventType.team?.id, {
+      columnHelper.accessor((row) => row.type === "data" && row.booking.eventType?.team?.id, {
         id: "teamId",
         header: t("team"),
         enableColumnFilter: true,

packages/features/ee/teams/components/TeamsListing.tsx

@@ -31,7 +31,7 @@ export function TeamsListing({
   errorMsgFromInvite,
 }: TeamsListingProps) {
   const searchParams = useSearchParams();
-  const token = searchParams.get("token");
+  const token = searchParams?.get("token") || null;
   const { t } = useLocale();
   const router = useRouter();