keystone-design-bootstrap 1.0.57 → 1.0.59

package/dist/utils/markdown-toc.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Utility functions for extracting table of contents from markdown
+ */
+interface TableOfContentsItem {
+    id: string;
+    title: string;
+    level: number;
+}
+/**
+ * Extract headings from markdown content and generate table of contents
+ */
+declare function extractTableOfContents(markdown: string): TableOfContentsItem[];
+
+export { type TableOfContentsItem, extractTableOfContents };

package/dist/utils/phone-helpers.d.ts

@@ -0,0 +1,24 @@
+/**
+ * List of countries with their respective country code, flag, phone code, and phone mask.
+ */
+declare const countries: ({
+    name: string;
+    code: string;
+    flag: string;
+    phoneCode: string;
+    phoneMask: string;
+} | {
+    name: string;
+    code: string;
+    flag: string;
+    phoneCode: string;
+    phoneMask?: undefined;
+})[];
+
+type Country = (typeof countries)[0];
+/** Get national-format mask from country by stripping the country code prefix (e.g. "+1 (###) ###-####" → "(###) ###-####"). */
+declare function getNationalMask(country: Country | undefined): string;
+/** Format a raw digit string into a mask pattern where '#' represents one digit. No trailing literals so backspace works naturally. */
+declare function formatDigitsToMask(digits: string, mask: string): string;
+
+export { formatDigitsToMask, getNationalMask };

package/dist/utils/photo-helpers.d.ts

@@ -0,0 +1,38 @@
+import { P as PhotoAttachment } from '../photos-CmBdWiuZ.js';
+import { W as WebsitePhotos } from '../website-photos-Cl1YqAno.js';
+
+/**
+ * Helper functions for extracting photo URLs from photo associations
+ */
+
+/**
+ * True if the URL looks like a video by path extension. Used to avoid using video URLs in img src.
+ */
+declare function isVideoUrl(url: string | null | undefined): boolean;
+/**
+ * Get the best available photo URL from a photos array
+ * Priority: featured photo > first photo > fallback
+ */
+declare function getPhotoUrl(photos?: PhotoAttachment[]): string | null;
+/**
+ * Get avatar URL for team members or authors.
+ * Returns a URL only when there is a real photo in attachments; otherwise null.
+ * Callers should use PhotoWithFallback (gradient fallback) or Avatar with initials when null.
+ */
+/** Optional fallbackId/name reserved for future use (e.g. deterministic fallback). */
+declare function getAvatarUrl(photos?: PhotoAttachment[], _fallbackId?: number | string, _name?: string): string | null;
+/**
+ * Get featured image URL for blog posts
+ */
+declare function getFeaturedImageUrl(photos?: PhotoAttachment[]): string | null;
+/**
+ * Get logo URL from website_photos API (which aggregates from account_photos)
+ *
+ * The website_photos API endpoint returns logos from account_photos with photo_type: 'logo',
+ * with industry fallback. This is the primary and only source for logos.
+ *
+ * Returns undefined if no logo is available (for PhotoWithFallback gradient fallback)
+ */
+declare function getLogoUrl(websitePhotos?: WebsitePhotos | null): string | undefined;
+
+export { PhotoAttachment, getAvatarUrl, getFeaturedImageUrl, getLogoUrl, getPhotoUrl, isVideoUrl };

package/dist/website-photos-Cl1YqAno.d.ts

@@ -0,0 +1,21 @@
+interface WebsitePhoto {
+    id: number;
+    url: string;
+    thumbnail_url?: string;
+    medium_url?: string;
+    alt: string;
+    source: 'account' | 'industry';
+}
+interface WebsitePhotos {
+    logo?: WebsitePhoto | null;
+    favicon?: WebsitePhoto | null;
+    hero?: WebsitePhoto | null;
+    contact?: WebsitePhoto | null;
+    about?: WebsitePhoto | null;
+    careers?: WebsitePhoto | null;
+    preview_image?: WebsitePhoto | null;
+    stock_photos?: WebsitePhoto[];
+}
+type WebsitePhotosResponse = WebsitePhotos;
+
+export type { WebsitePhotos as W, WebsitePhoto as a, WebsitePhotosResponse as b };

package/package.json

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

package/src/design_system/portal/PortalPage.tsx

@@ -6,6 +6,7 @@ import { LogoutButton } from './LogoutButton';
 import { LoginModalController } from './LoginModalController';
 import { MessageComposer } from './MessageComposer';
 import { RowThumbnail } from './RowThumbnail';
+import { PortalTabTracker } from './PortalTabTracker';
 import {
   CONSUMER_TOKEN_COOKIE,
   fetchConsumerMe,
@@ -264,38 +265,41 @@ function ServicesPanel({
   }
 
   return (
-    <div className="divide-y divide-tertiary rounded-xl border border-secondary bg-primary overflow-hidden">
-      {activeServices.map((service) => (
-        <details key={service.id} className="group">
-          <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
-            <div>
-              <span className="font-medium text-primary">{service.name}</span>
-              {service.summary && (
-                <p className="mt-0.5 text-sm text-tertiary">{service.summary}</p>
-              )}
-            </div>
-            <div className="ml-4 flex items-center gap-2 shrink-0">
-              <span className="text-xs text-quaternary">{service.service_items?.length ?? 0} items</span>
-              <svg className="size-4 text-quaternary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </summary>
-          {service.service_items && service.service_items.length > 0 && (
-            <div className="border-t border-tertiary bg-secondary divide-y divide-tertiary">
-              {service.service_items.map((item) => (
-                <ServiceItemRow
-                  key={item.id}
-                  item={item}
-                  isLoggedIn={isLoggedIn}
-                  specialsHref={specialsHref}
-                />
-              ))}
-            </div>
-          )}
-        </details>
-      ))}
-    </div>
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} />
+      <div className="divide-y divide-tertiary rounded-xl border border-secondary bg-primary overflow-hidden">
+        {activeServices.map((service) => (
+          <details key={service.id} className="group">
+            <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
+              <div>
+                <span className="font-medium text-primary">{service.name}</span>
+                {service.summary && (
+                  <p className="mt-0.5 text-sm text-tertiary">{service.summary}</p>
+                )}
+              </div>
+              <div className="ml-4 flex items-center gap-2 shrink-0">
+                <span className="text-xs text-quaternary">{service.service_items?.length ?? 0} items</span>
+                <svg className="size-4 text-quaternary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </summary>
+            {service.service_items && service.service_items.length > 0 && (
+              <div className="border-t border-tertiary bg-secondary divide-y divide-tertiary">
+                {service.service_items.map((item) => (
+                  <ServiceItemRow
+                    key={item.id}
+                    item={item}
+                    isLoggedIn={isLoggedIn}
+                    specialsHref={specialsHref}
+                  />
+                ))}
+              </div>
+            )}
+          </details>
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -315,11 +319,13 @@ function PackagesPanel({
   if (packages.length === 0) return <EmptyState message="No packages available yet." />;
 
   return (
-    <div className="grid gap-4 sm:grid-cols-2">
-      {packages.map((pkg) => {
-        const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
-        return (
-          <div key={pkg.id} className="group rounded-xl border border-secondary bg-primary p-4 flex flex-col gap-3">
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Packages', contentCategory: 'Packages' }} />
+      <div className="grid gap-4 sm:grid-cols-2">
+        {packages.map((pkg) => {
+          const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
+          return (
+            <div key={pkg.id} className="group rounded-xl border border-secondary bg-primary p-4 flex flex-col gap-3">
             <div className="flex items-start gap-3">
               <RowThumbnail
                 photoAttachments={pkg.photo_attachments}
@@ -382,10 +388,11 @@ function PackagesPanel({
                 )}
               </div>
             )}
-          </div>
-        );
-      })}
-    </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
   );
 }
 
@@ -397,31 +404,34 @@ function SpecialsPanel({ specials }: { specials: SpecialItem[] }) {
   }
 
   return (
-    <div className="space-y-3">
-      {specials.map((special) => (
-        <div key={special.id} className="group flex items-start gap-3 rounded-xl border border-secondary bg-primary px-4 py-4">
-          <RowThumbnail
-            photoAttachments={special.photoAttachments}
-            seed={`special-${special.id}`}
-            alt={special.parentName}
-          />
-          <div className="flex-1 min-w-0">
-            <p className="font-semibold text-primary">{special.name}</p>
-            {special.value_terms && (
-              <p className="mt-0.5 text-sm text-secondary">{special.value_terms}</p>
-            )}
-            <p className="mt-1 text-xs text-quaternary">
-              {special.parentType === 'service' ? 'Service' : 'Package'}: {special.parentName}
-            </p>
-            {special.expires_at && (
-              <p className="mt-0.5 text-xs text-quaternary">
-                Expires {new Date(special.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} />
+      <div className="space-y-3">
+        {specials.map((special) => (
+          <div key={special.id} className="group flex items-start gap-3 rounded-xl border border-secondary bg-primary px-4 py-4">
+            <RowThumbnail
+              photoAttachments={special.photoAttachments}
+              seed={`special-${special.id}`}
+              alt={special.parentName}
+            />
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-primary">{special.name}</p>
+              {special.value_terms && (
+                <p className="mt-0.5 text-sm text-secondary">{special.value_terms}</p>
+              )}
+              <p className="mt-1 text-xs text-quaternary">
+                {special.parentType === 'service' ? 'Service' : 'Package'}: {special.parentName}
               </p>
-            )}
+              {special.expires_at && (
+                <p className="mt-0.5 text-xs text-quaternary">
+                  Expires {new Date(special.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                </p>
+              )}
+            </div>
           </div>
-        </div>
-      ))}
-    </div>
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -510,38 +520,44 @@ function BookPanel({
 
   if (bookingAllowsIframe) {
     return (
-      <div className="rounded-xl border border-secondary overflow-hidden" style={{ height: '70vh' }}>
-        <iframe
-          src={bookingHref}
-          className="w-full h-full"
-          title="Book appointment"
-          allow="payment"
-        />
-      </div>
+      <>
+        <PortalTabTracker event="InitiateCheckout" />
+        <div className="rounded-xl border border-secondary overflow-hidden" style={{ height: '70vh' }}>
+          <iframe
+            src={bookingHref}
+            className="w-full h-full"
+            title="Book appointment"
+            allow="payment"
+          />
+        </div>
+      </>
     );
   }
 
   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">
-        <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" />
-        </svg>
+    <>
+      <PortalTabTracker event="InitiateCheckout" />
+      <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">
+          <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" />
+          </svg>
+        </div>
+        <p className="text-sm font-medium text-primary">Ready to book?</p>
+        <p className="mt-1 text-sm text-tertiary">You&apos;ll be taken to our booking system.</p>
+        <a
+          href={bookingHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-5 inline-flex items-center gap-2 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+        >
+          {bookingLabel}
+          <svg className="size-4" 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>
-      <p className="text-sm font-medium text-primary">Ready to book?</p>
-      <p className="mt-1 text-sm text-tertiary">You&apos;ll be taken to our booking system.</p>
-      <a
-        href={bookingHref}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="mt-5 inline-flex items-center gap-2 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
-      >
-        {bookingLabel}
-        <svg className="size-4" 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>
+    </>
   );
 }
 

package/src/design_system/portal/PortalTabTracker.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
+import type { PixelEvent, PixelEventParams } from '../../tracking/firePixelEvent';
+
+interface Props {
+  event: PixelEvent;
+  params?: PixelEventParams;
+}
+
+/**
+ * Fires a pixel event once when a portal tab mounts.
+ * Placed at the root of each tab panel so it fires on both direct navigation
+ * and post-login redirect to that tab.
+ */
+export function PortalTabTracker({ event, params }: Props) {
+  useEffect(() => {
+    firePixelEvent(event, params);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}

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 { 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.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),
     },
   };