chore: add default form field support for booker embed routing url (c…

…alcom#19023) * chore: add default forn field support for booker embed routing url * improvements
ymohit1603 · Jan 31, 2025 · 024d47c · 024d47c
1 parent 56cd9ce
commit 024d47c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/packages/platform/atoms/booker-embed/BookerEmbed.tsx b/packages/platform/atoms/booker-embed/BookerEmbed.tsx
@@ -27,6 +27,7 @@ export const BookerEmbed = (
       teamId: routingTeamId,
       eventTypeSlug,
       username,
+      defaultFormValues,
       ...routingFormSearchParams
     } = routingFormUrlProps;
     return (
@@ -53,6 +54,7 @@ export const BookerEmbed = (
                 customClassNames: props?.customClassNames,
               })}
           routingFormSearchParams={routingFormSearchParams}
+          defaultFormValues={defaultFormValues}
           bannerUrl={props.bannerUrl}
           onDryRunSuccess={() => {
             window.location.href = `https://app.cal.com/booking/dry-run-successful`;
@@ -62,7 +64,7 @@ export const BookerEmbed = (
     );
   }
 
-  // If Not For From Routing Form, Use Props
+  // If Not For From Routing, Use Props
   if (props?.routingFormUrl === undefined) {
     return (
       <CalProvider

diff --git a/packages/platform/atoms/booker-embed/useGetRoutingFormUrlProps.tsx b/packages/platform/atoms/booker-embed/useGetRoutingFormUrlProps.tsx
@@ -2,6 +2,10 @@ import { useMemo } from "react";
 
 import type { RoutingFormSearchParamsForEmbed } from "@calcom/platform-types";
 
+import type { BookerPlatformWrapperAtomPropsForTeam } from "../booker/BookerPlatformWrapper";
+
+export type useGetRoutingFormUrlPropsReturnType = RoutingFormSearchParamsForEmbed;
+
 export const useGetRoutingFormUrlProps = ({ routingFormUrl }: { routingFormUrl?: string }) => {
   const routingFormUrlProps = useMemo(() => {
     if (routingFormUrl) {
@@ -22,7 +26,31 @@ export const useGetRoutingFormUrlProps = ({ routingFormUrl }: { routingFormUrl?:
       if (!isTeamUrl && !username) {
         throw new Error("username not defined within the routing form url");
       }
-      return {
+      const defaultFormValues = {
+        ...(routingSearchParams.get("firstName") && {
+          ["firstName"]: routingSearchParams.get("firstName") ?? undefined,
+        }),
+        ...(routingSearchParams.get("lastName") && {
+          ["lastName"]: routingSearchParams.get("lastName") ?? undefined,
+        }),
+        ...(routingSearchParams.get("name") && {
+          ["name"]: routingSearchParams.get("name") ?? undefined,
+        }),
+        ...(routingSearchParams.get("email") && {
+          ["email"]: routingSearchParams.get("email") ?? undefined,
+        }),
+        ...(routingSearchParams.get("notes") && {
+          ["notes"]: routingSearchParams.get("notes") ?? undefined,
+        }),
+        ...(routingSearchParams.get("rescheduleReason") && {
+          ["rescheduleReason"]: routingSearchParams.get("rescheduleReason") ?? undefined,
+        }),
+        ...(routingSearchParams.get("guests") && {
+          ["guests"]: routingSearchParams.getAll("guests") ?? undefined,
+        }),
+      } satisfies Partial<BookerPlatformWrapperAtomPropsForTeam["defaultFormValues"]>;
+
+      const routingformProps = {
         organizationId: routingSearchParams.get("cal.orgId")
           ? Number(routingSearchParams.get("cal.orgId"))
           : undefined,
@@ -54,6 +82,7 @@ export const useGetRoutingFormUrlProps = ({ routingFormUrl }: { routingFormUrl?:
             routingSearchParams.get("cal.salesforce.rrSkipToAccountLookupField") ?? undefined,
         }),
       } satisfies RoutingFormSearchParamsForEmbed;
+      return { ...routingformProps, defaultFormValues };
     }
     return;
   }, [routingFormUrl]);

diff --git a/packages/platform/atoms/router/Router.tsx b/packages/platform/atoms/router/Router.tsx
@@ -29,12 +29,18 @@ export const Router = React.memo(
     renderMessage,
     bookerBannerUrl,
     bookerCustomClassNames,
+    onSubmitFormStart,
+    onSubmitFormEnd,
+    renderLoader,
   }: {
     formId: string;
     formResponsesURLParams?: URLSearchParams;
     onExternalRedirect?: () => void;
     onDisplayBookerEmbed?: () => void;
+    onSubmitFormStart?: () => void;
+    onSubmitFormEnd?: () => void;
     renderMessage?: (message?: string) => ReactElement | ReactElement[];
+    renderLoader?: (isLoading?: boolean) => ReactElement | ReactElement[];
     bookerBannerUrl?: BookerPlatformWrapperAtomPropsForTeam["bannerUrl"];
     bookerCustomClassNames?: BookerPlatformWrapperAtomPropsForTeam["customClassNames"];
   }) => {
@@ -51,6 +57,7 @@ export const Router = React.memo(
         setRouterUrl("");
 
         const baseUrl = import.meta.env.VITE_BOOKER_EMBED_API_URL;
+        onSubmitFormStart?.();
         fetch(`${baseUrl}/router/forms/${formId}/submit`, {
           method: "POST",
           headers: {
@@ -76,12 +83,17 @@ export const Router = React.memo(
           })
           .finally(() => {
             setIsLoading(false);
+            onSubmitFormEnd?.();
           });
       }
     }, []);
 
     const isRedirect = !!routerUrl;
 
+    if (isLoading && renderLoader) {
+      return <>{renderLoader?.(isLoading)}</>;
+    }
+
     if (isLoading || isError) {
       return <></>;
     }