astro-tractstack 2.2.10 → 2.3.0

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -0,0 +1,281 @@
+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[]>;
+}
+
+interface ShopifyOption {
+  name: string;
+  values: string[];
+}
+
+interface ShopifyVariant {
+  id: string;
+  title: string;
+  price: { 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 isUnconfigured = options.some((o) => o.name === 'Title');
+
+  if (isUnconfigured) {
+    return null;
+  }
+
+  const hasModeOption = options.some((o) => o.name === 'Mode');
+  const visibleOptions = options.filter((o) => o.name !== 'Mode');
+
+  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) => {
+    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 true;
+    });
+
+    return found;
+  };
+
+  const variantShipped = getVariant(hasModeOption ? 'Shipped' : null);
+  const variantPickup = getVariant(hasModeOption ? 'Pickup' : null);
+  const cartKey = `${resource.id}_${variantShipped?.id || 'null'}_${
+    variantPickup?.id || 'null'
+  }`;
+  const cartItem = cart[cartKey];
+  const quantity = cartItem?.quantity || 0;
+
+  const currentDisplayVariant =
+    getVariant('Shipped') || getVariant('Pickup') || variants[0];
+  const price = currentDisplayVariant?.price?.amount;
+  const currency = currentDisplayVariant?.price?.currencyCode || 'USD';
+  const { src, srcSet } = getShopifyImage(
+    resource,
+    '600',
+    currentDisplayVariant?.id
+  );
+
+  const handleAction = (action: 'add' | 'remove') => {
+    if (action === 'remove') {
+      const queueUpdates: CartAction[] = [];
+
+      queueUpdates.push({
+        resourceId: resource.id,
+        variantIdShipped: variantShipped?.id,
+        variantIdPickup: variantPickup?.id,
+        action: 'remove',
+      });
+
+      if (boundServiceResource) {
+        queueUpdates.push({
+          resourceId: boundServiceResource.id,
+          variantId: boundServiceResource.optionsPayload?.shopifyData
+            ? JSON.parse(boundServiceResource.optionsPayload.shopifyData)
+                .variants?.[0]?.id
+            : undefined,
+          action: 'remove',
+        });
+      }
+
+      addQueue.set([...addQueue.get(), ...queueUpdates]);
+      return;
+    }
+
+    const queueUpdates: CartAction[] = [];
+
+    const productAction: CartAction & { boundResourceId?: string } = {
+      resourceId: resource.id,
+      gid: product?.id,
+      variantIdShipped: variantShipped?.id,
+      variantIdPickup: variantPickup?.id,
+      action: 'add',
+      boundResourceId: boundServiceResource?.id,
+    };
+    queueUpdates.push(productAction);
+
+    if (boundServiceResource) {
+      let serviceVariantId = undefined;
+      try {
+        if (boundServiceResource.optionsPayload?.shopifyData) {
+          const serviceData = JSON.parse(
+            boundServiceResource.optionsPayload.shopifyData
+          );
+          serviceVariantId = serviceData.variants?.[0]?.id;
+        }
+      } catch (e) {}
+
+      queueUpdates.push({
+        resourceId: boundServiceResource.id,
+        variantId: serviceVariantId,
+        action: 'add',
+      });
+    } else if (serviceBoundSlug) {
+      console.warn(
+        `[Shopify] Service bound to slug '${serviceBoundSlug}' was not found in provided resources.`
+      );
+    }
+
+    addQueue.set([...addQueue.get(), ...queueUpdates]);
+  };
+
+  return (
+    <div className="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+      <div className="aspect-square w-full overflow-hidden bg-gray-100">
+        <img
+          src={src}
+          srcSet={srcSet}
+          alt={resource.title}
+          className="h-full w-full object-cover object-center"
+          loading="lazy"
+        />
+      </div>
+
+      <div className="flex flex-1 flex-col p-6">
+        <h3 className="text-lg font-bold text-gray-900">{resource.title}</h3>
+        <p className="mt-2 flex-grow text-sm text-gray-500">
+          {resource.oneliner}
+        </p>
+
+        {boundServiceResource && (
+          <div className="mt-2 w-fit rounded bg-blue-50 p-3 text-xs font-bold text-blue-700">
+            Includes {boundServiceResource.title}
+          </div>
+        )}
+
+        {visibleOptions.length > 0 && (
+          <div className="mt-4 w-fit space-y-3 p-1">
+            {visibleOptions.map((opt) => (
+              <div key={opt.name}>
+                <label className="mb-1 block text-xs font-bold text-gray-700">
+                  {opt.name}
+                </label>
+                <select
+                  value={selections[opt.name]}
+                  onChange={(e) => {
+                    const newVal = e.target.value;
+                    setSelections((prev) => ({
+                      ...prev,
+                      [opt.name]: newVal,
+                    }));
+                  }}
+                  className="block w-full rounded-md border-gray-300 p-2 text-sm shadow-sm focus:border-black focus:ring-black"
+                >
+                  {opt.values.map((val) => (
+                    <option key={val} value={val}>
+                      {val}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-base font-bold text-gray-900">
+            {price ? `${price} ${currency}` : ''}
+          </span>
+          <div className="flex items-center space-x-3">
+            {quantity > 0 ? (
+              <>
+                <button
+                  onClick={() => handleAction('remove')}
+                  className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100"
+                  aria-label="Remove one"
+                >
+                  -
+                </button>
+                <span className="text-sm font-bold text-gray-900">
+                  {quantity}
+                </span>
+                <button
+                  onClick={() => handleAction('add')}
+                  className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100"
+                  aria-label="Add one"
+                >
+                  +
+                </button>
+              </>
+            ) : (
+              <button
+                onClick={() => handleAction('add')}
+                className="rounded-md bg-black px-4 py-2 text-sm font-bold text-white hover:bg-gray-800"
+              >
+                Add to Cart
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ShopifyProductGrid({ resources = {} }: Props) {
+  const products = resources['product'] || [];
+  const services = resources['service'] || [];
+
+  if (products.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      {products.map((resource) => (
+        <ProductCard
+          key={resource.id}
+          resource={resource}
+          allServices={services}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -0,0 +1,118 @@
+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[]>;
+}
+
+export default function ShopifyServiceList({ resources = {} }: Props) {
+  const cart = useStore(cartStore);
+
+  const products = resources['product'] || [];
+  const services = resources['service'] || [];
+
+  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-full 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,10 @@ export const components = {
     <CustomHero />
   ) : target === 'epinet' ? (
     <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
+  ) : target === 'shopify-product-grid' ? (
+    <ShopifyProductGrid resources={resourcesPayload} client:only="react" />
+  ) : target === 'shopify-service-list' ? (
+    <ShopifyServiceList 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/Header.astro

@@ -4,8 +4,14 @@ import SearchWrapper from '@/components/search/SearchWrapper';
 import { getFullContentMap } from '@/stores/analytics';
 import { isAuthenticated, isAdmin, getUserRole } from '@/utils/auth';
 import ImpressionWrapper from '@/components/widgets/ImpressionWrapper';
-import type { MenuNode } from '@/types/tractstack';
 import type { ImpressionNode } from '@/types/compositorTypes';
+import { getHeaderResources } from '@/lib/resources';
+import ShopifyCartManager from '@/custom/shopify/ShopifyCartManager';
+import CartIcon from '@/custom/shopify/CartIcon';
+import CartModal from '@/custom/shopify/CartModal';
+import CheckoutModal from '@/custom/shopify/CheckoutModal';
+import type { MenuNode } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   title: string;
@@ -32,13 +38,11 @@ const {
   storyfragmentId = undefined,
   impressions = [],
 } = Astro.props;
-
 const isHome = slug === brandConfig?.HOME_SLUG;
 
 const tenantId =
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
 const fullContentMap = await getFullContentMap(tenantId);
-
 const getAssetPath = (configPath: string, fallback: string) => {
   // Always prioritize brandConfig values when they exist
   if (configPath && configPath !== '') {
@@ -52,17 +56,35 @@ const wordmarkMode =
   brandConfig?.WORDMARK_MODE && brandConfig.WORDMARK_MODE !== ''
     ? brandConfig.WORDMARK_MODE
     : 'default';
-
 // Auth status
 const authStatus = {
   isAuthenticated: isAuthenticated(Astro),
   isAdmin: isAdmin(Astro),
   userRole: getUserRole(Astro),
 };
+
+const hasShopify = brandConfig?.HAS_SHOPIFY;
+let shopifyResources: ResourceNode[] = [];
+if (hasShopify) {
+  shopifyResources = await getHeaderResources(tenantId, ['product', 'service']);
+}
 ---
 
 <header class="relative shadow-inner">
-  <!-- TOP ROW: Logo/Wordmark + Menu + Auth Controls -->
+  {
+    hasShopify ? (
+      <>
+        {slug !== `cart` ? (
+          <div class="flex w-full justify-end px-4 py-2 md:px-8">
+            <CartIcon client:only="react" />
+          </div>
+        ) : (
+          <CheckoutModal client:only="react" resources={shopifyResources} />
+        )}
+      </>
+    ) : null
+  }
+
   <div
     class="flex flex-row flex-nowrap items-center justify-between px-4 py-3 md:px-8"
   >
@@ -76,6 +98,7 @@ const authStatus = {
                 alt="Logo"
                 class="pointer-events-none h-8 w-auto"
               />
+
               <span class="w-2" />
             </>
           ) : null
@@ -105,7 +128,6 @@ const authStatus = {
     }
   </div>
 
-  <!-- BOTTOM ROW: Title + Action Icons -->
   <div
     class="flex flex-row flex-nowrap justify-between bg-mywhite px-4 pb-3 pt-4 shadow-inner md:px-8"
   >
@@ -198,7 +220,6 @@ const authStatus = {
             localStorage.getItem('tractstack_has_profile') === '1';
 
           if (!sessionId) return;
-
           const rememberMeContainer = document.getElementById(
             'remember-me-container'
           );
@@ -211,7 +232,6 @@ const authStatus = {
               consent || hasProfile
                 ? '<svg class="h-6 w-6 text-myblue/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>'
                 : '<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>';
-
             rememberMeContainer.innerHTML = `
         <a href="/storykeep/profile" 
            class="hover:text-myblue hover:rotate-6" 
@@ -339,6 +359,15 @@ const authStatus = {
   )
 }
 
+{
+  !isStoryKeep && hasShopify && (
+    <>
+      <ShopifyCartManager resources={shopifyResources} client:only="react" />
+      <CartModal client:only="react" />
+    </>
+  )
+}
+
 <script>
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', setupAdminModal);
@@ -383,7 +412,6 @@ const authStatus = {
             tractStackKeys.forEach((key) => localStorage.removeItem(key));
 
             console.log('TractStack: Complete logout finished');
-
             // Redirect to home page
             window.location.href = '/';
           } else {
@@ -432,7 +460,6 @@ const authStatus = {
         return;
       }
     });
-
     document.addEventListener('keydown', function (e) {
       if (e.key === 'Escape') {
         const modal = document.getElementById('admin-modal');
@@ -441,7 +468,6 @@ const authStatus = {
         }
       }
     });
-
     function closeModal() {
       const modal = document.getElementById('admin-modal');
       const heartBtn = document.getElementById('admin-heart-btn');