fix: Routing Form - Show responses in the order of fields (#11143)

Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>

packages/app-store/routing-forms/emails/components/ResponseEmail.tsx

@@ -3,15 +3,15 @@ import type { App_RoutingForms_Form } from "@prisma/client";
 import { BaseEmailHtml, Info } from "@calcom/emails/src/components";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
-import type { Response } from "../../types/types";
+import type { OrderedResponses } from "../../types/types";
 
 export const ResponseEmail = ({
   form,
-  response,
+  orderedResponses,
   ...props
 }: {
   form: Pick<App_RoutingForms_Form, "id" | "name">;
-  response: Response;
+  orderedResponses: OrderedResponses;
   subject: string;
 } & Partial<React.ComponentProps<typeof BaseEmailHtml>>) => {
   return (
@@ -36,11 +36,11 @@ export const ResponseEmail = ({
       title={form.name}
       subtitle="New Response Received"
       {...props}>
-      {Object.entries(response).map(([fieldId, fieldResponse]) => {
+      {orderedResponses.map((fieldResponse, index) => {
         return (
           <Info
             withSpacer
-            key={fieldId}
+            key={index}
             label={fieldResponse.label}
             description={
               fieldResponse.value instanceof Array ? fieldResponse.value.join(",") : fieldResponse.value

packages/app-store/routing-forms/emails/templates/response-email.ts

@@ -3,17 +3,25 @@ import type { App_RoutingForms_Form } from "@prisma/client";
 import { renderEmail } from "@calcom/emails";
 import BaseEmail from "@calcom/emails/templates/_base-email";
 
-import type { Response } from "../../types/types";
+import type { OrderedResponses } from "../../types/types";
 
 type Form = Pick<App_RoutingForms_Form, "id" | "name">;
 export default class ResponseEmail extends BaseEmail {
-  response: Response;
+  orderedResponses: OrderedResponses;
   toAddresses: string[];
   form: Form;
-  constructor({ toAddresses, response, form }: { form: Form; toAddresses: string[]; response: Response }) {
+  constructor({
+    toAddresses,
+    orderedResponses,
+    form,
+  }: {
+    form: Form;
+    toAddresses: string[];
+    orderedResponses: OrderedResponses;
+  }) {
     super();
     this.form = form;
-    this.response = response;
+    this.orderedResponses = orderedResponses;
     this.toAddresses = toAddresses;
   }
 
@@ -26,7 +34,7 @@ export default class ResponseEmail extends BaseEmail {
       subject,
       html: renderEmail("ResponseEmail", {
         form: this.form,
-        response: this.response,
+        orderedResponses: this.orderedResponses,
         subject,
       }),
     };

packages/app-store/routing-forms/trpc/utils.ts

@@ -6,6 +6,7 @@ import logger from "@calcom/lib/logger";
 import { WebhookTriggerEvents } from "@calcom/prisma/client";
 import type { Ensure } from "@calcom/types/utils";
 
+import type { OrderedResponses } from "../types/types";
 import type { Response, SerializableForm } from "../types/types";
 
 export async function onFormSubmission(
@@ -61,23 +62,28 @@ export async function onFormSubmission(
   });
 
   await Promise.all(promises);
+  const orderedResponses = form.fields.reduce((acc, field) => {
+    acc.push(response[field.id]);
+    return acc;
+  }, [] as OrderedResponses);
+
   if (form.settings?.emailOwnerOnSubmission) {
     logger.debug(
       `Preparing to send Form Response email for Form:${form.id} to form owner: ${form.user.email}`
     );
-    await sendResponseEmail(form, response, form.user.email);
+    await sendResponseEmail(form, orderedResponses, form.user.email);
   }
 }
 
 export const sendResponseEmail = async (
   form: Pick<App_RoutingForms_Form, "id" | "name">,
-  response: Response,
+  orderedResponses: OrderedResponses,
   ownerEmail: string
 ) => {
   try {
     if (typeof window === "undefined") {
       const { default: ResponseEmail } = await import("../emails/templates/response-email");
-      const email = new ResponseEmail({ form: form, toAddresses: [ownerEmail], response: response });
+      const email = new ResponseEmail({ form: form, toAddresses: [ownerEmail], orderedResponses });
       await email.sendEmail();
     }
   } catch (e) {

packages/app-store/routing-forms/types/types.d.ts

@@ -45,3 +45,5 @@ export type SerializableRoute =
       isFallback?: LocalRoute["isFallback"];
     })
   | GlobalRoute;
+
+export type OrderedResponses = Response[string][];