Add preview mode in router

apps/web/lib/apps/[slug]/[...pages]/getServerSideProps.ts

@@ -7,6 +7,7 @@ import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import prisma from "@calcom/prisma";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
+import { getOwnerEmailFromCrm } from "@calcom/web/lib/getOwnerEmailFromCrm";
 
 import type { AppProps } from "@lib/app-providers";
 
@@ -107,7 +108,7 @@ export async function getServerSideProps(
       }>,
       prisma,
       user,
-      ssrInit
+      ssrInit,
     );
 
     if (result.notFound) {

apps/web/lib/getOwnerEmailFromCrm.ts

@@ -0,0 +1,32 @@
+import { Prisma } from "@calcom/prisma/client";
+import { SchedulingType } from "@calcom/prisma/enums";
+
+export async function getOwnerEmailFromCrm(
+  eventData: {
+    id: number;
+    schedulingType: SchedulingType | null;
+    metadata: Prisma.JsonValue | null;
+  },
+  email?: string
+): Promise<string | null> {
+  // Pre-requisites
+  if (!eventData || !email || eventData.schedulingType !== SchedulingType.ROUND_ROBIN) return null;
+
+  const { getCRMContactOwnerForRRLeadSkip } = await import("@calcom/app-store/_utils/CRMRoundRobinSkip");
+  const { default: prisma } = await import("@calcom/prisma");
+  const crmContactOwnerEmail = await getCRMContactOwnerForRRLeadSkip(email, eventData.metadata);
+  if (!crmContactOwnerEmail) return null;
+  // Determine if the contactOwner is a part of the event type
+  const contactOwnerQuery = await prisma.user.findFirst({
+    where: {
+      email: crmContactOwnerEmail,
+      hosts: {
+        some: {
+          eventTypeId: eventData.id,
+        },
+      },
+    },
+  });
+  if (!contactOwnerQuery) return null;
+  return crmContactOwnerEmail;
+}

apps/web/lib/team/[slug]/[type]/getServerSideProps.tsx

@@ -14,7 +14,6 @@ import { SchedulingType } from "@calcom/prisma/enums";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
-
 import { ssrInit } from "@server/lib/ssr";
 
 const paramsSchema = z.object({
@@ -88,7 +87,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const ssr = await ssrInit(context);
   const fromRedirectOfNonOrgLink = context.query.orgRedirection === "true";
   const isUnpublished = team.parent ? !team.parent.slug : !team.slug;
-
+  const { getOwnerEmailFromCrm } = await import("@calcom/web/lib/getOwnerEmailFromCrm");
   return {
     props: {
       eventData: {
@@ -112,36 +111,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       isInstantMeeting: eventData && queryIsInstantMeeting ? true : false,
       themeBasis: null,
       orgBannerUrl: team.parent?.bannerUrl ?? "",
-      teamMemberEmail: await getTeamMemberEmail(eventData, email as string),
+      teamMemberEmail: await getOwnerEmailFromCrm(eventData, email as string),
     },
   };
 };
 
-async function getTeamMemberEmail(
-  eventData: {
-    id: number;
-    isInstantEvent: boolean;
-    schedulingType: SchedulingType | null;
-    metadata: Prisma.JsonValue | null;
-    length: number;
-  },
-  email?: string
-): Promise<string | null> {
-  // Pre-requisites
-  if (!eventData || !email || eventData.schedulingType !== SchedulingType.ROUND_ROBIN) return null;
-  const crmContactOwnerEmail = await getCRMContactOwnerForRRLeadSkip(email, eventData.metadata);
-  if (!crmContactOwnerEmail) return null;
-  // Determine if the contactOwner is a part of the event type
-  const contactOwnerQuery = await prisma.user.findFirst({
-    where: {
-      email: crmContactOwnerEmail,
-      hosts: {
-        some: {
-          eventTypeId: eventData.id,
-        },
-      },
-    },
-  });
-  if (!contactOwnerQuery) return null;
-  return crmContactOwnerEmail;
-}

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

@@ -2687,5 +2687,6 @@
   "rerouted_booking_successfully_redirecting_to_booking_page": "Rerouted booking successfully. Redirecting to booking page",
   "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",
+  "contact_owner": "Contact owner",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

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

@@ -244,18 +244,26 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
   const [skipFirstUpdate, setSkipFirstUpdate] = useState(true);
   const [eventTypeUrl, setEventTypeUrl] = useState("");
   const searchParams = useCompatSearchParams();
-  const [teamMembersMatchingAttributeLogic, setTeamMembersMatchingAttributeLogic] = useState<
-    | {
-        id: number;
-        name: string | null;
-        email: string;
-      }[]
-    | null
-  >([]);
+  const [membersRoutingResult, setMembersRoutingResult] = useState<{
+    contactOwnerEmail: string | null;
+    membersMatchingAttributeLogic:
+      | {
+          id: number;
+          name: string | null;
+          email: string;
+        }[]
+      | null;
+  }>({
+    membersMatchingAttributeLogic: null,
+    contactOwnerEmail: null,
+  });
   const findTeamMembersMatchingAttributeLogicMutation =
     trpc.viewer.appRoutingForms.findTeamMembersMatchingAttributeLogic.useMutation({
       onSuccess(data) {
-        setTeamMembersMatchingAttributeLogic(data.result);
+        setMembersRoutingResult({
+          contactOwnerEmail: data.contactOwnerEmail,
+          membersMatchingAttributeLogic: data.result,
+        });
       },
       onError(e) {
         if (e instanceof TRPCClientError) {
@@ -386,8 +394,11 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
                   <span>{t("matching_members")}:</span>{" "}
                   {!findTeamMembersMatchingAttributeLogicMutation.isPending ? (
                     <div>
-                      {teamMembersMatchingAttributeLogic?.map((member) => member.email).join(", ") ||
-                        t("no_matching_members")}
+                      {membersRoutingResult.contactOwnerEmail
+                        ? `${t("contact_owner")}: ${membersRoutingResult.contactOwnerEmail}`
+                        : membersRoutingResult.membersMatchingAttributeLogic
+                            ?.map((member) => member.email)
+                            .join(", ") || t("no_matching_members")}
                     </div>
                   ) : (
                     <div>Loading...</div>

packages/app-store/routing-forms/pages/app-routing.config.tsx

@@ -1,36 +1,19 @@
 //TODO: Generate this file automatically so that like in Next.js file based routing can work automatically
-import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
-
-import { getServerSidePropsForSingleFormView as getServerSidePropsSingleForm } from "../components/getServerSidePropsSingleForm";
 import * as formEdit from "./form-edit/[...appPages]";
 import * as forms from "./forms/[...appPages]";
 // extracts getServerSideProps function from the client component
-import { getServerSideProps as getServerSidePropsForms } from "./forms/getServerSideProps";
 import * as LayoutHandler from "./layout-handler/[...appPages]";
 import * as Reporting from "./reporting/[...appPages]";
 import * as RouteBuilder from "./route-builder/[...appPages]";
-import * as Router from "./router/[...appPages]";
-import { getServerSideProps as getServerSidePropsRouter } from "./router/getServerSideProps";
 import * as RoutingLink from "./routing-link/[...appPages]";
-import { getServerSideProps as getServerSidePropsRoutingLink } from "./routing-link/getServerSideProps";
 
 const routingConfig = {
   "form-edit": formEdit,
   "route-builder": RouteBuilder,
   forms: forms,
   "routing-link": RoutingLink,
-  router: Router,
   reporting: Reporting,
   layoutHandler: LayoutHandler,
 };
 
-export const serverSidePropsConfig: Record<string, AppGetServerSideProps> = {
-  forms: getServerSidePropsForms,
-  "form-edit": getServerSidePropsSingleForm,
-  "route-builder": getServerSidePropsSingleForm,
-  "routing-link": getServerSidePropsRoutingLink,
-  router: getServerSidePropsRouter,
-  reporting: getServerSidePropsSingleForm,
-};
-
 export default routingConfig;