astro-tractstack 2.2.10 → 2.3.1

package/templates/custom/shopify/Cart.tsx

@@ -0,0 +1,372 @@
+import { useState, useEffect } from 'react';
+import { ulid } from 'ulid';
+import { useStore } from '@nanostores/react';
+import {
+  addQueue,
+  cartStore,
+  cartState,
+  CART_STATES,
+  isShopifyHandoff,
+  transactionTraceId,
+  type CartItemState,
+} from '@/stores/shopify';
+import { getShopifyImage } from '@/utils/helpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface CartProps {
+  resources: ResourceNode[];
+}
+
+const getCleanVariantTitle = (variant: any) => {
+  if (variant?.selectedOptions) {
+    const filtered = variant.selectedOptions
+      .filter(
+        (o: any) =>
+          o.name !== 'Mode' && o.name !== 'Title' && o.value !== 'Default Title'
+      )
+      .map((o: any) => o.value)
+      .join(' / ');
+
+    return filtered === 'Default Title' ? '' : filtered;
+  }
+
+  const title = variant?.title || '';
+  return title === 'Default Title' ? '' : title;
+};
+
+export default function Cart({ resources = [] }: CartProps) {
+  const cart = useStore(cartStore);
+  const isHandoff = useStore(isShopifyHandoff);
+  const [pickupEnabled, setPickupEnabled] = useState(false);
+
+  const cartValues = Object.values(cart);
+
+  const boundServiceIds = new Set(
+    cartValues
+      .map((item) => item.boundResourceId)
+      .filter((id) => !!id) as string[]
+  );
+
+  const displayableItems = cartValues.filter(
+    (item) => !boundServiceIds.has(item.resourceId)
+  );
+
+  const groupedItems = displayableItems.reduce(
+    (acc, item) => {
+      if (!acc[item.resourceId]) {
+        acc[item.resourceId] = [];
+      }
+      acc[item.resourceId].push(item);
+      return acc;
+    },
+    {} as Record<string, CartItemState[]>
+  );
+
+  const hasService = cartValues.some((item) => {
+    const resource = resources.find((r) => r.id === item.resourceId);
+    return !!resource?.optionsPayload?.bookingLengthMinutes;
+  });
+
+  const hasPhysicalProductWithPickup = cartValues.some(
+    (item) =>
+      item.variantIdPickup && item.variantIdPickup !== item.variantIdShipped
+  );
+
+  const canPickup = hasService && hasPhysicalProductWithPickup;
+
+  useEffect(() => {
+    if (canPickup) {
+      setPickupEnabled(true);
+    } else {
+      setPickupEnabled(false);
+    }
+  }, [canPickup]);
+
+  const isPickupMode = canPickup && pickupEnabled;
+
+  const dispatchAction = (item: CartItemState, action: 'add' | 'remove') => {
+    addQueue.set([
+      ...addQueue.get(),
+      {
+        resourceId: item.resourceId,
+        action,
+        variantId: item.variantId,
+        variantIdShipped: item.variantIdShipped,
+        variantIdPickup: item.variantIdPickup,
+        boundResourceId: item.boundResourceId,
+        suppressModal: action === 'add' ? true : undefined,
+      },
+    ]);
+  };
+
+  if (isHandoff) {
+    return (
+      <div
+        className="fixed inset-0 flex flex-col items-center justify-center bg-black bg-opacity-75 backdrop-blur-md"
+        style={{ zIndex: 9005 }}
+      >
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-white"></div>
+        <h3 className="mt-4 text-lg font-bold text-white">
+          Finalizing Handoff...
+        </h3>
+        <p className="mt-2 text-sm text-gray-300">
+          Redirecting to Shopify secured payment
+        </p>
+      </div>
+    );
+  }
+
+  if (cartValues.length === 0) {
+    return (
+      <div className="relative">
+        <div className="rounded-lg border bg-gray-50 p-8 text-center">
+          <h2 className="text-xl font-bold">Your cart is empty</h2>
+          <p className="mt-2 text-gray-600">Add some items to get started.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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>
+
+      <ul className="divide-y divide-gray-200">
+        {Object.keys(groupedItems).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 serviceDuration = resource.optionsPayload?.bookingLengthMinutes;
+
+          const firstItem = items[0];
+          const boundServiceId = firstItem.boundResourceId;
+          const boundServiceResource = boundServiceId
+            ? resources.find((r) => r.id === boundServiceId)
+            : null;
+
+          const activeVariantIdFirst = isPickupMode
+            ? firstItem.variantIdPickup
+            : firstItem.variantIdShipped;
+          const displayIdFirst =
+            activeVariantIdFirst ||
+            firstItem.variantIdPickup ||
+            firstItem.variantId;
+
+          const { src, srcSet } = getShopifyImage(
+            resource,
+            '600',
+            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 variants = productData?.variants || [];
+
+          return (
+            <li key={resourceId} className="p-6">
+              <div className="flex items-start">
+                {!isService && (
+                  <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+                    <img
+                      src={src}
+                      srcSet={srcSet}
+                      alt={resource.title}
+                      className="aspect-square h-full w-full object-cover object-center"
+                      loading="lazy"
+                    />
+                  </div>
+                )}
+                <div className="ml-4 flex-1">
+                  <div className="flex justify-between">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-base font-bold text-gray-900">
+                          {resource.title}
+                        </h3>
+                        {isService && (
+                          <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                            {serviceDuration} mins
+                          </span>
+                        )}
+                      </div>
+
+                      {boundServiceResource && (
+                        <div className="mt-2 flex items-center gap-2 rounded-md bg-blue-50 px-3 py-2">
+                          <span className="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
+                          <div>
+                            <p className="text-sm font-bold text-blue-900">
+                              Includes Booking: {boundServiceResource.title}
+                            </p>
+                            <p className="text-xs text-blue-700">
+                              Duration:{' '}
+                              {boundServiceResource.optionsPayload
+                                ?.bookingLengthMinutes || 0}{' '}
+                              mins
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                      <p className="mt-1 text-sm text-gray-500">
+                        {resource.oneliner}
+                      </p>
+                    </div>
+                  </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 =
+                        activeVariantId ||
+                        item.variantIdPickup ||
+                        item.variantId;
+
+                      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>
+                            </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>
+                                <button
+                                  onClick={() => dispatchAction(item, 'add')}
+                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                >
+                                  +
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="rounded-b-lg border-t border-gray-200 bg-gray-50 px-6 py-6">
+        <div className="flex justify-end">
+          <button
+            className="rounded-lg bg-black px-6 py-3 font-bold text-white transition-colors hover:bg-gray-800"
+            onClick={() => {
+              const currentCart = cartStore.get();
+              const sanitizedCart = { ...currentCart };
+
+              Object.keys(sanitizedCart).forEach((key) => {
+                const item = sanitizedCart[key];
+
+                if (isPickupMode && item.variantIdPickup) {
+                  item.variantId = item.variantIdPickup;
+                } else if (!isPickupMode && item.variantIdShipped) {
+                  item.variantId = item.variantIdShipped;
+                }
+              });
+
+              cartStore.set(sanitizedCart);
+              transactionTraceId.set(ulid());
+
+              cartState.set(CART_STATES.CHECKOUT);
+            }}
+          >
+            Proceed to Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}