feat: add wrong assignment report dialog and webhook for routing form bookings (calcom#25839)

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

Author: PeerRich

apps/web/components/booking/BookingListItem.tsx

@@ -40,6 +40,7 @@ import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
 
+import { WrongAssignmentDialog } from "../dialog/WrongAssignmentDialog";
 import { buildBookingLink } from "../../modules/bookings/lib/buildBookingLink";
 import { useBookingDetailsSheetStore } from "../../modules/bookings/store/bookingDetailsSheetStore";
 import type { BookingAttendee } from "../../modules/bookings/types";
@@ -273,6 +274,12 @@ function BookingListItem(booking: BookingItemProps) {
 
   const setIsOpenReportDialog = useBookingActionsStoreContext((state) => state.setIsOpenReportDialog);
   const setIsCancelDialogOpen = useBookingActionsStoreContext((state) => state.setIsCancelDialogOpen);
+  const isOpenWrongAssignmentDialog = useBookingActionsStoreContext(
+    (state) => state.isOpenWrongAssignmentDialog
+  );
+  const setIsOpenWrongAssignmentDialog = useBookingActionsStoreContext(
+    (state) => state.setIsOpenWrongAssignmentDialog
+  );
 
   const reportAction = getReportAction(actionContext);
   const reportActionWithHandler = {
@@ -512,7 +519,22 @@ function BookingListItem(booking: BookingItemProps) {
         userTimeFormat={userTimeFormat}
         userTimeZone={userTimeZone}
         isRescheduled={isRescheduled}
+        onAssignmentReasonClick={
+          isBookingFromRoutingForm ? () => setIsOpenWrongAssignmentDialog(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}
+        />
+      )}
     </div>
   );
 }
@@ -525,6 +547,7 @@ const BookingItemBadges = ({
   userTimeFormat,
   userTimeZone,
   isRescheduled,
+  onAssignmentReasonClick,
 }: {
   booking: BookingItemProps;
   isPending: boolean;
@@ -533,6 +556,7 @@ const BookingItemBadges = ({
   userTimeFormat: number | null | undefined;
   userTimeZone: string | undefined;
   isRescheduled: boolean;
+  onAssignmentReasonClick?: () => void;
 }) => {
   const { t } = useLocale();
 
@@ -561,7 +585,10 @@ const BookingItemBadges = ({
         </Badge>
       )}
       {booking?.assignmentReason.length > 0 && (
-        <AssignmentReasonTooltip assignmentReason={booking.assignmentReason[0]} />
+        <AssignmentReasonTooltip
+          assignmentReason={booking.assignmentReason[0]}
+          onClick={onAssignmentReasonClick}
+        />
       )}
       {booking.report && (
         <Tooltip
@@ -1092,12 +1119,21 @@ const DisplayAttendees = ({
   );
 };
 
-const AssignmentReasonTooltip = ({ assignmentReason }: { assignmentReason: AssignmentReason }) => {
+const AssignmentReasonTooltip = ({
+  assignmentReason,
+  onClick,
+}: {
+  assignmentReason: AssignmentReason;
+  onClick?: () => void;
+}) => {
   const { t } = useLocale();
   const badgeTitle = assignmentReasonBadgeTitleMap(assignmentReason.reasonEnum);
   return (
     <Tooltip content={<p>{assignmentReason.reasonString}</p>}>
-      <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+      <Badge
+        className={classNames("ltr:mr-2 rtl:ml-2", onClick && "cursor-pointer hover:opacity-80")}
+        variant="gray"
+        onClick={onClick}>
         {t(badgeTitle)}
       </Badge>
     </Tooltip>

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

@@ -31,6 +31,7 @@ import { RejectionReasonDialog } from "@components/dialog/RejectionReasonDialog"
 import { ReportBookingDialog } from "@components/dialog/ReportBookingDialog";
 import { RerouteDialog } from "@components/dialog/RerouteDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
+import { WrongAssignmentDialog } from "@components/dialog/WrongAssignmentDialog";
 
 import { useBookingConfirmation } from "../hooks/useBookingConfirmation";
 import type { BookingItemProps } from "../types";
@@ -118,6 +119,12 @@ export function BookingActionsDropdown({
   const setIsOpenAddGuestsDialog = useBookingActionsStoreContext((state) => state.setIsOpenAddGuestsDialog);
   const isOpenReportDialog = useBookingActionsStoreContext((state) => state.isOpenReportDialog);
   const setIsOpenReportDialog = useBookingActionsStoreContext((state) => state.setIsOpenReportDialog);
+  const isOpenWrongAssignmentDialog = useBookingActionsStoreContext(
+    (state) => state.isOpenWrongAssignmentDialog
+  );
+  const setIsOpenWrongAssignmentDialog = useBookingActionsStoreContext(
+    (state) => state.setIsOpenWrongAssignmentDialog
+  );
   const rerouteDialogIsOpen = useBookingActionsStoreContext((state) => state.rerouteDialogIsOpen);
   const setRerouteDialogIsOpen = useBookingActionsStoreContext((state) => state.setRerouteDialogIsOpen);
   const isCancelDialogOpen = useBookingActionsStoreContext((state) => state.isCancelDialogOpen);
@@ -440,6 +447,18 @@ export function BookingActionsDropdown({
         isRecurring={isRecurring}
         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}
+        />
+      )}
       {booking.paid && booking.payment[0] && (
         <ChargeCardDialog
           isOpenDialog={chargeCardDialogIsOpen}
@@ -683,6 +702,21 @@ export function BookingActionsDropdown({
                   {reportActionWithHandler.label}
                 </DropdownItem>
               </DropdownMenuItem>
+              {isBookingFromRoutingForm && (
+                <DropdownMenuItem className="rounded-lg" key="report_wrong_assignment">
+                  <DropdownItem
+                    type="button"
+                    color="destructive"
+                    StartIcon="user-x"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsOpenWrongAssignmentDialog(true);
+                    }}
+                    data-testid="report_wrong_assignment">
+                    {t("report_wrong_assignment")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              )}
             </>
             <DropdownMenuSeparator />
             <DropdownMenuItem

apps/web/components/booking/actions/store.ts

@@ -17,6 +17,7 @@ export type BookingActionsStore = {
   isOpenReportDialog: boolean;
   rerouteDialogIsOpen: boolean;
   isCancelDialogOpen: boolean;
+  isOpenWrongAssignmentDialog: boolean;
 
   // Dialog setters
   setRejectionDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -31,6 +32,7 @@ export type BookingActionsStore = {
   setIsOpenReportDialog: React.Dispatch<React.SetStateAction<boolean>>;
   setRerouteDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsCancelDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenWrongAssignmentDialog: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const createBookingActionsStore = () => {
@@ -48,6 +50,7 @@ export const createBookingActionsStore = () => {
     isOpenReportDialog: false,
     rerouteDialogIsOpen: false,
     isCancelDialogOpen: false,
+    isOpenWrongAssignmentDialog: false,
 
     // Dialog setters
     setRejectionDialogIsOpen: (isOpen) =>
@@ -101,5 +104,10 @@ export const createBookingActionsStore = () => {
       set((state) => ({
         isCancelDialogOpen: typeof isOpen === "function" ? isOpen(state.isCancelDialogOpen) : isOpen,
       })),
+    setIsOpenWrongAssignmentDialog: (isOpen) =>
+      set((state) => ({
+        isOpenWrongAssignmentDialog:
+          typeof isOpen === "function" ? isOpen(state.isOpenWrongAssignmentDialog) : isOpen,
+      })),
   }));
 };