astro-tractstack 2.2.9 → 2.3.0

package/templates/src/stores/shopify.ts

@@ -0,0 +1,210 @@
+import { atom, map, onMount } from 'nanostores';
+import { persistentAtom } from '@nanostores/persistent';
+
+export interface ShopifyVariant {
+  id: string;
+  title: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  compareAtPrice?: {
+    amount: string;
+    currencyCode: string;
+  };
+  sku?: string;
+  availableForSale: boolean;
+  requiresShipping: boolean;
+  selectedOptions: {
+    name: string;
+    value: string;
+  }[];
+}
+
+export const modalState = atom<{
+  isOpen: boolean;
+  type: 'success' | 'restriction';
+  title: string;
+  message: string;
+}>({
+  isOpen: false,
+  type: 'success',
+  title: '',
+  message: '',
+});
+
+export interface ShopifyOption {
+  name: string;
+  values: string[];
+}
+
+export interface ShopifyImage {
+  url: string;
+  altText?: string;
+}
+
+export interface ShopifyProduct {
+  id: string;
+  title: string;
+  handle: string;
+  description: string;
+  options: ShopifyOption[];
+  images: ShopifyImage[];
+  variants: ShopifyVariant[];
+}
+
+export type CartActionType = 'add' | 'remove';
+
+export interface CartAction {
+  resourceId: string;
+  gid?: string;
+  variantId?: string;
+  variantIdShipped?: string;
+  variantIdPickup?: string;
+  boundResourceId?: string;
+  action: CartActionType;
+  suppressModal?: boolean;
+}
+
+export interface CartItemState {
+  resourceId: string;
+  quantity: number;
+  variantId?: string;
+  gid?: string;
+  variantIdShipped?: string;
+  variantIdPickup?: string;
+  boundResourceId?: string;
+}
+
+export const QUEUE_STATES = {
+  READY: 'READY',
+  ADDING: 'ADDING',
+  HAS_REQUIREMENTS: 'HAS_REQUIREMENTS',
+} as const;
+
+export type QueueState = (typeof QUEUE_STATES)[keyof typeof QUEUE_STATES];
+
+export const CART_STATES = {
+  INIT: 'INIT',
+  READY: 'READY',
+  LOADED: 'LOADED',
+  CHECKOUT: 'CHECKOUT',
+  BOOKING: 'BOOKING',
+  BOOKED: 'BOOKED',
+  SHOPIFY_HANDOFF: 'SHOPIFY_HANDOFF',
+} as const;
+
+export type CartState = (typeof CART_STATES)[keyof typeof CART_STATES];
+
+export const isShopifyHandoff = atom<boolean>(false);
+
+export const shopifyData = persistentAtom<{
+  products: ShopifyProduct[];
+  lastFetched: number;
+}>(
+  'tractstack_shopify_data',
+  {
+    products: [],
+    lastFetched: 0,
+  },
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  }
+);
+
+// Non-persistent Status (Load states should reset on refresh)
+export const shopifyStatus = map<{
+  isLoading: boolean;
+  error: string | null;
+}>({
+  isLoading: false,
+  error: null,
+});
+
+export const addQueue = persistentAtom<CartAction[]>(
+  'tractstack_shopify_queue',
+  [],
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  }
+);
+
+// We use a backing persistentAtom for the cart to ensure data survives reloads,
+// but expose it as a 'map' to preserve the .setKey() API used by consumers.
+const cartPersistence = persistentAtom<Record<string, CartItemState>>(
+  'tractstack_shopify_cart',
+  {},
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  }
+);
+
+export const cartStore = map<Record<string, CartItemState>>(
+  cartPersistence.get()
+);
+
+onMount(cartStore, () => {
+  // Sync initial state from persistence (in case of race conditions or hydration delay)
+  cartStore.set(cartPersistence.get());
+
+  // Persist any changes made to the map
+  const unbind = cartStore.listen((value) => {
+    cartPersistence.set(value);
+  });
+
+  return () => unbind();
+});
+
+export const queueState = persistentAtom<QueueState>(
+  'tractstack_shopify_queue_state',
+  QUEUE_STATES.READY
+);
+export const cartState = persistentAtom<CartState>(
+  'tractstack_shopify_cart_state',
+  CART_STATES.INIT
+);
+
+export async function fetchShopifyProducts() {
+  shopifyStatus.set({ isLoading: true, error: null });
+
+  try {
+    const response = await fetch('/api/shopify/getProducts');
+    const result = await response.json();
+
+    if (!response.ok) {
+      throw new Error(result.error || 'Failed to fetch products');
+    }
+
+    shopifyData.set({
+      products: result.products,
+      lastFetched: Date.now(),
+    });
+
+    shopifyStatus.set({ isLoading: false, error: null });
+  } catch (error) {
+    console.error('Shopify fetch failed:', error);
+    shopifyStatus.set({
+      isLoading: false,
+      error:
+        error instanceof Error ? error.message : 'Failed to fetch products',
+    });
+  }
+}
+
+export const customerDetails = persistentAtom<{
+  name: string;
+  email: string;
+}>(
+  'tractstack_shopify_customer',
+  {
+    name: '',
+    email: '',
+  },
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  }
+);

package/templates/src/types/tractstack.ts

@@ -183,6 +183,8 @@ export interface BrandConfig {
   KNOWN_RESOURCES?: KnownResourcesConfig;
   DESIGN_LIBRARY?: DesignLibraryConfig;
   HAS_AAI?: boolean;
+  HAS_SHOPIFY?: boolean;
+  HAS_RESEND?: boolean;
   HAS_HYDRATION_TOKEN?: boolean;
 }
 
@@ -217,6 +219,8 @@ export interface BrandConfigState {
   knownResources: KnownResourcesConfig;
   designLibrary?: DesignLibraryConfig;
   hasAAI: boolean;
+  hasShopify: boolean;
+  hasResend: boolean;
   hasHydrationToken: boolean;
 }
 
@@ -251,6 +255,12 @@ export interface AdvancedConfigStatus {
   editorPasswordSet: boolean;
   aaiAPIKeySet: boolean;
   tursoEnabled: boolean;
+  shopifyStorefrontTokenSet: boolean;
+  shopifyAdminApiKeySet: boolean;
+  shopifyApiSecretSet: boolean;
+  shopifyApiVersion: string;
+  shopifyStoreDomainSet: boolean;
+  resendApiKeySet: boolean;
 }
 
 export interface AdvancedConfigState {
@@ -259,6 +269,12 @@ export interface AdvancedConfigState {
   adminPassword: string;
   editorPassword: string;
   aaiApiKey: string;
+  shopifyStorefrontToken: string;
+  shopifyAdminApiKey: string;
+  shopifyApiSecret: string;
+  shopifyApiVersion: string;
+  shopifyStoreDomain: string;
+  resendApiKey: string;
 }
 
 export interface AdvancedConfigUpdateRequest {
@@ -269,6 +285,11 @@ export interface AdvancedConfigUpdateRequest {
   AAI_API_KEY?: string;
   HOME_SLUG?: string;
   TRACTSTACK_HOME_SLUG?: string;
+  SHOPIFY_STOREFRONT_TOKEN?: string;
+  SHOPIFY_API_SECRET?: string;
+  SHOPIFY_API_VERSION?: string;
+  SHOPIFY_STORE_DOMAIN?: string;
+  RESEND_API_KEY?: string;
 }
 
 export interface MenuNodeState {

package/templates/src/utils/api/advancedConfig.ts

@@ -28,7 +28,11 @@ export async function getAdvancedConfigStatus(
       typeof data.tursoTokenSet !== 'boolean' ||
       typeof data.adminPasswordSet !== 'boolean' ||
       typeof data.editorPasswordSet !== 'boolean' ||
-      typeof data.aaiAPIKeySet !== 'boolean'
+      typeof data.aaiAPIKeySet !== 'boolean' ||
+      typeof data.shopifyStorefrontTokenSet !== 'boolean' ||
+      typeof data.shopifyApiSecretSet !== 'boolean' ||
+      typeof data.shopifyStoreDomainSet !== 'boolean' ||
+      typeof data.resendApiKeySet !== 'boolean'
     ) {
       throw new Error('Invalid response format from server');
     }

package/templates/src/utils/api/advancedHelpers.ts

@@ -19,6 +19,12 @@ export function convertToLocalState(
       adminPassword: '',
       editorPassword: '',
       aaiApiKey: '',
+      shopifyStorefrontToken: '',
+      shopifyAdminApiKey: '',
+      shopifyApiSecret: '',
+      shopifyApiVersion: '',
+      shopifyStoreDomain: '',
+      resendApiKey: '',
     };
   }
 
@@ -31,6 +37,12 @@ export function convertToLocalState(
     adminPassword: '',
     editorPassword: '',
     aaiApiKey: '',
+    shopifyStorefrontToken: '',
+    shopifyAdminApiKey: '',
+    shopifyApiSecret: '',
+    shopifyApiVersion: status.shopifyApiVersion || '',
+    shopifyStoreDomain: '',
+    resendApiKey: '',
   };
 }
 
@@ -64,6 +76,26 @@ export function convertToBackendFormat(
     request.AAI_API_KEY = state.aaiApiKey.trim();
   }
 
+  if (state.shopifyStorefrontToken?.trim()) {
+    request.SHOPIFY_STOREFRONT_TOKEN = state.shopifyStorefrontToken.trim();
+  }
+
+  if (state.shopifyApiSecret?.trim()) {
+    request.SHOPIFY_API_SECRET = state.shopifyApiSecret.trim();
+  }
+
+  if (state.shopifyApiVersion?.trim()) {
+    request.SHOPIFY_API_VERSION = state.shopifyApiVersion.trim();
+  }
+
+  if (state.shopifyStoreDomain?.trim()) {
+    request.SHOPIFY_STORE_DOMAIN = state.shopifyStoreDomain.trim();
+  }
+
+  if (state.resendApiKey?.trim()) {
+    request.RESEND_API_KEY = state.resendApiKey.trim();
+  }
+
   return request;
 }
 
@@ -78,18 +110,14 @@ export function validateAdvancedConfig(
   // Turso validation: both URL and token must be provided together
   const hasTursoUrl = Boolean(state.tursoUrl?.trim());
   const hasTursoToken = Boolean(state.tursoToken?.trim());
-
   if (hasTursoUrl && !hasTursoToken) {
     errors.tursoToken =
       'Turso Auth Token is required when Turso URL is provided';
   }
-
   if (hasTursoToken && !hasTursoUrl) {
     errors.tursoUrl =
       'Turso Database URL is required when Turso Token is provided';
   }
-
-  // Basic URL validation for Turso
   if (hasTursoUrl && state.tursoUrl) {
     const urlPattern = /^libsql:\/\/.+/;
     if (!urlPattern.test(state.tursoUrl.trim())) {
@@ -97,12 +125,27 @@ export function validateAdvancedConfig(
     }
   }
 
+  // Shopify store domain validation
+  if (state.shopifyStoreDomain?.trim()) {
+    const domainPattern = /^[a-zA-Z0-9-]+\.myshopify\.com$/;
+    if (!domainPattern.test(state.shopifyStoreDomain.trim())) {
+      errors.shopifyStoreDomain =
+        'Store domain must be in the format "your-shop.myshopify.com"';
+    }
+  }
+
+  if (state.shopifyApiVersion?.trim()) {
+    if (!/^\d{4}-\d{2}$/.test(state.shopifyApiVersion.trim())) {
+      errors.shopifyApiVersion =
+        'Version must match YYYY-MM format (e.g. 2026-01)';
+    }
+  }
+
   // Password strength validation (optional but recommended)
   if (state.adminPassword && state.adminPassword.length < 8) {
     errors.adminPassword =
       'Admin password should be at least 8 characters long';
   }
-
   if (state.editorPassword && state.editorPassword.length < 8) {
     errors.editorPassword =
       'Editor password should be at least 8 characters long';

package/templates/src/utils/api/brandHelpers.ts

@@ -40,6 +40,8 @@ export function convertToLocalState(
     knownResources: brandConfig.KNOWN_RESOURCES ?? {},
     designLibrary: brandConfig.DESIGN_LIBRARY ?? undefined,
     hasAAI: brandConfig.HAS_AAI ?? false,
+    hasShopify: brandConfig.HAS_SHOPIFY ?? false,
+    hasResend: brandConfig.HAS_RESEND ?? false,
     hasHydrationToken: brandConfig.HAS_HYDRATION_TOKEN ?? false,
   };
 }
@@ -72,6 +74,8 @@ export function convertToBackendFormat(
     KNOWN_RESOURCES: localState.knownResources,
     DESIGN_LIBRARY: localState.designLibrary,
     HAS_AAI: localState.hasAAI,
+    HAS_SHOPIFY: localState.hasShopify,
+    HAS_RESEND: localState.hasResend,
 
     // ALWAYS send asset paths (current state)
     LOGO: localState.logo,

package/templates/src/utils/api/resourceConfig.ts

@@ -104,11 +104,13 @@ export async function deleteResource(
 
 export async function getAllResourceIds(tenantId: string): Promise<string[]> {
   const api = new TractStackAPI(tenantId);
-  const response = await api.get('/api/v1/nodes/resources');
+  const response = await api.get<{ count: number; resourceIds: string[] }>(
+    '/api/v1/nodes/resources'
+  );
   if (!response.success) {
     throw new Error(response.error || 'Failed to get resource IDs');
   }
-  return response.data;
+  return response.data?.resourceIds || [];
 }
 
 export async function getResourcesByIds(
@@ -116,11 +118,14 @@ export async function getResourcesByIds(
   ids: string[]
 ): Promise<ResourceConfig[]> {
   const api = new TractStackAPI(tenantId);
-  const response = await api.post('/api/v1/nodes/resources', { ids });
-  if (!response.success) {
+  const response = await api.post<{ resources: ResourceConfig[] }>(
+    '/api/v1/nodes/resources',
+    { resourceIds: ids }
+  );
+  if (!response.success || !response.data) {
     throw new Error(response.error || 'Failed to get resources by IDs');
   }
-  return response.data;
+  return response.data.resources;
 }
 
 export async function getResourcesByCategory(
@@ -128,6 +133,9 @@ export async function getResourcesByCategory(
   categorySlug: string
 ): Promise<ResourceConfig[]> {
   const allIds = await getAllResourceIds(tenantId);
+  if (!allIds || allIds.length === 0) {
+    return [];
+  }
   const allResources = await getResourcesByIds(tenantId, allIds);
   return allResources.filter(
     (resource) => resource.categorySlug === categorySlug

package/templates/src/utils/customHelpers.ts

@@ -1,3 +1,6 @@
+import type { ResourceNode } from '@/types/compositorTypes';
+import type { CartItemState } from '@/stores/shopify';
+
 // URL Helper: Strip category prefix from slug
 // e.g., "people-bleako" -> "bleako"
 export function getCleanSlug(categorySlug: string, fullSlug: string): string {
@@ -36,3 +39,70 @@ 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 = ['gid', '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'];
+
+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.`,
+  DEFAULT_ADD: (title: string) => `${title} has been added to your cart.`,
+};
+
+// For CartModal.tsx
+export function checkRestrictions(resource: ResourceNode): boolean {
+  // 1. Service / Booking Requirement
+  // We check for the explicit option payload value used by services
+  if (resource.optionsPayload?.bookingLengthMinutes) {
+    return true;
+  }
+
+  // 2. Final Sale / Terms Check
+  // Placeholder: In the future, check for flags like resource.optionsPayload?.finalSale
+  // if (resource.optionsPayload?.finalSale) {
+  //   return true;
+  // }
+
+  return false;
+}
+
+export const MAX_LENGTH_MINUTES = 180;
+
+export const BOOKING_LINK_INCREMENTS = [30, 60, 90, 120, 150, 180];
+
+export const BOOKING_LINKS: Record<number, string> = {
+  30: '30min',
+  60: '60min',
+  90: '90min',
+  120: '120min',
+  150: '150min',
+  180: '180min',
+};
+
+export function getBookingBucket(minutes: number): string | null {
+  if (minutes <= 0) return null;
+  if (minutes > MAX_LENGTH_MINUTES) return null;
+
+  const bucket = BOOKING_LINK_INCREMENTS.find((inc) => minutes <= inc);
+  return bucket ? BOOKING_LINKS[bucket] : null;
+}
+
+export function calculateCartDuration(
+  cart: Record<string, CartItemState>,
+  resources: ResourceNode[]
+): number {
+  return Object.values(cart).reduce((total, item) => {
+    const resource = resources.find((r) => r.id === item.resourceId);
+    const duration = Number(
+      resource?.optionsPayload?.bookingLengthMinutes || 0
+    );
+    return total + (isNaN(duration) ? 0 : duration * item.quantity);
+  }, 0);
+}

package/templates/src/utils/helpers.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { stopWords } from '@/constants/stopWords';
 import type { RefObject } from 'react';
 import type { MenuNode } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 let progressInterval: NodeJS.Timeout | null = null;
 let safetyTimeout: NodeJS.Timeout | null = null;
@@ -536,3 +537,61 @@ export const resolveCollisions = () => {
     }
   });
 };
+
+// Shopify Image Helper: Returns responsive WebP paths for the resource image
+export function getShopifyImage(
+  resource: ResourceNode,
+  size: '600' | '1080' | '1920' = '600',
+  variantId?: string
+): { src: string; srcSet: string } {
+  let imageId = resource.optionsPayload?.image;
+
+  if (variantId && typeof resource.optionsPayload?.shopifyImage === 'string') {
+    try {
+      const variantMap = JSON.parse(resource.optionsPayload.shopifyImage);
+      if (variantMap[variantId]?.fileId) {
+        imageId = variantMap[variantId].fileId;
+      }
+    } catch (e) {
+      console.warn(
+        `[Shopify] Failed to parse shopifyImage map for resource ${resource.id}`,
+        e
+      );
+    }
+  }
+
+  if (imageId && typeof imageId === 'string') {
+    const baseUrl = `/media/images/resources/${imageId}`;
+    return {
+      src: `${baseUrl}_${size}px.webp`,
+      srcSet: `${baseUrl}_1920px.webp 1920w, ${baseUrl}_1080px.webp 1080w, ${baseUrl}_600px.webp 600w`,
+    };
+  }
+
+  return {
+    src: '/static.jpg',
+    srcSet: '',
+  };
+}
+
+// Image Helper: Returns responsive WebP paths for the resource image
+export function getResourceImage(
+  resource: ResourceNode,
+  size: '600' | '1080' | '1920' = '600'
+): { src: string; srcSet: string } {
+  const imageId = resource.optionsPayload?.image;
+
+  if (imageId && typeof imageId === 'string') {
+    const baseUrl = `/media/images/resources/${imageId}`;
+    return {
+      src: `${baseUrl}_${size}px.webp`,
+      srcSet: `${baseUrl}_1920px.webp 1920w, ${baseUrl}_1080px.webp 1080w, ${baseUrl}_600px.webp 600w`,
+    };
+  }
+
+  // Fallback for resources with no synced image
+  return {
+    src: '/static.jpg',
+    srcSet: '',
+  };
+}