astro-tractstack 2.2.10 → 2.3.1

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

@@ -0,0 +1,200 @@
+import { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import {
+  addQueue,
+  cartStore,
+  modalState,
+  transactionTraceId,
+} from '@/stores/shopify';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import { RESTRICTION_MESSAGES } 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[];
+  brandConfig?: BrandConfigState;
+}
+
+export default function ShopifyCartManager({
+  resources = [],
+  brandConfig,
+}: ShopifyCartManagerProps) {
+  const queue = useStore(addQueue);
+
+  useEffect(() => {
+    if (queue.length > 0) {
+      const actionItem = queue[0];
+      const remaining = queue.slice(1);
+      const resource = resources.find((r) => r.id === actionItem.resourceId);
+
+      if (!resource) {
+        addQueue.set(remaining);
+        return;
+      }
+
+      const key =
+        actionItem.variantId ||
+        `${actionItem.resourceId}_${actionItem.variantIdShipped || 'null'}_${
+          actionItem.variantIdPickup || 'null'
+        }`;
+
+      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) {
+          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 {
+          nextCart[key] = {
+            ...currentItem,
+            resourceId: actionItem.resourceId,
+            quantity: newQty,
+          };
+        }
+
+        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,
+              };
+            }
+          }
+        }
+
+        cartStore.set(nextCart);
+        addQueue.set(remaining);
+      } else if (actionItem.action === 'add') {
+        transactionTraceId.set('');
+        const newQty = currentQty + 1;
+
+        const newItem: CartItemState = {
+          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,
+        };
+
+        nextCart[key] = newItem;
+
+        if (newItem.boundResourceId) {
+          const serviceEntry = Object.entries(nextCart).find(
+            ([_, item]) => item.resourceId === newItem.boundResourceId
+          );
+
+          if (serviceEntry) {
+            const [serviceKey, serviceItem] = serviceEntry;
+            nextCart[serviceKey] = {
+              ...serviceItem,
+              quantity: serviceItem.quantity + 1,
+            };
+          } else {
+            nextCart[`temp_service_${newItem.boundResourceId}`] = {
+              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) {
+          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),
+              });
+            }
+          }
+        }
+
+        addQueue.set(remaining);
+      }
+    }
+  }, [queue, resources]);
+
+  return null;
+}