fix: Custom Event Redirect in Routing Form with Dropdown Based fields

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

@@ -51,6 +51,7 @@ function mockEventTypeRedirectUrlMatchingRoute() {
     action: {
       type: "eventTypeRedirectUrl",
       value: "john/30min",
+      eventTypeId: 123,
     },
   });
 }
@@ -421,5 +422,62 @@ describe("TestFormDialog", () => {
       // When we support showing matching route we can add this back
       // expect(screen.getByTestId("chosen-route")).toHaveTextContent("Route 2");
     });
+
+    it("should substitute variables in event redirect URL", async () => {
+      // Mock a route with variables using the name field that already exists
+      mockMatchingRoute({
+        action: {
+          type: "eventTypeRedirectUrl",
+          value: "/team/{name}/meeting",
+        },
+      });
+
+      render(
+        <TestFormRenderer
+          isMobile={true}
+          testForm={mockRegularTeamForm}
+          isTestPreviewOpen={true}
+          setIsTestPreviewOpen={() => {
+            return;
+          }}
+        />
+      );
+
+      // Fill in the name field
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "Sales Team" } });
+      fireEvent.click(screen.getByText("submit"));
+
+      // Verify the URL shows the substituted value, not the variable
+      expect(screen.getByTestId("test-routing-result")).toHaveTextContent("/team/sales-team/meeting");
+      expect(screen.getByTestId("test-routing-result")).not.toHaveTextContent("{name}");
+    });
+
+    it("should NOT substitute variables in external redirect URL", async () => {
+      // Mock a route with variables for external redirect
+      mockMatchingRoute({
+        action: {
+          type: "externalRedirectUrl",
+          value: "https://example.com/user/{name}",
+        },
+      });
+
+      render(
+        <TestFormRenderer
+          isMobile={true}
+          testForm={mockRegularTeamForm}
+          isTestPreviewOpen={true}
+          setIsTestPreviewOpen={() => {
+            return;
+          }}
+        />
+      );
+
+      fireEvent.change(screen.getByTestId("form-field-name"), { target: { value: "John Doe" } });
+      fireEvent.click(screen.getByText("submit"));
+
+      // Verify the URL shows the variable as-is, without substitution
+      expect(screen.getByTestId("test-routing-result")).toHaveTextContent("https://example.com/user/{name}");
+      expect(screen.getByTestId("test-routing-result")).not.toHaveTextContent("john-doe");
+    });
   });
 });

packages/app-store/routing-forms/api/responses/[formId].ts

@@ -4,29 +4,14 @@ import { getSession } from "next-auth/react";
 
 import { sanitizeValue } from "@calcom/lib/csvUtils";
 import { entityPrismaWhereClause, canEditEntity } from "@calcom/lib/entityPermissionUtils.server";
+import { getHumanReadableFieldResponseValue } from "@calcom/lib/server/service/routingForm/responseData/getHumanReadableFieldResponseValue";
 import prisma from "@calcom/prisma";
 
 import { getSerializableForm } from "../../lib/getSerializableForm";
-import { ensureStringOrStringArray, getLabelsFromOptionIds } from "../../lib/reportingUtils";
 import type { FormResponse, SerializableForm } from "../../types/types";
 
 type Fields = NonNullable<SerializableForm<App_RoutingForms_Form>["fields"]>;
 
-function getHumanReadableFieldResponseValue({
-  field,
-  value,
-}: {
-  field: Fields[number];
-  value: string | number | string[];
-}) {
-  if (field.options) {
-    const optionIds = ensureStringOrStringArray(value);
-    return getLabelsFromOptionIds({ options: field.options, optionIds });
-  } else {
-    return (value instanceof Array ? value : [value]).map(String);
-  }
-}
-
 async function* getResponses(formId: string, fields: Fields) {
   let responses;
   let skip = 0;
@@ -50,7 +35,10 @@ async function* getResponses(formId: string, fields: Fields) {
       fields.forEach((field) => {
         const fieldResponse = fieldResponses[field.id];
         const value = fieldResponse?.value || "";
-        const readableValues = getHumanReadableFieldResponseValue({ field, value });
+        const humanReadableResponseValue = getHumanReadableFieldResponseValue({ field, value });
+        const readableValues = Array.isArray(humanReadableResponseValue)
+          ? humanReadableResponseValue
+          : [humanReadableResponseValue];
         const serializedValue = readableValues.map((value) => sanitizeValue(value)).join(" | ");
         csvCells.push(serializedValue);
       });

packages/app-store/routing-forms/components/_components/TestForm.tsx

@@ -16,8 +16,8 @@ import { showToast } from "@calcom/ui/components/toast";
 
 import { TRPCClientError } from "@trpc/react-query";
 
-import { getAbsoluteEventTypeRedirectUrl } from "../../getEventTypeRedirectUrl";
 import { findMatchingRoute } from "../../lib/processRoute";
+import { substituteVariables } from "../../lib/substituteVariables";
 import type { SingleFormComponentProps } from "../../types/shared";
 import type { RoutingForm, FormResponse, NonRouterRoute } from "../../types/types";
 import FormInputFields from "../FormInputFields";
@@ -92,7 +92,6 @@ export const TestForm = ({
   const { t } = useLocale();
   const [response, setResponse] = useState<FormResponse>({});
   const [chosenRoute, setChosenRoute] = useState<NonRouterRoute | null>(null);
-  const [eventTypeUrlWithoutParams, setEventTypeUrlWithoutParams] = useState("");
   const searchParams = useCompatSearchParams();
   const [membersMatchResult, setMembersMatchResult] = useState<MembersMatchResultType | null>(null);
   const [showResults, setShowResults] = useState(false);
@@ -128,25 +127,27 @@ export const TestForm = ({
 
   function testRouting() {
     const route = findMatchingRoute({ form, response });
-    let eventTypeRedirectUrl: string | null = null;
 
-    if (route?.action?.type === "eventTypeRedirectUrl") {
-      if ("team" in form) {
-        eventTypeRedirectUrl = getAbsoluteEventTypeRedirectUrl({
-          eventTypeRedirectUrl: route.action.value,
-          form,
-          allURLSearchParams: new URLSearchParams(),
-        });
-        setEventTypeUrlWithoutParams(eventTypeRedirectUrl);
-      }
+    // Create a copy of the route with substituted variables for display
+    let displayRoute = route;
+    if (route && form.fields && route.action.type === "eventTypeRedirectUrl") {
+      const substitutedUrl = substituteVariables(route.action.value, response, form.fields);
+      displayRoute = {
+        ...route,
+        action: {
+          ...route.action,
+          value: substitutedUrl,
+        },
+      };
     }
 
-    setChosenRoute(route || null);
+    setChosenRoute(displayRoute || null);
     setShowResults(true);
 
     if (!route) return;
 
-    if (supportsTeamMembersMatchingLogic) {
+    // Custom Event Type Redirect URL has eventTypeId=0. Also, findTeamMembersMatchingAttributeLogicMutation can't work without eventTypeId
+    if (supportsTeamMembersMatchingLogic && route.action.eventTypeId) {
       findTeamMembersMatchingAttributeLogicMutation.mutate({
         formId: form.id,
         response,