astro-tractstack 2.3.1 → 2.3.2

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

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

@@ -0,0 +1,136 @@
+import { useState, useEffect } from 'react';
+import { emailHelpers, type EmailTemplate } from '@/utils/api/emailHelpers';
+
+interface PreviewModalProps {
+  template: EmailTemplate;
+  onClose: () => void;
+}
+
+export default function PreviewModal({ template, onClose }: PreviewModalProps) {
+  const [variables, setVariables] = useState<string[]>([]);
+  const [mockData, setMockData] = useState<Record<string, string>>({});
+  const [html, setHtml] = useState<string>('');
+  const [subject, setSubject] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const rawString = JSON.stringify(template);
+    const regex = /\{\{\.([a-zA-Z0-9_]+)\}\}/g;
+    const found = new Set<string>();
+
+    let match;
+    while ((match = regex.exec(rawString)) !== null) {
+      found.add(match[1]);
+    }
+
+    setVariables(Array.from(found));
+
+    const initialData: Record<string, string> = {};
+    found.forEach((v) => {
+      initialData[v] = `[${v}]`;
+    });
+    setMockData(initialData);
+  }, [template]);
+
+  const handleGenerate = async () => {
+    try {
+      setError(null);
+      const res = await emailHelpers.previewTemplate(template, mockData);
+      setHtml(res.html);
+      setSubject(res.subject);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Preview generation failed'
+      );
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 backdrop-blur-sm">
+      <div
+        className="flex h-full w-full max-w-6xl flex-col overflow-hidden rounded-lg bg-white shadow-xl md:flex-row"
+        style={{ maxHeight: '90vh' }}
+      >
+        <div className="w-full border-r border-gray-200 bg-gray-50 p-6 md:w-80">
+          <div className="mb-6 flex items-center justify-between">
+            <h3 className="text-lg font-bold text-gray-900">Mock Data</h3>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-900 md:hidden"
+            >
+              &times;
+            </button>
+          </div>
+
+          {variables.length === 0 ? (
+            <p className="text-sm text-gray-500">
+              No template variables found.
+            </p>
+          ) : (
+            <div className="space-y-4">
+              {variables.map((v) => (
+                <div key={v}>
+                  <label className="mb-1 block text-xs font-bold text-gray-700">
+                    {v}
+                  </label>
+                  <input
+                    type="text"
+                    value={mockData[v] || ''}
+                    onChange={(e) =>
+                      setMockData({ ...mockData, [v]: e.target.value })
+                    }
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-cyan-500 focus:ring-cyan-500"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          <button
+            onClick={handleGenerate}
+            className="mt-8 w-full rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-500"
+          >
+            Generate Preview
+          </button>
+
+          {error && (
+            <p className="mt-4 text-xs font-bold text-red-600">{error}</p>
+          )}
+        </div>
+
+        <div className="flex flex-1 flex-col overflow-hidden bg-white">
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+            <div className="flex flex-col">
+              <span className="text-xs font-bold text-gray-500">Subject</span>
+              <span className="text-sm font-bold text-gray-900">
+                {subject || 'Generate preview to view subject...'}
+              </span>
+            </div>
+            <button
+              onClick={onClose}
+              className="hidden text-gray-400 hover:text-gray-900 md:block"
+            >
+              &times; Close
+            </button>
+          </div>
+
+          <div className="flex-1 bg-gray-100 p-8">
+            <div className="mx-auto h-full w-full max-w-2xl overflow-hidden rounded bg-white shadow-lg">
+              {html ? (
+                <iframe
+                  srcDoc={html}
+                  className="h-full w-full border-0"
+                  title="Email Preview"
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-sm font-bold text-gray-400">
+                  Awaiting preview generation...
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,154 @@
+import type { EmailBlock } from '@/utils/api/emailHelpers';
+
+interface PropertyPanelProps {
+  block: EmailBlock;
+  onChange: (block: EmailBlock) => void;
+  onDelete: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}
+
+export default function PropertyPanel({
+  block,
+  onChange,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: PropertyPanelProps) {
+  return (
+    <div className="space-y-6">
+      <div className="flex min-w-0 items-center justify-between border-b border-gray-200 pb-4">
+        <h3 className="min-w-0 flex-1 truncate text-sm font-bold capitalize text-gray-900">
+          {block.type} Settings
+        </h3>
+        <div className="flex shrink-0 gap-2 text-gray-400">
+          <button onClick={onMoveUp} className="hover:text-gray-900">
+            &uarr;
+          </button>
+          <button onClick={onMoveDown} className="hover:text-gray-900">
+            &darr;
+          </button>
+          <button onClick={onDelete} className="hover:text-red-600">
+            &times;
+          </button>
+        </div>
+      </div>
+
+      {block.type === 'text' && (
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Alignment
+            </label>
+            <select
+              value={block.align}
+              onChange={(e) =>
+                onChange({ ...block, align: e.target.value as any })
+              }
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-cyan-500 focus:ring-cyan-500"
+            >
+              <option value="left">Left</option>
+              <option value="center">Center</option>
+              <option value="right">Right</option>
+            </select>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Text Color
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="color"
+                value={block.color}
+                onChange={(e) => onChange({ ...block, color: e.target.value })}
+                className="h-8 w-8 cursor-pointer rounded"
+              />
+              <input
+                type="text"
+                value={block.color}
+                onChange={(e) => onChange({ ...block, color: e.target.value })}
+                className="flex-1 rounded-md border border-gray-300 px-3 py-1 text-sm"
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={block.isBold}
+              onChange={(e) => onChange({ ...block, isBold: e.target.checked })}
+              className="rounded border-gray-300 text-cyan-600 focus:ring-cyan-500"
+            />
+            <label className="text-sm font-bold text-gray-700">Bold Text</label>
+          </div>
+        </div>
+      )}
+
+      {block.type === 'button' && (
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Label
+            </label>
+            <input
+              type="text"
+              value={block.label}
+              onChange={(e) => onChange({ ...block, label: e.target.value })}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              URL
+            </label>
+            <input
+              type="text"
+              value={block.url}
+              onChange={(e) => onChange({ ...block, url: e.target.value })}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 font-mono text-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Background Color
+            </label>
+            <input
+              type="color"
+              value={block.bgColor}
+              onChange={(e) => onChange({ ...block, bgColor: e.target.value })}
+              className="h-8 w-full cursor-pointer rounded"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Text Color
+            </label>
+            <input
+              type="color"
+              value={block.textColor}
+              onChange={(e) =>
+                onChange({ ...block, textColor: e.target.value })
+              }
+              className="h-8 w-full cursor-pointer rounded"
+            />
+          </div>
+        </div>
+      )}
+
+      {block.type === 'divider' && (
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-xs font-bold text-gray-700">
+              Line Color
+            </label>
+            <input
+              type="color"
+              value={block.color}
+              onChange={(e) => onChange({ ...block, color: e.target.value })}
+              className="h-8 w-full cursor-pointer rounded"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/src/components/storykeep/shopify/ShopifyDashboard.tsx

@@ -1,15 +1,8 @@
 import { useEffect, useState } from 'react';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
 import type { BookingMetricsResponse } from '@/types/tractstack';
-import type { ResourceNode } from '@/types/compositorTypes';
 
-interface ShopifyDashboardProps {
-  existingResources: ResourceNode[];
-}
-
-export default function ShopifyDashboard({
-  existingResources,
-}: ShopifyDashboardProps) {
+export default function ShopifyDashboard({}) {
   const [metrics, setMetrics] = useState<BookingMetricsResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

package/templates/src/components/storykeep/shopify/ShopifyDashboard_Bookings.tsx

@@ -1,4 +1,10 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  type ChangeEvent,
+} from 'react';
 import { Toggle } from '@ark-ui/react/toggle';
 import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon';
 import TableCellsIcon from '@heroicons/react/24/outline/TableCellsIcon';
@@ -68,7 +74,7 @@ export default function ShopifyDashboard_Bookings({
     setCurrentPage(newPage);
   };
 
-  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleStatusChange = (e: ChangeEvent<HTMLSelectElement>) => {
     setStatusFilter(e.target.value);
     setCurrentPage(0);
   };
@@ -247,10 +253,20 @@ export default function ShopifyDashboard_Bookings({
                         )}
                       </div>
                       <div className="mt-3 space-y-1 text-xs text-gray-500">
-                        <div className="font-medium text-gray-900">
-                          {renderCustomerInfo(booking)}
+                        <div className="flex items-center justify-between text-gray-900">
+                          <span>{renderCustomerInfo(booking)}</span>
+                          {booking.shopifyOrderId && (
+                            <a
+                              href={`https://admin.shopify.com/orders/${booking.shopifyOrderId}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-cyan-600 hover:text-cyan-800 hover:underline"
+                            >
+                              Order #{booking.shopifyOrderId}
+                            </a>
+                          )}
                         </div>
-                        <div className="font-medium text-gray-700">
+                        <div className="text-gray-700">
                           {booking.resourceIds
                             .map(
                               (id) => resourceMap.get(id) || 'Unknown Service'
@@ -324,7 +340,17 @@ export default function ShopifyDashboard_Bookings({
                           .join(', ')}
                       </td>
                       <td className="px-6 py-4 text-sm text-gray-500">
-                        {renderCustomerInfo(booking)}
+                        <div>{renderCustomerInfo(booking)}</div>
+                        {booking.shopifyOrderId && (
+                          <a
+                            href={`https://admin.shopify.com/orders/${booking.shopifyOrderId}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="mt-1 inline-block text-xs font-bold text-cyan-600 hover:text-cyan-800 hover:underline"
+                          >
+                            Order #{booking.shopifyOrderId}
+                          </a>
+                        )}
                       </td>
                       <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                         <div>