fix: event type redirect for orgs in preview test (routing-forms) (#13686)

* fix event type url for orgs

* fix type errors

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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

@@ -2266,6 +2266,7 @@
   "field_identifiers_as_variables": "Use field identifiers as variables for your custom event redirect",
   "field_identifiers_as_variables_with_example": "Use field identifiers as variables for your custom event redirect (e.g. {{variable}})",
   "account_already_linked": "Account is already linked",
+  "routers": "Routers",
   "primary": "Primary",
   "make_primary": "Make primary",
   "add_email": "Add Email",

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

@@ -9,6 +9,7 @@ import { ShellMain } from "@calcom/features/shell/Shell";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import {
   Alert,
   Badge,
@@ -38,6 +39,7 @@ import {
   MessageCircle,
 } from "@calcom/ui/components/icon";
 
+import { getAbsoluteEventTypeRedirectUrl } from "../getEventTypeRedirectUrl";
 import { RoutingPages } from "../lib/RoutingPages";
 import { isFallbackRoute } from "../lib/isFallbackRoute";
 import { processRoute } from "../lib/processRoute";
@@ -233,9 +235,12 @@ type SingleFormComponentProps = {
     appUrl: string;
     hookForm: UseFormReturn<RoutingFormWithResponseCount>;
   }>;
+  enrichedWithUserProfileForm?: inferSSRProps<
+    typeof getServerSidePropsForSingleFormView
+  >["enrichedWithUserProfileForm"];
 };
 
-function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
+function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleFormComponentProps) {
   const utils = trpc.useContext();
   const { t } = useLocale();
 
@@ -243,9 +248,21 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
   const [response, setResponse] = useState<Response>({});
   const [decidedAction, setDecidedAction] = useState<Route["action"] | null>(null);
   const [skipFirstUpdate, setSkipFirstUpdate] = useState(true);
+  const [eventTypeUrl, setEventTypeUrl] = useState("");
 
   function testRouting() {
     const action = processRoute({ form, response });
+    if (action.type === "eventTypeRedirectUrl") {
+      setEventTypeUrl(
+        enrichedWithUserProfileForm
+          ? getAbsoluteEventTypeRedirectUrl({
+              eventTypeRedirectUrl: action.value,
+              form: enrichedWithUserProfileForm,
+              allURLSearchParams: new URLSearchParams(),
+            })
+          : ""
+      );
+    }
     setDecidedAction(action);
   }
 
@@ -358,7 +375,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                   {form.routers.length ? (
                     <div className="mt-6">
                       <div className="text-emphasis mb-2 block text-sm font-semibold leading-none ">
-                        Routers
+                        {t("routers")}
                       </div>
                       <p className="text-default -mt-1 text-xs leading-normal">
                         {t("modifications_in_fields_warning")}
@@ -455,9 +472,9 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                       {RoutingPages.map((page) => {
                         if (page.value !== decidedAction.type) return null;
                         return (
-                          <div key={page.value} data-testid="test-routing-result-type">
+                          <span key={page.value} data-testid="test-routing-result-type">
                             {page.label}
-                          </div>
+                          </span>
                         );
                       })}
                       :{" "}
@@ -484,7 +501,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                         <span className="text-default underline">
                           <a
                             target="_blank"
-                            href={`/${decidedAction.value}`}
+                            href={eventTypeUrl}
                             rel="noreferrer"
                             data-testid="test-routing-result">
                             {decidedAction.value}

packages/app-store/routing-forms/components/getServerSidePropsSingleForm.ts

@@ -5,6 +5,7 @@ import type {
   AppUser,
 } from "@calcom/types/AppGetServerSideProps";
 
+import { enrichFormWithMigrationData } from "../enrichFormWithMigrationData";
 import { getSerializableForm } from "../lib/getSerializableForm";
 
 export const getServerSidePropsForSingleFormView = async function getServerSidePropsForSingleFormView(
@@ -48,10 +49,31 @@ export const getServerSidePropsForSingleFormView = async function getServerSideP
       id: formId,
     },
     include: {
+      user: {
+        select: {
+          id: true,
+          movedToProfileId: true,
+          organization: {
+            select: {
+              slug: true,
+            },
+          },
+          username: true,
+          theme: true,
+          brandColor: true,
+          darkBrandColor: true,
+          metadata: true,
+        },
+      },
       team: {
         select: {
-          name: true,
           slug: true,
+          name: true,
+          parent: {
+            select: { slug: true },
+          },
+          parentId: true,
+          metadata: true,
         },
       },
       _count: {
@@ -67,10 +89,32 @@ export const getServerSidePropsForSingleFormView = async function getServerSideP
     };
   }
 
+  const { user: u, ...formWithoutUser } = form;
+
+  const formWithoutProfilInfo = {
+    ...formWithoutUser,
+    team: form.team
+      ? {
+          slug: form.team.slug,
+          name: form.team.name,
+        }
+      : null,
+  };
+
+  const { UserRepository } = await import("@calcom/lib/server/repository/user");
+
+  const formWithUserInfoProfil = {
+    ...form,
+    user: await UserRepository.enrichUserWithItsProfile({ user: form.user }),
+  };
+
   return {
     props: {
       trpcState: await ssr.dehydrate(),
-      form: await getSerializableForm({ form }),
+      form: await getSerializableForm({ form: formWithoutProfilInfo }),
+      enrichedWithUserProfileForm: await getSerializableForm({
+        form: enrichFormWithMigrationData(formWithUserInfoProfil),
+      }),
     },
   };
 };

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

@@ -629,11 +629,13 @@ const Routes = ({
 export default function RouteBuilder({
   form,
   appUrl,
+  enrichedWithUserProfileForm,
 }: inferSSRProps<typeof getServerSideProps> & { appUrl: string }) {
   return (
     <SingleForm
       form={form}
       appUrl={appUrl}
+      enrichedWithUserProfileForm={enrichedWithUserProfileForm}
       Page={({ hookForm, form }) => {
         // If hookForm hasn't been initialized, don't render anything
         // This is important here because some states get initialized which aren't reset when the hookForm is reset with the form values and they don't get the updated values