fix: Improve wrong assignment report (calcom#27162)

* Pass already fetched booking

* Fetch the assignment reason

* Update tests

* Label as first assignment reason

* Pass single booking object

* Remove unused repository method

* Only pass bookingUid to handler

* Rename booking `assignmentReason` to `assignmentReasonSortedByCreatedAt`

* fix: use renamed assignmentReasonSortedByCreatedAt property

Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>

* Remove take statement

* fix: address Udit's review comments

- Restore BookingAccessService for access control checks
- Rename repository method from findByUidForWrongAssignmentReport to findByUidIncludeUserAndEventTypeTeamAndAttendeesAndAssignmentReason

Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>

* test: update tests to use BookingAccessService mock

Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>

* fix: use latest assignment reason in BookingDetailsSheet for consistency

Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: joeauyeung

apps/web/components/booking/BookingListItem.tsx

@@ -552,19 +552,14 @@ function BookingListItem(booking: BookingItemProps) {
         userTimeZone={userTimeZone}
         isRescheduled={isRescheduled}
         onAssignmentReasonClick={
-          booking.assignmentReason.length > 0 ? () => setIsOpenRoutingTraceSheet(true) : undefined
+          booking.assignmentReasonSortedByCreatedAt.length > 0 ? () => setIsOpenRoutingTraceSheet(true) : undefined
         }
       />
       {isBookingFromRoutingForm && (
         <WrongAssignmentDialog
           isOpenDialog={isOpenWrongAssignmentDialog}
           setIsOpenDialog={setIsOpenWrongAssignmentDialog}
-          bookingUid={booking.uid}
-          routingReason={booking.assignmentReason[0]?.reasonString ?? null}
-          guestEmail={booking.attendees[0]?.email ?? ""}
-          hostEmail={booking.user?.email ?? ""}
-          hostName={booking.user?.name ?? null}
-          teamId={booking.eventType?.team?.id ?? null}
+          booking={booking}
         />
       )}
     </div>
@@ -606,7 +601,7 @@ const BookingItemBadges = ({
           </Badge>
         </Tooltip>
       )}
-      {isRejected && !isRescheduled && booking.assignmentReason.length === 0 && (
+      {isRejected && !isRescheduled && booking.assignmentReasonSortedByCreatedAt.length === 0 && (
         <Badge variant="gray" className="ltr:mr-2 rtl:ml-2">
           {t("rejected")}
         </Badge>
@@ -616,9 +611,9 @@ const BookingItemBadges = ({
           {booking.eventType.team.name}
         </Badge>
       )}
-      {booking?.assignmentReason.length > 0 && (
+      {booking?.assignmentReasonSortedByCreatedAt.length > 0 && (
         <AssignmentReasonTooltip
-          assignmentReason={booking.assignmentReason[0]}
+          assignmentReason={booking.assignmentReasonSortedByCreatedAt[booking.assignmentReasonSortedByCreatedAt.length - 1]}
           onClick={onAssignmentReasonClick}
         />
       )}

apps/web/components/booking/actions/BookingActionsDropdown.tsx

@@ -458,15 +458,10 @@ export function BookingActionsDropdown({
         <WrongAssignmentDialog
           isOpenDialog={isOpenWrongAssignmentDialog}
           setIsOpenDialog={setIsOpenWrongAssignmentDialog}
-          bookingUid={booking.uid}
-          routingReason={booking.assignmentReason[0]?.reasonString ?? null}
-          guestEmail={booking.attendees[0]?.email ?? ""}
-          hostEmail={booking.user?.email ?? ""}
-          hostName={booking.user?.name ?? null}
-          teamId={booking.eventType?.team?.id ?? null}
+          booking={booking}
         />
       )}
-      {booking.assignmentReason.length > 0 && (
+      {booking.assignmentReasonSortedByCreatedAt.length > 0 && (
         <RoutingTraceSheet
           isOpen={isOpenRoutingTraceSheet}
           setIsOpen={setIsOpenRoutingTraceSheet}

apps/web/components/booking/actions/bookingActions.test.ts

@@ -84,7 +84,7 @@ function createMockContext(overrides: Partial<BookingActionContext> = {}): Booki
       location: "integrations:daily",
       payment: [],
       seatsReferences: [],
-      assignmentReason: [],
+      assignmentReasonSortedByCreatedAt: [],
       metadata: null,
       routedFromRoutingFormReponse: null,
       listingStatus: "upcoming",

apps/web/components/dialog/WrongAssignmentDialog.tsx

@@ -1,8 +1,10 @@
 import { Dialog } from "@calcom/features/components/controlled-dialog";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { AssignmentReasonEnum } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/components/alert";
+import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { Label, Select, TextArea } from "@calcom/ui/components/form";
@@ -12,15 +14,32 @@ import type { Dispatch, SetStateAction } from "react";
 import type { Control, ControllerRenderProps } from "react-hook-form";
 import { Controller, useForm } from "react-hook-form";
 
+import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
+
+interface BookingData {
+  uid: string;
+  eventType?: {
+    team?: {
+      id: number;
+    } | null;
+  } | null;
+  user?: {
+    email: string;
+    name: string | null;
+  } | null;
+  assignmentReasonSortedByCreatedAt: Array<{
+    reasonString: string | null;
+    reasonEnum: AssignmentReasonEnum | null;
+  }>;
+  attendees: Array<{
+    email: string;
+  }>;
+}
+
 interface IWrongAssignmentDialog {
   isOpenDialog: boolean;
   setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
-  bookingUid: string;
-  routingReason: string | null;
-  guestEmail: string;
-  hostEmail: string;
-  hostName: string | null;
-  teamId: number | null;
+  booking: BookingData;
 }
 
 interface FormValues {
@@ -36,6 +55,7 @@ interface TeamMemberOption {
 
 interface RoutingInfoSectionProps {
   routingReason: string | null;
+  routingReasonEnum: AssignmentReasonEnum | null;
   noRoutingReasonText: string;
   routingReasonLabel: string;
   guestEmail: string;
@@ -48,8 +68,10 @@ interface RoutingInfoSectionProps {
 }
 
 function RoutingInfoSection(props: RoutingInfoSectionProps): JSX.Element {
+  const { t } = useLocale();
   const {
     routingReason,
+    routingReasonEnum,
     noRoutingReasonText,
     routingReasonLabel,
     guestEmail,
@@ -79,9 +101,14 @@ function RoutingInfoSection(props: RoutingInfoSectionProps): JSX.Element {
     <div className="-mt-2 mb-4 space-y-3">
       <div>
         <Label className="text-emphasis mb-1 block text-sm font-medium">{routingReasonLabel}</Label>
-        <p className="text-default bg-muted rounded-md px-3 py-2 text-sm">
-          {routingReason || noRoutingReasonText}
-        </p>
+        <div className="text-default bg-muted flex items-center gap-2 rounded-md px-3 py-2 text-sm">
+          {routingReasonEnum && (
+            <Badge variant="gray" className="shrink-0">
+              {t(assignmentReasonBadgeTitleMap(routingReasonEnum))}
+            </Badge>
+          )}
+          <span className="flex-1">{routingReason || noRoutingReasonText}</span>
+        </div>
       </div>
 
       <div>
@@ -212,16 +239,15 @@ export function WrongAssignmentDialog(props: IWrongAssignmentDialog): JSX.Elemen
   const { t } = useLocale();
   const utils = trpc.useUtils();
   const { copyToClipboard, isCopied } = useCopy();
-  const {
-    isOpenDialog,
-    setIsOpenDialog,
-    bookingUid,
-    routingReason,
-    guestEmail,
-    hostEmail,
-    hostName,
-    teamId,
-  } = props;
+  const { isOpenDialog, setIsOpenDialog, booking } = props;
+
+  const bookingUid = booking.uid;
+  const teamId = booking.eventType?.team?.id ?? null;
+  const routingReason = booking.assignmentReasonSortedByCreatedAt[0]?.reasonString ?? null;
+  const routingReasonEnum = booking.assignmentReasonSortedByCreatedAt[0]?.reasonEnum ?? null;
+  const guestEmail = booking.attendees[0]?.email ?? "";
+  const hostEmail = booking.user?.email ?? "";
+  const hostName = booking.user?.name ?? null;
 
   const {
     control,
@@ -286,8 +312,9 @@ export function WrongAssignmentDialog(props: IWrongAssignmentDialog): JSX.Elemen
 
               <RoutingInfoSection
                 routingReason={routingReason}
+                routingReasonEnum={routingReasonEnum}
                 noRoutingReasonText={t("no_routing_reason")}
-                routingReasonLabel={t("routing_reason")}
+                routingReasonLabel={t("first_assignment_reason")}
                 guestEmail={guestEmail}
                 whoBookedItLabel={t("who_booked_it")}
                 hostEmail={hostEmail}

apps/web/modules/bookings/components/BookingDetailsSheet.tsx

@@ -215,7 +215,7 @@ function BookingDetailsSheetInner({
         .map(([question, answer]) => [question, answer] as [string, unknown])
     : [];
 
-  const reason = booking.assignmentReason?.[0];
+  const reason = booking.assignmentReasonSortedByCreatedAt?.[booking.assignmentReasonSortedByCreatedAt.length - 1];
   const reasonTitle = reason && assignmentReasonBadgeTitleMap(reason.reasonEnum);
 
   return (
@@ -597,12 +597,12 @@ function RecurringInfoSection({
 function AssignmentReasonSection({ booking }: { booking: BookingOutput }) {
   const { t } = useLocale();
 
-  if (!booking.assignmentReason || booking.assignmentReason.length === 0) {
+  if (!booking.assignmentReasonSortedByCreatedAt || booking.assignmentReasonSortedByCreatedAt.length === 0) {
     return null;
   }
 
-  // we fetch only one assignment reason.
-  const reason = booking.assignmentReason[0];
+  const reason =
+    booking.assignmentReasonSortedByCreatedAt[booking.assignmentReasonSortedByCreatedAt.length - 1];
   if (!reason.reasonString) {
     return null;
   }

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

@@ -848,6 +848,7 @@
   "wrong_assignment_reported": "Wrong assignment reported successfully",
   "wrong_assignment_already_reported": "A wrong assignment report has already been submitted for this booking.",
   "routing_reason": "Routing Reason",
+  "first_assignment_reason": "First Assignment Reason",
   "no_routing_reason": "No routing reason available",
   "who_booked_it": "Who booked it?",
   "who_received_it": "Who received it?",

packages/features/bookings/repositories/BookingRepository.ts

@@ -2123,27 +2123,33 @@ export class BookingRepository implements IBookingRepository {
     });
   }
 
-  async findByUidIncludeEventTypeAndTeamAndAssignmentReason({ bookingUid }: { bookingUid: string }) {
+  async updateRecordedStatus({
+    bookingUid,
+    isRecorded,
+  }: {
+    bookingUid: string;
+    isRecorded: boolean;
+  }): Promise<void> {
+    await this.prismaClient.booking.update({
+      where: { uid: bookingUid },
+      data: { isRecorded },
+    });
+  }
+
+  async findByUidIncludeUserAndEventTypeTeamAndAttendeesAndAssignmentReason({ bookingUid }: { bookingUid: string }) {
     return await this.prismaClient.booking.findUnique({
-      where: {
-        uid: bookingUid,
-      },
+      where: { uid: bookingUid },
       select: {
         id: true,
         uid: true,
         title: true,
         startTime: true,
         endTime: true,
         status: true,
+        userId: true,
         user: {
           select: {
             id: true,
-            name: true,
-            email: true,
-          },
-        },
-        attendees: {
-          select: {
             email: true,
             name: true,
           },
@@ -2153,13 +2159,26 @@ export class BookingRepository implements IBookingRepository {
             id: true,
             title: true,
             slug: true,
-            teamId: true,
+            team: {
+              select: {
+                id: true,
+                parentId: true,
+              },
+            },
+          },
+        },
+        attendees: {
+          select: {
+            email: true,
           },
         },
         assignmentReason: {
           select: {
             reasonString: true,
-            reasonEnum: true,
+          },
+          take: 1,
+          orderBy: {
+            createdAt: "asc" as const,
           },
         },
         routedFromRoutingFormReponse: {
@@ -2170,17 +2189,4 @@ export class BookingRepository implements IBookingRepository {
       },
     });
   }
-
-  async updateRecordedStatus({
-    bookingUid,
-    isRecorded,
-  }: {
-    bookingUid: string;
-    isRecorded: boolean;
-  }): Promise<void> {
-    await this.prismaClient.booking.update({
-      where: { uid: bookingUid },
-      data: { isRecorded },
-    });
-  }
 }

packages/trpc/server/routers/viewer/bookings/get.handler.ts

@@ -631,9 +631,8 @@ export async function getBookings({
               .selectFrom("AssignmentReason")
               .selectAll()
               .whereRef("AssignmentReason.bookingId", "=", "Booking.id")
-              .orderBy("AssignmentReason.createdAt", "desc")
-              .limit(1)
-          ).as("assignmentReason"),
+              .orderBy("AssignmentReason.createdAt", "asc")
+          ).as("assignmentReasonSortedByCreatedAt"),
           jsonObjectFrom(
             eb
               .selectFrom("BookingReport")