astro-tractstack 2.3.3 → 2.3.5

package/bin/create-tractstack.js

@@ -13,6 +13,9 @@ import { execSync } from 'child_process';
 import prompts from 'prompts';
 import kleur from 'kleur';
 
+// Keep in sync with package.json pnpm.overrides["@internationalized/date"]
+const INTL_DATE_VERSION = '3.10.1';
+
 // Detect package manager
 function detectPackageManager() {
   if (existsSync('pnpm-lock.yaml')) return 'pnpm';
@@ -348,7 +351,7 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
 
     // Install UI components
     execSync(
-      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0`,
+      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@${INTL_DATE_VERSION}`,
       {
         stdio: 'inherit',
       }
@@ -382,7 +385,7 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
     console.log('Please run manually:');
     console.log(
       kleur.cyan(
-        `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3 @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1 @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@3.10.0 d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@1.6.0 html-to-image@^1.11.13 path-to-regexp@^8.0.0 postcss postcss-selector-parser`
+        `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3 @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1 @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@${INTL_DATE_VERSION} d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@1.6.0 html-to-image@^1.11.13 path-to-regexp@^8.0.0 postcss postcss-selector-parser`
       )
     );
     console.log(

package/dist/index.js

@@ -815,6 +815,10 @@ async function y(t, e, c) {
       src: t("../templates/src/utils/api/bookingHelpers.ts"),
       dest: "src/utils/api/bookingHelpers.ts"
     },
+    {
+      src: t("../templates/src/utils/api/salesHelpers.ts"),
+      dest: "src/utils/api/salesHelpers.ts"
+    },
     {
       src: t("../templates/src/utils/api/menuHelpers.ts"),
       dest: "src/utils/api/menuHelpers.ts"
@@ -949,6 +953,14 @@ async function y(t, e, c) {
       src: t("../templates/src/pages/api/booking/list.ts"),
       dest: "src/pages/api/booking/list.ts"
     },
+    {
+      src: t("../templates/src/pages/api/sales/list.ts"),
+      dest: "src/pages/api/sales/list.ts"
+    },
+    {
+      src: t("../templates/src/pages/api/sales/metrics.ts"),
+      dest: "src/pages/api/sales/metrics.ts"
+    },
     {
       src: t("../templates/src/pages/api/booking/metrics.ts"),
       dest: "src/pages/api/booking/metrics.ts"
@@ -1268,6 +1280,12 @@ async function y(t, e, c) {
       ),
       dest: "src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/shopify/ShopifyDashboard_Sales.tsx"
+      ),
+      dest: "src/components/storykeep/shopify/ShopifyDashboard_Sales.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/email-builder/EmailBuilder.tsx"
@@ -2323,13 +2341,23 @@ async function y(t, e, c) {
       protected: !0
     },
     {
-      src: t("../templates/src/utils/customHelpers.ts"),
-      dest: "src/utils/customHelpers.ts",
+      src: t("../templates/custom/customHelpers.ts"),
+      dest: "src/custom/customHelpers.ts",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/shopifyCustomHelper.ts"),
+      dest: "src/custom/shopify/shopifyCustomHelper.ts",
+      protected: !0
+    },
+    {
+      src: t("../templates/custom/shopify/shopifyHelpers.ts"),
+      dest: "src/custom/shopify/shopifyHelpers.ts",
       protected: !0
     },
     {
-      src: t("../templates/src/utils/booking/appointmentMode.ts"),
-      dest: "src/utils/booking/appointmentMode.ts",
+      src: t("../templates/custom/shopify/appointmentMode.ts"),
+      dest: "src/custom/shopify/appointmentMode.ts",
       protected: !0
     },
     {

package/package.json

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

package/templates/custom/customHelpers.ts

@@ -0,0 +1,45 @@
+// URL Helper: Strip category prefix from slug
+// e.g., "people-bleako" -> "bleako"
+export function getCleanSlug(categorySlug: string, fullSlug: string): string {
+  const prefix = `${categorySlug}-`;
+  return fullSlug.startsWith(prefix) ? fullSlug.slice(prefix.length) : fullSlug;
+}
+
+// Build proper URL for resource
+// e.g., category="people", slug="people-bleako" -> "/people/bleako"
+export function getResourceUrl(categorySlug: string, fullSlug: string): string {
+  const cleanSlug = getCleanSlug(categorySlug, fullSlug);
+  return `/${categorySlug}/${cleanSlug}`;
+}
+
+// Image Helper: Placeholder implementation
+export function getResourceImage(
+  id: string,
+  slug: string,
+  category: string
+): string {
+  console.log(`please define getResourceImage`, id, slug, category);
+  return '/static.jpg';
+}
+
+export function getResourceDescription(
+  id: string,
+  slug: string,
+  category: string
+): string | null {
+  console.log(`please define getResourceDescription`, id, slug, category);
+  return null;
+}
+
+// Initialize search data - override in custom implementation
+export function initSearch(): void {
+  // Default implementation does nothing
+  // Override this function in your custom implementation to load search data
+}
+
+// Field Visibility Controls for ResourceForm
+export const resourceFormHideFields = ['shopifyImage'];
+
+// Field Formatting Controls for ResourceForm
+// Fields listed here will be treated as JSON objects but rendered as stringified text areas
+export const resourceJsonifyFields = ['shopifyData', 'shopifyImage'];

package/templates/custom/shopify/Cart.tsx

@@ -12,7 +12,14 @@ import {
   type CartItemState,
 } from '@/stores/shopify';
 import { getShopifyImage } from '@/utils/helpers';
-import { deriveAppointmentConstraints } from '@/utils/booking/appointmentMode';
+import { deriveAppointmentConstraints } from '@/custom/shopify/appointmentMode';
+import {
+  getServiceLinkedProduct,
+  getServiceVariantIdFromCanonicalProduct,
+  getSharedFeeChargeLineSummary,
+  isSharedFeeService,
+  parsePrimaryShopifyProductData,
+} from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface CartProps {
@@ -38,6 +45,12 @@ const getCleanVariantTitle = (variant: any) => {
   return title === 'Default Title' ? '' : title;
 };
 
+const getCategoryPriority = (categorySlug?: string): number => {
+  if (categorySlug === 'product') return 0;
+  if (categorySlug === 'service') return 1;
+  return 2;
+};
+
 export default function Cart({
   resources = [],
   allowRemote = false,
@@ -70,6 +83,28 @@ export default function Cart({
     },
     {} as Record<string, CartItemState[]>
   );
+  const orderedResourceIds = useMemo(() => {
+    const firstSeenIndex = new Map<string, number>();
+    displayableItems.forEach((item, index) => {
+      if (!firstSeenIndex.has(item.resourceId)) {
+        firstSeenIndex.set(item.resourceId, index);
+      }
+    });
+
+    return Object.keys(groupedItems).sort((a, b) => {
+      const categoryA = resources.find((r) => r.id === a)?.categorySlug;
+      const categoryB = resources.find((r) => r.id === b)?.categorySlug;
+      const priorityA = getCategoryPriority(categoryA);
+      const priorityB = getCategoryPriority(categoryB);
+      if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+      }
+      return (
+        (firstSeenIndex.get(a) ?? Number.MAX_SAFE_INTEGER) -
+        (firstSeenIndex.get(b) ?? Number.MAX_SAFE_INTEGER)
+      );
+    });
+  }, [displayableItems, groupedItems, resources]);
 
   const hasService = cartValues.some((item) => {
     const resource = resources.find((r) => r.id === item.resourceId);
@@ -114,6 +149,10 @@ export default function Cart({
   }, [canPickup]);
 
   const isPickupMode = canPickup && pickupEnabled;
+  const productResources = resources.filter(
+    (r) => r.categorySlug === 'product'
+  );
+  const sharedFeeChargeLine = getSharedFeeChargeLineSummary(cart, resources);
 
   const dispatchAction = (item: CartItemState, action: 'add' | 'remove') => {
     addQueue.set([
@@ -214,12 +253,16 @@ export default function Cart({
       </div>
 
       <ul className="divide-y divide-gray-200">
-        {Object.keys(groupedItems).map((resourceId) => {
+        {orderedResourceIds.map((resourceId) => {
           const items = groupedItems[resourceId];
           const resource = resources.find((r) => r.id === resourceId);
           if (!resource || items.length === 0) return null;
 
           const isService = !!resource.optionsPayload?.bookingLengthMinutes;
+          const sharedFeeService = isSharedFeeService(
+            resource,
+            productResources
+          );
           const serviceDuration = resource.optionsPayload?.bookingLengthMinutes;
 
           const firstItem = items[0];
@@ -231,10 +274,14 @@ export default function Cart({
           const activeVariantIdFirst = isPickupMode
             ? firstItem.variantIdPickup
             : firstItem.variantIdShipped;
+          const fallbackServiceVariantId = isService
+            ? getServiceVariantIdFromCanonicalProduct(resource, resources)
+            : undefined;
           const displayIdFirst =
             firstItem.variantId ||
             activeVariantIdFirst ||
-            firstItem.variantIdPickup;
+            firstItem.variantIdPickup ||
+            fallbackServiceVariantId;
 
           const { src, srcSet } = getShopifyImage(
             resource,
@@ -242,14 +289,12 @@ export default function Cart({
             displayIdFirst
           );
 
-          let productData: any = {};
-          try {
-            if (resource.optionsPayload?.shopifyData) {
-              productData = JSON.parse(resource.optionsPayload.shopifyData);
-            }
-          } catch (e) {
-            console.error('Failed to parse Shopify data', resource.id);
-          }
+          const priceResource = isService
+            ? getServiceLinkedProduct(resource, resources) || resource
+            : resource;
+
+          const productData =
+            parsePrimaryShopifyProductData(priceResource) || {};
           const variants = productData?.variants || [];
 
           return (
@@ -266,7 +311,7 @@ export default function Cart({
                     />
                   </div>
                 )}
-                <div className="ml-4 flex-1">
+                <div className={`${isService ? '' : 'ml-4'} flex-1`}>
                   <div className="flex justify-between">
                     <div>
                       <div className="flex items-center gap-2">
@@ -300,107 +345,132 @@ export default function Cart({
                         {resource.oneliner}
                       </p>
                     </div>
+                    {isService && sharedFeeService && (
+                      <button
+                        onClick={() =>
+                          addQueue.set([
+                            ...addQueue.get(),
+                            {
+                              resourceId: firstItem.resourceId,
+                              action: 'remove',
+                              variantId: firstItem.variantId,
+                            },
+                          ])
+                        }
+                        className="ml-4 rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
+                      >
+                        Remove
+                      </button>
+                    )}
                   </div>
 
-                  <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
-                    {items.map((item, idx) => {
-                      const activeVariantId = isPickupMode
-                        ? item.variantIdPickup
-                        : item.variantIdShipped;
-
-                      const displayId =
-                        item.variantId ||
-                        activeVariantId ||
-                        item.variantIdPickup;
-
-                      let price = '0.00';
-                      let currency = 'USD';
-                      let variantTitle = '';
-
-                      const variant = variants.find(
-                        (v: any) => v.id === displayId
-                      );
-
-                      if (variant) {
-                        price = variant.price?.amount || '0.00';
-                        currency = variant.price?.currencyCode || 'USD';
-                        variantTitle = getCleanVariantTitle(variant);
-                      }
-
-                      return (
-                        <div
-                          key={`${item.resourceId}_${displayId}_${idx}`}
-                          className="flex items-center justify-between"
-                        >
-                          <div className="flex items-center gap-2">
-                            {variantTitle && (
-                              <div className="text-sm font-bold text-gray-700">
-                                <span>{variantTitle}</span>
-                              </div>
-                            )}
-                            {isPickupMode &&
-                              !isService &&
-                              (item.variantIdPickup &&
-                              item.variantIdPickup !== item.variantIdShipped ? (
-                                <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
-                                  Store Pickup
-                                </span>
-                              ) : (
-                                <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700">
-                                  Not available for pickup
-                                </span>
-                              ))}
-                          </div>
-
-                          <div className="flex items-center">
-                            <div className="mr-6 text-right">
-                              <p className="text-sm font-bold text-gray-900">
-                                {price && parseFloat(price) > 0
-                                  ? `${(parseFloat(price) * item.quantity).toFixed(2)} ${currency}`
-                                  : 'No Charge'}
-                              </p>
+                  {!(isService && sharedFeeService) && (
+                    <div className="mt-4 space-y-4 border-t border-gray-100 pt-4">
+                      {items.map((item, idx) => {
+                        const activeVariantId = isPickupMode
+                          ? item.variantIdPickup
+                          : item.variantIdShipped;
+
+                        const displayId =
+                          item.variantId ||
+                          activeVariantId ||
+                          item.variantIdPickup ||
+                          fallbackServiceVariantId;
+
+                        let price = '0.00';
+                        let currency = 'USD';
+                        let variantTitle = '';
+
+                        const variant = variants.find(
+                          (v: any) => v.id === displayId
+                        );
+
+                        if (variant) {
+                          price = variant.price?.amount || '0.00';
+                          currency = variant.price?.currencyCode || 'USD';
+                          variantTitle = getCleanVariantTitle(variant);
+                        }
+
+                        return (
+                          <div
+                            key={`${item.resourceId}_${displayId}_${idx}`}
+                            className="flex items-center justify-between"
+                          >
+                            <div className="flex items-center gap-2">
+                              {variantTitle && (
+                                <div className="text-sm font-bold text-gray-700">
+                                  <span>{variantTitle}</span>
+                                </div>
+                              )}
+                              {isPickupMode &&
+                                !isService &&
+                                (item.variantIdPickup &&
+                                item.variantIdPickup !==
+                                  item.variantIdShipped ? (
+                                  <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+                                    Store Pickup
+                                  </span>
+                                ) : (
+                                  <span className="inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700">
+                                    Not available for pickup
+                                  </span>
+                                ))}
                             </div>
 
-                            {isService ? (
-                              <button
-                                onClick={() =>
-                                  addQueue.set([
-                                    ...addQueue.get(),
-                                    {
-                                      resourceId: item.resourceId,
-                                      action: 'remove',
-                                      variantId: item.variantId,
-                                    },
-                                  ])
-                                }
-                                className="rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
-                              >
-                                Remove
-                              </button>
-                            ) : (
-                              <div className="flex items-center rounded-md border border-gray-300">
-                                <button
-                                  onClick={() => dispatchAction(item, 'remove')}
-                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
-                                >
-                                  -
-                                </button>
-                                <span className="border-l border-r border-gray-300 px-3 py-1 text-gray-900">
-                                  {item.quantity}
-                                </span>
+                            <div className="flex items-center">
+                              <div className="mr-6 text-right">
+                                <p className="text-sm font-bold text-gray-900">
+                                  {isService && sharedFeeService
+                                    ? ''
+                                    : price && parseFloat(price) > 0
+                                      ? `${(parseFloat(price) * item.quantity).toFixed(2)} ${currency}`
+                                      : 'No Charge'}
+                                </p>
+                              </div>
+
+                              {isService ? (
                                 <button
-                                  onClick={() => dispatchAction(item, 'add')}
-                                  className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  onClick={() =>
+                                    addQueue.set([
+                                      ...addQueue.get(),
+                                      {
+                                        resourceId: item.resourceId,
+                                        action: 'remove',
+                                        variantId: item.variantId,
+                                      },
+                                    ])
+                                  }
+                                  className="rounded-md border border-gray-300 px-3 py-1 text-sm font-bold text-gray-600 hover:bg-gray-100"
                                 >
-                                  +
+                                  Remove
                                 </button>
-                              </div>
-                            )}
+                              ) : (
+                                <div className="flex items-center rounded-md border border-gray-300">
+                                  <button
+                                    onClick={() =>
+                                      dispatchAction(item, 'remove')
+                                    }
+                                    className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  >
+                                    -
+                                  </button>
+                                  <span className="border-l border-r border-gray-300 px-3 py-1 text-gray-900">
+                                    {item.quantity}
+                                  </span>
+                                  <button
+                                    onClick={() => dispatchAction(item, 'add')}
+                                    className="px-3 py-1 text-gray-600 hover:bg-gray-100"
+                                  >
+                                    +
+                                  </button>
+                                </div>
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      );
-                    })}
-                  </div>
+                        );
+                      })}
+                    </div>
+                  )}
                 </div>
               </div>
             </li>
@@ -408,6 +478,28 @@ export default function Cart({
         })}
       </ul>
 
+      {sharedFeeChargeLine && (
+        <div className="border-t border-gray-200 bg-white px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-bold text-gray-900">
+                {sharedFeeChargeLine.title}
+              </p>
+              {sharedFeeChargeLine.description && (
+                <p className="text-xs text-gray-500">
+                  {sharedFeeChargeLine.description}
+                </p>
+              )}
+            </div>
+            <p className="text-sm font-bold text-gray-900">
+              {parseFloat(sharedFeeChargeLine.amount) > 0
+                ? `${parseFloat(sharedFeeChargeLine.amount).toFixed(2)} ${sharedFeeChargeLine.currencyCode}`
+                : 'No Charge'}
+            </p>
+          </div>
+        </div>
+      )}
+
       <div className="rounded-b-lg border-t border-gray-200 bg-gray-50 px-6 py-6">
         <div className="flex justify-end">
           <button

package/templates/custom/shopify/CartIcon.tsx

@@ -1,15 +1,15 @@
 import { useStore } from '@nanostores/react';
 import { cartStore } from '@/stores/shopify';
+import { getCartIconCount } from '@/custom/shopify/shopifyHelpers';
+import type { ResourceNode } from '@/types/compositorTypes';
 
-export default function CartIcon() {
+interface CartIconProps {
+  resources?: ResourceNode[];
+}
+
+export default function CartIcon({ resources = [] }: CartIconProps) {
   const cart = useStore(cartStore);
-  const cartValues = Object.values(cart);
-  const boundServiceIds = new Set(
-    cartValues.map((item) => item.boundResourceId).filter(Boolean)
-  );
-  const totalQuantity = cartValues
-    .filter((item) => !boundServiceIds.has(item.resourceId))
-    .reduce((total, item) => total + item.quantity, 0);
+  const totalQuantity = getCartIconCount(cart, resources);
 
   const handleOpenCart = () => {
     window.location.href = '/cart';