astro-tractstack 2.3.3 → 2.3.5

package/templates/src/components/storykeep/Dashboard_Shopify.tsx

@@ -11,6 +11,7 @@ import {
 import ResourceForm from './controls/content/ResourceForm';
 import { saveBrandConfigWithStateUpdate } from '@/utils/api/brandConfig';
 import {
+  createResource,
   deleteResource,
   getResource,
   getResourcesByCategory,
@@ -27,6 +28,7 @@ import ShopifyDashboard_Schedule from './shopify/ShopifyDashboard_Schedule';
 import ShopifyDashboard_Search from './shopify/ShopifyDashboard_Search';
 import ShopifyDashboard_Bookings from './shopify/ShopifyDashboard_Bookings';
 import ShopifyDashboard_Emails from './shopify/ShopifyDashboard_Emails';
+import ShopifyDashboard_Sales from './shopify/ShopifyDashboard_Sales';
 
 interface DashboardShopifyProps {
   brandConfig: BrandConfig;
@@ -34,6 +36,12 @@ interface DashboardShopifyProps {
 }
 
 type MachineState = 'INIT' | 'CONFIG' | 'UPDATE' | 'READY';
+type ImportCategory = 'product' | 'service' | 'shared';
+
+export interface ShopifyLinkedStatus {
+  canonicalProduct: ResourceNode | null;
+  linkedServices: ResourceNode[];
+}
 
 export default function StoryKeepDashboard_Shopify({
   brandConfig,
@@ -60,7 +68,7 @@ export default function StoryKeepDashboard_Shopify({
 
   const [showSmartCartWarning, setShowSmartCartWarning] = useState(false);
   const [pendingImport, setPendingImport] = useState<{
-    category: string;
+    category: ImportCategory;
     product: ShopifyProduct;
   } | null>(null);
 
@@ -72,10 +80,56 @@ export default function StoryKeepDashboard_Shopify({
   const [wantService, setWantService] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
 
+  useEffect(() => {
+    const hasOpenModal =
+      Boolean(selectedProduct) ||
+      (showTypeSelector && Boolean(targetProduct)) ||
+      (showSmartCartWarning && Boolean(pendingImport)) ||
+      (showResourceModal && Boolean(draftResource));
+    if (!hasOpenModal) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+
+      if (showResourceModal && draftResource) {
+        setShowResourceModal(false);
+        setIsCreateMode(true);
+        return;
+      }
+      if (showSmartCartWarning && pendingImport) {
+        setShowSmartCartWarning(false);
+        setPendingImport(null);
+        return;
+      }
+      if (showTypeSelector && targetProduct) {
+        setShowTypeSelector(false);
+        setTargetProduct(null);
+        return;
+      }
+      if (selectedProduct) {
+        setSelectedProduct(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    selectedProduct,
+    showTypeSelector,
+    targetProduct,
+    showSmartCartWarning,
+    pendingImport,
+    showResourceModal,
+    draftResource,
+  ]);
+
   // Tab definitions
   const tabs = [
     { id: 'dashboards', name: 'Dashboard' },
     { id: 'bookings', name: 'Bookings' },
+    { id: 'sales', name: 'Sales' },
     { id: 'products', name: 'Products' },
     { id: 'services', name: 'Services' },
     { id: 'schedule', name: 'Schedule' },
@@ -97,12 +151,27 @@ export default function StoryKeepDashboard_Shopify({
     }
   }, [brandConfig]);
 
-  const linkedResourceMap = useMemo(() => {
-    const map = new Map<string, ResourceNode>();
-    resources.forEach((r) => {
-      if (r.optionsPayload?.gid) {
-        map.set(r.optionsPayload.gid, r);
+  const linkedStatusMap = useMemo(() => {
+    const map = new Map<string, ShopifyLinkedStatus>();
+    resources.forEach((resource) => {
+      const gid =
+        typeof resource.optionsPayload?.gid === 'string'
+          ? resource.optionsPayload.gid
+          : '';
+      if (!gid) return;
+
+      const current = map.get(gid) || {
+        canonicalProduct: null,
+        linkedServices: [],
+      };
+
+      if (resource.categorySlug === 'product' && !current.canonicalProduct) {
+        current.canonicalProduct = resource;
+      }
+      if (resource.categorySlug === 'service') {
+        current.linkedServices.push(resource);
       }
+      map.set(gid, current);
     });
     return map;
   }, [resources]);
@@ -139,6 +208,8 @@ export default function StoryKeepDashboard_Shopify({
     if (hasProductSchema && hasServiceSchema) {
       setTargetProduct(product);
       setShowTypeSelector(true);
+    } else if (hasProductSchema) {
+      executePreFlightCheck('product', product);
     } else if (hasServiceSchema) {
       executePreFlightCheck('service', product);
     } else {
@@ -171,10 +242,17 @@ export default function StoryKeepDashboard_Shopify({
     }
   };
 
-  const executePreFlightCheck = (category: string, product: ShopifyProduct) => {
+  const handleMarkShared = (product: ShopifyProduct) => {
+    void startCreateFlow('shared', product);
+  };
+
+  const executePreFlightCheck = (
+    category: ImportCategory,
+    product: ShopifyProduct
+  ) => {
     const hasMode = product.options.some((opt) => opt.name === 'Mode');
-    if (category === 'service' || hasMode) {
-      startCreateFlow(category, product);
+    if (category === 'service' || category === 'shared' || hasMode) {
+      void startCreateFlow(category, product);
     } else {
       setPendingImport({ category, product });
       setShowSmartCartWarning(true);
@@ -182,12 +260,112 @@ export default function StoryKeepDashboard_Shopify({
     }
   };
 
-  const startCreateFlow = (category: string, product: ShopifyProduct) => {
-    const schema = internalBrandConfig?.knownResources[category] || {};
+  const startCreateFlow = async (
+    category: ImportCategory,
+    product: ShopifyProduct
+  ) => {
+    const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+    const productSchema = internalBrandConfig?.knownResources['product'] || {};
+    const existingCanonical = resources.find(
+      (r) =>
+        r.categorySlug === 'product' && r.optionsPayload?.gid === product.id
+    );
+
+    if (category === 'shared') {
+      if (existingCanonical) {
+        setDraftResource({
+          ...existingCanonical,
+          optionsPayload: {
+            ...(existingCanonical.optionsPayload || {}),
+            gid: product.id,
+            shopifyData:
+              existingCanonical.optionsPayload?.shopifyData ||
+              JSON.stringify(product),
+            sharedServiceFee: true,
+          },
+        });
+        setIsCreateMode(false);
+      } else {
+        const mergedOptions: Record<string, any> = {
+          gid: product.id,
+          shopifyData: JSON.stringify(product),
+          sharedServiceFee: true,
+        };
+
+        Object.entries(productSchema).forEach(([key, def]) => {
+          if (mergedOptions[key] !== undefined) return;
+          if (def.type === 'number') {
+            mergedOptions[key] = def.defaultValue ?? def.minNumber ?? 0;
+          } else if (def.type === 'boolean') {
+            mergedOptions[key] = def.defaultValue ?? false;
+          } else if (def.type === 'string') {
+            mergedOptions[key] = def.defaultValue ?? '';
+          } else if (def.type === 'multi') {
+            mergedOptions[key] = def.defaultValue ?? [];
+          }
+        });
+
+        setDraftResource({
+          title: product.title,
+          oneliner: product.description || '',
+          slug: `product-${product.handle}`.toLowerCase(),
+          categorySlug: 'product',
+          optionsPayload: mergedOptions,
+        });
+        setIsCreateMode(true);
+      }
+      setShowTypeSelector(false);
+      setShowResourceModal(true);
+      return;
+    }
+
+    if (category === 'service') {
+      if (!existingCanonical) {
+        const productOptions: Record<string, any> = {
+          gid: product.id,
+          shopifyData: JSON.stringify(product),
+        };
+
+        Object.entries(productSchema).forEach(([key, def]) => {
+          if (productOptions[key] !== undefined) return;
+          if (def.type === 'number') {
+            productOptions[key] = def.defaultValue ?? def.minNumber ?? 0;
+          } else if (def.type === 'boolean') {
+            productOptions[key] = def.defaultValue ?? false;
+          } else if (def.type === 'string') {
+            productOptions[key] = def.defaultValue ?? '';
+          } else if (def.type === 'multi') {
+            productOptions[key] = def.defaultValue ?? [];
+          }
+        });
+
+        try {
+          await createResource(tenantId, {
+            title: product.title,
+            oneliner: product.description || '',
+            slug: `product-${product.handle}`.toLowerCase(),
+            categorySlug: 'product',
+            optionsPayload: productOptions,
+          } as any);
+          await refreshResources();
+        } catch (error) {
+          console.error('Failed to ensure canonical product', error);
+          alert('Failed to create canonical product for this service.');
+          return;
+        }
+      }
+    }
+
+    const schema =
+      category === 'product'
+        ? internalBrandConfig?.knownResources['product'] || {}
+        : internalBrandConfig?.knownResources['service'] || {};
     const mergedOptions: Record<string, any> = {
       gid: product.id,
-      shopifyData: JSON.stringify(product),
     };
+    if (category === 'product') {
+      mergedOptions.shopifyData = JSON.stringify(product);
+    }
 
     Object.entries(schema).forEach(([key, def]) => {
       if (mergedOptions[key] === undefined) {
@@ -226,11 +404,53 @@ export default function StoryKeepDashboard_Shopify({
     }
 
     try {
+      const target = resources.find((r) => r.id === resourceId);
+      const targetGid =
+        typeof target?.optionsPayload?.gid === 'string'
+          ? target.optionsPayload.gid
+          : '';
+
+      if (target?.categorySlug === 'product' && targetGid) {
+        const linkedServices = resources.filter(
+          (r) =>
+            r.categorySlug === 'service' && r.optionsPayload?.gid === targetGid
+        );
+        if (linkedServices.length > 0) {
+          alert(
+            'Cannot delete a product linked to services. Delete linked services first.'
+          );
+          return;
+        }
+      }
+
       await deleteResource(
         window.TRACTSTACK_CONFIG?.tenantId || 'default',
         resourceId
       );
-      setResources((prev) => prev.filter((r) => r.id !== resourceId));
+
+      if (target?.categorySlug === 'service' && targetGid) {
+        const remainingLinked = resources.filter(
+          (r) =>
+            r.id !== resourceId &&
+            r.categorySlug === 'service' &&
+            r.optionsPayload?.gid === targetGid
+        );
+        if (remainingLinked.length === 0) {
+          const canonicalProduct = resources.find(
+            (r) =>
+              r.categorySlug === 'product' &&
+              r.optionsPayload?.gid === targetGid
+          );
+          if (canonicalProduct) {
+            await deleteResource(
+              window.TRACTSTACK_CONFIG?.tenantId || 'default',
+              canonicalProduct.id
+            );
+          }
+        }
+      }
+
+      await refreshResources();
     } catch (error) {
       console.error('Unlink failed', error);
       alert('Failed to delete resource');
@@ -258,6 +478,11 @@ export default function StoryKeepDashboard_Shopify({
           gid: { type: 'string', optional: false },
           allowMultiple: { type: 'boolean', optional: false },
           group: { type: 'string', optional: true },
+          sharedServiceFee: {
+            type: 'boolean',
+            optional: false,
+            defaultValue: false,
+          },
           shopifyData: { type: 'string', optional: false },
           shopifyImage: { type: 'string', optional: true, defaultValue: '{}' },
           ...(wantService
@@ -276,8 +501,6 @@ export default function StoryKeepDashboard_Shopify({
         updatedKnownResources['service'] = {
           gid: { type: 'string', optional: true },
           group: { type: 'string', optional: true },
-          shopifyData: { type: 'string', optional: true },
-          shopifyImage: { type: 'string', optional: true, defaultValue: '{}' },
           allowRemote: {
             type: 'boolean',
             optional: false,
@@ -479,6 +702,10 @@ export default function StoryKeepDashboard_Shopify({
           <ShopifyDashboard_Bookings existingResources={resources} />
         )}
 
+        {activeTab === 'sales' && (
+          <ShopifyDashboard_Sales existingResources={resources} />
+        )}
+
         {activeTab === 'products' && (
           <ShopifyDashboard_Products
             resources={resources}
@@ -503,9 +730,10 @@ export default function StoryKeepDashboard_Shopify({
 
         {activeTab === 'search' && (
           <ShopifyDashboard_Search
-            linkedResourceMap={linkedResourceMap}
+            linkedStatusMap={linkedStatusMap}
             onSelectProduct={setSelectedProduct}
             onLink={handleLink}
+            onMarkShared={handleMarkShared}
             onUnlink={handleUnlink}
             onEdit={handleEditFromCatalog}
           />
@@ -574,7 +802,7 @@ export default function StoryKeepDashboard_Shopify({
                   Import as...
                 </h3>
                 <p className="mt-2 text-sm text-gray-500">
-                  Should "{targetProduct.title}" be a Product or Service?
+                  Choose import type for "{targetProduct.title}".
                 </p>
                 <div className="mt-6 flex flex-col gap-3">
                   <button
@@ -585,6 +813,14 @@ export default function StoryKeepDashboard_Shopify({
                   >
                     Product
                   </button>
+                  <button
+                    onClick={() =>
+                      executePreFlightCheck('shared', targetProduct)
+                    }
+                    className="flex w-full items-center justify-center rounded-md border border-cyan-300 bg-cyan-50 px-4 py-2 text-sm font-bold text-cyan-700 shadow-sm hover:bg-cyan-100"
+                  >
+                    Shared Canonical Product
+                  </button>
                   <button
                     onClick={() =>
                       executePreFlightCheck('service', targetProduct)
@@ -618,7 +854,7 @@ export default function StoryKeepDashboard_Shopify({
                   <button
                     onClick={() => {
                       setShowSmartCartWarning(false);
-                      startCreateFlow(
+                      void startCreateFlow(
                         pendingImport.category,
                         pendingImport.product
                       );
@@ -661,6 +897,9 @@ export default function StoryKeepDashboard_Shopify({
                   internalBrandConfig?.scheduling?.remoteOnly
                 )}
                 isCreate={isCreateMode}
+                onOpenLinkedProduct={(resourceId) => {
+                  void handleEditResource(resourceId);
+                }}
                 onClose={(saved) => {
                   setShowResourceModal(false);
                   setIsCreateMode(true);

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

@@ -15,23 +15,26 @@ import {
   type ShopifyProduct,
 } from '@/stores/shopify';
 import type { ResourceNode } from '@/types/compositorTypes';
+import type { ShopifyLinkedStatus } from '@/components/storykeep/Dashboard_Shopify';
 
 interface ProductTableProps {
   products: ShopifyProduct[];
-  linkedResourceMap: Map<string, ResourceNode>;
+  linkedStatusMap: Map<string, ShopifyLinkedStatus>;
   onRefresh: () => void;
   isRefreshing: boolean;
   onSelectProduct: (product: ShopifyProduct) => void;
   onLink: (product: ShopifyProduct) => void;
+  onMarkShared: (product: ShopifyProduct) => void;
   onUnlink: (resourceId: string) => void;
   onEdit: (product: ShopifyProduct, resource: ResourceNode) => void;
 }
 
 export default function ProductTable({
   products,
-  linkedResourceMap,
+  linkedStatusMap,
   onSelectProduct,
   onLink,
+  onMarkShared,
   onUnlink,
   onEdit,
 }: ProductTableProps) {
@@ -203,8 +206,10 @@ export default function ProductTable({
               </tr>
             ) : (
               products.map((product) => {
-                const linkedResource = linkedResourceMap.get(product.id);
-                const isLinked = !!linkedResource;
+                const linkedStatus = linkedStatusMap.get(product.id);
+                const canonicalProduct = linkedStatus?.canonicalProduct || null;
+                const linkedServiceCount =
+                  linkedStatus?.linkedServices.length || 0;
 
                 return (
                   <tr key={product.id} className="hover:bg-gray-50">
@@ -215,22 +220,24 @@ export default function ProductTable({
                       >
                         {product.title}
                       </div>
-                      {isLinked && (
-                        <span
-                          className={`mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ring-1 ring-inset ${
-                            linkedResource.categorySlug === 'service'
-                              ? 'bg-indigo-50 text-indigo-700 ring-indigo-600/20'
-                              : 'bg-cyan-50 text-cyan-700 ring-cyan-600/20'
-                          }`}
-                        >
-                          Synced:{' '}
-                          <span
-                            className="max-w-xs truncate"
-                            title={linkedResource.title}
-                          >
-                            {linkedResource.title}
+                      {canonicalProduct && (
+                        <div className="mt-1 flex flex-wrap items-center gap-1">
+                          <span className="inline-flex items-center rounded-full bg-cyan-50 px-2 py-0.5 text-xs font-bold text-cyan-700 ring-1 ring-inset ring-cyan-600/20">
+                            Synced canonical:{' '}
+                            <span
+                              className="ml-1 max-w-xs truncate"
+                              title={canonicalProduct.title}
+                            >
+                              {canonicalProduct.title}
+                            </span>
                           </span>
-                        </span>
+                          {linkedServiceCount > 0 && (
+                            <span className="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-bold text-indigo-700 ring-1 ring-inset ring-indigo-600/20">
+                              {linkedServiceCount} service
+                              {linkedServiceCount === 1 ? '' : 's'}
+                            </span>
+                          )}
+                        </div>
                       )}
                     </td>
                     <td
@@ -241,12 +248,12 @@ export default function ProductTable({
                     </td>
                     <td className="whitespace-nowrap px-6 py-4 text-right text-sm font-bold">
                       <div className="flex items-center justify-end space-x-2">
-                        {isLinked ? (
+                        {canonicalProduct ? (
                           <>
                             <button
-                              onClick={() => onEdit(product, linkedResource)}
+                              onClick={() => onEdit(product, canonicalProduct)}
                               className="text-cyan-600 hover:text-cyan-900"
-                              title="Edit Resource"
+                              title="Edit Canonical Product"
                             >
                               <PencilIcon
                                 className="h-5 w-5"
@@ -257,9 +264,16 @@ export default function ProductTable({
                               </span>
                             </button>
                             <button
-                              onClick={() => onUnlink(linkedResource.id)}
+                              onClick={() => onMarkShared(product)}
+                              className="rounded border border-cyan-200 bg-cyan-50 px-2 py-0.5 text-xs font-bold text-cyan-700 hover:bg-cyan-100"
+                              title="Tag Canonical Product as Shared"
+                            >
+                              Shared
+                            </button>
+                            <button
+                              onClick={() => onUnlink(canonicalProduct.id)}
                               className="text-red-600 hover:text-red-900"
-                              title="Unlink Resource"
+                              title="Unlink Canonical Product"
                             >
                               <TrashIcon
                                 className="h-5 w-5"