keystone-design-bootstrap 1.0.66 → 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":";AAEA,OAAO,YAAY;AAEnB,IAAM,eAAe;AAErB,IAAM,eAAe,CAAC,YAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOqB,YAAY;AAAA,iBAC1D,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,uCAGN,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA,kCACjC,QAAQ,QAAQ,MAAM,KAAK,CAAC;AAAA;AAAA;AAcvD,SAAS,UAAU,EAAE,QAAQ,GAAmB;AACrD,QAAM,MAAM,OAAO,YAAY,WAAW,QAAQ,KAAK,IAAI;AAC3D,QAAM,KAAK,OAAO,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,MAAM;AAC9D,MAAI,CAAC,IAAI;AACP,WAAO;AAAA,EACT;AAEA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAS;AAAA,MACT,yBAAyB,EAAE,QAAQ,aAAa,EAAE,EAAE;AAAA;AAAA,EACtD,GACA,oCAAC,kBAEC;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO,EAAE,SAAS,OAAO;AAAA,MACzB,KAAK,kCAAkC,EAAE;AAAA,MACzC,KAAI;AAAA;AAAA,EACN,CACF,CACF;AAEJ;;;ACxDA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;;;ACc5B,IAAM,cAAc;AAEpB,eAAe,UAAU,KAA8B;AACrD,QAAM,SAAS,MAAM,OAAO,OAAO,OAAO,WAAW,IAAI,YAAY,EAAE,OAAO,GAAG,CAAC;AAClF,SAAO,MAAM,KAAK,IAAI,WAAW,MAAM,CAAC,EACrC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAC1C,KAAK,EAAE;AACZ;AAEA,SAAS,SAA4B;AACnC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAQ,OAAoC;AAC9C;AAGA,SAAS,wBAAkC;AAhC3C;AAiCE,UAAQ,YAAkD,mBAAlD,YAAoE,CAAC;AAC/E;AAGA,SAAS,oBAAoB,KAAkB;AAC7C,MAAI;AACF,UAAM,MAAM,eAAe,QAAQ,WAAW;AAC9C,QAAI,CAAC,IAAK;AACV,UAAM,SAAS,KAAK,MAAM,GAAG;AAC7B,QAAI,OAAO,KAAK,MAAM,EAAE,WAAW,EAAG;AACtC,0BAAsB,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC;AAAA,EACjE,SAAQ;AAAA,EAER;AACF;AAOA,eAAsB,iBAAiB,UAAwC;AAC7E,QAAM,SAAiC,CAAC;AAExC,MAAI,SAAS,OAAO;AAClB,WAAO,KAAK,MAAM,UAAU,SAAS,MAAM,KAAK,EAAE,YAAY,CAAC;AAAA,EACjE;AACA,MAAI,SAAS,OAAO;AAClB,UAAM,SAAS,SAAS,MAAM,QAAQ,OAAO,EAAE;AAC/C,QAAI,OAAQ,QAAO,KAAK,MAAM,UAAU,MAAM;AAAA,EAChD;AAEA,MAAI,OAAO,KAAK,MAAM,EAAE,WAAW,EAAG;AAEtC,MAAI;AACF,mBAAe,QAAQ,aAAa,KAAK,UAAU,MAAM,CAAC;AAAA,EAC5D,SAAQ;AAAA,EAER;AAEA,QAAM,MAAM,OAAO;AACnB,MAAI,KAAK;AACP,0BAAsB,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC;AAAA,EACjE;AACF;AAQO,SAAS,eAAe,OAAmB,QAAiC;AACjF,QAAM,MAAM,OAAO;AACnB,MAAI,CAAC,KAAK;AACR,YAAQ,MAAM,6CAAwC,EAAE,MAAM,CAAC;AAC/D;AAAA,EACF;AAIA,sBAAoB,GAAG;AAEvB,QAAM,aAAqC,CAAC;AAC5C,MAAI,iCAAQ,YAAa,YAAW,eAAe,OAAO;AAC1D,MAAI,iCAAQ,gBAAiB,YAAW,mBAAmB,OAAO;AAElE,UAAQ,MAAM,eAAe,OAAO,UAAU;AAC9C,MAAI,SAAS,OAAO,OAAO,KAAK,UAAU,EAAE,SAAS,IAAI,aAAa,MAAS;AACjF;;;AD3FA,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,GAAG;AACb;AAGA,IAAM,cAA2B;AAAA,EAC/B;AAAA,IACE,SAAS;AAAA,IACT,WAAW,CAAC,CAAC,EAAE,IAAI,OAAO,EAAE,aAAa,YAAY,IAAI,GAAG,iBAAiB,UAAU;AAAA,EACzF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,CAAC,CAAC,EAAE,IAAI,OAAO,EAAE,aAAa,YAAY,IAAI,GAAG,iBAAiB,WAAW;AAAA,EAC1F;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,YAAY,iBAAiB,WAAW;AAAA,EAC3E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,aAAa,iBAAiB,YAAY;AAAA,EAC7E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,iBAAiB,iBAAiB,UAAU;AAAA,EAC/E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,gBAAgB,iBAAiB,UAAU;AAAA,EAC9E;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,OAAO,iBAAiB,MAAM;AAAA,EACjE;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,WAAW,OAAO,EAAE,aAAa,WAAW,iBAAiB,UAAU;AAAA,EACzE;AACF;AAeO,SAAS,iBAAiB,EAAE,WAAW,GAAU;AACtD,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,eAAW,QAAQ,aAAa;AAC9B,YAAM,QAAQ,SAAS,MAAM,KAAK,OAAO;AACzC,UAAI,OAAO;AACT,cAAM,EAAE,aAAa,gBAAgB,IAAI,KAAK,UAAU,KAAK;AAC7D,uBAAe,eAAe,EAAE,aAAa,gBAAgB,CAAC;AAC9D;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,UAAM,cAAc,CAAC,MAAkB;AApF3C;AAqFM,YAAM,SAAU,EAAE,OAAmB,QAAQ,GAAG;AAChD,WAAI,sCAAQ,SAAR,mBAAc,WAAW,aAAa;AACxC,uBAAe,kBAAkB;AAAA,MACnC;AAAA,IACF;AAEA,aAAS,iBAAiB,SAAS,WAAW;AAC9C,WAAO,MAAM,SAAS,oBAAoB,SAAS,WAAW;AAAA,EAChE,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;","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.66",
+  "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/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/lib/cta-urls.ts

@@ -28,17 +28,28 @@ export interface ResolvedCtaUrls {
 /**
  * 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 {
-    return new URL(url).pathname;
+    pathname = new URL(url).pathname;
   } catch {
-    return url.startsWith('/') ? url : null;
+    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(