astro-tractstack 2.3.1 → 2.3.2

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

package/templates/src/stores/shopify.ts

@@ -264,3 +264,19 @@ export function clearCommerceState() {
   transactionTraceId.set('');
   cartState.set(CART_STATES.READY);
 }
+
+export interface CartKeyParams {
+  resourceId: string;
+  variantId?: string;
+  variantIdShipped?: string;
+  variantIdPickup?: string;
+}
+
+export function getCartItemKey(params: CartKeyParams): string {
+  if (params.variantId) {
+    return params.variantId;
+  }
+  return `${params.resourceId}_${params.variantIdShipped || 'null'}_${
+    params.variantIdPickup || 'null'
+  }`;
+}

package/templates/src/types/formTypes.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 // Base props interface for all atomic form components
 export interface BaseFormComponentProps<T> {
   value: T;
@@ -71,7 +73,7 @@ export interface NumberInputProps extends BaseFormComponentProps<number> {
 export interface FormSectionProps {
   title: string;
   description?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   collapsible?: boolean;
   defaultExpanded?: boolean;
 }
@@ -216,7 +218,7 @@ export interface NumberInputProps extends BaseFormComponentProps<number> {
 export interface FormSectionProps {
   title: string;
   description?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   collapsible?: boolean;
   defaultExpanded?: boolean;
 }

package/templates/src/types/tractstack.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties, ReactNode } from 'react';
 import type { StoragePane } from './compositorTypes';
 
 export type DesignLibraryEntry = {
@@ -13,7 +14,7 @@ export type DesignLibraryConfig = DesignLibraryEntry[];
 
 export interface BaseComponentProps {
   class?: string;
-  style?: React.CSSProperties | string;
+  style?: CSSProperties | string;
   id?: string;
 }
 
@@ -74,7 +75,7 @@ export interface FragmentProps
   eager?: boolean;
 
   /** Fallback content while loading */
-  fallback?: React.ReactNode;
+  fallback?: ReactNode;
 }
 
 // Utility type for extracting props from Astro components
@@ -203,6 +204,7 @@ export interface BrandConfig {
   HAS_RESEND?: boolean;
   HAS_HYDRATION_TOKEN?: boolean;
   SCHEDULING?: SchedulingConfig;
+  ADMIN_EMAIL?: string;
 }
 
 export interface BrandConfigState {
@@ -241,6 +243,7 @@ export interface BrandConfigState {
   hasResend: boolean;
   hasHydrationToken: boolean;
   scheduling: SchedulingConfig;
+  adminEmail: string;
 }
 
 // Form validation types

package/templates/src/utils/api/brandConfig.ts

@@ -66,6 +66,7 @@ export async function getBrandConfig(tenantId: string): Promise<BrandConfig> {
           KNOWN_RESOURCES: {},
           DESIGN_LIBRARY: [],
           HAS_AAI: false,
+          ADMIN_EMAIL: '',
         } as BrandConfig;
       }
       throw new Error(response.error || 'Failed to get brand configuration');
@@ -100,6 +101,7 @@ export async function getBrandConfig(tenantId: string): Promise<BrandConfig> {
         KNOWN_RESOURCES: {},
         DESIGN_LIBRARY: [],
         HAS_AAI: false,
+        ADMIN_EMAIL: '',
       } as BrandConfig;
     }
     throw error;

package/templates/src/utils/api/brandHelpers.ts

@@ -44,6 +44,7 @@ export function convertToLocalState(
     showShopifyHelper: brandConfig.SHOW_SHOPIFY_HELPER ?? false,
     hasResend: brandConfig.HAS_RESEND ?? false,
     hasHydrationToken: brandConfig.HAS_HYDRATION_TOKEN ?? false,
+    adminEmail: brandConfig.ADMIN_EMAIL ?? '',
     scheduling: brandConfig.SCHEDULING ?? {
       timezone: 'UTC',
       bufferGapsMinutes: 15,
@@ -86,6 +87,7 @@ export function convertToBackendFormat(
     SHOW_SHOPIFY_HELPER: localState.showShopifyHelper,
     HAS_RESEND: localState.hasResend,
     SCHEDULING: localState.scheduling,
+    ADMIN_EMAIL: localState.adminEmail,
 
     // ALWAYS send asset paths (current state)
     LOGO: localState.logo,
@@ -124,6 +126,12 @@ export function validateBrandConfig(state: BrandConfigState): FieldErrors {
     errors.footer = 'Site footer is required';
   }
 
+  if (!state.adminEmail?.trim()) {
+    errors.adminEmail = 'Admin Email is required';
+  } else if (!isValidEmail(state.adminEmail)) {
+    errors.adminEmail = 'Please enter a valid email address';
+  }
+
   // Validate brand colors (must have exactly 8)
   if (!state.brandColours || state.brandColours.length !== 8) {
     errors.brandColours = 'Must have exactly 8 brand colors';
@@ -172,3 +180,11 @@ function isValidHexColor(color: string): boolean {
   const hex = color.startsWith('#') ? color.slice(1) : color;
   return /^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex);
 }
+
+/**
+ * Helper function to validate email addresses
+ */
+function isValidEmail(email: string): boolean {
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return re.test(email);
+}

package/templates/src/utils/api/emailHelpers.ts

@@ -0,0 +1,105 @@
+import { TractStackAPI } from '../api';
+
+export interface TextBlock {
+  type: 'text';
+  content: string;
+  align: 'left' | 'center' | 'right';
+  color: string;
+  isBold: boolean;
+}
+
+export interface ButtonBlock {
+  type: 'button';
+  label: string;
+  url: string;
+  bgColor: string;
+  textColor: string;
+}
+
+export interface DividerBlock {
+  type: 'divider';
+  color: string;
+}
+
+export type EmailBlock = TextBlock | ButtonBlock | DividerBlock;
+
+export interface EmailTemplate {
+  subject: string;
+  blocks: EmailBlock[];
+}
+
+export interface PreviewResponse {
+  subject: string;
+  html: string;
+}
+
+/** One row from GET /api/v1/emails/templates (merged manifests). */
+export interface EmailTemplateListEntry {
+  name: string;
+  adminTitle: string;
+}
+
+const getApi = () => {
+  return new TractStackAPI(
+    typeof window !== 'undefined'
+      ? (window as any).TRACTSTACK_CONFIG?.tenantId || 'default'
+      : 'default'
+  );
+};
+
+export const emailHelpers = {
+  getTemplates: async (): Promise<Record<string, EmailTemplateListEntry[]>> => {
+    const api = getApi();
+    const response = await api.get<Record<string, EmailTemplateListEntry[]>>(
+      '/api/v1/emails/templates'
+    );
+    if (!response.success || !response.data) {
+      throw new Error(response.error || 'Failed to fetch templates');
+    }
+    return response.data;
+  },
+
+  getTemplate: async (
+    category: string,
+    template: string
+  ): Promise<EmailTemplate> => {
+    const api = getApi();
+    const response = await api.get<EmailTemplate>(
+      `/api/v1/emails/templates/${category}/${template}`
+    );
+    if (!response.success || !response.data) {
+      throw new Error(response.error || 'Failed to fetch template');
+    }
+    return response.data;
+  },
+
+  saveTemplate: async (
+    category: string,
+    template: string,
+    data: EmailTemplate
+  ): Promise<void> => {
+    const api = getApi();
+    const response = await api.post(
+      `/api/v1/emails/templates/${category}/${template}`,
+      data
+    );
+    if (!response.success) {
+      throw new Error(response.error || 'Failed to save template');
+    }
+  },
+
+  previewTemplate: async (
+    template: EmailTemplate,
+    mockData: Record<string, any>
+  ): Promise<PreviewResponse> => {
+    const api = getApi();
+    const response = await api.post<PreviewResponse>('/api/v1/emails/preview', {
+      template,
+      data: mockData,
+    });
+    if (!response.success || !response.data) {
+      throw new Error(response.error || 'Failed to generate preview');
+    }
+    return response.data;
+  },
+};

package/templates/src/utils/tenantResolver.ts

@@ -1,4 +1,4 @@
-const VERBOSE = false;
+const VERBOSE = true;
 
 interface TenantResolution {
   id: string;

package/utils/inject-files.ts

@@ -1258,6 +1258,36 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/storykeep/shopify/ShopifyDashboard_Services.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx'
+      ),
+      dest: 'src/components/storykeep/shopify/ShopifyDashboard_Emails.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/email-builder/EmailBuilder.tsx'
+      ),
+      dest: 'src/components/storykeep/email-builder/EmailBuilder.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/email-builder/Blocks.tsx'
+      ),
+      dest: 'src/components/storykeep/email-builder/Blocks.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/email-builder/PropertyPanel.tsx'
+      ),
+      dest: 'src/components/storykeep/email-builder/PropertyPanel.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/email-builder/PreviewModal.tsx'
+      ),
+      dest: 'src/components/storykeep/email-builder/PreviewModal.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/storykeep/shopify/ShopifyDashboard_Search.tsx'
@@ -2267,6 +2297,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/utils/api/setupHelpers.ts'),
       dest: 'src/utils/api/setupHelpers.ts',
     },
+    {
+      src: resolve('../templates/src/utils/api/emailHelpers.ts'),
+      dest: 'src/utils/api/emailHelpers.ts',
+    },
     {
       src: resolve(
         '../templates/src/components/storykeep/widgets/HydrateWizard.tsx'
@@ -2465,7 +2499,6 @@ function createPlaceholder(filePath: string): string {
 
   if (filePath.endsWith('.tsx')) {
     return `// TractStack placeholder component
-import React from 'react';
 export default function Placeholder() {
   return <div>TractStack placeholder: ${filePath}</div>;
 }`;