astro-tractstack 2.3.2 → 2.3.4

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -5,13 +5,15 @@ import {
   cartStore,
   modalState,
   transactionTraceId,
-  getCartItemKey,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
 import {
   RESTRICTION_MESSAGES,
   calculateCartDuration,
+  getCartItemKey,
+  isSharedFeeService,
 } from '@/utils/customHelpers';
+import { wouldCartHaveImpossibleRemoteMix } from '@/utils/booking/appointmentMode';
 import type { ResourceNode } from '@/types/compositorTypes';
 import type { CartItemState } from '@/stores/shopify';
 import type { BrandConfigState } from '@/types/tractstack';
@@ -26,6 +28,9 @@ export default function ShopifyCartManager({
   brandConfig,
 }: ShopifyCartManagerProps) {
   const queue = useStore(addQueue);
+  const productResources = resources.filter(
+    (r) => r.categorySlug === 'product'
+  );
 
   useEffect(() => {
     if (queue.length > 0) {
@@ -38,19 +43,37 @@ export default function ShopifyCartManager({
         return;
       }
 
-      const key = getCartItemKey(actionItem);
+      const key = getCartItemKey(actionItem, resource, productResources);
       const currentCart = cartStore.get();
       const currentItem = currentCart[key];
-      const currentQty = currentItem?.quantity || 0;
+      const isSharedFeeResource = isSharedFeeService(
+        resource,
+        productResources
+      );
+      const legacySharedKeys = isSharedFeeResource
+        ? Object.keys(currentCart).filter(
+            (cartKey) =>
+              cartKey !== key &&
+              currentCart[cartKey]?.resourceId === actionItem.resourceId
+          )
+        : [];
+      const legacySharedItems = legacySharedKeys
+        .map((cartKey) => currentCart[cartKey])
+        .filter((item): item is CartItemState => !!item);
+      const mergedCurrentItem = currentItem || legacySharedItems[0];
+      const currentQty = isSharedFeeResource
+        ? currentItem?.quantity ||
+          legacySharedItems.reduce((total, item) => total + item.quantity, 0)
+        : currentItem?.quantity || 0;
       const nextCart = { ...currentCart };
 
       if (actionItem.action === 'remove') {
-        const newQty = Math.max(0, currentQty - 1);
+        const newQty = isSharedFeeResource ? 0 : Math.max(0, currentQty - 1);
 
         if (newQty === 0) {
           if (
             resource?.optionsPayload?.needsBooking ||
-            currentItem?.boundResourceId
+            mergedCurrentItem?.boundResourceId
           ) {
             const traceId = transactionTraceId.get();
             if (traceId) {
@@ -58,23 +81,34 @@ export default function ShopifyCartManager({
                 .releaseHold(traceId)
                 .catch((err) =>
                   console.error('Failed to release hold on cart removal:', err)
-                );
+                )
+                .finally(() => {
+                  transactionTraceId.set('');
+                });
             }
           }
           delete nextCart[key];
+          legacySharedKeys.forEach((legacyKey) => {
+            delete nextCart[legacyKey];
+          });
         } else {
           nextCart[key] = {
-            ...currentItem,
+            ...mergedCurrentItem,
             resourceId: actionItem.resourceId,
             quantity: newQty,
           };
         }
 
-        if (currentItem?.boundResourceId || actionItem.boundResourceId) {
+        if (mergedCurrentItem?.boundResourceId || actionItem.boundResourceId) {
           const boundId =
-            currentItem?.boundResourceId || actionItem.boundResourceId;
+            mergedCurrentItem?.boundResourceId || actionItem.boundResourceId;
           if (boundId) {
-            const serviceKey = getCartItemKey({ resourceId: boundId });
+            const boundResource = resources.find((r) => r.id === boundId);
+            const serviceKey = getCartItemKey(
+              { resourceId: boundId },
+              boundResource,
+              productResources
+            );
             const serviceItem = nextCart[serviceKey];
             if (serviceItem) {
               const newServiceQty = Math.max(0, serviceItem.quantity - 1);
@@ -94,27 +128,39 @@ export default function ShopifyCartManager({
         addQueue.set(remaining);
       } else if (actionItem.action === 'add') {
         transactionTraceId.set('');
-        const newQty = currentQty + 1;
+        const newQty = isSharedFeeResource ? 1 : currentQty + 1;
 
         const newItem: CartItemState = {
           resourceId: actionItem.resourceId,
           quantity: newQty,
-          gid: actionItem.gid || currentItem?.gid,
-          variantId: actionItem.variantId || currentItem?.variantId,
+          gid: actionItem.gid || mergedCurrentItem?.gid,
+          variantId: isSharedFeeResource
+            ? undefined
+            : actionItem.variantId || mergedCurrentItem?.variantId,
           variantIdShipped:
-            actionItem.variantIdShipped || currentItem?.variantIdShipped,
+            actionItem.variantIdShipped || mergedCurrentItem?.variantIdShipped,
           variantIdPickup:
-            actionItem.variantIdPickup || currentItem?.variantIdPickup,
+            actionItem.variantIdPickup || mergedCurrentItem?.variantIdPickup,
           boundResourceId:
-            actionItem.boundResourceId || currentItem?.boundResourceId,
+            actionItem.boundResourceId || mergedCurrentItem?.boundResourceId,
         };
 
+        legacySharedKeys.forEach((legacyKey) => {
+          delete nextCart[legacyKey];
+        });
         nextCart[key] = newItem;
 
         if (newItem.boundResourceId) {
-          const serviceKey = getCartItemKey({
-            resourceId: newItem.boundResourceId,
-          });
+          const boundResource = resources.find(
+            (r) => r.id === newItem.boundResourceId
+          );
+          const serviceKey = getCartItemKey(
+            {
+              resourceId: newItem.boundResourceId,
+            },
+            boundResource,
+            productResources
+          );
           const serviceItem = nextCart[serviceKey];
 
           if (serviceItem) {
@@ -130,54 +176,65 @@ export default function ShopifyCartManager({
           }
         }
 
-        const rawDuration = calculateCartDuration(nextCart, resources);
-
-        const interval = 15;
-        const snappedDuration = Math.ceil(rawDuration / interval) * interval;
-
-        const dynamicMax = brandConfig?.scheduling?.maxLengthMinutes || 180;
-        if (snappedDuration > dynamicMax) {
+        if (wouldCartHaveImpossibleRemoteMix(nextCart, resources)) {
           modalState.set({
             isOpen: true,
             type: 'restriction',
-            title: 'Appointment Length Limit Reached',
-            message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+            title: 'Incompatible Booking Modes',
+            message: RESTRICTION_MESSAGES.INCOMPATIBLE_REMOTE,
           });
         } else {
-          cartStore.set(nextCart);
-
-          if (!actionItem.suppressModal) {
-            let targetResource = resource;
-            if (newItem.boundResourceId) {
-              const bound = resources.find(
-                (r) => r.id === newItem.boundResourceId
-              );
-              if (bound) {
-                targetResource = bound;
+          const rawDuration = calculateCartDuration(nextCart, resources);
+
+          const interval = 15;
+          const snappedDuration = Math.ceil(rawDuration / interval) * interval;
+
+          const dynamicMax = brandConfig?.scheduling?.maxLengthMinutes || 180;
+          if (snappedDuration > dynamicMax) {
+            modalState.set({
+              isOpen: true,
+              type: 'restriction',
+              title: 'Appointment Length Limit Reached',
+              message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+            });
+          } else {
+            cartStore.set(nextCart);
+
+            if (!actionItem.suppressModal) {
+              let targetResource = resource;
+              if (newItem.boundResourceId) {
+                const bound = resources.find(
+                  (r) => r.id === newItem.boundResourceId
+                );
+                if (bound) {
+                  targetResource = bound;
+                }
               }
-            }
 
-            if (
-              targetResource.categorySlug === 'service' ||
-              targetResource.optionsPayload?.needsBooking
-            ) {
-              modalState.set({
-                isOpen: true,
-                type: 'success',
-                title: 'Booking Required',
-                message: RESTRICTION_MESSAGES.BOOKING(
-                  (
-                    targetResource.optionsPayload?.bookingLengthMinutes || 0
-                  ).toString()
-                ),
-              });
-            } else {
-              modalState.set({
-                isOpen: true,
-                type: 'success',
-                title: 'Added to Cart',
-                message: RESTRICTION_MESSAGES.DEFAULT_ADD(targetResource.title),
-              });
+              if (
+                targetResource.categorySlug === 'service' ||
+                targetResource.optionsPayload?.needsBooking
+              ) {
+                modalState.set({
+                  isOpen: true,
+                  type: 'success',
+                  title: 'Booking Required',
+                  message: RESTRICTION_MESSAGES.BOOKING(
+                    (
+                      targetResource.optionsPayload?.bookingLengthMinutes || 0
+                    ).toString()
+                  ),
+                });
+              } else {
+                modalState.set({
+                  isOpen: true,
+                  type: 'success',
+                  title: 'Added to Cart',
+                  message: RESTRICTION_MESSAGES.DEFAULT_ADD(
+                    targetResource.title
+                  ),
+                });
+              }
             }
           }
         }

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -6,6 +6,7 @@ import {
   CART_STATES,
   isShopifyHandoff,
 } from '@/stores/shopify';
+import { buildShopifyCheckoutLines } from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ShopifyCheckoutProps {
@@ -33,32 +34,7 @@ export default function ShopifyCheckout({
       setStatus('PROCESSING');
 
       try {
-        const cartItems = Object.values(cart);
-
-        const lines = cartItems
-          .map((item) => {
-            // Resolve the ResourceNode for this item
-            const resource = resources.find((r) => r.id === item.resourceId);
-
-            if (!resource) {
-              return null;
-            }
-
-            // Use the explicitly sanitized variant ID from the cart state
-            const merchandiseId = item.variantId;
-
-            // If we have no ID, we cannot add this item to the Shopify cart.
-            if (!merchandiseId) return null;
-
-            return {
-              merchandiseId,
-              quantity: item.quantity,
-            };
-          })
-          .filter((line) => line !== null) as Array<{
-          merchandiseId: string;
-          quantity: number;
-        }>;
+        const lines = buildShopifyCheckoutLines(cart, resources);
 
         if (lines.length === 0) {
           throw new Error(

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import { collectServiceGids } from '@/utils/customHelpers';
 import { getShopifyImage } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
@@ -240,6 +241,13 @@ export default function ShopifyProductGrid({ resources = {}, options }: Props) {
     products = products.filter((p) => p.optionsPayload?.group === group);
   }
 
+  const serviceGids = collectServiceGids(services);
+  products = products.filter((p) => {
+    const gid =
+      typeof p.optionsPayload?.gid === 'string' ? p.optionsPayload.gid : '';
+    return gid === '' || !serviceGids.has(gid);
+  });
+
   if (products.length === 0) return null;
 
   return (

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,10 +1,10 @@
 import { useStore } from '@nanostores/react';
+import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
 import {
-  cartStore,
-  addQueue,
   getCartItemKey,
-  type CartAction,
-} from '@/stores/shopify';
+  getServiceVariantIdFromCanonicalProduct,
+  isSharedFeeService,
+} from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
@@ -55,33 +55,17 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
     (s) => !boundServiceSlugs.has(s.slug)
   );
 
-  const getServiceVariantId = (resource: ResourceNode): string | undefined => {
-    try {
-      if (resource.optionsPayload?.shopifyData) {
-        const data = JSON.parse(resource.optionsPayload.shopifyData);
-        // Handle both raw product data and simplified product objects
-        const product = data.products?.[0] || data;
-        return product?.variants?.[0]?.id;
-      }
-    } catch (e) {
-      return undefined;
-    }
-    return undefined;
-  };
-
   const handleToggle = (resource: ResourceNode, currentQuantity: number) => {
     const actionType = currentQuantity > 0 ? 'remove' : 'add';
+    const gid =
+      typeof resource.optionsPayload?.gid === 'string'
+        ? resource.optionsPayload.gid
+        : undefined;
 
-    const variantId = getServiceVariantId(resource);
-    let gid: string | undefined;
-
-    try {
-      if (resource.optionsPayload?.shopifyData) {
-        const data = JSON.parse(resource.optionsPayload.shopifyData);
-        const product = data.products?.[0] || data;
-        gid = product?.id;
-      }
-    } catch (e) {}
+    const sharedFee = isSharedFeeService(resource, products);
+    const variantId = sharedFee
+      ? undefined
+      : getServiceVariantIdFromCanonicalProduct(resource, products);
 
     const newAction: CartAction = {
       resourceId: resource.id,
@@ -115,14 +99,20 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
         <section className="w-full">
           <div className="space-y-4">
             {displayServices.map((resource) => {
-              const variantId = getServiceVariantId(resource);
-              const key = getCartItemKey({
-                resourceId: resource.id,
-                variantId,
-              });
+              const key = getCartItemKey(
+                { resourceId: resource.id },
+                resource,
+                products
+              );
 
               const cartItem = cart[key];
-              const isSelected = (cartItem?.quantity || 0) > 0;
+              const legacyCartItem = Object.values(cart).find(
+                (item) =>
+                  item.resourceId === resource.id && (item.quantity || 0) > 0
+              );
+              const selectedQuantity =
+                cartItem?.quantity || legacyCartItem?.quantity || 0;
+              const isSelected = selectedQuantity > 0;
               const duration = resource.optionsPayload?.bookingLengthMinutes;
 
               return (
@@ -152,9 +142,7 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
 
                   <div className="ml-4 flex-shrink-0">
                     <button
-                      onClick={() =>
-                        handleToggle(resource, cartItem?.quantity || 0)
-                      }
+                      onClick={() => handleToggle(resource, selectedQuantity)}
                       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'
                       }`}

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/Header.astro

@@ -76,13 +76,15 @@ if (hasShopify) {
       <>
         {slug !== `cart` ? (
           <div class="flex w-full justify-end px-4 py-2 md:px-8">
-            <CartIcon client:only="react" />
+            <CartIcon client:only="react" resources={shopifyResources} />
           </div>
         ) : (
           <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}
           />
         )}
       </>

package/templates/src/components/compositor/Node.tsx

@@ -8,6 +8,7 @@ import {
   isTopLevelBlockNode,
   parseCodeHook,
 } from '@/utils/compositor/nodesHelper';
+import { isStoryFragmentNode } from '@/utils/compositor/typeGuards';
 import { PaneAddMode } from '@/types/compositorTypes';
 import { NodeOverlay } from './tools/NodeOverlay';
 import PanelVisibilityWrapper from '@/components/compositor/PanelVisibilityWrapper';
@@ -108,14 +109,6 @@ export const Node = memo((props: NodeProps) => {
     case 'Pane':
       {
         const paneNode = node as PaneNode;
-        const storyfragmentNodeId = ctx.getClosestNodeTypeFromId(
-          node.id,
-          'StoryFragment'
-        );
-        const storyfragmentNode = ctx.allNodes
-          .get()
-          .get(storyfragmentNodeId) as StoryFragmentNode;
-        const first = paneNode.id === storyfragmentNode.paneIds?.[0];
         const isHtmlAstPane = !!paneNode.htmlAst;
         const paneNodes = ctx.getChildNodeIDs(node.id);
 
@@ -140,7 +133,7 @@ export const Node = memo((props: NodeProps) => {
             );
           }
 
-          if (!isPreview && !paneNodes.length) {
+          if (!isPreview && !paneNodes.length && !isHtmlAstPane) {
             return (
               <>
                 <ContextPanePanel nodeId={node.id} />
@@ -160,8 +153,45 @@ export const Node = memo((props: NodeProps) => {
               </>
             );
           }
+
+          const contextContent = isHtmlAstPane ? (
+            <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
+          ) : (
+            <Pane {...props} />
+          );
+
+          element = (
+            <>
+              <div className="py-0.5">
+                <ConfigPanePanel
+                  nodeId={props.nodeId}
+                  isHtmlAstPane={isHtmlAstPane}
+                  isSandboxMode={props.isSandboxMode || false}
+                />
+                <PanelVisibilityWrapper
+                  nodeId={props.nodeId}
+                  panelType="settings"
+                  ctx={ctx}
+                >
+                  {contextContent}
+                </PanelVisibilityWrapper>
+              </div>
+            </>
+          );
+          break;
         }
 
+        const storyfragmentNodeId = ctx.getClosestNodeTypeFromId(
+          node.id,
+          'StoryFragment'
+        );
+        const storyfragmentNode = storyfragmentNodeId
+          ? (ctx.allNodes.get().get(storyfragmentNodeId) ?? null)
+          : null;
+        const first =
+          isStoryFragmentNode(storyfragmentNode) &&
+          paneNode.id === storyfragmentNode.paneIds?.[0];
+
         const content = isHtmlAstPane ? (
           <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
         ) : (