astro-tractstack 2.3.1 → 2.3.2

package/dist/index.js

@@ -1242,6 +1242,36 @@ async function y(t, e, c) {
       ),
       dest: "src/components/storykeep/shopify/ShopifyDashboard_Services.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/EmailBuilder.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/EmailBuilder.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/Blocks.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/Blocks.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/PropertyPanel.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/PropertyPanel.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/storykeep/email-builder/PreviewModal.tsx"
+      ),
+      dest: "src/components/storykeep/email-builder/PreviewModal.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/shopify/ShopifyDashboard_Search.tsx"
@@ -2230,6 +2260,10 @@ async function y(t, e, c) {
       src: t("../templates/src/utils/api/setupHelpers.ts"),
       dest: "src/utils/api/setupHelpers.ts"
     },
+    {
+      src: t("../templates/src/utils/api/emailHelpers.ts"),
+      dest: "src/utils/api/emailHelpers.ts"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/widgets/HydrateWizard.tsx"
@@ -2372,7 +2406,7 @@ async function y(t, e, c) {
         if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
-          const m = w(s.dest);
+          const m = f(s.dest);
           u(s.dest, m), e.info(`Created placeholder ${s.dest}`);
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
@@ -2381,12 +2415,11 @@ async function y(t, e, c) {
       e.error(`Failed to create ${s.dest}: ${r}`);
     }
 }
-function w(t) {
+function f(t) {
   return t.endsWith(".astro") ? `---
 // TractStack placeholder component
 ---
 <div>TractStack placeholder: ${t}</div>` : t.endsWith(".tsx") ? `// TractStack placeholder component
-import React from 'react';
 export default function Placeholder() {
   return <div>TractStack placeholder: ${t}</div>;
 }` : t.endsWith(".ts") ? `// TractStack placeholder utility

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",

package/templates/custom/shopify/Cart.tsx

@@ -163,9 +163,9 @@ export default function Cart({ resources = [] }: CartProps) {
             ? firstItem.variantIdPickup
             : firstItem.variantIdShipped;
           const displayIdFirst =
+            firstItem.variantId ||
             activeVariantIdFirst ||
-            firstItem.variantIdPickup ||
-            firstItem.variantId;
+            firstItem.variantIdPickup;
 
           const { src, srcSet } = getShopifyImage(
             resource,
@@ -240,9 +240,9 @@ export default function Cart({ resources = [] }: CartProps) {
                         : item.variantIdShipped;
 
                       const displayId =
+                        item.variantId ||
                         activeVariantId ||
-                        item.variantIdPickup ||
-                        item.variantId;
+                        item.variantIdPickup;
 
                       let price = '0.00';
                       let currency = 'USD';
@@ -348,13 +348,24 @@ export default function Cart({ resources = [] }: CartProps) {
               const sanitizedCart = { ...currentCart };
 
               Object.keys(sanitizedCart).forEach((key) => {
-                const item = sanitizedCart[key];
+                const item = { ...sanitizedCart[key] };
+
+                if (
+                  item.variantId &&
+                  !item.variantIdShipped &&
+                  !item.variantIdPickup
+                ) {
+                  sanitizedCart[key] = item;
+                  return;
+                }
 
                 if (isPickupMode && item.variantIdPickup) {
                   item.variantId = item.variantIdPickup;
                 } else if (!isPickupMode && item.variantIdShipped) {
                   item.variantId = item.variantIdShipped;
                 }
+
+                sanitizedCart[key] = item;
               });
 
               cartStore.set(sanitizedCart);

package/templates/custom/shopify/CheckoutModal.tsx

@@ -76,7 +76,7 @@ export default function CheckoutModal({
         }
       }
       const variant = (productData?.variants || []).find(
-        (v: any) => v.id === (item.variantId || item.gid)
+        (v: any) => v.id === item.variantId
       );
       return {
         ...item,
@@ -99,7 +99,7 @@ export default function CheckoutModal({
     [enrichedCart]
   );
   const needsPayment = useMemo(
-    () => enrichedCart.some((item) => !!(item.gid || item.variantId)),
+    () => enrichedCart.some((item) => !!item.variantId),
     [enrichedCart]
   );
   const totalDuration = useMemo(() => {
@@ -313,9 +313,9 @@ export default function CheckoutModal({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           lines: enrichedCart
-            .filter((i) => i.gid || i.variantId)
+            .filter((i) => i.variantId)
             .map((i) => ({
-              merchandiseId: i.variantId || i.gid,
+              merchandiseId: i.variantId,
               quantity: i.quantity || 1,
             })),
           email: $customer.email,

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -5,9 +5,13 @@ import {
   cartStore,
   modalState,
   transactionTraceId,
+  getCartItemKey,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
-import { RESTRICTION_MESSAGES } from '@/utils/customHelpers';
+import {
+  RESTRICTION_MESSAGES,
+  calculateCartDuration,
+} from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 import type { CartItemState } from '@/stores/shopify';
 import type { BrandConfigState } from '@/types/tractstack';
@@ -34,12 +38,7 @@ export default function ShopifyCartManager({
         return;
       }
 
-      const key =
-        actionItem.variantId ||
-        `${actionItem.resourceId}_${actionItem.variantIdShipped || 'null'}_${
-          actionItem.variantIdPickup || 'null'
-        }`;
-
+      const key = getCartItemKey(actionItem);
       const currentCart = cartStore.get();
       const currentItem = currentCart[key];
       const currentQty = currentItem?.quantity || 0;
@@ -74,19 +73,19 @@ export default function ShopifyCartManager({
         if (currentItem?.boundResourceId || actionItem.boundResourceId) {
           const boundId =
             currentItem?.boundResourceId || actionItem.boundResourceId;
-          const serviceEntry = Object.entries(nextCart).find(
-            ([_, item]) => item.resourceId === boundId
-          );
-          if (serviceEntry) {
-            const [serviceKey, serviceItem] = serviceEntry;
-            const newServiceQty = Math.max(0, serviceItem.quantity - 1);
-            if (newServiceQty === 0) {
-              delete nextCart[serviceKey];
-            } else {
-              nextCart[serviceKey] = {
-                ...serviceItem,
-                quantity: newServiceQty,
-              };
+          if (boundId) {
+            const serviceKey = getCartItemKey({ resourceId: boundId });
+            const serviceItem = nextCart[serviceKey];
+            if (serviceItem) {
+              const newServiceQty = Math.max(0, serviceItem.quantity - 1);
+              if (newServiceQty === 0) {
+                delete nextCart[serviceKey];
+              } else {
+                nextCart[serviceKey] = {
+                  ...serviceItem,
+                  quantity: newServiceQty,
+                };
+              }
             }
           }
         }
@@ -113,33 +112,25 @@ export default function ShopifyCartManager({
         nextCart[key] = newItem;
 
         if (newItem.boundResourceId) {
-          const serviceEntry = Object.entries(nextCart).find(
-            ([_, item]) => item.resourceId === newItem.boundResourceId
-          );
+          const serviceKey = getCartItemKey({
+            resourceId: newItem.boundResourceId,
+          });
+          const serviceItem = nextCart[serviceKey];
 
-          if (serviceEntry) {
-            const [serviceKey, serviceItem] = serviceEntry;
+          if (serviceItem) {
             nextCart[serviceKey] = {
               ...serviceItem,
               quantity: serviceItem.quantity + 1,
             };
           } else {
-            nextCart[`temp_service_${newItem.boundResourceId}`] = {
+            nextCart[serviceKey] = {
               resourceId: newItem.boundResourceId,
               quantity: 1,
             };
           }
         }
 
-        let rawDuration = 0;
-        Object.values(nextCart).forEach((item) => {
-          const res = resources.find((r) => r.id === item.resourceId);
-          if (res?.optionsPayload?.needsBooking || item.boundResourceId) {
-            rawDuration +=
-              (res?.optionsPayload?.bookingLengthMinutes || 0) *
-              (item.quantity || 1);
-          }
-        });
+        const rawDuration = calculateCartDuration(nextCart, resources);
 
         const interval = 15;
         const snappedDuration = Math.ceil(rawDuration / interval) * interval;
@@ -194,7 +185,7 @@ export default function ShopifyCartManager({
         addQueue.set(remaining);
       }
     }
-  }, [queue, resources]);
+  }, [queue, resources, brandConfig]);
 
   return null;
 }

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -6,7 +6,6 @@ import {
   CART_STATES,
   isShopifyHandoff,
 } from '@/stores/shopify';
-import { calculateCartDuration } from '@/utils/customHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ShopifyCheckoutProps {
@@ -36,47 +35,19 @@ export default function ShopifyCheckout({
       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
+            // 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
-                );
-              }
-            }
+            // Use the explicitly sanitized variant ID from the cart state
+            const merchandiseId = item.variantId;
 
-            // If we still have no ID, we cannot add this item to the Shopify cart.
+            // If we have no ID, we cannot add this item to the Shopify cart.
             if (!merchandiseId) return null;
 
             return {

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -115,8 +115,9 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
       {
         resourceId: resource.id,
         gid: product?.id,
-        variantIdShipped: variantShipped?.id,
-        variantIdPickup: variantPickup?.id,
+        variantId: !hasModeOption ? variantShipped?.id : undefined,
+        variantIdShipped: hasModeOption ? variantShipped?.id : undefined,
+        variantIdPickup: hasModeOption ? variantPickup?.id : undefined,
         action: 'add',
         boundResourceId: boundServiceResource?.id,
       },
@@ -214,14 +215,25 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
   );
 }
 
+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'] || [];
 
   let group = '';
+  let title = '';
+  let bgColor = '#f9f9f9';
   try {
     const parsedOptions = JSON.parse(options?.params?.options || '{}');
-    group = parsedOptions.group || '';
+    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) {
@@ -230,18 +242,34 @@ export default function ShopifyProductGrid({ resources = {}, options }: Props) {
 
   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}
-          />
-        ))}
+    <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>
-    </div>
+    </section>
   );
 }

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,5 +1,10 @@
 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 {
@@ -11,6 +16,8 @@ interface 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);
 
@@ -18,9 +25,18 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
   let services = resources['service'] || [];
 
   let group = '';
+  let title = '';
+  let bgColor = '#f9f9f9';
   try {
     const parsedOptions = JSON.parse(options?.params?.options || '{}');
-    group = parsedOptions.group || '';
+    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
   }
@@ -81,55 +97,83 @@ export default function ShopifyServiceList({ resources = {}, options }: 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-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'
+    <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/src/components/Footer.astro

@@ -58,7 +58,7 @@ if (menu?.optionsPayload) {
       return item;
     });
 
-  allLinks = additionalLinks.concat(featuredLinks);
+  allLinks = featuredLinks.concat(additionalLinks);
 }
 
 // Parse socials string
@@ -106,7 +106,7 @@ const createdDate = created ? new Date(created) : new Date();
             {allLinks.map((item: any) => (
               <a
                 href={item.to}
-                class="z-10 whitespace-nowrap rounded bg-brand-7 px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:bg-myblack hover:text-white focus:bg-brand-7 focus:text-white"
+                class="z-10 whitespace-nowrap rounded-md bg-brand-7 px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:bg-myblack hover:text-white focus:bg-brand-7 focus:text-white"
                 title={item.description}
               >
                 <span class="font-bold">{item.name}</span>

package/templates/src/components/Header.astro

@@ -123,13 +123,15 @@ if (hasShopify) {
 
     {
       !!menu ? (
-        <Menu
-          payload={menu}
-          slug={slug}
-          brandConfig={brandConfig}
-          isContext={isContext}
-          client:load
-        />
+        <div class="flex min-w-0 flex-1 justify-end">
+          <Menu
+            payload={menu}
+            slug={slug}
+            brandConfig={brandConfig}
+            isContext={isContext}
+            client:load
+          />
+        </div>
       ) : null
     }
   </div>
@@ -368,7 +370,11 @@ if (hasShopify) {
 {
   !isStoryKeep && hasShopify && (
     <>
-      <ShopifyCartManager resources={shopifyResources} client:only="react" />
+      <ShopifyCartManager
+        resources={shopifyResources}
+        brandConfig={brandConfig}
+        client:only="react"
+      />
       <CartModal client:only="react" />
     </>
   )