Hotfix/ Embed Tabs (#4593)

apps/web/components/Embed.tsx

@@ -1,6 +1,6 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 import { components, ControlProps } from "react-select";
 
@@ -45,6 +45,23 @@ const getDimension = (dimension: string) => {
   return dimension;
 };
 
+const goto = (router: NextRouter, searchParams: Record<string, string>) => {
+  const newQuery = new URLSearchParams(router.asPath.split("?")[1]);
+  Object.keys(searchParams).forEach((key) => {
+    newQuery.set(key, searchParams[key]);
+  });
+  router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, {
+    shallow: true,
+  });
+};
+
+const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
+  queryParams.forEach((param) => {
+    delete router.query[param];
+  });
+  router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`);
+};
+
 /**
  * It allows us to show code with certain reusable blocks indented according to the block variable placement
  * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string
@@ -605,9 +622,9 @@ const ChooseEmbedTypesDialogContent = () => {
             key={index}
             data-testid={embed.type}
             onClick={() => {
-              const newQuery = new URLSearchParams(router.asPath);
-              newQuery.set("embedType", embed.type);
-              router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`);
+              goto(router, {
+                embedType: embed.type,
+              });
             }}>
             <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
               {embed.illustration}
@@ -632,7 +649,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const s = (href: string) => {
-    const searchParams = new URLSearchParams(router.asPath);
+    const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
     searchParams.set(a, b);
     return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
@@ -664,21 +681,16 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   });
 
   const close = () => {
-    const noPopupQuery = {
-      ...router.query,
-    };
-
-    delete noPopupQuery.dialog;
-
-    queryParamsForDialog.forEach((queryParam) => {
-      delete noPopupQuery[queryParam];
-    });
-
-    router.push({
-      query: noPopupQuery,
-    });
+    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
   };
 
+  // Use embed-code as default tab
+  if (!router.query.embedTabName) {
+    goto(router, {
+      embedTabName: "embed-code",
+    });
+  }
+
   if (!embed || !embedUrl) {
     close();
     return null;
@@ -778,10 +790,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
             <button
               onClick={() => {
-                const newQuery = new URLSearchParams(router.asPath);
-                newQuery.delete("embedType");
-                newQuery.delete("embedTabName");
-                router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`);
+                removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
               <Icon.FiArrowLeft className="mr-4 w-4" />
             </button>
@@ -1035,7 +1044,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             return (
               <div
                 key={tab.href}
-                className={classNames(router.asPath === tab.href ? "flex flex-grow flex-col" : "hidden")}>
+                className={classNames(
+                  router.query.embedTabName === tab.href.split("=")[1] ? "flex flex-grow flex-col" : "hidden"
+                )}>
                 <div className="flex h-[55vh] flex-grow flex-col">
                   {tab.type === "code" ? (
                     <tab.Component
@@ -1120,10 +1131,10 @@ export const EmbedButton = <T extends React.ElementType>({
   const router = useRouter();
   className = classNames(className, "hidden lg:inline-flex");
   const openEmbedModal = () => {
-    const searchParams = new URLSearchParams(router.asPath);
-    searchParams.set("dialog", "embed");
-    searchParams.set("embedUrl", embedUrl);
-    router.push(`${router.asPath.split("?")[0]}?${searchParams.toString()}`, undefined, { shallow: true });
+    goto(router, {
+      dialog: "embed",
+      embedUrl,
+    });
   };
   const Component = as ?? Button;
 

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -202,6 +202,7 @@ function EventTypeSingleLayout({
               StartIcon={Icon.FiCode}
               color="secondary"
               size="icon"
+              tooltip={t("embed")}
             />
             <Button
               color="secondary"

apps/web/playwright/embed-code-generator.e2e.ts

@@ -2,13 +2,8 @@ import { expect, Page } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
 
-// these tests need rewrite
-// eslint-disable-next-line playwright/no-skipped-test
-test.skip();
-
-async function chooseEmbedType(page: Page, embedType: string) {
-  const $embedTypeSelector = await page.locator(`[data-testid=${embedType}]`);
-  $embedTypeSelector.click();
+function chooseEmbedType(page: Page, embedType: string) {
+  page.locator(`[data-testid=${embedType}]`).click();
 }
 
 async function gotToPreviewTab(page: Page) {
@@ -111,7 +106,7 @@ test.describe("Embed Code Generator Tests", () => {
         basePage: "/event-types",
       });
 
-      await chooseEmbedType(page, "inline");
+      chooseEmbedType(page, "inline");
 
       await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
         embedUrl,
@@ -119,19 +114,18 @@ test.describe("Embed Code Generator Tests", () => {
         basePage: "/event-types",
       });
 
-      /*await expectToContainValidCode(page, { embedType: "inline" });
+      await expectToContainValidCode(page, { embedType: "inline" });
 
       await gotToPreviewTab(page);
 
       await expectToContainValidPreviewIframe(page, {
         embedType: "inline",
         calLink: `${pro.username}/30-min`,
-      });*/
+      });
     });
 
     test("open Embed Dialog and choose floating-popup for First Event Type", async ({ page, users }) => {
       const [pro] = users.get();
-
       const embedUrl = await clickFirstEventTypeEmbedButton(page);
 
       await expectToBeNavigatingToEmbedTypesDialog(page, {
@@ -139,20 +133,20 @@ test.describe("Embed Code Generator Tests", () => {
         basePage: "/event-types",
       });
 
-      await chooseEmbedType(page, "floating-popup");
+      chooseEmbedType(page, "floating-popup");
 
       await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
         embedUrl,
         embedType: "floating-popup",
         basePage: "/event-types",
       });
-      /*await expectToContainValidCode(page, { embedType: "floating-popup" });
+      await expectToContainValidCode(page, { embedType: "floating-popup" });
 
       await gotToPreviewTab(page);
       await expectToContainValidPreviewIframe(page, {
         embedType: "floating-popup",
         calLink: `${pro.username}/30-min`,
-      });*/
+      });
     });
 
     test("open Embed Dialog and choose element-click for First Event Type", async ({ page, users }) => {
@@ -164,20 +158,20 @@ test.describe("Embed Code Generator Tests", () => {
         basePage: "/event-types",
       });
 
-      await chooseEmbedType(page, "element-click");
+      chooseEmbedType(page, "element-click");
 
       await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
         embedUrl,
         embedType: "element-click",
         basePage: "/event-types",
       });
-      /*await expectToContainValidCode(page, { embedType: "element-click" });
+      await expectToContainValidCode(page, { embedType: "element-click" });
 
       await gotToPreviewTab(page);
       await expectToContainValidPreviewIframe(page, {
         embedType: "element-click",
         calLink: `${pro.username}/30-min`,
-      });*/
+      });
     });
   });
 
@@ -200,7 +194,7 @@ test.describe("Embed Code Generator Tests", () => {
         basePage,
       });
 
-      await chooseEmbedType(page, "inline");
+      chooseEmbedType(page, "inline");
 
       await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
         embedUrl,
@@ -208,7 +202,7 @@ test.describe("Embed Code Generator Tests", () => {
         embedType: "inline",
       });
 
-      /*await expectToContainValidCode(page, {
+      await expectToContainValidCode(page, {
         embedType: "inline",
       });
 
@@ -217,7 +211,7 @@ test.describe("Embed Code Generator Tests", () => {
       await expectToContainValidPreviewIframe(page, {
         embedType: "inline",
         calLink: decodeURIComponent(embedUrl),
-      });*/
+      });
     });
   });
 });

packages/ui/Dialog.tsx

@@ -30,7 +30,7 @@ export function Dialog(props: DialogProps) {
       }
       router.push(
         {
-          pathname: router.pathname,
+          pathname: router.pathname.replace("/v2", ""),
           query: {
             ...router.query,
           },

packages/ui/v2/core/Dialog.tsx

@@ -33,7 +33,9 @@ export function Dialog(props: DialogProps) {
       }
       router.push(
         {
-          pathname: router.pathname,
+          // This is temporary till we are doing rewrites to /v2.
+          // If not done, opening/closing a modalbox can take the user to /v2 paths.
+          pathname: router.asPath.replace("/v2", ""),
           query: {
             ...router.query,
           },