From 8ee3708eedd4ee1f3831d6a59be8a2a7038704ed Mon Sep 17 00:00:00 2001
From: artem ash <artemisprimedev@gmail.com>
Date: Tue, 30 Apr 2024 14:34:47 -0700
Subject: [PATCH] fix: AllVariantsCarousel: next / prev show even if only one
 item; others

---
 .../commerce/components/buy/carousel-buy-card.tsx  |  2 +-
 .../buy/multi-family/all-variants-carousel.tsx     |  6 ++++--
 .../components/cart/cart-panel/cart-line-item.tsx  |  2 +-
 packages/commerce/context/commerce-ui.ts           | 14 ++++++--------
 packages/commerce/context/index.tsx                |  7 +++++--
 packages/commerce/index.ts                         |  1 +
 packages/commerce/util/line-item-ref.ts            |  1 +
 7 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/commerce/components/buy/carousel-buy-card.tsx b/packages/commerce/components/buy/carousel-buy-card.tsx
index 7f701343..81b96556 100644
--- a/packages/commerce/components/buy/carousel-buy-card.tsx
+++ b/packages/commerce/components/buy/carousel-buy-card.tsx
@@ -203,7 +203,7 @@ const CarouselBuyCard: React.FC<{
     <div className={clx}>
       <AddToCartWidget 
         item={cmmc.currentItem}
-        registerAdd={false}
+        registerAdd={true}
         onQuantityChanged={onQuantityChanged} 
         variant={cmmc.cartEmpty ? 'primary' : 'outline'}
         className={addBtnClx} 
diff --git a/packages/commerce/components/buy/multi-family/all-variants-carousel.tsx b/packages/commerce/components/buy/multi-family/all-variants-carousel.tsx
index 9e386506..e27443c3 100644
--- a/packages/commerce/components/buy/multi-family/all-variants-carousel.tsx
+++ b/packages/commerce/components/buy/multi-family/all-variants-carousel.tsx
@@ -242,8 +242,10 @@ const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({
             </CarouselItem>
           ))}
           </CarouselContent>
-          <CarouselPrevious className='left-1'/>
-          <CarouselNext className='right-1'/>
+          {r.current.items.length > 1 && (<>
+            <CarouselPrevious className='left-1'/>
+            <CarouselNext className='right-1'/>
+          </>)}
         </Carousel>
       )}
       <ItemInfo labelClx='!text-base font-medium'/>
diff --git a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx
index 69cb91c5..4ed4f7a4 100644
--- a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx
+++ b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx
@@ -61,7 +61,7 @@ const CartLineItem: React.FC<{
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
+          <AddToCartWidget variant='minimal' registerAdd={false} item={item} buttonClx='!h-8 md:!h-6' />
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>
diff --git a/packages/commerce/context/commerce-ui.ts b/packages/commerce/context/commerce-ui.ts
index 07e4a4f9..afac2f7c 100644
--- a/packages/commerce/context/commerce-ui.ts
+++ b/packages/commerce/context/commerce-ui.ts
@@ -4,22 +4,20 @@ import {
   makeObservable, 
   observable, 
 } from 'mobx'
-import type { CommerceService, LineItem } from '../types'
+import type { CommerceService, LineItem, ObsLineItemRef } from '../types'
 
 
-
-interface CommerceUI {
+interface CommerceUI extends ObsLineItemRef {
   showBuyOptions: (skuPath: string) => void
   hideBuyOptions: () => void
   get buyOptionsSkuPath(): string | undefined
 
-  itemQuantityChanged(item: LineItem, val: number, prevVal: number): void 
-  get activeItem(): LineItem | undefined
+  itemQuantityChanged(item: LineItem, val: number, prevVal: number): void
 }
 
 class CommerceUIStore implements CommerceUI {
 
-  static readonly TIMEOUT = 2500
+  static readonly TIMEOUT = 1500
   _buyOptionsSkuPath: string | undefined = undefined
   _paused: boolean = false
   _activeItem: LineItem | undefined = undefined
@@ -36,7 +34,7 @@ class CommerceUIStore implements CommerceUI {
       buyOptionsSkuPath: computed,
       itemQuantityChanged: action,
       tick: action,
-      activeItem: computed
+      item: computed
     })
   }
 
@@ -92,7 +90,7 @@ class CommerceUIStore implements CommerceUI {
     }
   } 
 
-  get activeItem(): LineItem | undefined {
+  get item(): LineItem | undefined {
     return this._activeItem
   }
 }
diff --git a/packages/commerce/context/index.tsx b/packages/commerce/context/index.tsx
index c6e7dc14..61989d47 100644
--- a/packages/commerce/context/index.tsx
+++ b/packages/commerce/context/index.tsx
@@ -37,19 +37,22 @@ const CommerceProvider: React.FC<PropsWithChildren & {
   rootNode: CategoryNode
   options?: ServiceOptions
   uiSpecs?: Record<string, SelectionUISpecifier>
+  DEBUG_NO_TICK?: boolean
 }> = ({ 
   children,
   families,
   rootNode,
   options,
-  uiSpecs
+  uiSpecs,
+  DEBUG_NO_TICK=false
 }) => {
 
   useEffect(() => {
+    if (DEBUG_NO_TICK) return
     const intervalId = setInterval(() => {
       (valueRef.current.ui as CommerceUIStore).tick()   
     }, 250)  
-    return () => {clearInterval(intervalId)}
+    return () => { clearInterval(intervalId) }
   }, [])
 
     // TODO: Inject Promo fixture here from siteDef
diff --git a/packages/commerce/index.ts b/packages/commerce/index.ts
index 77a5e7e4..721c6484 100644
--- a/packages/commerce/index.ts
+++ b/packages/commerce/index.ts
@@ -1,5 +1,6 @@
 export * from './context'
 export * from './components'
+  // Impl-dependent, so leave w impl
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
 export { 
   useSyncSkuParamWithCurrentItem, 
diff --git a/packages/commerce/util/line-item-ref.ts b/packages/commerce/util/line-item-ref.ts
index b6d888f6..da560f11 100644
--- a/packages/commerce/util/line-item-ref.ts
+++ b/packages/commerce/util/line-item-ref.ts
@@ -16,6 +16,7 @@ class LineItemRef implements ObsLineItemRef {
   }
 
   get item(): LineItem | undefined { return this._item  }
+  
   set = (v: LineItem | undefined): void => { this._item = v  }
 }