astro-tractstack 2.2.10 → 2.3.1

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

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -0,0 +1,247 @@
+import { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import { getShopifyImage } from '@/utils/helpers';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface Props {
+  resources: Record<string, ResourceNode[]>;
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+}
+
+interface ShopifyOption {
+  name: string;
+  values: string[];
+}
+
+interface ShopifyVariant {
+  id: string;
+  title: string;
+  price: { amount: string; currencyCode: string };
+  compareAtPrice?: { amount: string; currencyCode: string };
+  selectedOptions: { name: string; value: string }[];
+}
+
+interface ProductCardProps {
+  resource: ResourceNode;
+  allServices: ResourceNode[];
+}
+
+function ProductCard({ resource, allServices }: ProductCardProps) {
+  const cart = useStore(cartStore);
+
+  const serviceBoundSlug = resource.optionsPayload?.serviceBound as
+    | string
+    | undefined;
+  const boundServiceResource = serviceBoundSlug
+    ? allServices.find((r) => r.slug === serviceBoundSlug)
+    : undefined;
+
+  let product: any = {};
+  try {
+    if (resource.optionsPayload?.shopifyData) {
+      product = JSON.parse(resource.optionsPayload.shopifyData);
+    }
+  } catch (e) {
+    console.error('Failed to parse Shopify data', resource.id);
+  }
+
+  const options: ShopifyOption[] = product?.options || [];
+  const variants: ShopifyVariant[] = product?.variants || [];
+  const vendor: string = product?.vendor || '';
+
+  const hasModeOption = options.some((o) => o.name === 'Mode');
+  const visibleOptions = options.filter(
+    (o) => o.name !== 'Mode' && o.name !== 'Title'
+  );
+
+  const [selections, setSelections] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    visibleOptions.forEach((opt) => {
+      initial[opt.name] = opt.values[0];
+    });
+    return initial;
+  });
+
+  const getVariant = (targetMode: 'Shipped' | 'Pickup' | null) => {
+    if (targetMode && !hasModeOption) return undefined;
+    const found = variants.find((v) => {
+      const optionsMatch = visibleOptions.every((opt) => {
+        const variantOpt = v.selectedOptions.find((o) => o.name === opt.name);
+        return variantOpt?.value === selections[opt.name];
+      });
+      if (!optionsMatch) return false;
+      if (hasModeOption && targetMode) {
+        const modeOpt = v.selectedOptions.find((o) => o.name === 'Mode');
+        return modeOpt?.value === targetMode;
+      }
+      return !(hasModeOption && !targetMode);
+    });
+    return found;
+  };
+
+  const variantShipped = hasModeOption
+    ? getVariant('Shipped')
+    : getVariant(null);
+  const variantPickup = hasModeOption ? getVariant('Pickup') : undefined;
+
+  const currentDisplayVariant = variantShipped || variantPickup || variants[0];
+  const price = currentDisplayVariant?.price?.amount;
+  const compareAtPrice = currentDisplayVariant?.compareAtPrice?.amount;
+  const currency = currentDisplayVariant?.price?.currencyCode || 'USD';
+
+  // High contrast rose badge calculation
+  let discountPercent = 0;
+  if (price && compareAtPrice) {
+    const p = parseFloat(price);
+    const cap = parseFloat(compareAtPrice);
+    if (cap > p) {
+      discountPercent = Math.round(((cap - p) / cap) * 100);
+    }
+  }
+
+  const { src, srcSet } = getShopifyImage(
+    resource,
+    '600',
+    currentDisplayVariant?.id
+  );
+
+  const handleAction = () => {
+    const queueUpdates: CartAction[] = [
+      {
+        resourceId: resource.id,
+        gid: product?.id,
+        variantIdShipped: variantShipped?.id,
+        variantIdPickup: variantPickup?.id,
+        action: 'add',
+        boundResourceId: boundServiceResource?.id,
+      },
+    ];
+    addQueue.set([...addQueue.get(), ...queueUpdates]);
+  };
+
+  return (
+    <div className="group flex flex-col text-left font-main">
+      {/* Clickable Area: Image and Title */}
+      <button
+        onClick={handleAction}
+        className="text-left focus:outline-none"
+        aria-label={`Add ${resource.title} to cart`}
+      >
+        {/* Rounded-2xl Frame with Top-Left Badge */}
+        <div className="relative aspect-square w-full overflow-hidden rounded-2xl bg-brand-8 transition-opacity group-hover:opacity-90">
+          <img
+            src={src}
+            srcSet={srcSet}
+            alt={resource.title}
+            className="h-full w-full object-cover object-center"
+            loading="lazy"
+          />
+          {discountPercent > 0 && (
+            <div className="absolute left-4 top-4 flex h-12 w-12 items-center justify-center rounded-md bg-rose-600 text-xs font-bold text-white shadow-sm">
+              -{discountPercent}%
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex flex-col">
+          {/* Vendor Label */}
+          {vendor && (
+            <span className="text-xs font-bold uppercase tracking-widest text-brand-6">
+              {vendor}
+            </span>
+          )}
+
+          <h3 className="mt-1 text-2xl font-bold text-brand-1">
+            {resource.title}
+          </h3>
+
+          {/* Combined Price Baseline */}
+          <div className="mt-1 flex items-baseline space-x-2">
+            <span className="text-lg font-bold text-brand-1">
+              {price} {currency}
+            </span>
+            {discountPercent > 0 && (
+              <span className="text-sm text-brand-6 line-through">
+                {compareAtPrice} {currency}
+              </span>
+            )}
+          </div>
+
+          <p className="mt-3 text-sm text-brand-7">{resource.oneliner}</p>
+        </div>
+      </button>
+
+      {/* Interactive Variant Selectors */}
+      {visibleOptions.length > 0 && (
+        <div className="mt-4 space-y-4">
+          {visibleOptions.map((opt) => (
+            <div key={opt.name} onClick={(e) => e.stopPropagation()}>
+              <label className="mb-1 block text-xs font-bold uppercase text-brand-7">
+                {opt.name}
+              </label>
+              <select
+                value={selections[opt.name]}
+                onChange={(e) =>
+                  setSelections((prev) => ({
+                    ...prev,
+                    [opt.name]: e.target.value,
+                  }))
+                }
+                className="block w-full border-b border-brand-8 bg-transparent py-2 text-sm text-brand-1 focus:border-brand-1 focus:outline-none"
+              >
+                {opt.values.map((val) => (
+                  <option key={val} value={val}>
+                    {val}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {boundServiceResource && (
+        <div className="bg-brand-4/10 mt-4 w-fit rounded px-2 py-1 text-xs font-bold text-brand-4">
+          INCLUDES {boundServiceResource.title.toUpperCase()}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ShopifyProductGrid({ resources = {}, options }: Props) {
+  let products = resources['product'] || [];
+  const services = resources['service'] || [];
+
+  let group = '';
+  try {
+    const parsedOptions = JSON.parse(options?.params?.options || '{}');
+    group = parsedOptions.group || '';
+  } catch (e) {}
+
+  if (group) {
+    products = products.filter((p) => p.optionsPayload?.group === group);
+  }
+
+  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}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -0,0 +1,135 @@
+import { useStore } from '@nanostores/react';
+import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface Props {
+  resources: Record<string, ResourceNode[]>;
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+}
+
+export default function ShopifyServiceList({ resources = {}, options }: Props) {
+  const cart = useStore(cartStore);
+
+  const products = resources['product'] || [];
+  let services = resources['service'] || [];
+
+  let group = '';
+  try {
+    const parsedOptions = JSON.parse(options?.params?.options || '{}');
+    group = parsedOptions.group || '';
+  } catch (e) {
+    // Ignore JSON parse errors
+  }
+
+  if (group) {
+    services = services.filter((s) => s.optionsPayload?.group === group);
+  }
+
+  const boundServiceSlugs = new Set(
+    products
+      .map((p) => p.optionsPayload?.serviceBound as string | undefined)
+      .filter((s): s is string => !!s)
+  );
+
+  const displayServices = services.filter(
+    (s) => !boundServiceSlugs.has(s.slug)
+  );
+
+  const getServiceVariantId = (resource: ResourceNode): string | undefined => {
+    try {
+      if (resource.optionsPayload?.shopifyData) {
+        const data = JSON.parse(resource.optionsPayload.shopifyData);
+        // Handle both raw product data and simplified product objects
+        const product = data.products?.[0] || data;
+        return product?.variants?.[0]?.id;
+      }
+    } catch (e) {
+      return undefined;
+    }
+    return undefined;
+  };
+
+  const handleToggle = (resource: ResourceNode, currentQuantity: number) => {
+    const actionType = currentQuantity > 0 ? 'remove' : 'add';
+
+    const variantId = getServiceVariantId(resource);
+    let gid: string | undefined;
+
+    try {
+      if (resource.optionsPayload?.shopifyData) {
+        const data = JSON.parse(resource.optionsPayload.shopifyData);
+        const product = data.products?.[0] || data;
+        gid = product?.id;
+      }
+    } catch (e) {}
+
+    const newAction: CartAction = {
+      resourceId: resource.id,
+      gid,
+      variantId,
+      action: actionType,
+    };
+    addQueue.set([...addQueue.get(), newAction]);
+  };
+
+  if (!displayServices || displayServices.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {displayServices.map((resource) => {
+        const variantId = getServiceVariantId(resource);
+        const key = variantId || `${resource.id}_null_null`;
+
+        const cartItem = cart[key];
+        const isSelected = (cartItem?.quantity || 0) > 0;
+        const duration = resource.optionsPayload?.bookingLengthMinutes;
+
+        return (
+          <div
+            key={resource.id}
+            className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
+              isSelected
+                ? 'border-black bg-gray-50'
+                : 'border-gray-200 bg-white hover:border-gray-300'
+            }`}
+          >
+            <div className="flex-grow">
+              <div className="flex items-center gap-2">
+                <h3 className="font-bold text-gray-900">{resource.title}</h3>
+                {duration && (
+                  <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                    {duration} mins
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-sm text-gray-500">{resource.oneliner}</p>
+            </div>
+
+            <div className="ml-4 flex-shrink-0">
+              <button
+                onClick={() => handleToggle(resource, cartItem?.quantity || 0)}
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                  isSelected ? 'bg-black' : 'bg-gray-200'
+                }`}
+                role="switch"
+                aria-checked={isSelected}
+              >
+                <span
+                  className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    isSelected ? 'translate-x-5' : 'translate-x-0'
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/custom/shopify/cart.astro

@@ -0,0 +1,23 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import Cart from '@/custom/shopify/Cart';
+import { getHeaderResources } from '@/lib/resources';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const brandConfig = await getBrandConfig(tenantId);
+if (!brandConfig.HAS_SHOPIFY) {
+  return Astro.redirect('/storykeep');
+}
+
+const resourceCategories = ['product', 'service'];
+const resources = await getHeaderResources(tenantId, resourceCategories);
+---
+
+<Layout title="Your Cart" slug="cart">
+  <main class="mx-auto max-w-7xl px-4 py-16 md:px-6 xl:px-8">
+    <Cart resources={resources} embedded={true} client:only="react" />
+  </main>
+</Layout>

package/templates/custom/with-examples/CodeHook.astro

@@ -8,6 +8,8 @@ import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import ProductCardWrapper from './ProductCardWrapper.astro';
 import ProductGrid from './ProductGrid.astro';
 import SandboxLauncher from './SandboxLauncher';
+import ShopifyProductGrid from '@/custom/shopify/ShopifyProductGrid';
+import ShopifyServiceList from '@/custom/shopify/ShopifyServiceList';
 import type { FullContentMapItem } from '@/types/tractstack';
 import type { ResourceNode } from '@/types/compositorTypes';
 
@@ -23,7 +25,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap, resourcesPayload } = Astro.props;
+const { target, options, fullContentMap, resourcesPayload = {} } = Astro.props;
 
 export const components = {
   'custom-hero': true,
@@ -35,6 +37,8 @@ export const components = {
   'get-crafting': true,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
+  'shopify-product-grid': true,
+  'shopify-service-list': true,
 };
 ---
 
@@ -57,6 +61,18 @@ export const components = {
     <CustomHero />
   ) : target === 'epinet' ? (
     <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
+  ) : target === 'shopify-product-grid' ? (
+    <ShopifyProductGrid
+      options={options}
+      resources={resourcesPayload}
+      client:only="react"
+    />
+  ) : target === 'shopify-service-list' ? (
+    <ShopifyServiceList
+      options={options}
+      resources={resourcesPayload}
+      client:only="react"
+    />
   ) : (
     <div class="rounded-lg bg-gray-50 p-8 text-center">
       <p class="text-gray-600">CodeHook target "{target}" not found</p>

package/templates/custom/with-examples/ProductGrid.astro

@@ -53,7 +53,7 @@ if (parsedOptions?.productType) {
       </div>
     ) : (
       <div class="rounded-lg border bg-yellow-50 p-6 text-center shadow-sm">
-        <p class="font-medium text-yellow-800">No products to display.</p>
+        <p class="font-bold text-yellow-800">No products to display.</p>
         <p class="mt-1 text-sm text-yellow-700">
           Check the grid configuration or ensure products match the specified
           filters.

package/templates/src/client/app.js

@@ -144,8 +144,10 @@ if (!window.TractStackApp) {
       }
 
       const { backendUrl, sessionId, storyfragmentId, tenantId } = this.config;
-      if (!sessionId || !tenantId) {
-        logError('Cannot start SSE connection: missing sessionId or tenantId.');
+      if (!sessionId || !tenantId || !storyfragmentId) {
+        logError(
+          'Cannot start SSE connection: missing sessionId or tenantId or storyfragmentId.'
+        );
         return;
       }
 

package/templates/src/components/Footer.astro

@@ -161,8 +161,8 @@ const createdDate = created ? new Date(created) : new Date();
     <div
       class="my-2 flex flex-row items-center justify-center text-myblue md:flex-col"
     >
-      <div class="px-4 text-center text-lg md:px-12">
-        pressed with
+      <div class="px-4 text-center text-sm italic md:px-12">
+        This website has been pressed with
         <a
           href="https://tractstack.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"
           class="font-bold underline hover:text-black"
@@ -171,12 +171,12 @@ const createdDate = created ? new Date(created) : new Date();
         >
           Tract Stack</a
         >
-        &ndash; the &#8220;free web&#8221; press by{` `}
+        by{` `}
         <a
           href="https://atriskmedia.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"
           class="font-bold underline hover:text-black"
           target="_blank">At Risk Media</a
-        >
+        >.
       </div>
       <br /><br /><br />
     </div>