astro-tractstack 2.3.3 → 2.3.4

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import { convertToLocalState } from '@/utils/api/resourceHelpers';
 import { saveResourceWithStateUpdate } from '@/utils/api/resourceConfig';
@@ -30,6 +30,7 @@ interface ResourceFormProps {
   tenantRemoteOnly?: boolean;
   isCreate?: boolean;
   onClose?: (saved: boolean) => void;
+  onOpenLinkedProduct?: (resourceId: string) => void;
 }
 
 export default function ResourceForm({
@@ -40,73 +41,78 @@ export default function ResourceForm({
   tenantRemoteOnly = false,
   isCreate = false,
   onClose,
+  onOpenLinkedProduct,
 }: ResourceFormProps) {
-  const initialData = resourceData
-    ? convertToLocalState(resourceData)
-    : {
-        id: '',
-        title: '',
-        slug: '',
-        categorySlug,
-        oneliner: '',
-        optionsPayload: {},
-        actionLisp: '',
-      };
-
-  // 1. Initialize optionsPayload with default values for all schema fields
-  // (Only runs if NO existing data is provided)
-  if (!resourceData) {
-    const defaultOptionsPayload: Record<string, any> = {};
-
-    Object.entries(categorySchema).forEach(([fieldName, fieldDef]) => {
-      switch (fieldDef.type) {
-        case 'number':
-          defaultOptionsPayload[fieldName] =
-            fieldDef.defaultValue ?? fieldDef.minNumber ?? 0;
-          break;
-        case 'boolean':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? false;
-          break;
-        case 'string':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
-          break;
-        case 'multi':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? [];
-          break;
-        case 'date':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? 0;
-          break;
-        case 'image':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
-          break;
-        default:
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
-      }
-    });
+  const initialData = useMemo(() => {
+    const nextInitialData = resourceData
+      ? convertToLocalState(resourceData)
+      : {
+          id: '',
+          title: '',
+          slug: '',
+          categorySlug,
+          oneliner: '',
+          optionsPayload: {},
+          actionLisp: '',
+        };
+
+    // 1. Initialize optionsPayload with default values for all schema fields
+    // (Only runs if NO existing data is provided)
+    if (!resourceData) {
+      const defaultOptionsPayload: Record<string, any> = {};
+
+      Object.entries(categorySchema).forEach(([fieldName, fieldDef]) => {
+        switch (fieldDef.type) {
+          case 'number':
+            defaultOptionsPayload[fieldName] =
+              fieldDef.defaultValue ?? fieldDef.minNumber ?? 0;
+            break;
+          case 'boolean':
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? false;
+            break;
+          case 'string':
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
+            break;
+          case 'multi':
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? [];
+            break;
+          case 'date':
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? 0;
+            break;
+          case 'image':
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
+            break;
+          default:
+            defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? '';
+        }
+      });
 
-    initialData.optionsPayload = defaultOptionsPayload;
-  }
-
-  // 2. Pre-process JSON fields for display (Pretty Print)
-  // This runs for both new and existing records to ensure readability
-  if (initialData.optionsPayload) {
-    resourceJsonifyFields.forEach((field) => {
-      const val = initialData.optionsPayload[field];
-      if (val && typeof val === 'string') {
-        try {
-          // Parse and re-stringify with indentation
-          initialData.optionsPayload[field] = JSON.stringify(
-            JSON.parse(val),
-            null,
-            2
-          );
-        } catch (e) {
-          // If it's not valid JSON, leave it as is
-          console.warn(`Failed to pretty-print field ${field}`, e);
+      nextInitialData.optionsPayload = defaultOptionsPayload;
+    }
+
+    // 2. Pre-process JSON fields for display (Pretty Print)
+    // This runs for both new and existing records to ensure readability
+    if (nextInitialData.optionsPayload) {
+      resourceJsonifyFields.forEach((field) => {
+        const val = nextInitialData.optionsPayload[field];
+        if (val && typeof val === 'string') {
+          try {
+            // Parse and re-stringify with indentation
+            nextInitialData.optionsPayload[field] = JSON.stringify(
+              JSON.parse(val),
+              null,
+              2
+            );
+          } catch (e) {
+            // If it's not valid JSON, leave it as is
+            console.warn(`Failed to pretty-print field ${field}`, e);
+          }
         }
-      }
-    });
-  }
+      });
+    }
+
+    return nextInitialData;
+  }, [resourceData, categorySlug, categorySchema]);
 
   const validator = (state: ResourceState): FieldErrors => {
     const errors: FieldErrors = {};
@@ -186,10 +192,43 @@ export default function ResourceForm({
     },
   });
 
-  const { state, updateField, errors } = formState;
+  const { state, updateField, errors, resetToState } = formState;
   const isServiceCategory = categorySlug === 'service';
+  const isProductCategory = categorySlug === 'product';
   const serviceRemoteOnly = Boolean(state.optionsPayload?.remoteOnly);
   const effectiveServiceRemoteOnly = tenantRemoteOnly || serviceRemoteOnly;
+  const serviceGid =
+    isServiceCategory && typeof state.optionsPayload?.gid === 'string'
+      ? state.optionsPayload.gid
+      : '';
+  const linkedCanonicalProduct =
+    isServiceCategory && serviceGid
+      ? fullContentMap.find(
+          (item: any) =>
+            item.categorySlug === 'product' &&
+            typeof item.optionsPayload?.gid === 'string' &&
+            item.optionsPayload.gid === serviceGid
+        )
+      : undefined;
+  const productGid =
+    isProductCategory && typeof state.optionsPayload?.gid === 'string'
+      ? state.optionsPayload.gid
+      : '';
+  const linkedServiceCount =
+    isProductCategory && productGid
+      ? fullContentMap.filter(
+          (item: any) =>
+            item.categorySlug === 'service' &&
+            typeof item.optionsPayload?.gid === 'string' &&
+            item.optionsPayload.gid === productGid
+        ).length
+      : 0;
+  const formIdentity = `${categorySlug}:${resourceData?.id || 'create'}`;
+
+  useEffect(() => {
+    // Keep the mounted form in sync when switching edit targets inside the same modal.
+    resetToState(initialData as ResourceState);
+  }, [formIdentity, initialData, resetToState]);
 
   useEffect(() => {
     if (!isServiceCategory) return;
@@ -241,6 +280,39 @@ export default function ResourceForm({
   };
 
   const renderDynamicField = (fieldName: string, fieldDef: FieldDefinition) => {
+    if (fieldName === 'gid' && !isServiceCategory) {
+      return null;
+    }
+
+    if (isServiceCategory && fieldName === 'gid') {
+      return (
+        <div key={fieldName} className="space-y-2">
+          <label
+            htmlFor="field-gid-readonly"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Gid
+          </label>
+          <input
+            id="field-gid-readonly"
+            type="text"
+            value={serviceGid}
+            readOnly
+            className="block w-full cursor-default rounded-md border-0 bg-gray-50 px-3 py-1.5 text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 md:text-sm md:leading-6"
+          />
+          {linkedCanonicalProduct && onOpenLinkedProduct && (
+            <button
+              type="button"
+              onClick={() => onOpenLinkedProduct(linkedCanonicalProduct.id)}
+              className="text-xs font-bold text-cyan-700 underline hover:text-cyan-900"
+            >
+              Open linked product
+            </button>
+          )}
+        </div>
+      );
+    }
+
     if (
       !isServiceCategory &&
       (fieldName === 'allowRemote' || fieldName === 'remoteOnly')
@@ -402,6 +474,29 @@ export default function ResourceForm({
           );
         }
 
+        if (isProductCategory && fieldName === 'sharedServiceFee') {
+          const isLocked = Boolean(fieldValue) && linkedServiceCount > 0;
+          return (
+            <BooleanToggle
+              key={fieldName}
+              label="SharedServiceFee"
+              value={
+                fieldValue !== undefined && fieldValue !== null
+                  ? fieldValue
+                  : (fieldDef.defaultValue ?? false)
+              }
+              onChange={(value) => updateOptionsField(fieldName, value)}
+              error={fieldError}
+              disabled={isLocked}
+              description={
+                isLocked
+                  ? 'Locked because this product gid is linked by one or more services.'
+                  : undefined
+              }
+            />
+          );
+        }
+
         return (
           <BooleanToggle
             key={fieldName}

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

@@ -1,9 +1,17 @@
 import { useEffect, useState } from 'react';
 import { bookingHelpers } from '@/utils/api/bookingHelpers';
-import type { BookingMetricsResponse } from '@/types/tractstack';
+import { salesHelpers } from '@/utils/api/salesHelpers';
+import type {
+  BookingMetricsResponse,
+  SaleMetricsResponse,
+} from '@/types/tractstack';
 
 export default function ShopifyDashboard({}) {
-  const [metrics, setMetrics] = useState<BookingMetricsResponse | null>(null);
+  const [bookingMetrics, setBookingMetrics] =
+    useState<BookingMetricsResponse | null>(null);
+  const [salesMetrics, setSalesMetrics] = useState<SaleMetricsResponse | null>(
+    null
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -11,8 +19,12 @@ export default function ShopifyDashboard({}) {
     const loadMetrics = async () => {
       try {
         setIsLoading(true);
-        const data = await bookingHelpers.getMetrics();
-        setMetrics(data);
+        const [bookingData, salesData] = await Promise.all([
+          bookingHelpers.getMetrics(),
+          salesHelpers.getMetrics(),
+        ]);
+        setBookingMetrics(bookingData);
+        setSalesMetrics(salesData);
       } catch (err) {
         console.error('Failed to fetch metrics:', err);
         setError('Failed to load dashboard metrics.');
@@ -41,64 +53,179 @@ export default function ShopifyDashboard({}) {
   }
 
   const totalLast24h =
-    (metrics?.confirmedLast24h || 0) + (metrics?.pendingLast24h || 0);
+    (bookingMetrics?.confirmedLast24h || 0) +
+    (bookingMetrics?.pendingLast24h || 0);
   const intentRatio =
     totalLast24h > 0
-      ? Math.round(((metrics?.confirmedLast24h || 0) / totalLast24h) * 100)
+      ? Math.round(
+          ((bookingMetrics?.confirmedLast24h || 0) / totalLast24h) * 100
+        )
       : 0;
+  const currencyCode = salesMetrics?.currencyCode || 'USD';
+  const formatMoney = (amount: string | undefined) => {
+    const parsed = parseFloat(amount || '0');
+    const safeAmount = Number.isFinite(parsed) ? parsed : 0;
+    return `${safeAmount.toFixed(2)} ${currencyCode}`;
+  };
+
+  const MetricCard = ({
+    title,
+    value,
+    subtext,
+    alert = false,
+  }: {
+    title: string;
+    value: string | number;
+    subtext?: string;
+    alert?: boolean;
+  }) => (
+    <div
+      className={`rounded-lg border p-6 shadow-sm ${
+        alert ? 'border-red-200 bg-red-50' : 'border-gray-200 bg-white'
+      }`}
+    >
+      <h3
+        className={`text-sm font-bold ${
+          alert ? 'text-red-700' : 'text-gray-500'
+        }`}
+      >
+        {title}
+      </h3>
+      <p
+        className={`mt-2 text-3xl font-bold ${
+          alert ? 'text-red-900' : 'text-gray-900'
+        }`}
+      >
+        {value}
+      </p>
+      {subtext && (
+        <p
+          className={`mt-1 text-sm font-bold ${
+            alert ? 'text-red-600' : 'text-gray-500'
+          }`}
+        >
+          {subtext}
+        </p>
+      )}
+    </div>
+  );
 
   return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">Monthly Confirmed</h3>
-          <p className="mt-2 text-3xl font-bold text-gray-900">
-            {metrics?.totalMonthlyConfirmed || 0}
-          </p>
+    <div className="space-y-8">
+      <section className="space-y-4">
+        <h2 className="text-lg font-bold text-gray-900">Sales Performance</h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          <MetricCard
+            title="Paid Order Total (Month)"
+            value={formatMoney(salesMetrics?.paidOrderTotalMonth)}
+            subtext={`Year: ${formatMoney(
+              salesMetrics?.paidOrderTotalYear
+            )} · All time: ${formatMoney(salesMetrics?.paidOrderTotalAllTime)}`}
+          />
+          <MetricCard
+            title="Paid Orders (Month)"
+            value={salesMetrics?.paidOrdersMonth || 0}
+            subtext={`Year: ${salesMetrics?.paidOrdersYear || 0} · All time: ${
+              salesMetrics?.paidOrdersAllTime || 0
+            }`}
+          />
+          <MetricCard
+            title="Average Paid Order"
+            value={formatMoney(salesMetrics?.averagePaidOrderMonth)}
+          />
+          <MetricCard
+            title="Local Pickup Line Total"
+            value={formatMoney(salesMetrics?.localPickupLineTotalMonth)}
+          />
+          <MetricCard
+            title="Unique Paying Customers"
+            value={salesMetrics?.uniquePayingCustomers || 0}
+          />
+          <MetricCard
+            title="Orphan Payments"
+            value={salesMetrics?.orphanOrdersMonth || 0}
+            alert={(salesMetrics?.orphanOrdersMonth || 0) > 0}
+          />
         </div>
+      </section>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">Weekly Confirmed</h3>
-          <p className="mt-2 text-3xl font-bold text-gray-900">
-            {metrics?.totalWeeklyConfirmed || 0}
-          </p>
+      <section className="space-y-4">
+        <h2 className="text-lg font-bold text-gray-900">Sales Mix</h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <MetricCard
+            title="Appointment Sales"
+            value={salesMetrics?.appointmentOrdersMonth || 0}
+          />
+          <MetricCard
+            title="Product-only Sales"
+            value={salesMetrics?.productOnlyOrdersMonth || 0}
+          />
+          <MetricCard
+            title="Local Pickup Orders"
+            value={salesMetrics?.localPickupOrdersMonth || 0}
+          />
         </div>
+      </section>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">Annual Confirmed</h3>
-          <p className="mt-2 text-3xl font-bold text-gray-900">
-            {metrics?.totalAnnualConfirmed || 0}
-          </p>
-        </div>
+      <section className="space-y-4">
+        <h2 className="text-lg font-bold text-gray-900">Booking Funnel</h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Monthly Confirmed
+            </h3>
+            <p className="mt-2 text-3xl font-bold text-gray-900">
+              {bookingMetrics?.totalMonthlyConfirmed || 0}
+            </p>
+          </div>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">
-            Total Leads Converted
-          </h3>
-          <p className="mt-2 text-3xl font-bold text-gray-900">
-            {metrics?.leadConversionAnchor || 0}
-          </p>
-        </div>
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Weekly Confirmed
+            </h3>
+            <p className="mt-2 text-3xl font-bold text-gray-900">
+              {bookingMetrics?.totalWeeklyConfirmed || 0}
+            </p>
+          </div>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">
-            Pending (Last 24h)
-          </h3>
-          <p className="mt-2 text-3xl font-bold text-gray-900">
-            {metrics?.pendingLast24h || 0}
-          </p>
-        </div>
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Annual Confirmed
+            </h3>
+            <p className="mt-2 text-3xl font-bold text-gray-900">
+              {bookingMetrics?.totalAnnualConfirmed || 0}
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Total Leads Converted
+            </h3>
+            <p className="mt-2 text-3xl font-bold text-gray-900">
+              {bookingMetrics?.leadConversionAnchor || 0}
+            </p>
+          </div>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <h3 className="text-sm font-bold text-gray-500">
-            Checkout Intent Ratio
-          </h3>
-          <div className="mt-2 flex items-baseline gap-2">
-            <p className="text-3xl font-bold text-gray-900">{intentRatio}%</p>
-            <p className="text-sm font-bold text-gray-500">conversion</p>
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Pending (Last 24h)
+            </h3>
+            <p className="mt-2 text-3xl font-bold text-gray-900">
+              {bookingMetrics?.pendingLast24h || 0}
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+            <h3 className="text-sm font-bold text-gray-500">
+              Checkout Intent Ratio
+            </h3>
+            <div className="mt-2 flex items-baseline gap-2">
+              <p className="text-3xl font-bold text-gray-900">{intentRatio}%</p>
+              <p className="text-sm font-bold text-gray-500">conversion</p>
+            </div>
           </div>
         </div>
-      </div>
+      </section>
     </div>
   );
 }

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

@@ -52,9 +52,12 @@ export default function ShopifyDashboard_Bookings({
       setBookings(response.data || []);
       setTotalCount(response.totalCount || 0);
 
+      const availabilityStart = new Date();
+      const availabilityEnd = new Date(availabilityStart);
+      availabilityEnd.setDate(availabilityEnd.getDate() + 30);
       const availability = await bookingHelpers.getAvailability(
-        new Date().toISOString(),
-        new Date().toISOString()
+        availabilityStart.toISOString(),
+        availabilityEnd.toISOString()
       );
       if (availability?.scheduling?.timezone) {
         setShopTimezone(availability.scheduling.timezone);