@hanzo/commerce 5.1.2 → 6.0.0

package/service/impls/standalone/standalone-service.ts

@@ -13,8 +13,8 @@ import type {
   CommerceService, 
   Category, 
   LineItem,
-  FacetsValue, 
-  FacetValueDesc,
+  SelectedPaths, 
+  ProductTreeNode,
   Promo
 } from '../../../types'
 
@@ -42,8 +42,8 @@ class StandaloneService
   implements CommerceService
 {
   private _categoryMap = new Map<string, Category>()
-  private _rootFacet: FacetValueDesc 
-  private _selectedFacets: FacetsValue = {}
+  private _rootNode: ProductTreeNode 
+  private _selectedPaths: SelectedPaths = {}
   private _promo: Promo | null = null
 
   private _options : StandaloneServiceOptions
@@ -51,12 +51,12 @@ class StandaloneService
 
   constructor(
     categories: Category[],
-    rootFacet: FacetValueDesc,
+    rootNode: ProductTreeNode,
     options: StandaloneServiceOptions,
     serviceSnapshot?: StandaloneServiceSnapshot,
   ) {
 
-    this._rootFacet = rootFacet
+    this._rootNode = rootNode
     this._options = options
 
     categories.forEach((c) => {
@@ -74,11 +74,11 @@ class StandaloneService
 
     makeObservable<
       StandaloneService, 
-        '_selectedFacets' | 
+        '_selectedPaths' | 
         '_currentItem' |
         '_promo'
     >(this, {
-      _selectedFacets :  observable.deep,
+      _selectedPaths :  observable.deep,
       _currentItem: observable,
       _promo: observable,
     })
@@ -89,54 +89,52 @@ class StandaloneService
       cartTotal: computed,
       promoAppliedCartTotal: computed,
       cartEmpty: computed,
-      specifiedItems: computed,
-      specifiedCategories: computed, 
+      selectedItems: computed,
+      selectedCategories: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
-      facetsValue: computed,
+      selectedPaths: computed,
       appliedPromo: computed,
       setAppliedPromo: action,
-      /* NOT setFacets. It implements it's action mechanism */
+      /* NOT selectPaths. It implements it's action mechanism */
     })
   }
 
-
   getCategory(id: string): Category | undefined {
     return this._categoryMap.get(id)
   }
 
-  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | undefined {
+  getNodeAtPath(skuPath: string): ProductTreeNode | undefined {
     const toks = skuPath.split(SEP)
     let level = 1
-    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+    let desc: ProductTreeNode | undefined = this._rootNode
     do {
-      const fvalue = valuesAtLevel!.find((vf) => (vf.value === toks[level])) 
-      valuesAtLevel = fvalue ? fvalue.sub : undefined
+      desc = desc!.subNodes?.find((vf) => (vf.skuToken === toks[level])) 
       level++
     }
-    while (valuesAtLevel && (level < toks.length))
-    return level === toks.length ? valuesAtLevel : undefined 
+    while (desc && (level < toks.length))
+    return level === toks.length ? desc : undefined 
   } 
 
-  getFacetValuesSpecified = computedFn((level: number): FacetValueDesc[] | undefined => {
+  getSelectedNodesAtLevel = computedFn((level: number): ProductTreeNode[] | undefined => {
 
     let lvl = 1
-    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+    let valuesAtLevel: ProductTreeNode[] | undefined  = this._rootNode.subNodes
 
     do {
-      let selectedAtLevel: FacetValueDesc[] | undefined = undefined
+      let selectedAtLevel: ProductTreeNode[] | undefined = undefined
         // If not specified, assume all
-      if (lvl in this._selectedFacets) {
-        selectedAtLevel = valuesAtLevel!.filter((fv) => (this._selectedFacets[lvl].includes(fv.value))) 
+      if (lvl in this._selectedPaths) {
+        selectedAtLevel = valuesAtLevel!.filter((fv) => (this._selectedPaths[lvl].includes(fv.skuToken))) 
       }
       else {
         selectedAtLevel = valuesAtLevel 
       }
-      let allSubsOfSelected: FacetValueDesc[] = []
-      selectedAtLevel?.forEach((fvd: FacetValueDesc) => {
-        if (fvd.sub) {
-          allSubsOfSelected = [...allSubsOfSelected, ...fvd.sub] 
+      let allSubsOfSelected: ProductTreeNode[] = []
+      selectedAtLevel?.forEach((fvd: ProductTreeNode) => {
+        if (fvd.subNodes) {
+          allSubsOfSelected = [...allSubsOfSelected, ...fvd.subNodes] 
         }  
       })
 
@@ -199,11 +197,9 @@ class StandaloneService
     if (!this._promo) {
       return this.cartTotal
     }
-
     if (!this._promo.skus) {
       return this._promoValue_unsafe(this.cartTotal)
     }
-
     let total = this.cartItems.reduce(
       (total, item) => {
         const itemPrice = this._promo!.skus!.includes(item.sku) ? 
@@ -214,7 +210,6 @@ class StandaloneService
       }, 
       0
     )
-      
     return total
   }
 
@@ -250,8 +245,8 @@ class StandaloneService
     this._currentItem = ((): ActualLineItem | undefined  => {
 
       const categoriesTried: string[] = []
-      if (this.specifiedCategories && this.specifiedCategories.length > 0) {
-          for (let category of this.specifiedCategories) {
+      if (this.selectedCategories && this.selectedCategories.length > 0) {
+          for (let category of this.selectedCategories) {
           categoriesTried.push(category.id)
           const foundItem = category.products.find((p) => (p.sku === skuToFind))
           if (foundItem) {
@@ -281,52 +276,61 @@ class StandaloneService
     return this._currentItem
   }
 
-  setFacets(sel: FacetsValue): Category[] {
+  selectPaths(sel: SelectedPaths): Category[] {
     runInAction (() => {
-      this._selectedFacets = this._processAndValidate(sel) 
+      this._selectedPaths = this._processAndValidate(sel) 
     })
-    return this.specifiedCategories
+    return this.selectedCategories
+  }
+
+  selectPath(skuPath: string): Category[] {
+    const toks = skuPath.split(SEP)
+    const highestLevel = toks.length - 1
+    const fsv: SelectedPaths = {}
+    for (let level = 1; level <= highestLevel; level++ ) {
+      fsv[level] = [toks[level]]   
+    } 
+    return this.selectPaths(fsv)
   }
 
-  get facetsValue(): FacetsValue {
-    const result: FacetsValue = {}
-    for( let level in this._selectedFacets ) {
-      result[level] = [...this._selectedFacets[level]]
+  get selectedPaths(): SelectedPaths {
+    const result: SelectedPaths = {}
+    for( let level in this._selectedPaths ) {
+      result[level] = [...this._selectedPaths[level]]
     }
     return result
   }
 
-
-  get specifiedCategories(): Category[] {
-    if (Object.keys(toJS(this._selectedFacets)).length === 0) {
+  get selectedCategories(): Category[] {
+    if (Object.keys(toJS(this._selectedPaths)).length === 0) {
       // FacetsDesc have never been set or unset, so cannot evaluate them
       return []
     }
 
-    return this._rootFacet.sub!.reduce(
-      (acc: Category[], subFacet: FacetValueDesc) => (
+    return this._rootNode.subNodes!.reduce(
+      (acc: Category[], subFacet: ProductTreeNode) => (
           // Pass the root token as a one member array
-        this._reduceNode([this._rootFacet.value], acc, subFacet)   
+        this._reduceNode([this._rootNode.skuToken], acc, subFacet)   
       ), 
       []
     )
   }
 
-  private _reduceNode(parentPath: string[], acc: Category[], node: FacetValueDesc): Category[] {
-    const path = [...parentPath, node.value] // Don't mutate original please :) 
+  private _reduceNode(parentPath: string[], acc: Category[], node: ProductTreeNode): Category[] {
+    const path = [...parentPath, node.skuToken] // Don't mutate original please :) 
     const level = path.length - 1
       // If there is no token array supplied for this level,
       // assume all are specified.  Otherwise, see if the 
       // current node is in the array
     const specified = (
-      !this._selectedFacets[level] 
+      !this._selectedPaths[level] 
       || 
-      this._selectedFacets[level].includes(node.value)
+      this._selectedPaths[level].includes(node.skuToken)
     ) 
     if (specified) {
         // Process subnodes
-      if (node.sub && node.sub.length > 0) {
-        return node.sub.reduce((acc, n) => (
+      if (node.subNodes && node.subNodes.length > 0) {
+        return node.subNodes.reduce((acc, n) => (
           this._reduceNode(path, acc, n)
         ) 
         , acc)
@@ -334,30 +338,30 @@ class StandaloneService
         // Process leaf
       const cat = this._categoryMap.get(path.join(SEP))
       if (!cat) {
-        throw new Error("specifiedCategories WTF?!" + path.join(SEP))
+        throw new Error("selectedCategories WTF?!" + path.join(SEP))
       }
       acc.push(cat)    
     }
     return acc
   }
 
-  private _processAndValidate(partial: FacetsValue): FacetsValue  {
+  private _processAndValidate(partial: SelectedPaths): SelectedPaths  {
 
-    const result: FacetsValue = {}
+    const result: SelectedPaths = {}
 
     let level = 1
-    let currentSet = this._rootFacet.sub!
+    let currentSet = this._rootNode.subNodes!
     
     while (true) {
-      let possibleCurrent = currentSet.map((el) => (el.value))
+      let possibleCurrent = currentSet.map((el) => (el.skuToken))
       const validTokens = !partial[level] ? undefined : partial[level].filter((tok) => possibleCurrent.includes(tok))
       if (!validTokens) {
         break
       }
       result[level] = validTokens
       currentSet = validTokens.map((tok) => {
-        const fd = currentSet.find((node) => ( node.value === tok ))
-        return (fd && fd.sub && fd.sub.length > 0) ? fd.sub : []
+        const fd = currentSet.find((node) => ( node.skuToken === tok ))
+        return (fd && fd.subNodes && fd.subNodes.length > 0) ? fd.subNodes : []
       }).flat()
       level++
     }
@@ -365,13 +369,13 @@ class StandaloneService
     return result
   }
 
-  get specifiedItems(): LineItem[] {
-    if (Object.keys(toJS(this._selectedFacets)).length === 0) {
+  get selectedItems(): LineItem[] {
+    if (Object.keys(toJS(this._selectedPaths)).length === 0) {
       // FacetsDesc have never been set or unset, so cannot evaluate them
       return []
     }
 
-    return this.specifiedCategories.reduce(
+    return this.selectedCategories.reduce(
       (allProducts, cat) => ([...allProducts, ...(cat.products as LineItem[])]), [] as LineItem[])
   }
 
@@ -383,6 +387,14 @@ class StandaloneService
       0
     )
   }
+
+  debug_getSelectedCategories = () => {
+    const spec = this.selectedCategories
+    console.log('NUM SPEC CATS: ', spec.length) 
+    if (spec.length > 0) {
+      console.log('IDS: ', (spec.map((c) => (c.id))).join(', ')) 
+    }
+  }
 }
 
 export {

package/types/commerce-service.ts

@@ -1,5 +1,5 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
-import type { FacetValueDesc, FacetsValue } from './facet'
+import type { ProductTreeNode, SelectedPaths } from './tree-node'
 import type Category from './category'
 import type Promo from './promo'
 
@@ -29,36 +29,40 @@ interface CommerceService extends ObsLineItemRef {
 
     /** 
      * Sets the tokens at each level supplied.
-     * If a level is specifed as [], nothing will be specified.
-     * If a level is missing (undefined), everything at that level is included
+     * If a level is selected as [], nothing will be selected.
+     * If a level is missing (undefined), everything at that level is selected
      * 
-     * This specifies one or more Category's, and all the LineItem's in them
+     * This selects one or more Category's, and all the LineItem's in them.
      * 
-     * An empty value object specifies all Category's and all LineItem's,
+     * An empty value object selects all Category's and all LineItem's,
      * */ 
-  setFacets(value: FacetsValue): Category[]
-  get facetsValue(): FacetsValue // returns a copy
-  get specifiedItems(): LineItem[]
-  get specifiedCategories(): Category[] 
+  selectPaths(value: SelectedPaths): Category[]
+  selectPath(skuPath: string): Category[] 
+
+  get selectedPaths(): SelectedPaths // returns a copy
+  
+  get selectedItems(): LineItem[]
+  get selectedCategories(): Category[] 
 
     /** Whether this path defines a Category, or if it has further levels */
-  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | undefined 
+  getNodeAtPath(skuPath: string): ProductTreeNode | undefined 
 
-    /** Based on current value of 'level', what are the available subfacets? 
-     *  If more than one value is specified at 'level' returned FacetValueDesc[]
-     * may represent multiple sets. 
+    /** 
+     * Who are the subnodes selected at 'level'? 
+     * If more than one value is selected at 'level', 
+     * the returned ProductTreeNode[] may represent multiple sets. 
      * */ 
-  getFacetValuesSpecified(level: number): FacetValueDesc[] | undefined 
+  getSelectedNodesAtLevel(level: number): ProductTreeNode[] | undefined 
 
       /**
      * For convenience, so widgets can share state.
-     * "current" is unrelated to what is "specified",
+     * "current" is unrelated to what is "selected",
      * ie, facets' values 
      *  */ 
   setCurrentItem(sku: string | undefined): boolean // valid sku and was set.
     /**
      * For convenience, so widgets can share state.
-     * "current" is unrelated to what is "specified",
+     * "current" is unrelated to what is "selected",
      * ie, facets' values 
      * 
      * note: for ObsLineItemRef, there is also

package/types/index.ts

@@ -1,11 +1,11 @@
 
 export type { default as Category } from './category'
 export type { default as CommerceService } from './commerce-service'
-export type { default as ItemSelector } from './item-selector'
 export type { default as Product } from './product'
 export type { default as Promo } from './promo'
 
 export * from './checkout'
+export * from './item-selector'
 export * from './line-item'
-export * from './facet'
+export * from './tree-node'
 export * from './string-mutator'

package/types/item-selector.ts

@@ -1,14 +1,21 @@
-import type Category from './category'
-import type { ObsLineItemRef } from './line-item'
+import type { LineItem, ObsLineItemRef } from './line-item'
 
 interface ItemSelector {
-  category: Category
+  items: LineItem[]
   selectedItemRef: ObsLineItemRef
   selectSku: (sku: string) => void 
   showPrice?: boolean       // true by default
-  showQuantity?: boolean    // true by default (not impl)
+  showQuantity?: boolean    // false by default (not impl)
+}
+
+interface ItemSelectorProps extends ItemSelector {
+  clx?: string
+  soleItemClx?: string
+  itemClx?: string
+  ext?: any
 }
 
 export {
-  type ItemSelector as default
+  type ItemSelector,
+  type ItemSelectorProps
 }

package/types/product.ts

@@ -10,6 +10,7 @@ interface Product {
   desc?: string
   price: number
   img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
+  imgAR?: number
   animation?: string  // spline scene url
   video?: VideoDef
 }

package/types/tree-node.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+
+interface ProductTreeNode {
+  skuToken: string             // a token in the sku
+  label: string
+  img? : string | ReactNode  // icon is required 
+  imgAR? : number           // helps with svgs
+
+  /** Short desc of what subNodes refer to.
+   * For example, if this node's label is 'Lux Credit', 
+   * it's subNodesLabel would be 'Level',
+   * refering to membership 'levels' ('black', 'elite', etc)
+  */
+  subNodesLabel?: string   
+  subNodes?: ProductTreeNode[]
+}
+
+  // Which facets tokens are 'on' at each level
+type SelectedPaths = Record<number, string[]>
+
+export type {
+  ProductTreeNode,
+  SelectedPaths
+}

package/util/index.ts

@@ -32,19 +32,19 @@ export function formatCurrencyValue(price: number): string {
 export const getFacetValuesMutator = (level: number, cmmc: CommerceService): StringMutator => {
 
   const setLevel = (value: string, level: number ): void  => {
-    const facets = cmmc.facetsValue
+    const facets = cmmc.selectedPaths
     facets[level] = [value]
-    cmmc.setFacets(facets)
-    const subFacets = cmmc.getFacetValuesSpecified(level)
+    cmmc.selectPaths(facets)
+    const subFacets = cmmc.getSelectedNodesAtLevel(level)
     if (subFacets) {
-      const facets = cmmc.facetsValue
-      facets[level + 1] = [subFacets[0].value]
-      cmmc.setFacets(facets)
+      const facets = cmmc.selectedPaths
+      facets[level + 1] = [subFacets[0].skuToken]
+      cmmc.selectPaths(facets)
     }
   }
 
   const getLevelValueSafe = (level: number): string | null => {
-    const facets = cmmc.facetsValue
+    const facets = cmmc.selectedPaths
     if (!(level in facets) || facets[level].length === 0 ) {
       return null
     }
@@ -52,8 +52,8 @@ export const getFacetValuesMutator = (level: number, cmmc: CommerceService): Str
   }
 
   return {
-    get: () => (getLevelValueSafe(level)),
-    set: (v: string) => {setLevel(v, level)}
+    get: (): string | null => (getLevelValueSafe(level)),
+    set: (v: string): void => {setLevel(v, level)}
   } satisfies StringMutator
 }
 

package/util/use-sync-sku-param-w-current-item.ts

@@ -9,7 +9,7 @@ import {
 } from 'next-usequerystate'
 
 import { useCommerce } from '../service/context'
-import type { FacetsValue } from '../types'
+import type { SelectedPaths } from '../types'
 
 const PLEASE_SELECT_FACETS = 'Please select an option from each group.'
 
@@ -32,7 +32,7 @@ const useSyncSkuParamWithCurrentItem = (
   useEffect(() => {
 
     return reaction(() => ({
-      specifiedCat: cmmc.specifiedCategories.length === 1 ? cmmc.specifiedCategories[0] : undefined, 
+      specifiedCat: cmmc.selectedCategories.length === 1 ? cmmc.selectedCategories[0] : undefined, 
       currentItem: cmmc.currentItem
     }),
     ({specifiedCat, currentItem}) => {
@@ -55,14 +55,14 @@ const useSyncSkuParamWithCurrentItem = (
     
     const setCurrentCategoryFromSku = (sku: string) => {
       const toks: string[] = sku.split('-')
-      const fv: FacetsValue = {}
-        // TODO: confirm that extra trailing nonsense tokens won't break setFacets()
+      const fv: SelectedPaths = {}
+        // TODO: confirm that extra trailing nonsense tokens won't break selectPaths()
       for (let i = 1; i < categoryLevel; i++) {
         if (i in toks) {
           fv[i] = [toks[i]]
         } 
       } 
-      cmmc.setFacets(fv)
+      cmmc.selectPaths(fv)
     }
 
       // setCI returns true if it's a recognized sku

package/components/buy-item/buy-item-button-wrapper.tsx

@@ -1,27 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import BuyItemPopup from './buy-item-popup'
-import BuyItemMobileDrawer from './buy-item-mobile-drawer'
-
-const BuyItemButtonWrapper: React.FC<{
-  skuPath: string
-  desktopTrigger: React.ReactNode
-  mobileTrigger: React.ReactNode
-  popupClx?: string
-}> = ({
-  skuPath,
-  desktopTrigger,
-  mobileTrigger,
-  popupClx=''
-}) => (<>
-  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
-    {desktopTrigger}
-  </BuyItemPopup>
-  <BuyItemMobileDrawer skuPath={skuPath} trigger={mobileTrigger} />
-</>
-)
-
-
-
-export default BuyItemButtonWrapper

package/components/buy-item/buy-item-button.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
-
-import BuyItemPopup from './buy-item-popup'
-import BuyItemMobileDrawer from './buy-item-mobile-drawer'
-import { cn } from '@hanzo/ui/util'
-
-const BuyItemButton: React.FC<PropsWithChildren & {
-  skuPath: string
-  variant? : ButtonVariants 
-  size?: ButtonSizes  
-  /* rounded?: ButtonRounded // wait for version bump*/
-  className?: string 
-  popupClx?: string
-}> = ({
-  skuPath,
-  variant,
-  size,
-  children,
-  className='',
-  popupClx=''
-}) => (<>
-  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
-    <Button size={size} variant={variant} className={cn(className, 'hidden md:flex')}>{children}</Button>
-  </BuyItemPopup>
-  <BuyItemMobileDrawer skuPath={skuPath} trigger={<Button size={size} variant={variant} className={cn(className, 'md:hidden')}>{children}</Button>} />
-</>
-)
-
-
-
-export default BuyItemButton

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

@@ -1,92 +0,0 @@
-'use client'
-import React, { useRef, useEffect } from 'react'
-import { autorun  } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetsValue } from '../../types'
-import { useCommerce } from '../../service/context'
-import { getFacetValuesMutator } from '../../util'
-import FacetValuesWidget from '../facet-values-widget'
-import SelectCategoryItemCard from './select-category-item-card'
-
-
-const BuyItemCard: React.FC<{
-  skuPath: string
-  mobile?: boolean
-  className?: string
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = observer(({
-  skuPath,
-  mobile=false,
-  className='',
-  onQuantityChanged
-}) => {
-
-  const cmmc = useCommerce()
-  const levelRef = useRef<number>(-1)
-
-  const cat = cmmc.getCategory(skuPath) 
-  const facets = cat ? undefined : cmmc.getFacetValuesAtSkuPath(skuPath)
-
-  useEffect(() => {
-
-    const toks = skuPath.split('-')
-    levelRef.current = toks.length - 1
-    const fsv: FacetsValue = {}
-    for (let level = 1; level <= levelRef.current; level++ ) {
-      fsv[level] = [toks[level]]   
-    } 
-    if (facets) {
-      fsv[levelRef.current + 1] = [facets[0].value]
-    }
-    cmmc.setFacets(fsv)
-
-    return autorun(() => {
-      const cats = cmmc.specifiedCategories
-        // Original cat was legit
-      if (cat && (cats.length === 0 || cats[0].id !== cat.id)) {
-        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cat.id) {
-          cmmc.setCurrentItem(cat.products[0].sku)
-        }
-      }
-      else if (cats.length > 0) {
-        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cats[0].id) {
-          cmmc.setCurrentItem(cats[0].products[0].sku)
-        }
-      }
-    })
-  }, [cat, facets])
-
-  const renderFacetTabs = facets && levelRef.current > 0
-
-  return (
-    <div className={className} >
-    {renderFacetTabs && (
-      <FacetValuesWidget
-        className={cn('grid gap-0 ' + `grid-cols-${facets.length}` + ' self-start ', 'border-b-2 border-level-3 mb-2 -mr-2 -ml-2')} 
-        isMobile={false}
-        mutator={getFacetValuesMutator(levelRef.current + 1, cmmc)} 
-        itemClx='flex-col h-auto gap-0 pb-1 pt-3 px-3'
-        buttonClx={'h-full !rounded-bl-none !rounded-br-none !rounded-tl-lg !rounded-tr-lg ' +
-        '!border-r !border-t !border-level-3'}
-        facetValues={facets}
-      />
-    )}
-    {cmmc.specifiedCategories[0] && (
-      <SelectCategoryItemCard 
-        noTitle
-        mobile={mobile}
-        category={cmmc.specifiedCategories[0]}
-        selectedItemRef={cmmc /* ...conveniently. :) */ }
-        selectSku={cmmc.setCurrentItem.bind(cmmc)}
-        className=''
-        onQuantityChanged={onQuantityChanged}
-      />  
-    )}
-    </div >
-  )
-})
-
-export default BuyItemCard