@hanzo/commerce 6.1.12 → 6.2.0

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

@@ -8,7 +8,7 @@ import { Skeleton } from '@hanzo/ui/primitives'
 import type { ItemSelector, LineItem } from '../../types'
 
 import AddToCartWidget from './add-to-cart-widget'
-import RadioItemSelector from '../select-product/radio-selector'
+import { ButtonItemSelector } from '../item-selector'
 import { formatCurrencyValue } from '../../util'
 
 const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
@@ -50,13 +50,12 @@ const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & Item
         className
       )}>
         {title && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
-        <RadioItemSelector 
+        <ButtonItemSelector 
           items={items}
           selectedItemRef={selItemRef}  
           selectSku={selectSku}
           clx='mt-2'
-          showQuantity={false}
-          scrollList={false}
+          scrollable={false}
           itemClx='flex flex-row gap-2.5 items-center'
         />
       </div>

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

@@ -11,7 +11,7 @@ import { formatCurrencyValue } from '../../util'
 import { Icons } from '../Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
-import RadioItemSelector from '../select-product/radio-selector'
+import { ButtonItemSelector } from '../item-selector'
 
 const SelectFamilyItemPanel: React.FC<
   React.HTMLAttributes<HTMLDivElement> &   
@@ -91,13 +91,12 @@ const SelectFamilyItemPanel: React.FC<
           <h6 className='text-center font-semibold'>Available options</h6>
           <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
-          <RadioItemSelector 
+          <ButtonItemSelector 
             items={family.products as LineItem[]}
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
-            showQuantity={showQuantity}
-                      scrollList={false}
-
+            options={{ showQuantity }}
+            scrollable={false}
             clx='block columns-2 gap-4'
             itemClx='flex flex-row gap-2 items-center mb-2.5'
           />

package/components/buy/add-to-cart-widget.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Button, toast, type ButtonSizes } from '@hanzo/ui/primitives'
+import { Button, toast, type ButtonSizes, type ButtonVariants } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import { Icons } from '../Icons'
@@ -11,15 +11,15 @@ import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
-  ghost?: boolean
   disabled?: boolean
   className?: string
   buttonClx?: string
   size?: ButtonSizes
+  variant?: 'minimal' | 'primary' | 'outline'
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
   item,
-  ghost=false,
+  variant='primary',
   disabled=false,
   className='',
   buttonClx='',
@@ -27,12 +27,23 @@ const AddToCartWidget: React.FC<{
   onQuantityChanged
 }) => {
 
-  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1 opacity-50'
-  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-semibold text-primary-fg '
+  const ROUNDED_VAL = 'lg'
+    // no need to safelist, since its used widely
+  const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `
+
+  const ghost = variant === 'minimal'
+  const outline = variant === 'outline'
+  const primary = variant === 'primary'
+
+  let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : 'h-5 w-7 px-1 opacity-70 '
+  iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100'
+
+  let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold '
+  digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg '
 
   if (disabled) {
     return (
-      <div className={cn('flex flex-row items-stretch ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-primary rounded-xl'), className)}>
+      <div className={cn('flex flex-row items-stretch' + ROUNDED_CLX +  (!primary ? 'bg-transparent' : 'bg-primary'), className)}>
         <div className={'text-sm flex items-center cursor-default ' + digitClx} >{item.quantity}</div>
       </div>
     )
@@ -44,14 +55,6 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old + 1) 
     }
-    /*
-    if (old === 0) {
-      toast(`Added ${item.title} to your bag.`)
-    }
-    else {
-      toast(`Changed quantity to ${old + 1} for ${item.title}.`)
-    }
-    */
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -81,14 +84,6 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old - 1) 
     }
-    /*
-    if (old === 1) {
-      toast(`Removed ${item.title} from your bag.`)
-    }
-    else {
-      toast(`Changed quantity to ${old - 1} for ${item.title}.`)
-    }
-    */
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,
@@ -103,13 +98,24 @@ const AddToCartWidget: React.FC<{
   }
 
   return ( item.isInCart ? (
-    <div className={cn('flex flex-row items-stretch justify-center ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-primary rounded-xl'), className)}>
+    <div className={cn(
+      'flex flex-row items-stretch justify-between ',
+      ROUNDED_CLX,
+      (primary ? 'bg-primary' : 'bg-transparent'), 
+      (outline ? 'border border-muted' : ''),
+      className
+    )}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
         size={size}
-        variant={ghost ? 'ghost' : 'primary'}
-        rounded={ghost ? 'full' : 'xl'}
-        className={cn('px-1 lg:min-w-0 lg:px-2  xs:justify-end', buttonClx)}
+        variant={primary ? 'primary' : 'ghost'}
+        rounded={ghost ? 'full' : ROUNDED_VAL}
+        className={cn(
+          'lg:min-w-0 lg:px-2 grow justify-start group', 
+          (ghost ? 'px-1' : 'px-2'), 
+          (outline ? 'hover:bg-transparent' : ''),
+          buttonClx
+        )}
         key='left'
         onClick={dec}
       >
@@ -119,13 +125,18 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
+        <div className={'text-sm grow-0 shrink-0 flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}
-        variant={ghost ? 'ghost' : 'primary'}
-        rounded={ghost ? 'full' : 'xl'}
-        className={cn('px-1 lg:min-w-0 lg:px-2 xs:justify-start', buttonClx)}
+        variant={primary ? 'primary' : 'ghost'}
+        rounded={ghost ? 'full' : ROUNDED_VAL}
+        className={cn(
+          'lg:min-w-0 lg:px-2 grow justify-end group', 
+          (ghost ? 'px-1' : 'px-2'), 
+          (outline ? 'hover:bg-transparent' : ''),
+          buttonClx
+        )}
         onClick={inc}
         key='right'
       >
@@ -136,8 +147,8 @@ const AddToCartWidget: React.FC<{
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
       size={size}
-      variant='primary'
-      rounded='xl'
+      variant={variant as ButtonVariants}
+      rounded={ROUNDED_VAL}
       className={cn(buttonClx, className)}
       onClick={inc}
     >

package/components/buy/buy-button.tsx

@@ -10,7 +10,7 @@ const BuyButton: React.FC<PropsWithChildren & {
   skuPath: string
   variant? : ButtonVariants 
   size?: ButtonSizes  
-  /* rounded?: ButtonRounded // TODO: wait for version bump*/
+  /* rounded?: ButtonRoundedValue // TODO: wait for version bump*/
   className?: string 
   mobile?: boolean
 }> = ({

package/components/buy/buy-card.tsx

@@ -7,16 +7,15 @@ import { cn } from '@hanzo/ui/util'
 import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
 
 import type { 
-  SelectedPaths, 
   ItemSelectorProps, 
   ItemSelectorCompProps,
   LineItem, 
   Family, 
-  ProductTreeNode, 
+  CategoryNode, 
 } from '../../types'
 
 import { useCommerce } from '../../service/context'
-import SEP from '../../util/sep'
+import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
 import LevelNodesWidget from '../select-family/level-nodes-widget'
@@ -79,8 +78,8 @@ const BuyCard: React.FC<{
   const inst = useRef<{
     level: number,
     requestedFamily : Family | undefined
-    requestedNode: ProductTreeNode | undefined
-    currentFamily: ObsStringMutator
+    requestedNode: CategoryNode | undefined
+    currentFamTokenMutator: ObsStringMutator
     disposers: IReactionDisposer[]
   } | undefined>(undefined)
 
@@ -90,15 +89,12 @@ const BuyCard: React.FC<{
     let requestedFamily = cmmc.getFamily(skuPath) 
     let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
     let initialFamily = undefined
-    const toks = skuPath.split(SEP.TOK)
-    const level = toks.length - 1
+
+    const { paths, level } = pathUtils.getSelectedPaths(skuPath)
+
     if (level === 0) {
       throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
     }
-    const paths: SelectedPaths = {}
-    for (let l = 1; l <= level; l++ ) {
-      paths[l] = [toks[l]]   
-    } 
     if (requestedFamily) { 
       if (allVariants && level >= 2) {
           // select all siblings of requestedFamily.
@@ -106,7 +102,7 @@ const BuyCard: React.FC<{
         delete paths[level]
         initialFamily = requestedFamily
         requestedFamily = undefined
-        requestedNode = cmmc.getNodeAtPath(toks.slice(0, -1).join(SEP.TOK))
+        requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath))
       }
     }
     else {
@@ -123,13 +119,13 @@ const BuyCard: React.FC<{
     const selectedFams = cmmc.selectPaths(paths)
     initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0])
     cmmc.setCurrentItem(initialFamily.products[0].sku)
-    const currentFamily = new ObsStringMutator(initialFamily!.id.split(SEP.TOK).pop()!)
+    const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily!.id))
 
     inst.current = {
       level,
       requestedFamily,
       requestedNode,
-      currentFamily,
+      currentFamTokenMutator,
       disposers: []
     }
 
@@ -157,8 +153,8 @@ const BuyCard: React.FC<{
   }, [])
 
   const setFamilyPath = (pathValue: string | null) => {
-    if (inst.current?.currentFamily.get() !== pathValue) {
-      inst.current?.currentFamily.set(pathValue) 
+    if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
     }
     const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
     if (found) { 
@@ -168,9 +164,9 @@ const BuyCard: React.FC<{
 
   const selectSku = (sku: string) => {
     cmmc.setCurrentItem(sku)
-    const pathValue = cmmc.currentItem?.familyId.split(SEP.TOK).pop()!
-    if (pathValue !== inst.current?.currentFamily.get()) {
-      inst.current?.currentFamily.set(pathValue) 
+    const pathValue = pathUtils.lastToken(cmmc.currentItem!.familyId)
+    if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
     }
   }
 
@@ -219,7 +215,7 @@ const BuyCard: React.FC<{
         mobile={mobile}
         mutator={allVariants ? 
           {
-            get: () => (inst.current!.currentFamily.s),
+            get: () => (inst.current!.currentFamTokenMutator.s),
             set: setFamilyPath
           }
           : 
@@ -246,12 +242,7 @@ const BuyCard: React.FC<{
         selectedItemRef={cmmc}
         selectSku={selectSku}
         {...selectorProps}
-        scrollList={scroll}
-        showFamily={selectorProps.showFamily ? 
-          selectorProps.showFamily
-          :
-          (allVariants && !inst.current?.requestedFamily)
-        }
+        scrollable={scroll}
       />  
     )}
     {(cmmc.currentItem) && (

package/components/buy/buy-drawer.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, { useState, type ReactNode } from 'react'
+import { useRouter } from 'next/navigation'
 
 import { X as LucideX} from 'lucide-react'
 
@@ -12,14 +13,9 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { getUISpecFromPath } from '../../util'
-
 //import BuyCard from './buy-card'
-import FamilyCar from '../select-family/family-carousel'
 
-import RadioItemSelector from '../select-product/radio-selector'
-import ImageItemSelector from '../select-product/image-selector'
-import CarouselItemSelector from '../select-product/carousel-selector'
+import CarouselBuyCard from './carousel-buy-card'
 
 const BuyDrawer: React.FC<{
   skuPath: string
@@ -38,20 +34,7 @@ const BuyDrawer: React.FC<{
 }) => {
 
   const [open, setOpen] = useState<boolean>(false)
-
-  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
-    //if (oldV === 0 && newV === 1) {
-    //  setTimeout(() => {setOpen(false)}, 150)
-    //}
-  }
-
-  const spec = getUISpecFromPath(skuPath) ?? {
-    selector: 'radio',
-    allVariants: false
-  }
-
-  const selector = spec.selector === 'radio' ? RadioItemSelector :
-    (spec.selector === 'image' ? ImageItemSelector : CarouselItemSelector)
+  const router = useRouter()
 
   return (
     <Drawer open={open} onOpenChange={setOpen} >
@@ -61,13 +44,11 @@ const BuyDrawer: React.FC<{
       <DrawerContent 
         className={cn('rounded-t-xl mt-6 pb-12 h-auto min-h-[35vh] pt-6 md:max-w-[550px] md:mx-auto', drawerClx)}
       >
-
-        <FamilyCar
+        <CarouselBuyCard 
           skuPath={skuPath} 
+          handleCheckout={() => {router.push('/checkout')}} 
           mobile={mobile} 
-          onQuantityChanged={onQuantityChanged} 
           clx={cn('w-full', cardClx)}
-
         />
 
         <Button