/* global React, window */
const { useState: uS, useMemo: uM, useEffect: uE, useRef: uR } = React;
// #72 Post-call mode: triggered by ?booked=1 in the URL (Cal.com redirect).
// When active, the final step shows call-aware copy and a send-selection CTA
// instead of prompting the user to book again.
function isPostCallMode() {
try { return new URLSearchParams(window.location.search).get('booked') === '1'; }
catch(e) { return false; }
}
// #72 Post-call prefill: Cal.com redirect carries the attendee's name + email
// as ?name= and ?email=. Only honoured alongside ?booked=1 so stray params on the
// normal flow never prefill. React escapes the value on render (safe to interpolate).
function _postCallParam(key) {
try { return (new URLSearchParams(window.location.search).get(key) || '').trim(); }
catch(e) { return ''; }
}
function postCallName() { return isPostCallMode() ? _postCallParam('name') : ''; }
function postCallEmail() { return isPostCallMode() ? _postCallParam('email') : ''; }
// ── PORTAL-BASED STEP LOCK TOOLTIP ──
// The standard inline .dis-tip gets trapped inside .step-indicator's
// stacking context (created by backdrop-filter), so even at max z-index
// the page content below can cover it. Portal-rendering into document.body
// escapes that stacking context entirely.
function StepLockTip({ reason, children }) {
const [tipPos, setTipPos] = uS(null);
const wrapRef = uR(null);
const showTip = () => {
if (!wrapRef.current) return;
const r = wrapRef.current.getBoundingClientRect();
setTipPos({ x: r.left + r.width / 2, y: r.bottom });
};
const hideTip = () => setTipPos(null);
return (
<>
{children}
{tipPos && ReactDOM.createPortal(
{reason}
,
document.body
)}
);
}
// ── Universal portal-tooltip helper ─────────────────────────────────────
// Wraps any anchor element + tooltip JSX, rendering the tooltip into
// document.body via React portal. This guarantees the tooltip escapes
// every ancestor stacking context (backdrop-filter, transform, isolation,
// overflow:hidden, etc.) in the app and can never be covered by other UI.
// All inline tooltips (.summary__total-tip, .wl-tip, .dis-tip,
// .addon__capacity-tip, .gp-chip__tip) are routed through this helper.
function HoverPortalTip({
children,
tip,
tipClassName = '',
wrapClassName = '',
wrapStyle,
placement = 'above',
as: WrapTag = 'span',
}) {
const [pos, setPos] = uS(null);
const wrapRef = uR(null);
const show = () => {
if (!wrapRef.current) return;
const r = wrapRef.current.getBoundingClientRect();
const vw = window.innerWidth || 1024;
const PAD = 12;
const halfTip = 140;
const rawX = r.left + r.width / 2;
const clampedX = Math.min(Math.max(rawX, halfTip + PAD), vw - halfTip - PAD);
let x = clampedX;
let y;
if (placement === 'below') y = r.bottom;
else if (placement === 'left') { x = r.left; y = r.top + r.height / 2; }
else y = r.top;
setPos({ x, y, caretShift: rawX - clampedX });
};
const hide = () => setPos(null);
return (
{children}
{pos && ReactDOM.createPortal(
{tip}
,
document.body
)}
);
}
// ── STEP INDICATOR ──
// Top-of-page progress strip. 6 numbered steps with 3D icons, connector lines,
// and three states per step:
// • current → orange filled circle, primary label, underline
// • complete → black filled circle (icon shown), label active
// • upcoming → grey, dimmed icon and label
// Mobile: condenses to icon-only with the current step's label below.
function StepIndicator({ step, flow, onJump, onNudge, canJumpTo, isStepLocked, lockReasonFor, clientTypeId, intentId }) {
const steps = flow || window.BUILD_STEPS || [];
return (
);
}
window.StepIndicator = StepIndicator;
// ── STALE-DATA PROMPT (spec §3.1 + W5) ──
// Renders at the top of BuildPage when the user's saved localStorage state
// has crossed the 14-day staleness threshold. Non-blocking; one CTA acknowl-
// edges the prompt, an × dismisses. Either action just clears the flag,
// the prices the user is currently seeing already reflect the latest data
// (window.SERVICES is loaded fresh on every page render), so there's no
// async refresh to do.
function StalePrompt({ onDismiss }) {
return (
⏱
Heads up. Your saved quote was last updated more than 14 days ago. Prices may have changed since then, the totals shown now reflect current pricing.
);
}
window.StalePrompt = StalePrompt;
// ── CLIENT SWITCH CONFIRMATION MODAL (spec §6.5.1) ──
// Renders when the user, while having selections, clicks a different client-type
// ── Auto-scroll helper ──────────────────────────────────────────────────
// Smoothly scrolls a target element (selector or Node) to just below the top
// of the viewport. Retries on rAF for ~10 frames so it works even when the
// target hasn't mounted yet (e.g. the qualifier section only appears after
// the user picks a client type). Respects prefers-reduced-motion.
function _scrollToNext(target, opts = {}) {
if (typeof window === 'undefined' || typeof document === 'undefined') return;
const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const offset = typeof opts.offset === 'number' ? opts.offset : 90;
const resolve = () => {
if (typeof target === 'string') return document.querySelector(target);
return target || null;
};
const tryScroll = () => {
const el = resolve();
if (!el) return false;
const top = el.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({ top: Math.max(0, top - offset), behavior: reduced ? 'auto' : 'smooth' });
return true;
};
if (tryScroll()) return;
let n = 0;
const tick = () => {
n++;
if (tryScroll() || n > 12) return;
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
// card on step 0. Cancel = no change; Confirm = dispatch CLEAR_FOR_CLIENT_SWITCH.
function ClientSwitchModal({ fromClientId, toClientId, selectionCount, onCancel, onConfirm }) {
const toCt = window.CLIENT_TYPES.find(c => c.id === toClientId);
const toName = toCt?.heading || 'a new client type';
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onCancel(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onCancel]);
return (
Switch to {toName}?
Your current selections ({selectionCount} service{selectionCount === 1 ? '' : 's'}) will be cleared. We'll start fresh with the {toName} flow.
);
}
window.ClientSwitchModal = ClientSwitchModal;
// ── CLIENT TYPE SECTION (top of build page) ──
// ── Portal-based tooltip for intent cards ───────────────────────────────
// The intent-card sits inside