astro-tractstack 2.3.1 → 2.3.3

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,5 +1,10 @@
 import { useStore } from '@nanostores/react';
-import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import {
+  cartStore,
+  addQueue,
+  getCartItemKey,
+  type CartAction,
+} from '@/stores/shopify';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
@@ -11,6 +16,8 @@ interface Props {
   };
 }
 
+const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
 export default function ShopifyServiceList({ resources = {}, options }: Props) {
   const cart = useStore(cartStore);
 
@@ -18,9 +25,18 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
   let services = resources['service'] || [];
 
   let group = '';
+  let title = '';
+  let bgColor = '#f9f9f9';
   try {
     const parsedOptions = JSON.parse(options?.params?.options || '{}');
-    group = parsedOptions.group || '';
+    group = typeof parsedOptions.group === 'string' ? parsedOptions.group : '';
+    if (typeof parsedOptions.title === 'string') {
+      title = parsedOptions.title.trim();
+    }
+    const rawBg = parsedOptions.bgColor;
+    if (typeof rawBg === 'string' && HEX_BG_RE.test(rawBg)) {
+      bgColor = rawBg;
+    }
   } catch (e) {
     // Ignore JSON parse errors
   }
@@ -81,55 +97,83 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
   }
 
   return (
-    <div className="space-y-4">
-      {displayServices.map((resource) => {
-        const variantId = getServiceVariantId(resource);
-        const key = variantId || `${resource.id}_null_null`;
-
-        const cartItem = cart[key];
-        const isSelected = (cartItem?.quantity || 0) > 0;
-        const duration = resource.optionsPayload?.bookingLengthMinutes;
-
-        return (
-          <div
-            key={resource.id}
-            className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
-              isSelected
-                ? 'border-black bg-gray-50'
-                : 'border-gray-200 bg-white hover:border-gray-300'
-            }`}
-          >
-            <div className="flex-grow">
-              <div className="flex items-center gap-2">
-                <h3 className="font-bold text-gray-900">{resource.title}</h3>
-                {duration && (
-                  <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
-                    {duration} mins
-                  </span>
-                )}
-              </div>
-              <p className="mt-1 text-sm text-gray-500">{resource.oneliner}</p>
-            </div>
-
-            <div className="ml-4 flex-shrink-0">
-              <button
-                onClick={() => handleToggle(resource, cartItem?.quantity || 0)}
-                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                  isSelected ? 'bg-black' : 'bg-gray-200'
-                }`}
-                role="switch"
-                aria-checked={isSelected}
-              >
-                <span
-                  className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                    isSelected ? 'translate-x-5' : 'translate-x-0'
+    <section className="w-full">
+      <div
+        className="flex w-full flex-col p-12 md:p-12 xl:p-16"
+        style={{ backgroundColor: bgColor }}
+      >
+        {title ? (
+          <header className="max-w-4xl">
+            <h3
+              className="mb-6 text-balance font-action text-2xl font-bold md:text-3xl xl:text-4xl"
+              style={{ color: '#2d2923' }}
+            >
+              {title}
+            </h3>
+          </header>
+        ) : null}
+        <section className="w-full">
+          <div className="space-y-4">
+            {displayServices.map((resource) => {
+              const variantId = getServiceVariantId(resource);
+              const key = getCartItemKey({
+                resourceId: resource.id,
+                variantId,
+              });
+
+              const cartItem = cart[key];
+              const isSelected = (cartItem?.quantity || 0) > 0;
+              const duration = resource.optionsPayload?.bookingLengthMinutes;
+
+              return (
+                <div
+                  key={resource.id}
+                  className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
+                    isSelected
+                      ? 'border-black bg-gray-50'
+                      : 'border-gray-200 bg-white hover:border-gray-300'
                   }`}
-                />
-              </button>
-            </div>
+                >
+                  <div className="flex-grow">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-bold text-gray-900">
+                        {resource.title}
+                      </h3>
+                      {duration && (
+                        <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                          {duration} mins
+                        </span>
+                      )}
+                    </div>
+                    <p className="mt-1 text-sm text-gray-500">
+                      {resource.oneliner}
+                    </p>
+                  </div>
+
+                  <div className="ml-4 flex-shrink-0">
+                    <button
+                      onClick={() =>
+                        handleToggle(resource, cartItem?.quantity || 0)
+                      }
+                      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                        isSelected ? 'bg-black' : 'bg-gray-200'
+                      }`}
+                      role="switch"
+                      aria-checked={isSelected}
+                    >
+                      <span
+                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                          isSelected ? 'translate-x-5' : 'translate-x-0'
+                        }`}
+                      />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
           </div>
-        );
-      })}
-    </div>
+        </section>
+      </div>
+    </section>
   );
 }

package/templates/custom/shopify/cart.astro

@@ -18,6 +18,12 @@ const resources = await getHeaderResources(tenantId, resourceCategories);
 
 <Layout title="Your Cart" slug="cart">
   <main class="mx-auto max-w-7xl px-4 py-16 md:px-6 xl:px-8">
-    <Cart resources={resources} embedded={true} client:only="react" />
+    <Cart
+      resources={resources}
+      allowRemote={brandConfig?.SCHEDULING?.allowRemote || false}
+      remoteOnly={brandConfig?.SCHEDULING?.remoteOnly || false}
+      embedded={true}
+      client:only="react"
+    />
   </main>
 </Layout>

package/templates/src/components/Footer.astro

@@ -58,7 +58,7 @@ if (menu?.optionsPayload) {
       return item;
     });
 
-  allLinks = additionalLinks.concat(featuredLinks);
+  allLinks = featuredLinks.concat(additionalLinks);
 }
 
 // Parse socials string
@@ -106,7 +106,7 @@ const createdDate = created ? new Date(created) : new Date();
             {allLinks.map((item: any) => (
               <a
                 href={item.to}
-                class="z-10 whitespace-nowrap rounded bg-brand-7 px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:bg-myblack hover:text-white focus:bg-brand-7 focus:text-white"
+                class="z-10 whitespace-nowrap rounded-md bg-brand-7 px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:bg-myblack hover:text-white focus:bg-brand-7 focus:text-white"
                 title={item.description}
               >
                 <span class="font-bold">{item.name}</span>

package/templates/src/components/Header.astro

@@ -82,7 +82,9 @@ if (hasShopify) {
           <CheckoutModal
             client:only="react"
             resources={shopifyResources}
-            maxLength={brandConfig?.scheduling?.maxLengthMinutes || 180}
+            maxLength={brandConfig?.SCHEDULING?.maxLengthMinutes || 180}
+            allowRemote={brandConfig?.SCHEDULING?.allowRemote || false}
+            remoteOnly={brandConfig?.SCHEDULING?.remoteOnly || false}
           />
         )}
       </>
@@ -123,13 +125,15 @@ if (hasShopify) {
 
     {
       !!menu ? (
-        <Menu
-          payload={menu}
-          slug={slug}
-          brandConfig={brandConfig}
-          isContext={isContext}
-          client:load
-        />
+        <div class="flex min-w-0 flex-1 justify-end">
+          <Menu
+            payload={menu}
+            slug={slug}
+            brandConfig={brandConfig}
+            isContext={isContext}
+            client:load
+          />
+        </div>
       ) : null
     }
   </div>
@@ -368,7 +372,11 @@ if (hasShopify) {
 {
   !isStoryKeep && hasShopify && (
     <>
-      <ShopifyCartManager resources={shopifyResources} client:only="react" />
+      <ShopifyCartManager
+        resources={shopifyResources}
+        brandConfig={brandConfig}
+        client:only="react"
+      />
       <CartModal client:only="react" />
     </>
   )

package/templates/src/components/Menu.tsx

@@ -1,38 +1,12 @@
-import { Menu } from '@ark-ui/react';
+import { useState } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { lispLexer } from '@/utils/actions/lispLexer';
 import { preParseAction } from '@/utils/actions/preParse_Action';
 import type { LispToken } from '@/types/compositorTypes';
 
-// CSS to style the menu items with hover and selection states
-const menuStyles = `
-  .menu-content {
-    transition-property: opacity, transform;
-    transition-duration: 200ms;
-    z-index: 10050;
-  }
-
-  .menu-content[data-state="open"] {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .menu-content[data-state="closed"] {
-    opacity: 0;
-    transform: translateY(1px);
-  }
-
-  .menu-item[data-highlighted] {
-    background-color: #f3f4f6;
-  }
-
-  .menu-item:focus {
-    outline: 2px solid #0891b2;
-    outline-offset: -2px;
-  }
-`;
-
 interface MenuLink {
   name: string;
   description: string;
@@ -63,6 +37,7 @@ interface MenuProps {
 const MenuComponent = (props: MenuProps) => {
   const { payload, slug, isContext, brandConfig } = props;
   const thisPayload = payload.optionsPayload;
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   function processMenuLink(e: MenuLink): ProcessedMenuLinkDatum {
     const item = { ...e } as ProcessedMenuLinkDatum;
@@ -181,12 +156,112 @@ const MenuComponent = (props: MenuProps) => {
     );
   };
 
+  const MobileMenuItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="block w-full rounded-xl p-4 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+          onClick={() => setMobileOpen(false)}
+        >
+          <p className="text-xl font-bold leading-7 text-myblack">
+            {item.name}
+          </p>
+          <p className="mt-1 text-base leading-6 text-mydarkgrey">
+            {item.description}
+          </p>
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="block w-full rounded-xl p-4 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          aria-label={`${item.name} - ${item.description}`}
+          onClick={() => setMobileOpen(false)}
+        >
+          <p className="text-xl font-bold leading-7 text-myblack">
+            {item.name}
+          </p>
+          <p className="mt-1 text-base leading-6 text-mydarkgrey">
+            {item.description}
+          </p>
+        </a>
+      );
+    }
+
+    return (
+      <span
+        className="block w-full rounded-xl p-4 text-left opacity-60"
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        <p className="text-xl font-bold leading-7 text-myblack">{item.name}</p>
+        <p className="mt-1 text-base leading-6 text-mydarkgrey">
+          {item.description}
+        </p>
+      </span>
+    );
+  };
+
+  const MobileCompactItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="block w-full rounded-lg p-3 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+          onClick={() => setMobileOpen(false)}
+        >
+          <span className="block text-base font-bold leading-6 text-mydarkgrey">
+            {item.name}
+          </span>
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="block w-full rounded-lg p-3 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          onClick={() => setMobileOpen(false)}
+        >
+          <span className="block text-base font-bold leading-6 text-mydarkgrey">
+            {item.name}
+          </span>
+        </a>
+      );
+    }
+
+    return (
+      <span
+        className="block w-full rounded-lg p-3 text-left opacity-60"
+        title={item.description}
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        <span className="block text-base font-bold leading-6 text-mydarkgrey">
+          {item.name}
+        </span>
+      </span>
+    );
+  };
+
   return (
     <>
-      <style dangerouslySetInnerHTML={{ __html: menuStyles }} />
-
       {/* Desktop Navigation */}
-      <nav className="ml-6 hidden flex-wrap items-center justify-end space-x-3 font-action md:flex md:space-x-6">
+      <nav className="ml-6 hidden min-w-0 max-w-full flex-wrap items-center justify-end space-x-3 font-action md:flex md:space-x-6">
         {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
           <div key={item.name} className="relative py-1.5">
             <InteractiveMenuItem item={item} />
@@ -196,134 +271,81 @@ const MenuComponent = (props: MenuProps) => {
 
       {/* Mobile Navigation Menu */}
       <div className="font-action md:hidden">
-        <Menu.Root>
-          <Menu.Trigger
+        <Dialog.Root
+          open={mobileOpen}
+          onOpenChange={(details) => setMobileOpen(details.open)}
+        >
+          <Dialog.Trigger
             className="inline-flex rounded-md px-3 py-2 text-xl font-bold text-myblue hover:text-black focus:outline-none focus:ring-2 focus:ring-myblue"
             aria-label="Open navigation menu"
           >
             <span>MENU</span>
             <ChevronDownIcon className="ml-1 h-5 w-5" aria-hidden="true" />
-          </Menu.Trigger>
+          </Dialog.Trigger>
 
           <Portal>
-            <Menu.Positioner>
-              <Menu.Content className="menu-content mt-5 flex">
-                <div className="w-screen">
-                  <div className="text-md flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1 ring-mydarkgrey/5">
-                    {/* Featured Links Section */}
-                    <div className="px-8">
+            <Dialog.Backdrop
+              className="fixed inset-0 bg-black/40"
+              style={{ zIndex: 10050 }}
+            />
+            <Dialog.Positioner
+              className="fixed inset-0"
+              style={{ zIndex: 10051 }}
+            >
+              <Dialog.Content className="h-full w-full overflow-hidden bg-white">
+                <div className="flex h-full flex-col overflow-hidden">
+                  <div className="border-b border-mylightgrey px-4 py-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <Dialog.Title className="text-lg font-bold text-myblack">
+                        Navigation Menu
+                      </Dialog.Title>
+                      <Dialog.CloseTrigger
+                        className="rounded-full p-2 text-mydarkgrey hover:bg-mylightgrey focus:outline-none focus:ring-2 focus:ring-myblue"
+                        aria-label="Close navigation menu"
+                      >
+                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                      </Dialog.CloseTrigger>
+                    </div>
+                  </div>
+
+                  <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-4">
+                    <ul role="list" className="space-y-3">
                       {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
-                        <Menu.Item
-                          key={item.name}
-                          value={item.name}
-                          className="menu-item group relative flex gap-x-6 rounded-lg p-4 hover:bg-mygreen/20"
-                        >
-                          <div>
-                            {item.renderAs === 'button' ? (
-                              <button
-                                type="button"
-                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
-                                aria-label={`${item.name} - ${item.description}`}
-                                hx-post="/api/v1/state"
-                                hx-swap="none"
-                                hx-vals={item.htmxVals}
-                              >
-                                {item.name}
-                                <span className="absolute inset-0" />
-                              </button>
-                            ) : item.renderAs === 'a' ? (
-                              <a
-                                href={item.href}
-                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
-                                aria-label={`${item.name} - ${item.description}`}
-                              >
-                                {item.name}
-                                <span className="absolute inset-0" />
-                              </a>
-                            ) : (
-                              <span
-                                className="font-action text-xl text-myblack opacity-50"
-                                aria-label={`${item.name} - ${item.description}`}
-                              >
-                                {item.name}
-                              </span>
-                            )}
-                            <p className="mt-1 text-mydarkgrey">
-                              {item.description}
-                            </p>
-                          </div>
-                        </Menu.Item>
+                        <li key={item.name} className="min-w-0">
+                          <MobileMenuItem item={item} />
+                        </li>
                       ))}
-                    </div>
+                    </ul>
 
-                    {/* Additional Links Section */}
                     {additionalLinks.length > 0 && (
-                      <div className="bg-slate-50 p-8">
-                        <div className="flex justify-between">
-                          <h3
-                            className="mt-4 text-sm leading-6 text-myblue"
-                            id="additional-links-heading"
-                          >
-                            Additional Links
-                          </h3>
-                        </div>
+                      <section className="mt-6 rounded-xl bg-slate-50 p-4">
+                        <h3
+                          className="text-sm font-bold leading-6 text-myblue"
+                          id="additional-links-heading"
+                        >
+                          Additional Links
+                        </h3>
                         <ul
                           role="list"
-                          className="mt-6 space-y-6"
+                          className="mt-3 space-y-2"
                           aria-labelledby="additional-links-heading"
                         >
                           {additionalLinks.map(
                             (item: ProcessedMenuLinkDatum) => (
-                              <li key={item.name} className="relative">
-                                <Menu.Item
-                                  value={item.name}
-                                  className="menu-item block w-full text-left"
-                                >
-                                  {item.renderAs === 'button' ? (
-                                    <button
-                                      type="button"
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey hover:text-black focus:text-black focus:underline focus:outline-none"
-                                      title={item.description}
-                                      aria-label={`${item.name} - ${item.description}`}
-                                      hx-post="/api/v1/state"
-                                      hx-swap="none"
-                                      hx-vals={item.htmxVals}
-                                    >
-                                      {item.name}
-                                      <span className="absolute inset-0" />
-                                    </button>
-                                  ) : item.renderAs === 'a' ? (
-                                    <a
-                                      href={item.href}
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey hover:text-black focus:text-black focus:underline focus:outline-none"
-                                      title={item.description}
-                                      aria-label={`${item.name} - ${item.description}`}
-                                    >
-                                      {item.name}
-                                      <span className="absolute inset-0" />
-                                    </a>
-                                  ) : (
-                                    <span
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey opacity-50"
-                                      title={item.description}
-                                      aria-label={`${item.name} - ${item.description}`}
-                                    >
-                                      {item.name}
-                                    </span>
-                                  )}
-                                </Menu.Item>
+                              <li key={item.name} className="min-w-0">
+                                <MobileCompactItem item={item} />
                               </li>
                             )
                           )}
                         </ul>
-                      </div>
+                      </section>
                     )}
                   </div>
                 </div>
-              </Menu.Content>
-            </Menu.Positioner>
+              </Dialog.Content>
+            </Dialog.Positioner>
           </Portal>
-        </Menu.Root>
+        </Dialog.Root>
       </div>
     </>
   );

package/templates/src/components/codehooks/BunnyVideoSetup.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, type FocusEvent } from 'react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
@@ -162,7 +162,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
   };
 
   const saveChanges = (
-    customChapters?: Chapter[] | React.FocusEvent<HTMLInputElement>
+    customChapters?: Chapter[] | FocusEvent<HTMLInputElement>
   ) => {
     if (!customChapters || 'target' in customChapters) {
       updatePaneNode();