keystone-design-bootstrap 1.0.58 → 1.0.60

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 { trackMetaLead } from '../../tracking/trackMetaLead';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,7 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
-                trackMetaLead(result.eventId);
+                firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
                 setSubmitStatus('error');

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 { trackMetaLead } from '../../tracking/trackMetaLead';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,7 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
-                trackMetaLead(result.eventId);
+                firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
                 setSubmitStatus('error');

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 { trackMetaLead } from '../../tracking/trackMetaLead';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -69,7 +69,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
-                trackMetaLead(result.eventId);
+                firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
                 setSubmitStatus('error');

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

@@ -56,10 +56,7 @@ export function HeaderNavigation({
   
   // Use navigation from config or override
   const navigation = navigationOverride || config?.navigation?.header || [];
-  const ctaUrls = resolveCtaUrls(companyInformation, props?.cta_button, {
-    primaryHrefOverride: props?.primaryHrefOverride,
-    secondaryHrefOverride: props?.secondaryHrefOverride,
-  });
+  const ctaUrls = resolveCtaUrls(companyInformation);
 
   // Cancel any pending close timeout
   const cancelCloseTimeout = useCallback(() => {

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

@@ -35,10 +35,7 @@ export function HeaderNavigation({
   const companyName = logoTextOverride || companyInformation?.company_name || props?.logo?.text || '';
   
   const navigation = navigationOverride || config?.navigation?.header || [];
-  const ctaUrls = resolveCtaUrls(companyInformation, props?.cta_button, {
-    primaryHrefOverride: props?.primaryHrefOverride,
-    secondaryHrefOverride: props?.secondaryHrefOverride,
-  });
+  const ctaUrls = resolveCtaUrls(companyInformation);
 
   const cancelCloseTimeout = useCallback(() => {
     if (closeTimeoutRef.current) {

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

@@ -41,10 +41,7 @@ export function HeaderNavigation({
     
     // Use navigation from config or override
     const navigation = navigationOverride || config?.navigation?.header || [];
-    const ctaUrls = resolveCtaUrls(companyInformation, props?.cta_button, {
-        primaryHrefOverride: props?.primaryHrefOverride,
-        secondaryHrefOverride: props?.secondaryHrefOverride,
-    });
+    const ctaUrls = resolveCtaUrls(companyInformation);
 
     // Cancel any pending close timeout
     const cancelCloseTimeout = useCallback(() => {

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

@@ -27,10 +27,6 @@ export interface HeaderProps {
     secondary_href?: string;
     secondary_target?: '_blank' | '_self';
   };
-  /** When set, overrides the default primary CTA URL (booking or /contact). */
-  primaryHrefOverride?: string | null;
-  /** When set, overrides the default secondary CTA URL (/contact). */
-  secondaryHrefOverride?: string | null;
 }
 
 export interface HeaderComponentProps {
@@ -102,10 +98,7 @@ export function HeaderNavigation({
   const logoImage = logoImageOverride || getLogoUrl(websitePhotos) || props?.logo?.image;
   const logoText = logoTextOverride || companyInformation?.company_name || props?.logo?.text || '';
   const cta_button = props?.cta_button;
-  const ctaUrls = resolveCtaUrls(companyInformation, cta_button, {
-    primaryHrefOverride: props?.primaryHrefOverride,
-    secondaryHrefOverride: props?.secondaryHrefOverride,
-  });
+  const ctaUrls = resolveCtaUrls(companyInformation);
   
   const logo = {
     text: logoText || '',

package/src/index.ts

@@ -7,6 +7,6 @@ export * from './design_system/sections';
 export * from './design_system/elements';
 export * from './lib/actions';
 export { resolveCtaUrls, isExternalCtaUrl } from './lib/cta-urls';
-export type { ResolvedCtaUrls, CtaUrlOverrides } from './lib/cta-urls';
+export type { ResolvedCtaUrls } from './lib/cta-urls';
 export * from './contexts';
 export { ChatWidget } from './design_system/components/ChatWidget';

package/src/lib/cta-urls.ts

@@ -1,7 +1,13 @@
 /**
- * Single place that defines default primary and secondary CTA URLs.
- * Primary = external management (booking) URL when present, else /contact.
- * Secondary = /contact.
+ * Resolves the primary and secondary CTA hrefs used across the site.
+ *
+ * Resolution order for primaryHref:
+ *   1. portal_url            — set by backend when account has consumer portal enabled
+ *   2. external_management_url — booking platform URL from the API
+ *   3. /contact               — final fallback
+ *
+ * No per-site configuration needed. Enable the portal in the admin console and
+ * every CTA across the site automatically routes to the portal.
  */
 
 import type { CompanyInformation } from '../types/api/company-information';
@@ -13,49 +19,20 @@ export function isExternalCtaUrl(href: string): boolean {
   return href.startsWith('http://') || href.startsWith('https://');
 }
 
-export interface CtaUrlOverrides {
-  primaryHrefOverride?: string | null;
-  secondaryHrefOverride?: string | null;
-}
-
-export interface CtaButtonLike {
-  href?: string | null;
-  secondary_href?: string | null;
-}
-
 export interface ResolvedCtaUrls {
   primaryHref: string;
   secondaryHref: string;
   hasSecondary: boolean;
 }
 
-/**
- * Resolve primary and secondary CTA hrefs from company info and optional overrides.
- * - primaryHref = external_management_url (if set) else /contact
- * - secondaryHref = /contact
- * Overrides win when provided.
- */
 export function resolveCtaUrls(
-  companyInformation?: CompanyInformation | null,
-  _ctaButton?: CtaButtonLike | null,
-  overrides?: CtaUrlOverrides | null
+  companyInformation?: CompanyInformation | null
 ): ResolvedCtaUrls {
+  const portalUrl = companyInformation?.portal_url?.trim() || null;
   const externalUrl = companyInformation?.external_management_url?.trim() || null;
-  const hasSecondary = !!externalUrl;
-
-  const primaryHref =
-    overrides?.primaryHrefOverride !== undefined && overrides.primaryHrefOverride !== null
-      ? overrides.primaryHrefOverride
-      : (externalUrl || CONTACT_PATH);
-
-  const secondaryHref =
-    overrides?.secondaryHrefOverride !== undefined && overrides.secondaryHrefOverride !== null
-      ? overrides.secondaryHrefOverride
-      : CONTACT_PATH;
+  const primaryHref = portalUrl ?? externalUrl ?? CONTACT_PATH;
+  const secondaryHref = CONTACT_PATH;
+  const hasSecondary = primaryHref !== CONTACT_PATH;
 
-  return {
-    primaryHref,
-    secondaryHref,
-    hasSecondary,
-  };
+  return { primaryHref, secondaryHref, hasSecondary };
 }

package/src/next/layouts/root-layout.tsx

@@ -24,10 +24,10 @@ export type KeystoneRootLayoutHeaderOverrides = {
   logoHref?: string;
   /** Overrides the title/company name shown in the center of the nav bar (otherwise from business_info) */
   logoText?: string;
+  /** Overrides the primary CTA button label (default: "Contact Us") */
   ctaLabel?: string;
-  ctaHref?: string;
+  /** Overrides the secondary CTA button label (default: "Book Now" when a booking/portal URL is configured) */
   secondaryLabel?: string;
-  secondaryHref?: string;
 };
 
 export type KeystoneRootLayoutOptions = {
@@ -137,7 +137,9 @@ export async function KeystoneRootLayout(props: {
   const theme = config.site.theme;
 
   const ci = companyInformation as CompanyInformation | null;
-  const externalManagementUrl = ci?.external_management_url || 'https://booking.example.com';
+  const externalManagementUrl = ci?.external_management_url?.trim() || null;
+  const portalUrl = ci?.portal_url?.trim() || null;
+  const bookingHref = portalUrl ?? externalManagementUrl ?? null;
   const chatEnabled = Boolean(ci?.chat_enabled);
 
   const headerOverrides = options?.headerOverrides;
@@ -148,10 +150,7 @@ export async function KeystoneRootLayout(props: {
     },
     cta_button: {
       label: headerOverrides?.ctaLabel || 'Contact Us',
-      href: headerOverrides?.ctaHref || '/contact',
-      secondary_label:
-        headerOverrides?.secondaryLabel ?? (externalManagementUrl ? 'Book Now' : undefined),
-      secondary_href: headerOverrides?.secondaryHref ?? externalManagementUrl,
+      secondary_label: headerOverrides?.secondaryLabel ?? (bookingHref ? 'Book Now' : undefined),
     },
   };
 

package/src/styles/style-overrides.aman.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #E5E2D9;
   --color-border-secondary: #D5D2C9;
+
+  /* Radius — minimal/sharp aesthetic */
+  --radius-component: 0.25rem;
+  --radius-interactive: 0.25rem;
+  --radius-input: 0.25rem;
+  --radius-badge: 0.25rem;
 }
 
 /* Body text uses Inter */

package/src/styles/style-overrides.barelux.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #EEEAE7;
   --color-border-secondary: #E5E1DE;
+
+  /* Radius — soft/rounded aesthetic */
+  --radius-component: 0.75rem;
+  --radius-interactive: 0.5rem;
+  --radius-input: 0.5rem;
+  --radius-badge: 9999px;
 }
 
 /* Body text uses Poppins */

package/src/styles/theme.css

@@ -54,6 +54,12 @@
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
+    /* Semantic radius tokens — override per theme to get consistent rounding everywhere */
+    --radius-component: 0.5rem;    /* cards, panels, containers */
+    --radius-interactive: 0.375rem; /* buttons, tabs */
+    --radius-input: 0.375rem;       /* form inputs */
+    --radius-badge: 9999px;         /* pill badges / tags */
+
     /* ==================== SHADOWS ==================== */
     --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
     --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);

package/src/tracking/MetaPixelTracker.tsx

@@ -2,14 +2,20 @@
 
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { trackViewContent } from './trackViewContent';
-import { trackInitiateCheckout } from './trackInitiateCheckout';
+import { firePixelEvent } from './firePixelEvent';
 
 type RouteRule = {
   pattern: RegExp;
   getParams: (match: RegExpMatchArray) => { contentName: string; contentCategory: string };
 };
 
+function slugToTitle(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
 // Checked in order — first match wins. More specific patterns come first.
 const ROUTE_RULES: RouteRule[] = [
   {
@@ -28,6 +34,10 @@ const ROUTE_RULES: RouteRule[] = [
     pattern: /^\/locations$/,
     getParams: () => ({ contentName: 'Locations', contentCategory: 'Locations' }),
   },
+  {
+    pattern: /^\/portal$/,
+    getParams: () => ({ contentName: 'Member Portal', contentCategory: 'Pricing' }),
+  },
   {
     pattern: /^\/service-menu$/,
     getParams: () => ({ contentName: 'Service Menu', contentCategory: 'Pricing' }),
@@ -42,13 +52,6 @@ const ROUTE_RULES: RouteRule[] = [
   },
 ];
 
-function slugToTitle(slug: string): string {
-  return slug
-    .split('-')
-    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(' ');
-}
-
 type Props = {
   /** External booking URL. When set, fires InitiateCheckout on any click targeting that URL. */
   bookingUrl?: string | null;
@@ -58,6 +61,9 @@ type Props = {
  * Single client-side tracker placed once in KeystoneRootLayout.
  * - Fires ViewContent on every route change for known page patterns.
  * - Fires InitiateCheckout whenever a visitor clicks a link to the external booking URL.
+ *
+ * Portal booking tab tracking is handled directly inside PortalPage via PortalTabTracker
+ * since intent is only established when the Booking tab is explicitly opened.
  */
 export function MetaPixelTracker({ bookingUrl }: Props) {
   const pathname = usePathname();
@@ -67,7 +73,7 @@ export function MetaPixelTracker({ bookingUrl }: Props) {
       const match = pathname.match(rule.pattern);
       if (match) {
         const { contentName, contentCategory } = rule.getParams(match);
-        trackViewContent(contentName, contentCategory);
+        firePixelEvent('ViewContent', { contentName, contentCategory });
         break;
       }
     }
@@ -79,8 +85,7 @@ export function MetaPixelTracker({ bookingUrl }: Props) {
     const handleClick = (e: MouseEvent) => {
       const anchor = (e.target as Element).closest('a');
       if (anchor?.href?.startsWith(bookingUrl)) {
-        console.debug('[MetaPixel] Booking link clicked', { href: anchor.href });
-        trackInitiateCheckout();
+        firePixelEvent('InitiateCheckout');
       }
     };
 

package/src/tracking/firePixelEvent.ts

@@ -0,0 +1,26 @@
+type FbqFn = (method: string, eventName: string, params?: Record<string, string>) => void;
+
+export type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';
+
+export interface PixelEventParams {
+  contentName?: string;
+  contentCategory?: string;
+}
+
+/**
+ * Single entry point for all client-side Meta Pixel event fires.
+ * 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;
+  if (!fbq) {
+    console.debug('[MetaPixel] skipped — fbq not loaded', { event });
+    return;
+  }
+  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,9 +1,5 @@
 export { MetaPixel } from './MetaPixel';
 export type { MetaPixelProps } from './MetaPixel';
-export { trackMetaLead } from './trackMetaLead';
-export { trackViewContent } from './trackViewContent';
-export { trackInitiateCheckout } from './trackInitiateCheckout';
 export { MetaPixelTracker } from './MetaPixelTracker';
-// Kept for custom use — MetaPixelTracker covers the standard cases automatically.
-export { ViewContentTracker } from './ViewContentTracker';
-export { BookingCtaTracker } from './BookingCtaTracker';
+export { firePixelEvent } from './firePixelEvent';
+export type { PixelEvent, PixelEventParams } from './firePixelEvent';

package/src/types/api/company-information.ts

@@ -36,6 +36,8 @@ export interface CompanyInformation {
   sales_email?: string;
   business_hours?: string;
   external_management_url?: string;
+  /** Member portal URL for this account. When set, used as the primary CTA instead of external_management_url. */
+  portal_url?: string | null;
   created_at: string;
   updated_at: string;
   photo_attachments?: PhotoAttachment[];

package/src/tracking/BookingCtaTracker.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { trackInitiateCheckout } from './trackInitiateCheckout';
-
-type Props = {
-  bookingUrl: string | null | undefined;
-};
-
-/**
- * Drop into the root layout to fire Meta Pixel InitiateCheckout whenever a visitor
- * clicks any anchor whose href points to the external booking URL.
- * Uses document-level click delegation — no changes needed to individual buttons.
- */
-export function BookingCtaTracker({ bookingUrl }: Props) {
-  useEffect(() => {
-    if (!bookingUrl) return;
-
-    const handleClick = (e: MouseEvent) => {
-      const anchor = (e.target as Element).closest('a');
-      if (!anchor) return;
-      if (anchor.href && anchor.href.startsWith(bookingUrl)) {
-        trackInitiateCheckout();
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [bookingUrl]);
-
-  return null;
-}

package/src/tracking/ViewContentTracker.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { trackViewContent } from './trackViewContent';
-
-type Props = {
-  contentName?: string;
-  contentCategory?: string;
-};
-
-/**
- * Drop into any server-rendered page to fire the Meta Pixel ViewContent event on mount.
- * Renders nothing — purely a tracking side-effect component.
- */
-export function ViewContentTracker({ contentName, contentCategory }: Props) {
-  useEffect(() => {
-    trackViewContent(contentName, contentCategory);
-  }, [contentName, contentCategory]);
-
-  return null;
-}

package/src/tracking/trackInitiateCheckout.ts

@@ -1,16 +0,0 @@
-type FbqFn = (method: string, eventName: string, params?: object) => void;
-
-/**
- * Fires the client-side Meta Pixel InitiateCheckout event.
- * Call this when a visitor clicks a booking / scheduling button.
- */
-export function trackInitiateCheckout(): void {
-  if (typeof window === 'undefined') return;
-  const fbq = (window as Window & { fbq?: FbqFn }).fbq;
-  if (!fbq) {
-    console.debug('[MetaPixel] InitiateCheckout skipped — fbq not loaded');
-    return;
-  }
-  console.debug('[MetaPixel] InitiateCheckout');
-  fbq('track', 'InitiateCheckout');
-}

package/src/tracking/trackMetaLead.ts

@@ -1,14 +0,0 @@
-/**
- * Fires the client-side Meta Pixel Lead event with the same eventID as server CAPI
- * so Meta can deduplicate browser + server events.
- */
-export function trackMetaLead(eventId: string | undefined): void {
-  if (typeof window === 'undefined' || !eventId) return;
-  const fbq = (window as Window & { fbq?: (method: string, eventName: string, params?: object, options?: { eventID?: string }) => void }).fbq;
-  if (!fbq) {
-    console.debug('[MetaPixel] Lead skipped — fbq not loaded', { eventId });
-    return;
-  }
-  console.debug('[MetaPixel] Lead', { eventId });
-  fbq('track', 'Lead', {}, { eventID: eventId });
-}

package/src/tracking/trackViewContent.ts

@@ -1,19 +0,0 @@
-type FbqFn = (method: string, eventName: string, params?: object) => void;
-
-/**
- * Fires the client-side Meta Pixel ViewContent event.
- * Call this on service/offer detail pages so Meta knows which content is most engaging.
- */
-export function trackViewContent(contentName?: string, contentCategory?: string): void {
-  if (typeof window === 'undefined') return;
-  const fbq = (window as Window & { fbq?: FbqFn }).fbq;
-  if (!fbq) {
-    console.debug('[MetaPixel] ViewContent skipped — fbq not loaded', { contentName, contentCategory });
-    return;
-  }
-  const params: Record<string, string> = {};
-  if (contentName) params.content_name = contentName;
-  if (contentCategory) params.content_category = contentCategory;
-  console.debug('[MetaPixel] ViewContent', params);
-  fbq('track', 'ViewContent', params);
-}