fix: Routing Forms - Forward Query Params and show the error message in case of validation error in headless router (#11338)

packages/app-store/routing-forms/pages/router/[...appPages].tsx

@@ -1,9 +1,11 @@
 import Head from "next/head";
+import { stringify } from "querystring";
 import z from "zod";
 
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import logger from "@calcom/lib/logger";
+import { TRPCError } from "@calcom/trpc";
 import type { AppGetServerSidePropsContext, AppPrisma } from "@calcom/types/AppGetServerSideProps";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 
@@ -92,11 +94,22 @@ export const getServerSideProps = async function getServerSideProps(
   const { default: trpcRouter } = await import("@calcom/app-store/routing-forms/trpc/_router");
   const caller = trpcRouter.createCaller(ctx);
   const { v4: uuidv4 } = await import("uuid");
-  await caller.public.response({
-    formId: form.id,
-    formFillerId: uuidv4(),
-    response: response,
-  });
+  try {
+    await caller.public.response({
+      formId: form.id,
+      formFillerId: uuidv4(),
+      response: response,
+    });
+  } catch (e) {
+    if (e instanceof TRPCError) {
+      return {
+        props: {
+          form: serializableForm,
+          message: e.message,
+        },
+      };
+    }
+  }
 
   //TODO: Maybe take action after successful mutation
   if (decidedAction.type === "customPageMessage") {
@@ -109,14 +122,14 @@ export const getServerSideProps = async function getServerSideProps(
   } else if (decidedAction.type === "eventTypeRedirectUrl") {
     return {
       redirect: {
-        destination: `/${decidedAction.value}`,
+        destination: `/${decidedAction.value}?${stringify(context.query)}`,
         permanent: false,
       },
     };
   } else if (decidedAction.type === "externalRedirectUrl") {
     return {
       redirect: {
-        destination: `${decidedAction.value}`,
+        destination: `${decidedAction.value}?${stringify(context.query)}`,
         permanent: false,
       },
     };

packages/app-store/routing-forms/playwright/tests/basic.e2e.ts

@@ -304,12 +304,14 @@ test.describe("Routing Forms", () => {
       await users.logout();
       page.goto(`/router?form=${routingForm.id}&Test field=event-routing`);
       await page.waitForURL((url) => {
-        return url.pathname.endsWith("/pro/30min");
+        return url.pathname.endsWith("/pro/30min") && url.searchParams.get("Test field") === "event-routing";
       });
 
       page.goto(`/router?form=${routingForm.id}&Test field=external-redirect`);
       await page.waitForURL((url) => {
-        return url.hostname.includes("google.com");
+        return (
+          url.hostname.includes("google.com") && url.searchParams.get("Test field") === "external-redirect"
+        );
       });
 
       await page.goto(`/router?form=${routingForm.id}&Test field=custom-page`);

packages/app-store/routing-forms/trpc/response.handler.ts

@@ -73,12 +73,14 @@ export const responseHandler = async ({ ctx, input }: ResponseHandlerOptions) =>
         }
         return !schema.safeParse(fieldValue).success;
       })
-      .map((f) => ({ label: f.label, type: f.type }));
+      .map((f) => ({ label: f.label, type: f.type, value: response[f.id]?.value }));
 
     if (invalidFields.length) {
       throw new TRPCError({
         code: "BAD_REQUEST",
-        message: `Invalid fields ${invalidFields.map((f) => `${f.label}: ${f.type}`)}`,
+        message: `Invalid value for fields ${invalidFields
+          .map((f) => `'${f.label}' with value '${f.value}' should be valid ${f.type}`)
+          .join(", ")}`,
       });
     }