astro-tractstack 2.2.10 → 2.3.0

package/templates/custom/shopify/CartIcon.tsx

@@ -0,0 +1,47 @@
+import { useStore } from '@nanostores/react';
+import { cartStore } from '@/stores/shopify';
+
+export default function CartIcon() {
+  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 handleOpenCart = () => {
+    window.location.href = '/cart';
+  };
+
+  if (totalQuantity === 0) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={handleOpenCart}
+      className="relative flex items-center justify-center rounded-full p-2 text-gray-700 transition-colors hover:bg-gray-100"
+      aria-label="Open Cart"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="h-6 w-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+        />
+      </svg>
+      <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black text-xs font-bold text-white ring-2 ring-white">
+        {totalQuantity}
+      </span>
+    </button>
+  );
+}

package/templates/custom/shopify/CartModal.tsx

@@ -0,0 +1,63 @@
+import { useStore } from '@nanostores/react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import { modalState } from '@/stores/shopify';
+
+export default function CartModal() {
+  const state = useStore(modalState);
+
+  const handleClose = () => {
+    modalState.set({ ...state, isOpen: false });
+  };
+
+  const handleAccept = () => {
+    modalState.set({ ...state, isOpen: false });
+    window.location.href = '/cart';
+  };
+
+  if (!state.isOpen) return null;
+
+  const isCartPage =
+    typeof window !== 'undefined' && window.location.pathname === '/cart';
+
+  return (
+    <Dialog.Root
+      open={state.isOpen}
+      onOpenChange={(e) => !e.open && handleClose()}
+    >
+      <Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-75 backdrop-blur-sm" />
+        <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
+            <div className="p-6">
+              <Dialog.Title className="text-xl font-bold text-gray-900">
+                {state.title}
+              </Dialog.Title>
+
+              <div className="mt-4 text-gray-600">
+                <p>{state.message}</p>
+              </div>
+
+              <div className="mt-6 flex justify-end gap-3">
+                <button
+                  onClick={handleClose}
+                  className="rounded-md bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 hover:bg-gray-300"
+                >
+                  {isCartPage ? 'Close' : 'Continue Shopping'}
+                </button>
+                {!isCartPage && (
+                  <button
+                    onClick={handleAccept}
+                    className="rounded-md bg-black px-4 py-2 text-sm font-bold text-white hover:bg-gray-800"
+                  >
+                    View Cart
+                  </button>
+                )}
+              </div>
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}

package/templates/custom/shopify/CheckoutModal.tsx

@@ -0,0 +1,187 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { useStore } from '@nanostores/react';
+import { ulid } from 'ulid';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import {
+  cartState,
+  cartStore,
+  customerDetails,
+  CART_STATES,
+} from '@/stores/shopify';
+import CalDotComBooking from './CalDotComBooking';
+import ShopifyCheckout from './ShopifyCheckout';
+import { calculateCartDuration, getBookingBucket } from '@/utils/customHelpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface CheckoutModalProps {
+  resources: ResourceNode[];
+}
+
+export default function CheckoutModal({ resources = [] }: CheckoutModalProps) {
+  const state = useStore(cartState);
+  const cart = useStore(cartStore);
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [traceId, setTraceId] = useState('');
+
+  const duration = calculateCartDuration(cart, resources);
+  const bookingSlug = getBookingBucket(duration);
+  const needsBooking = !!bookingSlug;
+
+  const needsPayment = Object.values(cart).some((item) => {
+    if (item.gid) return true;
+    const resource = resources.find((r) => r.id === item.resourceId);
+    return !!resource?.optionsPayload?.gid;
+  });
+
+  const isOpen =
+    state === CART_STATES.CHECKOUT ||
+    state === CART_STATES.BOOKING ||
+    state === CART_STATES.SHOPIFY_HANDOFF;
+
+  useEffect(() => {
+    if (state === CART_STATES.CHECKOUT && !traceId) {
+      setTraceId(ulid());
+      const saved = customerDetails.get();
+      if (saved.name) setName(saved.name);
+      if (saved.email) setEmail(saved.email);
+    }
+    if (state === CART_STATES.READY) {
+      setTraceId('');
+    }
+  }, [state, traceId]);
+
+  const handleClose = () => {
+    cartState.set(CART_STATES.READY);
+  };
+
+  const handleIdentitySubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!name || !email) return;
+
+    customerDetails.set({ name, email });
+
+    if (needsBooking) {
+      cartState.set(CART_STATES.BOOKING);
+    } else if (needsPayment) {
+      cartState.set(CART_STATES.SHOPIFY_HANDOFF);
+    } else {
+      cartState.set(CART_STATES.READY);
+    }
+  };
+
+  const handleBookingSuccess = () => {
+    if (needsPayment) {
+      cartState.set(CART_STATES.SHOPIFY_HANDOFF);
+    } else {
+      alert('Booking Confirmed!');
+      cartStore.set({});
+      cartState.set(CART_STATES.READY);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(e) => !e.open && handleClose()}>
+      <Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-75 backdrop-blur-sm" />
+        <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content className="w-full max-w-lg overflow-hidden rounded-lg bg-white shadow-xl">
+            {state === CART_STATES.CHECKOUT && (
+              <div className="p-6">
+                <Dialog.Title className="text-xl font-bold text-gray-900">
+                  Checkout Details
+                </Dialog.Title>
+                <div className="mt-2 text-sm text-gray-500">
+                  Please provide your details to continue.
+                </div>
+
+                <form
+                  onSubmit={handleIdentitySubmit}
+                  className="mt-6 space-y-4"
+                >
+                  <div>
+                    <label
+                      htmlFor="name"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Full Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      required
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      className="mt-1 block 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>
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Email Address
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      required
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="mt-1 block 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="mt-6 flex justify-end gap-3">
+                    <button
+                      type="button"
+                      onClick={handleClose}
+                      className="rounded-md bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 hover:bg-gray-300"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="submit"
+                      className="rounded-md bg-black px-4 py-2 text-sm font-bold text-white hover:bg-gray-800"
+                    >
+                      Continue
+                    </button>
+                  </div>
+                </form>
+              </div>
+            )}
+
+            {state === CART_STATES.BOOKING && bookingSlug && (
+              <div className="w-full overflow-hidden" style={{ height: 600 }}>
+                <CalDotComBooking
+                  calSlug={bookingSlug}
+                  traceId={traceId}
+                  name={name}
+                  email={email}
+                  onSuccess={handleBookingSuccess}
+                />
+              </div>
+            )}
+
+            {state === CART_STATES.SHOPIFY_HANDOFF && (
+              <div className="p-6">
+                <ShopifyCheckout
+                  resources={resources}
+                  traceId={traceId}
+                  email={email}
+                  onError={() => {
+                    console.error('Hand-off failed');
+                  }}
+                />
+              </div>
+            )}
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -0,0 +1,145 @@
+import { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { addQueue, cartStore, modalState } from '@/stores/shopify';
+import {
+  calculateCartDuration,
+  MAX_LENGTH_MINUTES,
+  RESTRICTION_MESSAGES,
+} from '@/utils/customHelpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+import type { CartItemState } from '@/stores/shopify';
+
+interface ShopifyCartManagerProps {
+  resources: ResourceNode[];
+}
+
+export default function ShopifyCartManager({
+  resources = [],
+}: 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;
+
+      if (actionItem.action === 'remove') {
+        const newQty = Math.max(0, currentQty - 1);
+
+        if (newQty === 0) {
+          const newCart = { ...currentCart };
+          delete newCart[key];
+          cartStore.set(newCart);
+        } else {
+          cartStore.setKey(key, {
+            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,
+          });
+        }
+
+        addQueue.set(remaining);
+      } else if (actionItem.action === 'add') {
+        const newQty = currentQty + 1;
+
+        const newItem = {
+          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,
+        };
+
+        const nextCart: Record<string, CartItemState> = {
+          ...currentCart,
+          [key]: newItem,
+        };
+
+        if (actionItem.boundResourceId) {
+          const serviceEntry = Object.entries(currentCart).find(
+            ([_, item]) => item.resourceId === actionItem.boundResourceId
+          );
+
+          if (serviceEntry) {
+            const [serviceKey, serviceItem] = serviceEntry;
+            nextCart[serviceKey] = {
+              ...serviceItem,
+              quantity: serviceItem.quantity + 1,
+            };
+          } else {
+            nextCart[`temp_service_${actionItem.boundResourceId}`] = {
+              resourceId: actionItem.boundResourceId,
+              quantity: 1,
+            };
+          }
+        }
+
+        const duration = calculateCartDuration(nextCart, resources);
+        const bookingDuration = resource.optionsPayload?.bookingLengthMinutes;
+
+        if (duration > MAX_LENGTH_MINUTES) {
+          modalState.set({
+            isOpen: true,
+            type: 'restriction',
+            title: 'Appointment Length Limit Reached',
+            message: RESTRICTION_MESSAGES.MAX_DURATION(MAX_LENGTH_MINUTES),
+          });
+        } else {
+          cartStore.setKey(key, newItem);
+
+          if (!actionItem.suppressModal) {
+            if (resource.categorySlug === 'service') {
+              modalState.set({
+                isOpen: true,
+                type: 'success',
+                title: 'Booking Required',
+                message: RESTRICTION_MESSAGES.BOOKING(
+                  (bookingDuration || 0).toString()
+                ),
+              });
+            } else {
+              modalState.set({
+                isOpen: true,
+                type: 'success',
+                title: 'Added to Cart',
+                message: RESTRICTION_MESSAGES.DEFAULT_ADD(resource.title),
+              });
+            }
+          }
+        }
+
+        addQueue.set(remaining);
+      }
+    }
+  }, [queue, resources]);
+
+  return null;
+}

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
+import {
+  cartStore,
+  cartState,
+  CART_STATES,
+  isShopifyHandoff,
+} from '@/stores/shopify';
+import { calculateCartDuration } from '@/utils/customHelpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface ShopifyCheckoutProps {
+  traceId: string;
+  email: string;
+  resources: ResourceNode[];
+  onError: (error: string) => void;
+}
+
+export default function ShopifyCheckout({
+  traceId,
+  email,
+  resources = [],
+  onError,
+}: ShopifyCheckoutProps) {
+  const cart = useStore(cartStore);
+  const [status, setStatus] = useState<'IDLE' | 'PROCESSING' | 'REDIRECTING'>(
+    'IDLE'
+  );
+
+  useEffect(() => {
+    if (status !== 'IDLE') return;
+
+    const initCheckout = async () => {
+      setStatus('PROCESSING');
+
+      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
+            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
+                );
+              }
+            }
+
+            // If we still 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;
+        }>;
+
+        if (lines.length === 0) {
+          throw new Error(
+            'No valid Shopify items found in cart. Please try removing and re-adding your items.'
+          );
+        }
+
+        const payload = {
+          lines,
+          email,
+          attributes: [
+            {
+              key: 'Trace ID',
+              value: traceId,
+            },
+          ],
+        };
+
+        const response = await fetch('/api/shopify/createCart', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(payload),
+        });
+
+        const result = await response.json();
+
+        if (!response.ok || result.error) {
+          throw new Error(result.error || 'Failed to create checkout');
+        }
+
+        if (result.checkoutUrl) {
+          setStatus('REDIRECTING');
+          isShopifyHandoff.set(true);
+          cartStore.set({});
+          cartState.set(CART_STATES.READY);
+          window.location.href = result.checkoutUrl;
+        } else {
+          throw new Error('No checkout URL returned from Shopify');
+        }
+      } catch (err) {
+        console.error('Checkout Error:', err);
+        setStatus('IDLE');
+        onError(err instanceof Error ? err.message : 'Checkout failed');
+      }
+    };
+
+    initCheckout();
+  }, [cart, email, traceId, resources, status, onError]);
+
+  return (
+    <div className="flex h-64 flex-col items-center justify-center text-center">
+      {status === 'REDIRECTING' ? (
+        <>
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-500"></div>
+          <h3 className="mt-4 text-lg font-bold text-gray-900">
+            Redirecting to Payment...
+          </h3>
+          <p className="mt-2 text-sm text-gray-500">
+            Please wait while we transfer you to Shopify.
+          </p>
+        </>
+      ) : (
+        <>
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-black"></div>
+          <h3 className="mt-4 text-lg font-bold text-gray-900">
+            Preparing your Invoice
+          </h3>
+          <p className="mt-2 text-sm text-gray-500">
+            Syncing booking details and calculating totals...
+          </p>
+        </>
+      )}
+    </div>
+  );
+}