@hanzo/commerce 6.4.7 → 7.0.1

package/components/Icons.tsx

@@ -16,7 +16,7 @@ import {
   Barcode
 } from "lucide-react"
 
-export const Icons = {
+export default {
   shoppingCart: ShoppingCart,
   menu: Menu,
   chevronLeft: ChevronLeft,

package/components/{buy/add-to-cart-widget.tsx → add-to-cart-widget.tsx}

@@ -1,16 +1,19 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, toast, type ButtonSizes, type ButtonVariants } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { Button, buttonVariants } from '@hanzo/ui/primitives'
+import { cn, type VariantProps } from '@hanzo/ui/util'
 
-import { Icons } from '../Icons'
-import type { LineItem } from '../../types'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import Icons from './Icons'
+import type { LineItem } from '../types'
+import { sendFBEvent, sendGAEvent } from '../util/analytics'
+import { useCommerceUI } from '..'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
+  registerAdd?: boolean
   disabled?: boolean
   className?: string
   buttonClx?: string
@@ -19,12 +22,36 @@ const AddToCartWidget: React.FC<{
 }> = observer(({
   item,
   variant='primary',
+  registerAdd=true,
   disabled=false,
   className='',
   buttonClx='',
   onQuantityChanged
 }) => {
 
+  const ui = useCommerceUI()
+
+  const reactionDisposer = useRef<IReactionDisposer | undefined>(undefined)
+
+  useEffect(() => {
+      // Only tell the micro-drawer 
+      // if we're not part of the cart ui,
+      // or part of the main drawer.
+    if (registerAdd && variant !== 'minimal') {
+      reactionDisposer.current = reaction(
+        () => (item.quantity),
+        (quantity: number, previous: number) => {
+          ui.itemQuantityChanged(item, quantity, previous)
+        }  
+      )
+    }
+    return () => {
+      if (reactionDisposer.current) {
+        reactionDisposer.current()
+      }  
+    }
+  }, [])
+
   const ROUNDED_VAL = 'lg'
     // no need to safelist, since its used widely
   const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `
@@ -149,7 +176,7 @@ const AddToCartWidget: React.FC<{
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
       size={ghost ? 'xs' : 'default'}
-      variant={variant as ButtonVariants}
+      variant={variant === 'minimal' ? 'ghost' : (variant as VariantProps<typeof buttonVariants>['variant'])}
       rounded={ROUNDED_VAL}
       className={cn(buttonClx, className)}
       onClick={inc}

package/components/buy/buy-button.tsx

@@ -1,31 +1,35 @@
 'use client'
 import React, {type PropsWithChildren} from 'react'
 
-import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
+import { Button, buttonVariants } from '@hanzo/ui/primitives'
+import { type VariantProps } from '@hanzo/ui/util'
 
-import BuyTriggerWrapper from './buy-trigger-wrapper'
 import { cn } from '@hanzo/ui/util'
+import { useCommerceUI } from '../..'
 
-const BuyButton: React.FC<PropsWithChildren & {
-  skuPath: string
-  variant? : ButtonVariants 
-  size?: ButtonSizes  
-  /* rounded?: ButtonRoundedValue // TODO: wait for version bump*/
-  className?: string 
-  mobile?: boolean
-}> = ({
+const BuyButton: React.FC<
+  PropsWithChildren & 
+  VariantProps<typeof buttonVariants> & 
+  {
+    skuPath: string
+    className?: string 
+  }
+> = ({
   skuPath,
-  variant,
-  size,
   children,
   className='',
-  mobile=false
-}) => (
-  <BuyTriggerWrapper skuPath={skuPath} mobile={mobile}
-    trigger={  <Button size={size} variant={variant} className={cn(className, '')}>{children}</Button> }
-  />
-)
+  ...rest
+}) => {
 
+  const ui = useCommerceUI()
+  const handleClick = () => { ui.showBuyOptions(skuPath) }
+  
+  return (
+    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
+      {children}
+    </Button>
+  )
+}
 
 
 export default BuyButton

package/components/buy/buy-card.tsx

@@ -19,7 +19,7 @@ import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
 import NodeTabs from '../node-tabs'
-import AddToCartWidget from './add-to-cart-widget'
+import AddToCartWidget from '../add-to-cart-widget'
 
 const BuyCard: React.FC<{
   skuPath: string
@@ -215,7 +215,7 @@ const BuyCard: React.FC<{
         mobile={mobile}
         mutator={allVariants ? 
           {
-            get: () => (inst.current!.currentFamTokenMutator.s),
+            get: () => (inst.current!.currentFamTokenMutator.get()),
             set: setFamilyPath
           }
           : 
@@ -248,6 +248,7 @@ const BuyCard: React.FC<{
     {(cmmc.currentItem) && (
       <AddToCartWidget 
         item={cmmc.currentItem}
+        registerAdd={false}
         onQuantityChanged={onQuantityChanged} 
         className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
       />

package/components/buy/carousel-buy-card.tsx

@@ -8,7 +8,6 @@ import React, {
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
 
 import type { 
   ItemSelectorProps, 
@@ -29,7 +28,7 @@ import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'
 import SingleFamilySelector from './single-family-selector'
 import { FamilyCarousel, AllVariantsCarousel } from './multi-family'
 
-import AddToCartWidget from './add-to-cart-widget'
+import AddToCartWidget from '../add-to-cart-widget'
 
 const SCROLL = {
   scrollAfter: 5,
@@ -52,15 +51,19 @@ const sortItems = (items: LineItem[], sort: 'asc' | 'desc' | 'none'): LineItem[]
 
 const CarouselBuyCard: React.FC<{
   skuPath: string
+  checkoutButton: React.ReactNode
   clx?: string
+  selectorClx?: string
+  addBtnClx?: string
   mobile?: boolean
-  handleCheckout: () => void
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = ({
   skuPath,
+  checkoutButton,
   clx='',
+  selectorClx='',
+  addBtnClx='',
   mobile=false,
-  handleCheckout,
   onQuantityChanged,
 }) => {
 
@@ -92,6 +95,12 @@ const CarouselBuyCard: React.FC<{
 
   useEffect(() => {
 
+    if (!skuPath || skuPath.length === 0 ) {
+      // The component is being hidden (w an amination)
+      // keep things the same so no layout jump
+      return 
+    }
+
     const peek = cmmc.peek(skuPath)
     if (typeof peek === 'string') {
       throw new Error(peek)
@@ -194,26 +203,18 @@ const CarouselBuyCard: React.FC<{
     <div className={clx}>
       <AddToCartWidget 
         item={cmmc.currentItem}
+        registerAdd={true}
         onQuantityChanged={onQuantityChanged} 
         variant={cmmc.cartEmpty ? 'primary' : 'outline'}
-        className='min-w-[160px] w-full sm:max-w-[320px]' 
+        className={addBtnClx} 
       />
-      {!cmmc.cartEmpty && (
-        <Button 
-          onClick={handleCheckout} 
-          variant='primary' 
-          rounded='lg' 
-          className='min-w-[160px] w-full sm:max-w-[320px]'
-        >
-          Checkout
-        </Button>
-      )}
+      {!cmmc.cartEmpty && checkoutButton}
     </div>
   ) : null))
 
   return (
     <div className={cn(
-      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center min-h-[40vh]', 
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center', 
       clx,
       r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto'
     )}>
@@ -222,13 +223,14 @@ const CarouselBuyCard: React.FC<{
           {...r.current.single} 
           mediaConstraint={MEDIA_CONSTRAINT}
           mobile={mobile} 
+          clx={selectorClx}
         /> 
       ) : (r.current?.multi && r.current.families && /* safegaurd for first render, etc. */ (
         <MultiFamilyUI 
           {...r.current.multi} 
           families={r.current.families} 
           parent={r.current.node}
-          clx='max-w-[475px]'
+          clx={selectorClx}
         />
       ))}
       <Buttons clx={cn(

package/components/buy/multi-family/all-variants-carousel.tsx

@@ -23,7 +23,7 @@ import {
   accessMultiSelectorOptions 
 } from '../../../util'
 
-import QuantityIndicator from '../../quantity-indicator'
+import QuantityIndicator from '../../item-selector/quantity-indicator'
 import { ButtonItemSelector, useCommerce } from '../../..'
 
 const debugBorder = (c: 'r' | 'g' | 'b', disable: boolean = true): string => {
@@ -208,8 +208,8 @@ const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({
     const { showItemSwatches } = accessMultiSelectorOptions(selectorOptions)
     if (
       !showItemSwatches || 
-      !cmmc.currentFamily || 
-      cmmc.currentFamily.products.length === 1
+      !cmmc.currentFamily 
+      //|| cmmc.currentFamily.products.length === 1
     ) {
       return null
     }
@@ -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'/>

package/components/cart/cart-panel/cart-line-item.tsx

@@ -8,7 +8,7 @@ import { Image } from '@hanzo/ui/primitives'
 
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
-import AddToCartWidget from '../../buy/add-to-cart-widget'
+import AddToCartWidget from '../../add-to-cart-widget'
 import { useCommerce } from '../../../context'
 
 const DEF_IMG_SIZE=40
@@ -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'>

package/components/checkout/payment-step-form/contact-form.tsx

@@ -4,8 +4,8 @@ import {
   FormField,
   FormItem,
   FormMessage,
-} from '@hanzo/ui/primitives/form'
-import { Input } from '@hanzo/ui/primitives'
+  Input
+} from '@hanzo/ui/primitives'
 
 import type { ContactFormType } from '../../../types'
  

package/components/index.ts

@@ -1,17 +1,13 @@
-export { default as AddToCartWidget } from './buy/add-to-cart-widget'
-export { default as BuyTriggerWrapper } from './buy/buy-trigger-wrapper'
+export { default as AddToCartWidget } from './add-to-cart-widget'
 export { default as BuyButton } from './buy/buy-button'
-export { default as BuyCard } from './buy/buy-card'
-export { default as BuyDrawer } from './buy/buy-drawer'
+export { default as CarouselBuyCard } from './buy/carousel-buy-card'
 
 export { default as CartAccordian } from './cart/cart-accordian'
 export { default as CartPanel } from './cart/cart-panel'
 
-export { default as NodeTabs } from './node-tabs'
+export { default as Icons } from './Icons'
 export { default as PaymentStepForm } from './checkout/payment-step-form'
-export { default as ShippingStepForm } from './checkout/shipping-step-form'
-
 export { default as ProductCard } from './item/product-card'
-export { Icons } from './Icons'
+export { default as ShippingStepForm } from './checkout/shipping-step-form'
 
 export * from './item-selector'

package/components/item/product-card.tsx

@@ -14,7 +14,7 @@ import { cn } from '@hanzo/ui/util'
 import { formatCurrencyValue } from '../../util'
 import type { LineItem } from '../../types'
 
-import AddToCartWidget from '../buy/add-to-cart-widget'
+import AddToCartWidget from '../add-to-cart-widget'
 
 interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
   item: LineItem
@@ -39,7 +39,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
       </CardTitle>
     </CardContent>
     <CardFooter className='p-4 flex flex-row justify-center'>
-      <AddToCartWidget item={item}/>
+      <AddToCartWidget item={item} />
     </CardFooter>
   </Card>
 )

package/components/item-selector/button.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react-lite'
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
@@ -16,7 +16,7 @@ import type { Dimensions } from '@hanzo/ui/types'
 import type { ItemSelectorProps, LineItem } from '../../types'
 import { accessItemOptions, formatCurrencyValue } from '../../util'
 
-import QuantityIndicator from '../quantity-indicator'
+import QuantityIndicator from './quantity-indicator'
 
 const DEFAULT_CONSTRAINT = {h: 36, w: 72} // // Apple suggest 42px for clickability
 
@@ -78,6 +78,7 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
     showFamilyInOption,
     buttonType,
     horizButtons,
+    showButtonIfOnlyOne
   } = accessItemOptions(options)
 
   const showImage = buttonType !== 'text'
@@ -148,7 +149,7 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
     )
   })
  
-  return items.length > 1 ? (
+  return showButtonIfOnlyOne || items.length > 1 ? (
     <RadioGroup
       className={cn( 
         (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 

package/components/item-selector/carousel/index.tsx

@@ -21,7 +21,7 @@ import {
 import type { ItemSelectorProps, LineItem } from '../../../types'
 import { formatCurrencyValue, accessItemOptions } from '../../../util'
 
-import QuantityIndicator from '../../quantity-indicator'
+import QuantityIndicator from '../quantity-indicator'
 import ItemCarouselSlider from './slider'
 
 const DEFAULT_CONSTRAINT = {w: 250, h: 250}

package/components/{quantity-indicator.tsx → item-selector/quantity-indicator.tsx}

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { type LucideProps } from 'lucide-react'
 
 import { cn } from '@hanzo/ui/util'
-import type { LineItem } from '../types'
+import type { LineItem } from '../../types'
 
   // Generalize this.
 const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (

package/context/commerce-ui.ts

@@ -4,54 +4,94 @@ import {
   makeObservable, 
   observable, 
 } from 'mobx'
+import type { CommerceService, LineItem, ObsLineItemRef } from '../types'
 
-interface CommerceUI {
+
+interface CommerceUI extends ObsLineItemRef {
   showBuyOptions: (skuPath: string) => void
   hideBuyOptions: () => void
+  get buyOptionsSkuPath(): string | undefined
 
-  get buyOptionsShowing(): boolean
-
-  get skuPath(): string | undefined
-  clearSkuPath: () => void
+  itemQuantityChanged(item: LineItem, val: number, prevVal: number): void
 }
 
 class CommerceUIStore implements CommerceUI {
 
-  _skuPath: string | undefined = undefined
-  _optionsShowing: boolean = false
+  static readonly TIMEOUT = 1500
+  _buyOptionsSkuPath: string | undefined = undefined
+  _paused: boolean = false
+  _activeItem: LineItem | undefined = undefined
+  _lastActivity: number | undefined = undefined
+  _service: CommerceService
 
-  constructor() {
+  constructor(s: CommerceService) {
+    this._service = s
     makeObservable(this, {
-      _skuPath: observable, 
-      _optionsShowing: observable,
+      _buyOptionsSkuPath: observable,
+      _activeItem: observable.shallow, 
       showBuyOptions: action,
       hideBuyOptions: action,
-      buyOptionsShowing: computed,
-      skuPath: computed,
-      clearSkuPath: action
+      buyOptionsSkuPath: computed,
+      itemQuantityChanged: action,
+      tick: action,
+      item: computed
     })
   }
 
   showBuyOptions = (skuPath: string): void => {
-    this._skuPath = skuPath
-    this._optionsShowing = true
+    this._service.setCurrentItem(undefined)
+    this._buyOptionsSkuPath = skuPath
+    this._paused = true
   } 
 
   hideBuyOptions = (): void => {
-    this._optionsShowing = false
+    this._buyOptionsSkuPath = undefined
+    this._paused = false
+    if (this._lastActivity) {
+      this._lastActivity = Date.now()
+    }
   }
 
-  get buyOptionsShowing(): boolean {
-    return this._optionsShowing
+  get buyOptionsSkuPath(): string | undefined {
+    return this._buyOptionsSkuPath
   } 
 
-  get skuPath(): string | undefined {
-    return this._skuPath
+  tick = () => {
+    if (
+      !this._paused
+      &&
+      this._lastActivity 
+      && 
+      (Date.now() - this._lastActivity >= CommerceUIStore.TIMEOUT)
+    ) {
+      this._activeItem = undefined
+      this._lastActivity = undefined
+    }
+  }
+
+  itemQuantityChanged = (item: LineItem, val: number, oldVal: number, ): void  => {
+
+    if (val === 0) {
+      if (this._activeItem?.sku === item.sku) {
+        this._activeItem = undefined
+        this._lastActivity = undefined
+      }
+      // otherwise ignore
+    }
+    else if (val < oldVal) {
+      if (this._activeItem?.sku === item.sku) {
+        this._lastActivity = Date.now()
+      }
+      // otherwise ignore
+    }
+    else {
+        this._activeItem = item
+        this._lastActivity = Date.now()
+    }
   } 
 
-  clearSkuPath = (): void => {
-    this._skuPath = undefined
-    this._optionsShowing = false
+  get item(): LineItem | undefined {
+    return this._activeItem
   }
 }
 

package/context/index.tsx

@@ -3,7 +3,8 @@ import React, {
   createContext, 
   useContext, 
   useRef, 
-  type PropsWithChildren 
+  type PropsWithChildren, 
+  useEffect
 } from 'react'
 
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
@@ -36,21 +37,32 @@ 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) }
+  }, [])
+
     // TODO: Inject Promo fixture here from siteDef
-  const serviceRef = useRef<CommerceContextValue>({
-    service: getInstance(families, rootNode, options, uiSpecs),
-    ui: new CommerceUIStore()
-  })
+  const service = getInstance(families, rootNode, options, uiSpecs)
+  const ui = new CommerceUIStore(service)
+
+  const valueRef = useRef<CommerceContextValue>({service, ui})
+
   return (
-    <CommerceContext.Provider value={serviceRef.current}>
+    <CommerceContext.Provider value={valueRef.current}>
       {children}
     </CommerceContext.Provider>
   )
@@ -60,4 +72,5 @@ export {
   useCommerce, 
   useCommerceUI, 
   CommerceProvider
-}
+}
+

package/index.ts

@@ -1,11 +1,13 @@
 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, 
   getFacetValuesMutator, 
   formatCurrencyValue,
-  ProductMediaAccessor 
+  ProductMediaAccessor,
+  LineItemRef 
 } from './util'
 
 export * from './util/selection-ui-specifiers'

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.4.7",
+  "version": "7.0.1",
   "description": "e-commerce framework.",
-  "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
@@ -23,9 +22,7 @@
   "scripts": {
     "lat": "npm show @hanzo/commerce version",
     "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf dist && rm -rf node_modules"
+    "tc": "tsc"
   },
   "exports": {
     ".": "./index.ts",
@@ -34,14 +31,14 @@
     "./debug": "./service/debug.ts"
   },
   "dependencies": {
-    "ethers": "^6.11.1",
-    "next-usequerystate": "^1.17.0",
+    "ethers": "^6.12.0",
+    "next-usequerystate": "^1.17.1",
     "react-square-web-payments-sdk": "^3.2.1",
-    "square": "^35.0.0"
+    "square": "^35.1.0"
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.4.5",
-    "@hanzo/ui": "^3.6.4",
+    "@hanzo/ui": "^3.7.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",
@@ -52,13 +49,13 @@
     "next": "14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "7.50.1",
+    "react-hook-form": "^7.51.3",
     "zod": "3.21.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "cross-fetch": "^4.0.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   }
 }

package/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.hanzo-modules.base.json",
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx", "types/string-mutator.ts",
   ],
   "exclude": [
     "node_modules",

package/types/item-selector.ts

@@ -55,6 +55,9 @@ type ItemSelectorOptions = {
      * default: false */
   showSlider?: boolean
 
+    /** default true */
+  showButtonIfOnlyOne?: boolean
+
     /** 
      * Sort by cost. 
      * If it's a carousel selector and 'showSlider' is true, 

package/util/index.ts

@@ -28,7 +28,6 @@ export function formatCurrencyValue(price: number): string {
   return (str.endsWith('.00')) ? str.replace('.00', '') : str 
 }
 
-
 export const getFacetValuesMutator = (level: number, cmmc: CommerceService): StringMutator => {
 
   const setLevel = (value: string, level: number ): void  => {
@@ -57,7 +56,6 @@ export const getFacetValuesMutator = (level: number, cmmc: CommerceService): Str
   } satisfies StringMutator
 }
 
-
 export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
 export { default as processSquareCardPayment } from './square-payment'
 export { default as ObsStringMutator } from './obs-string-mutator'
@@ -68,4 +66,6 @@ export * from './selection-ui-specifiers'
 export { getErrorMessage } from './error'
 
 export { default as accessItemOptions } from './item-selector-options-accessor'
-export { default as accessMultiSelectorOptions } from './multi-family-selector-options-accessor'
+export { default as accessMultiSelectorOptions } from './multi-family-selector-options-accessor'
+
+export { default as LineItemRef} from './line-item-ref'

package/util/item-selector-options-accessor.ts

@@ -15,6 +15,8 @@ export default (options: ItemSelectorOptions | undefined = {}): Required<ItemSel
   const horizButtons = 'horizButtons' in options ? options.horizButtons! : false
   const showSlider = 'showSlider' in options ? options.showSlider! : true
 
+  const showButtonIfOnlyOne = 'showButtonIfOnlyOne' in options ? options.showButtonIfOnlyOne! : true
+
   const sort = 'sort' in options ? options.sort! : 'none'
 
   return {
@@ -27,6 +29,7 @@ export default (options: ItemSelectorOptions | undefined = {}): Required<ItemSel
     buttonType,
     horizButtons,
     showSlider,
+    showButtonIfOnlyOne,
     sort,
   }
 }

package/util/line-item-ref.ts

@@ -0,0 +1,23 @@
+import { observable, action, computed, makeObservable } from 'mobx'
+
+import type { LineItem, ObsLineItemRef } from '../types'
+
+class LineItemRef implements ObsLineItemRef {
+
+  _item: LineItem | undefined = undefined
+
+  constructor() {
+
+    makeObservable(this, {
+      _item: observable,
+      item: computed,
+      set: action
+    })
+  }
+
+  get item(): LineItem | undefined { return this._item  }
+  
+  set = (v: LineItem | undefined): void => { this._item = v  }
+}
+
+export default LineItemRef

package/util/obs-string-mutator.ts

@@ -1,22 +1,22 @@
+import {makeObservable, observable, action} from 'mobx'
 
-import { makeObservable, observable, action  } from 'mobx'
 import type { StringMutator } from '../types'
 
 class ObsStringMutator implements StringMutator {
 
-  s: string | null
-  constructor(_s: string) {
-    this.s = _s
+  _s: string | null
+
+  constructor(s: string) {
+    this._s = s
     makeObservable(this, {
-      s: observable,
+      _s: observable,
       set: action,
-      //get: computed 
+      //get: computed .// no need 
     })
   }
 
-  set(v: string | null): void { this.s = v }
-  get(): string | null { return this.s }
+  set(v: string | null): void { this._s = v }
+  get(): string | null { return this._s }
 }
 
 export default ObsStringMutator
-

package/components/buy/_to_deprecate_select-family-item-card.tsx

@@ -1,109 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { Skeleton } from '@hanzo/ui/primitives'
-
-import type { ItemSelector, LineItem } from '../../types'
-
-import AddToCartWidget from './add-to-cart-widget'
-import { ButtonItemSelector } from '../item-selector'
-import { formatCurrencyValue } from '../../util'
-
-const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
-  isLoading?: boolean
-  mobile?: boolean
-  title?: string
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = /* NOT observer */({
-  items,
-  selectedItemRef: selItemRef,
-  selectSku,
-  className, 
-  isLoading = false, 
-  mobile = false, 
-  title,
-  onQuantityChanged,
-  ...props
-}) => {
-
-  const soleOption = items.length === 1
-
-  const SelectProductComp: React.FC<{ className?: string }> = ({ 
-    className = '' 
-  }) => {
-
-    const mobilePicker = (mobile || items.length > 6) 
-    if (soleOption) {
-      const item = items[0] as LineItem
-      return (
-        <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg text-center font-semibold'>{item.optionLabel + ', ' + formatCurrencyValue(item.price)}</p>
-        </div>
-      )
-    }
-
-    return (
-      <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
-        'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
-        className
-      )}>
-        {title && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
-        <ButtonItemSelector 
-          items={items}
-          selectedItemRef={selItemRef}  
-          selectSku={selectSku}
-          clx='mt-2'
-          scrollable={false}
-          itemClx='flex flex-row gap-2.5 items-center'
-        />
-      </div>
-    )
-  }
-
-  const AddToCartComp: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-      // TODO disable if nothing selected
-    (selItemRef.item && !isLoading) && (
-      <AddToCartWidget 
-        item={selItemRef.item}
-        onQuantityChanged={onQuantityChanged} 
-        className={cn('lg:min-w-[160px] lg:mx-auto', className)}
-      />
-    ) 
-  ))
-
-  const TitleArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-
-    isLoading ? (<Skeleton className={'h-8 w-full ' + className} />) : (
-
-      <div className={cn('text-center flex flex-col justify-start items-center', className)}>
-        <p className='font-heading text-center'>{title}</p>
-      </div>
-
-  )))
-
-  return mobile ? (
-    <div /* id='CV_OUTER' */ 
-      className={cn(
-        'w-full flex flex-col justify-between items-center gap-5 py-pr-6', 
-        className
-      )} 
-      {...props}
-    >
-      {title && (<TitleArea className='grow pt-3 mb-0' />)}
-      <SelectProductComp className='w-pr-65' />
-      <AddToCartComp className='w-pr-65' />
-    </div>
-  ) : (
-    <div className={cn('', className)} {...props}>
-      {title && (<TitleArea className='' />)}
-      <div className='flex flex-col justify-start items-center gap-4'>
-        <SelectProductComp />
-        <AddToCartComp className='' />
-      </div>
-    </div>
-  )
-}
-
-export default SelectFamilyItemCard

package/components/buy/_to_deprecate_select-family-item-panel.tsx

@@ -1,192 +0,0 @@
-'use client'
-import React from 'react'
-import Image from 'next/image'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { Skeleton } from '@hanzo/ui/primitives'
-
-import type { Family, ObsLineItemRef, LineItem } from '../../types'
-import { formatCurrencyValue } from '../../util'
-import { Icons } from '../Icons'
-
-import AddToCartWidget from './add-to-cart-widget'
-import { ButtonItemSelector } from '../item-selector'
-
-const SelectFamilyItemPanel: React.FC<
-  React.HTMLAttributes<HTMLDivElement> &   
-  {
-    family: Family
-    selectedItemRef: ObsLineItemRef
-    selectSku: (sku: string) => void 
-    showQuantity?: boolean
-    isLoading?: boolean
-    mobile?: boolean
-  }
-> = /* NOT observer */ ({
-  family,
-  selectedItemRef,
-  selectSku, 
-  className, 
-  showQuantity=true,
-  isLoading = false, 
-  mobile = false, 
-  ...props
-}) => {
-
-  const soleOption = family.products.length === 1
-
-  const FamilyImage: React.FC<{ className?: string }> = ({ className = '' }) => {
-
-    if (isLoading) {
-      // deliberately not Skeleton to have a better overall pulse effect.
-      return <div className={cn(
-        'bg-level-1 rounded-xl aspect-square w-full min-h-1 ', // +
-        //' min-h-[100px] sm:min-h-[200px] lg:aspect-auto  2xl:w-auto 2xl:aspect-square',
-        className)} />
-    }
-
-    return family.img ? (
-      // TODO: Why so many div's?
-      <div className={cn('flex flex-col justify-start', className)}>
-        <div className={cn('w-full border rounded-xl p-6 ')}>
-          <div className={cn('w-full aspect-square  relative')}>
-            <Image
-              src={family.img.src}
-              fill
-              sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
-              alt={family.title}
-              className=''
-              loading='lazy'
-              style={{ objectFit: 'contain' }} />
-          </div>
-        </div>
-      </div>
-    ) : (
-      <div
-        aria-label='Placeholder'
-        role='img'
-        aria-roledescription='placeholder'
-        className={cn('w-full flex items-center justify-center aspect-square' , className)}
-      >
-        <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
-      </div>
-    )
-  }
-
-  const AvailableAmounts: React.FC<{ className?: string }> = observer(({ className = '' }) => {
-
-    if (soleOption) return null
-    const mobilePicker = (mobile && family.products.length > 8) 
-
-    return isLoading ? (
-      <Skeleton className={'min-h-[120px] w-pr-60 mx-auto ' + className} />
-    ) : (
-      <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
-        'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
-        (mobilePicker ? 'gap-4' : 'gap-8'),
-        className
-      )}>
-        <div className='w-full flex flex-col justify-start items-center'>
-          <h6 className='text-center font-semibold'>Available options</h6>
-          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
-        </div>
-          <ButtonItemSelector 
-            items={family.products as LineItem[]}
-            selectedItemRef={selectedItemRef}  
-            selectSku={selectSku}
-            options={{ showQuantity }}
-            scrollable={false}
-            clx='block columns-2 gap-4'
-            itemClx='flex flex-row gap-2 items-center mb-2.5'
-          />
-      </div>
-    )
-  })
-
-  const AddToCartArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-    (selectedItemRef.item && !isLoading) ? (
-      <AddToCartWidget item={selectedItemRef.item} className={className}/>
-    ) : (
-      <div className={cn('h-6 w-12 invisible', className)} />
-    )
-  ))
-
-  const TitleArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-
-    isLoading ? (<Skeleton className={'h-12 w-pr-80 mx-auto ' + className} />) : (
-
-      <div className={cn('flex flex-col justify-start items-center', className)}>
-        <h3 className='text-base md:text-lg lg:text-2xl font-heading text-center'>
-        {family.parentTitle && (
-          <span>{family.parentTitle}<br className='md:hidden' /><span className='xs:hidden md:inline '>,&nbsp;</span></span>
-        )}
-          <span>{family.title}</span>
-        </h3>
-        {selectedItemRef.item?.sku ? (
-          <h6 className='text-center font-semibold'>
-            {(soleOption ? '' : (selectedItemRef.item.optionLabel + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
-          </h6>
-        ) : ''}
-      </div>
-  )))
-
-  const Desc: React.FC<{ className?: string }> = ({ className = '' }) => (
-    isLoading ? (
-      <Skeleton className={'min-h-20 w-full grow mx-auto ' + className} />
-    ) : (
-      <p className={cn('text-base lg:text-lg mb-6 xs:mb-0', className)}>{family.desc}</p>
-    )
-  )
-
-  return mobile ? (
-    <div /* id='CV_OUTER' */ 
-      className={cn(
-        'w-full h-[calc(100svh-96px)] max-h-[700px] flex flex-col justify-between ' + 
-        'items-stretch gap-[4vh] mt-[2vh] pb-[6vh]', 
-        className
-      )} 
-      {...props}
-    >
-      <div /* id='CV_TITLE_AND_IMAGE_ROW' */ className='flex flex-row justify-between items-start w-full'>
-      {isLoading ? ( <Skeleton className={'min-h-30 w-full '} /> ) : (<>
-        <FamilyImage className='w-pr-33' />
-        <TitleArea className='grow pt-3 mb-0' />
-      </>)}
-      </div> 
-      <Desc className='' />
-      <AvailableAmounts className='mb-[3vh]' />
-      <AddToCartArea className='w-pr-70 mx-auto' />
-    </div>
-  ) : (
-    <div /* id='CV_OUTERMOST' */>
-      <div /* id='CV_OUTER' */ className={cn('w-full flex flex-row justify-between items-stretch gap-6 sm:gap-4', className)} {...props}>
-        <div /* id='CV_IMAGE_COL_SEP' */ className={'relative ' + (!isLoading ? 'md:hidden sm:min-w-[185px] xl:flex xl:w-pr-40' : '')}>
-          <FamilyImage className='w-full' />
-        </div>
-        <div /* id='CV_CONTENT_COL */ className={'flex flex-col xl:w-pr-60 justify-center ' + (soleOption ? '' : 'gap-6') }>
-          <div /* id='CV_MD_IMAGE_AND_TITLE */ className='hidden md:flex xl:hidden flex-row gap-x-3'>
-            <FamilyImage className='min-w-pr-30' />
-            <TitleArea className='grow' />
-          </div>
-         
-          <div /*  id='CV_CONTENT' */ className={'flex flex-col gap-2.5 ' + (isLoading ? 'justify-between h-full' : '')}>
-            <TitleArea className='md:hidden xl:flex' />
-            <Desc className='' />
-          </div>
-          <div /* id='CV_CTA_AREA_BIG' */ className='hidden lg:flex flex-col justify-start items-center gap-6'>
-            <AvailableAmounts />
-            <AddToCartArea className='' />
-          </div>
-        </div>
-      </div>
-      <div /* id='CV_CTA_AREA_COMPACT' */ className='lg:hidden flex p-4 flex-col justify-start items-center gap-6'>
-        <AvailableAmounts />
-        <AddToCartArea className='' />
-      </div>
-    </div>
-  )
-}
-
-
-export default SelectFamilyItemPanel

package/components/buy/buy-drawer.tsx

@@ -1,83 +0,0 @@
-'use client'
-import React, { useState, type ReactNode } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { X as LucideX} from 'lucide-react'
-
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  Button,
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
-//import BuyCard from './buy-card'
-
-import CarouselBuyCard from './carousel-buy-card'
-
-const BuyDrawer: React.FC<{
-  skuPath: string
-  trigger: ReactNode
-  triggerClx?: string  
-  drawerClx?: string
-  cardClx?: string
-  mobile?: boolean
-}> = ({
-  skuPath,
-  trigger,
-  triggerClx='',
-  drawerClx='',
-  cardClx='',
-  mobile=false
-}) => {
-
-  const [open, setOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen} >
-      <DrawerTrigger asChild className={triggerClx}>
-        {trigger}
-      </DrawerTrigger>
-      <DrawerContent 
-        className={cn('rounded-t-xl mt-6 pb-12 h-auto min-h-[35vh] pt-6 md:max-w-[550px] md:mx-auto lg:max-w-[50vw]', drawerClx)}
-      >
-        <CarouselBuyCard 
-          skuPath={skuPath} 
-          handleCheckout={() => {router.push('/checkout')}} 
-          mobile={mobile} 
-          clx={cn('w-full', cardClx)}
-        />
-
-        <Button
-          variant='ghost'
-          size='icon'
-          onClick={() => {setOpen(false)}}
-          className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
-        >
-          <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
-        </Button>    
-
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default BuyDrawer
-
-/*
-  <BuyCard 
-    skuPath={skuPath} 
-    scrollAfter={spec.selector === 'carousel' ? 999 : undefined}
-    mobile={mobile} 
-    onQuantityChanged={onQuantityChanged} 
-    clx={cn('w-full', cardClx)}
-    selector={selector}
-    selectorProps={{soleItemClx:'mb-3'}}
-    showItemMedia={spec.selector !== 'carousel'}
-    familyTabAs='label'
-    allVariants={spec.allVariants}
-  />
-*/

package/components/buy/buy-trigger-wrapper.tsx

@@ -1,20 +0,0 @@
-'use client'
-import React from 'react'
-
-import BuyDrawer from './buy-drawer'
-
-const BuyTriggerWrapper: React.FC<{
-  skuPath: string
-  trigger: React.ReactNode
-  mobileTrigger?: React.ReactNode
-  mobile?: boolean
-}> = ({
-  skuPath,
-  trigger,
-  mobileTrigger,
-  mobile
-}) => (
-  <BuyDrawer skuPath={skuPath} trigger={trigger} mobile={mobile}/>
-)
-
-export default BuyTriggerWrapper

package/components/buy/please-keep.txt

@@ -1,27 +0,0 @@
-    {/*
-      <NodeTabs
-        className={cn(
-          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.parentNode.subNodes!.length}`, 
-          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
-          (scroll ? 'shrink-0' : ''),
-          famWidgetClx  
-        )} 
-        mobile={mobile}
-        mutator={allVariants ? 
-          {
-            get: () => (inst.current!.currentFamily.s),
-            set: setFamilyPath
-          }
-          : 
-          getFacetValuesMutator(inst.current.level + 1, cmmc)
-        } 
-        itemClx='flex-col h-auto gap-0 py-1 px-3'
-        buttonClx={
-          'h-full ' +
-          '!border-level-3'
-        }
-        levelNodes={inst.current.parentNode.subNodes!}
-        show={familyTabAs}
-      />
-      */}
-    </>)} 

package/components/cart/cart-icon.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const CartIcon: React.FC<LucideProps> = (props: LucideProps) => (
-<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' {...props}>
-  <path d='m3.731 8-1.231 20h27l-1.231-20zm1.991 2.103h20.557l.972 15.794h-22.502l.972-15.794z'/>
-  <path d='m20.718 8.134c0-2.375-1.932-4.307-4.307-4.307s-4.307 1.932-4.307 4.307h-2.084c0-3.524 2.867-6.391 6.391-6.391s6.391 2.867 6.391 6.391z'/>
-</svg>)
-
-export default CartIcon