@hanzo/commerce 6.1.8 → 6.1.9

package/components/buy/{_to_deprecate_select-category-item-card.tsx → _to_deprecate_select-family-item-card.tsx}

@@ -8,10 +8,10 @@ import { Skeleton } from '@hanzo/ui/primitives'
 import type { ItemSelector, LineItem } from '../../types'
 
 import AddToCartWidget from './add-to-cart-widget'
-import RadioItemSelector from '../select/radio-selector'
+import RadioItemSelector from '../select-product/radio-selector'
 import { formatCurrencyValue } from '../../util'
 
-const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
+const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
   isLoading?: boolean
   mobile?: boolean
   title?: string
@@ -108,4 +108,4 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
   )
 }
 
-export default SelectCategoryItemCard
+export default SelectFamilyItemCard

package/components/buy/{_to_deprecate_select-category-item-panel.tsx → _to_deprecate_select-family-item-panel.tsx}

@@ -6,17 +6,17 @@ import { observer } from 'mobx-react-lite'
 import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
-import type { Category, ObsLineItemRef, LineItem } from '../../types'
+import type { Family, ObsLineItemRef, LineItem } from '../../types'
 import { formatCurrencyValue } from '../../util'
 import { Icons } from '../Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
-import RadioItemSelector from '../select/radio-selector'
+import RadioItemSelector from '../select-product/radio-selector'
 
-const SelectCategoryItemPanel: React.FC<
+const SelectFamilyItemPanel: React.FC<
   React.HTMLAttributes<HTMLDivElement> &   
   {
-    category: Category
+    family: Family
     selectedItemRef: ObsLineItemRef
     selectSku: (sku: string) => void 
     showQuantity?: boolean
@@ -24,7 +24,7 @@ const SelectCategoryItemPanel: React.FC<
     mobile?: boolean
   }
 > = /* NOT observer */ ({
-  category,
+  family,
   selectedItemRef,
   selectSku, 
   className, 
@@ -34,9 +34,9 @@ const SelectCategoryItemPanel: React.FC<
   ...props
 }) => {
 
-  const soleOption = category.products.length === 1
+  const soleOption = family.products.length === 1
 
-  const CategoryImage: React.FC<{ className?: string }> = ({ className = '' }) => {
+  const FamilyImage: React.FC<{ className?: string }> = ({ className = '' }) => {
 
     if (isLoading) {
       // deliberately not Skeleton to have a better overall pulse effect.
@@ -46,16 +46,16 @@ const SelectCategoryItemPanel: React.FC<
         className)} />
     }
 
-    return category.img ? (
+    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={category.img.src}
+              src={family.img.src}
               fill
               sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
-              alt={category.title}
+              alt={family.title}
               className=''
               loading='lazy'
               style={{ objectFit: 'contain' }} />
@@ -77,7 +77,7 @@ const SelectCategoryItemPanel: React.FC<
   const AvailableAmounts: React.FC<{ className?: string }> = observer(({ className = '' }) => {
 
     if (soleOption) return null
-    const mobilePicker = (mobile && category.products.length > 8) 
+    const mobilePicker = (mobile && family.products.length > 8) 
 
     return isLoading ? (
       <Skeleton className={'min-h-[120px] w-pr-60 mx-auto ' + className} />
@@ -92,7 +92,7 @@ const SelectCategoryItemPanel: React.FC<
           <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
           <RadioItemSelector 
-            items={category.products as LineItem[]}
+            items={family.products as LineItem[]}
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
             showQuantity={showQuantity}
@@ -119,10 +119,10 @@ const SelectCategoryItemPanel: React.FC<
 
       <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'>
-        {category.parentTitle && (
-          <span>{category.parentTitle}<br className='md:hidden' /><span className='xs:hidden md:inline '>,&nbsp;</span></span>
+        {family.parentTitle && (
+          <span>{family.parentTitle}<br className='md:hidden' /><span className='xs:hidden md:inline '>,&nbsp;</span></span>
         )}
-          <span>{category.title}</span>
+          <span>{family.title}</span>
         </h3>
         {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
@@ -136,7 +136,7 @@ const SelectCategoryItemPanel: React.FC<
     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)}>{category.desc}</p>
+      <p className={cn('text-base lg:text-lg mb-6 xs:mb-0', className)}>{family.desc}</p>
     )
   )
 
@@ -151,7 +151,7 @@ const SelectCategoryItemPanel: React.FC<
     >
       <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 '} /> ) : (<>
-        <CategoryImage className='w-pr-33' />
+        <FamilyImage className='w-pr-33' />
         <TitleArea className='grow pt-3 mb-0' />
       </>)}
       </div> 
@@ -163,11 +163,11 @@ const SelectCategoryItemPanel: React.FC<
     <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' : '')}>
-          <CategoryImage className='w-full' />
+          <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'>
-            <CategoryImage className='min-w-pr-30' />
+            <FamilyImage className='min-w-pr-30' />
             <TitleArea className='grow' />
           </div>
          
@@ -190,4 +190,4 @@ const SelectCategoryItemPanel: React.FC<
 }
 
 
-export default SelectCategoryItemPanel
+export default SelectFamilyItemPanel

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

@@ -56,7 +56,7 @@ const AddToCartWidget: React.FC<{
       items: [{
         item_id: item.sku,
         item_name: item.title,
-        item_category: item.categoryId,
+        item_category: item.familyId,
         price: item.price,
         quantity: item.quantity
       }],
@@ -93,7 +93,7 @@ const AddToCartWidget: React.FC<{
       items: [{
         item_id: item.sku,
         item_name: item.title,
-        item_category: item.categoryId,
+        item_category: item.familyId,
         price: item.price,
         quantity: item.quantity
       }],

package/components/buy/buy-card.tsx

@@ -4,23 +4,23 @@ import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
 
 import type { 
   SelectedPaths, 
   ItemSelectorProps, 
   ItemSelectorCompProps,
   LineItem, 
-  Category, 
+  Family, 
   ProductTreeNode, 
 } from '../../types'
 
 import { useCommerce } from '../../service/context'
+import SEP from '../../util/sep'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
-import LevelNodesWidget from '../level-nodes-widget'
+import LevelNodesWidget from '../select-family/level-nodes-widget'
 import AddToCartWidget from './add-to-cart-widget'
-import ItemMedia from '../item/item-media'
-import { ApplyTypography } from '@hanzo/ui/primitives'
 
 const BuyCard: React.FC<{
   skuPath: string
@@ -36,20 +36,20 @@ const BuyCard: React.FC<{
   scrollHeightClx?: string
 
   clx?: string
-  catWidgetClx?: string
+  famWidgetClx?: string
   addWidgetClx?: string
 
   selector: ComponentType<ItemSelectorProps>
   selectorProps?: ItemSelectorCompProps 
 
-    /** Show all items from all sibling categories
-     * If skuPath defines a Category, the first of it's items will 
+    /** Show all items from all sibling families
+     * If skuPath defines a Family, the first of it's items will 
      * be selected. The facet widget will just select a the first 
-     * item in the chosen Category without changings the overall set
+     * item in the chosen Family without changings the overall set
      * of choices. */
   allVariants?: boolean
 
-  categoryTabAs?: 'image' | 'label' | 'image-and-label'
+  familyTabAs?: 'image' | 'label' | 'image-and-label'
   showItemMedia?: boolean
 
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
@@ -59,7 +59,7 @@ const BuyCard: React.FC<{
   scrollAfter=5,
   scrollHeightClx='h-[80vh]',
   clx='',
-  catWidgetClx='',
+  famWidgetClx='',
   addWidgetClx='',
   selector: Selector,
   selectorProps={
@@ -68,7 +68,7 @@ const BuyCard: React.FC<{
     itemClx: '',
     ext: {}
   },
-  categoryTabAs='image-and-label', 
+  familyTabAs='image-and-label', 
   showItemMedia=true,
   allVariants=false,
   mobile=false,
@@ -78,19 +78,19 @@ const BuyCard: React.FC<{
   const cmmc = useCommerce()
   const inst = useRef<{
     level: number,
-    requestedCat : Category | undefined
+    requestedFamily : Family | undefined
     requestedNode: ProductTreeNode | undefined
-    currentCat: ObsStringMutator
+    currentFamily: ObsStringMutator
     disposers: IReactionDisposer[]
   } | undefined>(undefined)
 
 
   useEffect(() => {
 
-    let requestedCat = cmmc.getCategory(skuPath) 
-    let requestedNode = requestedCat ? undefined : cmmc.getNodeAtPath(skuPath)
-    let initialCat = undefined
-    const toks = skuPath.split('-')
+    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
     if (level === 0) {
       throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
@@ -99,14 +99,14 @@ const BuyCard: React.FC<{
     for (let l = 1; l <= level; l++ ) {
       paths[l] = [toks[l]]   
     } 
-    if (requestedCat) { 
+    if (requestedFamily) { 
       if (allVariants && level >= 2) {
-          // select all siblings of requestedCat.
+          // select all siblings of requestedFamily.
           // ie, go one level back
         delete paths[level]
-        initialCat = requestedCat
-        requestedCat = undefined
-        requestedNode = cmmc.getNodeAtPath(toks.slice(0, -1).join('-'))
+        initialFamily = requestedFamily
+        requestedFamily = undefined
+        requestedNode = cmmc.getNodeAtPath(toks.slice(0, -1).join(SEP.TOK))
       }
     }
     else {
@@ -114,35 +114,37 @@ const BuyCard: React.FC<{
       if (allVariants) {
         paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
       }
-        // Actually select the the first cat at the cat level, 
+        // Actually select the the first fam at the fam level, 
       else {
         paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
       }
     }
 
-    const selectedCats = cmmc.selectPaths(paths)
-    initialCat = initialCat ? initialCat : (requestedCat ? requestedCat : selectedCats[0])
-    cmmc.setCurrentItem(initialCat.products[0].sku)
-    const currentCat = new ObsStringMutator(initialCat!.id.split('-').pop()!)
+    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()!)
 
     inst.current = {
       level,
-      requestedCat,
+      requestedFamily,
       requestedNode,
-      currentCat,
+      currentFamily,
       disposers: []
     }
 
     if (!allVariants) {
       inst.current?.disposers.push(reaction(
         () => {
-          const cats = cmmc.selectedCategories
-          return (cats.length > 0) ? cats[0].id : undefined
+          const fams = cmmc.selectedFamilies
+          return (fams.length > 0) ? fams[0].id : undefined
         },
-        (catId) => {
-          if (catId && catId !== cmmc.currentItem?.categoryId) {
-            const cat = cmmc.getCategory(catId)
-            cmmc.setCurrentItem(cat?.products[0].sku)
+        (famId) => {
+          if (famId && famId !== cmmc.currentItem?.familyId) {
+            const fam = cmmc.getFamily(famId)
+            if (fam) { 
+              cmmc.setCurrentItem(fam.products[0].sku) 
+            }
           }
         }
       ))
@@ -154,11 +156,11 @@ const BuyCard: React.FC<{
 
   }, [])
 
-  const setCatPath = (pathValue: string | null) => {
-    if (inst.current?.currentCat.get() !== pathValue) {
-      inst.current?.currentCat.set(pathValue) 
+  const setFamilyPath = (pathValue: string | null) => {
+    if (inst.current?.currentFamily.get() !== pathValue) {
+      inst.current?.currentFamily.set(pathValue) 
     }
-    const found = cmmc.selectedItems.find((item) => (item.categoryId.endsWith(pathValue!)))
+    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
     if (found) { 
       cmmc.setCurrentItem(found.sku) 
     }
@@ -166,16 +168,16 @@ const BuyCard: React.FC<{
 
   const selectSku = (sku: string) => {
     cmmc.setCurrentItem(sku)
-    const pathValue = cmmc.currentItem?.categoryId.split('-').pop()!
-    if (pathValue !== inst.current?.currentCat.get()) {
-      inst.current?.currentCat.set(pathValue) 
+    const pathValue = cmmc.currentItem?.familyId.split(SEP.TOK).pop()!
+    if (pathValue !== inst.current?.currentFamily.get()) {
+      inst.current?.currentFamily.set(pathValue) 
     }
   }
 
-  const catTitle = inst.current?.requestedCat ? inst.current.requestedCat.title : cmmc.selectedCategories?.[0]?.title
+  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies?.[0]?.title
 
   const itemsToShow = (!cmmc.hasSelection) ? undefined : 
-    allVariants ? cmmc.selectedItems : cmmc.selectedCategories[0].products as LineItem[]
+    allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
 
 
   const TitleArea: React.FC<{
@@ -212,13 +214,13 @@ const BuyCard: React.FC<{
           'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.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' : ''),
-          catWidgetClx  
+          famWidgetClx  
         )} 
         mobile={mobile}
         mutator={allVariants ? 
           {
-            get: () => (inst.current!.currentCat.s),
-            set: setCatPath
+            get: () => (inst.current!.currentFamily.s),
+            set: setFamilyPath
           }
           : 
           getFacetValuesMutator(inst.current.level + 1, cmmc)
@@ -229,14 +231,14 @@ const BuyCard: React.FC<{
           '!border-level-3'
         }
         levelNodes={inst.current.requestedNode.subNodes!}
-        show={categoryTabAs}
+        show={familyTabAs}
       />
     </>)} 
-    {!inst.current?.requestedNode && catTitle && (
-      <TitleArea title={catTitle} clx=''/>
+    {!inst.current?.requestedNode && famTitle && (
+      <TitleArea title={famTitle} clx=''/>
     )}
     {(cmmc.currentItem && showItemMedia) && (
-      <ItemMedia item={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
     )} 
     {itemsToShow && (
       <Selector 
@@ -245,10 +247,10 @@ const BuyCard: React.FC<{
         selectSku={selectSku}
         {...selectorProps}
         scrollList={scroll}
-        showCategory={selectorProps.showCategory ? 
-          selectorProps.showCategory
+        showFamily={selectorProps.showFamily ? 
+          selectorProps.showFamily
           :
-          (allVariants && !inst.current?.requestedCat)
+          (allVariants && !inst.current?.requestedFamily)
         }
       />  
     )}

package/components/buy/buy-drawer.tsx

@@ -14,10 +14,12 @@ import { cn } from '@hanzo/ui/util'
 
 import { getUISpecFromPath } from '../../util'
 
-import BuyCard from './buy-card'
-import RadioItemSelector from '../select/radio-selector'
-import ImageItemSelector from '../select/image-selector'
-import CarouselItemSelector from '../select/carousel-selector'
+//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'
 
 const BuyDrawer: React.FC<{
   skuPath: string
@@ -59,18 +61,15 @@ 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)}
       >
-        <BuyCard 
+
+        <FamilyCar
           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'}
-          categoryTabAs='label'
-          allVariants={spec.allVariants}
+
         />
+
         <Button
           variant='ghost'
           size='icon'
@@ -86,3 +85,18 @@ const BuyDrawer: React.FC<{
 }
 
 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}
+  />
+*/