diff --git a/packages/platform/atoms/booker-embed/BookerEmbed.tsx b/packages/platform/atoms/booker-embed/BookerEmbed.tsx index cc7f856d99314d..852c41f04fcd14 100644 --- 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 ( { 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; + + 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 index 11b855a4892f62..c4b5be226353c1 100644 --- 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 <>; }