astro-tractstack 2.3.0 → 2.3.2

package/templates/custom/shopify/NativeBookingCalendar.tsx

@@ -0,0 +1,375 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+
+interface TimeBlock {
+  start: string;
+  end: string;
+}
+
+interface SchedulingConfig {
+  timezone: string;
+  bufferGapsMinutes: number;
+  businessHours: Record<string, TimeBlock>;
+  unavailableHours: TimeBlock[];
+}
+
+interface Booking {
+  id: string;
+  startTime: string;
+  endTime: string;
+  status: string;
+}
+
+interface NativeBookingCalendarProps {
+  totalDurationMinutes: number;
+  onSlotSelected: (start: Date, end: Date, timeZone: string) => void;
+}
+
+function getUtcFromWallTime(wallTimeIso: string, timeZone: string): Date {
+  const [datePart, timePart] = wallTimeIso.split('T');
+  const [year, month, day] = datePart.split('-').map(Number);
+  const [hour, minute] = timePart.split(':').map(Number);
+
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  const pseudoUtc = new Date(
+    `${year}-${pad(month)}-${pad(day)}T${pad(hour)}:${pad(minute)}:00Z`
+  );
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const parts = formatter.formatToParts(pseudoUtc);
+  const getPart = (type: string) => parts.find((p) => p.type === type)?.value;
+
+  const tzDate = new Date(
+    `${getPart('year')}-${getPart('month')}-${getPart('day')}T${getPart('hour')}:${getPart('minute')}:00Z`
+  );
+  const diff = pseudoUtc.getTime() - tzDate.getTime();
+
+  return new Date(pseudoUtc.getTime() + diff);
+}
+
+export const NativeBookingCalendar = ({
+  totalDurationMinutes,
+  onSlotSelected,
+}: NativeBookingCalendarProps) => {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [availability, setAvailability] = useState<{
+    bookings: Booking[];
+    scheduling: SchedulingConfig;
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedSlot, setSelectedSlot] = useState<{
+    start: Date;
+    end: Date;
+  } | null>(null);
+  const [isAtCapacity, setIsAtCapacity] = useState(false);
+
+  const checkDayHasSlots = useCallback(
+    (date: Date, scheduling: SchedulingConfig, bookings: Booking[]) => {
+      const dayName = date
+        .toLocaleDateString('en-US', { weekday: 'long' })
+        .toLowerCase();
+
+      const businessHours = scheduling.businessHours?.[dayName];
+      if (!businessHours) return false;
+
+      const baseDateIso = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}T`;
+      let iterUtc = getUtcFromWallTime(
+        `${baseDateIso}${businessHours.start}`,
+        scheduling.timezone
+      );
+      const dayEndUtc = getUtcFromWallTime(
+        `${baseDateIso}${businessHours.end}`,
+        scheduling.timezone
+      );
+      const bufferGap = scheduling.bufferGapsMinutes || 0;
+      const now = new Date();
+
+      while (
+        iterUtc.getTime() + totalDurationMinutes * 60000 <=
+        dayEndUtc.getTime()
+      ) {
+        const slotStart = new Date(iterUtc);
+        const slotEnd = new Date(
+          iterUtc.getTime() + totalDurationMinutes * 60000
+        );
+        const slotEndWithBuffer = new Date(
+          slotEnd.getTime() + bufferGap * 60000
+        );
+
+        if (slotStart >= now) {
+          const isBlocked =
+            bookings.some((b) => {
+              const bStart = new Date(b.startTime);
+              const bEnd = new Date(b.endTime);
+              return slotStart < bEnd && slotEndWithBuffer > bStart;
+            }) ||
+            scheduling.unavailableHours.some((u) => {
+              const uStart = new Date(u.start);
+              const uEnd = new Date(u.end);
+              return slotStart < uEnd && slotEndWithBuffer > uStart;
+            });
+
+          if (!isBlocked) return true;
+        }
+        iterUtc = new Date(iterUtc.getTime() + 15 * 60000);
+      }
+      return false;
+    },
+    [totalDurationMinutes]
+  );
+
+  useEffect(() => {
+    const fetchAvailability = async () => {
+      try {
+        setLoading(true);
+        const start = new Date();
+        const end = new Date();
+        // Capped Front-Load: 30 days forward scanning limits infinite loop risk while finding first available opening
+        end.setDate(end.getDate() + 30);
+
+        const response = await bookingHelpers.getAvailability(
+          start.toISOString(),
+          end.toISOString()
+        );
+
+        if (response && response.scheduling) {
+          setAvailability({
+            bookings: response.bookings || [],
+            scheduling: response.scheduling,
+          });
+
+          let foundAvailable = false;
+          let currentCheck = new Date();
+
+          for (let i = 0; i <= 30; i++) {
+            if (
+              checkDayHasSlots(
+                currentCheck,
+                response.scheduling,
+                response.bookings || []
+              )
+            ) {
+              setSelectedDate(new Date(currentCheck));
+              foundAvailable = true;
+              break;
+            }
+            currentCheck.setDate(currentCheck.getDate() + 1);
+          }
+
+          if (!foundAvailable) {
+            setIsAtCapacity(true);
+          }
+          setError(null);
+        } else {
+          setError(response.message || 'Failed to load availability.');
+        }
+      } catch (err) {
+        setError('A network error occurred while fetching availability.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAvailability();
+  }, [checkDayHasSlots]);
+
+  const slots = useMemo(() => {
+    if (!availability || !selectedDate) return [];
+    const shopTz = availability.scheduling.timezone;
+
+    const dayName = selectedDate
+      .toLocaleDateString('en-US', { weekday: 'long' })
+      .toLowerCase();
+
+    const businessHours = availability.scheduling.businessHours?.[dayName];
+    if (!businessHours) return [];
+
+    const baseDateIso = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}T`;
+    let iterUtc = getUtcFromWallTime(
+      `${baseDateIso}${businessHours.start}`,
+      shopTz
+    );
+    const dayEndUtc = getUtcFromWallTime(
+      `${baseDateIso}${businessHours.end}`,
+      shopTz
+    );
+    const bufferGap = availability.scheduling.bufferGapsMinutes || 0;
+    const now = new Date();
+    const daySlots = [];
+
+    while (
+      iterUtc.getTime() + totalDurationMinutes * 60000 <=
+      dayEndUtc.getTime()
+    ) {
+      const slotStart = new Date(iterUtc);
+      const slotEnd = new Date(
+        iterUtc.getTime() + totalDurationMinutes * 60000
+      );
+      const slotEndWithBuffer = new Date(slotEnd.getTime() + bufferGap * 60000);
+
+      const isPast = slotStart < now;
+      const isBlocked =
+        isPast ||
+        availability.bookings.some((b) => {
+          const bStart = new Date(b.startTime);
+          const bEnd = new Date(b.endTime);
+          return slotStart < bEnd && slotEndWithBuffer > bStart;
+        }) ||
+        availability.scheduling.unavailableHours.some((u) => {
+          const uStart = new Date(u.start);
+          const uEnd = new Date(u.end);
+          return slotStart < uEnd && slotEndWithBuffer > uStart;
+        });
+
+      daySlots.push({
+        start: slotStart,
+        end: slotEnd,
+        isAvailable: !isBlocked,
+      });
+      iterUtc = new Date(iterUtc.getTime() + 15 * 60000);
+    }
+    return daySlots;
+  }, [availability, selectedDate, totalDurationMinutes]);
+
+  const handleSlotClick = (start: Date, end: Date) => {
+    setSelectedSlot({ start, end });
+    if (availability?.scheduling.timezone) {
+      onSlotSelected(start, end, availability.scheduling.timezone);
+    }
+  };
+
+  const userTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const shopTz = availability?.scheduling?.timezone;
+  const isDiffTz = Boolean(userTz && shopTz && userTz !== shopTz);
+
+  if (loading)
+    return (
+      <div className="p-8 text-center text-gray-500">
+        Loading availability...
+      </div>
+    );
+  if (error) return <div className="p-8 text-center text-red-500">{error}</div>;
+
+  if (isAtCapacity) {
+    return (
+      <div className="flex flex-col space-y-6 rounded-lg border border-gray-200 bg-gray-50 p-8 text-center">
+        <h3 className="text-lg font-bold text-gray-900">At Capacity</h3>
+        <p className="text-gray-600">
+          We are currently fully booked for the next 30 days! Please check back
+          soon as cancellations do happen, or contact us directly.
+        </p>
+      </div>
+    );
+  }
+
+  const todayStr = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`;
+
+  return (
+    <div className="flex flex-col space-y-6">
+      <div className="flex items-center justify-between border-b pb-4">
+        <h3 className="text-lg font-bold text-gray-900">
+          Select an Appointment
+        </h3>
+        <div className="text-sm text-gray-500">
+          Duration: {totalDurationMinutes} mins
+        </div>
+      </div>
+
+      {isDiffTz && (
+        <div className="rounded-md border border-yellow-200 bg-yellow-50 p-4">
+          <p className="text-sm text-yellow-800">
+            <strong>Please Note:</strong> Appointments are booked in{' '}
+            <strong>{shopTz}</strong> time. Your local timezone is {userTz}.
+          </p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="space-y-4">
+          <label className="block text-sm text-gray-700">Date</label>
+          <input
+            type="date"
+            min={todayStr}
+            value={`${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`}
+            onChange={(e) => {
+              const [y, m, d] = e.target.value.split('-');
+              setSelectedDate(
+                new Date(parseInt(y), parseInt(m) - 1, parseInt(d))
+              );
+            }}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-1 focus:ring-black"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <label className="block text-sm text-gray-700">Available Times</label>
+          <div className="grid max-h-64 grid-cols-2 gap-2 overflow-y-auto pr-2">
+            {slots.length > 0 ? (
+              slots.map((slot, i) => (
+                <button
+                  type="button"
+                  key={i}
+                  disabled={!slot.isAvailable}
+                  onClick={() => handleSlotClick(slot.start, slot.end)}
+                  className={`rounded-md border p-2 text-sm transition-colors ${selectedSlot?.start.getTime() === slot.start.getTime() ? 'border-black bg-black text-white' : slot.isAvailable ? 'bg-white text-gray-700 hover:border-black' : 'cursor-not-allowed border-gray-200 bg-gray-50 text-gray-300'}`}
+                >
+                  <span className="block font-bold">
+                    {slot.start.toLocaleTimeString('en-US', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      timeZone: shopTz,
+                    })}
+                  </span>
+                  {isDiffTz && (
+                    <span className="mt-0.5 block text-xs opacity-75">
+                      (
+                      {slot.start.toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        timeZone: userTz,
+                      })}{' '}
+                      local)
+                    </span>
+                  )}
+                </button>
+              ))
+            ) : (
+              <div className="col-span-2 py-4 text-center text-sm text-gray-400">
+                No slots available for this day.
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {selectedSlot && (
+        <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <p className="text-sm text-gray-900">
+            Selected:{' '}
+            <span className="font-bold">
+              {selectedSlot.start.toLocaleDateString('en-US', {
+                timeZone: shopTz,
+              })}{' '}
+              at{' '}
+              {selectedSlot.start.toLocaleTimeString('en-US', {
+                hour: '2-digit',
+                minute: '2-digit',
+                timeZone: shopTz,
+              })}
+            </span>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -1,20 +1,29 @@
 import { useEffect } from 'react';
 import { useStore } from '@nanostores/react';
-import { addQueue, cartStore, modalState } from '@/stores/shopify';
 import {
-  calculateCartDuration,
-  MAX_LENGTH_MINUTES,
+  addQueue,
+  cartStore,
+  modalState,
+  transactionTraceId,
+  getCartItemKey,
+} from '@/stores/shopify';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import {
   RESTRICTION_MESSAGES,
+  calculateCartDuration,
 } from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 import type { CartItemState } from '@/stores/shopify';
+import type { BrandConfigState } from '@/types/tractstack';
 
 interface ShopifyCartManagerProps {
-  resources: ResourceNode[];
+  resources?: ResourceNode[];
+  brandConfig?: BrandConfigState;
 }
 
 export default function ShopifyCartManager({
   resources = [],
+  brandConfig,
 }: ShopifyCartManagerProps) {
   const queue = useStore(addQueue);
 
@@ -29,43 +38,65 @@ 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;
+      const nextCart = { ...currentCart };
 
       if (actionItem.action === 'remove') {
         const newQty = Math.max(0, currentQty - 1);
 
         if (newQty === 0) {
-          const newCart = { ...currentCart };
-          delete newCart[key];
-          cartStore.set(newCart);
+          if (
+            resource?.optionsPayload?.needsBooking ||
+            currentItem?.boundResourceId
+          ) {
+            const traceId = transactionTraceId.get();
+            if (traceId) {
+              bookingHelpers
+                .releaseHold(traceId)
+                .catch((err) =>
+                  console.error('Failed to release hold on cart removal:', err)
+                );
+            }
+          }
+          delete nextCart[key];
         } else {
-          cartStore.setKey(key, {
+          nextCart[key] = {
+            ...currentItem,
             resourceId: actionItem.resourceId,
             quantity: newQty,
-            gid: actionItem.gid || currentItem?.gid,
-            variantId: actionItem.variantId || currentItem?.variantId,
-            variantIdShipped:
-              actionItem.variantIdShipped || currentItem?.variantIdShipped,
-            variantIdPickup:
-              actionItem.variantIdPickup || currentItem?.variantIdPickup,
-            boundResourceId:
-              actionItem.boundResourceId || currentItem?.boundResourceId,
-          });
+          };
         }
 
+        if (currentItem?.boundResourceId || actionItem.boundResourceId) {
+          const boundId =
+            currentItem?.boundResourceId || actionItem.boundResourceId;
+          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,
+                };
+              }
+            }
+          }
+        }
+
+        cartStore.set(nextCart);
         addQueue.set(remaining);
       } else if (actionItem.action === 'add') {
+        transactionTraceId.set('');
         const newQty = currentQty + 1;
 
-        const newItem = {
+        const newItem: CartItemState = {
           resourceId: actionItem.resourceId,
           quantity: newQty,
           gid: actionItem.gid || currentItem?.gid,
@@ -78,51 +109,66 @@ export default function ShopifyCartManager({
             actionItem.boundResourceId || currentItem?.boundResourceId,
         };
 
-        const nextCart: Record<string, CartItemState> = {
-          ...currentCart,
-          [key]: newItem,
-        };
+        nextCart[key] = newItem;
 
-        if (actionItem.boundResourceId) {
-          const serviceEntry = Object.entries(currentCart).find(
-            ([_, item]) => item.resourceId === actionItem.boundResourceId
-          );
+        if (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_${actionItem.boundResourceId}`] = {
-              resourceId: actionItem.boundResourceId,
+            nextCart[serviceKey] = {
+              resourceId: newItem.boundResourceId,
               quantity: 1,
             };
           }
         }
 
-        const duration = calculateCartDuration(nextCart, resources);
-        const bookingDuration = resource.optionsPayload?.bookingLengthMinutes;
+        const rawDuration = calculateCartDuration(nextCart, resources);
+
+        const interval = 15;
+        const snappedDuration = Math.ceil(rawDuration / interval) * interval;
 
-        if (duration > MAX_LENGTH_MINUTES) {
+        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(MAX_LENGTH_MINUTES),
+            message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
           });
         } else {
-          cartStore.setKey(key, newItem);
+          cartStore.set(nextCart);
 
           if (!actionItem.suppressModal) {
-            if (resource.categorySlug === 'service') {
+            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(
-                  (bookingDuration || 0).toString()
+                  (
+                    targetResource.optionsPayload?.bookingLengthMinutes || 0
+                  ).toString()
                 ),
               });
             } else {
@@ -130,7 +176,7 @@ export default function ShopifyCartManager({
                 isOpen: true,
                 type: 'success',
                 title: 'Added to Cart',
-                message: RESTRICTION_MESSAGES.DEFAULT_ADD(resource.title),
+                message: RESTRICTION_MESSAGES.DEFAULT_ADD(targetResource.title),
               });
             }
           }
@@ -139,7 +185,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 {