keystone-design-bootstrap 1.0.60 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "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

@@ -4,7 +4,7 @@ import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { countries } from '../../utils/countries';
 import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
-
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 type Step = 'identifier' | 'returning' | 'new';
 
 interface LoginFormProps {
@@ -73,9 +73,13 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       });
       const result = await res.json().catch(() => ({ exists: null }));
       if (result.exists === true) {
+        await setPixelUserData({ email: emailVal, phone: fullPhone });
+        firePixelEvent('Lead');
         setWelcomeName(result.firstName ?? null);
         setStep(result.hasPassword === false ? 'new' : 'returning');
       } else if (result.exists === false) {
+        await setPixelUserData({ email: emailVal, phone: fullPhone });
+        firePixelEvent('Lead');
         setStep('new');
       } else {
         setError('Something went wrong. Please check your connection and try again.');

package/src/design_system/portal/PortalPage.tsx

@@ -154,7 +154,7 @@ function LockButton({ label = 'View price' }: { label?: string }) {
   );
 }
 
-function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string }) {
+function LoginWall({ message, cta }: { message: string; cta: string }) {
   return (
     <div className="flex flex-col items-center justify-center py-20 text-center">
       <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
@@ -515,7 +515,7 @@ function BookPanel({
   isLoggedIn: boolean;
 }) {
   if (!isLoggedIn) {
-    return <LoginWall message="Sign in to view booking options." />;
+    return <LoginWall message="Continue to view booking options." cta="View Booking Options" />;
   }
 
   if (bookingAllowsIframe) {
@@ -724,7 +724,13 @@ export async function PortalPage({
         {tab === 'packages' && (
           <PackagesPanel packages={packageList} isLoggedIn={isLoggedIn} portalHref={portalHref} />
         )}
-        {tab === 'specials' && <SpecialsPanel specials={specials} />}
+        {tab === 'specials' && (
+          isLoggedIn ? (
+            <SpecialsPanel specials={specials} />
+          ) : (
+            <LoginWall message="Continue to view specials." cta="View Specials" />
+          )
+        )}
         {tab === 'messages' && (
           isLoggedIn ? (
             <MessagesPanel
@@ -734,7 +740,7 @@ export async function PortalPage({
               businessName={businessName}
             />
           ) : (
-            <LoginWall message="Sign in to view your messages." />
+            <LoginWall message="Continue to view your messages." cta="View Messages" />
           )
         )}
         {tab === 'book' && (

package/src/design_system/sections/contact-section-form.aman.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.balance.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.barelux.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -69,6 +69,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/next/routes/chat.ts

@@ -21,6 +21,8 @@
 // for route handlers. Instead, export a factory so the consuming app can pass in its
 // own `NextResponse` (from its own `next/server`) while we keep the core logic shared.
 
+import { clientContextHeaders } from './proxy-headers';
+
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
 const API_KEY = process.env.API_KEY || '';
 
@@ -48,7 +50,11 @@ export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResp
 
         const response = await fetch(`${API_URL}/public/messages`, {
           method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': API_KEY,
+            ...clientContextHeaders(request),
+          },
           body: JSON.stringify({ identifier, contact_id, body: messageBody, display_name, page_url }),
         });
 

package/src/next/routes/consumer-auth.ts

@@ -15,6 +15,7 @@
  */
 
 import { CONSUMER_TOKEN_COOKIE } from '../../lib/consumer-session';
+import { clientContextHeaders } from './proxy-headers';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type NextResponseLike = { json: (body: unknown, init?: ResponseInit) => any };
@@ -29,11 +30,12 @@ function getApiKey(): string {
   return process.env.API_KEY || '';
 }
 
-function apiHeaders(): Record<string, string> {
+function apiHeaders(request?: Request): Record<string, string> {
   const key = getApiKey();
   return {
     'Content-Type': 'application/json',
     ...(key ? { 'X-API-Key': key } : {}),
+    ...(request ? clientContextHeaders(request) : {}),
   };
 }
 
@@ -51,7 +53,7 @@ async function handleInitiate(request: Request, NR: NextResponseLike): Promise<R
   try {
     const res = await fetch(`${getApiUrl()}/consumer/auth/initiate`, {
       method: 'POST',
-      headers: apiHeaders(),
+      headers: apiHeaders(request),
       body: JSON.stringify({ email: email || undefined, phone: phone || undefined }),
     });
 
@@ -82,7 +84,7 @@ async function handleLogin(request: Request, NR: NextResponseLike): Promise<Resp
 
   const res = await fetch(`${getApiUrl()}/consumer/auth/login`, {
     method: 'POST',
-    headers: apiHeaders(),
+    headers: apiHeaders(request),
     body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password }),
   });
 
@@ -119,7 +121,7 @@ async function handleSignup(request: Request, NR: NextResponseLike): Promise<Res
 
   const res = await fetch(`${getApiUrl()}/consumer/auth/signup`, {
     method: 'POST',
-    headers: apiHeaders(),
+    headers: apiHeaders(request),
     body: JSON.stringify({
       email: email || undefined,
       phone: phone || undefined,

package/src/next/routes/form.ts

@@ -15,6 +15,8 @@
 // Export a factory so the consuming app can pass its own `NextResponse` (from its own
 // `next/server`) to avoid type identity conflicts when used as a local file dependency.
 
+import { clientContextHeaders } from './proxy-headers';
+
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
 const API_KEY = process.env.API_KEY || '';
 
@@ -38,6 +40,7 @@ export function createFormRouteHandlers(deps?: { NextResponse?: { json: JsonResp
           headers: {
             'Content-Type': 'application/json',
             'X-API-Key': API_KEY,
+            ...clientContextHeaders(request),
           },
           body: JSON.stringify(body),
         });

package/src/next/routes/proxy-headers.ts

@@ -0,0 +1,22 @@
+/**
+ * Extracts the real client IP and user-agent from an incoming Next.js route
+ * request and returns them as headers to forward to the upstream Rails API.
+ *
+ * Cloudflare and other load-balancers set x-real-ip (or x-forwarded-for) on
+ * inbound requests before they reach the Next.js function. Without this, the
+ * Rails API sees the Next.js server IP instead of the real browser IP, which
+ * produces inaccurate server-side CAPI signals.
+ *
+ * Convention: forwarded as X-Real-Client-IP / X-Real-Client-UA so that Rails
+ * can read them explicitly without conflicting with its own proxy middleware.
+ */
+export function clientContextHeaders(request: Request): Record<string, string> {
+  const ip =
+    request.headers.get('x-real-ip') ||
+    request.headers.get('x-forwarded-for')?.split(',')[0]?.trim();
+  const ua = request.headers.get('user-agent');
+  const headers: Record<string, string> = {};
+  if (ip) headers['X-Real-Client-IP'] = ip;
+  if (ua) headers['X-Real-Client-UA'] = ua;
+  return headers;
+}

package/src/tracking/MetaPixel.tsx

@@ -14,6 +14,10 @@ const PIXEL_SCRIPT = (pixelId: string) => `
   s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');
   fbq('init', '${pixelId.replace(/'/g, "\\'")}');
   fbq('track', 'PageView');
+  window.__ks_pixel_ids = window.__ks_pixel_ids || [];
+  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, "\\'")}') === -1) {
+    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, "\\'")}');
+  }
 `;
 
 export type MetaPixelProps = {

package/src/tracking/firePixelEvent.ts

@@ -1,4 +1,4 @@
-type FbqFn = (method: string, eventName: string, params?: Record<string, string>) => void;
+type FbqFn = (method: string, ...args: unknown[]) => void;
 
 export type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';
 
@@ -7,20 +7,97 @@ export interface PixelEventParams {
   contentCategory?: string;
 }
 
+/** Raw (unhashed) user identifiers for advanced matching. */
+export interface PixelUserData {
+  email?: string | null;
+  phone?: string | null;
+}
+
+// Hashed user data stored in sessionStorage for the duration of the browsing session.
+// Keyed by a short namespace to avoid collisions.
+const STORAGE_KEY = 'ks_pud';
+
+async function sha256Hex(str: string): Promise<string> {
+  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+function getFbq(): FbqFn | undefined {
+  if (typeof window === 'undefined') return undefined;
+  return (window as Window & { fbq?: FbqFn }).fbq;
+}
+
+/** Read the pixel IDs registered by MetaPixel via the inline init script. */
+function getRegisteredPixelIds(): string[] {
+  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];
+}
+
+/** Apply stored hashed user data to every configured Meta Pixel. */
+function applyStoredUserData(fbq: FbqFn): void {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const hashed = JSON.parse(raw) as Record<string, string>;
+    if (Object.keys(hashed).length === 0) return;
+    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));
+  } catch {
+    // sessionStorage unavailable or JSON malformed — safe to ignore
+  }
+}
+
+/**
+ * Hash and store user identifiers so they are automatically included in all
+ * subsequent pixel events for this browser session. Call this as soon as
+ * identity is known (e.g. contact form submission, portal login step 1).
+ */
+export async function setPixelUserData(userData: PixelUserData): Promise<void> {
+  const hashed: Record<string, string> = {};
+
+  if (userData.email) {
+    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());
+  }
+  if (userData.phone) {
+    const digits = userData.phone.replace(/\D/g, '');
+    if (digits) hashed.ph = await sha256Hex(digits);
+  }
+
+  if (Object.keys(hashed).length === 0) return;
+
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));
+  } catch {
+    // sessionStorage unavailable — still apply to fbq for this page load
+  }
+
+  const fbq = getFbq();
+  if (fbq) {
+    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));
+  }
+}
+
 /**
  * Single entry point for all client-side Meta Pixel event fires.
+ * 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).
  */
 export function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void {
-  if (typeof window === 'undefined') return;
-  const fbq = (window as Window & { fbq?: FbqFn }).fbq;
+  const fbq = getFbq();
   if (!fbq) {
     console.debug('[MetaPixel] skipped — fbq not loaded', { event });
     return;
   }
+
+  // Re-apply stored identity before every event so user data is included
+  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)
+  applyStoredUserData(fbq);
+
   const normalized: Record<string, string> = {};
   if (params?.contentName) normalized.content_name = params.contentName;
   if (params?.contentCategory) normalized.content_category = params.contentCategory;
+
   console.debug('[MetaPixel]', event, normalized);
   fbq('track', event, Object.keys(normalized).length > 0 ? normalized : undefined);
 }

package/src/tracking/index.ts

@@ -1,5 +1,5 @@
 export { MetaPixel } from './MetaPixel';
 export type { MetaPixelProps } from './MetaPixel';
 export { MetaPixelTracker } from './MetaPixelTracker';
-export { firePixelEvent } from './firePixelEvent';
-export type { PixelEvent, PixelEventParams } from './firePixelEvent';
+export { firePixelEvent, setPixelUserData } from './firePixelEvent';
+export type { PixelEvent, PixelEventParams, PixelUserData } from './firePixelEvent';