astro-tractstack 2.3.1 → 2.3.3

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

@@ -7,6 +7,8 @@ interface ResourceBulkIngestProps {
   onClose: (saved: boolean) => void;
   onRefresh: () => void;
   fullContentMap: FullContentMapItem[];
+  /** When set, placeholder shows one example for this category only (validation still accepts all types). */
+  exampleCategorySlug?: string;
 }
 
 interface ParsedResource {
@@ -40,10 +42,63 @@ interface FieldDefinition {
   maxNumber?: number;
 }
 
+function buildExampleObjectForCategory(
+  categorySlug: string,
+  index: number,
+  knownResources: Record<string, Record<string, FieldDefinition>>,
+  categoryKeys: string[]
+): Record<string, unknown> {
+  const schema = knownResources[categorySlug];
+  const example: Record<string, unknown> = {
+    title: `Example ${categorySlug.charAt(0).toUpperCase() + categorySlug.slice(1)} ${index + 1}`,
+    slug: `${categorySlug}-example-${index + 1}`,
+    category: categorySlug,
+    oneliner: `A brief description of this ${categorySlug}`,
+  };
+
+  Object.entries(schema).forEach(([key, def]: [string, FieldDefinition]) => {
+    switch (def.type) {
+      case 'string':
+        if (
+          def.belongsToCategory &&
+          categoryKeys.includes(def.belongsToCategory)
+        ) {
+          example[key] = `${def.belongsToCategory}-example-slug`;
+        } else {
+          example[key] = def.defaultValue || `example ${key}`;
+        }
+        break;
+      case 'number':
+        example[key] = def.defaultValue ?? (def.minNumber || 0);
+        break;
+      case 'boolean':
+        example[key] = def.defaultValue ?? true;
+        break;
+      case 'multi':
+        example[key] = def.defaultValue || [
+          `example ${key} 1`,
+          `example ${key} 2`,
+        ];
+        break;
+      case 'date':
+        example[key] = new Date().toISOString();
+        break;
+      case 'image':
+        example[key] = 'file-id-placeholder';
+        break;
+      default:
+        example[key] = def.defaultValue || `example ${key}`;
+    }
+  });
+
+  return example;
+}
+
 export default function ResourceBulkIngest({
   onClose,
   onRefresh,
   fullContentMap,
+  exampleCategorySlug,
 }: ResourceBulkIngestProps) {
   const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
   const [loading, setLoading] = useState(false);
@@ -418,7 +473,7 @@ export default function ResourceBulkIngest({
     };
   }, [jsonInput, knownResources, fullContentMap]);
 
-  // Generate example JSON based on available categories - ENHANCED VERSION
+  // Placeholder JSON: one category when exampleCategorySlug is set, else one object per known category
   const exampleJson = useMemo(() => {
     const categories = Object.keys(knownResources);
     if (categories.length === 0) {
@@ -436,59 +491,32 @@ export default function ResourceBulkIngest({
       );
     }
 
-    // Create examples for ALL categories, not just the first one
-    const examples = categories.map((categorySlug, index) => {
-      const schema = knownResources[categorySlug];
-      const example: any = {
-        title: `Example ${categorySlug.charAt(0).toUpperCase() + categorySlug.slice(1)} ${index + 1}`,
-        slug: `${categorySlug}-example-${index + 1}`,
-        category: categorySlug,
-        oneliner: `A brief description of this ${categorySlug}`,
-      };
-
-      // Add example values for schema fields
-      Object.entries(schema).forEach(
-        ([key, def]: [string, FieldDefinition]) => {
-          switch (def.type) {
-            case 'string':
-              if (
-                def.belongsToCategory &&
-                categories.includes(def.belongsToCategory)
-              ) {
-                example[key] = `${def.belongsToCategory}-example-slug`;
-              } else {
-                example[key] = def.defaultValue || `example ${key}`;
-              }
-              break;
-            case 'number':
-              example[key] = def.defaultValue ?? (def.minNumber || 0);
-              break;
-            case 'boolean':
-              example[key] = def.defaultValue ?? true;
-              break;
-            case 'multi':
-              example[key] = def.defaultValue || [
-                `example ${key} 1`,
-                `example ${key} 2`,
-              ];
-              break;
-            case 'date':
-              example[key] = new Date().toISOString();
-              break;
-            case 'image':
-              example[key] = 'file-id-placeholder';
-              break;
-            default:
-              example[key] = def.defaultValue || `example ${key}`;
-          }
-        }
-      );
+    if (
+      exampleCategorySlug &&
+      knownResources[exampleCategorySlug] !== undefined
+    ) {
+      const examples = [
+        buildExampleObjectForCategory(
+          exampleCategorySlug,
+          0,
+          knownResources,
+          categories
+        ),
+      ];
+      return JSON.stringify(examples, null, 2);
+    }
 
-      return example;
-    });
+    const examples = categories.map((categorySlug, index) =>
+      buildExampleObjectForCategory(
+        categorySlug,
+        index,
+        knownResources,
+        categories
+      )
+    );
 
     return JSON.stringify(examples, null, 2);
-  }, [knownResources]);
+  }, [knownResources, exampleCategorySlug]);
 
   const handleSave = useCallback(async () => {
     if (validationResult.validResources.length === 0 || isProcessing) return;

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import { convertToLocalState } from '@/utils/api/resourceHelpers';
 import { saveResourceWithStateUpdate } from '@/utils/api/resourceConfig';
@@ -26,6 +27,7 @@ interface ResourceFormProps {
   fullContentMap: FullContentMapItem[];
   categorySlug: string;
   categorySchema: Record<string, FieldDefinition>;
+  tenantRemoteOnly?: boolean;
   isCreate?: boolean;
   onClose?: (saved: boolean) => void;
 }
@@ -35,6 +37,7 @@ export default function ResourceForm({
   fullContentMap,
   categorySlug,
   categorySchema,
+  tenantRemoteOnly = false,
   isCreate = false,
   onClose,
 }: ResourceFormProps) {
@@ -184,6 +187,31 @@ export default function ResourceForm({
   });
 
   const { state, updateField, errors } = formState;
+  const isServiceCategory = categorySlug === 'service';
+  const serviceRemoteOnly = Boolean(state.optionsPayload?.remoteOnly);
+  const effectiveServiceRemoteOnly = tenantRemoteOnly || serviceRemoteOnly;
+
+  useEffect(() => {
+    if (!isServiceCategory) return;
+    if (!effectiveServiceRemoteOnly) return;
+
+    const nextPayload = {
+      ...state.optionsPayload,
+      allowRemote: true,
+      remoteOnly: true,
+    };
+    const needsUpdate =
+      state.optionsPayload?.allowRemote !== true ||
+      state.optionsPayload?.remoteOnly !== true;
+    if (needsUpdate) {
+      updateField('optionsPayload', nextPayload);
+    }
+  }, [
+    effectiveServiceRemoteOnly,
+    isServiceCategory,
+    state.optionsPayload,
+    updateField,
+  ]);
 
   // Helper to get category reference options for a field
   const getCategoryReferenceOptions = (belongsToCategory: string) => {
@@ -213,6 +241,13 @@ export default function ResourceForm({
   };
 
   const renderDynamicField = (fieldName: string, fieldDef: FieldDefinition) => {
+    if (
+      !isServiceCategory &&
+      (fieldName === 'allowRemote' || fieldName === 'remoteOnly')
+    ) {
+      return null;
+    }
+
     if (
       resourceFormHideFields.includes(fieldName)
       // && initialData.optionsPayload?.[fieldName]
@@ -322,6 +357,51 @@ export default function ResourceForm({
         );
 
       case 'boolean':
+        if (isServiceCategory && fieldName === 'allowRemote') {
+          const locked = effectiveServiceRemoteOnly;
+          return (
+            <BooleanToggle
+              key={fieldName}
+              label="Allow Remote"
+              value={locked ? true : Boolean(fieldValue)}
+              onChange={(value) =>
+                updateOptionsField(fieldName, locked ? true : Boolean(value))
+              }
+              error={fieldError}
+              disabled={locked}
+              description={
+                locked
+                  ? 'Locked to true because remoteOnly is enabled at tenant or service scope.'
+                  : undefined
+              }
+            />
+          );
+        }
+        if (isServiceCategory && fieldName === 'remoteOnly') {
+          const locked = tenantRemoteOnly;
+          return (
+            <BooleanToggle
+              key={fieldName}
+              label="Remote Only"
+              value={locked ? true : Boolean(fieldValue)}
+              onChange={(value) => {
+                const next = Boolean(value);
+                updateOptionsField(fieldName, locked ? true : next);
+                if (next || locked) {
+                  updateOptionsField('allowRemote', true);
+                }
+              }}
+              error={fieldError}
+              disabled={locked}
+              description={
+                locked
+                  ? 'Locked to true because tenant scheduling is set to remoteOnly.'
+                  : 'When enabled, this service can only be booked remotely.'
+              }
+            />
+          );
+        }
+
         return (
           <BooleanToggle
             key={fieldName}

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

@@ -216,6 +216,7 @@ export default function ResourceTable({
       </div>
       {showBulkIngest && (
         <ResourceBulkIngest
+          exampleCategorySlug={categorySlug}
           fullContentMap={fullContentMap}
           onClose={(saved) => {
             setShowBulkIngest(false);

package/templates/src/components/storykeep/email-builder/Blocks.tsx

@@ -0,0 +1,169 @@
+import { useLayoutEffect, useRef, type ClipboardEvent } from 'react';
+import type { EmailBlock } from '@/utils/api/emailHelpers';
+
+interface BlocksProps {
+  blocks: EmailBlock[];
+  selectedIdx: number | null;
+  onSelect: (index: number) => void;
+  onChange: (index: number, block: EmailBlock) => void;
+}
+
+function TextBlockEditor({
+  idx,
+  block,
+  isSelected,
+  onSelect,
+  onChange,
+  handlePaste,
+}: {
+  idx: number;
+  block: Extract<EmailBlock, { type: 'text' }>;
+  isSelected: boolean;
+  onSelect: (index: number) => void;
+  onChange: (index: number, block: EmailBlock) => void;
+  handlePaste: (
+    e: ClipboardEvent<HTMLTextAreaElement>,
+    idx: number,
+    block: Extract<EmailBlock, { type: 'text' }>
+  ) => void;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [block.content]);
+
+  const containerStyle = {
+    border: isSelected ? '2px solid #0867ec' : '2px solid transparent',
+    padding: '8px',
+    cursor: 'pointer',
+    marginBottom: '8px',
+  };
+
+  return (
+    <div style={containerStyle} onClick={() => onSelect(idx)}>
+      <textarea
+        ref={textareaRef}
+        value={block.content}
+        className="box-border w-full py-1 leading-relaxed"
+        onChange={(e) => onChange(idx, { ...block, content: e.target.value })}
+        onPaste={(e) => handlePaste(e, idx, block)}
+        onFocus={() => onSelect(idx)}
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          minHeight: '2.5rem',
+          fontFamily: 'Helvetica, sans-serif',
+          fontSize: '16px',
+          color: block.color,
+          textAlign: block.align,
+          fontWeight: block.isBold ? 'bold' : 'normal',
+          border: 'none',
+          background: 'transparent',
+          resize: 'none',
+          overflow: 'hidden',
+        }}
+        rows={1}
+      />
+    </div>
+  );
+}
+
+export default function Blocks({
+  blocks,
+  selectedIdx,
+  onSelect,
+  onChange,
+}: BlocksProps) {
+  const handlePaste = (
+    e: ClipboardEvent<HTMLTextAreaElement>,
+    idx: number,
+    block: Extract<EmailBlock, { type: 'text' }>
+  ) => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData('text/plain');
+    const target = e.currentTarget;
+
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+
+    const newContent =
+      block.content.substring(0, start) +
+      pastedText +
+      block.content.substring(end);
+
+    onChange(idx, { ...block, content: newContent });
+
+    window.requestAnimationFrame(() => {
+      target.setSelectionRange(
+        start + pastedText.length,
+        start + pastedText.length
+      );
+    });
+  };
+
+  return (
+    <div className="flex flex-col p-8">
+      {blocks.map((block, idx) => {
+        const isSelected = selectedIdx === idx;
+
+        if (block.type === 'text') {
+          return (
+            <TextBlockEditor
+              key={idx}
+              idx={idx}
+              block={block}
+              isSelected={isSelected}
+              onSelect={onSelect}
+              onChange={onChange}
+              handlePaste={handlePaste}
+            />
+          );
+        }
+
+        const containerStyle = {
+          border: isSelected ? '2px solid #0867ec' : '2px solid transparent',
+          padding: '8px',
+          cursor: 'pointer',
+          marginBottom: '8px',
+        };
+
+        return (
+          <div key={idx} style={containerStyle} onClick={() => onSelect(idx)}>
+            {block.type === 'button' && (
+              <div style={{ textAlign: 'center' }}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    padding: '12px 24px',
+                    backgroundColor: block.bgColor,
+                    color: block.textColor,
+                    borderRadius: '4px',
+                    fontFamily: 'Helvetica, sans-serif',
+                    fontSize: '16px',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {block.label}
+                </span>
+              </div>
+            )}
+
+            {block.type === 'divider' && (
+              <div style={{ width: '100%', padding: '12px 0' }}>
+                <div
+                  style={{
+                    borderTop: `1px solid ${block.color}`,
+                    width: '100%',
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/src/components/storykeep/email-builder/EmailBuilder.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect } from 'react';
+import {
+  emailHelpers,
+  type EmailTemplate,
+  type EmailBlock,
+} from '@/utils/api/emailHelpers';
+import Blocks from './Blocks';
+import PropertyPanel from './PropertyPanel';
+import PreviewModal from './PreviewModal';
+
+interface EmailBuilderProps {
+  category: string;
+  templateName: string;
+  onClose: () => void;
+}
+
+export default function EmailBuilder({
+  category,
+  templateName,
+  onClose,
+}: EmailBuilderProps) {
+  const [template, setTemplate] = useState<EmailTemplate | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await emailHelpers.getTemplate(category, templateName);
+        setTemplate(data);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : 'Failed to load template'
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    load();
+  }, [category, templateName]);
+
+  const handleSave = async () => {
+    if (!template) return;
+    try {
+      setIsSaving(true);
+      await emailHelpers.saveTemplate(category, templateName, template);
+      onClose();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to save');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const updateBlock = (index: number, newBlock: EmailBlock) => {
+    if (!template) return;
+    const newBlocks = [...template.blocks];
+    newBlocks[index] = newBlock;
+    setTemplate({ ...template, blocks: newBlocks });
+  };
+
+  const addBlock = (type: 'text' | 'button' | 'divider') => {
+    if (!template) return;
+    let newBlock: EmailBlock;
+    if (type === 'text') {
+      newBlock = {
+        type: 'text',
+        content: 'New Text',
+        align: 'left',
+        color: '#333333',
+        isBold: false,
+      };
+    } else if (type === 'button') {
+      newBlock = {
+        type: 'button',
+        label: 'Click Here',
+        url: 'https://',
+        bgColor: '#0867ec',
+        textColor: '#ffffff',
+      };
+    } else {
+      newBlock = { type: 'divider', color: '#e5e7eb' };
+    }
+    setTemplate({ ...template, blocks: [...template.blocks, newBlock] });
+    setSelectedIdx(template.blocks.length);
+  };
+
+  const deleteBlock = (index: number) => {
+    if (!template) return;
+    const newBlocks = [...template.blocks];
+    newBlocks.splice(index, 1);
+    setTemplate({ ...template, blocks: newBlocks });
+    setSelectedIdx(null);
+  };
+
+  const moveBlock = (index: number, direction: 'up' | 'down') => {
+    if (!template) return;
+    if (direction === 'up' && index === 0) return;
+    if (direction === 'down' && index === template.blocks.length - 1) return;
+    const newBlocks = [...template.blocks];
+    const targetIdx = direction === 'up' ? index - 1 : index + 1;
+    const temp = newBlocks[index];
+    newBlocks[index] = newBlocks[targetIdx];
+    newBlocks[targetIdx] = temp;
+    setTemplate({ ...template, blocks: newBlocks });
+    setSelectedIdx(targetIdx);
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div className="text-red-600">{error}</div>;
+  if (!template) return null;
+
+  return (
+    <div className="flex max-h-screen min-h-96 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+        <div className="flex min-w-0 flex-1 items-center gap-4">
+          <button
+            onClick={onClose}
+            className="text-sm font-bold text-gray-500 hover:text-gray-900"
+          >
+            &larr; Back
+          </button>
+          <div className="hidden shrink-0 flex-col border-r border-gray-200 pr-4 md:flex">
+            <span className="text-xs font-bold uppercase tracking-wide text-gray-400">
+              Template file
+            </span>
+            <span className="max-w-xs truncate text-sm font-bold text-gray-700">
+              {category}/{templateName}.json
+            </span>
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col">
+            <label className="text-xs font-bold text-gray-500">
+              Subject Line
+            </label>
+            <input
+              type="text"
+              value={template.subject}
+              onChange={(e) =>
+                setTemplate({ ...template, subject: e.target.value })
+              }
+              className="w-full min-w-0 border-0 bg-transparent p-0 text-sm font-bold focus:ring-0"
+              placeholder="Email Subject..."
+            />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setIsPreviewOpen(true)}
+            className="rounded-md bg-gray-100 px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200"
+          >
+            Preview
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-500 disabled:opacity-50"
+          >
+            {isSaving ? 'Saving...' : 'Save Template'}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-gray-50 p-8">
+          <div className="mx-auto min-h-96 w-full max-w-2xl bg-white shadow-sm">
+            <Blocks
+              blocks={template.blocks}
+              selectedIdx={selectedIdx}
+              onSelect={setSelectedIdx}
+              onChange={updateBlock}
+            />
+          </div>
+          <div className="mx-auto mt-8 flex max-w-2xl gap-2">
+            <button
+              onClick={() => addBlock('text')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Text
+            </button>
+            <button
+              onClick={() => addBlock('button')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Button
+            </button>
+            <button
+              onClick={() => addBlock('divider')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Divider
+            </button>
+          </div>
+        </div>
+
+        <div className="w-80 shrink-0 overflow-y-auto border-l border-gray-200 bg-white p-4">
+          {selectedIdx !== null && template.blocks[selectedIdx] ? (
+            <PropertyPanel
+              block={template.blocks[selectedIdx]}
+              onChange={(b) => updateBlock(selectedIdx, b)}
+              onDelete={() => deleteBlock(selectedIdx)}
+              onMoveUp={() => moveBlock(selectedIdx, 'up')}
+              onMoveDown={() => moveBlock(selectedIdx, 'down')}
+            />
+          ) : (
+            <div className="text-sm text-gray-500">
+              Select a block to edit its properties.
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isPreviewOpen && (
+        <PreviewModal
+          template={template}
+          onClose={() => setIsPreviewOpen(false)}
+        />
+      )}
+    </div>
+  );
+}