keystone-design-bootstrap 1.0.65 → 1.0.68

package/dist/tracking/index.d.ts

@@ -46,7 +46,12 @@ declare function setPixelUserData(userData: PixelUserData): Promise<void>;
  * Automatically applies any stored user identity before firing so that Meta
  * can match events to known users across the entire session.
  * Silently no-ops if fbq is not loaded (pixel not configured for this site).
+ *
+ * @param eventId - Optional server-side event ID for browser/server deduplication.
+ *   Pass the `eventId` returned by the form submission API so Meta can match and
+ *   deduplicate the browser Lead event against the server-side CAPI Lead event.
+ *   Format: fbq('track', event, params, { eventID: eventId })
  */
-declare function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void;
+declare function firePixelEvent(event: PixelEvent, params?: PixelEventParams, eventId?: string): void;
 
 export { MetaPixel, type MetaPixelProps, MetaPixelTracker, type PixelEvent, type PixelEventParams, type PixelUserData, firePixelEvent, setPixelUserData };

package/dist/tracking/index.js

@@ -88,7 +88,7 @@ async function setPixelUserData(userData) {
     getRegisteredPixelIds().forEach((id) => fbq("init", id, hashed));
   }
 }
-function firePixelEvent(event, params) {
+function firePixelEvent(event, params, eventId) {
   const fbq = getFbq();
   if (!fbq) {
     console.debug("[MetaPixel] skipped \u2014 fbq not loaded", { event });
@@ -98,8 +98,10 @@ function firePixelEvent(event, params) {
   const normalized = {};
   if (params == null ? void 0 : params.contentName) normalized.content_name = params.contentName;
   if (params == null ? void 0 : params.contentCategory) normalized.content_category = params.contentCategory;
-  console.debug("[MetaPixel]", event, normalized);
-  fbq("track", event, Object.keys(normalized).length > 0 ? normalized : void 0);
+  const customData = Object.keys(normalized).length > 0 ? normalized : void 0;
+  const eventData = eventId ? { eventID: eventId } : void 0;
+  console.debug("[MetaPixel]", event, normalized, eventId ? { eventID: eventId } : "");
+  fbq("track", event, customData, eventData);
 }
 
 // src/tracking/MetaPixelTracker.tsx

package/dist/tracking/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tracking/MetaPixel.tsx","../../src/tracking/MetaPixelTracker.tsx","../../src/tracking/firePixelEvent.ts"],"sourcesContent":["'use client';\n\nimport Script from 'next/script';\n\nconst FBEVENTS_URL = 'https://connect.facebook.net/en_US/fbevents.js';\n\nconst PIXEL_SCRIPT = (pixelId: string) => `\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');\n  fbq('init', '${pixelId.replace(/'/g, \"\\\\'\")}');\n  fbq('track', 'PageView');\n  window.__ks_pixel_ids = window.__ks_pixel_ids || [];\n  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, \"\\\\'\")}') === -1) {\n    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, \"\\\\'\")}');\n  }\n`;\n\nexport type MetaPixelProps = {\n  /** Meta Pixel ID. When null/undefined, nothing is rendered. */\n  pixelId: string | null | undefined;\n};\n\n/**\n * Renders the Meta (Facebook) Pixel base code: loads fbevents.js, initializes\n * the pixel, and tracks PageView. Use in the root layout when ads config\n * provides a meta_pixel_id.\n */\nexport function MetaPixel({ pixelId }: MetaPixelProps) {\n  const raw = typeof pixelId === 'string' ? pixelId.trim() : '';\n  const id = raw && raw !== 'null' && /^\\d+$/.test(raw) ? raw : '';\n  if (!id) {\n    return null;\n  }\n\n  return (\n    <>\n      <Script\n        id=\"meta-pixel\"\n        strategy=\"afterInteractive\"\n        dangerouslySetInnerHTML={{ __html: PIXEL_SCRIPT(id) }}\n      />\n      <noscript>\n        {/* eslint-disable-next-line @next/next/no-img-element -- 1x1 tracking pixel for no-JS fallback; next/image not applicable in noscript */}\n        <img\n          height={1}\n          width={1}\n          style={{ display: 'none' }}\n          src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}\n          alt=\"\"\n        />\n      </noscript>\n    </>\n  );\n}\n","'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { firePixelEvent } from './firePixelEvent';\n\ntype RouteRule = {\n  pattern: RegExp;\n  getParams: (match: RegExpMatchArray) => { contentName: string; contentCategory: string };\n};\n\nfunction slugToTitle(slug: string): string {\n  return slug\n    .split('-')\n    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))\n    .join(' ');\n}\n\n// Checked in order — first match wins. More specific patterns come first.\nconst ROUTE_RULES: RouteRule[] = [\n  {\n    pattern: /^\\/services\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Service' }),\n  },\n  {\n    pattern: /^\\/locations\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Location' }),\n  },\n  {\n    pattern: /^\\/services$/,\n    getParams: () => ({ contentName: 'Services', contentCategory: 'Services' }),\n  },\n  {\n    pattern: /^\\/locations$/,\n    getParams: () => ({ contentName: 'Locations', contentCategory: 'Locations' }),\n  },\n  {\n    pattern: /^\\/portal$/,\n    getParams: () => ({ contentName: 'Member Portal', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/service-menu$/,\n    getParams: () => ({ contentName: 'Service Menu', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/faq$/,\n    getParams: () => ({ contentName: 'FAQ', contentCategory: 'FAQ' }),\n  },\n  {\n    pattern: /^\\/contact$/,\n    getParams: () => ({ contentName: 'Contact', contentCategory: 'Contact' }),\n  },\n];\n\ntype Props = {\n  /** External booking URL. When set, fires InitiateCheckout on any click targeting that URL. */\n  bookingUrl?: string | null;\n};\n\n/**\n * Single client-side tracker placed once in KeystoneRootLayout.\n * - Fires ViewContent on every route change for known page patterns.\n * - Fires InitiateCheckout whenever a visitor clicks a link to the external booking URL.\n *\n * Portal booking tab tracking is handled directly inside PortalPage via PortalTabTracker\n * since intent is only established when the Booking tab is explicitly opened.\n */\nexport function MetaPixelTracker({ bookingUrl }: Props) {\n  const pathname = usePathname();\n\n  useEffect(() => {\n    for (const rule of ROUTE_RULES) {\n      const match = pathname.match(rule.pattern);\n      if (match) {\n        const { contentName, contentCategory } = rule.getParams(match);\n        firePixelEvent('ViewContent', { contentName, contentCategory });\n        break;\n      }\n    }\n  }, [pathname]);\n\n  useEffect(() => {\n    if (!bookingUrl) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const anchor = (e.target as Element).closest('a');\n      if (anchor?.href?.startsWith(bookingUrl)) {\n        firePixelEvent('InitiateCheckout');\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [bookingUrl]);\n\n  return null;\n}\n","type FbqFn = (method: string, ...args: unknown[]) => void;\n\nexport type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';\n\nexport interface PixelEventParams {\n  contentName?: string;\n  contentCategory?: string;\n}\n\n/** Raw (unhashed) user identifiers for advanced matching. */\nexport interface PixelUserData {\n  email?: string | null;\n  phone?: string | null;\n}\n\n// Hashed user data stored in sessionStorage for the duration of the browsing session.\n// Keyed by a short namespace to avoid collisions.\nconst STORAGE_KEY = 'ks_pud';\n\nasync function sha256Hex(str: string): Promise<string> {\n  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));\n  return Array.from(new Uint8Array(buffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('');\n}\n\nfunction getFbq(): FbqFn | undefined {\n  if (typeof window === 'undefined') return undefined;\n  return (window as Window & { fbq?: FbqFn }).fbq;\n}\n\n/** Read the pixel IDs registered by MetaPixel via the inline init script. */\nfunction getRegisteredPixelIds(): string[] {\n  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];\n}\n\n/** Apply stored hashed user data to every configured Meta Pixel. */\nfunction applyStoredUserData(fbq: FbqFn): void {\n  try {\n    const raw = sessionStorage.getItem(STORAGE_KEY);\n    if (!raw) return;\n    const hashed = JSON.parse(raw) as Record<string, string>;\n    if (Object.keys(hashed).length === 0) return;\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  } catch {\n    // sessionStorage unavailable or JSON malformed — safe to ignore\n  }\n}\n\n/**\n * Hash and store user identifiers so they are automatically included in all\n * subsequent pixel events for this browser session. Call this as soon as\n * identity is known (e.g. contact form submission, portal login step 1).\n */\nexport async function setPixelUserData(userData: PixelUserData): Promise<void> {\n  const hashed: Record<string, string> = {};\n\n  if (userData.email) {\n    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());\n  }\n  if (userData.phone) {\n    const digits = userData.phone.replace(/\\D/g, '');\n    if (digits) hashed.ph = await sha256Hex(digits);\n  }\n\n  if (Object.keys(hashed).length === 0) return;\n\n  try {\n    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));\n  } catch {\n    // sessionStorage unavailable — still apply to fbq for this page load\n  }\n\n  const fbq = getFbq();\n  if (fbq) {\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  }\n}\n\n/**\n * Single entry point for all client-side Meta Pixel event fires.\n * Automatically applies any stored user identity before firing so that Meta\n * can match events to known users across the entire session.\n * Silently no-ops if fbq is not loaded (pixel not configured for this site).\n */\nexport function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void {\n  const fbq = getFbq();\n  if (!fbq) {\n    console.debug('[MetaPixel] skipped — fbq not loaded', { event });\n    return;\n  }\n\n  // Re-apply stored identity before every event so user data is included\n  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)\n  applyStoredUserData(fbq);\n\n  const normalized: Record<string, string> = {};\n  if (params?.contentName) normalized.content_name = params.contentName;\n  if (params?.contentCategory) normalized.content_category = params.contentCategory;\n\n  console.debug('[MetaPixel]', event, normalized);\n  fbq('track', event, Object.keys(normalized).length > 0 ? normalized : undefined);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/tracking/MetaPixel.tsx","../../src/tracking/MetaPixelTracker.tsx","../../src/tracking/firePixelEvent.ts"],"sourcesContent":["'use client';\n\nimport Script from 'next/script';\n\nconst FBEVENTS_URL = 'https://connect.facebook.net/en_US/fbevents.js';\n\nconst PIXEL_SCRIPT = (pixelId: string) => `\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');\n  fbq('init', '${pixelId.replace(/'/g, \"\\\\'\")}');\n  fbq('track', 'PageView');\n  window.__ks_pixel_ids = window.__ks_pixel_ids || [];\n  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, \"\\\\'\")}') === -1) {\n    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, \"\\\\'\")}');\n  }\n`;\n\nexport type MetaPixelProps = {\n  /** Meta Pixel ID. When null/undefined, nothing is rendered. */\n  pixelId: string | null | undefined;\n};\n\n/**\n * Renders the Meta (Facebook) Pixel base code: loads fbevents.js, initializes\n * the pixel, and tracks PageView. Use in the root layout when ads config\n * provides a meta_pixel_id.\n */\nexport function MetaPixel({ pixelId }: MetaPixelProps) {\n  const raw = typeof pixelId === 'string' ? pixelId.trim() : '';\n  const id = raw && raw !== 'null' && /^\\d+$/.test(raw) ? raw : '';\n  if (!id) {\n    return null;\n  }\n\n  return (\n    <>\n      <Script\n        id=\"meta-pixel\"\n        strategy=\"afterInteractive\"\n        dangerouslySetInnerHTML={{ __html: PIXEL_SCRIPT(id) }}\n      />\n      <noscript>\n        {/* eslint-disable-next-line @next/next/no-img-element -- 1x1 tracking pixel for no-JS fallback; next/image not applicable in noscript */}\n        <img\n          height={1}\n          width={1}\n          style={{ display: 'none' }}\n          src={`https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1`}\n          alt=\"\"\n        />\n      </noscript>\n    </>\n  );\n}\n","'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { firePixelEvent } from './firePixelEvent';\n\ntype RouteRule = {\n  pattern: RegExp;\n  getParams: (match: RegExpMatchArray) => { contentName: string; contentCategory: string };\n};\n\nfunction slugToTitle(slug: string): string {\n  return slug\n    .split('-')\n    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))\n    .join(' ');\n}\n\n// Checked in order — first match wins. More specific patterns come first.\nconst ROUTE_RULES: RouteRule[] = [\n  {\n    pattern: /^\\/services\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Service' }),\n  },\n  {\n    pattern: /^\\/locations\\/(.+)$/,\n    getParams: ([, slug]) => ({ contentName: slugToTitle(slug), contentCategory: 'Location' }),\n  },\n  {\n    pattern: /^\\/services$/,\n    getParams: () => ({ contentName: 'Services', contentCategory: 'Services' }),\n  },\n  {\n    pattern: /^\\/locations$/,\n    getParams: () => ({ contentName: 'Locations', contentCategory: 'Locations' }),\n  },\n  {\n    pattern: /^\\/portal$/,\n    getParams: () => ({ contentName: 'Member Portal', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/service-menu$/,\n    getParams: () => ({ contentName: 'Service Menu', contentCategory: 'Pricing' }),\n  },\n  {\n    pattern: /^\\/faq$/,\n    getParams: () => ({ contentName: 'FAQ', contentCategory: 'FAQ' }),\n  },\n  {\n    pattern: /^\\/contact$/,\n    getParams: () => ({ contentName: 'Contact', contentCategory: 'Contact' }),\n  },\n];\n\ntype Props = {\n  /** External booking URL. When set, fires InitiateCheckout on any click targeting that URL. */\n  bookingUrl?: string | null;\n};\n\n/**\n * Single client-side tracker placed once in KeystoneRootLayout.\n * - Fires ViewContent on every route change for known page patterns.\n * - Fires InitiateCheckout whenever a visitor clicks a link to the external booking URL.\n *\n * Portal booking tab tracking is handled directly inside PortalPage via PortalTabTracker\n * since intent is only established when the Booking tab is explicitly opened.\n */\nexport function MetaPixelTracker({ bookingUrl }: Props) {\n  const pathname = usePathname();\n\n  useEffect(() => {\n    for (const rule of ROUTE_RULES) {\n      const match = pathname.match(rule.pattern);\n      if (match) {\n        const { contentName, contentCategory } = rule.getParams(match);\n        firePixelEvent('ViewContent', { contentName, contentCategory });\n        break;\n      }\n    }\n  }, [pathname]);\n\n  useEffect(() => {\n    if (!bookingUrl) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const anchor = (e.target as Element).closest('a');\n      if (anchor?.href?.startsWith(bookingUrl)) {\n        firePixelEvent('InitiateCheckout');\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n    return () => document.removeEventListener('click', handleClick);\n  }, [bookingUrl]);\n\n  return null;\n}\n","type FbqFn = (method: string, ...args: unknown[]) => void;\n\nexport type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';\n\nexport interface PixelEventParams {\n  contentName?: string;\n  contentCategory?: string;\n}\n\n/** Raw (unhashed) user identifiers for advanced matching. */\nexport interface PixelUserData {\n  email?: string | null;\n  phone?: string | null;\n}\n\n// Hashed user data stored in sessionStorage for the duration of the browsing session.\n// Keyed by a short namespace to avoid collisions.\nconst STORAGE_KEY = 'ks_pud';\n\nasync function sha256Hex(str: string): Promise<string> {\n  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));\n  return Array.from(new Uint8Array(buffer))\n    .map((b) => b.toString(16).padStart(2, '0'))\n    .join('');\n}\n\nfunction getFbq(): FbqFn | undefined {\n  if (typeof window === 'undefined') return undefined;\n  return (window as Window & { fbq?: FbqFn }).fbq;\n}\n\n/** Read the pixel IDs registered by MetaPixel via the inline init script. */\nfunction getRegisteredPixelIds(): string[] {\n  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];\n}\n\n/** Apply stored hashed user data to every configured Meta Pixel. */\nfunction applyStoredUserData(fbq: FbqFn): void {\n  try {\n    const raw = sessionStorage.getItem(STORAGE_KEY);\n    if (!raw) return;\n    const hashed = JSON.parse(raw) as Record<string, string>;\n    if (Object.keys(hashed).length === 0) return;\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  } catch {\n    // sessionStorage unavailable or JSON malformed — safe to ignore\n  }\n}\n\n/**\n * Hash and store user identifiers so they are automatically included in all\n * subsequent pixel events for this browser session. Call this as soon as\n * identity is known (e.g. contact form submission, portal login step 1).\n */\nexport async function setPixelUserData(userData: PixelUserData): Promise<void> {\n  const hashed: Record<string, string> = {};\n\n  if (userData.email) {\n    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());\n  }\n  if (userData.phone) {\n    const digits = userData.phone.replace(/\\D/g, '');\n    if (digits) hashed.ph = await sha256Hex(digits);\n  }\n\n  if (Object.keys(hashed).length === 0) return;\n\n  try {\n    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));\n  } catch {\n    // sessionStorage unavailable — still apply to fbq for this page load\n  }\n\n  const fbq = getFbq();\n  if (fbq) {\n    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));\n  }\n}\n\n/**\n * Single entry point for all client-side Meta Pixel event fires.\n * Automatically applies any stored user identity before firing so that Meta\n * can match events to known users across the entire session.\n * Silently no-ops if fbq is not loaded (pixel not configured for this site).\n *\n * @param eventId - Optional server-side event ID for browser/server deduplication.\n *   Pass the `eventId` returned by the form submission API so Meta can match and\n *   deduplicate the browser Lead event against the server-side CAPI Lead event.\n *   Format: fbq('track', event, params, { eventID: eventId })\n */\nexport function firePixelEvent(event: PixelEvent, params?: PixelEventParams, eventId?: string): void {\n  const fbq = getFbq();\n  if (!fbq) {\n    console.debug('[MetaPixel] skipped — fbq not loaded', { event });\n    return;\n  }\n\n  // Re-apply stored identity before every event so user data is included\n  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)\n  applyStoredUserData(fbq);\n\n  const normalized: Record<string, string> = {};\n  if (params?.contentName) normalized.content_name = params.contentName;\n  if (params?.contentCategory) normalized.content_category = params.contentCategory;\n\n  const customData = Object.keys(normalized).length > 0 ? normalized : undefined;\n  const eventData = eventId ? { eventID: eventId } : undefined;\n\n  console.debug('[MetaPixel]', event, normalized, eventId ? { eventID: eventId } : '');\n  fbq('track', event, customData, eventData);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.65",
+  "version": "1.0.68",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/BookIframePanel.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+
+interface BookIframePanelProps {
+  bookingHref: string;
+  businessName: string;
+}
+
+export function BookIframePanel({ bookingHref, businessName }: BookIframePanelProps) {
+  const [hasOpened, setHasOpened] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const openModal = () => {
+    setHasOpened(true);
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsVisible(false);
+    closeTimerRef.current = setTimeout(() => setModalOpen(false), 300);
+  };
+
+  // Clear any pending close timer on unmount.
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+
+  // Animate in after mount — double rAF ensures the transition fires after the
+  // element is painted rather than immediately on insertion.
+  useEffect(() => {
+    if (!modalOpen) return;
+    let cancelled = false;
+    const id = requestAnimationFrame(() =>
+      requestAnimationFrame(() => {
+        if (!cancelled) setIsVisible(true);
+      })
+    );
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(id);
+    };
+  }, [modalOpen]);
+
+  // Prevent body scroll while modal is open.
+  useEffect(() => {
+    document.body.style.overflow = modalOpen ? 'hidden' : '';
+    return () => { document.body.style.overflow = ''; };
+  }, [modalOpen]);
+
+  return (
+    <>
+      {/* Blurred iframe preview with overlay message */}
+      <div className="relative rounded-component border border-secondary overflow-hidden" style={{ height: '70vh' }}>
+        {/* iframe — purely visual, non-interactive */}
+        <iframe
+          src={bookingHref}
+          className="w-full h-full pointer-events-none select-none"
+          title="Booking preview"
+          tabIndex={-1}
+          aria-hidden="true"
+        />
+
+        {/* Backdrop blur + message overlay */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-6 py-8 backdrop-blur-[3.9px] bg-primary/70">
+          <div className="w-full max-w-sm rounded-component border border-secondary bg-primary px-6 py-6 text-center shadow-sm">
+            <p className="text-xl font-bold text-primary">Booking Instructions</p>
+            <p className="mt-5 text-sm text-secondary leading-relaxed">
+              We use a separate platform that may ask for an additional sign in or intake details to fully create your profile and collect your appointment information.
+            </p>
+            <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
+              <button
+                onClick={openModal}
+                className="inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+              >
+                Start Booking
+              </button>
+              <a
+                href={bookingHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-interactive border border-secondary bg-secondary px-5 py-2.5 text-sm font-semibold text-primary transition-colors hover:bg-secondary_hover"
+              >
+                Open in New Tab
+                <svg className="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Full-screen modal — kept mounted after first open so the iframe session persists on close/reopen */}
+      {hasOpened && (
+        <div
+          className={`fixed inset-0 z-50 flex flex-col bg-primary transition-[opacity,transform] duration-300 ease-out ${
+            modalOpen && isVisible
+              ? 'opacity-100 translate-y-0'
+              : 'opacity-0 translate-y-3 pointer-events-none'
+          }`}
+        >
+          {/* Modal header */}
+          <div className="flex shrink-0 items-center justify-between border-b border-secondary bg-primary px-4 py-3">
+            <span className="text-sm font-semibold text-primary">{businessName} Booking</span>
+            <button
+              onClick={closeModal}
+              className="inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+            >
+              <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+              Close
+            </button>
+          </div>
+
+          {/* iframe fills the rest of the screen */}
+          <iframe
+            src={bookingHref}
+            className="min-h-0 flex-1 w-full"
+            title="Book appointment"
+            allow="payment"
+          />
+        </div>
+      )}
+    </>
+  );
+}

package/src/design_system/portal/LoginForm.tsx

@@ -12,8 +12,9 @@ interface LoginFormProps {
   onClose?: () => void;
 }
 
+// text-base (16px) prevents iOS from auto-zooming when the input is focused.
 const inputClass =
-  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
+  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-base text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
 function isValidEmail(value: string): boolean {
@@ -206,7 +207,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               placeholder="you@example.com"
               className={inputClass}
               autoComplete="email"
-              autoFocus
             />
           </div>
           <div className="flex items-center gap-3">
@@ -220,7 +220,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               <select
                 value={selectedCountry}
                 onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
-                className="border-r border-secondary bg-secondary px-2 py-2.5 text-sm text-secondary focus:outline-none"
+                className="border-r border-secondary bg-secondary px-2 py-2.5 text-base text-secondary focus:outline-none"
                 aria-label="Country code"
               >
                 {countryOptions.map((opt) => (
@@ -232,7 +232,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 value={phoneValue}
                 onChange={handlePhoneChange}
                 placeholder={nationalPlaceholder}
-                className="flex-1 px-3 py-2.5 text-sm text-primary placeholder-quaternary bg-transparent focus:outline-none"
+                className="flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none"
               />
             </div>
           </div>
@@ -261,7 +261,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               className={inputClass}
               required
               autoComplete="current-password"
-              autoFocus
             />
           </div>
           <div className="pt-1">
@@ -298,7 +297,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                   placeholder="Jane"
                   className={inputClass}
                   autoComplete="given-name"
-                  autoFocus
                 />
               </div>
               <div>
@@ -324,7 +322,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
               className={inputClass}
               required
               autoComplete="new-password"
-              autoFocus={!!welcomeName}
             />
           </div>
           <div>

package/src/design_system/portal/LoginModalController.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { Modal } from '../elements/modal/modal';
 import { LoginForm } from './LoginForm';
@@ -19,11 +19,17 @@ const keystoneFooter = (
 /**
  * Renders a single login modal for the entire portal.
  * Any server-rendered element with `data-open-login-modal` will open it on click.
- * After successful auth the server component re-renders with the new cookie.
+ *
+ * After successful auth, the modal switches to a loading state and stays open
+ * until the router transition (router.refresh / router.push) has fully completed
+ * and the server component has re-rendered with the new session. This prevents
+ * the brief flash of logged-out content that would otherwise appear.
  */
 export function LoginModalController() {
   const [open, setOpen] = useState(false);
   const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const router = useRouter();
 
   useEffect(() => {
@@ -40,24 +46,42 @@ export function LoginModalController() {
   }, []);
 
   const handleSuccess = () => {
-    setOpen(false);
-    if (redirectUrl) {
-      router.push(redirectUrl);
-      setRedirectUrl(null);
-    } else {
-      router.refresh();
-    }
+    setRefreshing(true);
+    startTransition(() => {
+      if (redirectUrl) {
+        router.push(redirectUrl);
+        setRedirectUrl(null);
+      } else {
+        router.refresh();
+      }
+    });
   };
 
+  // Close the modal once the router transition has fully completed and the
+  // server component has re-rendered with the new authenticated state.
+  useEffect(() => {
+    if (refreshing && !isPending) {
+      setOpen(false);
+      setRefreshing(false);
+    }
+  }, [refreshing, isPending]);
+
   return (
     <Modal
       isOpen={open}
-      onClose={() => setOpen(false)}
+      onClose={refreshing ? () => {} : () => setOpen(false)}
       hideHeader
       ariaLabel="Sign in or create account"
-      footer={keystoneFooter}
+      footer={refreshing ? undefined : keystoneFooter}
     >
-      <LoginForm onSuccess={handleSuccess} onClose={() => setOpen(false)} />
+      {refreshing ? (
+        <div className="flex flex-col items-center justify-center py-12 gap-3">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-brand border-t-transparent" />
+          <p className="text-sm text-tertiary">Signing you in…</p>
+        </div>
+      ) : (
+        <LoginForm onSuccess={handleSuccess} onClose={() => setOpen(false)} />
+      )}
     </Modal>
   );
 }

package/src/design_system/portal/PortalPage.tsx

@@ -7,6 +7,7 @@ import { LoginModalController } from './LoginModalController';
 import { MessageComposer } from './MessageComposer';
 import { RowThumbnail } from './RowThumbnail';
 import { PortalTabTracker } from './PortalTabTracker';
+import { BookIframePanel } from './BookIframePanel';
 import {
   CONSUMER_TOKEN_COOKIE,
   fetchConsumerMe,
@@ -508,11 +509,13 @@ function BookPanel({
   bookingLabel,
   bookingAllowsIframe,
   isLoggedIn,
+  businessName,
 }: {
   bookingHref: string;
   bookingLabel: string;
   bookingAllowsIframe: boolean;
   isLoggedIn: boolean;
+  businessName: string;
 }) {
   if (!isLoggedIn) {
     return <LoginWall message="Continue to view booking options." cta="View Booking Options" />;
@@ -522,14 +525,7 @@ function BookPanel({
     return (
       <>
         <PortalTabTracker event="InitiateCheckout" />
-        <div className="rounded-component border border-secondary overflow-hidden" style={{ height: '70vh' }}>
-          <iframe
-            src={bookingHref}
-            className="w-full h-full"
-            title="Book appointment"
-            allow="payment"
-          />
-        </div>
+        <BookIframePanel bookingHref={bookingHref} businessName={businessName} />
       </>
     );
   }
@@ -759,6 +755,7 @@ export async function PortalPage({
               bookingLabel={bookingLabel}
               bookingAllowsIframe={bookingAllowsIframe}
               isLoggedIn={isLoggedIn}
+              businessName={businessName}
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-20 text-center">

package/src/design_system/sections/header-navigation.aman.tsx

@@ -9,7 +9,7 @@ import { cx } from '../../utils/cx';
 import { getLogoUrl } from '../../utils/photo-helpers';
 import type { HeaderComponentProps } from './header-navigation';
 import type { NavItem } from '../../types/config';
-import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';
+import { resolveCtaUrls, isExternalCtaUrl, resolvePortalPath } from '../../lib/cta-urls';
 
 // Maximum items to show before "View All" link
 const MAX_DROPDOWN_ITEMS = 3;
@@ -62,11 +62,7 @@ export function HeaderNavigation({
   // Hide the sticky bottom bar when the user is already on the portal page —
   // the portal has its own Book Now tab so the bar is redundant and confusing.
   const pathname = usePathname();
-  const portalPath = (() => {
-    const url = companyInformation?.portal_url?.trim();
-    if (!url) return null;
-    try { return new URL(url).pathname; } catch { return url.startsWith('/') ? url : null; }
-  })();
+  const portalPath = resolvePortalPath(companyInformation);
   const isPortalPage = portalPath ? pathname?.startsWith(portalPath) : false;
 
   // Cancel any pending close timeout

package/src/design_system/sections/header-navigation.balance.tsx

@@ -8,7 +8,7 @@ import { Button } from '../elements';
 import { getLogoUrl } from '../../utils/photo-helpers';
 import type { HeaderComponentProps } from './header-navigation';
 import type { NavItem } from '../../types/config';
-import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';
+import { resolveCtaUrls, isExternalCtaUrl, resolvePortalPath } from '../../lib/cta-urls';
 
 export function HeaderNavigation({ 
   props, 
@@ -41,11 +41,7 @@ export function HeaderNavigation({
   // Hide the sticky bottom bar when the user is already on the portal page —
   // the portal has its own Book Now tab so the bar is redundant and confusing.
   const pathname = usePathname();
-  const portalPath = (() => {
-    const url = companyInformation?.portal_url?.trim();
-    if (!url) return null;
-    try { return new URL(url).pathname; } catch { return url.startsWith('/') ? url : null; }
-  })();
+  const portalPath = resolvePortalPath(companyInformation);
   const isPortalPage = portalPath ? pathname?.startsWith(portalPath) : false;
 
   const cancelCloseTimeout = useCallback(() => {

package/src/design_system/sections/header-navigation.barelux.tsx

@@ -8,7 +8,7 @@ import { Button } from '../elements';
 import { getLogoUrl } from '../../utils/photo-helpers';
 import type { HeaderComponentProps } from './header-navigation';
 import type { NavItem } from '../../types/config';
-import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';
+import { resolveCtaUrls, isExternalCtaUrl, resolvePortalPath } from '../../lib/cta-urls';
 
 // Maximum items to show before "View All" link
 const MAX_DROPDOWN_ITEMS = 6;
@@ -47,11 +47,7 @@ export function HeaderNavigation({
     // Hide the sticky bottom bar when the user is already on the portal page —
     // the portal has its own Book Now tab so the bar is redundant and confusing.
     const pathname = usePathname();
-    const portalPath = (() => {
-      const url = companyInformation?.portal_url?.trim();
-      if (!url) return null;
-      try { return new URL(url).pathname; } catch { return url.startsWith('/') ? url : null; }
-    })();
+    const portalPath = resolvePortalPath(companyInformation);
     const isPortalPage = portalPath ? pathname?.startsWith(portalPath) : false;
 
     // Cancel any pending close timeout

package/src/design_system/sections/header-navigation.tsx

@@ -12,7 +12,7 @@ import { getLogoUrl } from '../../utils/photo-helpers';
 import type { CompanyInformation } from '../../types/api/company-information';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { NavItem, SiteConfig } from '../../types/config';
-import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';
+import { resolveCtaUrls, isExternalCtaUrl, resolvePortalPath } from '../../lib/cta-urls';
 
 export interface HeaderProps {
   logo: {
@@ -112,11 +112,7 @@ export function HeaderNavigation({
   // Hide the sticky bottom bar when the user is already on the portal page —
   // the portal has its own Book Now tab so the bar is redundant and confusing.
   const pathname = usePathname();
-  const portalPath = (() => {
-    const url = companyInformation?.portal_url?.trim();
-    if (!url) return null;
-    try { return new URL(url).pathname; } catch { return url.startsWith('/') ? url : null; }
-  })();
+  const portalPath = resolvePortalPath(companyInformation);
   const isPortalPage = portalPath ? pathname?.startsWith(portalPath) : false;
 
   const getVariantClasses = () => {

package/src/lib/cta-urls.ts

@@ -25,6 +25,33 @@ export interface ResolvedCtaUrls {
   hasSecondary: boolean;
 }
 
+/**
+ * Extracts the pathname from portal_url for use in client-side route comparisons.
+ * Handles both absolute URLs (https://domain.com/portal → /portal) and relative paths (/portal).
+ *
+ * Returns null when:
+ *  - portal_url is not set
+ *  - the URL cannot be resolved to a non-root pathname (would otherwise match every page)
+ */
+export function resolvePortalPath(
+  companyInformation?: CompanyInformation | null
+): string | null {
+  const url = companyInformation?.portal_url?.trim();
+  if (!url) return null;
+
+  let pathname: string | null = null;
+  try {
+    pathname = new URL(url).pathname;
+  } catch {
+    pathname = url.startsWith('/') ? url : null;
+  }
+
+  if (!pathname || pathname === '/') return null;
+
+  // Normalize trailing slash so startsWith comparisons are consistent.
+  return pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+}
+
 export function resolveCtaUrls(
   companyInformation?: CompanyInformation | null
 ): ResolvedCtaUrls {