astro-tractstack 2.3.5 → 2.4.0

package/templates/src/components/compositor/Node.tsx

@@ -149,6 +149,7 @@ export const Node = memo((props: NodeProps) => {
                   first={true}
                   ctx={ctx}
                   isContextPane={true}
+                  isSandboxMode={props.isSandboxMode || false}
                 />
               </>
             );
@@ -201,7 +202,12 @@ export const Node = memo((props: NodeProps) => {
         element = (
           <>
             {first && (
-              <AddPanePanel nodeId={props.nodeId} first={true} ctx={ctx} />
+              <AddPanePanel
+                nodeId={props.nodeId}
+                first={true}
+                ctx={ctx}
+                isSandboxMode={props.isSandboxMode || false}
+              />
             )}
             <div className="py-0.5">
               <ConfigPanePanel
@@ -217,7 +223,12 @@ export const Node = memo((props: NodeProps) => {
                 {content}
               </PanelVisibilityWrapper>
             </div>
-            <AddPanePanel nodeId={props.nodeId} first={false} ctx={ctx} />
+            <AddPanePanel
+              nodeId={props.nodeId}
+              first={false}
+              ctx={ctx}
+              isSandboxMode={props.isSandboxMode || false}
+            />
           </>
         );
       }

package/templates/src/components/compositor/nodes/Pane.tsx

@@ -5,8 +5,6 @@ import { RenderChildren } from './RenderChildren';
 import FeaturedArticleSetup from '@/components/codehooks/FeaturedArticleSetup';
 import ListContentSetup from '@/components/codehooks/ListContentSetup';
 import BunnyVideoSetup from '@/components/codehooks/BunnyVideoSetup';
-import { ProductCardSetup } from '@/components/codehooks/ProductCardSetup';
-import { ProductGridSetup } from '@/components/codehooks/ProductGridSetup';
 import { PaneOverlay } from '@/components/compositor/tools/PaneOverlay';
 import type {
   PaneNode,
@@ -15,13 +13,7 @@ import type {
 } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
-const TARGETS = [
-  'list-content',
-  'featured-article',
-  'bunny-video',
-  'product-card',
-  'product-grid',
-];
+const TARGETS = ['list-content', 'featured-article', 'bunny-video'];
 
 const CodeHookContainer = ({
   payload,
@@ -171,11 +163,7 @@ const Pane = memo(
           id={getCtx(props).getNodeSlug(props.nodeId)}
           className={useFlexLayout ? '' : wrapperClasses}
         >
-          {codeHookPayload && codeHookTarget === 'product-card' ? (
-            <ProductCardSetup nodeId={props.nodeId} params={codeHookParams} />
-          ) : codeHookPayload && codeHookTarget === 'product-grid' ? (
-            <ProductGridSetup nodeId={props.nodeId} params={codeHookParams} />
-          ) : codeHookPayload && codeHookTarget === 'featured-article' ? (
+          {codeHookPayload && codeHookTarget === 'featured-article' ? (
             <FeaturedArticleSetup
               nodeId={props.nodeId}
               params={codeHookParams}

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

@@ -94,13 +94,14 @@ const AddPanePanel = ({
         />
       ) : mode === PaneAddMode.REUSE && !isContextPane ? (
         <AddPaneReUsePanel nodeId={nodeId} first={first} setMode={setMode} />
-      ) : mode === PaneAddMode.CODEHOOK && !isContextPane ? (
+      ) : mode === PaneAddMode.CODEHOOK ? (
         <AddPaneCodeHookPanel
           nodeId={nodeId}
           first={first}
           setMode={setMode}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
+          isSandboxMode={isSandboxMode}
         />
       ) : mode === PaneAddMode.PASTE ? (
         <AddPanePanel_paste
@@ -139,7 +140,7 @@ const AddPanePanel = ({
                   )}
                 </>
               )}
-              {!isTemplate && !isContextPane && (
+              {!isTemplate && (
                 <button
                   onClick={() => setMode(PaneAddMode.CODEHOOK)}
                   className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"

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

@@ -5,7 +5,11 @@ import { Combobox } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
-import { codehookMapStore, fullContentMapStore } from '@/stores/storykeep';
+import {
+  brandConfigStore,
+  codehookMapStore,
+  fullContentMapStore,
+} from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { findUniqueSlug } from '@/utils/helpers';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
@@ -16,6 +20,7 @@ interface AddPaneCodeHookPanelProps {
   setMode: (mode: PaneAddMode) => void;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
+  isSandboxMode?: boolean;
 }
 
 const AddPaneCodeHookPanel = ({
@@ -24,10 +29,13 @@ const AddPaneCodeHookPanel = ({
   setMode,
   isStoryFragment = false,
   isContextPane = false,
+  isSandboxMode = false,
 }: AddPaneCodeHookPanelProps) => {
   const [selected, setSelected] = useState<string | null>(null);
   const [query, setQuery] = useState('');
   const $contentMap = useStore(fullContentMapStore);
+  const brandConfig = useStore(brandConfigStore);
+  const hasShopify = brandConfig?.HAS_SHOPIFY === true;
 
   const existingSlugs = $contentMap
     .filter((item) => ['Pane', 'StoryFragment'].includes(item.type))
@@ -39,9 +47,22 @@ const AddPaneCodeHookPanel = ({
 
   const availableCodeHooks = codehookMapStore.get();
 
-  // Filter hooks based on search query
+  const isHookVisibleInPicker = (hookName: string) => {
+    if (
+      (hookName === 'shopify-product-grid' ||
+        hookName === 'shopify-service-list') &&
+      !hasShopify
+    ) {
+      return false;
+    }
+    if (hookName === 'get-crafting' && !isSandboxMode) {
+      return false;
+    }
+    return true;
+  };
+
+  // Filter hooks based on search query and tenant/sandbox gates
   const filteredHooks = useMemo(() => {
-    // Start with available hooks
     const hooks =
       query === ''
         ? [...availableCodeHooks]
@@ -49,9 +70,8 @@ const AddPaneCodeHookPanel = ({
             hook.toLowerCase().includes(query.toLowerCase())
           );
 
-    // Create a new array with unavailable hooks removed (don't just filter - we want to show them as disabled)
-    return hooks;
-  }, [availableCodeHooks, query]);
+    return hooks.filter(isHookVisibleInPicker);
+  }, [availableCodeHooks, query, hasShopify, isSandboxMode]);
 
   // Create collection for Ark UI Combobox
   const collection = useMemo(() => {
@@ -64,21 +84,22 @@ const AddPaneCodeHookPanel = ({
 
   const isHookAvailable = (hookName: string) => {
     if (
-      (hookName === 'featured-content' ||
-        hookName === 'list-content' ||
-        hookName === 'featured-article') &&
+      (hookName === 'list-content' || hookName === 'featured-article') &&
       !hasStoryFragments
     ) {
-      return hasStoryFragments;
+      return false;
+    }
+    if (
+      hookName === 'bunny-video' &&
+      import.meta.env.PUBLIC_ENABLE_BUNNY !== 'true'
+    ) {
+      return false;
     }
     return true;
   };
 
   const getDisplayName = (hookName: string) => {
-    if (
-      (hookName === 'featured-content' || hookName === 'list-content') &&
-      !hasStoryFragments
-    ) {
+    if (hookName === 'list-content' && !hasStoryFragments) {
       return `${hookName} (not yet available; no pages found)`;
     }
     return hookName;

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

@@ -260,7 +260,7 @@ const ConfigPanePanel = ({
                     )}
                   </>
                 )}
-                {isCodeHook && !isContextPane && (
+                {isCodeHook && (
                   <button
                     onClick={handleCodeHookConfig}
                     className={buttonClass}

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_menu.tsx

@@ -13,7 +13,7 @@ import {
   type MenuNode,
 } from '@/types/compositorTypes';
 import MenuForm from '@/components/storykeep/controls/content/MenuForm';
-import { fullContentMapStore, getFullContentMap } from '@/stores/analytics';
+import { getFullContentMap, setTenantFullContentMap } from '@/stores/analytics';
 import type { FullContentMapItem } from '@/types/tractstack';
 
 interface StoryFragmentMenuPanelProps {
@@ -53,7 +53,7 @@ const StoryFragmentMenuPanel = ({
         if (!contentMap) {
           const currentContentMap = await api.getContentMapWithTimestamp();
           if (currentContentMap.success && currentContentMap.data) {
-            fullContentMapStore.set(tenantId, currentContentMap.data);
+            setTenantFullContentMap(tenantId, currentContentMap.data);
             setContentMap(currentContentMap.data.data);
           }
         }

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -1,7 +1,11 @@
 import { useState, useCallback, useMemo, Component } from 'react';
 import type { ReactNode } from 'react';
 import { useStore } from '@nanostores/react';
-import { epinetCustomFilters } from '@/stores/analytics';
+import {
+  epinetCustomFilters,
+  getEpinetCustomFilters,
+  setEpinetCustomFilters,
+} from '@/stores/analytics';
 import { classNames } from '@/utils/helpers';
 import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
 import DashboardActivity from './Dashboard_Activity';
@@ -167,7 +171,7 @@ export default function StoryKeepDashboard_Analytics({
 
   const handleBeliefFilterChange = (beliefSlug: string, value: string) => {
     const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
-    const currentFilters = epinetCustomFilters.get();
+    const currentFilters = getEpinetCustomFilters();
     let newFilters = [...(currentFilters.appliedFilters || [])];
 
     if (value === 'All') {
@@ -183,7 +187,7 @@ export default function StoryKeepDashboard_Analytics({
       }
     }
 
-    epinetCustomFilters.set(tenantId, {
+    setEpinetCustomFilters(tenantId, {
       ...currentFilters,
       appliedFilters: newFilters,
     });
@@ -220,7 +224,7 @@ export default function StoryKeepDashboard_Analytics({
         nowUTC.getTime() - hoursBack * 60 * 60 * 1000
       );
 
-      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+      setEpinetCustomFilters(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
         ...$epinetCustomFilters,
         enabled: true,
         startTimeUTC: startTimeUTC.toISOString(),

package/templates/src/components/storykeep/controls/content/ContentBrowser.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import { Switch } from '@ark-ui/react';
 import { useStore } from '@nanostores/react';
-import { epinetCustomFilters } from '@/stores/analytics';
+import {
+  epinetCustomFilters,
+  setEpinetCustomFilters,
+} from '@/stores/analytics';
 import { classNames } from '@/utils/helpers';
 import type { FullContentMapItem } from '@/types/tractstack';
 
@@ -104,7 +107,7 @@ const ContentBrowser = ({
   const setStandardDuration = (hours: number) => {
     const nowUTC = new Date();
     const startTimeUTC = new Date(nowUTC.getTime() - hours * 60 * 60 * 1000);
-    epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+    setEpinetCustomFilters(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
       ...$epinetCustomFilters,
       enabled: true,
       startTimeUTC: startTimeUTC.toISOString(),

package/templates/src/components/storykeep/state/FetchAnalytics.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { useStore } from '@nanostores/react';
-import { epinetCustomFilters } from '@/stores/analytics';
+import {
+  epinetCustomFilters,
+  getEpinetCustomFilters,
+  setEpinetCustomFilters,
+} from '@/stores/analytics';
 import { TractStackAPI } from '@/utils/api';
 
 const VERBOSE = false;
@@ -252,7 +256,7 @@ class AnalyticsService {
       this.setCachedResponse(cacheKey, analyticsData);
       onUpdate(analyticsData);
 
-      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+      setEpinetCustomFilters(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
         ...filters,
         availableFilters: data.availableFilters || [],
       });
@@ -298,9 +302,9 @@ class AnalyticsService {
     if (VERBOSE) console.log('🏁 Initializing analytics filters');
     const nowUTC = new Date();
     const oneWeekAgoUTC = new Date(nowUTC.getTime() - 7 * 24 * 60 * 60 * 1000);
-    const current = epinetCustomFilters.get();
+    const current = getEpinetCustomFilters();
     if (!current.enabled) {
-      epinetCustomFilters.set(tenantId, {
+      setEpinetCustomFilters(tenantId, {
         enabled: true,
         visitorType: 'all',
         selectedUserId: null,

package/templates/src/components/storykeep/widgets/Wizard.tsx

@@ -139,7 +139,7 @@ export default function Wizard({
     const buildWizardData = async () => {
       try {
         const homePage = activeContentMap.find(
-          (item) => item.slug === homeSlug
+          (item: FullContentMapItem) => item.slug === homeSlug
         );
 
         let homeData = null;
@@ -173,7 +173,9 @@ export default function Wizard({
           hasPanes: !!homePage?.panes?.length,
           hasSeo: !!homePage?.description,
           hasMenu: !!homeData?.menuId,
-          hasAnyMenu: activeContentMap.some((item) => item.type === 'Menu'),
+          hasAnyMenu: activeContentMap.some(
+            (item: FullContentMapItem) => item.type === 'Menu'
+          ),
         };
 
         setWizardData(data);

package/templates/src/lib/codeHookHelper.ts

@@ -0,0 +1,156 @@
+import { getCachedFullContentMap, getFullContentMap } from '@/stores/analytics';
+import { getCodeHookResources } from '@/lib/resources';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+export interface CodeHookBladeContext {
+  tenantId: string;
+  paneId: string;
+  optionsStr: string;
+  options?: { params: { options: string } };
+}
+
+export interface CodeHookResourceFilters {
+  categories: string[];
+  slugs: string[];
+}
+
+export function parseCodeHookBladeContext(
+  searchParams: URLSearchParams
+): CodeHookBladeContext {
+  const tenantId = searchParams.get('tenantId') || 'default';
+  const paneId = searchParams.get('paneId') || '';
+  const optionsStr = searchParams.get('options') || '';
+  const options = optionsStr ? { params: { options: optionsStr } } : undefined;
+  return { tenantId, paneId, optionsStr, options };
+}
+
+export async function resolveCodeHookFullContentMap(
+  tenantId: string
+): Promise<any[]> {
+  let fullContentMap = getCachedFullContentMap(tenantId);
+  if (!fullContentMap.length) {
+    fullContentMap = await getFullContentMap(tenantId);
+  }
+  return fullContentMap;
+}
+
+export function parseCodeHookResourceFilters(
+  optionsStr: string,
+  logLabel?: string
+): CodeHookResourceFilters {
+  const categories: string[] = [];
+  const slugs: string[] = [];
+  if (!optionsStr) {
+    return { categories, slugs };
+  }
+  try {
+    const parsed = JSON.parse(optionsStr);
+    if (typeof parsed.category === 'string' && parsed.category) {
+      categories.push(...parsed.category.split('|'));
+    }
+    if (typeof parsed.slugs === 'string' && parsed.slugs) {
+      slugs.push(...parsed.slugs.split(','));
+    }
+    if (typeof parsed.slug === 'string' && parsed.slug) {
+      slugs.push(parsed.slug);
+    }
+  } catch (e) {
+    console.error(`Invalid options for ${logLabel ?? 'codehook resources'}`, e);
+  }
+  return { categories, slugs };
+}
+
+export async function resolveCodeHookResources(
+  tenantId: string,
+  optionsStr: string,
+  logLabel?: string
+): Promise<ResourceNode[]> {
+  const { categories, slugs } = parseCodeHookResourceFilters(
+    optionsStr,
+    logLabel
+  );
+  return getCodeHookResources(tenantId, categories, slugs);
+}
+
+export function buildCodeHookBladePath(
+  hookId: string,
+  ctx: Pick<CodeHookBladeContext, 'paneId' | 'tenantId' | 'optionsStr'>
+): string {
+  const params = new URLSearchParams({
+    paneId: ctx.paneId,
+    tenantId: ctx.tenantId,
+  });
+  if (ctx.optionsStr) {
+    params.set('options', ctx.optionsStr);
+  }
+  return `/codehooks/${hookId}?${params.toString()}`;
+}
+
+export function resolveSSRFetchOrigin(pageUrl: URL, siteUrl?: string): string {
+  if (siteUrl) {
+    try {
+      return new URL(siteUrl).origin;
+    } catch {
+      // fall through to page origin
+    }
+  }
+  return pageUrl.origin;
+}
+
+export async function fetchCodeHookBladeHtml(
+  bladePath: string,
+  request: Request,
+  origin: string
+): Promise<string> {
+  try {
+    const url = new URL(bladePath, origin);
+    const res = await fetch(url, {
+      headers: {
+        cookie: request.headers.get('cookie') ?? '',
+        accept: 'text/html',
+      },
+    });
+    if (!res.ok) {
+      console.error(
+        `Failed to SSR-fetch codehook blade ${bladePath}. Status: ${res.status}`
+      );
+      return '';
+    }
+    return res.text();
+  } catch (error) {
+    console.error(`Error SSR-fetching codehook blade ${bladePath}:`, error);
+    return '';
+  }
+}
+
+export async function fetchCodeHookBladesForPanes(options: {
+  paneIds: string[];
+  codeHookTargets: Record<string, string>;
+  tenantId: string;
+  request: Request;
+  origin: string;
+}): Promise<Record<string, string>> {
+  const { paneIds, codeHookTargets, tenantId, request, origin } = options;
+  const result: Record<string, string> = {};
+
+  await Promise.all(
+    paneIds
+      .filter((paneId) => codeHookTargets[paneId])
+      .map(async (paneId) => {
+        const hookId = codeHookTargets[paneId];
+        const optionsStr = codeHookTargets[`${paneId}-${hookId}`] || '';
+        const bladePath = buildCodeHookBladePath(hookId, {
+          paneId,
+          tenantId,
+          optionsStr,
+        });
+        result[paneId] = await fetchCodeHookBladeHtml(
+          bladePath,
+          request,
+          origin
+        );
+      })
+  );
+
+  return result;
+}

package/templates/src/lib/resources.ts

@@ -1,6 +1,47 @@
 import { headerResourcesStore, HEADER_RESOURCES_TTL } from '@/stores/resources';
 import type { ResourceNode } from '@/types/compositorTypes';
 
+// Stateless resource fetch for codehook blades. POSTs categories/slugs to the
+// nodes/resources endpoint, unwraps the { resources, count } envelope, and
+// returns the FLAT ResourceNode[] (the API shape) unchanged - no grouping.
+// Components that need a keyed view reshape internally. No cache.
+export async function getCodeHookResources(
+  tenantId: string,
+  categories: string[] = [],
+  slugs: string[] = []
+): Promise<ResourceNode[]> {
+  if (categories.length === 0 && slugs.length === 0) {
+    return [];
+  }
+
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const response = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      body: JSON.stringify({ categories, slugs }),
+    });
+
+    if (!response.ok) {
+      console.error(
+        `Failed to fetch codehook resources. Status: ${response.status}`
+      );
+      return [];
+    }
+
+    const payload = await response.json();
+    return (payload.resources as ResourceNode[]) || [];
+  } catch (error) {
+    console.error('Error fetching codehook resources:', error);
+    return [];
+  }
+}
+
 export async function getHeaderResources(
   tenantId: string,
   categories: string[],

package/templates/src/lib/storyData.ts

@@ -1,5 +1,5 @@
 import { handleFailedResponse } from '@/utils/backend';
-import type { ImpressionNode, ResourceNode } from '@/types/compositorTypes';
+import type { ImpressionNode } from '@/types/compositorTypes';
 
 export interface StoryData {
   id: string;
@@ -8,7 +8,6 @@ export interface StoryData {
   paneIds: string[];
   codeHookTargets: Record<string, string>;
   codeHookVisibility: Record<string, boolean | string[]>;
-  resourcesPayload: Record<string, ResourceNode[]>;
   impressions: ImpressionNode[];
   fragments: Record<string, string>;
   menu: any;

package/templates/src/pages/[...slug]/edit.astro

@@ -6,7 +6,7 @@ import { getFullContentMap } from '@/stores/analytics';
 import { getBrandConfig } from '@/utils/api/brandConfig';
 import { joinUrlPaths } from '@/utils/helpers';
 import { handleFailedResponse } from '@/utils/backend';
-import { components as codeHookComponents } from '@/custom/CodeHook.astro';
+import { availableCodeHookIds } from '@/custom/codehooks';
 import StoryKeepHeader from '@/components/edit/Header';
 import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
@@ -188,7 +188,7 @@ for (const [key, value] of Astro.url.searchParams) {
             fullContentMap={fullContentMap}
             fullCanonicalURL={fullCanonicalURL}
             urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+            availableCodeHooks={availableCodeHookIds}
             client:only="react"
           />
         </div>
@@ -213,7 +213,7 @@ for (const [key, value] of Astro.url.searchParams) {
     }
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
-        availableCodeHooks={Object.keys(codeHookComponents)}
+        availableCodeHooks={availableCodeHookIds}
         client:only="react"
       />
     </div>