keystone-design-bootstrap 1.0.90 → 1.0.92

package/package.json

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

package/src/design_system/components/ChatWidget.tsx

@@ -74,26 +74,29 @@ export function ChatWidget({
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputValue, setInputValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [sessionId, setSessionId] = useState<string>('');
+  // Resolve the anonymous session id once, up front. Authenticated visitors
+  // (contactId) don't need one. The value is never rendered, so deriving it
+  // lazily is hydration-safe and avoids a setState-in-effect cascade.
+  const [sessionId] = useState<string>(() => {
+    if (contactId) return '';
+    if (providedSessionId) return providedSessionId;
+    if (typeof window === 'undefined') return '';
+    return (
+      localStorage.getItem('keystone_chat_session_id') ??
+      `session_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`
+    );
+  });
   const [waitingForReply, setWaitingForReply] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
-  // When authenticated (contactId), skip session management. Otherwise, generate/retrieve session ID.
+  // Persist a freshly generated anonymous session id. The write lives in an
+  // effect (out of render) and never calls setState, so renders don't cascade.
   useEffect(() => {
-    if (contactId) return;
-    if (providedSessionId) {
-      setSessionId(providedSessionId);
-    } else {
-      const stored = localStorage.getItem('keystone_chat_session_id');
-      if (stored) {
-        setSessionId(stored);
-      } else {
-        const newId = `session_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
-        localStorage.setItem('keystone_chat_session_id', newId);
-        setSessionId(newId);
-      }
+    if (contactId || providedSessionId || !sessionId) return;
+    if (localStorage.getItem('keystone_chat_session_id') !== sessionId) {
+      localStorage.setItem('keystone_chat_session_id', sessionId);
     }
-  }, [contactId, providedSessionId]);
+  }, [contactId, providedSessionId, sessionId]);
 
   const loadMessages = useCallback(async () => {
     // Need either a contactId or an active session before fetching.
@@ -115,9 +118,12 @@ export function ChatWidget({
     return [];
   }, [contactId, sessionId]);
 
-  // Load message history when opened (either authenticated or session is ready)
+  // Load message history when opened (either authenticated or session is ready).
+  // loadMessages is async — any setState happens after the fetch resolves, not
+  // synchronously during the effect, so it doesn't trigger a render cascade.
   useEffect(() => {
     if (isOpen && (contactId || sessionId)) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- async fetch-on-open; state updates after await
       loadMessages();
     }
   }, [isOpen, contactId, sessionId, loadMessages]);

package/src/design_system/portal/BookIframePanel.tsx

@@ -5,9 +5,14 @@ import React, { useState, useEffect, useRef } from 'react';
 interface BookIframePanelProps {
   bookingHref: string;
   businessName: string;
+  /**
+   * When false, the blurred preview is shown but the overlay card becomes a
+   * sign-in prompt instead of the "Start Booking" / "Open in New Tab" actions.
+   */
+  isLoggedIn?: boolean;
 }
 
-export function BookIframePanel({ bookingHref, businessName }: BookIframePanelProps) {
+export function BookIframePanel({ bookingHref, businessName, isLoggedIn = true }: BookIframePanelProps) {
   const [hasOpened, setHasOpened] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -67,31 +72,51 @@ export function BookIframePanel({ bookingHref, businessName }: BookIframePanelPr
 
         {/* 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">
+          {isLoggedIn ? (
+            <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 className="w-full max-w-sm rounded-component border border-secondary bg-primary px-6 py-6 text-center shadow-sm">
+              <div className="mx-auto 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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+                </svg>
+              </div>
+              <p className="text-xl font-bold text-primary">Sign in to book</p>
+              <p className="mt-3 text-sm text-secondary leading-relaxed">
+                Create a free account or sign in to book your appointment.
+              </p>
               <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"
+                data-open-login-modal
+                className="mt-5 inline-flex cursor-pointer 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
+                Sign in
               </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>
 

package/src/design_system/portal/PortalPage.tsx

@@ -538,19 +538,23 @@ function BookPanel({
   isLoggedIn: boolean;
   businessName: string;
 }) {
-  if (!isLoggedIn) {
-    return <LoginWall message="Continue to view booking options." cta="View Booking Options" />;
-  }
-
+  // When the platform supports embedding, always show the blurred preview.
+  // The overlay card itself adapts: a sign-in prompt when logged out, the
+  // booking instructions + actions when logged in.
   if (bookingAllowsIframe) {
     return (
       <>
-        <PortalTabTracker event="InitiateCheckout" tab="booking" />
-        <BookIframePanel bookingHref={bookingHref} businessName={businessName} />
+        {isLoggedIn && <PortalTabTracker event="InitiateCheckout" tab="booking" />}
+        <BookIframePanel bookingHref={bookingHref} businessName={businessName} isLoggedIn={isLoggedIn} />
       </>
     );
   }
 
+  // No embeddable preview to tease — keep booking gated behind the login wall.
+  if (!isLoggedIn) {
+    return <LoginWall message="Continue to view booking options." cta="View Booking Options" />;
+  }
+
   return (
     <>
       <PortalTabTracker event="InitiateCheckout" tab="booking" />
@@ -738,7 +742,7 @@ export async function PortalPage({
             <div className="flex gap-1 overflow-x-auto pb-px scrollbar-none">
               {tabs.map((t) => {
                 const isActive = tab === t.id;
-                const isGated = !isLoggedIn && (t.id === 'specials' || t.id === 'messages' || t.id === 'book');
+                const isGated = !isLoggedIn && (t.id === 'specials' || t.id === 'messages');
                 const href = `${portalHref}?tab=${t.id}`;
                 const className = `shrink-0 rounded-interactive px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
                   isActive ? 'bg-brand-solid text-white' : 'text-secondary hover:bg-secondary hover:text-primary'

package/src/types/rails-actioncable.d.ts

@@ -0,0 +1,20 @@
+declare module '@rails/actioncable' {
+  export interface Cable {
+    subscriptions: {
+      create(
+        channelName: string | { channel: string; [key: string]: unknown },
+        callbacks?: {
+          connected?(): void;
+          disconnected?(): void;
+          received?(data: unknown): void;
+          rejected?(): void;
+        }
+      ): {
+        unsubscribe(): void;
+      };
+    };
+    disconnect(): void;
+  }
+
+  export function createConsumer(url?: string): Cable;
+}