keystone-design-bootstrap 1.0.65 → 1.0.66

package/package.json

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

package/src/design_system/portal/BookIframePanel.tsx

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

package/src/design_system/portal/PortalPage.tsx

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

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

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

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

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

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

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

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

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

package/src/lib/cta-urls.ts

@@ -25,6 +25,22 @@ export interface ResolvedCtaUrls {
   hasSecondary: boolean;
 }
 
+/**
+ * Extracts the pathname from portal_url for use in client-side route comparisons.
+ * Handles both absolute URLs (https://domain.com/portal → /portal) and relative paths (/portal).
+ */
+export function resolvePortalPath(
+  companyInformation?: CompanyInformation | null
+): string | null {
+  const url = companyInformation?.portal_url?.trim();
+  if (!url) return null;
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url.startsWith('/') ? url : null;
+  }
+}
+
 export function resolveCtaUrls(
   companyInformation?: CompanyInformation | null
 ): ResolvedCtaUrls {