astro-tractstack 2.2.10 → 2.3.0

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

@@ -302,22 +302,45 @@ const KnownResourceFormRenderer = ({
                           }
                           disabled={locked}
                         />
-                        {fieldDef.type === 'categoryReference' && (
-                          <EnumSelect
-                            label="Reference Category"
-                            value={fieldDef.belongsToCategory || ''}
-                            onChange={(value) =>
-                              updateField(fieldName, {
-                                belongsToCategory: value,
-                              })
-                            }
-                            options={availableCategories.map((cat) => ({
-                              value: cat,
-                              label: cat,
-                            }))}
+                        {fieldDef.type === 'string' && (
+                          <BooleanToggle
+                            label="Reference Category?"
+                            value={!!fieldDef.belongsToCategory}
+                            onChange={(checked) => {
+                              if (checked) {
+                                // Enable: set to first available category or empty
+                                updateField(fieldName, {
+                                  belongsToCategory:
+                                    availableCategories[0] || '',
+                                });
+                              } else {
+                                // Disable: remove the property
+                                updateField(fieldName, {
+                                  belongsToCategory: undefined,
+                                });
+                              }
+                            }}
                             disabled={locked}
                           />
                         )}
+
+                        {fieldDef.type === 'string' &&
+                          fieldDef.belongsToCategory !== undefined && (
+                            <EnumSelect
+                              label="Target Category"
+                              value={fieldDef.belongsToCategory}
+                              onChange={(value) =>
+                                updateField(fieldName, {
+                                  belongsToCategory: value,
+                                })
+                              }
+                              options={availableCategories.map((cat) => ({
+                                value: cat,
+                                label: cat,
+                              }))}
+                              disabled={locked}
+                            />
+                          )}
                         {fieldDef.type === 'number' && (
                           <>
                             <NumberInput

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

@@ -332,17 +332,10 @@ const ManageContent = ({
 
       case 'resources':
         return (
-          <div className="space-y-6">
-            <div>
-              <h3 className="mb-4 text-lg font-bold text-gray-900">
-                Resource Categories
-              </h3>
-              <KnownResourceTable
-                contentMap={currentContentMap}
-                onEdit={handleEditKnownResource}
-              />
-            </div>
-          </div>
+          <KnownResourceTable
+            contentMap={currentContentMap}
+            onEdit={handleEditKnownResource}
+          />
         );
 
       case 'beliefs':

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

@@ -0,0 +1,254 @@
+import { useState } from 'react';
+import { Pagination } from '@ark-ui/react/pagination';
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
+import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
+import type { ShopifyProduct } from '@/stores/shopify';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface ProductTableProps {
+  products: ShopifyProduct[];
+  linkedResourceMap: Map<string, ResourceNode>;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+  onSelectProduct: (product: ShopifyProduct) => void;
+  onLink: (product: ShopifyProduct) => void;
+  onUnlink: (resourceId: string) => void;
+  onEdit: (product: ShopifyProduct, resource: ResourceNode) => void;
+}
+
+const ITEMS_PER_PAGE = 10;
+
+export default function ProductTable({
+  products,
+  linkedResourceMap,
+  onRefresh,
+  isRefreshing,
+  onSelectProduct,
+  onLink,
+  onUnlink,
+  onEdit,
+}: ProductTableProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const filteredProducts = products.filter(
+    (product) =>
+      product.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      product.handle.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const totalResults = filteredProducts.length;
+  const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedProducts = filteredProducts.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search products..."
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+          />
+        </div>
+        <button
+          onClick={onRefresh}
+          disabled={isRefreshing}
+          className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          title="Refresh from Shopify"
+        >
+          <ArrowPathIcon
+            className={`mr-1.5 h-5 w-5 ${isRefreshing ? 'animate-spin' : ''}`}
+          />
+          Sync
+        </button>
+      </div>
+
+      <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+        <table className="min-w-full divide-y divide-gray-300">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wide text-gray-500">
+                Product
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wide text-gray-500">
+                Handle
+              </th>
+              <th className="relative px-6 py-3">
+                <span className="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 bg-white">
+            {paginatedProducts.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="px-6 py-12 text-center">
+                  <div className="text-gray-500">
+                    {products.length === 0
+                      ? 'No products found in store'
+                      : 'No products match your search'}
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              paginatedProducts.map((product) => {
+                const linkedResource = linkedResourceMap.get(product.id);
+                const isLinked = !!linkedResource;
+
+                return (
+                  <tr key={product.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4">
+                      <div className="font-bold text-gray-900">
+                        {product.title}
+                      </div>
+                      {isLinked && (
+                        <span
+                          className={`mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ring-1 ring-inset ${
+                            linkedResource.categorySlug === 'service'
+                              ? 'bg-indigo-50 text-indigo-700 ring-indigo-600/20'
+                              : 'bg-cyan-50 text-cyan-700 ring-cyan-600/20'
+                          }`}
+                        >
+                          Synced: {linkedResource.title}
+                        </span>
+                      )}
+                    </td>
+                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                      {product.handle}
+                    </td>
+                    <td className="whitespace-nowrap px-6 py-4 text-right text-sm font-bold">
+                      <div className="flex items-center justify-end space-x-2">
+                        {isLinked ? (
+                          <>
+                            <button
+                              onClick={() => onEdit(product, linkedResource)}
+                              className="text-cyan-600 hover:text-cyan-900"
+                              title="Edit Resource"
+                            >
+                              <PencilIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                              <span className="sr-only">
+                                Edit {product.title}
+                              </span>
+                            </button>
+                            <button
+                              onClick={() => onUnlink(linkedResource.id)}
+                              className="text-red-600 hover:text-red-900"
+                              title="Unlink Resource"
+                            >
+                              <TrashIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                              <span className="sr-only">
+                                Unlink {product.title}
+                              </span>
+                            </button>
+                          </>
+                        ) : (
+                          <button
+                            onClick={() => onLink(product)}
+                            className="text-cyan-600 hover:text-cyan-900"
+                            title="Create Resource"
+                          >
+                            <PlusIcon className="h-5 w-5" aria-hidden="true" />
+                            <span className="sr-only">
+                              Link {product.title}
+                            </span>
+                          </button>
+                        )}
+                        <button
+                          onClick={() => onSelectProduct(product)}
+                          className="text-gray-400 hover:text-gray-600"
+                        >
+                          <MagnifyingGlassIcon
+                            className="h-5 w-5"
+                            aria-hidden="true"
+                          />
+                          <span className="sr-only">
+                            Inspect {product.title}
+                          </span>
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex justify-center pt-4">
+          <Pagination.Root
+            count={totalResults}
+            pageSize={ITEMS_PER_PAGE}
+            page={currentPage}
+            onPageChange={(details) => handlePageChange(details.page)}
+          >
+            <Pagination.PrevTrigger className="mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+              <ChevronLeftIcon className="h-4 w-4" />
+              Previous
+            </Pagination.PrevTrigger>
+
+            <div className="flex items-center gap-1">
+              <Pagination.Context>
+                {(pagination) =>
+                  pagination.pages.map((page, index) =>
+                    page.type === 'page' ? (
+                      <Pagination.Item
+                        key={index}
+                        type="page"
+                        value={page.value}
+                        className={`rounded px-3 py-2 text-sm font-bold transition-colors ${
+                          page.value === currentPage
+                            ? 'bg-myblue text-white'
+                            : 'text-mydarkgrey hover:text-myblue'
+                        }`}
+                      >
+                        {page.value}
+                      </Pagination.Item>
+                    ) : (
+                      <span
+                        key={index}
+                        className="px-2 text-sm text-mydarkgrey"
+                      >
+                        {page.type === 'ellipsis' ? '...' : ''}
+                      </span>
+                    )
+                  )
+                }
+              </Pagination.Context>
+            </div>
+
+            <Pagination.NextTrigger className="ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+              Next
+              <ChevronRightIcon className="h-4 w-4" />
+            </Pagination.NextTrigger>
+          </Pagination.Root>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -9,6 +9,10 @@ import BooleanToggle from '@/components/form/BooleanToggle';
 import DateTimeInput from '@/components/form/DateTimeInput';
 import FileUpload from '@/components/form/FileUpload';
 import EnumSelect from '@/components/form/EnumSelect';
+import {
+  resourceFormHideFields,
+  resourceJsonifyFields,
+} from '@/utils/customHelpers';
 import type {
   ResourceConfig,
   ResourceState,
@@ -46,15 +50,16 @@ export default function ResourceForm({
         actionLisp: '',
       };
 
-  // Initialize optionsPayload with default values for all schema fields
+  // 1. Initialize optionsPayload with default values for all schema fields
+  // (Only runs if NO existing data is provided)
   if (!resourceData) {
-    // Only for new resources
     const defaultOptionsPayload: Record<string, any> = {};
 
     Object.entries(categorySchema).forEach(([fieldName, fieldDef]) => {
       switch (fieldDef.type) {
         case 'number':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? 0;
+          defaultOptionsPayload[fieldName] =
+            fieldDef.defaultValue ?? fieldDef.minNumber ?? 0;
           break;
         case 'boolean':
           defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? false;
@@ -79,6 +84,27 @@ export default function ResourceForm({
     initialData.optionsPayload = defaultOptionsPayload;
   }
 
+  // 2. Pre-process JSON fields for display (Pretty Print)
+  // This runs for both new and existing records to ensure readability
+  if (initialData.optionsPayload) {
+    resourceJsonifyFields.forEach((field) => {
+      const val = initialData.optionsPayload[field];
+      if (val && typeof val === 'string') {
+        try {
+          // Parse and re-stringify with indentation
+          initialData.optionsPayload[field] = JSON.stringify(
+            JSON.parse(val),
+            null,
+            2
+          );
+        } catch (e) {
+          // If it's not valid JSON, leave it as is
+          console.warn(`Failed to pretty-print field ${field}`, e);
+        }
+      }
+    });
+  }
+
   const validator = (state: ResourceState): FieldErrors => {
     const errors: FieldErrors = {};
 
@@ -114,9 +140,34 @@ export default function ResourceForm({
     validator,
     onSave: async (data) => {
       try {
+        // 3. Post-process JSON fields for saving (Minify)
+        const dataToSave = { ...data };
+        if (dataToSave.optionsPayload) {
+          // Create a shallow copy of optionsPayload to avoid mutating form state directly
+          dataToSave.optionsPayload = { ...dataToSave.optionsPayload };
+
+          resourceJsonifyFields.forEach((field) => {
+            const val = dataToSave.optionsPayload[field];
+            if (val && typeof val === 'string') {
+              try {
+                // Minify back to a compact string
+                dataToSave.optionsPayload[field] = JSON.stringify(
+                  JSON.parse(val)
+                );
+              } catch (e) {
+                console.error(`Failed to minify field ${field}`, e);
+                // Throwing here would stop the save if the user typed invalid JSON
+                throw new Error(
+                  `Invalid JSON in field "${field}". Please check your syntax.`
+                );
+              }
+            }
+          });
+        }
+
         const updatedState = await saveResourceWithStateUpdate(
           window.TRACTSTACK_CONFIG?.tenantId || 'default',
-          data
+          dataToSave
         );
 
         // Call success callback after save (original pattern)
@@ -137,14 +188,19 @@ export default function ResourceForm({
   // Helper to get category reference options for a field
   const getCategoryReferenceOptions = (belongsToCategory: string) => {
     return fullContentMap
-      .filter((item) => item.categorySlug === belongsToCategory)
+      .filter(
+        (item) =>
+          item.categorySlug === belongsToCategory &&
+          !(
+            belongsToCategory === 'service' && (item as any).optionsPayload?.gid
+          )
+      )
       .map((item) => ({
         value: item.slug,
         label: item.title,
       }));
   };
 
-  // Helper to update optionsPayload field
   const updateOptionsField = (fieldName: string, value: any) => {
     updateField('optionsPayload', {
       ...state.optionsPayload,
@@ -156,11 +212,51 @@ export default function ResourceForm({
     onClose?.(false);
   };
 
-  // Render dynamic field based on field definition
   const renderDynamicField = (fieldName: string, fieldDef: FieldDefinition) => {
+    if (
+      resourceFormHideFields.includes(fieldName)
+      // && initialData.optionsPayload?.[fieldName]
+    ) {
+      return null;
+    }
+
     const fieldValue = state.optionsPayload[fieldName];
     const fieldError = errors?.[`optionsPayload.${fieldName}`];
 
+    if (resourceJsonifyFields.includes(fieldName)) {
+      return (
+        <div key={fieldName} className="space-y-1">
+          <label
+            htmlFor={`field-${fieldName}`}
+            className="block text-sm font-bold text-gray-700"
+          >
+            {fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
+          </label>
+          <div className="relative">
+            <textarea
+              id={`field-${fieldName}`}
+              rows={12}
+              className={`block w-full rounded-md font-mono text-xs shadow-sm ${
+                fieldError
+                  ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                  : 'border-gray-300 focus:border-cyan-500 focus:ring-cyan-500'
+              }`}
+              value={fieldValue || ''}
+              onChange={(e) => updateOptionsField(fieldName, e.target.value)}
+              placeholder="{}"
+            />
+          </div>
+          {fieldError ? (
+            <p className="mt-1 text-sm text-red-600">{fieldError}</p>
+          ) : (
+            <p className="mt-1 text-xs text-gray-500">
+              Raw JSON configuration. Edits are validated on save.
+            </p>
+          )}
+        </div>
+      );
+    }
+
     switch (fieldDef.type) {
       case 'string':
         // Check if this string field references another category
@@ -349,7 +445,11 @@ export default function ResourceForm({
 
       {/* Save/Cancel Bar */}
       <UnsavedChangesBar
-        formState={formState}
+        formState={{
+          ...formState,
+          isDirty: isCreate || formState.isDirty,
+          cancel: handleCancel,
+        }}
         message="You have unsaved resource changes"
         saveLabel="Save Resource"
         cancelLabel="Discard Changes"

package/templates/src/lib/resources.ts

@@ -1,15 +1,6 @@
 import { headerResourcesStore, HEADER_RESOURCES_TTL } from '@/stores/resources';
 import type { ResourceNode } from '@/types/compositorTypes';
 
-/**
- * Fetches resource nodes based on categories, with server-side in-memory caching
- * to prevent redundant API calls for high-traffic, site-wide components.
- *
- * @param tenantId The ID of the current tenant.
- * @param categories An array of resource category slugs to fetch.
- * @param ttl Optional. The Time-To-Live for the cache in milliseconds. Defaults to 5 minutes.
- * @returns A promise that resolves to an array of ResourceNode objects.
- */
 export async function getHeaderResources(
   tenantId: string,
   categories: string[],
@@ -17,13 +8,16 @@ export async function getHeaderResources(
 ): Promise<ResourceNode[]> {
   const cache = headerResourcesStore.get();
   const now = Date.now();
+  const cacheKey = [...categories].sort().join(',');
 
-  // If we have fresh data in the cache, return it immediately.
-  if (cache.data.length > 0 && now - cache.lastFetched < ttl) {
+  if (
+    cache.key === cacheKey &&
+    cache.data.length > 0 &&
+    now - cache.lastFetched < ttl
+  ) {
     return cache.data;
   }
 
-  // If no categories are requested, there's nothing to fetch.
   if (!categories || categories.length === 0) {
     return [];
   }
@@ -32,7 +26,6 @@ export async function getHeaderResources(
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
   try {
-    // THIS IS THE CORRECTED ENDPOINT
     const response = await fetch(`${goBackend}/api/v1/nodes/resources`, {
       method: 'POST',
       headers: {
@@ -44,26 +37,23 @@ export async function getHeaderResources(
 
     if (!response.ok) {
       console.error(
-        `Failed to fetch header resources. Status: ${response.status}`
+        `Failed to fetch resources for [${cacheKey}]. Status: ${response.status}`
       );
-      // Gracefully degrade: return old data if we have it, otherwise an empty array.
-      return cache.data;
+      return cache.key === cacheKey ? cache.data : [];
     }
 
-    // The backend returns a payload like { resources: [...] }
     const responsePayload = await response.json();
     const resources: ResourceNode[] = responsePayload.resources || [];
 
-    // Update the store with the new data and timestamp.
     headerResourcesStore.set({
       data: resources,
       lastFetched: now,
+      key: cacheKey,
     });
 
     return resources;
   } catch (error) {
-    console.error('Error fetching header resources:', error);
-    // On network error, also return stale data if available.
-    return cache.data;
+    console.error('Error fetching resources:', error);
+    return cache.key === cacheKey ? cache.data : [];
   }
 }

package/templates/src/pages/api/shopify/createCart.ts

@@ -0,0 +1,73 @@
+import type { APIRoute } from '@/types/astro';
+import { resolveTenantId } from '@/utils/tenantResolver';
+
+export const prerender = false;
+
+interface CreateCartPayload {
+  lines: Array<{
+    merchandiseId: string;
+    quantity: number;
+  }>;
+  attributes?: Array<{
+    key: string;
+    value: string;
+  }>;
+  email?: string;
+}
+
+const getBackendUrl = () => {
+  return import.meta.env.PUBLIC_API_URL || 'http://localhost:8080';
+};
+
+export const POST: APIRoute = async ({ request }) => {
+  const resolution = await resolveTenantId(request);
+  const tenantId = resolution.id;
+
+  const backendEndpoint = `${getBackendUrl()}/api/v1/shopify/checkout`;
+  const cookieHeader = request.headers.get('cookie') || '';
+
+  try {
+    const body = (await request.json()) as CreateCartPayload;
+
+    const payload: CreateCartPayload = {
+      lines: body.lines,
+      attributes: body.attributes || [],
+      email: body.email,
+    };
+
+    const backendResponse = await fetch(backendEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+        Cookie: cookieHeader,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!backendResponse.ok) {
+      const errorText = await backendResponse.text();
+      throw new Error(
+        `Backend Proxy Error: ${backendResponse.status} - ${errorText}`
+      );
+    }
+
+    const result = await backendResponse.json();
+
+    return new Response(JSON.stringify(result), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('Shopify proxy create cart failed:', error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : 'Failed to create cart',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};