astro-tractstack 2.0.0-rc.9 → 2.0.0

package/templates/src/components/codehooks/ListContentSetup.tsx

@@ -9,24 +9,10 @@ import type { PaneNode } from '@/types/compositorTypes';
 
 const PER_PAGE = 20;
 
-// V2 Analytics Data Structure
-interface StoryfragmentAnalytics {
-  id: string;
-  total_actions: number;
-  unique_visitors: number;
-  last_24h_actions: number;
-  last_7d_actions: number;
-  last_28d_actions: number;
-  last_24h_unique_visitors: number;
-  last_7d_unique_visitors: number;
-  last_28d_unique_visitors: number;
-  total_leads: number;
-}
-
 interface ListContentSetupProps {
   params?: Record<string, string>;
   nodeId: string;
-  config?: BrandConfig;
+  config: BrandConfig;
 }
 
 const ListContentSetup = ({
@@ -34,17 +20,8 @@ const ListContentSetup = ({
   nodeId,
   config,
 }: ListContentSetupProps) => {
-  const [analyticsData, setAnalyticsData] = useState<
-    Record<string, StoryfragmentAnalytics>
-  >({});
-  const [isAnalyticsLoading, setIsAnalyticsLoading] = useState(true);
   const $contentMap = useStore(fullContentMapStore);
-
   const [isPanelOpen, setIsPanelOpen] = useState(false);
-
-  const [selectedMode, setSelectedMode] = useState(
-    params?.defaultMode || 'recent'
-  );
   const [excludedIds, setExcludedIds] = useState<string[]>(
     params?.excludedIds ? params.excludedIds.split(',') : []
   );
@@ -56,6 +33,7 @@ const ListContentSetup = ({
   );
   const [currentPage, setCurrentPage] = useState(1);
   const [bgColor, setBgColor] = useState(params?.bgColor || '');
+  const [title, setTitle] = useState(params?.title || '');
 
   const isInitialMount = useRef(true);
 
@@ -65,15 +43,15 @@ const ListContentSetup = ({
     selectedTopics.length > 0 ||
     excludedIds.length > 0 ||
     pageSize !== 10 ||
-    bgColor !== '';
+    bgColor !== '' ||
+    title !== '';
 
   const validPages = $contentMap.filter(
     (item) =>
       item.type === 'StoryFragment' &&
       typeof item.description === 'string' &&
       typeof item.thumbSrc === 'string' &&
-      typeof item.thumbSrcSet === 'string' &&
-      typeof item.changed === 'string'
+      typeof item.thumbSrcSet === 'string'
   );
 
   // Build topic map for filtering
@@ -89,47 +67,6 @@ const ListContentSetup = ({
     }
   });
 
-  const fetchAnalyticsData = async () => {
-    try {
-      setIsAnalyticsLoading(true);
-      // Updated to use V2 API endpoint
-      const response = await fetch('/api/v1/analytics/storyfragments', {
-        headers: {
-          'X-Tenant-ID': window.TRACTSTACK_CONFIG?.tenantId || 'default',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const analyticsArray = await response.json();
-
-      // Transform array to a map keyed by ID for easier lookup
-      // V2 API returns array directly, not wrapped in a success/data structure
-      const analyticsById = Array.isArray(analyticsArray)
-        ? analyticsArray.reduce(
-            (
-              acc: Record<string, StoryfragmentAnalytics>,
-              item: StoryfragmentAnalytics
-            ) => {
-              acc[item.id] = item;
-              return acc;
-            },
-            {}
-          )
-        : {};
-
-      setAnalyticsData(analyticsById);
-    } catch (error) {
-      console.error('Error fetching analytics data:', error);
-      // Set empty analytics on error to prevent blocking the UI
-      setAnalyticsData({});
-    } finally {
-      setIsAnalyticsLoading(false);
-    }
-  };
-
   const topics = Array.from(topicMap.entries())
     .map(([name, { count, pageIds }]) => ({
       name,
@@ -139,23 +76,16 @@ const ListContentSetup = ({
     .sort((a, b) => a.name.localeCompare(b.name));
 
   const filteredPages = validPages.filter((page) => {
-    if (excludedIds.includes(page.id)) {
+    if (excludedIds.includes(page.id) || selectedTopics.length === 0) {
       return false;
     }
-    if (selectedTopics.length === 0) {
-      return true;
-    }
     return (
       page.topics && page.topics.some((topic) => selectedTopics.includes(topic))
     );
   });
 
+  // Always sort by most recent
   const sortedPages = [...filteredPages].sort((a, b) => {
-    if (selectedMode === 'popular') {
-      const aViews = analyticsData[a.id]?.total_actions || 0;
-      const bViews = analyticsData[b.id]?.total_actions || 0;
-      return bViews - aViews;
-    }
     const bDate = b.changed ? new Date(b.changed) : new Date(0);
     const aDate = a.changed ? new Date(a.changed) : new Date(0);
     return bDate.getTime() - aDate.getTime();
@@ -177,11 +107,11 @@ const ListContentSetup = ({
           codeHookTarget: 'list-content',
           codeHookPayload: {
             options: JSON.stringify({
-              defaultMode: selectedMode,
               excludedIds: excludedIds.join(','),
               topics: selectedTopics.join(','),
               pageSize: pageSize,
               bgColor: bgColor,
+              title: title,
             }),
           },
           bgColour: bgColor || undefined,
@@ -198,10 +128,6 @@ const ListContentSetup = ({
     }
   };
 
-  useEffect(() => {
-    fetchAnalyticsData();
-  }, []);
-
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -213,7 +139,7 @@ const ListContentSetup = ({
     }, 500);
 
     return () => clearTimeout(timeoutId);
-  }, [selectedMode, excludedIds, selectedTopics, pageSize, bgColor]);
+  }, [excludedIds, selectedTopics, pageSize, bgColor, title]);
 
   // Toggle a page's exclusion status
   const toggleExclude = (id: string) => {
@@ -339,7 +265,6 @@ const ListContentSetup = ({
     );
   }
 
-  if (isAnalyticsLoading) return null;
   return (
     <div className="w-full space-y-6 bg-slate-50 p-6">
       <div className="flex items-center justify-between">
@@ -359,6 +284,23 @@ const ListContentSetup = ({
           <h3 className="text-lg font-bold text-gray-900">Content Settings</h3>
         </div>
         <div className="space-y-4 pt-4">
+          <div>
+            <label
+              htmlFor="list-title"
+              className="block text-sm font-bold text-gray-700"
+            >
+              Optional Title
+            </label>
+            <input
+              type="text"
+              id="list-title"
+              className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-600 focus:ring-cyan-600 sm:text-sm"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g., Recent Articles"
+            />
+          </div>
+
           <div>
             <label
               htmlFor="page-size"
@@ -380,29 +322,6 @@ const ListContentSetup = ({
             </select>
           </div>
 
-          <div>
-            <label
-              htmlFor="sort-mode"
-              className="block text-sm font-bold text-gray-700"
-            >
-              Default sort order
-            </label>
-            <select
-              id="sort-mode"
-              name="sort-mode"
-              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-600 focus:outline-none focus:ring-cyan-600 sm:text-sm"
-              value={selectedMode}
-              onChange={(e) => setSelectedMode(e.target.value)}
-            >
-              <option value="recent">Most Recent</option>
-              <option value="popular">Most Popular</option>
-            </select>
-            <p className="mt-1 text-xs text-gray-500">
-              Note: Users can toggle between views regardless of the default
-              setting
-            </p>
-          </div>
-
           <div>
             <ColorPickerCombo
               title="Background Color"
@@ -536,7 +455,6 @@ const ListContentSetup = ({
           <div className="divide-y divide-gray-200">
             {paginatedPages.map((page) => {
               const isExcluded = excludedIds.includes(page.id);
-              const analytics = analyticsData[page.id];
 
               return (
                 <div key={page.id} className="flex items-center p-4">
@@ -549,23 +467,9 @@ const ListContentSetup = ({
                     />
                   </div>
                   <div className="ml-4 min-w-0 flex-1">
-                    <div className="flex items-center justify-between">
-                      <p className="truncate text-sm font-bold text-gray-900">
-                        {page.title}
-                      </p>
-                      <div className="flex items-center space-x-4">
-                        <button
-                          onClick={() => toggleExclude(page.id)}
-                          className={`rounded px-2 py-1 text-xs font-bold ${
-                            isExcluded
-                              ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                              : 'bg-red-100 text-red-600 hover:bg-red-200'
-                          }`}
-                        >
-                          {isExcluded ? 'Restore' : 'Exclude'}
-                        </button>
-                      </div>
-                    </div>
+                    <p className="text-sm font-bold text-gray-900">
+                      {page.title}
+                    </p>
                     <div className="mt-1">
                       <p className="line-clamp-1 text-sm text-gray-500">
                         {page.description}
@@ -586,22 +490,23 @@ const ListContentSetup = ({
                             {topic}
                           </span>
                         ))}
+                        <button
+                          onClick={() => toggleExclude(page.id)}
+                          className={`rounded px-2 py-1 text-xs font-bold ${
+                            isExcluded
+                              ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                              : 'bg-red-100 text-red-600 hover:bg-red-200'
+                          }`}
+                        >
+                          {isExcluded ? 'Restore' : 'Exclude'}
+                        </button>
                       </div>
                     )}
                     <div className="mt-1 flex items-center text-xs text-gray-500">
-                      {analytics && (
-                        <>
-                          <span>{analytics.total_actions} views</span>
-                          {page.changed && (
-                            <>
-                              <span className="mx-2">•</span>
-                              <span>
-                                Updated{' '}
-                                {new Date(page.changed).toLocaleDateString()}
-                              </span>
-                            </>
-                          )}
-                        </>
+                      {page.changed && (
+                        <span>
+                          Updated {new Date(page.changed).toLocaleDateString()}
+                        </span>
                       )}
                     </div>
                   </div>

package/templates/src/components/codehooks/ProductCardSetup.tsx

@@ -0,0 +1,152 @@
+import { useState, useMemo } from 'react';
+import { Combobox } from '@ark-ui/react/combobox';
+import { Portal } from '@ark-ui/react/portal';
+import { createListCollection } from '@ark-ui/react/collection';
+import { useStore } from '@nanostores/react';
+import { fullContentMapStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import type { PaneNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ProductCardSetupProps {
+  nodeId: string;
+  params: Record<string, any> | null;
+  config: BrandConfig;
+}
+
+export const ProductCardSetup = (props: ProductCardSetupProps) => {
+  const { nodeId, params } = props;
+  const ctx = getCtx();
+  const $contentMap = useStore(fullContentMapStore);
+
+  const [showSelector, setShowSelector] = useState(false);
+
+  const products = useMemo(() => {
+    return $contentMap
+      .filter(
+        (item) => item.type === 'Resource' && item.categorySlug === 'product'
+      )
+      .map((item) => ({ label: item.title, value: item.slug }));
+  }, [$contentMap]);
+
+  const productCollection = useMemo(() => {
+    return createListCollection({
+      items: products,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.label,
+    });
+  }, [products]);
+
+  const [selectedItem, setSelectedItem] = useState<{
+    label: string;
+    value: string;
+  } | null>(() => {
+    const currentSlug = params?.slug;
+    if (currentSlug) {
+      return products.find((p) => p.value === currentSlug) || null;
+    }
+    return null;
+  });
+
+  const updatePayload = (newPayload: Record<string, any>) => {
+    const paneNode = ctx.allNodes.get().get(nodeId) as PaneNode;
+    if (!paneNode) return;
+
+    const updatedPaneNode = {
+      ...paneNode,
+      codeHookPayload: {
+        target: paneNode.codeHookPayload?.target,
+        options: JSON.stringify(newPayload),
+      },
+      isChanged: true,
+    };
+    ctx.modifyNodes([updatedPaneNode]);
+  };
+
+  const handleSelect = (details: { value: string[] }) => {
+    const slug = details.value[0];
+    const selected = products.find((p) => p.value === slug);
+    if (selected) {
+      setSelectedItem(selected);
+      updatePayload({ slug: selected.value });
+      setShowSelector(false);
+    }
+  };
+
+  const handleClear = () => {
+    setSelectedItem(null);
+    updatePayload({});
+  };
+
+  return (
+    <div className="space-y-4 p-2">
+      <h3 className="font-bold text-gray-800">Product Card Configuration</h3>
+
+      <div className="rounded-md border bg-gray-50 p-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-bold text-gray-600">Selected Product</p>
+            <p className="truncate font-bold text-gray-900">
+              {selectedItem ? selectedItem.label : 'None'}
+            </p>
+          </div>
+          <div className="flex gap-x-2">
+            <button
+              type="button"
+              onClick={() => setShowSelector(!showSelector)}
+              className="rounded bg-white px-3 py-1 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              {showSelector ? 'Cancel' : 'Change'}
+            </button>
+            <button
+              type="button"
+              onClick={handleClear}
+              className="rounded bg-white px-3 py-1 text-sm font-bold text-red-600 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+              disabled={!selectedItem}
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {showSelector && (
+        <div className="space-y-2 rounded-md border p-3">
+          <Combobox.Root
+            collection={productCollection}
+            onValueChange={handleSelect}
+            lazyMount
+            unmountOnExit
+          >
+            <Combobox.Label className="text-sm font-bold text-gray-700">
+              Find a product
+            </Combobox.Label>
+            <Combobox.Control>
+              <Combobox.Input
+                className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                placeholder="Search products..."
+              />
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content className="z-50 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
+                  {products.map((item) => (
+                    <Combobox.Item
+                      key={item.value}
+                      item={item}
+                      className="relative cursor-pointer select-none px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                    >
+                      <Combobox.ItemText>{item.label}</Combobox.ItemText>
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductCardSetup;