feat: Add inline Cal.com embed to demo form

demo/demo/demo.py

@@ -3,6 +3,9 @@
 import reflex as rx
 
 import reflex_ui as ui
+from reflex_ui.blocks.demo_form import demo_form_dialog
+from reflex_ui.blocks.telemetry.unify import get_unify_trackers
+from reflex_ui.blocks.calcom import calcom_popup_embed
 
 
 class State(rx.State):
@@ -16,50 +19,25 @@ def set_seed(self, seed: int):
 def index() -> rx.Component:
     return rx.el.div(
         rx.el.div(
-            ui.tooltip(
-                ui.button(
-                    ui.icon("SmileIcon"),
-                    "Click me",
-                    on_click=rx.toast.success(
-                        "You are cool :)",
-                        position="top-center",
-                    ),
-                ),
-                content="Seriously, click me",
+            rx.el.h1(
+                "Book a Demo Form Test",
+                class_name="text-xl sm:text-2xl font-bold text-secondary-12 px-4",
             ),
-            ui.checkbox(
-                label="Click me",
-                on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
+            demo_form_dialog(
+                trigger=ui.button("Open Demo Form Dialog"),
             ),
-            ui.slider(
-                value=State.seed,
-                on_value_change=State.set_seed,
-                on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
-                class_name="max-w-xs",
-            ),
-            ui.gradient_profile(
-                seed=State.seed,
-                class_name="size-10",
-            ),
-            ui.switch(
-                on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
-            ),
-            ui.select(
-                items=[f"Item {i}" for i in range(1, 11)],
-                name="select",
-                default_value="Select an item",
-                on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
-                on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
-            ),
-            class_name="flex flex-col gap-y-6 justify-center items-center",
+            class_name="flex flex-col gap-y-4 sm:gap-y-6 justify-center items-center py-6 sm:py-12 w-full",
         ),
-        ui.theme_switcher(class_name="absolute top-4 right-4"),
-        class_name="flex flex-row gap-16 justify-center items-center h-screen bg-secondary-1 relative",
+        ui.theme_switcher(class_name="absolute top-4 right-4 z-10"),
+        class_name="flex flex-col justify-center items-center min-h-screen bg-secondary-1 relative",
     )
 
 
 app = rx.App(
     stylesheets=["css/globals.css"],
+    extra_app_wraps={
+        (55, "Calcom Popup Embed"): lambda _: calcom_popup_embed(),
+    },
     head_components=[
         rx.el.link(
             rel="preconnect",
@@ -78,6 +56,8 @@ def index() -> rx.Component:
             href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..700&display=swap",
             rel="stylesheet",
         ),
+        # Unify tracking script
+        get_unify_trackers(),
     ],
 )
 app.add_page(index)

reflex_ui/blocks/calcom.py

@@ -4,28 +4,32 @@
 
 import reflex as rx
 
-DEFAULT_CAL_FORM = os.getenv(
-    "DEFAULT_CAL_FORM", "forms/f87bd9b2-b339-4915-b4d4-0098e2db4394"
-)
+DEFAULT_CAL_NAMESPACE = os.getenv("DEFAULT_CAL_NAMESPACE", "reflex-intro-call")
 
+DEFAULT_CAL_LINK = os.getenv("DEFAULT_CAL_LINK", "team/reflex/reflex-intro-call")
 
-def get_cal_attrs(cal_form: str = DEFAULT_CAL_FORM, **kwargs):
+
+def get_cal_attrs(
+    cal_namespace: str = DEFAULT_CAL_NAMESPACE,
+    cal_link: str = DEFAULT_CAL_LINK,
+    config: str | rx.Var[str] | None = '{"theme": "dark", "layout": "month_view"}',
+    **kwargs,
+):
     """Get Cal.com attributes for embedding.
 
     Args:
-        cal_form: The Cal.com form link
+        cal_namespace: The Cal.com namespace
+        cal_link: The Cal.com form link
+        config: Cal.com configuration dict including theme, layout, name, email, etc.
         **kwargs: Additional attributes to include
 
     Returns:
         Dictionary of Cal.com attributes
     """
     attrs = {
-        "data-cal-link": cal_form,
-        "data-cal-namespace": "talk",
-        "data-cal-config": rx.color_mode_cond(
-            '{"theme":"light","layout":"month_view"}',
-            '{"theme":"dark","layout":"month_view"}',
-        ),
+        "data-cal-link": cal_link,
+        "data-cal-namespace": cal_namespace,
+        "data-cal-config": config,
     }
     attrs.update(kwargs)
     return attrs
@@ -55,7 +59,7 @@ def add_hooks(self) -> list[str | rx.Var[object]]:
             """
 useEffect(() => {
   (async function () {
-    const cal = await getCalApi({ namespace: "talk" });
+    const cal = await getCalApi({ namespace: "reflex-intro-call" });
     cal("ui", {
       hideEventTypeDetails: false,
       layout: "month_view",
@@ -81,24 +85,32 @@ class CalEmbed(rx.Component):
 
     cal_link: rx.Var[str]
 
+    namespace: rx.Var[str]
+
     config: rx.Var[dict]
 
     @classmethod
     def create(
         cls,
-        cal_link: str = DEFAULT_CAL_FORM,
-        config: dict | None = None,
+        cal_link: str = DEFAULT_CAL_LINK,
+        cal_namespace: str = DEFAULT_CAL_NAMESPACE,
+        config: rx.Var[dict] | dict | None = None,
         **props,
     ):
         """Create a Cal.com embed component.
 
         Args:
-            cal_link: The Cal.com link (e.g., "forms/...")
-            config: Configuration object for Cal.com (e.g., {"theme": "light"})
+            cal_link: The Cal.com link (e.g., "team/reflex/reflex-intro-call")
+            cal_namespace: The namespace for the Cal.com embed
+            config: Configuration object for Cal.com including prefill data.
+                   According to https://cal.com/help/embedding/prefill-booking-form-embed
+                   you can prefill: name, email, notes, and location.
+                   Example: {"layout": "month_view", "name": "John Doe", "email": "[email protected]", "notes": "Company details..."}
             **props: Additional props to pass to the component
         """
         return super().create(
             cal_link=cal_link,
+            namespace=cal_namespace,
             config=config,
             **props,
         )