From 9a66dae0bad1438cc62f44c145c4f736f039bc15 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 11 Apr 2024 09:09:28 +0530
Subject: [PATCH] feat: In Embed, Fire 'routed' event when Routing Form routes
 (#14470)

---
 .../pages/routing-link/[...appPages].tsx              | 11 +++++++----
 packages/app-store/routing-forms/types/types.d.ts     |  2 ++
 packages/embeds/embed-core/index.html                 |  2 +-
 packages/embeds/embed-core/playground.ts              |  9 +++++++++
 packages/embeds/embed-core/src/sdk-action-manager.ts  |  4 ++++
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
index 7f730750aa..7abc78a6d2 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/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);
diff --git a/packages/app-store/routing-forms/types/types.d.ts b/packages/app-store/routing-forms/types/types.d.ts
index 4b0aeef530..cc8694803a 100644
--- a/packages/app-store/routing-forms/types/types.d.ts
+++ b/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;
diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index c4c28ca0ce..21298b5908 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -156,7 +156,7 @@
         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"
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
index a9776cf934..4538dcdd35 100644
--- a/packages/embeds/embed-core/playground.ts
+++ b/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",
diff --git a/packages/embeds/embed-core/src/sdk-action-manager.ts b/packages/embeds/embed-core/src/sdk-action-manager.ts
index 305685b796..90172b1761 100644
--- a/packages/embeds/embed-core/src/sdk-action-manager.ts
+++ b/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>;