astro-tractstack 2.3.1 → 2.3.2

package/templates/src/components/form/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, type ChangeEvent } from 'react';
 import { classNames } from '@/utils/helpers';
 
 interface NumberInputProps {
@@ -42,7 +42,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     const errorId = `${inputId}-error`;
     const inputName = customName || inputId;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const newValue = parseFloat(e.target.value);
       if (!isNaN(newValue)) {
         onChange(newValue);

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -212,7 +212,7 @@ export default function APIConfigSection({
 
                   <BooleanToggle
                     label="Webhooks Manually Configured"
-                    description="I have manually created the required webhooks (orders/paid, products/*) in my Shopify Admin."
+                    description="I have manually created the required webhooks in my Shopify Admin."
                     value={state.userSetupWebhooks}
                     onChange={(value) =>
                       updateField('userSetupWebhooks', value)
@@ -300,7 +300,7 @@ export default function APIConfigSection({
                     <ul className="mt-2 list-disc space-y-1 pl-5">
                       <li>
                         <strong>Event:</strong> Select the specific event (e.g.,
-                        Order payment, Product creation).
+                        Order payment, Product update).
                       </li>
                       <li>
                         <strong>Format:</strong> Select JSON (TractStack relies
@@ -358,12 +358,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Order payment
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        orders/paid
-                      </li>
                       <li>
                         <span className="font-bold text-gray-900">
                           Purpose:
@@ -374,24 +368,6 @@ export default function APIConfigSection({
                     </ul>
                   </div>
 
-                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
-                    <h5 className="font-bold">2. Product Creation</h5>
-                    <ul className="mt-2 space-y-1 text-xs">
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Shopify Event Name:
-                        </span>{' '}
-                        Product creation
-                      </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/create
-                      </li>
-                    </ul>
-                  </div>
-
                   <div className="rounded border border-gray-200 bg-gray-50 p-4">
                     <h5 className="font-bold">3. Product Update</h5>
                     <ul className="mt-2 space-y-1 text-xs">
@@ -401,12 +377,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Product update
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/update
-                      </li>
                     </ul>
                   </div>
 
@@ -419,12 +389,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Product deletion
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/delete
-                      </li>
                     </ul>
                   </div>
                 </div>

package/templates/src/components/form/brand/SiteConfigSection.tsx

@@ -48,6 +48,16 @@ export default function SiteConfigSection({
           error={errors.footer}
         />
 
+        <StringInput
+          value={state.adminEmail}
+          onChange={(value) => updateField('adminEmail', value)}
+          label="Admin Email"
+          type="email"
+          placeholder="admin@example.com"
+          required={true}
+          error={errors.adminEmail}
+        />
+
         <StringInput
           value={state.gtag}
           onChange={(value) => updateField('gtag', value)}

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

@@ -26,6 +26,7 @@ import ShopifyDashboard_Services from './shopify/ShopifyDashboard_Services';
 import ShopifyDashboard_Schedule from './shopify/ShopifyDashboard_Schedule';
 import ShopifyDashboard_Search from './shopify/ShopifyDashboard_Search';
 import ShopifyDashboard_Bookings from './shopify/ShopifyDashboard_Bookings';
+import ShopifyDashboard_Emails from './shopify/ShopifyDashboard_Emails';
 
 interface DashboardShopifyProps {
   brandConfig: BrandConfig;
@@ -78,7 +79,8 @@ export default function StoryKeepDashboard_Shopify({
     { id: 'products', name: 'Products' },
     { id: 'services', name: 'Services' },
     { id: 'schedule', name: 'Schedule' },
-    { id: 'search', name: 'Search' },
+    { id: 'search', name: 'Import Products' },
+    { id: 'emails', name: 'Emails' },
   ];
 
   useEffect(() => {
@@ -171,7 +173,7 @@ export default function StoryKeepDashboard_Shopify({
 
   const executePreFlightCheck = (category: string, product: ShopifyProduct) => {
     const hasMode = product.options.some((opt) => opt.name === 'Mode');
-    if (hasMode) {
+    if (category === 'service' || hasMode) {
       startCreateFlow(category, product);
     } else {
       setPendingImport({ category, product });
@@ -465,15 +467,12 @@ export default function StoryKeepDashboard_Shopify({
           </div>
         )}
 
-        {activeTab === 'dashboards' && (
-          <ShopifyDashboard existingResources={resources} />
-        )}
+        {activeTab === 'dashboards' && <ShopifyDashboard />}
 
         {activeTab === 'bookings' && (
           <ShopifyDashboard_Bookings existingResources={resources} />
         )}
 
-        {/* Local Management Tabs */}
         {activeTab === 'products' && (
           <ShopifyDashboard_Products
             resources={resources}
@@ -492,12 +491,10 @@ export default function StoryKeepDashboard_Shopify({
           />
         )}
 
-        {/* Schedule Tab */}
         {activeTab === 'schedule' && (
           <ShopifyDashboard_Schedule brandConfig={brandConfig} />
         )}
 
-        {/* Catalog Discovery Tab */}
         {activeTab === 'search' && (
           <ShopifyDashboard_Search
             linkedResourceMap={linkedResourceMap}
@@ -507,6 +504,8 @@ export default function StoryKeepDashboard_Shopify({
             onEdit={handleEditFromCatalog}
           />
         )}
+
+        {activeTab === 'emails' && <ShopifyDashboard_Emails />}
       </div>
 
       {/* Shared Modals */}

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type KeyboardEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
@@ -125,7 +125,7 @@ export default function BeliefForm({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       handleAddCustomValue();

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, type ChangeEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
@@ -53,7 +53,7 @@ export default function ProductTable({
     };
   }, []);
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     setInputValue(val);
     setIsDebouncing(true);

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/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>
+  );
+}