fix: Keep 'Verify new route' enabled in the initial state. (#17295)

apps/web/components/dialog/RerouteDialog.tsx

@@ -278,7 +278,10 @@ const NewRoutingManager = ({
   const router = useRouter();
   const bookerUrl = useBookerUrl();
   const teamMemberIdsMatchingAttributeLogic =
-    teamMembersMatchingAttributeLogic?.data?.map((member) => member.id) || null;
+    teamMembersMatchingAttributeLogic?.data?.map((member) => member.id).filter((id) => {
+      // We don't want to reroute to the same user who booked the booking
+      return id !== booking.user?.id;
+    }) || null;
   const routedFromRoutingFormReponseId = booking.routedFromRoutingFormReponse.id;
 
   const bookingEventType = booking.eventType;
@@ -696,10 +699,13 @@ const RerouteDialogContentAndFooter = ({
 }: Pick<RerouteDialogProps, "isOpenDialog" | "setIsOpenDialog"> & {
   booking: TeamEventTypeBookingToReroute;
 }) => {
-  const { data: responseWithForm, isPending: isRoutingFormLoading, error: formResponseFetchError } =
-    trpc.viewer.appRoutingForms.getResponseWithFormFields.useQuery({
-      formResponseId: booking.routedFromRoutingFormReponse.id,
-    });
+  const {
+    data: responseWithForm,
+    isPending: isRoutingFormLoading,
+    error: formResponseFetchError,
+  } = trpc.viewer.appRoutingForms.getResponseWithFormFields.useQuery({
+    formResponseId: booking.routedFromRoutingFormReponse.id,
+  });
 
   const { t } = useLocale();
 
@@ -840,10 +846,7 @@ const RerouteDialogContentAndFooterWithFormResponse = ({
           <Button
             onClick={verifyRoute}
             data-testid="verify-new-route-button"
-            disabled={
-              reroutingState.status === ReroutingStatusEnum.REROUTING_IN_PROGRESS ||
-              isResponseFromOrganizerUnpopulated
-            }>
+            disabled={reroutingState.status === ReroutingStatusEnum.REROUTING_IN_PROGRESS}>
             {t("verify_new_route")}
           </Button>
         </DialogFooter>

apps/web/components/dialog/__tests__/RerouteDialog.test.tsx

@@ -176,6 +176,11 @@ vi.mock("@calcom/trpc/react", () => ({
                       name: "Matching User 1",
                       email: "matching-user-1@example.com",
                     },
+                    {
+                      id: 2,
+                      name: "Matching User 2",
+                      email: "matching-user-2@example.com",
+                    },
                   ],
                 });
               }),
@@ -244,10 +249,6 @@ async function mockMessageFromOpenedTab({ type, data }: { type: string; data: an
   return messageReceivedPromise;
 }
 
-function correctResponses() {
-  fireEvent.click(screen.getByTestId("mock-form-update-response-button"));
-}
-
 function expectEventTypeInfoInCurrentRouting({
   eventTypeText,
   eventTypeHref,
@@ -281,7 +282,7 @@ function expectAttendeesInfoInCurrentRouting({ attendeesText }: { attendeesText:
   const attendeesEl = screen.getByTestId("current-routing-status-attendees");
   expect(attendeesEl).toHaveTextContent(attendeesText);
 }
-
+const userWhoBooked = { id: 1, name: "Test User", email: "user@example.com" };
 const mockBooking = {
   id: 1,
   uid: "original-booking-uid",
@@ -298,7 +299,7 @@ const mockBooking = {
     schedulingType: SchedulingType.ROUND_ROBIN,
     title: "Test Event",
   },
-  user: { id: 1, name: "Test User", email: "user@example.com" },
+  user: userWhoBooked,
   routedFromRoutingFormReponse: { id: 1 },
   status: BookingStatus.ACCEPTED, // Add this line
 };
@@ -348,10 +349,8 @@ describe("RerouteDialog", () => {
     // screen.logTestingPlaygroundURL()
   });
 
-  test("verify_new_route button is disabled when form fields are not filled", async () => {
+  test("verify_new_route button is enabled even when form fields are not filled", async () => {
     render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
-    expect(screen.getByText("verify_new_route")).toBeDisabled();
-    correctResponses();
     expect(screen.getByText("verify_new_route")).toBeEnabled();
   });
 
@@ -383,8 +382,6 @@ describe("RerouteDialog", () => {
       render(
         <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
       );
-      // Enables verify_new_route button
-      correctResponses();
       fireEvent.click(screen.getByText("verify_new_route"));
 
       expectEventTypeInfoInReroutePreview({
@@ -404,8 +401,6 @@ describe("RerouteDialog", () => {
         render(
           <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
         );
-        // Enables verify_new_route button
-        correctResponses();
         clickVerifyNewRouteButton();
         clickRescheduleToTheNewEventWithDifferentTimeslotButton();
         await mockMessageFromOpenedTab({
@@ -421,6 +416,8 @@ describe("RerouteDialog", () => {
           expect.objectContaining({
             rescheduleUid: mockBooking.uid,
             "cal.rerouting": "true",
+            // Shouldn't include the user who booked the booking
+            "cal.routedTeamMemberIds": "2",
             "cal.reroutingFormResponses": JSON.stringify({
               "company-size": {
                 value: "small",
@@ -443,13 +440,13 @@ describe("RerouteDialog", () => {
         render(
           <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
         );
-        // Enables verify_new_route button
-        correctResponses();
         clickVerifyNewRouteButton();
         clickRescheduleWithSameTimeslotOfChosenEventButton();
         expect(mockMutateFn).toHaveBeenCalledWith(
           expect.objectContaining({
             rescheduleUid: mockBooking.uid,
+            // Shouldn't include the user who booked the booking
+            routedTeamMemberIds: [2],
             reroutingFormResponses: {
               "company-size": {
                 value: "small",