astro-tractstack 2.3.2 → 2.3.4

package/templates/custom/shopify/Cart.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { ulid } from 'ulid';
 import { useStore } from '@nanostores/react';
 import {
@@ -7,14 +7,25 @@ import {
   cartState,
   CART_STATES,
   isShopifyHandoff,
+  preferredAppointmentMode,
   transactionTraceId,
   type CartItemState,
 } from '@/stores/shopify';
 import { getShopifyImage } from '@/utils/helpers';
+import { deriveAppointmentConstraints } from '@/utils/booking/appointmentMode';
+import {
+  getServiceLinkedProduct,
+  getServiceVariantIdFromCanonicalProduct,
+  getSharedFeeChargeLineSummary,
+  isSharedFeeService,
+  parsePrimaryShopifyProductData,
+} from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface CartProps {
   resources: ResourceNode[];
+  allowRemote?: boolean;
+  remoteOnly?: boolean;
 }
 
 const getCleanVariantTitle = (variant: any) => {
@@ -34,9 +45,20 @@ const getCleanVariantTitle = (variant: any) => {
   return title === 'Default Title' ? '' : title;
 };
 
-export default function Cart({ resources = [] }: CartProps) {
+const getCategoryPriority = (categorySlug?: string): number => {
+  if (categorySlug === 'product') return 0;
+  if (categorySlug === 'service') return 1;
+  return 2;
+};
+
+export default function Cart({
+  resources = [],
+  allowRemote = false,
+  remoteOnly = false,
+}: CartProps) {
   const cart = useStore(cartStore);
   const isHandoff = useStore(isShopifyHandoff);
+  const appointmentMode = useStore(preferredAppointmentMode);
   const [pickupEnabled, setPickupEnabled] = useState(false);
 
   const cartValues = Object.values(cart);
@@ -61,18 +83,62 @@ export default function Cart({ resources = [] }: CartProps) {
     },
     {} as Record<string, CartItemState[]>
   );
+  const orderedResourceIds = useMemo(() => {
+    const firstSeenIndex = new Map<string, number>();
+    displayableItems.forEach((item, index) => {
+      if (!firstSeenIndex.has(item.resourceId)) {
+        firstSeenIndex.set(item.resourceId, index);
+      }
+    });
+
+    return Object.keys(groupedItems).sort((a, b) => {
+      const categoryA = resources.find((r) => r.id === a)?.categorySlug;
+      const categoryB = resources.find((r) => r.id === b)?.categorySlug;
+      const priorityA = getCategoryPriority(categoryA);
+      const priorityB = getCategoryPriority(categoryB);
+      if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+      }
+      return (
+        (firstSeenIndex.get(a) ?? Number.MAX_SAFE_INTEGER) -
+        (firstSeenIndex.get(b) ?? Number.MAX_SAFE_INTEGER)
+      );
+    });
+  }, [displayableItems, groupedItems, resources]);
 
   const hasService = cartValues.some((item) => {
     const resource = resources.find((r) => r.id === item.resourceId);
     return !!resource?.optionsPayload?.bookingLengthMinutes;
   });
 
+  const appointmentConstraints = useMemo(
+    () =>
+      deriveAppointmentConstraints(cart, resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+    [cart, resources, allowRemote, remoteOnly]
+  );
+  const { effectiveRemoteOnly, remoteAvailable, inPersonAvailable, canRemote } =
+    appointmentConstraints;
+
   const hasPhysicalProductWithPickup = cartValues.some(
     (item) =>
       item.variantIdPickup && item.variantIdPickup !== item.variantIdShipped
   );
 
-  const canPickup = hasService && hasPhysicalProductWithPickup;
+  const canPickup =
+    hasService && hasPhysicalProductWithPickup && appointmentMode !== 'REMOTE';
+
+  useEffect(() => {
+    if (effectiveRemoteOnly) {
+      preferredAppointmentMode.set('REMOTE');
+      return;
+    }
+    if (!canRemote && preferredAppointmentMode.get() === 'REMOTE') {
+      preferredAppointmentMode.set('IN_PERSON');
+    }
+  }, [effectiveRemoteOnly, canRemote]);
 
   useEffect(() => {
     if (canPickup) {
@@ -83,6 +149,10 @@ export default function Cart({ resources = [] }: CartProps) {
   }, [canPickup]);
 
   const isPickupMode = canPickup && pickupEnabled;
+  const productResources = resources.filter(
+    (r) => r.categorySlug === 'product'
+  );
+  const sharedFeeChargeLine = getSharedFeeChargeLineSummary(cart, resources);
 
   const dispatchAction = (item: CartItemState, action: 'add' | 'remove') => {
     addQueue.set([
@@ -131,26 +201,68 @@ export default function Cart({ resources = [] }: CartProps) {
     <div className="rounded-lg bg-white shadow">
       <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
         <h2 className="text-xl font-bold text-gray-800">Shopping Cart</h2>
-        {canPickup && (
-          <label className="flex items-center space-x-2 text-sm font-bold text-gray-900">
-            <input
-              type="checkbox"
-              checked={pickupEnabled}
-              onChange={(e) => setPickupEnabled(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black"
-            />
-            <span>Pick up at Store</span>
-          </label>
-        )}
+        <div className="flex items-center gap-4">
+          {hasService && remoteAvailable && inPersonAvailable && (
+            <div className="flex flex-col items-end gap-1">
+              <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                Appointment Mode
+              </p>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => preferredAppointmentMode.set('IN_PERSON')}
+                  className={`rounded-md px-3 py-2 text-sm font-bold ${
+                    appointmentMode === 'IN_PERSON'
+                      ? 'bg-black text-white'
+                      : 'border border-gray-300 bg-white text-gray-700'
+                  }`}
+                >
+                  In Person
+                </button>
+                <button
+                  type="button"
+                  onClick={() => preferredAppointmentMode.set('REMOTE')}
+                  className={`rounded-md px-3 py-2 text-sm font-bold ${
+                    appointmentMode === 'REMOTE'
+                      ? 'bg-black text-white'
+                      : 'border border-gray-300 bg-white text-gray-700'
+                  }`}
+                >
+                  Remote
+                </button>
+              </div>
+            </div>
+          )}
+          {hasService && effectiveRemoteOnly && (
+            <p className="text-sm font-bold text-gray-900">
+              Appointment: Remote
+            </p>
+          )}
+          {canPickup && (
+            <label className="flex items-center space-x-2 text-sm font-bold text-gray-900">
+              <input
+                type="checkbox"
+                checked={pickupEnabled}
+                onChange={(e) => setPickupEnabled(e.target.checked)}
+                className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black"
+              />
+              <span>Pick up at Store</span>
+            </label>
+          )}
+        </div>
       </div>
 
       <ul className="divide-y divide-gray-200">
-        {Object.keys(groupedItems).map((resourceId) => {
+        {orderedResourceIds.map((resourceId) => {
           const items = groupedItems[resourceId];
           const resource = resources.find((r) => r.id === resourceId);
           if (!resource || items.length === 0) return null;
 
           const isService = !!resource.optionsPayload?.bookingLengthMinutes;
+          const sharedFeeService = isSharedFeeService(
+            resource,
+            productResources
+          );
           const serviceDuration = resource.optionsPayload?.bookingLengthMinutes;
 
           const firstItem = items[0];
@@ -162,10 +274,14 @@ export default function Cart({ resources = [] }: CartProps) {
           const activeVariantIdFirst = isPickupMode
             ? firstItem.variantIdPickup
             : firstItem.variantIdShipped;
+          const fallbackServiceVariantId = isService
+            ? getServiceVariantIdFromCanonicalProduct(resource, resources)
+            : undefined;
           const displayIdFirst =
             firstItem.variantId ||
             activeVariantIdFirst ||
-            firstItem.variantIdPickup;
+            firstItem.variantIdPickup ||
+            fallbackServiceVariantId;
 
           const { src, srcSet } = getShopifyImage(
             resource,
@@ -173,14 +289,12 @@ export default function Cart({ resources = [] }: CartProps) {
             displayIdFirst
           );
 
-          let productData: any = {};
-          try {
-            if (resource.optionsPayload?.shopifyData) {
-              productData = JSON.parse(resource.optionsPayload.shopifyData);
-            }
-          } catch (e) {
-            console.error('Failed to parse Shopify data', resource.id);
-          }
+          const priceResource = isService
+            ? getServiceLinkedProduct(resource, resources) || resource
+            : resource;
+
+          const productData =
+            parsePrimaryShopifyProductData(priceResource) || {};
           const variants = productData?.variants || [];
 
           return (
@@ -197,7 +311,7 @@ export default function Cart({ resources = [] }: CartProps) {
                     />
                   </div>
                 )}
-                <div className="ml-4 flex-1">
+                <div className={`${isService ? '' : 'ml-4'} flex-1`}>
                   <div className="flex justify-between">
                     <div>
                       <div className="flex items-center gap-2">
@@ -231,107 +345,132 @@ export default function Cart({ resources = [] }: CartProps) {
                         {resource.oneliner}
                       </p>
                     </div>
+                    {isService && sharedFeeService && (
+                      <button
+                        onClick={() =>
+                          addQueue.set([
+                            ...addQueue.get(),
+                            {
+                              resourceId: firstItem.resourceId,
+                              action: 'remove',
+                              variantId: firstItem.variantId,
+                            },
+                          ])
+                        }
+                        className="ml-4 rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
+                      >
+                        Remove
+                      </button>
+                    )}
                   </div>
 
-                  <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
-                    {items.map((item, idx) => {
-                      const activeVariantId = isPickupMode
-                        ? item.variantIdPickup
-                        : item.variantIdShipped;
-
-                      const displayId =
-                        item.variantId ||
-                        activeVariantId ||
-                        item.variantIdPickup;
-
-                      let price = '0.00';
-                      let currency = 'USD';
-                      let variantTitle = '';
-
-                      const variant = variants.find(
-                        (v: any) => v.id === displayId
-                      );
-
-                      if (variant) {
-                        price = variant.price?.amount || '0.00';
-                        currency = variant.price?.currencyCode || 'USD';
-                        variantTitle = getCleanVariantTitle(variant);
-                      }
-
-                      return (
-                        <div
-                          key={`${item.resourceId}_${displayId}_${idx}`}
-                          className="flex items-center justify-between"
-                        >
-                          <div className="flex items-center gap-2">
-                            {variantTitle && (
-                              <div className="text-sm font-bold text-gray-700">
-                                <span>{variantTitle}</span>
-                              </div>
-                            )}
-                            {isPickupMode &&
-                              !isService &&
-                              (item.variantIdPickup &&
-                              item.variantIdPickup !== item.variantIdShipped ? (
-                                <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
-                                  Store Pickup
-                                </span>
-                              ) : (
-                                <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700">
-                                  Not available for pickup
-                                </span>
-                              ))}
-                          </div>
-
-                          <div className="flex items-center">
-                            <div className="mr-6 text-right">
-                              <p className="text-sm font-bold text-gray-900">
-                                {price && parseFloat(price) > 0
-                                  ? `${(parseFloat(price) * item.quantity).toFixed(2)} ${currency}`
-                                  : 'No Charge'}
-                              </p>
+                  {!(isService && sharedFeeService) && (
+                    <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
+                      {items.map((item, idx) => {
+                        const activeVariantId = isPickupMode
+                          ? item.variantIdPickup
+                          : item.variantIdShipped;
+
+                        const displayId =
+                          item.variantId ||
+                          activeVariantId ||
+                          item.variantIdPickup ||
+                          fallbackServiceVariantId;
+
+                        let price = '0.00';
+                        let currency = 'USD';
+                        let variantTitle = '';
+
+                        const variant = variants.find(
+                          (v: any) => v.id === displayId
+                        );
+
+                        if (variant) {
+                          price = variant.price?.amount || '0.00';
+                          currency = variant.price?.currencyCode || 'USD';
+                          variantTitle = getCleanVariantTitle(variant);
+                        }
+
+                        return (
+                          <div
+                            key={`${item.resourceId}_${displayId}_${idx}`}
+                            className="flex items-center justify-between"
+                          >
+                            <div className="flex items-center gap-2">
+                              {variantTitle && (
+                                <div className="text-sm font-bold text-gray-700">
+                                  <span>{variantTitle}</span>
+                                </div>
+                              )}
+                              {isPickupMode &&
+                                !isService &&
+                                (item.variantIdPickup &&
+                                item.variantIdPickup !==
+                                  item.variantIdShipped ? (
+                                  <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+                                    Store Pickup
+                                  </span>
+                                ) : (
+                                  <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700">
+                                    Not available for pickup
+                                  </span>
+                                ))}
                             </div>
 
-                            {isService ? (
-                              <button
-                                onClick={() =>
-                                  addQueue.set([
-                                    ...addQueue.get(),
-                                    {
-                                      resourceId: item.resourceId,
-                                      action: 'remove',
-                                      variantId: item.variantId,
-                                    },
-                                  ])
-                                }
-                                className="rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
-                              >
-                                Remove
-                              </button>
-                            ) : (
-                              <div className="flex items-center rounded-md border border-gray-300">
-                                <button
-                                  onClick={() => dispatchAction(item, 'remove')}
-                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
-                                >
-                                  -
-                                </button>
-                                <span className="border-l border-r border-gray-300 px-3 py-1 text-gray-900">
-                                  {item.quantity}
-                                </span>
+                            <div className="flex items-center">
+                              <div className="mr-6 text-right">
+                                <p className="text-sm font-bold text-gray-900">
+                                  {isService && sharedFeeService
+                                    ? ''
+                                    : price && parseFloat(price) > 0
+                                      ? `${(parseFloat(price) * item.quantity).toFixed(2)} ${currency}`
+                                      : 'No Charge'}
+                                </p>
+                              </div>
+
+                              {isService ? (
                                 <button
-                                  onClick={() => dispatchAction(item, 'add')}
-                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  onClick={() =>
+                                    addQueue.set([
+                                      ...addQueue.get(),
+                                      {
+                                        resourceId: item.resourceId,
+                                        action: 'remove',
+                                        variantId: item.variantId,
+                                      },
+                                    ])
+                                  }
+                                  className="rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
                                 >
-                                  +
+                                  Remove
                                 </button>
-                              </div>
-                            )}
+                              ) : (
+                                <div className="flex items-center rounded-md border border-gray-300">
+                                  <button
+                                    onClick={() =>
+                                      dispatchAction(item, 'remove')
+                                    }
+                                    className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  >
+                                    -
+                                  </button>
+                                  <span className="border-l border-r border-gray-300 px-3 py-1 text-gray-900">
+                                    {item.quantity}
+                                  </span>
+                                  <button
+                                    onClick={() => dispatchAction(item, 'add')}
+                                    className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  >
+                                    +
+                                  </button>
+                                </div>
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      );
-                    })}
-                  </div>
+                        );
+                      })}
+                    </div>
+                  )}
                 </div>
               </div>
             </li>
@@ -339,6 +478,28 @@ export default function Cart({ resources = [] }: CartProps) {
         })}
       </ul>
 
+      {sharedFeeChargeLine && (
+        <div className="border-t border-gray-200 bg-white px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-bold text-gray-900">
+                {sharedFeeChargeLine.title}
+              </p>
+              {sharedFeeChargeLine.description && (
+                <p className="text-xs text-gray-500">
+                  {sharedFeeChargeLine.description}
+                </p>
+              )}
+            </div>
+            <p className="text-sm font-bold text-gray-900">
+              {parseFloat(sharedFeeChargeLine.amount) > 0
+                ? `${parseFloat(sharedFeeChargeLine.amount).toFixed(2)} ${sharedFeeChargeLine.currencyCode}`
+                : 'No Charge'}
+            </p>
+          </div>
+        </div>
+      )}
+
       <div className="rounded-b-lg border-t border-gray-200 bg-gray-50 px-6 py-6">
         <div className="flex justify-end">
           <button

package/templates/custom/shopify/CartIcon.tsx

@@ -1,15 +1,15 @@
 import { useStore } from '@nanostores/react';
 import { cartStore } from '@/stores/shopify';
+import { getCartIconCount } from '@/utils/customHelpers';
+import type { ResourceNode } from '@/types/compositorTypes';
 
-export default function CartIcon() {
+interface CartIconProps {
+  resources?: ResourceNode[];
+}
+
+export default function CartIcon({ resources = [] }: CartIconProps) {
   const cart = useStore(cartStore);
-  const cartValues = Object.values(cart);
-  const boundServiceIds = new Set(
-    cartValues.map((item) => item.boundResourceId).filter(Boolean)
-  );
-  const totalQuantity = cartValues
-    .filter((item) => !boundServiceIds.has(item.resourceId))
-    .reduce((total, item) => total + item.quantity, 0);
+  const totalQuantity = getCartIconCount(cart, resources);
 
   const handleOpenCart = () => {
     window.location.href = '/cart';