astro-tractstack 2.3.1 → 2.3.3

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);
   };
@@ -112,6 +118,26 @@ export default function ShopifyDashboard_Bookings({
     }
   };
 
+  const getModeColor = (mode?: string) => {
+    if (mode === 'REMOTE') return 'bg-violet-100 text-violet-800';
+    return 'bg-slate-100 text-slate-700';
+  };
+
+  const getSyncColor = (syncStatus?: string) => {
+    switch (syncStatus) {
+      case 'SYNCED':
+      case 'DELETE_SYNCED':
+        return 'bg-green-100 text-green-800';
+      case 'FAILED':
+        return 'bg-red-100 text-red-800';
+      case 'PENDING':
+      case 'DELETE_PENDING':
+        return 'bg-amber-100 text-amber-800';
+      default:
+        return 'bg-gray-100 text-gray-700';
+    }
+  };
+
   const todayStr = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`;
 
   const renderCustomerInfo = (booking: BookingEntity) => {
@@ -207,15 +233,31 @@ export default function ShopifyDashboard_Bookings({
                   dayBookings.map((booking) => (
                     <div
                       key={booking.id}
-                      className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-cyan-200"
+                      className={`rounded-lg border p-4 shadow-sm transition-colors hover:border-cyan-200 ${
+                        booking.appointmentMode === 'REMOTE'
+                          ? 'border-violet-200 bg-violet-50'
+                          : 'border-gray-200 bg-white'
+                      }`}
                     >
                       <div className="flex items-start justify-between">
                         <div className="space-y-1">
-                          <span
-                            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getStatusColor(booking.status)}`}
-                          >
-                            {booking.status}
-                          </span>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getStatusColor(booking.status)}`}
+                            >
+                              {booking.status}
+                            </span>
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getModeColor(booking.appointmentMode)}`}
+                            >
+                              {booking.appointmentMode || 'IN_PERSON'}
+                            </span>
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getSyncColor(booking.googleSyncStatus)}`}
+                            >
+                              {booking.googleSyncStatus || 'NOT_SYNCED'}
+                            </span>
+                          </div>
                           <div className="text-sm font-bold text-gray-900">
                             {new Date(booking.startTime).toLocaleTimeString(
                               'en-US',
@@ -247,16 +289,41 @@ 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'
                             )
                             .join(', ')}
                         </div>
+                        {booking.googleMeetURL && (
+                          <a
+                            className="text-cyan-700 underline"
+                            href={booking.googleMeetURL}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            Open Meet Link
+                          </a>
+                        )}
+                        {booking.googleLastError && (
+                          <div className="text-xs font-bold text-red-700">
+                            Google sync error: {booking.googleLastError}
+                          </div>
+                        )}
                       </div>
                     </div>
                   ))
@@ -279,6 +346,9 @@ export default function ShopifyDashboard_Bookings({
                   <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                     Status
                   </th>
+                  <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                    Mode / Sync
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                     Service(s)
                   </th>
@@ -296,13 +366,13 @@ export default function ShopifyDashboard_Bookings({
               <tbody className="divide-y divide-gray-200 bg-white">
                 {isLoading ? (
                   <tr>
-                    <td colSpan={5} className="py-12 text-center">
+                    <td colSpan={6} className="py-12 text-center">
                       <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-cyan-600" />
                     </td>
                   </tr>
                 ) : bookings.length === 0 ? (
                   <tr>
-                    <td colSpan={5} className="py-12 text-center text-gray-500">
+                    <td colSpan={6} className="py-12 text-center text-gray-500">
                       No bookings found.
                     </td>
                   </tr>
@@ -318,13 +388,47 @@ export default function ShopifyDashboard_Bookings({
                           {booking.status}
                         </span>
                       </td>
+                      <td className="whitespace-nowrap px-6 py-4 text-xs">
+                        <div className="flex flex-col gap-1">
+                          <span
+                            className={`inline-flex w-fit items-center rounded-full px-2 py-0.5 font-bold ${getModeColor(booking.appointmentMode)}`}
+                          >
+                            {booking.appointmentMode || 'IN_PERSON'}
+                          </span>
+                          <span
+                            className={`inline-flex w-fit items-center rounded-full px-2 py-0.5 font-bold ${getSyncColor(booking.googleSyncStatus)}`}
+                          >
+                            {booking.googleSyncStatus || 'NOT_SYNCED'}
+                          </span>
+                          {booking.googleMeetURL && (
+                            <a
+                              className="text-cyan-700 underline"
+                              href={booking.googleMeetURL}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              Meet link
+                            </a>
+                          )}
+                        </div>
+                      </td>
                       <td className="px-6 py-4 text-sm text-gray-900">
                         {booking.resourceIds
                           .map((id) => resourceMap.get(id) || 'Unknown Service')
                           .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>

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

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react';
+import {
+  emailHelpers,
+  type EmailTemplateListEntry,
+} from '@/utils/api/emailHelpers';
+import EmailBuilder from '../email-builder/EmailBuilder';
+
+export default function ShopifyDashboard_Emails() {
+  const [templates, setTemplates] = useState<
+    Record<string, EmailTemplateListEntry[]>
+  >({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editingTemplate, setEditingTemplate] = useState<{
+    category: string;
+    name: string;
+  } | null>(null);
+
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  const loadTemplates = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await emailHelpers.getTemplates();
+      setTemplates(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load templates');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (editingTemplate) {
+    return (
+      <EmailBuilder
+        category={editingTemplate.category}
+        templateName={editingTemplate.name}
+        onClose={() => setEditingTemplate(null)}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-48 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-cyan-600" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-red-50 p-4 text-sm text-red-700">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {Object.entries(templates).map(([category, entries]) => (
+        <div
+          key={category}
+          className="rounded-lg border border-gray-200 bg-white"
+        >
+          <div className="border-b border-gray-200 bg-gray-50 px-4 py-3">
+            <h3 className="text-sm font-bold capitalize text-gray-900">
+              {category}
+            </h3>
+          </div>
+          <ul className="divide-y divide-gray-200">
+            {entries.map((entry) => (
+              <li
+                key={entry.name}
+                className="flex items-center justify-between px-4 py-4 md:px-6"
+              >
+                <div className="flex min-w-0 flex-col">
+                  <p className="truncate text-sm font-bold text-gray-900">
+                    {entry.adminTitle}
+                  </p>
+                  <p className="truncate text-xs text-gray-500">
+                    {entry.name}.json
+                  </p>
+                </div>
+                <div className="ml-4 flex flex-shrink-0">
+                  <button
+                    onClick={() =>
+                      setEditingTemplate({ category, name: entry.name })
+                    }
+                    className="rounded-md bg-white font-bold text-cyan-600 hover:text-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/src/constants.ts

@@ -7,6 +7,8 @@ export const MAX_ANALYTICS_HOURS = 672;
 
 export const reservedSlugs = [
   `api`,
+  `privacy`,
+  `terms`,
   `collections`,
   `create`,
   `edit`,

package/templates/src/layouts/Layout.astro

@@ -50,15 +50,18 @@ const {
 
 const isInitialized = !freshInstallStore.get().needsSetup;
 const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-// Resolve tenant explicitly "Above the Fences" to guarantee the client gets the truth
-const resolution = await resolveTenantId(Astro.request);
-const tenantId = resolution.id;
+const isMultiTenant = import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true';
+const tenantId = isMultiTenant
+  ? (await resolveTenantId(Astro.request)).id
+  : import.meta.env.PUBLIC_TENANTID || 'default';
+
 if (!Astro.locals.tenant) {
   Astro.locals.tenant = {
     id: tenantId,
     domain: Astro.url.hostname,
-    isMultiTenant: true,
-    isLocalhost: false,
+    isMultiTenant: isMultiTenant,
+    isLocalhost:
+      Astro.url.hostname === 'localhost' || Astro.url.hostname === '127.0.0.1',
   };
 }
 const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));