keystone-design-bootstrap 1.0.79 → 1.0.80

package/package.json

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

@@ -41,6 +41,15 @@ export interface PortalPageProps {
   portalHref?: string;
   bookingHref?: string | null;
   bookingLabel?: string;
+  /**
+   * Controls which tabs are rendered in the portal header.
+   * Default: ['book', 'services', 'packages', 'specials', 'messages']
+   */
+  enabledTabs?: Tab[];
+  /**
+   * Optional per-tab label overrides, e.g. { messages: 'Chat with Us' }.
+   */
+  tabLabels?: Partial<Record<Tab, string>>;
   /**
    * When true, always opens booking in a new tab even if the URL supports iframes.
    * Useful when the booking page's iframe experience is broken or undesirable.
@@ -187,10 +196,12 @@ function EmptyState({ message }: { message: string }) {
 function ServiceItemRow({
   item,
   isLoggedIn,
+  specialsEnabled,
   specialsHref,
 }: {
   item: ServiceItem;
   isLoggedIn: boolean;
+  specialsEnabled: boolean;
   specialsHref: string;
 }) {
   const activeOffers = (item.offers ?? []).filter((o) => o.active !== false && !o.expired);
@@ -208,7 +219,7 @@ function ServiceItemRow({
           {item.duration_minutes != null && item.duration_minutes > 0 && (
             <p className="mt-0.5 text-xs text-quaternary">{item.duration_minutes} min</p>
           )}
-          {activeOffers.length > 0 && (
+          {specialsEnabled && activeOffers.length > 0 && (
             <div className="mt-1.5 flex flex-wrap gap-1">
               {activeOffers.map((offer) =>
                 isLoggedIn ? (
@@ -252,10 +263,12 @@ function ServiceItemRow({
 function ServicesPanel({
   services,
   isLoggedIn,
+  specialsEnabled,
   portalHref,
 }: {
   services: Service[];
   isLoggedIn: boolean;
+  specialsEnabled: boolean;
   portalHref: string;
 }) {
   const activeServices = services.filter((s) => (s.service_items?.length ?? 0) > 0);
@@ -292,6 +305,7 @@ function ServicesPanel({
                     key={item.id}
                     item={item}
                     isLoggedIn={isLoggedIn}
+                    specialsEnabled={specialsEnabled}
                     specialsHref={specialsHref}
                   />
                 ))}
@@ -309,10 +323,12 @@ function ServicesPanel({
 function PackagesPanel({
   packages,
   isLoggedIn,
+  specialsEnabled,
   portalHref,
 }: {
   packages: Package[];
   isLoggedIn: boolean;
+  specialsEnabled: boolean;
   portalHref: string;
 }) {
   const specialsHref = `${portalHref}?tab=specials`;
@@ -365,7 +381,7 @@ function PackagesPanel({
               </ul>
             )}
 
-            {activeOffers.length > 0 && (
+            {specialsEnabled && activeOffers.length > 0 && (
               <div className="flex flex-wrap gap-1.5">
                 {activeOffers.map((offer) =>
                   isLoggedIn ? (
@@ -559,19 +575,20 @@ function BookPanel({
 
 // ─── Main Portal Page (Self-Contained Async Server Component) ─────────────────
 
-const VALID_TABS = ['services', 'packages', 'specials', 'messages', 'book'] as const;
-type Tab = (typeof VALID_TABS)[number];
+const ALL_TABS = ['services', 'packages', 'specials', 'messages', 'book'] as const;
+type Tab = (typeof ALL_TABS)[number];
 
 export async function PortalPage({
   searchParams,
   portalHref = '/portal',
   bookingHref,
   bookingLabel = 'Book Now',
+  enabledTabs,
+  tabLabels,
   forceExternalBooking = false,
   contactHref = '/contact',
 }: PortalPageProps) {
   const params = await searchParams ?? {};
-  const tabParam = VALID_TABS.includes(params.tab as Tab) ? (params.tab as Tab) : null;
   const contactIdParsed = params.contact ? parseInt(params.contact, 10) : NaN;
   const contactId = Number.isFinite(contactIdParsed) ? contactIdParsed : null;
 
@@ -591,15 +608,32 @@ export async function PortalPage({
   const resolvedBookingHref =
     bookingHref ?? companyInformation?.external_management_url ?? null;
 
-  // Build the tabs array first so the default can simply be whatever is first.
-  const tabs: Array<{ id: Tab; label: string }> = [
-    ...(resolvedBookingHref ? [{ id: 'book' as Tab, label: bookingLabel }] : []),
-    { id: 'services', label: 'Services' },
-    { id: 'packages', label: 'Packages' },
-    { id: 'specials', label: 'Specials' },
-    { id: 'messages', label: 'Messages' },
-    ...(!resolvedBookingHref ? [{ id: 'book' as Tab, label: bookingLabel }] : []),
-  ];
+  const hasCustomTabOrder = Array.isArray(enabledTabs) && enabledTabs.length > 0;
+  const requestedTabs = (enabledTabs ?? ['book', 'services', 'packages', 'specials', 'messages']).filter((tab, index, arr) => (
+    ALL_TABS.includes(tab) && arr.indexOf(tab) === index
+  ));
+  const normalizedTabs = requestedTabs.length > 0 ? requestedTabs : ['book', 'services', 'packages', 'specials', 'messages'];
+  const nonBookTabs = normalizedTabs.filter((tab) => tab !== 'book');
+  const includesBookTab = normalizedTabs.includes('book');
+
+  const labelForTab = (tab: Tab): string => {
+    if (tab === 'book') return tabLabels?.book ?? bookingLabel;
+    if (tab === 'services') return tabLabels?.services ?? 'Services';
+    if (tab === 'packages') return tabLabels?.packages ?? 'Packages';
+    if (tab === 'specials') return tabLabels?.specials ?? 'Specials';
+    return tabLabels?.messages ?? 'Messages';
+  };
+
+  // Keep existing behavior: when booking is configured, "Book Now" appears first; otherwise last.
+  const tabs: Array<{ id: Tab; label: string }> = hasCustomTabOrder
+    ? normalizedTabs.map((tab) => ({ id: tab, label: labelForTab(tab) }))
+    : [
+        ...(includesBookTab && resolvedBookingHref ? [{ id: 'book' as Tab, label: labelForTab('book') }] : []),
+        ...nonBookTabs.map((tab) => ({ id: tab, label: labelForTab(tab) })),
+        ...(includesBookTab && !resolvedBookingHref ? [{ id: 'book' as Tab, label: labelForTab('book') }] : []),
+      ];
+  const selectableTabIds = tabs.map((tab) => tab.id);
+  const tabParam = selectableTabIds.includes(params.tab as Tab) ? (params.tab as Tab) : null;
 
   // Default to the first tab so tab order and default selection are always in sync.
   const tab: Tab = tabParam ?? tabs[0].id;
@@ -641,6 +675,7 @@ export async function PortalPage({
   const serviceList = services ?? [];
   const packageList = packages ?? [];
   const specials = aggregateSpecials(serviceList, packageList);
+  const specialsEnabled = selectableTabIds.includes('specials');
 
   return (
     <div className="min-h-screen bg-primary">
@@ -724,10 +759,20 @@ export async function PortalPage({
       {/* Tab Content */}
       <div className="mx-auto max-w-4xl px-4 py-8">
         {tab === 'services' && (
-          <ServicesPanel services={serviceList} isLoggedIn={isLoggedIn} portalHref={portalHref} />
+          <ServicesPanel
+            services={serviceList}
+            isLoggedIn={isLoggedIn}
+            specialsEnabled={specialsEnabled}
+            portalHref={portalHref}
+          />
         )}
         {tab === 'packages' && (
-          <PackagesPanel packages={packageList} isLoggedIn={isLoggedIn} portalHref={portalHref} />
+          <PackagesPanel
+            packages={packageList}
+            isLoggedIn={isLoggedIn}
+            specialsEnabled={specialsEnabled}
+            portalHref={portalHref}
+          />
         )}
         {tab === 'specials' && (
           isLoggedIn ? (