feat: show routing trace dialog on assignment reason badge click (#27629)

* feat: show routing trace dialog on assignment reason badge click

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

* fix: remove duplicate RoutingTraceSheet rendering

- Remove RoutingTraceSheet from BookingListItem.tsx to avoid duplicate rendering
- Move RoutingTraceSheet in BookingActionsDropdown.tsx outside of isBookingFromRoutingForm condition
- Use booking.assignmentReason.length > 0 condition for RoutingTraceSheet rendering
- Remove unused isOpenRoutingTraceSheet getter and RoutingTraceSheet import from BookingListItem.tsx

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

---------

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

apps/web/components/booking/BookingListItem.tsx

@@ -280,6 +280,9 @@ function BookingListItem(booking: BookingItemProps) {
   const setIsOpenWrongAssignmentDialog = useBookingActionsStoreContext(
     (state) => state.setIsOpenWrongAssignmentDialog
   );
+  const setIsOpenRoutingTraceSheet = useBookingActionsStoreContext(
+    (state) => state.setIsOpenRoutingTraceSheet
+  );
   const reportAction = getReportAction(actionContext);
   const reportActionWithHandler = {
     ...reportAction,
@@ -549,7 +552,7 @@ function BookingListItem(booking: BookingItemProps) {
         userTimeZone={userTimeZone}
         isRescheduled={isRescheduled}
         onAssignmentReasonClick={
-          isBookingFromRoutingForm ? () => setIsOpenWrongAssignmentDialog(true) : undefined
+          booking.assignmentReason.length > 0 ? () => setIsOpenRoutingTraceSheet(true) : undefined
         }
       />
       {isBookingFromRoutingForm && (

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

@@ -455,23 +455,23 @@ export function BookingActionsDropdown({
         status={getBookingStatus()}
       />
       {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}
-          />
-          <RoutingTraceSheet
-            isOpen={isOpenRoutingTraceSheet}
-            setIsOpen={setIsOpenRoutingTraceSheet}
-            bookingUid={booking.uid}
-          />
-        </>
+        <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.assignmentReason.length > 0 && (
+        <RoutingTraceSheet
+          isOpen={isOpenRoutingTraceSheet}
+          setIsOpen={setIsOpenRoutingTraceSheet}
+          bookingUid={booking.uid}
+        />
       )}
       {booking.paid && booking.payment[0] && (
         <ChargeCardDialog

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

@@ -57,6 +57,7 @@ import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 import { useCalcomTheme } from "@calcom/ui/styles";
 import CancelBooking from "@calcom/web/components/booking/CancelBooking";
+import { RoutingTraceSheet } from "@calcom/web/components/booking/RoutingTraceSheet";
 import EventReservationSchema from "@calcom/web/components/schemas/EventReservationSchema";
 import { timeZone } from "@calcom/web/lib/clock";
 
@@ -203,6 +204,7 @@ export default function Success(props: PageProps) {
   const defaultRating = validateRating(rating);
   const [rateValue, setRateValue] = useState<number>(defaultRating);
   const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false);
+  const [isRoutingTraceSheetOpen, setIsRoutingTraceSheetOpen] = useState(false);
 
   const mutation = trpc.viewer.public.submitRating.useMutation({
     onSuccess: async () => {
@@ -773,7 +775,10 @@ export default function Success(props: PageProps) {
                             <>
                               <div className="mt-9 font-medium">{t("assignment_reason")}</div>
                               <div className="col-span-2 mb-2 mt-9">
-                                <Badge variant="gray" className="mb-2">
+                                <Badge
+                                  variant="gray"
+                                  className="mb-2 cursor-pointer hover:opacity-80"
+                                  onClick={() => setIsRoutingTraceSheetOpen(true)}>
                                   {t(
                                     assignmentReasonBadgeTitleMap(
                                       bookingInfo.assignmentReason[0].reasonEnum as AssignmentReasonEnum
@@ -785,6 +790,11 @@ export default function Success(props: PageProps) {
                                     {bookingInfo.assignmentReason[0].reasonString}
                                   </p>
                                 )}
+                                <RoutingTraceSheet
+                                  isOpen={isRoutingTraceSheetOpen}
+                                  setIsOpen={setIsRoutingTraceSheetOpen}
+                                  bookingUid={bookingInfo.uid}
+                                />
                               </div>
                             </>
                           )}