astro-tractstack 2.3.1 → 2.3.3

package/templates/custom/shopify/CheckoutModal.tsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useMemo, type FormEvent } from 'react';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  type FormEvent,
+} from 'react';
 import { ulid } from 'ulid';
 import { useStore } from '@nanostores/react';
 import { Dialog } from '@ark-ui/react/dialog';
@@ -9,10 +16,15 @@ import {
   customerDetails,
   setCustomerDetails,
   CART_STATES,
+  preferredAppointmentMode,
   transactionTraceId,
   isShopifyHandoff,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import {
+  deriveAppointmentConstraints,
+  pickInitialAppointmentMode,
+} from '@/utils/booking/appointmentMode';
 import { NativeBookingCalendar } from './NativeBookingCalendar';
 import { ProfileStorage } from '@/utils/profileStorage';
 import type { ResourceNode } from '@/types/compositorTypes';
@@ -24,14 +36,19 @@ type CheckoutState =
   | 'SUMMARY'
   | 'PROCESSING'
   | 'SUCCESS';
+type AppointmentMode = 'IN_PERSON' | 'REMOTE';
 
 interface CheckoutModalProps {
   maxLength: number;
+  allowRemote?: boolean;
+  remoteOnly?: boolean;
   resources?: ResourceNode[];
 }
 
 export default function CheckoutModal({
   maxLength,
+  allowRemote = false,
+  remoteOnly = false,
   resources = [],
 }: CheckoutModalProps) {
   const $globalCartState = useStore(cartState);
@@ -57,6 +74,24 @@ export default function CheckoutModal({
     start: Date;
     end: Date;
   } | null>(null);
+  const [appointmentMode, setAppointmentMode] = useState<AppointmentMode>(() =>
+    pickInitialAppointmentMode(
+      deriveAppointmentConstraints(cartStore.get(), resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+      preferredAppointmentMode.get()
+    )
+  );
+  const appointmentModeRef = useRef<AppointmentMode>(
+    pickInitialAppointmentMode(
+      deriveAppointmentConstraints(cartStore.get(), resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+      preferredAppointmentMode.get()
+    )
+  );
   const [error, setError] = useState<string | null>(null);
 
   const isOpen =
@@ -76,12 +111,13 @@ export default function CheckoutModal({
         }
       }
       const variant = (productData?.variants || []).find(
-        (v: any) => v.id === (item.variantId || item.gid)
+        (v: any) => v.id === item.variantId
       );
       return {
         ...item,
         title: productData?.title || resource?.title || 'Loading...',
         price: variant?.price?.amount || '0.00',
+        resourceNode: resource,
         resource: {
           id: item.resourceId,
           needsBooking:
@@ -99,7 +135,7 @@ export default function CheckoutModal({
     [enrichedCart]
   );
   const needsPayment = useMemo(
-    () => enrichedCart.some((item) => !!(item.gid || item.variantId)),
+    () => enrichedCart.some((item) => !!item.variantId),
     [enrichedCart]
   );
   const totalDuration = useMemo(() => {
@@ -111,6 +147,51 @@ export default function CheckoutModal({
     return Math.min(Math.ceil(rawMinutes / 15) * 15, maxLength);
   }, [enrichedCart]);
 
+  const appointmentConstraints = useMemo(
+    () =>
+      deriveAppointmentConstraints($cartItems, resources, {
+        allowRemote,
+        remoteOnly,
+      }),
+    [$cartItems, resources, allowRemote, remoteOnly]
+  );
+
+  const { effectiveRemoteOnly, inPersonAvailable } = appointmentConstraints;
+
+  const remoteAvailable =
+    appointmentConstraints.effectiveRemoteOnly ||
+    (needsBooking &&
+      appointmentConstraints.effectiveAllowRemote &&
+      appointmentConstraints.serviceResources.length > 0 &&
+      appointmentConstraints.allServicesAllowRemote);
+
+  const applyAppointmentMode = useCallback((nextMode: AppointmentMode) => {
+    appointmentModeRef.current = nextMode;
+    setAppointmentMode((currentMode) =>
+      currentMode === nextMode ? currentMode : nextMode
+    );
+    preferredAppointmentMode.set(nextMode);
+  }, []);
+
+  useEffect(() => {
+    if (selectedSlot) {
+      return;
+    }
+    if (effectiveRemoteOnly) {
+      applyAppointmentMode('REMOTE');
+      return;
+    }
+    if (!remoteAvailable && appointmentMode === 'REMOTE') {
+      applyAppointmentMode('IN_PERSON');
+    }
+  }, [
+    effectiveRemoteOnly,
+    remoteAvailable,
+    appointmentMode,
+    selectedSlot,
+    applyAppointmentMode,
+  ]);
+
   useEffect(() => {
     const profile = ProfileStorage.getProfileData();
     if (ProfileStorage.isProfileUnlocked() && profile.email) {
@@ -146,6 +227,36 @@ export default function CheckoutModal({
     }
   }, [$globalCartState, needsBooking, $customer.leadId, internalState]);
 
+  useEffect(() => {
+    if (!isOpen || selectedSlot) {
+      return;
+    }
+
+    if (
+      internalState !== 'IDENTITY_EMAIL' &&
+      internalState !== 'IDENTITY_NEW_USER'
+    ) {
+      return;
+    }
+
+    if (effectiveRemoteOnly) {
+      applyAppointmentMode('REMOTE');
+      return;
+    }
+
+    const next = pickInitialAppointmentMode(
+      appointmentConstraints,
+      preferredAppointmentMode.get()
+    );
+    applyAppointmentMode(next);
+  }, [
+    isOpen,
+    selectedSlot,
+    internalState,
+    appointmentConstraints,
+    applyAppointmentMode,
+  ]);
+
   const handleClose = async () => {
     const redirect = internalState === 'SUCCESS';
     const currentTraceId = transactionTraceId.get();
@@ -249,7 +360,8 @@ export default function CheckoutModal({
         transactionTraceId.get(),
         start.toISOString(),
         end.toISOString(),
-        cartResourceIds
+        cartResourceIds,
+        appointmentModeRef.current
       );
       if (response && (response.success || response.status === 'PENDING')) {
         setInternalState('SUMMARY');
@@ -313,9 +425,9 @@ export default function CheckoutModal({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           lines: enrichedCart
-            .filter((i) => i.gid || i.variantId)
+            .filter((i) => i.variantId)
             .map((i) => ({
-              merchandiseId: i.variantId || i.gid,
+              merchandiseId: i.variantId,
               quantity: i.quantity || 1,
             })),
           email: $customer.email,
@@ -343,6 +455,13 @@ export default function CheckoutModal({
                             }
                           ),
                         },
+                        {
+                          key: 'Appointment Mode',
+                          value:
+                            appointmentMode === 'REMOTE'
+                              ? 'Remote'
+                              : 'In Person',
+                        },
                       ]
                     : []),
                 ],
@@ -462,13 +581,75 @@ export default function CheckoutModal({
                 </form>
               )}
               {internalState === 'BOOKING' && (
-                <NativeBookingCalendar
-                  totalDurationMinutes={totalDuration}
-                  onSlotSelected={handleSlotSelection}
-                />
+                <div className="space-y-6">
+                  {needsBooking && (inPersonAvailable || remoteAvailable) && (
+                    <div className="rounded-xl border border-gray-200 bg-white p-4">
+                      <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                        Appointment Mode
+                      </p>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {inPersonAvailable && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              applyAppointmentMode('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>
+                        )}
+                        {remoteAvailable && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              applyAppointmentMode('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>
+                      {effectiveRemoteOnly && (
+                        <p className="mt-2 text-xs font-bold text-gray-500">
+                          Remote mode is required by shop or service settings.
+                        </p>
+                      )}
+                    </div>
+                  )}
+                  <NativeBookingCalendar
+                    totalDurationMinutes={totalDuration}
+                    onSlotSelected={handleSlotSelection}
+                  />
+                </div>
               )}
               {internalState === 'SUMMARY' && (
                 <div className="space-y-6">
+                  {needsBooking && (
+                    <div className="rounded-xl border border-gray-200 bg-white p-4">
+                      <p className="text-xs font-bold uppercase tracking-wide text-gray-500">
+                        Appointment Mode
+                      </p>
+                      <p className="mt-3 text-sm font-bold text-gray-900">
+                        {appointmentMode === 'REMOTE' ? 'Remote' : 'In Person'}
+                      </p>
+                      {effectiveRemoteOnly && (
+                        <p className="mt-2 text-xs font-bold text-gray-500">
+                          Remote mode is required by shop or service settings.
+                        </p>
+                      )}
+                    </div>
+                  )}
+
                   <div className="rounded-xl border border-gray-200 bg-gray-50 p-6">
                     <h3 className="mb-4 font-bold text-gray-900">
                       Order Summary
@@ -492,6 +673,11 @@ export default function CheckoutModal({
                         <p className="text-xs font-bold uppercase text-gray-500">
                           Appointment
                         </p>
+                        <p className="mt-1 text-xs font-bold uppercase tracking-wide text-gray-500">
+                          {appointmentMode === 'REMOTE'
+                            ? 'Remote'
+                            : 'In Person'}
+                        </p>
                         <p className="mt-1 text-sm font-bold text-gray-900">
                           {selectedSlot.start.toLocaleDateString('en-US', {
                             timeZone: shopTimeZone,

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -5,9 +5,14 @@ import {
   cartStore,
   modalState,
   transactionTraceId,
+  getCartItemKey,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
-import { RESTRICTION_MESSAGES } from '@/utils/customHelpers';
+import {
+  RESTRICTION_MESSAGES,
+  calculateCartDuration,
+} 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';
@@ -34,12 +39,7 @@ export default function ShopifyCartManager({
         return;
       }
 
-      const key =
-        actionItem.variantId ||
-        `${actionItem.resourceId}_${actionItem.variantIdShipped || 'null'}_${
-          actionItem.variantIdPickup || 'null'
-        }`;
-
+      const key = getCartItemKey(actionItem);
       const currentCart = cartStore.get();
       const currentItem = currentCart[key];
       const currentQty = currentItem?.quantity || 0;
@@ -74,19 +74,19 @@ export default function ShopifyCartManager({
         if (currentItem?.boundResourceId || actionItem.boundResourceId) {
           const boundId =
             currentItem?.boundResourceId || actionItem.boundResourceId;
-          const serviceEntry = Object.entries(nextCart).find(
-            ([_, item]) => item.resourceId === boundId
-          );
-          if (serviceEntry) {
-            const [serviceKey, serviceItem] = serviceEntry;
-            const newServiceQty = Math.max(0, serviceItem.quantity - 1);
-            if (newServiceQty === 0) {
-              delete nextCart[serviceKey];
-            } else {
-              nextCart[serviceKey] = {
-                ...serviceItem,
-                quantity: newServiceQty,
-              };
+          if (boundId) {
+            const serviceKey = getCartItemKey({ resourceId: boundId });
+            const serviceItem = nextCart[serviceKey];
+            if (serviceItem) {
+              const newServiceQty = Math.max(0, serviceItem.quantity - 1);
+              if (newServiceQty === 0) {
+                delete nextCart[serviceKey];
+              } else {
+                nextCart[serviceKey] = {
+                  ...serviceItem,
+                  quantity: newServiceQty,
+                };
+              }
             }
           }
         }
@@ -113,80 +113,83 @@ export default function ShopifyCartManager({
         nextCart[key] = newItem;
 
         if (newItem.boundResourceId) {
-          const serviceEntry = Object.entries(nextCart).find(
-            ([_, item]) => item.resourceId === newItem.boundResourceId
-          );
+          const serviceKey = getCartItemKey({
+            resourceId: newItem.boundResourceId,
+          });
+          const serviceItem = nextCart[serviceKey];
 
-          if (serviceEntry) {
-            const [serviceKey, serviceItem] = serviceEntry;
+          if (serviceItem) {
             nextCart[serviceKey] = {
               ...serviceItem,
               quantity: serviceItem.quantity + 1,
             };
           } else {
-            nextCart[`temp_service_${newItem.boundResourceId}`] = {
+            nextCart[serviceKey] = {
               resourceId: newItem.boundResourceId,
               quantity: 1,
             };
           }
         }
 
-        let rawDuration = 0;
-        Object.values(nextCart).forEach((item) => {
-          const res = resources.find((r) => r.id === item.resourceId);
-          if (res?.optionsPayload?.needsBooking || item.boundResourceId) {
-            rawDuration +=
-              (res?.optionsPayload?.bookingLengthMinutes || 0) *
-              (item.quantity || 1);
-          }
-        });
-
-        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
+                  ),
+                });
+              }
             }
           }
         }
@@ -194,7 +197,7 @@ export default function ShopifyCartManager({
         addQueue.set(remaining);
       }
     }
-  }, [queue, resources]);
+  }, [queue, resources, brandConfig]);
 
   return null;
 }

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -6,7 +6,6 @@ import {
   CART_STATES,
   isShopifyHandoff,
 } from '@/stores/shopify';
-import { calculateCartDuration } from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ShopifyCheckoutProps {
@@ -36,47 +35,19 @@ export default function ShopifyCheckout({
       try {
         const cartItems = Object.values(cart);
 
-        // Determine if we are in "Pickup Mode" (Service exists in cart)
-        const duration = calculateCartDuration(cart, resources);
-        const isPickupMode = duration > 0;
-
         const lines = cartItems
           .map((item) => {
-            // 1. Resolve the ResourceNode for this item
+            // Resolve the ResourceNode for this item
             const resource = resources.find((r) => r.id === item.resourceId);
 
             if (!resource) {
               return null;
             }
 
-            // 2. Determine the preferred Variant ID based on mode
-            const activeVariantId = isPickupMode
-              ? item.variantIdPickup
-              : item.variantIdShipped;
-
-            // 3. Establish the specific ID to use from the cart state
-            let merchandiseId =
-              activeVariantId || item.variantIdPickup || item.variantId;
-
-            // 4. FALLBACK LOGIC (Mirrors Cart.tsx)
-            // If no specific variant ID is saved on the cart item,
-            // look up the Default Variant from the Resource data.
-            if (!merchandiseId && resource?.optionsPayload?.shopifyData) {
-              try {
-                const product = JSON.parse(resource.optionsPayload.shopifyData);
-                // If the product has variants, default to the first one
-                if (product.variants && product.variants.length > 0) {
-                  merchandiseId = product.variants[0].id;
-                }
-              } catch (e) {
-                console.warn(
-                  'ShopifyCheckout: Failed to parse shopifyData for fallback',
-                  item.resourceId
-                );
-              }
-            }
+            // Use the explicitly sanitized variant ID from the cart state
+            const merchandiseId = item.variantId;
 
-            // If we still have no ID, we cannot add this item to the Shopify cart.
+            // If we have no ID, we cannot add this item to the Shopify cart.
             if (!merchandiseId) return null;
 
             return {

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -115,8 +115,9 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
       {
         resourceId: resource.id,
         gid: product?.id,
-        variantIdShipped: variantShipped?.id,
-        variantIdPickup: variantPickup?.id,
+        variantId: !hasModeOption ? variantShipped?.id : undefined,
+        variantIdShipped: hasModeOption ? variantShipped?.id : undefined,
+        variantIdPickup: hasModeOption ? variantPickup?.id : undefined,
         action: 'add',
         boundResourceId: boundServiceResource?.id,
       },
@@ -214,14 +215,25 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
   );
 }
 
+const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
 export default function ShopifyProductGrid({ resources = {}, options }: Props) {
   let products = resources['product'] || [];
   const 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) {}
 
   if (group) {
@@ -230,18 +242,34 @@ export default function ShopifyProductGrid({ resources = {}, options }: Props) {
 
   if (products.length === 0) return null;
 
-  // Grid with increased gaps matching the design
   return (
-    <div className="mx-auto max-w-7xl px-4 md:px-8">
-      <div className="grid grid-cols-2 gap-x-8 gap-y-16 md:gap-x-12 xl:grid-cols-3">
-        {products.map((resource) => (
-          <ProductCard
-            key={resource.id}
-            resource={resource}
-            allServices={services}
-          />
-        ))}
+    <section className="w-full">
+      <div
+        className="flex w-full flex-col gap-12 p-12 md:gap-14 md:p-12 xl:gap-16 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="grid grid-cols-2 gap-x-8 gap-y-16 md:gap-x-12 xl:grid-cols-3">
+            {products.map((resource) => (
+              <ProductCard
+                key={resource.id}
+                resource={resource}
+                allServices={services}
+              />
+            ))}
+          </div>
+        </section>
       </div>
-    </div>
+    </section>
   );
 }