astro-tractstack 2.3.0 → 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/components/storykeep/shopify/ShopifyDashboard_Products.tsx

@@ -0,0 +1,46 @@
+import ResourceTable from '@/components/storykeep/controls/content/ResourceTable';
+import type { ResourceNode } from '@/types/compositorTypes';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+interface ShopifyDashboardProductsProps {
+  resources: ResourceNode[];
+  onEdit: (resourceId: string) => void;
+  onCreate: () => void;
+  onRefresh: () => void;
+}
+
+export default function ShopifyDashboard_Products({
+  resources,
+  onEdit,
+  onCreate,
+  onRefresh,
+}: ShopifyDashboardProductsProps) {
+  /**
+   * Convert local ResourceNode[] into FullContentMapItem[] to satisfy the
+   * ResourceTable interface requirements.
+   */
+  const resourceItems = resources.map((r) => ({
+    ...r,
+    type: 'Resource' as const,
+  })) as FullContentMapItem[];
+
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-gray-200 pb-4">
+        <h2 className="text-2xl font-bold text-gray-900">Imported Products</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          Manage the Shopify products you have already imported into StoryKeep.
+          Edit their metadata, SEO, and layout parameters.
+        </p>
+      </div>
+
+      <ResourceTable
+        categorySlug="product"
+        fullContentMap={resourceItems}
+        onEdit={onEdit}
+        onCreate={onCreate}
+        onRefresh={onRefresh}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useFormState } from '@/hooks/useFormState';
+import {
+  convertToLocalState,
+  convertToBackendFormat,
+  validateBrandConfig,
+} from '@/utils/api/brandHelpers';
+import { saveBrandConfigWithStateUpdate } from '@/utils/api/brandConfig';
+import SchedulingSection from '@/components/form/shopify/SchedulingSection';
+import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
+import type { BrandConfig, BrandConfigState } from '@/types/tractstack';
+
+interface ShopifyDashboardScheduleProps {
+  brandConfig: BrandConfig;
+  onBrandConfigUpdate?: (config: BrandConfig) => void;
+}
+
+export default function ShopifyDashboard_Schedule({
+  brandConfig,
+  onBrandConfigUpdate,
+}: ShopifyDashboardScheduleProps) {
+  const [currentBrandConfig, setCurrentBrandConfig] = useState(brandConfig);
+  const initialState: BrandConfigState =
+    convertToLocalState(currentBrandConfig);
+
+  const formState = useFormState({
+    initialData: initialState,
+    validator: validateBrandConfig,
+    onSave: async (data) => {
+      try {
+        const updatedState = await saveBrandConfigWithStateUpdate(
+          window.TRACTSTACK_CONFIG?.tenantId || 'default',
+          data
+        );
+
+        // Preserve existing paths when updating parent state
+        const updatedBrandConfig = {
+          ...currentBrandConfig,
+          ...convertToBackendFormat(updatedState),
+        };
+
+        // Update local state
+        setCurrentBrandConfig(updatedBrandConfig);
+
+        if (onBrandConfigUpdate) {
+          onBrandConfigUpdate(updatedBrandConfig);
+        }
+      } catch (error) {
+        console.error('Save failed:', error);
+        throw error;
+      }
+    },
+    unsavedChanges: {
+      enableBrowserWarning: true,
+      browserWarningMessage: 'Your scheduling changes will be lost!',
+    },
+  });
+
+  return (
+    <div className="space-y-8">
+      <div className="border-b border-gray-200 pb-4">
+        <h2 className="text-2xl font-bold text-gray-900">Booking Schedule</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          Manage your store timezone, business hours, and blackout dates.
+        </p>
+      </div>
+
+      <SchedulingSection formState={formState} />
+
+      <UnsavedChangesBar
+        formState={formState}
+        message="You have unsaved scheduling changes"
+        saveLabel="Save Schedule"
+        cancelLabel="Discard Changes"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { useStore } from '@nanostores/react';
+import {
+  shopifyData,
+  shopifyStatus,
+  fetchShopifyProducts,
+  type ShopifyProduct,
+} from '@/stores/shopify';
+import ProductTable from '@/components/storykeep/controls/content/ProductTable';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface ShopifyDashboardSearchProps {
+  linkedResourceMap: Map<string, ResourceNode>;
+  onSelectProduct: (product: ShopifyProduct) => void;
+  onLink: (product: ShopifyProduct) => void;
+  onUnlink: (resourceId: string) => void;
+  onEdit: (product: ShopifyProduct, resource: ResourceNode) => void;
+}
+
+export default function ShopifyDashboard_Search({
+  linkedResourceMap,
+  onSelectProduct,
+  onLink,
+  onUnlink,
+  onEdit,
+}: ShopifyDashboardSearchProps) {
+  const data = useStore(shopifyData);
+  const status = useStore(shopifyStatus);
+
+  const handleRefresh = () => {
+    fetchShopifyProducts();
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-gray-200 pb-4">
+        <h2 className="text-2xl font-bold text-gray-900">Catalog Search</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          Search your live Shopify store to import products and services into
+          your StoryKeep.
+        </p>
+      </div>
+
+      <ProductTable
+        products={data.products}
+        linkedResourceMap={linkedResourceMap}
+        onRefresh={handleRefresh}
+        isRefreshing={status.isLoading}
+        onSelectProduct={onSelectProduct}
+        onLink={onLink}
+        onUnlink={onUnlink}
+        onEdit={onEdit}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import ResourceTable from '@/components/storykeep/controls/content/ResourceTable';
+import type { ResourceNode } from '@/types/compositorTypes';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+interface ShopifyDashboardServicesProps {
+  resources: ResourceNode[];
+  onEdit: (resourceId: string) => void;
+  onCreate: () => void;
+  onRefresh: () => void;
+}
+
+export default function ShopifyDashboard_Services({
+  resources,
+  onEdit,
+  onCreate,
+  onRefresh,
+}: ShopifyDashboardServicesProps) {
+  /**
+   * Convert local ResourceNode[] into FullContentMapItem[] to satisfy the
+   * ResourceTable interface requirements.
+   */
+  const resourceItems = resources.map((r) => ({
+    ...r,
+    type: 'Resource' as const,
+  })) as FullContentMapItem[];
+
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-gray-200 pb-4">
+        <h2 className="text-2xl font-bold text-gray-900">Imported Services</h2>
+        <p className="mt-2 text-sm text-gray-600">
+          Manage the services and bookable appointments you have already
+          imported into StoryKeep. Edit metadata, scheduling requirements, and
+          SEO.
+        </p>
+      </div>
+
+      <ResourceTable
+        categorySlug="service"
+        fullContentMap={resourceItems}
+        onEdit={onEdit}
+        onCreate={onCreate}
+        onRefresh={onRefresh}
+      />
+    </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/pages/api/auth/lookup-lead.ts

@@ -0,0 +1,72 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request, locals }) => {
+  const GO_BACKEND =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const body = await request.text();
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    const tenantId =
+      locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+    try {
+      const response = await fetch(`${GO_BACKEND}/api/v1/auth/lookup-lead`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': tenantId,
+        },
+        body: body,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      const data = await response.json();
+
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Lookup-lead request timeout');
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Request timeout - please try again',
+          }),
+          {
+            status: 408,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Lookup-lead API proxy error:', error);
+
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Failed to connect to backend service',
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+};

package/templates/src/pages/api/booking/availability.ts

@@ -0,0 +1,72 @@
+import type { APIRoute } from '@/types/astro';
+
+export const GET: APIRoute = async ({ request, locals }) => {
+  const GO_BACKEND =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const url = new URL(request.url);
+    const searchParams = url.searchParams;
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    const tenantId =
+      locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+    try {
+      const response = await fetch(
+        `${GO_BACKEND}/api/v1/bookings/availability?${searchParams.toString()}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Tenant-ID': tenantId,
+            ...(request.headers.get('Authorization') && {
+              Authorization: request.headers.get('Authorization')!,
+            }),
+          },
+          signal: controller.signal,
+        }
+      );
+
+      clearTimeout(timeoutId);
+
+      const data = await response.json();
+
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Availability lookup timeout',
+          }),
+          {
+            status: 408,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Availability API proxy error:', error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Failed to connect to backend service',
+      }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/api/booking/cancel.ts

@@ -0,0 +1,73 @@
+import type { APIRoute } from '@/types/astro';
+import { getAdminToken } from '@/utils/auth';
+
+export const POST: APIRoute = async (context) => {
+  const { request, locals } = context;
+  const GO_BACKEND =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const body = await request.json();
+    const { traceId } = body;
+
+    if (!traceId) {
+      return new Response(
+        JSON.stringify({ success: false, error: 'traceId is required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    const tenantId =
+      locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+    const token = getAdminToken(context);
+
+    try {
+      const response = await fetch(
+        `${GO_BACKEND}/api/v1/bookings/${traceId}/cancel`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Tenant-ID': tenantId,
+            ...(token && { Authorization: `Bearer ${token}` }),
+            ...(request.headers.get('Authorization') && {
+              Authorization: request.headers.get('Authorization')!,
+            }),
+          },
+          signal: controller.signal,
+        }
+      );
+
+      clearTimeout(timeoutId);
+      const data = await response.json();
+
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Booking cancellation timeout',
+          }),
+          { status: 408, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Booking cancellation API proxy error:', error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Failed to connect to backend service',
+      }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+};

package/templates/src/pages/api/booking/confirm.ts

@@ -0,0 +1,82 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request, locals }) => {
+  const GO_BACKEND =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    const { traceId } = await request.json();
+
+    if (!traceId) {
+      return new Response(JSON.stringify({ error: 'traceId is required' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    const tenantId =
+      locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+    try {
+      const response = await fetch(`${GO_BACKEND}/api/v1/bookings/confirm`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': tenantId,
+          ...(request.headers.get('Authorization') && {
+            Authorization: request.headers.get('Authorization')!,
+          }),
+        },
+        body: JSON.stringify({ traceId }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      const data = await response.json();
+
+      return new Response(JSON.stringify(data), {
+        status: response.status,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error('Confirm-booking request timeout');
+        return new Response(
+          JSON.stringify({
+            success: false,
+            error: 'Request timeout - please try again',
+          }),
+          {
+            status: 408,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error) {
+    console.error('Confirm-booking API proxy error:', error);
+
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Failed to connect to backend service',
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+};