diff --git a/.dockerignore b/.dockerignore index 98af3e0c6e5..3a5d3e50438 100644 --- a/.dockerignore +++ b/.dockerignore @@ -32,7 +32,9 @@ Dockerfile* # Build artifacts and caches .next +**/.next .turbo +**/.turbo .cache dist build diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c81d49b83f6..bfac30a378a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -266,7 +266,7 @@ jobs: echo "ERROR: DEV_TRIGGER_ACCESS_TOKEN and TRIGGER_PROJECT_ID repo secrets must both be set" >&2 exit 1 fi - bunx trigger.dev@4.5.7 deploy --env preview --branch dev-sim + bunx trigger.dev@4.5.12 deploy --env preview --branch dev-sim # Main/staging: build AMD64 images and push sha-tagged images to ECR + GHCR. # Runs in parallel with tests — only immutable sha tags are pushed here, and diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 7d616a3d937..49f5aa98909 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -50,7 +50,7 @@ "@sim/tsconfig": "workspace:*", "@types/micromatch": "4.0.10", "@types/node": "24.2.1", - "electron": "43.4.1", + "electron": "43.5.0", "electron-builder": "26.15.3", "esbuild": "0.28.1", "jsdom": "^26.0.0", diff --git a/apps/docs/components/workflow-preview/block-preview.tsx b/apps/docs/components/workflow-preview/block-preview.tsx index ca39c8b055c..34ce64ff364 100644 --- a/apps/docs/components/workflow-preview/block-preview.tsx +++ b/apps/docs/components/workflow-preview/block-preview.tsx @@ -1,13 +1,13 @@ 'use client' import { useMemo } from 'react' -import { CANVAS_Z_INDEX_MODE } from '@sim/workflow-renderer' +import { CANVAS_Z_INDEX_MODE, useCanvasColorMode } from '@sim/workflow-renderer' import { type NodeTypes, ReactFlow, ReactFlowProvider } from '@xyflow/react' import { domAnimation, LazyMotion } from 'framer-motion' import '@xyflow/react/dist/style.css' import { BLOCK_DISPLAY_WORKFLOWS } from '@/components/workflow-preview/block-display-workflows' import { DocsBlockNode } from '@/components/workflow-preview/docs-block-node' -import { usePreviewColorMode } from '@/components/workflow-preview/use-preview-color-mode' +import { FitViewAfterInit } from '@/components/workflow-preview/fit-view-after-init' import { toReactFlowElements } from '@/components/workflow-preview/workflow-data' /** The hero mounts the same node type the canvas uses, so it can never drift. */ @@ -30,7 +30,7 @@ interface BlockPreviewProps { * `block-display-workflows.ts`. */ export function BlockPreview({ type }: BlockPreviewProps) { - const colorMode = usePreviewColorMode() + const colorMode = useCanvasColorMode() const workflow = BLOCK_DISPLAY_WORKFLOWS[type] const elements = useMemo(() => (workflow ? toReactFlowElements(workflow) : null), [workflow]) @@ -51,8 +51,6 @@ export function BlockPreview({ type }: BlockPreviewProps) { edges={elements.edges} nodeTypes={NODE_TYPES} proOptions={PRO_OPTIONS} - fitView - fitViewOptions={FIT_VIEW_OPTIONS} minZoom={0.2} maxZoom={1.3} nodesDraggable={false} @@ -64,8 +62,9 @@ export function BlockPreview({ type }: BlockPreviewProps) { panOnDrag={false} panOnScroll={false} preventScrolling={false} - className='h-full w-full' + className='h-full w-full [--xy-background-color:var(--bg)]' /> + diff --git a/apps/docs/components/workflow-preview/fit-view-after-init.tsx b/apps/docs/components/workflow-preview/fit-view-after-init.tsx new file mode 100644 index 00000000000..fda2379f8d2 --- /dev/null +++ b/apps/docs/components/workflow-preview/fit-view-after-init.tsx @@ -0,0 +1,20 @@ +'use client' + +import { useEffect } from 'react' +import { type FitViewOptions, useNodesInitialized, useReactFlow } from '@xyflow/react' + +interface FitViewAfterInitProps { + options: FitViewOptions +} + +/** Fits a v12 canvas only after every node has real measured dimensions. */ +export function FitViewAfterInit({ options }: FitViewAfterInitProps) { + const nodesInitialized = useNodesInitialized() + const { fitView } = useReactFlow() + + useEffect(() => { + if (nodesInitialized) void fitView(options) + }, [fitView, nodesInitialized, options]) + + return null +} diff --git a/apps/docs/components/workflow-preview/use-preview-color-mode.ts b/apps/docs/components/workflow-preview/use-preview-color-mode.ts deleted file mode 100644 index 3ab3aac2fe1..00000000000 --- a/apps/docs/components/workflow-preview/use-preview-color-mode.ts +++ /dev/null @@ -1,17 +0,0 @@ -'use client' - -import type { ColorMode } from '@xyflow/react' -import { useTheme } from 'next-themes' - -/** - * Resolves the React Flow `colorMode` from the docs theme so the canvas - * wrapper's color-mode class (and the `--xy-*` palette it selects) follows - * dark mode instead of React Flow's default `light`. - */ -export function usePreviewColorMode(): ColorMode { - const { resolvedTheme } = useTheme() - // Before next-themes mounts, resolvedTheme is undefined; 'system' lets React - // Flow follow the OS preference instead of flashing a light-classed frame. - if (resolvedTheme === undefined) return 'system' - return resolvedTheme === 'dark' ? 'dark' : 'light' -} diff --git a/apps/docs/components/workflow-preview/workflow-preview.tsx b/apps/docs/components/workflow-preview/workflow-preview.tsx index 197723e2ab5..ef3a1a90998 100644 --- a/apps/docs/components/workflow-preview/workflow-preview.tsx +++ b/apps/docs/components/workflow-preview/workflow-preview.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Expand, X } from '@sim/emcn/icons' -import { CANVAS_Z_INDEX_MODE } from '@sim/workflow-renderer' +import { CANVAS_Z_INDEX_MODE, useCanvasColorMode } from '@sim/workflow-renderer' import { applyEdgeChanges, applyNodeChanges, @@ -21,7 +21,7 @@ import { BLOCK_DISPLAY_WORKFLOWS } from '@/components/workflow-preview/block-dis import { BlockInspector } from '@/components/workflow-preview/block-inspector' import { DocsBlockNode } from '@/components/workflow-preview/docs-block-node' import { DocsContainerNode } from '@/components/workflow-preview/docs-container-node' -import { usePreviewColorMode } from '@/components/workflow-preview/use-preview-color-mode' +import { FitViewAfterInit } from '@/components/workflow-preview/fit-view-after-init' import { EASE_OUT, type PreviewBlock, @@ -179,7 +179,8 @@ function PreviewFlow({ [workflow, animate, highlightBlock, highlightEdge, selectedBlock] ) - const colorMode = usePreviewColorMode() + const colorMode = useCanvasColorMode() + const [nodes, setNodes] = useState(initialNodes) const [edges, setEdges] = useState(initialEdges) @@ -208,34 +209,35 @@ function PreviewFlow({ ) return ( - - colorMode={colorMode} - zIndexMode={CANVAS_Z_INDEX_MODE} - nodes={nodes} - edges={edges} - onNodesChange={onNodesChange} - onEdgesChange={onEdgesChange} - onNodeClick={onNodeClick ? (_, node) => onNodeClick(node.id) : undefined} - onPaneClick={onPaneClick} - nodeTypes={NODE_TYPES} - edgeTypes={EDGE_TYPES} - defaultEdgeOptions={{ type: 'previewEdge' }} - elementsSelectable={false} - nodesDraggable - nodesConnectable={false} - zoomOnScroll={interactive} - zoomOnDoubleClick={interactive} - panOnScroll={false} - zoomOnPinch - panOnDrag - preventScrolling={interactive} - autoPanOnNodeDrag={false} - proOptions={PRO_OPTIONS} - minZoom={0.1} - fitView - fitViewOptions={interactive ? LIGHTBOX_FIT_VIEW_OPTIONS : FIT_VIEW_OPTIONS} - className='h-full w-full' - /> + <> + + colorMode={colorMode} + zIndexMode={CANVAS_Z_INDEX_MODE} + nodes={nodes} + edges={edges} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChange} + onNodeClick={onNodeClick ? (_, node) => onNodeClick(node.id) : undefined} + onPaneClick={onPaneClick} + nodeTypes={NODE_TYPES} + edgeTypes={EDGE_TYPES} + defaultEdgeOptions={{ type: 'previewEdge' }} + elementsSelectable={false} + nodesDraggable + nodesConnectable={false} + zoomOnScroll={interactive} + zoomOnDoubleClick={interactive} + panOnScroll={false} + zoomOnPinch + panOnDrag + preventScrolling={interactive} + autoPanOnNodeDrag={false} + proOptions={PRO_OPTIONS} + minZoom={0.1} + className='h-full w-full [--xy-background-color:var(--bg)]' + /> + + ) } diff --git a/apps/sim/app/(landing)/demo/components/demo-booking/demo-booking.tsx b/apps/sim/app/(landing)/demo/components/demo-booking/demo-booking.tsx index 561dc9ec207..9c91f96f92c 100644 --- a/apps/sim/app/(landing)/demo/components/demo-booking/demo-booking.tsx +++ b/apps/sim/app/(landing)/demo/components/demo-booking/demo-booking.tsx @@ -5,21 +5,20 @@ import { chipBorderShadowRing, cn } from '@sim/emcn' import dynamic from 'next/dynamic' import { preconnect } from 'react-dom' import { DemoForm, type DemoLead } from '@/app/(landing)/demo/components/demo-form' -import { CAL_ORIGIN } from '@/app/(landing)/demo/components/demo-scheduler/cal-config' import { applyLegacyInertFallback } from '@/app/(landing)/demo/components/legacy-inert-fallback' const importScheduler = () => import('@/app/(landing)/demo/components/demo-scheduler') /** * Warm the entire booking path while the visitor fills the form: preconnect to - * the configured Cal origin, then load the scheduler chunk and the + * app.cal.com, then load the scheduler chunk, Cal.com's embed.js, and the * booker iframe assets (via the embed's `preload` instruction). Fired on first * form focus so nothing Cal.com-related competes with initial page load — the * connection handshake overlaps the chunk import, and it all finishes long * before the visitor submits. */ function preloadScheduler() { - preconnect(CAL_ORIGIN) + preconnect('https://app.cal.com') return importScheduler().then((m) => m.preloadCalEmbed()) } diff --git a/apps/sim/app/(landing)/demo/components/demo-scheduler/cal-config.ts b/apps/sim/app/(landing)/demo/components/demo-scheduler/cal-config.ts deleted file mode 100644 index 4fad6e70131..00000000000 --- a/apps/sim/app/(landing)/demo/components/demo-scheduler/cal-config.ts +++ /dev/null @@ -1,42 +0,0 @@ -const DEFAULT_CAL_ORIGIN = 'https://app.cal.com' -const DEFAULT_CAL_LINK = 'team/sim/demo' - -/** Resolves a hosted or self-hosted Cal event link and rejects non-HTTP embed targets. */ -export function resolveCalLink(configuredLink?: string): URL { - const link = configuredLink?.trim() || DEFAULT_CAL_LINK - let url: URL - - try { - url = new URL(link) - } catch { - url = new URL(link.replace(/^\/+/, ''), `${DEFAULT_CAL_ORIGIN}/`) - } - - if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) { - throw new Error('NEXT_PUBLIC_CAL_LINK must be an HTTP(S) URL or a Cal.com event path') - } - - url.hash = '' - return url -} - -/** - * Resolved at module scope on an eagerly-imported path, so a malformed - * NEXT_PUBLIC_CAL_LINK degrades to the default link instead of taking the - * whole /demo page down. - */ -const calLinkUrl = (() => { - try { - return resolveCalLink(process.env.NEXT_PUBLIC_CAL_LINK) - } catch { - return resolveCalLink(undefined) - } -})() - -/** Exact origin used for iframe navigation, preconnect, and postMessage validation. */ -export const CAL_ORIGIN = calLinkUrl.origin - -/** Returns a fresh URL so callers can safely add embed-specific paths and parameters. */ -export function createConfiguredCalUrl(): URL { - return new URL(calLinkUrl) -} diff --git a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx index 4258a1fb2c3..2f0711f0091 100644 --- a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx +++ b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx @@ -5,22 +5,30 @@ import { act } from 'react' import { createRoot, type Root } from 'react-dom/client' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -const { mockConsent, mockTrackGoogleEvent } = vi.hoisted(() => ({ - mockConsent: { marketing: true, measurement: true }, - mockTrackGoogleEvent: vi.fn(), -})) +const { mockCal, mockCalComponent, mockConsent, mockGetCalApi, mockTrackGoogleEvent } = vi.hoisted( + () => ({ + mockCal: vi.fn(), + mockCalComponent: vi.fn(() => null), + mockConsent: { marketing: true, measurement: true }, + mockGetCalApi: vi.fn(), + mockTrackGoogleEvent: vi.fn(), + }) +) +vi.mock('@calcom/embed-react', () => ({ + default: mockCalComponent, + getCalApi: mockGetCalApi, +})) vi.mock('@/lib/analytics/google', () => ({ trackGoogleEvent: mockTrackGoogleEvent })) vi.mock('@/lib/consent/scripts', () => ({ X_DEMO_BOOKED_EVENT_ID: 'demo-booked' })) vi.mock('@/lib/consent/tracking-consent', () => ({ useTrackingConsent: () => mockConsent, })) -import { resolveCalLink } from '@/app/(landing)/demo/components/demo-scheduler/cal-config' import { - createCalEmbedUrl, DemoScheduler, preloadCalEmbed, + resolveCalEmbedConfig, } from '@/app/(landing)/demo/components/demo-scheduler/demo-scheduler' const LEAD = { @@ -38,136 +46,129 @@ describe('DemoScheduler', () => { vi.clearAllMocks() mockConsent.marketing = true mockConsent.measurement = true + mockGetCalApi.mockResolvedValue(mockCal) container = document.createElement('div') document.body.append(container) root = createRoot(container) }) - afterEach(() => { - act(() => root.unmount()) - container.remove() - document.querySelectorAll('iframe[hidden]').forEach((frame) => { - frame.remove() + afterEach(async () => { + await act(async () => { + root.unmount() + await Promise.resolve() }) + container.remove() window.twq = undefined }) - function renderScheduler(): HTMLIFrameElement { - act(() => root.render()) - const frame = container.querySelector('iframe[title="Book a demo"]') - if (!frame) throw new Error('Expected the Cal booking iframe to render') - return frame - } - - it('builds the hosted embed URL with the lead and presentation prefilled', () => { - const url = new URL(createCalEmbedUrl(LEAD)) - - expect(url.origin).toBe('https://app.cal.com') - expect(url.pathname).toBe('/team/sim/demo/embed') - expect(Object.fromEntries(url.searchParams)).toEqual({ - embed: 'demo', - name: LEAD.name, - email: LEAD.email, - notes: LEAD.notes, - theme: 'light', - 'ui.color-scheme': 'light', - layout: 'month_view', - useSlotsViewOnSmallScreen: 'true', + it('passes the main-branch presentation and lead config to the official embed', async () => { + await act(async () => { + root.render() + await Promise.resolve() }) - }) - - it('derives the trusted origin from a self-hosted event URL', () => { - const url = resolveCalLink('https://calendar.example.com/team/sim/demo') - - expect(url.origin).toBe('https://calendar.example.com') - expect(url.pathname).toBe('/team/sim/demo') - }) - it('rejects unsafe Cal embed protocols and credential-bearing URLs', () => { - expect(() => resolveCalLink('javascript:alert(1)')).toThrow( - 'NEXT_PUBLIC_CAL_LINK must be an HTTP(S) URL or a Cal.com event path' - ) - expect(() => resolveCalLink('https://user:secret@calendar.example.com/demo')).toThrow( - 'NEXT_PUBLIC_CAL_LINK must be an HTTP(S) URL or a Cal.com event path' + expect(mockCalComponent).toHaveBeenCalledWith( + expect.objectContaining({ + namespace: 'demo', + calLink: 'team/sim/demo', + calOrigin: 'https://app.cal.com', + embedJsUrl: 'https://app.cal.com/embed/embed.js', + className: 'size-full overflow-auto', + config: { + name: LEAD.name, + email: LEAD.email, + notes: LEAD.notes, + theme: 'light', + 'ui.color-scheme': 'light', + layout: 'month_view', + useSlotsViewOnSmallScreen: 'true', + }, + }), + undefined ) + expect(mockCal).toHaveBeenCalledWith('ui', { + hideEventTypeDetails: true, + styles: { branding: { brandColor: '#6f3dfa' } }, + }) }) - it('warms the hosted booker only once while the preload frame remains mounted', () => { - preloadCalEmbed() - preloadCalEmbed() - - const frames = document.querySelectorAll('iframe[hidden]') - expect(frames).toHaveLength(1) - expect(frames[0].src).toBe('https://app.cal.com/team/sim/demo?preload=true') - }) - - it('tracks a booking only when the message comes from the rendered Cal iframe', () => { + it('registers consent-aware booking analytics and removes the listener on unmount', async () => { const trackXEvent = vi.fn() window.twq = trackXEvent - const frame = renderScheduler() - const frameWindow = frame.contentWindow - expect(frameWindow).not.toBeNull() - - act(() => { - window.dispatchEvent( - new MessageEvent('message', { - origin: 'https://malicious.example', - source: frameWindow, - data: { fullType: 'CAL:demo:bookingSuccessfulV2' }, - }) - ) - window.dispatchEvent( - new MessageEvent('message', { - origin: 'https://app.cal.com', - source: frameWindow, - data: { fullType: 'CAL:demo:bookingSuccessfulV2' }, - }) - ) + + await act(async () => { + root.render() + await Promise.resolve() }) - expect(mockTrackGoogleEvent).toHaveBeenCalledOnce() + const registration = mockCal.mock.calls.find(([method]) => method === 'on')?.[1] as + | { action: string; callback: () => void } + | undefined + expect(registration?.action).toBe('bookingSuccessfulV2') + + registration?.callback() expect(mockTrackGoogleEvent).toHaveBeenCalledWith('get_a_demo', { page_path: '/demo', form_name: 'sim_demo', booking_status: 'scheduled', }) - expect(trackXEvent).toHaveBeenCalledOnce() expect(trackXEvent).toHaveBeenCalledWith('event', 'demo-booked', {}) + + await act(async () => { + root.unmount() + await Promise.resolve() + }) + expect(mockCal).toHaveBeenCalledWith('off', { + action: 'bookingSuccessfulV2', + callback: registration?.callback, + }) + root = createRoot(container) }) - it("completes Cal's ready handshake and reapplies the branded UI settings", () => { - const frame = renderScheduler() - const frameWindow = frame.contentWindow - expect(frameWindow).not.toBeNull() - if (!frameWindow) return - const postMessage = vi.spyOn(frameWindow, 'postMessage') - - act(() => { - window.dispatchEvent( - new MessageEvent('message', { - origin: 'https://app.cal.com', - source: frameWindow, - data: { fullType: 'CAL:demo:__iframeReady' }, - }) - ) + it('does not register booking analytics without measurement or marketing consent', async () => { + mockConsent.marketing = false + mockConsent.measurement = false + + await act(async () => { + root.render() + await Promise.resolve() }) - expect(postMessage).toHaveBeenNthCalledWith( - 1, - { originator: 'CAL', method: 'parentKnowsIframeReady' }, - 'https://app.cal.com' - ) - expect(postMessage).toHaveBeenNthCalledWith( - 2, + expect(mockCal).toHaveBeenCalledWith('ui', { + hideEventTypeDetails: true, + styles: { branding: { brandColor: '#6f3dfa' } }, + }) + expect(mockCal.mock.calls.some(([method]) => method === 'on')).toBe(false) + }) + + it('preloads the configured booker only once', async () => { + await act(async () => { + preloadCalEmbed() + preloadCalEmbed() + await Promise.resolve() + }) + + expect(mockGetCalApi).toHaveBeenCalledOnce() + expect(mockGetCalApi).toHaveBeenCalledWith({ + namespace: 'demo', + embedJsUrl: 'https://app.cal.com/embed/embed.js', + }) + expect(mockCal).toHaveBeenCalledOnce() + expect(mockCal).toHaveBeenCalledWith('preload', { calLink: 'team/sim/demo' }) + }) + + it('falls back from malformed Cal configuration and preserves valid custom origins', () => { + expect(resolveCalEmbedConfig('javascript:alert(1)')).toEqual({ + calLink: 'team/sim/demo', + calOrigin: 'https://app.cal.com', + embedJsUrl: 'https://app.cal.com/embed/embed.js', + }) + expect(resolveCalEmbedConfig('https://book.example.com/team/demo?theme=light#ignored')).toEqual( { - originator: 'CAL', - method: 'ui', - arg: { - hideEventTypeDetails: true, - styles: { branding: { brandColor: '#6f3dfa' } }, - }, - }, - 'https://app.cal.com' + calLink: 'team/demo?theme=light', + calOrigin: 'https://book.example.com', + embedJsUrl: 'https://book.example.com/embed/embed.js', + } ) }) }) diff --git a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx index 4a89825c100..682c1990987 100644 --- a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx +++ b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx @@ -1,126 +1,100 @@ 'use client' -import { useEffect, useRef } from 'react' +import { useEffect } from 'react' +import Cal, { getCalApi } from '@calcom/embed-react' import { trackGoogleEvent } from '@/lib/analytics/google' import { X_DEMO_BOOKED_EVENT_ID } from '@/lib/consent/scripts' import { useTrackingConsent } from '@/lib/consent/tracking-consent' import type { DemoLead } from '@/app/(landing)/demo/components/demo-form' -import { - CAL_ORIGIN, - createConfiguredCalUrl, -} from '@/app/(landing)/demo/components/demo-scheduler/cal-config' const CAL_NAMESPACE = 'demo' +const DEFAULT_CAL_ORIGIN = 'https://app.cal.com' +const DEFAULT_CAL_LINK = 'team/sim/demo' -/** Sim's brand color, matching the `--brand-agent` token. */ -const CAL_BRAND_COLOR = '#6f3dfa' +interface CalEmbedConfig { + calLink: string + calOrigin: string + embedJsUrl: string +} -const CAL_IFRAME_READY_EVENT = `CAL:${CAL_NAMESPACE}:__iframeReady` -const CAL_BOOKING_SUCCESS_EVENT = `CAL:${CAL_NAMESPACE}:bookingSuccessfulV2` +function parseCalEmbedConfig(link: string): CalEmbedConfig { + const url = new URL(link.replace(/^\/+/, ''), `${DEFAULT_CAL_ORIGIN}/`) + if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) { + throw new Error('Cal link must use HTTP(S) without embedded credentials') + } -interface DemoSchedulerProps { - /** The captured lead used to prefill the Cal.com booking. */ - lead: DemoLead -} + const calLink = `${url.pathname.replace(/^\/+/, '')}${url.search}` + if (!calLink) throw new Error('Cal link must include an event path') -interface CalMessage { - fullType: string + return { + calLink, + calOrigin: url.origin, + embedJsUrl: `${url.origin}/embed/embed.js`, + } } -let calPreloadFrame: HTMLIFrameElement | null = null - -function isCalMessage(data: unknown): data is CalMessage { - if (!data || typeof data !== 'object') return false - return typeof Reflect.get(data, 'fullType') === 'string' +/** Resolves the configured booker, falling back safely when the environment value is invalid. */ +export function resolveCalEmbedConfig(configuredLink?: string): CalEmbedConfig { + try { + return parseCalEmbedConfig(configuredLink?.trim() || DEFAULT_CAL_LINK) + } catch { + return parseCalEmbedConfig(DEFAULT_CAL_LINK) + } } +const CAL_EMBED = resolveCalEmbedConfig(process.env.NEXT_PUBLIC_CAL_LINK) + /** - * Creates the same hosted booker URL the former Cal React wrapper generated. - * Query parameters keep the lead prefill and light, month-view presentation. + * Sim's brand color, matching the `--brand-agent` token. The embed renders in a + * cross-origin iframe, so it can't read our CSS vars - it needs the literal hex. */ -export function createCalEmbedUrl(lead: DemoLead): string { - const url = createConfiguredCalUrl() - const normalizedPath = url.pathname.replace(/\/+$/, '') - url.pathname = normalizedPath.endsWith('/embed') ? normalizedPath : `${normalizedPath}/embed` - url.searchParams.set('embed', CAL_NAMESPACE) - url.searchParams.set('name', lead.name) - url.searchParams.set('email', lead.email) - url.searchParams.set('notes', lead.notes) - url.searchParams.set('theme', 'light') - url.searchParams.set('ui.color-scheme', 'light') - url.searchParams.set('layout', 'month_view') - url.searchParams.set('useSlotsViewOnSmallScreen', 'true') - return url.toString() -} +const CAL_BRAND_COLOR = '#6f3dfa' -function createCalPreloadUrl(): string { - const url = createConfiguredCalUrl() - url.searchParams.set('preload', 'true') - return url.toString() +interface DemoSchedulerProps { + /** The captured lead used to prefill the Cal.com booking. */ + lead: DemoLead } +let calEmbedPreloaded = false + /** - * Warms Cal.com's booker in a hidden hosted iframe on first form focus. The - * frame remains mounted so its browser cache and connection stay available to - * the visible scheduler. Repeat calls are idempotent; a failed navigation can - * be retried by a later focus. + * Warm the Cal.com embed before the scheduler mounts. Loads `embed.js` and + * issues the embed's `preload` instruction, which fetches the booker in a + * hidden `?preload=true` iframe so its assets are already cached when the real + * embed renders on submit. Without this, nothing Cal.com-related starts + * downloading until the visitor presses Continue, which is why the calendar + * used to take several seconds to appear. Idempotent — repeat calls no-op + * while a warm-up is in flight or done, but a failed embed.js load resets the + * flag so a later focus can retry. */ export function preloadCalEmbed(): void { - if (typeof document === 'undefined' || !document.body || calPreloadFrame?.isConnected) return - - const frame = document.createElement('iframe') - calPreloadFrame = frame - frame.src = createCalPreloadUrl() - frame.hidden = true - frame.tabIndex = -1 - frame.setAttribute('aria-hidden', 'true') - frame.addEventListener( - 'error', - () => { - frame.remove() - if (calPreloadFrame === frame) calPreloadFrame = null - }, - { once: true } - ) - document.body.append(frame) + if (calEmbedPreloaded) return + calEmbedPreloaded = true + getCalApi({ namespace: CAL_NAMESPACE, embedJsUrl: CAL_EMBED.embedJsUrl }) + .then((cal) => { + cal('preload', { calLink: CAL_EMBED.calLink }) + }) + .catch(() => { + calEmbedPreloaded = false + }) } /** - * Step 2 of the booking card - the hosted Cal.com scheduler, prefilled from the - * form's {@link DemoLead}. It uses Cal's public iframe protocol directly, which - * keeps the same booker while avoiding a client SDK in the landing bundle. + * Step 2 of the booking card - the Cal.com scheduler, prefilled from the form's + * {@link DemoLead}. Rendered inside the card chrome owned by {@link DemoBooking} + * and lazy-loaded, so the embed script never touches the initial landing bundle. * - * The ready handshake applies the prior light theme, hidden event details, and - * brand color. Booking-success messages are accepted only from this iframe and - * Cal's expected origin before consent-aware analytics fire. + * The embed is pinned to the page's light theme and Sim's brand color, and the + * captured name/email/notes prefill the booking so the visitor never retypes. It + * fills the panel (`flex-1`), which the parent sizes to the form's height, so the + * card stays the same height across the form→calendar transition. */ export function DemoScheduler({ lead }: DemoSchedulerProps) { const { marketing, measurement } = useTrackingConsent() - const frameRef = useRef(null) useEffect(() => { - const handleMessage = (event: MessageEvent) => { - const frameWindow = frameRef.current?.contentWindow - if (event.origin !== CAL_ORIGIN || !frameWindow || event.source !== frameWindow) return - if (!isCalMessage(event.data)) return - - if (event.data.fullType === CAL_IFRAME_READY_EVENT) { - frameWindow.postMessage({ originator: 'CAL', method: 'parentKnowsIframeReady' }, CAL_ORIGIN) - frameWindow.postMessage( - { - originator: 'CAL', - method: 'ui', - arg: { - hideEventTypeDetails: true, - styles: { branding: { brandColor: CAL_BRAND_COLOR } }, - }, - }, - CAL_ORIGIN - ) - return - } - - if (event.data.fullType !== CAL_BOOKING_SUCCESS_EVENT) return + let cancelled = false + const trackDemoBooked = () => { if (measurement) { trackGoogleEvent('get_a_demo', { page_path: '/demo', @@ -130,9 +104,26 @@ export function DemoScheduler({ lead }: DemoSchedulerProps) { } if (marketing) window.twq?.('event', X_DEMO_BOOKED_EVENT_ID, {}) } - - window.addEventListener('message', handleMessage) - return () => window.removeEventListener('message', handleMessage) + const api = getCalApi({ namespace: CAL_NAMESPACE, embedJsUrl: CAL_EMBED.embedJsUrl }) + api + .then((cal) => { + if (cancelled) return + cal('ui', { + hideEventTypeDetails: true, + styles: { branding: { brandColor: CAL_BRAND_COLOR } }, + }) + if (measurement || marketing) { + cal('on', { action: 'bookingSuccessfulV2', callback: trackDemoBooked }) + } + }) + .catch(() => {}) + return () => { + cancelled = true + if (!measurement && !marketing) return + api + .then((cal) => cal('off', { action: 'bookingSuccessfulV2', callback: trackDemoBooked })) + .catch(() => {}) + } }, [marketing, measurement]) return ( @@ -144,12 +135,21 @@ export function DemoScheduler({ lead }: DemoSchedulerProps) { Choose a slot that works for your team and we'll send a calendar invite.

-