astro-tractstack 2.3.0 → 2.3.1

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,180 @@ 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,
+        gid: product?.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.`
-      );
-    }
-
+        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'] || [];
+export default function ShopifyProductGrid({ resources = {}, options }: Props) {
+  let products = resources['product'] || [];
   const services = resources['service'] || [];
 
-  if (products.length === 0) {
-    return null;
+  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="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 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

@@ -4,13 +4,30 @@ import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
   resources: Record<string, ResourceNode[]>;
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
 }
 
-export default function ShopifyServiceList({ resources = {} }: Props) {
+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 = '';
+  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
@@ -86,7 +103,7 @@ export default function ShopifyServiceList({ resources = {} }: Props) {
               <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">
+                  <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>
                 )}

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>

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>

package/templates/src/components/Header.astro

@@ -10,13 +10,13 @@ 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 { MenuNode, BrandConfig } from '@/types/tractstack';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   title: string;
   slug: string;
-  brandConfig: any;
+  brandConfig: BrandConfig;
   isContext?: boolean;
   isStoryKeep?: boolean;
   isEditable?: boolean;
@@ -79,7 +79,11 @@ if (hasShopify) {
             <CartIcon client:only="react" />
           </div>
         ) : (
-          <CheckoutModal client:only="react" resources={shopifyResources} />
+          <CheckoutModal
+            client:only="react"
+            resources={shopifyResources}
+            maxLength={brandConfig?.scheduling?.maxLengthMinutes || 180}
+          />
         )}
       </>
     ) : null
@@ -94,6 +98,7 @@ if (hasShopify) {
           [`default`, `logo`].includes(wordmarkMode) ? (
             <>
               <img
+                id="t8k-logo"
                 src={logo}
                 alt="Logo"
                 class="pointer-events-none h-8 w-auto"
@@ -106,6 +111,7 @@ if (hasShopify) {
         {
           [`default`, `wordmark`].includes(wordmarkMode) ? (
             <img
+              id="t8k-wordmark"
               src={wordmark}
               alt="Wordmark"
               class="pointer-events-none h-14 w-auto max-w-48 md:max-w-72"

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -276,9 +276,9 @@ const AddPaneNewPanel = ({
         {!hasAssemblyAI && (
           <div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-4 shadow-sm">
             <p className="text-sm text-blue-800">
-              Tract Stack uses AssemblyAI AskLemur service to generate designs,
-              describe content, and streamline the management of your site. We
-              strongly recommend enabling these features. See{' '}
+              Tract Stack uses AssemblyAI to generate designs, describe content,
+              and streamline the management of your site. We strongly recommend
+              enabling these features. See{' '}
               <a
                 href="https://freewebpress.org"
                 target="_blank"

package/templates/src/components/edit/pane/AiRestylePaneModal.tsx

@@ -11,7 +11,7 @@ import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { AiRefineDesignStep } from './steps/AiRefineDesignStep';
 import prompts from '@/constants/prompts.json';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { PaneNode, TemplatePane } from '@/types/compositorTypes';
 
 interface AiRestylePaneModalProps {
@@ -87,7 +87,7 @@ export const AiRestylePaneModal = ({
         .replace('{{COPY_INPUT}}', 'A generic content section')
         .replace('{{LAYOUT_TYPE}}', 'Text Only');
 
-      const resultStr = await callAskLemurAPI({
+      const resultStr = await callAaiAPI({
         prompt: formattedPrompt,
         context: shellPromptDetails.system || '',
         expectJson: true,

package/templates/src/components/edit/pane/steps/AiCreativeDesignStep.tsx

@@ -6,7 +6,7 @@ import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRou
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
 import type { TemplatePane } from '@/types/compositorTypes';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import BooleanToggle from '@/components/form/BooleanToggle';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
 
@@ -86,7 +86,7 @@ export const AiCreativeDesignStep = ({
       userPrompt = userPrompt.replace('{{DESIGN_NOTES}}', combinedNotes);
 
       // Use shared infrastructure utility
-      const rawHtml = await callAskLemurAPI({
+      const rawHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,

package/templates/src/components/edit/pane/steps/AiLibraryCopyStep.tsx

@@ -6,7 +6,7 @@ import {
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import type { DesignLibraryEntry } from '@/types/tractstack';
 import type { TemplatePane } from '@/types/compositorTypes';
@@ -159,7 +159,7 @@ export const AiLibraryCopyStep = ({
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
-            const copyResult = await callAskLemurAPI({
+            const copyResult = await callAaiAPI({
               prompt: formattedCopyPrompt,
               context: copyPromptDetails.system || '',
               expectJson: false,
@@ -201,7 +201,7 @@ export const AiLibraryCopyStep = ({
             .replace('{{LAYOUT_TYPE}}', layoutType)
             .replace('{{SHELL_JSON}}', shellResult);
 
-          const copyResult = await callAskLemurAPI({
+          const copyResult = await callAaiAPI({
             prompt: formattedCopyPrompt,
             context: copyPromptDetails.system || '',
             expectJson: false,

package/templates/src/components/edit/pane/steps/AiRefineDesignStep.tsx

@@ -5,7 +5,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst, cleanHtml } from '@/utils/compositor/htmlAst';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { TemplatePane } from '@/types/compositorTypes';
 
 interface AiRefineDesignStepProps {
@@ -54,7 +54,7 @@ export const AiRefineDesignStep = ({
       userPrompt = userPrompt.replace('{{HTML_INPUT}}', cleanHtml(initialHtml));
 
       // 1. Get RAW output from AI
-      const resultHtml = await callAskLemurAPI({
+      const resultHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,