@officexapp/catalogs-cli 0.2.7 → 0.2.9

package/dist/index.js

@@ -1427,6 +1427,110 @@ function buildPreviewHtml(schema, port) {
       );
     }
 
+    // --- Cart Components ---
+    const cartIconPath = 'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z';
+
+    function CartButton({ itemCount, onClick }) {
+      if (itemCount === 0) return null;
+      return h('button', {
+        onClick,
+        className: 'fixed bottom-6 right-6 z-[90] flex items-center gap-2 rounded-full px-5 py-3.5 text-white font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95',
+        style: { backgroundColor: themeColor, fontFamily: 'var(--font-display)' },
+      },
+        h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+          h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+        ),
+        h('span', null, itemCount),
+        h('span', { className: 'text-sm opacity-80' }, itemCount === 1 ? 'item' : 'items')
+      );
+    }
+
+    function CartDrawer({ items, isOpen, onToggle, onRemove }) {
+      React.useEffect(() => {
+        if (!isOpen) return;
+        const handleKey = (e) => { if (e.key === 'Escape') onToggle(); };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+      }, [isOpen, onToggle]);
+
+      return h(React.Fragment, null,
+        // Backdrop
+        h('div', {
+          className: 'fixed inset-0 z-[95] bg-black/30 backdrop-blur-sm transition-opacity duration-300 ' + (isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'),
+          onClick: onToggle,
+        }),
+        // Drawer
+        h('div', {
+          className: 'fixed top-0 right-0 bottom-0 z-[96] w-full max-w-md bg-white shadow-2xl transition-transform duration-300 ease-out flex flex-col ' + (isOpen ? 'translate-x-0' : 'translate-x-full'),
+          style: { fontFamily: 'var(--font-display)' },
+        },
+          // Header
+          h('div', { className: 'flex items-center justify-between px-6 py-5 border-b border-gray-100' },
+            h('div', { className: 'flex items-center gap-3' },
+              h('div', { className: 'w-9 h-9 rounded-xl flex items-center justify-center', style: { backgroundColor: themeColor + '12' } },
+                h('svg', { className: 'w-5 h-5', style: { color: themeColor }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+                )
+              ),
+              h('div', null,
+                h('h2', { className: 'text-lg font-bold text-gray-900' }, 'Your Cart'),
+                h('p', { className: 'text-xs text-gray-400' }, items.length + ' ' + (items.length === 1 ? 'item' : 'items') + ' selected')
+              )
+            ),
+            h('button', { onClick: onToggle, className: 'w-9 h-9 flex items-center justify-center rounded-xl text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-all' },
+              h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })
+              )
+            )
+          ),
+          // Items
+          h('div', { className: 'flex-1 overflow-y-auto px-6 py-4' },
+            items.length === 0
+              ? h('div', { className: 'flex flex-col items-center justify-center h-full text-center py-16' },
+                  h('div', { className: 'w-16 h-16 rounded-2xl flex items-center justify-center mb-4', style: { backgroundColor: themeColor + '08' } },
+                    h('svg', { className: 'w-8 h-8 text-gray-300', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 },
+                      h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+                    )
+                  ),
+                  h('p', { className: 'text-gray-400 text-sm font-medium' }, 'No offers accepted yet'),
+                  h('p', { className: 'text-gray-300 text-xs mt-1' }, 'Accept offers as you browse to add them here')
+                )
+              : h('div', { className: 'space-y-3' },
+                  ...items.map(item => h('div', { key: item.offer_id, className: 'group flex items-start gap-4 p-4 rounded-2xl border border-gray-100 bg-gray-50/50 hover:bg-white hover:border-gray-200 hover:shadow-sm transition-all duration-200' },
+                    item.image ? h('img', { src: item.image, alt: item.title, className: 'w-14 h-14 rounded-xl object-cover flex-shrink-0' }) : null,
+                    h('div', { className: 'flex-1 min-w-0' },
+                      h('h3', { className: 'text-sm font-semibold text-gray-900 truncate' }, item.title),
+                      item.price_display ? h('p', { className: 'text-sm font-bold mt-0.5', style: { color: themeColor } }, item.price_display) : null,
+                      item.price_subtext ? h('p', { className: 'text-xs text-gray-400 mt-0.5' }, item.price_subtext) : null
+                    ),
+                    h('button', { onClick: () => onRemove(item.offer_id), className: 'w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-lg text-gray-300 hover:text-red-500 hover:bg-red-50 transition-all opacity-0 group-hover:opacity-100' },
+                      h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                        h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' })
+                      )
+                    )
+                  ))
+                )
+          ),
+          // Footer
+          items.length > 0 ? h('div', { className: 'border-t border-gray-100 px-6 py-5 space-y-4' },
+            h('div', { className: 'flex items-center justify-between' },
+              h('span', { className: 'text-sm font-medium text-gray-500' }, items.length + ' ' + (items.length === 1 ? 'offer' : 'offers') + ' selected'),
+              h('div', { className: 'flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold', style: { backgroundColor: themeColor + '10', color: themeColor } },
+                h('svg', { className: 'w-3.5 h-3.5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' })
+                ),
+                'Added to order'
+              )
+            ),
+            h('div', { className: 'checkout-stub' },
+              h('h3', null, 'Checkout (Dev Stub)'),
+              h('p', null, 'Payment processing is disabled in local dev mode.')
+            )
+          ) : null
+        )
+      );
+    }
+
     // --- Main App ---
     function CatalogPreview({ catalog }) {
       const pages = catalog.pages || {};
@@ -1435,6 +1539,53 @@ function buildPreviewHtml(schema, port) {
       const [currentPageId, setCurrentPageId] = React.useState(routing.entry || pageKeys[0] || null);
       const [formState, setFormState] = React.useState({});
       const [history, setHistory] = React.useState([]);
+      const [cartItems, setCartItems] = React.useState([]);
+      const [cartOpen, setCartOpen] = React.useState(false);
+
+      // --- Cart logic ---
+      const addToCart = React.useCallback((pageId) => {
+        const pg = pages[pageId];
+        if (!pg?.offer) return;
+        const offer = pg.offer;
+        setCartItems(prev => {
+          if (prev.some(item => item.offer_id === offer.id)) return prev;
+          return [...prev, {
+            offer_id: offer.id,
+            page_id: pageId,
+            title: offer.title || pageId,
+            price_display: offer.price_display,
+            price_subtext: offer.price_subtext,
+            image: offer.image,
+          }];
+        });
+      }, [pages]);
+
+      const removeFromCart = React.useCallback((offerId) => {
+        setCartItems(prev => prev.filter(item => item.offer_id !== offerId));
+        // Clear accept_field so it doesn't re-add
+        for (const [pid, pg] of Object.entries(pages)) {
+          if (pg.offer?.id === offerId && pg.offer.accept_field) {
+            setFormState(prev => { const next = { ...prev }; delete next[pg.offer.accept_field]; return next; });
+          }
+        }
+      }, [pages]);
+
+      const toggleCart = React.useCallback(() => setCartOpen(prev => !prev), []);
+
+      // Detect offer acceptance from field changes
+      React.useEffect(() => {
+        for (const [pageId, pg] of Object.entries(pages)) {
+          const offer = pg.offer;
+          if (!offer?.accept_field) continue;
+          const fieldValue = formState[offer.accept_field];
+          const acceptValue = offer.accept_value || 'accept';
+          if (fieldValue === acceptValue) {
+            if (!cartItems.some(item => item.offer_id === offer.id)) addToCart(pageId);
+          } else {
+            if (cartItems.some(item => item.offer_id === offer.id) && fieldValue !== undefined) removeFromCart(offer.id);
+          }
+        }
+      }, [formState, pages, cartItems, addToCart, removeFromCart]);
 
       // Expose navigation for mindmap
       React.useEffect(() => {
@@ -1454,13 +1605,22 @@ function buildPreviewHtml(schema, port) {
       }, []);
 
       const handleNext = React.useCallback(() => {
+        // Check if page has an offer \u2014 treat "Next" as an accept action
+        const currentPage = pages[currentPageId];
+        if (currentPage?.offer) {
+          const acceptValue = currentPage.offer.accept_value || 'accept';
+          // If there's no accept_field, the CTA button itself is the accept trigger
+          if (!currentPage.offer.accept_field) {
+            addToCart(currentPageId);
+          }
+        }
         const nextId = getNextPageId(currentPageId, routing, formState);
         if (nextId && pages[nextId]) {
           setHistory(prev => [...prev, currentPageId]);
           setCurrentPageId(nextId);
           window.scrollTo({ top: 0, behavior: 'smooth' });
         }
-      }, [currentPageId, routing, formState, pages]);
+      }, [currentPageId, routing, formState, pages, addToCart]);
 
       const handleBack = React.useCallback(() => {
         if (history.length > 0) {
@@ -1477,12 +1637,19 @@ function buildPreviewHtml(schema, port) {
         );
       }
 
-      const components = page.components || [];
+      const components = (page.components || []).filter(c => !c.hidden && !c.props?.hidden);
       const bgImage = page.background_image || catalog.settings?.theme?.background_image;
 
+      // Cart UI (shared between cover and standard)
+      const cartUI = h(React.Fragment, null,
+        h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }),
+        h(CartDrawer, { items: cartItems, isOpen: cartOpen, onToggle: toggleCart, onRemove: removeFromCart })
+      );
+
       // Cover page layout
       if (isCover) {
         return h('div', { 'data-page-id': currentPageId },
+          cartUI,
           h('div', {
             className: 'cf-page cf-noise min-h-screen flex items-center justify-center relative overflow-hidden',
             style: {
@@ -1516,6 +1683,7 @@ function buildPreviewHtml(schema, port) {
       const topBarEnabled = topBar?.enabled !== false && catalog.settings?.top_bar;
 
       return h('div', { 'data-page-id': currentPageId },
+        cartUI,
         h('div', {
           className: 'cf-page min-h-screen',
           style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@officexapp/catalogs-cli",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {