astro-tractstack 2.3.0 → 2.3.2

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -6,6 +6,11 @@ import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
   resources: Record<string, ResourceNode[]>;
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
 }
 
 interface ShopifyOption {
@@ -17,6 +22,7 @@ interface ShopifyVariant {
   id: string;
   title: string;
   price: { amount: string; currencyCode: string };
+  compareAtPrice?: { amount: string; currencyCode: string };
   selectedOptions: { name: string; value: string }[];
 }
 
@@ -31,7 +37,6 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
   const serviceBoundSlug = resource.optionsPayload?.serviceBound as
     | string
     | undefined;
-
   const boundServiceResource = serviceBoundSlug
     ? allServices.find((r) => r.slug === serviceBoundSlug)
     : undefined;
@@ -47,15 +52,12 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
 
   const options: ShopifyOption[] = product?.options || [];
   const variants: ShopifyVariant[] = product?.variants || [];
-
-  const isUnconfigured = options.some((o) => o.name === 'Title');
-
-  if (isUnconfigured) {
-    return null;
-  }
+  const vendor: string = product?.vendor || '';
 
   const hasModeOption = options.some((o) => o.name === 'Mode');
-  const visibleOptions = options.filter((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> = {};
@@ -66,216 +68,208 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
   });
 
   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 true;
+      return !(hasModeOption && !targetMode);
     });
-
     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 variantShipped = hasModeOption
+    ? getVariant('Shipped')
+    : getVariant(null);
+  const variantPickup = hasModeOption ? getVariant('Pickup') : undefined;
 
-  const currentDisplayVariant =
-    getVariant('Shipped') || getVariant('Pickup') || variants[0];
+  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 = (action: 'add' | 'remove') => {
-    if (action === 'remove') {
-      const queueUpdates: CartAction[] = [];
-
-      queueUpdates.push({
+  const handleAction = () => {
+    const queueUpdates: CartAction[] = [
+      {
         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,
+        gid: product?.id,
+        variantId: !hasModeOption ? variantShipped?.id : undefined,
+        variantIdShipped: hasModeOption ? variantShipped?.id : undefined,
+        variantIdPickup: hasModeOption ? variantPickup?.id : undefined,
         action: 'add',
-      });
-    } else if (serviceBoundSlug) {
-      console.warn(
-        `[Shopify] Service bound to slug '${serviceBoundSlug}' was not found in provided resources.`
-      );
-    }
-
+        boundResourceId: boundServiceResource?.id,
+      },
+    ];
     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>
-        )}
+    <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>
 
-        {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 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>
-        )}
 
-        <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"
+          <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"
               >
-                Add to Cart
-              </button>
-            )}
-          </div>
+                {opt.values.map((val) => (
+                  <option key={val} value={val}>
+                    {val}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ))}
         </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 = {} }: Props) {
-  const products = resources['product'] || [];
+const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+export default function ShopifyProductGrid({ resources = {}, options }: Props) {
+  let products = resources['product'] || [];
   const services = resources['service'] || [];
 
-  if (products.length === 0) {
-    return null;
+  let group = '';
+  let title = '';
+  let bgColor = '#f9f9f9';
+  try {
+    const parsedOptions = JSON.parse(options?.params?.options || '{}');
+    group = typeof parsedOptions.group === 'string' ? parsedOptions.group : '';
+    if (typeof parsedOptions.title === 'string') {
+      title = parsedOptions.title.trim();
+    }
+    const rawBg = parsedOptions.bgColor;
+    if (typeof rawBg === 'string' && HEX_BG_RE.test(rawBg)) {
+      bgColor = rawBg;
+    }
+  } catch (e) {}
+
+  if (group) {
+    products = products.filter((p) => p.optionsPayload?.group === group);
   }
 
+  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>
+    <section className="w-full">
+      <div
+        className="flex w-full flex-col gap-12 p-12 md:gap-14 md:p-12 xl:gap-16 xl:p-16"
+        style={{ backgroundColor: bgColor }}
+      >
+        {title ? (
+          <header className="max-w-4xl">
+            <h3
+              className="mb-6 text-balance font-action text-2xl font-bold md:text-3xl xl:text-4xl"
+              style={{ color: '#2d2923' }}
+            >
+              {title}
+            </h3>
+          </header>
+        ) : null}
+        <section className="w-full">
+          <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>
+        </section>
+      </div>
+    </section>
   );
 }

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,16 +1,49 @@
 import { useStore } from '@nanostores/react';
-import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
+import {
+  cartStore,
+  addQueue,
+  getCartItemKey,
+  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 = {} }: Props) {
+const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+export default function ShopifyServiceList({ resources = {}, options }: Props) {
   const cart = useStore(cartStore);
 
   const products = resources['product'] || [];
-  const services = resources['service'] || [];
+  let services = resources['service'] || [];
+
+  let group = '';
+  let title = '';
+  let bgColor = '#f9f9f9';
+  try {
+    const parsedOptions = JSON.parse(options?.params?.options || '{}');
+    group = typeof parsedOptions.group === 'string' ? parsedOptions.group : '';
+    if (typeof parsedOptions.title === 'string') {
+      title = parsedOptions.title.trim();
+    }
+    const rawBg = parsedOptions.bgColor;
+    if (typeof rawBg === 'string' && HEX_BG_RE.test(rawBg)) {
+      bgColor = rawBg;
+    }
+  } catch (e) {
+    // Ignore JSON parse errors
+  }
+
+  if (group) {
+    services = services.filter((s) => s.optionsPayload?.group === group);
+  }
 
   const boundServiceSlugs = new Set(
     products
@@ -64,55 +97,83 @@ export default function ShopifyServiceList({ resources = {} }: Props) {
   }
 
   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'
+    <section className="w-full">
+      <div
+        className="flex w-full flex-col p-12 md:p-12 xl:p-16"
+        style={{ backgroundColor: bgColor }}
+      >
+        {title ? (
+          <header className="max-w-4xl">
+            <h3
+              className="mb-6 text-balance font-action text-2xl font-bold md:text-3xl xl:text-4xl"
+              style={{ color: '#2d2923' }}
+            >
+              {title}
+            </h3>
+          </header>
+        ) : null}
+        <section className="w-full">
+          <div className="space-y-4">
+            {displayServices.map((resource) => {
+              const variantId = getServiceVariantId(resource);
+              const key = getCartItemKey({
+                resourceId: resource.id,
+                variantId,
+              });
+
+              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'
                   }`}
-                />
-              </button>
-            </div>
+                >
+                  <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>
-        );
-      })}
-    </div>
+        </section>
+      </div>
+    </section>
   );
 }

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

@@ -62,9 +62,17 @@ export const components = {
   ) : target === 'epinet' ? (
     <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
   ) : target === 'shopify-product-grid' ? (
-    <ShopifyProductGrid resources={resourcesPayload} client:only="react" />
+    <ShopifyProductGrid
+      options={options}
+      resources={resourcesPayload}
+      client:only="react"
+    />
   ) : target === 'shopify-service-list' ? (
-    <ShopifyServiceList resources={resourcesPayload} client:only="react" />
+    <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>