fix: Test preview - Routing forms crash for regular teams(that are not sub-teams) (#19353)

apps/web/modules/insights/insights-virtual-queues-view.tsx

@@ -38,7 +38,11 @@ export default function InsightsVirtualQueuesPage() {
         value={selectedForm ? { label: selectedForm.name, value: selectedForm.id } : undefined}
       />
       <div className="mt-10">
-        {selectedForm ? <TestForm form={selectedForm} showAllData={false} /> : <></>}
+        {selectedForm ? (
+          <TestForm form={selectedForm} supportsTeamMembersMatchingLogic={true} showAllData={false} />
+        ) : (
+          <></>
+        )}
       </div>
     </>
   );

packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx

@@ -112,7 +112,7 @@ vi.mock("@calcom/trpc/react", () => ({
   },
 }));
 
-const mockTeamForm = {
+const mockSubTeamForm = {
   id: "routing-form-id",
   teamId: "test-team-id",
   name: "Test Form",
@@ -152,6 +152,16 @@ const mockTeamForm = {
       },
     },
   ],
+  team: {
+    parentId: "org-1",
+  },
+} as any;
+
+const mockRegularTeamForm = {
+  ...mockSubTeamForm,
+  team: {
+    parentId: null,
+  },
 } as any;
 
 describe("TestFormDialog", () => {
@@ -163,7 +173,7 @@ describe("TestFormDialog", () => {
   it("renders the dialog when open", () => {
     render(
       <TestFormDialog
-        form={mockTeamForm}
+        form={mockSubTeamForm}
         isTestPreviewOpen={true}
         setIsTestPreviewOpen={() => {
           return;
@@ -178,7 +188,7 @@ describe("TestFormDialog", () => {
   it("doesn't render the dialog when closed", () => {
     render(
       <TestFormDialog
-        form={mockTeamForm}
+        form={mockSubTeamForm}
         isTestPreviewOpen={false}
         setIsTestPreviewOpen={() => {
           return;
@@ -192,7 +202,7 @@ describe("TestFormDialog", () => {
   it("renders form fields", () => {
     render(
       <TestFormDialog
-        form={mockTeamForm}
+        form={mockSubTeamForm}
         isTestPreviewOpen={true}
         setIsTestPreviewOpen={() => {
           return;
@@ -203,12 +213,13 @@ describe("TestFormDialog", () => {
     expect(screen.getByTestId("form-field-name")).toBeInTheDocument();
   });
 
-  describe("Team Form", () => {
+  describe("Sub-Team Form", () => {
+    const form = mockSubTeamForm;
     it("submits the form and shows test results for Custom Page", async () => {
       mockCustomPageMessageMatchingRoute();
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -227,7 +238,7 @@ describe("TestFormDialog", () => {
       mockEventTypeRedirectUrlMatchingRoute();
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -257,7 +268,7 @@ describe("TestFormDialog", () => {
       });
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -287,7 +298,7 @@ describe("TestFormDialog", () => {
       });
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -313,7 +324,7 @@ describe("TestFormDialog", () => {
       });
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -339,7 +350,7 @@ describe("TestFormDialog", () => {
       });
       render(
         <TestFormDialog
-          form={mockTeamForm}
+          form={form}
           isTestPreviewOpen={true}
           setIsTestPreviewOpen={() => {
             return;
@@ -356,11 +367,53 @@ describe("TestFormDialog", () => {
     });
   });
 
+  describe("Regular Team Form", () => {
+    const form = mockRegularTeamForm;
+    it("submits the form and shows test results for Custom Page", async () => {
+      mockCustomPageMessageMatchingRoute();
+      render(
+        <TestFormDialog
+          form={mockRegularTeamForm}
+          isTestPreviewOpen={true}
+          setIsTestPreviewOpen={() => {
+            return;
+          }}
+        />
+      );
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("test_routing"));
+
+      expect(screen.getByText("route_to:")).toBeInTheDocument();
+      expect(screen.getByTestId("test-routing-result-type")).toHaveTextContent("Custom Page");
+      expect(screen.getByTestId("test-routing-result")).toHaveTextContent("Thank you for submitting!");
+    });
+
+    it("submits the form and shows test results for Event Type", async () => {
+      mockEventTypeRedirectUrlMatchingRoute();
+      render(
+        <TestFormDialog
+          form={form}
+          isTestPreviewOpen={true}
+          setIsTestPreviewOpen={() => {
+            return;
+          }}
+        />
+      );
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("test_routing"));
+      expect(screen.getByText("route_to:")).toBeInTheDocument();
+      expect(screen.getByTestId("test-routing-result-type")).toHaveTextContent("Event Redirect");
+      expect(screen.getByTestId("test-routing-result")).toHaveTextContent("john/30min");
+      // When we support showing matching route we can add this back
+      // expect(screen.getByTestId("chosen-route")).toHaveTextContent("Route 2");
+    });
+  });
+
   it("closes the dialog when close button is clicked", () => {
     const setIsTestPreviewOpen = vi.fn();
     render(
       <TestFormDialog
-        form={mockTeamForm}
+        form={mockSubTeamForm}
         isTestPreviewOpen={true}
         setIsTestPreviewOpen={setIsTestPreviewOpen}
       />

packages/app-store/routing-forms/components/SingleForm.tsx

@@ -443,10 +443,12 @@ type UptoDateForm = Brand<
 
 export const TestForm = ({
   form,
+  supportsTeamMembersMatchingLogic,
   showAllData = true,
   renderFooter,
 }: {
   form: UptoDateForm | RoutingForm;
+  supportsTeamMembersMatchingLogic: boolean;
   showAllData?: boolean;
   renderFooter?: (onClose: () => void) => React.ReactNode;
 }) => {
@@ -455,7 +457,6 @@ export const TestForm = ({
   const [chosenRoute, setChosenRoute] = useState<NonRouterRoute | null>(null);
   const [eventTypeUrlWithoutParams, setEventTypeUrlWithoutParams] = useState("");
   const searchParams = useCompatSearchParams();
-  const isTeamForm = !!form.teamId;
   const [membersMatchResult, setMembersMatchResult] = useState<MembersMatchResultType | null>(null);
 
   const resetMembersMatchResult = () => {
@@ -504,7 +505,7 @@ export const TestForm = ({
 
     if (!route) return;
 
-    if (isTeamForm) {
+    if (supportsTeamMembersMatchingLogic) {
       findTeamMembersMatchingAttributeLogicMutation.mutate({
         formId: form.id,
         response,
@@ -528,7 +529,7 @@ export const TestForm = ({
     };
 
     const renderTeamMembersMatchResult = (showAllData: boolean, isPending: boolean) => {
-      if (!isTeamForm) return null;
+      if (!supportsTeamMembersMatchingLogic) return null;
       if (isPending) return <div>Loading...</div>;
 
       return (
@@ -649,7 +650,7 @@ export const TestFormDialog = ({
   setIsTestPreviewOpen: (value: boolean) => void;
 }) => {
   const { t } = useLocale();
-
+  const isSubTeamForm = !!form.team?.parentId;
   return (
     <Dialog open={isTestPreviewOpen} onOpenChange={setIsTestPreviewOpen}>
       <DialogContent size="md" enableOverflow>
@@ -657,6 +658,7 @@ export const TestFormDialog = ({
         <div>
           <TestForm
             form={form}
+            supportsTeamMembersMatchingLogic={isSubTeamForm}
             renderFooter={(onClose) => (
               <DialogFooter>
                 <DialogClose

packages/trpc/server/routers/viewer/routing-forms/findTeamMembersMatchingAttributeLogicOfRoute.handler.ts

@@ -1,5 +1,6 @@
 /**
- * This route is used only by "Test Preview" button
+ * This route is used only by "Test Preview" button and Virtual Queues
+ * Also, it is applicable only for sub-teams. Regular teams and user Routing Forms don't hit this endpoint.
  * Live mode uses findTeamMembersMatchingAttributeLogicOfRoute fn directly
  */
 import type { App_RoutingForms_Form } from "@prisma/client";