From 12543f58eb96fd01dc1482dbb5dc0ba0e81baa06 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Tue, 21 Oct 2025 09:26:28 +0200 Subject: [PATCH 01/15] Try this multi page app (1st) --- ui/external/index.html | 11 + ui/index.html | 14 + ui/src/App.tsx | 4 - ui/src/components/EmbedConfigModal.tsx | 95 ++- ui/src/components/EventTypeCard.tsx | 13 +- .../EmbeddedBookingPage.tsx | 0 ui/src/external/FloatingBookingWidget.tsx | 688 ++++++++++++++++++ ui/src/external/main.tsx | 30 + ui/src/external/routes.tsx | 19 + ui/src/lib/api.ts | 2 +- ui/src/lib/routes.tsx | 6 - ui/tsconfig.app.json | 3 +- ui/tsconfig.json | 3 +- ui/vite.config.ts | 42 +- 14 files changed, 895 insertions(+), 35 deletions(-) create mode 100644 ui/external/index.html rename ui/src/{pages => external}/EmbeddedBookingPage.tsx (100%) create mode 100644 ui/src/external/FloatingBookingWidget.tsx create mode 100644 ui/src/external/main.tsx create mode 100644 ui/src/external/routes.tsx diff --git a/ui/external/index.html b/ui/external/index.html new file mode 100644 index 0000000..cffb5be --- /dev/null +++ b/ui/external/index.html @@ -0,0 +1,11 @@ + + + + + + + +
+ + + diff --git a/ui/index.html b/ui/index.html index e0981a4..70b9426 100644 --- a/ui/index.html +++ b/ui/index.html @@ -9,5 +9,19 @@
+ diff --git a/ui/src/App.tsx b/ui/src/App.tsx index a193b57..5bb3198 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -4,12 +4,8 @@ import { ThemeProvider } from "@ui/contexts/ThemeContext"; import { routes } from "@ui/lib/routes"; import { DatadogRumProvider } from "@ui/providers/DatadogRumProvider"; import { UserStoreProvider } from "@ui/providers/UserStoreProvider"; -import { AllCommunityModule, ModuleRegistry } from "ag-grid-community"; import { BrowserRouter as Router, useRoutes } from "react-router-dom"; -// Register all Community features -ModuleRegistry.registerModules([AllCommunityModule]); - const AppRoutes = () => { const element = useRoutes(routes); return element; diff --git a/ui/src/components/EmbedConfigModal.tsx b/ui/src/components/EmbedConfigModal.tsx index 71d25e3..90b53ae 100644 --- a/ui/src/components/EmbedConfigModal.tsx +++ b/ui/src/components/EmbedConfigModal.tsx @@ -16,11 +16,14 @@ import { } from "@ui/components/ui/select"; import { CopyButton } from "@ui/components/ui/clipboard"; import { useState } from "react"; -import { TypographyMuted } from "@ui/components/ui/typography"; +import { TypographyMuted, TypographyP } from "@ui/components/ui/typography"; type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange" | "red"; +type EmbedType = "full" | "floating"; + interface EmbedConfig { + embedType: EmbedType; backgroundVariant: ColorVariant; buttonVariant: ColorVariant; } @@ -29,25 +32,55 @@ interface EmbedConfigModalProps { isOpen: boolean; onClose: () => void; baseEmbedUrl: string; + baseFloatingUrl: string; } -export function EmbedConfigModal({ isOpen, onClose, baseEmbedUrl }: EmbedConfigModalProps) { +export function EmbedConfigModal({ + isOpen, + onClose, + baseEmbedUrl, + baseFloatingUrl, +}: EmbedConfigModalProps) { const [embedConfig, setEmbedConfig] = useState({ + embedType: "full", backgroundVariant: "purple", buttonVariant: "purple", }); const getEmbedUrl = () => { + const baseUrl = embedConfig.embedType === "full" ? baseEmbedUrl : baseFloatingUrl; const params = new URLSearchParams({ - backgroundVariant: embedConfig.backgroundVariant, buttonVariant: embedConfig.buttonVariant, }); - return `${baseEmbedUrl}?${params.toString()}`; + + // Only add backgroundVariant for full embed + if (embedConfig.embedType === "full") { + params.set("backgroundVariant", embedConfig.backgroundVariant); + } + + return `${baseUrl}?${params.toString()}`; }; const generateEmbedCode = () => { const embedUrl = getEmbedUrl(); + if (embedConfig.embedType === "floating") { + return ` +
+`; + } + return `