From a3462657dbd964dca2e2a02fb16b27c0278d6942 Mon Sep 17 00:00:00 2001 From: Agusti Fernandez Pardo <6601142+agustif@users.noreply.github.com> Date: Thu, 15 Sep 2022 07:34:11 +0200 Subject: [PATCH] feat: v2 embed (#4477) * Add support for custom tabNameKey and use embedTabName as the key for embed to avoid conflict with event-types tabName property * Fix tests * Code cleanup * feat: v2 embed * fix: button black default, reuse horitzontalTabs v2 * fix: remove comment, remove linkProps from NavTabs v2 * fix: height: 98% to avoid overflow * fix: add embed to event type detail page * fix: add also tabNames embed-code embed-react * fix: add tabNames w empty divs * Update Embed component as per V2 Co-authored-by: Hariom Balhara Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Agusti Fernandez Pardo Co-authored-by: Alex van Andel --- apps/web/components/Embed.tsx | 111 ++- .../v2/eventtype/EventTypeSingleLayout.tsx | 19 +- .../web/pages/v2/event-types/[type]/index.tsx | 1 + .../playwright/embed-code-generator.e2e.ts | 2 +- packages/embeds/embed-core/preview.html | 2 +- .../embeds/embed-core/src/embed-iframe.ts | 4 - packages/embeds/embed-core/src/embed.ts | 4 +- packages/ui/v2/core/layouts/AppsLayout.tsx | 4 +- packages/ui/v2/core/layouts/BookingLayout.tsx | 4 +- .../navigation/tabs/HorizontalTabItem.tsx | 26 +- .../core/navigation/tabs/HorizontalTabs.tsx | 12 +- .../core/navigation/tabs/VerticalTabItem.tsx | 30 +- .../v2/core/navigation/tabs/VerticalTabs.tsx | 19 +- yarn.lock | 762 +++++++++++++++++- 14 files changed, 857 insertions(+), 143 deletions(-) diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 306038599a..d0091afa64 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -5,15 +5,14 @@ import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } import { components, ControlProps } from "react-select"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import showToast from "@calcom/lib/notification"; import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields"; +import { HorizontalTabs, showToast } from "@calcom/ui/v2"; import { Button, Switch } from "@calcom/ui/v2"; import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants"; -import NavTabs from "@components/NavTabs"; import ColorPicker from "@components/ui/colorpicker"; import Select from "@components/ui/form/Select"; @@ -38,7 +37,7 @@ type PreviewState = { brandColor: string; }; }; -const queryParamsForDialog = ["embedType", "tabName", "embedUrl"]; +const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"]; const getDimension = (dimension: string) => { if (dimension.match(/^\d+$/)) { @@ -453,7 +452,7 @@ const embeds: { const tabs = [ { name: "HTML", - tabName: "embed-code", + embedTabName: "embed-code", icon: Icon.FiCode, type: "code", Component: forwardRef< @@ -504,7 +503,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ }, { name: "React", - tabName: "embed-react", + embedTabName: "embed-react", icon: Icon.FiCode, type: "code", Component: forwardRef< @@ -544,7 +543,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev }, { name: "Preview", - tabName: "embed-preview", + embedTabName: "embed-preview", icon: Icon.FiEye, type: "iframe", Component: forwardRef< @@ -561,7 +560,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev