fix: Intercom app - book an event inside the messenger (#19391)

packages/app-store/intercom/api/configure.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import type {
@@ -94,7 +94,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
 
     return {
-      id: `${WEBSITE_URL}/${slug}/${eventType.slug}`,
+      id: `${WEBAPP_URL}/${slug}/${eventType.slug}`,
       type: "item",
       title: eventType.title,
       subtitle: `${slug}/${eventType.slug}`,

packages/app-store/intercom/api/get.ts

@@ -0,0 +1,84 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "POST") {
+    // Set Content-Type header to text/html
+    res.setHeader("Content-Type", "text/html");
+
+    const url = req.query.url as string;
+
+    if (!url) return res.status(400).json({ message: "Missing URL in query parameters" });
+
+    res.setHeader("Content-Type", "text/html");
+
+    // Generate HTML with embedded Cal component
+    const htmlResponse = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Cal.com</title>
+          <meta charset="UTF-8" />
+          <script src="https://s3.amazonaws.com/intercom-sheets.com/messenger-sheet-library.latest.js"></script>
+        </head>
+
+        <body>
+          <!-- Cal inline embed code begins -->
+          <div style="width: 100%; height: 100%; overflow: auto" id="my-cal-inline"></div>
+          <script type="text/javascript">
+            (function (C, A, L) {
+              let p = function (a, ar) { a.q.push(ar); };
+              let d = C.document;
+              C.Cal =
+                C.Cal ||
+                function () {
+                  let cal = C.Cal;
+                  let ar = arguments;
+                  if (!cal.loaded) {
+                    cal.ns = {};
+                    cal.q = cal.q || [];
+                    d.head.appendChild(d.createElement("script")).src = A;
+                    cal.loaded = true;
+                  }
+                  if (ar[0] === L) {
+                    const api = function () { p(api, arguments); };
+                    const namespace = ar[1];
+                    api.q = api.q || [];
+                    if (typeof namespace === "string") {
+                      cal.ns[namespace] = cal.ns[namespace] || api;
+                      p(cal.ns[namespace], ar);
+                      p(cal, ["initNamespace", namespace]);
+                    } else p(cal, ar);
+                    return;
+                  }
+                  p(cal, ar);
+                };
+            })(window, "https://app.cal.com/embed/embed.js", "init");
+
+            Cal("init", { origin: "${WEBAPP_URL}" });
+
+            Cal("inline", {
+              elementOrSelector: "#my-cal-inline",
+              calLink: "${url.replace(`${WEBAPP_URL}/`, "")}",
+              config: {
+                theme: "light",
+              },
+            });
+           
+           /* Not functionnal 
+           Cal("on", {
+              action: "eventTypeSelected",
+              callback: (e) => INTERCOM_MESSENGER_SHEET_LIBRARY.submitSheet({...e.detail}),
+            });*/
+          </script>
+          <!-- Cal inline embed code ends -->
+        </body>
+      </html>
+    `;
+
+    res.status(200).send(htmlResponse);
+  } else {
+    res.status(405).end(); // Method Not Allowed
+  }
+}

packages/app-store/intercom/api/index.ts

@@ -2,3 +2,4 @@ export { default as add } from "./add";
 export { default as callback } from "./callback";
 export { default as initialize } from "./initialize";
 export { default as configure } from "./configure";
+export { default as get } from "./get";

packages/app-store/intercom/api/initialize.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import type { NewCanvas } from "../lib";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -7,7 +7,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   if (!card_creation_options) return res.status(400).json({ message: "Missing card_creation_options" });
 
-  const URL = card_creation_options.submit_booking_url;
+  const URL = `${WEBAPP_URL}/api/integrations/intercom/get?url=${card_creation_options.submit_booking_url}`;
 
   const canvasData: NewCanvas = {
     canvas: {

packages/app-store/intercom/lib/index.ts

@@ -34,7 +34,7 @@ export interface SpacerComponent extends CanvasComponent {
 export interface TextComponent extends CanvasComponent {
   type: "text";
   text: string;
-  style: "header" | "body" | "error" | "muted";
+  style: "header" | "paragraph" | "error" | "muted";
   align: "left" | "center" | "right";
 }
 

packages/app-store/intercom/lib/isValidCalURL.ts

@@ -1,4 +1,4 @@
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
 import type { TextComponent } from "../lib";
@@ -9,11 +9,11 @@ import type { TextComponent } from "../lib";
  * @returns boolean
  */
 export async function isValidCalURL(url: string) {
-  const regex = new RegExp(`^${WEBSITE_URL}/`, `i`);
+  const regex = new RegExp(`^${WEBAPP_URL}/`, `i`);
 
   const error: TextComponent = {
     type: "text",
-    text: `This is not a valid ${WEBSITE_URL.replace("https://", "")} link`,
+    text: `This is not a valid ${WEBAPP_URL.replace("https://", "")} link`,
     style: "error",
     align: "left",
   };