feat: Support Attribute Logic fallback (#17290)

* Add fallback

* Support attribute query fallback

* Refactor

* Add tests and cleanup SingleFofrm

* small text fixes

* With fallback in picture, we dont throw error in preview now instead we capture errors and show them gracefully

* Get attribute logic preview working without saving Fixes CAL-4582

* Abstract useRoutes out

* Update e2e

* Dont define Page component again and again

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

Author: hariombalhara

apps/web/components/dialog/RerouteDialog.tsx

@@ -798,7 +798,7 @@ const RerouteDialogContentAndFooterWithFormResponse = ({
     findTeamMembersMatchingAttributeLogicMutation.mutate({
       formId: form.id,
       response: currentResponse,
-      routeId: route.id,
+      route,
     });
   }
 

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

@@ -2660,6 +2660,7 @@
   "you_are_unauthorized_to_make_this_change_to_the_booking": "You are unauthorized to make this change to the booking",
   "matching_members": "Matching members",
   "no_matching_members": "No matching members. It will fallback to using the team members assigned to the event type.",
+  "no_matching_members_will_fallback_to_all_assigned_members": "No matching members. It will fallback to using the team members assigned to the event type. Consider adding a fallback or correcting the logic of using_fallback_members",
   "hide_calendar_event_details": "Hide calendar event details on shared calendars",
   "description_hide_calendar_event_details": "When a calendar is shared, events are visible to readers but their details are hidden from those without write access.",
   "last_number_of_days": "last {{count}} days",
@@ -2707,6 +2708,17 @@
   "add_new_field": "Add new field",
   "you_dont_have_access_to_reroute_this_booking": "You don't have access to reroute this booking",
   "form_response_not_found": "Form response not found",
+  "using_fallback_members": "Using fallback members",
+  "chosen_route": "Chosen Route",
+  "attribute_logic_matched": "Attribute logic matched",
+  "attribute_logic_fallback_matched": "Attribute logic fallback matched",
+  "all_assigned_members_of_the_team_event_type_consider_adding_some_attribute_rules": "All assigned members of the team event type. Consider adding some attribute rules.",
+  "all_assigned_members_of_the_team_event_type_consider_adding_some_attribute_rules_to_fallback": "All assigned members of the team event type. Consider adding some attribute rules to fallback.",
+  "all_assigned_members_of_the_team_event_type_consider_tweaking_fallback_to_have_a_match": "All assigned members of the team event type. Consider tweaking fallback to have a match.",
+  "warning": "Warning",
+  "fallback_attribute_logic_description": "Fallback: If no Team Members match, use those that match the following criteria (matches all assigned team members of the event by default)",
+  "fallback_attribute_logic_warning": "Fallback warning",
+  "fallback_not_needed": "Not needed",
   "confirm_reassign_unavailable": "Host unavailable",
   "confirm_reassign_available": "Host available",
   "reassign_unavailable_team_member_description": "Are you sure you want to reassign this booking to an unavailable host?",

packages/app-store/routing-forms/TODO.md

@@ -74,6 +74,7 @@
 
 ### V2.0
 - [ ] Fallback for when no team member matches the criteria.
-    - Fallback will be attributes query builder that would match a different set of users. Though the booking will use the team members assigned to the event type, it might be better to be able to identify such a scenario and use a different set of users. It also makes it easy to identify when the fallback scenario happens.
+    - [x] Fallback will be attributes query builder that would match a different set of users. Though the booking will use the team members assigned to the event type, it might be better to be able to identify such a scenario and use a different set of users. It also makes it easy to identify when the fallback scenario happens.
+    - [ ] Mark if fallback was used by the router for a response. 
 - [ ] cal.routedTeamMembersIds query param - Could possible become a big payload and possibly break the URL limit. We could work on a short-lived row in a table that would hold that info and we pass the id of that row only in query param. handleNewBooking can then retrieve the routedTeamMembersIds from that short-lived row and delete the entry after successfully creating a booking.
 - [ ] Better ability to test with contact owner from Routing Form Preview itself(if possible). Right now, we need to test the entire booking flow to verify that.

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

@@ -0,0 +1,297 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import type { Mock } from "vitest";
+import { vi } from "vitest";
+
+import { TestFormDialog } from "../components/SingleForm";
+import { findMatchingRoute } from "../lib/processRoute";
+
+vi.mock("../lib/processRoute", () => ({
+  findMatchingRoute: vi.fn(),
+}));
+
+function mockMatchingRoute(route: any) {
+  (findMatchingRoute as Mock<typeof findMatchingRoute>).mockReturnValue({
+    ...route,
+    id: "matching-route-id",
+  });
+}
+
+function mockCustomPageMessageMatchingRoute() {
+  mockMatchingRoute({
+    action: {
+      type: "customPageMessage",
+      value: "Thank you for submitting!",
+    },
+  });
+}
+
+function mockEventTypeRedirectUrlMatchingRoute() {
+  mockMatchingRoute({
+    action: {
+      type: "eventTypeRedirectUrl",
+      value: "john/30min",
+    },
+  });
+}
+
+/**
+ * fixes the error due to Formbricks
+ */
+vi.mock("@calcom/ui", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+}));
+
+vi.mock("@calcom/features/shell/Shell", () => ({
+  ShellMain: vi.fn(),
+}));
+
+vi.mock("@calcom/lib/hooks/useApp", () => ({
+  default: vi.fn(),
+}));
+/**
+ *  Avoids the error due to Formbricks
+ */
+
+vi.mock("../components/FormActions", () => ({
+  FormAction: vi.fn(),
+  FormActionsDropdown: vi.fn(),
+  FormActionsProvider: vi.fn(),
+}));
+
+vi.mock("../../components/react-awesome-query-builder/widgets", () => ({
+  default: {},
+}));
+
+// Mock the necessary dependencies
+vi.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: vi.fn(() => ({ t: (key: string) => key })),
+}));
+
+let findTeamMembersMatchingAttributeLogicResponse: {
+  result: { email: string }[] | null;
+  checkedFallback: boolean;
+  mainWarnings?: string[] | null;
+  fallbackWarnings?: string[] | null;
+} = {
+  result: null,
+  checkedFallback: false,
+  mainWarnings: null,
+  fallbackWarnings: null,
+};
+
+function resetFindTeamMembersMatchingAttributeLogicResponse() {
+  findTeamMembersMatchingAttributeLogicResponse = {
+    result: null,
+    checkedFallback: false,
+    mainWarnings: null,
+    fallbackWarnings: null,
+  };
+}
+
+function mockFindTeamMembersMatchingAttributeLogicResponse(
+  response: typeof findTeamMembersMatchingAttributeLogicResponse
+) {
+  findTeamMembersMatchingAttributeLogicResponse = response;
+}
+
+vi.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    viewer: {
+      appRoutingForms: {
+        findTeamMembersMatchingAttributeLogic: {
+          useMutation: vi.fn(({ onSuccess }) => {
+            return {
+              mutate: vi.fn(() => {
+                onSuccess(findTeamMembersMatchingAttributeLogicResponse);
+              }),
+            };
+          }),
+        },
+      },
+    },
+  },
+}));
+
+const mockTeamForm = {
+  id: "routing-form-id",
+  teamId: "test-team-id",
+  name: "Test Form",
+  description: "Test form description",
+  fields: [
+    {
+      id: "name",
+      identifier: "name",
+      type: "text",
+      label: "Name",
+      required: true,
+    },
+  ],
+  routes: [
+    {
+      id: "non-matching-route-id",
+      isFallback: false,
+      action: {
+        type: "customPageMessage",
+        value: "Not matching",
+      },
+    },
+    {
+      id: "matching-route-id",
+      isFallback: false,
+      action: {
+        type: "customPageMessage",
+        value: "Thank you for submitting!",
+      },
+    },
+    {
+      id: "fallback-route",
+      isFallback: true,
+      action: {
+        type: "customPageMessage",
+        value: "Thank you for submitting!",
+      },
+    },
+  ],
+} as any;
+
+describe("TestFormDialog", () => {
+  beforeEach(() => {
+    resetFindTeamMembersMatchingAttributeLogicResponse();
+    vi.clearAllMocks();
+  });
+
+  it("renders the dialog when open", () => {
+    render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+
+    expect(screen.getByText("test_routing_form")).toBeInTheDocument();
+    expect(screen.getByText("test_preview_description")).toBeInTheDocument();
+  });
+
+  it("doesn't render the dialog when closed", () => {
+    render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={false} setIsTestPreviewOpen={() => {}} />);
+
+    expect(screen.queryByText("test_routing_form")).not.toBeInTheDocument();
+  });
+
+  it("renders form fields", () => {
+    render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+
+    expect(screen.getByTestId("form-field-name")).toBeInTheDocument();
+  });
+
+  describe("Team Form", () => {
+    it("submits the form and shows test results for Custom Page", async () => {
+      mockCustomPageMessageMatchingRoute();
+      render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      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={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      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");
+      expect(screen.getByTestId("chosen-route")).toHaveTextContent("Route 2");
+      expect(screen.getByTestId("attribute-logic-matched")).toHaveTextContent("yes");
+      expect(screen.getByTestId("attribute-logic-fallback-matched")).toHaveTextContent("fallback_not_needed");
+      expect(screen.getByTestId("matching-members")).toHaveTextContent(
+        "all_assigned_members_of_the_team_event_type_consider_adding_some_attribute_rules"
+      );
+    });
+
+    it("suggests to add fallback when matching members is empty and fallback is not checked", async () => {
+      mockEventTypeRedirectUrlMatchingRoute();
+      mockFindTeamMembersMatchingAttributeLogicResponse({
+        result: [],
+        checkedFallback: false,
+      });
+      render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      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");
+      expect(screen.getByTestId("chosen-route")).toHaveTextContent("Route 2");
+      expect(screen.getByTestId("attribute-logic-matched")).toHaveTextContent("yes");
+      expect(screen.getByTestId("attribute-logic-fallback-matched")).toHaveTextContent("fallback_not_needed");
+      expect(screen.getByTestId("matching-members")).toHaveTextContent(
+        "all_assigned_members_of_the_team_event_type_consider_tweaking_fallback_to_have_a_match"
+      );
+    });
+
+    it("shows warnings when there are warnings", async () => {
+      mockEventTypeRedirectUrlMatchingRoute();
+      mockFindTeamMembersMatchingAttributeLogicResponse({
+        result: null,
+        checkedFallback: false,
+        mainWarnings: ["Main-Error-1", "Main-Error-2"],
+        fallbackWarnings: ["Fallback-Error-1", "Fallback-Error-2"],
+      });
+      render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("test_routing"));
+      screen.logTestingPlaygroundURL();
+      const alerts = screen.getAllByTestId("alert");
+      expect(alerts).toHaveLength(2);
+      expect(alerts[0]).toHaveTextContent("Main-Error-1, Main-Error-2");
+      expect(alerts[1]).toHaveTextContent("Fallback-Error-1, Fallback-Error-2");
+    });
+
+    it("should not show warnings when there are no warnings", async () => {
+      mockEventTypeRedirectUrlMatchingRoute();
+      mockFindTeamMembersMatchingAttributeLogicResponse({
+        result: null,
+        checkedFallback: false,
+        mainWarnings: null,
+        fallbackWarnings: null,
+      });
+      render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("test_routing"));
+      screen.logTestingPlaygroundURL();
+      const alerts = screen.queryAllByTestId("alert");
+      expect(alerts).toHaveLength(0);
+    });
+
+    it("should show No in main and fallback matched", async () => {
+      mockEventTypeRedirectUrlMatchingRoute();
+      mockFindTeamMembersMatchingAttributeLogicResponse({
+        result: [],
+        checkedFallback: true,
+        mainWarnings: null,
+        fallbackWarnings: null,
+      });
+      render(<TestFormDialog form={mockTeamForm} isTestPreviewOpen={true} setIsTestPreviewOpen={() => {}} />);
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("test_routing"));
+      expect(screen.getByTestId("attribute-logic-matched")).toHaveTextContent("no");
+      expect(screen.getByTestId("attribute-logic-fallback-matched")).toHaveTextContent("no");
+      expect(screen.getByTestId("matching-members")).toHaveTextContent(
+        "all_assigned_members_of_the_team_event_type_consider_tweaking_fallback_to_have_a_match"
+      );
+    });
+  });
+
+  it("closes the dialog when close button is clicked", () => {
+    const setIsTestPreviewOpen = vi.fn();
+    render(
+      <TestFormDialog
+        form={mockTeamForm}
+        isTestPreviewOpen={true}
+        setIsTestPreviewOpen={setIsTestPreviewOpen}
+      />
+    );
+
+    fireEvent.click(screen.getByText("close"));
+
+    expect(setIsTestPreviewOpen).toHaveBeenCalledWith(false);
+  });
+});