feat: In Embed, Fire 'routed' event when Routing Form routes (#14470)

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

@@ -23,7 +23,7 @@ import getFieldIdentifier from "../../lib/getFieldIdentifier";
 import { processRoute } from "../../lib/processRoute";
 import { substituteVariables } from "../../lib/substituteVariables";
 import transformResponse from "../../lib/transformResponse";
-import type { Response, Route } from "../../types/types";
+import type { NonRouterRoute, Response } from "../../types/types";
 import { getServerSideProps } from "./getServerSideProps";
 
 type Props = inferSSRProps<typeof getServerSideProps>;
@@ -42,7 +42,7 @@ const useBrandColors = ({
 };
 
 function RoutingForm({ form, profile, ...restProps }: Props) {
-  const [customPageMessage, setCustomPageMessage] = useState<Route["action"]["value"]>("");
+  const [customPageMessage, setCustomPageMessage] = useState<NonRouterRoute["action"]["value"]>("");
   const formFillerIdRef = useRef(uuidv4());
   const isEmbed = useIsEmbed(restProps.isEmbed);
   useTheme(profile.theme);
@@ -58,7 +58,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
   // - like a network error
   // - or he abandoned booking flow in between
   const formFillerId = formFillerIdRef.current;
-  const decidedActionWithFormResponseRef = useRef<{ action: Route["action"]; response: Response }>();
+  const decidedActionWithFormResponseRef = useRef<{ action: NonRouterRoute["action"]; response: Response }>();
   const router = useRouter();
 
   const onSubmit = (response: Response) => {
@@ -98,7 +98,10 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
       }
       const allURLSearchParams = getUrlSearchParamsToForward(decidedActionWithFormResponse.response, fields);
       const decidedAction = decidedActionWithFormResponse.action;
-
+      sdkActionManager?.fire("routed", {
+        actionType: decidedAction.type,
+        actionValue: decidedAction.value,
+      });
       //TODO: Maybe take action after successful mutation
       if (decidedAction.type === "customPageMessage") {
         setCustomPageMessage(decidedAction.value);

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

@@ -23,6 +23,8 @@ export type Fields = z.infer<typeof zodFieldsView>;
 export type Field = Fields[number];
 export type Routes = z.infer<typeof zodRoutesView>;
 export type Route = Routes[0];
+export type NonRouterRoute = z.infer<typeof zodNonRouterRoute>;
+
 export type SerializableFormTeamMembers = {
   id: number;
   name: string | null;

packages/embeds/embed-core/index.html

@@ -156,7 +156,7 @@ <h2>Popup Examples</h2>
         Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
       </button>
       <button data-cal-namespace="routingFormAuto" data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
-        Book through Routing Form [Auto Theme]
+        Book through Routing Form [Auto Theme] - Test for 'routed' event
       </button>
       <button
         data-cal-namespace="routingFormDark"

packages/embeds/embed-core/playground.ts

@@ -371,6 +371,15 @@ Cal("init", "routingFormAuto", {
   origin: "http://localhost:3000",
 });
 
+Cal.ns.routingFormAuto("on", {
+  action: "routed",
+  callback: (e) => {
+    const detail = e.detail;
+    console.log("`routed` event data:", detail.data);
+    alert(`Routing Done - Check console for 'routed' event data`);
+  },
+});
+
 Cal("init", "routingFormDark", {
   debug: true,
   origin: "http://localhost:3000",

packages/embeds/embed-core/src/sdk-action-manager.ts

@@ -56,6 +56,10 @@ export type EventDataMap = {
     };
     eventType: unknown;
   };
+  routed: {
+    actionType: "customPageMessage" | "externalRedirectUrl" | "eventTypeRedirectUrl";
+    actionValue: string;
+  };
   "*": Record<string, unknown>;
   __routeChanged: Record<string, never>;
   __windowLoadComplete: Record<string, never>;