astro-tractstack 2.3.4 → 2.4.0

package/bin/create-tractstack.js

@@ -7,14 +7,33 @@ import {
   writeFileSync,
   existsSync,
 } from 'fs';
-import { resolve } from 'path';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
 import { homedir } from 'os';
 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';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function loadInstallManifest() {
+  const pkg = JSON.parse(
+    readFileSync(resolve(__dirname, '../package.json'), 'utf-8')
+  );
+  const manifest = pkg.tractstackInstall;
+  if (!manifest?.dependencies) {
+    throw new Error(
+      'astro-tractstack package.json is missing tractstackInstall.dependencies'
+    );
+  }
+  return manifest;
+}
+
+function formatPackageSpecs(deps) {
+  return Object.entries(deps)
+    .map(([name, version]) => (version ? `${name}@${version}` : name))
+    .join(' ');
+}
 
 // Detect package manager
 function detectPackageManager() {
@@ -332,67 +351,27 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
     packageManager === 'pnpm' ? 'pnpm add' : `${packageManager} add`;
 
   console.log(kleur.cyan('\nInstalling dependencies...'));
-  try {
-    // Install React and Node adapter
-    execSync(
-      `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ React and Node adapter installed'));
-
-    // Install core dependencies
-    execSync(
-      `${addCommand} @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ State management installed'));
-
-    // Install UI components
-    execSync(
-      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@${INTL_DATE_VERSION}`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ UI components installed'));
-
-    // Install visualization dependencies
-    execSync(
-      `${addCommand} 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`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ Visualization dependencies installed'));
+  const installManifest = loadInstallManifest();
+  const dependencySpecs = formatPackageSpecs(installManifest.dependencies);
+  const devDependencySpecs = formatPackageSpecs(
+    installManifest.devDependencies || {}
+  );
 
-    // Install additional dependencies
-    execSync(
-      `${addCommand} path-to-regexp@^8.0.0 postcss postcss-selector-parser`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ Additional dependencies installed'));
+  try {
+    execSync(`${addCommand} ${dependencySpecs}`, { stdio: 'inherit' });
+    console.log(kleur.green('✅ TractStack dependencies installed'));
 
-    // Install dev dependencies
-    execSync(
-      `${addCommand} -D @types/node@^22.18.0 @types/react@^19.0.0 @types/react-dom@^19.0.0 @types/d3@^7.4.3 @types/d3-sankey@^0.12.3 prettier@^3.7.4 prettier-plugin-astro@^0.14.1 prettier-plugin-tailwindcss@^0.7.2 typescript@^5.9.3 @types/tinycolor2@^1.4.6 @mhsdesign/jit-browser-tailwindcss@^0.4.2`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ Dev dependencies installed'));
+    if (devDependencySpecs) {
+      execSync(`${addCommand} -D ${devDependencySpecs}`, { stdio: 'inherit' });
+      console.log(kleur.green('✅ Dev dependencies installed'));
+    }
   } catch (error) {
     console.log(kleur.red('❌ Failed to install dependencies'));
     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@${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(
-      kleur.cyan(
-        `${addCommand} -D @types/node@^22.18.0 @types/react@^19.0.0 @types/react-dom@^19.0.0 @types/d3@^7.4.3 @types/d3-sankey@^0.12.3 prettier@^3.7.4 prettier-plugin-astro@^0.14.1 prettier-plugin-tailwindcss@^0.7.2 typescript@^5.9.3 @types/tinycolor2@^1.4.6 @mhsdesign/jit-browser-tailwindcss@^0.4.2`
-      )
-    );
+    console.log(kleur.cyan(`${addCommand} ${dependencySpecs}`));
+    if (devDependencySpecs) {
+      console.log(kleur.cyan(`${addCommand} -D ${devDependencySpecs}`));
+    }
     process.exit(1);
   }
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
-import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
+import { existsSync as n, mkdirSync as k, copyFileSync as x, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
 function g(t) {
   const e = i(d(t));
@@ -1497,18 +1497,6 @@ async function y(t, e, c) {
       ),
       dest: "src/components/codehooks/ListContentSetup.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/codehooks/ProductCardSetup.tsx"
-      ),
-      dest: "src/components/codehooks/ProductCardSetup.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/codehooks/ProductGridSetup.tsx"
-      ),
-      dest: "src/components/codehooks/ProductGridSetup.tsx"
-    },
     {
       src: t(
         "../templates/src/components/codehooks/BunnyVideoWrapper.astro"
@@ -1519,6 +1507,31 @@ async function y(t, e, c) {
       src: t("../templates/src/components/codehooks/BunnyVideoSetup.tsx"),
       dest: "src/components/codehooks/BunnyVideoSetup.tsx"
     },
+    // CodeHook Blades (partial routes; core hooks overwritable)
+    {
+      src: t("../templates/src/pages/codehooks/featured-article.astro"),
+      dest: "src/pages/codehooks/featured-article.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/list-content.astro"),
+      dest: "src/pages/codehooks/list-content.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/search-widget.astro"),
+      dest: "src/pages/codehooks/search-widget.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/bunny-video.astro"),
+      dest: "src/pages/codehooks/bunny-video.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/epinet.astro"),
+      dest: "src/pages/codehooks/epinet.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/[...hookId].astro"),
+      dest: "src/pages/codehooks/[...hookId].astro"
+    },
     // Widget Components
     {
       src: t("../templates/src/components/widgets/Impression.tsx"),
@@ -1545,6 +1558,10 @@ async function y(t, e, c) {
       src: t("../templates/src/lib/resources.ts"),
       dest: "src/lib/resources.ts"
     },
+    {
+      src: t("../templates/src/lib/codeHookHelper.ts"),
+      dest: "src/lib/codeHookHelper.ts"
+    },
     // Client Scripts
     {
       src: t("../templates/src/client/htmx.min.js"),
@@ -2319,13 +2336,6 @@ async function y(t, e, c) {
       dest: "src/pages/storykeep/init.astro"
     },
     // Custom Components (Conditional)
-    {
-      src: t(
-        c?.includeExamples ? "../templates/custom/with-examples/CodeHook.astro" : "../templates/custom/minimal/CodeHook.astro"
-      ),
-      dest: "src/custom/CodeHook.astro",
-      protected: !0
-    },
     {
       src: t(
         c?.includeExamples ? "../templates/custom/with-examples/CustomRoutes.astro" : "../templates/custom/minimal/CustomRoutes.astro"
@@ -2334,20 +2344,28 @@ async function y(t, e, c) {
       protected: !0
     },
     {
-      src: t(
-        c?.includeExamples ? "../templates/custom/with-examples/HeaderWidget.astro" : "../templates/custom/minimal/HeaderWidget.astro"
-      ),
+      src: t("../templates/custom/minimal/HeaderWidget.astro"),
       dest: "src/custom/HeaderWidget.astro",
       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
     },
     {
@@ -2395,6 +2413,29 @@ async function y(t, e, c) {
       dest: "src/custom/shopify/NativeBookingCalendar.tsx",
       protected: !0
     },
+    // CodeHook manifest (frontend capability list; hand-maintained, protected)
+    {
+      src: t(
+        c?.includeExamples ? "../templates/custom/with-examples/codehooks.ts" : "../templates/custom/minimal/codehooks.ts"
+      ),
+      dest: "src/custom/codehooks.ts",
+      protected: !0
+    },
+    // CodeHook Blades (userland hooks; protected once installed)
+    {
+      src: t(
+        "../templates/src/pages/codehooks/shopify-product-grid.astro"
+      ),
+      dest: "src/pages/codehooks/shopify-product-grid.astro",
+      protected: !0
+    },
+    {
+      src: t(
+        "../templates/src/pages/codehooks/shopify-service-list.astro"
+      ),
+      dest: "src/pages/codehooks/shopify-service-list.astro",
+      protected: !0
+    },
     // Example Components (Conditional)
     ...c?.includeExamples ? [
       {
@@ -2410,20 +2451,13 @@ async function y(t, e, c) {
         protected: !0
       },
       {
-        src: t("../templates/custom/with-examples/ProductGrid.astro"),
-        dest: "src/custom/ProductGrid.astro",
-        protected: !0
-      },
-      {
-        src: t(
-          "../templates/custom/with-examples/ProductCardWrapper.astro"
-        ),
-        dest: "src/custom/ProductCardWrapper.astro",
+        src: t("../templates/src/pages/codehooks/custom-hero.astro"),
+        dest: "src/pages/codehooks/custom-hero.astro",
         protected: !0
       },
       {
-        src: t("../templates/custom/with-examples/ProductCard.astro"),
-        dest: "src/custom/ProductCard.astro",
+        src: t("../templates/src/pages/codehooks/get-crafting.astro"),
+        dest: "src/pages/codehooks/get-crafting.astro",
         protected: !0
       },
       {
@@ -2443,11 +2477,11 @@ async function y(t, e, c) {
   for (const s of o)
     try {
       const p = i(s.dest);
-      n(p) || x(p, { recursive: !0 });
+      n(p) || k(p, { recursive: !0 });
       const r = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
       if (!n(s.dest) || r)
         if (n(s.src))
-          k(s.src, s.dest), e.info(`Updated ${s.dest}`);
+          x(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
           const m = f(s.dest);
           u(s.dest, m), e.info(`Created placeholder ${s.dest}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",
@@ -50,19 +50,57 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "tractstackInstall": {
+    "dependencies": {
+      "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.1.0",
+      "nanostores": "^1.3.0",
+      "@nanostores/persistent": "^1.3.4",
+      "ulid": "^3.0.2",
+      "@ark-ui/react": "^5.37.2",
+      "@internationalized/date": "^3.12.0",
+      "@heroicons/react": "^2.2.0",
+      "d3": "^7.9.0",
+      "d3-sankey": "^0.12.3",
+      "recharts": "^3.8.1",
+      "player.js": "^0.1.0",
+      "tinycolor2": "^1.6.0",
+      "html-to-image": "^1.11.13",
+      "path-to-regexp": "^8.4.2",
+      "postcss": "^8.5.15",
+      "postcss-selector-parser": "^7.1.4"
+    },
+    "devDependencies": {
+      "@types/node": "^22.20.0",
+      "@types/react": "^19.2.17",
+      "@types/react-dom": "^19.2.3",
+      "@types/d3": "^7.4.3",
+      "@types/d3-sankey": "^0.12.5",
+      "prettier": "^3.8.4",
+      "prettier-plugin-astro": "^0.14.1",
+      "prettier-plugin-tailwindcss": "^0.7.4",
+      "typescript": "^5.9.3",
+      "@types/tinycolor2": "^1.4.6",
+      "@mhsdesign/jit-browser-tailwindcss": "^0.4.2"
+    }
+  },
   "dependencies": {
     "@calcom/embed-react": "^1.5.3",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@ark-ui/react": "^5.30.0",
+    "@ark-ui/react": "^5.37.2",
     "@astrojs/react": "^4.4.2",
-    "@heroicons/react": "^2.1.1",
-    "@internationalized/date": "^3.10.1",
+    "@heroicons/react": "^2.2.0",
+    "@internationalized/date": "^3.12.0",
     "@mhsdesign/jit-browser-tailwindcss": "^0.4.2",
-    "@nanostores/persistent": "^1.3.3",
-    "@nanostores/react": "^1.0.0",
+    "@nanostores/persistent": "^1.3.4",
+    "@nanostores/react": "^1.1.0",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.5",
     "@types/node": "^22.18.0",
@@ -74,7 +112,7 @@
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "html-to-image": "^1.11.13",
-    "nanostores": "^1.1.0",
+    "nanostores": "^1.3.0",
     "player.js": "^0.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.1",
@@ -96,8 +134,7 @@
   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "pnpm": {
     "overrides": {
-      "esbuild@<=0.24.2": ">=0.25.0",
-      "@internationalized/date": "3.10.1"
+      "esbuild@<=0.24.2": ">=0.25.0"
     }
   }
 }

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/minimal/codehooks.ts

@@ -0,0 +1,13 @@
+// Static, hand-maintained per-install manifest of available codehook ids.
+// The backend never sees this; it is a frontend build capability list only.
+// To add/remove a hook, edit this array AND add/remove the matching blade at
+// src/pages/codehooks/{id}.astro. Not regenerated automatically.
+export const availableCodeHookIds: string[] = [
+  'featured-article',
+  'list-content',
+  'search-widget',
+  'bunny-video',
+  'epinet',
+  'shopify-product-grid',
+  'shopify-service-list',
+];

package/templates/custom/shopify/Cart.tsx

@@ -12,14 +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 '@/utils/customHelpers';
+} from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface CartProps {

package/templates/custom/shopify/CartIcon.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react';
 import { cartStore } from '@/stores/shopify';
-import { getCartIconCount } from '@/utils/customHelpers';
+import { getCartIconCount } from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface CartIconProps {

package/templates/custom/shopify/CheckoutModal.tsx

@@ -24,7 +24,8 @@ import { bookingHelpers } from '@/utils/api/bookingHelpers';
 import {
   deriveAppointmentConstraints,
   pickInitialAppointmentMode,
-} from '@/utils/booking/appointmentMode';
+  type AppointmentMode,
+} from '@/custom/shopify/appointmentMode';
 import { NativeBookingCalendar } from './NativeBookingCalendar';
 import { ProfileStorage } from '@/utils/profileStorage';
 import {
@@ -35,7 +36,7 @@ import {
   hasGidBackedCheckout,
   isSharedFeeService,
   parsePrimaryShopifyProductData,
-} from '@/utils/customHelpers';
+} from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 type CheckoutState =
@@ -45,7 +46,6 @@ type CheckoutState =
   | 'SUMMARY'
   | 'PROCESSING'
   | 'SUCCESS';
-type AppointmentMode = 'IN_PERSON' | 'REMOTE';
 
 interface CheckoutModalProps {
   maxLength: number;

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -7,13 +7,13 @@ import {
   transactionTraceId,
 } from '@/stores/shopify';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import { RESTRICTION_MESSAGES } from '@/custom/shopify/shopifyCustomHelper';
 import {
-  RESTRICTION_MESSAGES,
   calculateCartDuration,
   getCartItemKey,
   isSharedFeeService,
-} from '@/utils/customHelpers';
-import { wouldCartHaveImpossibleRemoteMix } from '@/utils/booking/appointmentMode';
+} from '@/custom/shopify/shopifyHelpers';
+import { wouldCartHaveImpossibleRemoteMix } from '@/custom/shopify/appointmentMode';
 import type { ResourceNode } from '@/types/compositorTypes';
 import type { CartItemState } from '@/stores/shopify';
 import type { BrandConfigState } from '@/types/tractstack';

package/templates/custom/shopify/ShopifyCheckout.tsx

@@ -6,7 +6,7 @@ import {
   CART_STATES,
   isShopifyHandoff,
 } from '@/stores/shopify';
-import { buildShopifyCheckoutLines } from '@/utils/customHelpers';
+import { buildShopifyCheckoutLines } from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ShopifyCheckoutProps {

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
-import { collectServiceGids } from '@/utils/customHelpers';
+import { collectServiceGids } from '@/custom/shopify/shopifyHelpers';
 import { getShopifyImage } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
-  resources: Record<string, ResourceNode[]>;
+  resources: ResourceNode[];
   options?: {
     params?: {
       options?: string;
@@ -218,9 +218,9 @@ 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'] || [];
+export default function ShopifyProductGrid({ resources = [], options }: Props) {
+  let products = resources.filter((r) => r.categorySlug === 'product');
+  const services = resources.filter((r) => r.categorySlug === 'service');
 
   let group = '';
   let title = '';

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -4,11 +4,11 @@ import {
   getCartItemKey,
   getServiceVariantIdFromCanonicalProduct,
   isSharedFeeService,
-} from '@/utils/customHelpers';
+} from '@/custom/shopify/shopifyHelpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
-  resources: Record<string, ResourceNode[]>;
+  resources: ResourceNode[];
   options?: {
     params?: {
       options?: string;
@@ -18,11 +18,11 @@ interface Props {
 
 const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 
-export default function ShopifyServiceList({ resources = {}, options }: Props) {
+export default function ShopifyServiceList({ resources = [], options }: Props) {
   const cart = useStore(cartStore);
 
-  const products = resources['product'] || [];
-  let services = resources['service'] || [];
+  const products = resources.filter((r) => r.categorySlug === 'product');
+  let services = resources.filter((r) => r.categorySlug === 'service');
 
   let group = '';
   let title = '';

package/templates/custom/shopify/shopifyCustomHelper.ts

@@ -0,0 +1,10 @@
+export const RESTRICTION_MESSAGES = {
+  BOOKING: (duration: number) =>
+    `This is a ${duration} minute service. On checkout we'll help you book at your convenience.`,
+  TERMS: 'Please review the terms for this item before adding it to your cart.',
+  MAX_DURATION: (max: number) =>
+    `You cannot book more than ${max} minutes of services in one session.`,
+  INCOMPATIBLE_REMOTE:
+    'This service cannot be combined with the services already in your cart. Some require remote-only delivery while others can only be delivered in person.',
+  DEFAULT_ADD: (title: string) => `${title} has been added to your cart.`,
+};