@hanzo/commerce 5.1.3 → 6.1.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,12 +74,12 @@ class StandaloneService
 
     makeObservable<
       StandaloneService, 
-        '_selectedFacets' | 
+        '_selectedPaths' | 
         '_currentItem' |
         '_promo'
     >(this, {
-      _selectedFacets :  observable.deep,
-      _currentItem: observable,
+      _selectedPaths : observable.deep,
+      _currentItem: observable.shallow,
       _promo: observable,
     })
 
@@ -89,54 +89,53 @@ class StandaloneService
       cartTotal: computed,
       promoAppliedCartTotal: computed,
       cartEmpty: computed,
-      specifiedItems: computed,
-      specifiedCategories: computed, 
+      selectedItems: computed,
+      selectedCategories: computed, 
+      hasSelection: 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] 
         }  
       })
 
@@ -166,7 +165,7 @@ class StandaloneService
   }
 
   takeSnapshot = (): StandaloneServiceSnapshot => ({
-    items : (this.cartItems as ActualLineItem[]).map((it) => (it.takeSnapshot()))
+    items : (this.cartItems as ActualLineItem[]).map((it) => (it.takeSnapshot(this)))
   })
 
   get cartItems(): LineItem[] {
@@ -199,11 +198,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 +211,6 @@ class StandaloneService
       }, 
       0
     )
-      
     return total
   }
 
@@ -242,19 +238,29 @@ class StandaloneService
 
   setCurrentItem(skuToFind: string | undefined): boolean {
 
+    const logMe = (s: string) => {
+      //if (skuToFind?.startsWith('LXM-CR-E')) {
+        //console.log(s)
+      //}
+    }
+
     if (skuToFind === undefined || skuToFind.length === 0) {
       this._currentItem = undefined
       return true
     }
+
+    logMe("SETTING ITEM: " + skuToFind)
+
       // self calling function
     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) {
+            logMe("FOUND 1st LOOP")
             return foundItem as ActualLineItem
           }
         }
@@ -263,12 +269,15 @@ class StandaloneService
         if (categoriesTried.includes(categoryId)) continue
         const foundItem = category.products.find((p) => (p.sku === skuToFind)) as ActualLineItem | undefined
         if (foundItem) {
+          logMe("FOUND 2nd LOOP")
           return foundItem as ActualLineItem
         }
       }
+      logMe("NOT FOUND")
       return undefined
     })();
 
+    logMe("CURRENT ITEM SET TO: " + this._currentItem?.sku)
     return !!this._currentItem
   }
 
@@ -281,52 +290,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 +352,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,16 +383,20 @@ 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[])
   }
 
+  get hasSelection(): boolean {
+    return this.selectedCategories.length > 0
+  }
+
   getCartCategorySubtotal(categoryId: string): number {
     const c = this._categoryMap.get(categoryId)!
     return (c.products as LineItem[]).reduce(
@@ -383,6 +405,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/buy-ui-spec.ts

@@ -0,0 +1,8 @@
+interface BuyUISpec {
+  selector: 'carousel' | 'radio' | 'image'
+  allVariants: boolean 
+}
+
+export {
+  type BuyUISpec as default
+}

package/types/category.ts

@@ -1,11 +1,13 @@
+import type { ImageDef } from '@hanzo/ui/types'
 import type Product from './product'
 
 interface Category {
-  id: string          // LXB-AU-B
-  title: string       // Minted Bar
-  parentTitle?: string // Lux Gold
+  id: string            // LXB-AU-B
+  title: string         // Minted Bar, Lux Elite Card
+  titleShort?: string   // Elite
+  parentTitle?: string  // Lux Gold, Lux Credit
   desc?: string
-  img?: string 
+  img?: ImageDef, 
     // inbound they're Products and then interally they become LineItems
   products: Product[] 
 }

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,41 @@ 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[] 
+  get hasSelection(): boolean
 
     /** 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,12 @@
 
 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 type { default as BuyUISpec } from './buy-ui-spec'
 
 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,42 @@
-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)
 }
 
+interface _ItemSelectorCompProps {
+  clx?: string
+  itemClx?: string
+  soleItemClx?: string
+    /** type-specific props for ItemSelector's.
+     * eg, Carousel options.
+     */
+  ext?: any
+    /** List selectors will scroll.  Used internally */
+  scrollList: boolean
+    /** 
+     * Whether the item label includes the Category name.
+     * eg, 'Minted Bar, 1oz' vs '1oz'
+     * default: true in 'allVariants' mode and false otherwise.
+     * This overrides
+     */
+  showCategory?: boolean
+    /**
+     * Show the current item quantity along with title and price.
+     * default: false
+     */
+  showQuantity?: boolean    
+}
+
+type ItemSelectorCompProps = Omit<_ItemSelectorCompProps, 'scrollList'>
+
+interface ItemSelectorProps extends 
+  ItemSelector, _ItemSelectorCompProps {}
+
 export {
-  type ItemSelector as default
+  type ItemSelector,
+  type ItemSelectorCompProps,
+  type ItemSelectorProps
 }

package/types/line-item.ts

@@ -18,6 +18,8 @@ interface LineItem extends Product {
 
   increment(): void
   decrement(): void
+
+  get title(): string
 }
 
 interface ObsLineItemRef {

package/types/product.ts

@@ -1,15 +1,15 @@
-import type { VideoDef } from '@hanzo/ui/types'
+import type { ImageDef, VideoDef } from '@hanzo/ui/types'
 
 interface Product {
   id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
   sku: string   // human visible on orders etc.
-  title: string
-  shortTitle?: string
-  titleAsOption: string
+  fullTitle?: string
+  optionLabel: string
   categoryId: string  // skuPath, eg LXB-AU-B
+  categoryTitle: string
   desc?: string
   price: number
-  img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
+  img?: ImageDef  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
   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/buy-ui-conf.ts

@@ -0,0 +1,34 @@
+import type { BuyUISpec } from '../types'
+
+const map = new Map<string, BuyUISpec>([
+  ['LXM_AU', {
+    selector: 'radio',
+    allVariants: false
+  }],
+  ['LXM_AG', {
+    selector: 'radio',
+    allVariants: false
+  }],  
+  ['LXM_CN', {
+    selector: 'image',
+    allVariants: false
+  }],  
+    // only one option so image / radio doesn't have meaning
+  ['LXM_PS', {
+    selector: 'image',
+    allVariants: false
+  }],  
+  ['LXM-VL', {
+    selector: 'radio',
+    allVariants: false
+  }],
+  ['LXM-CR', {
+    selector: 'carousel',
+    allVariants: true
+  }],
+])
+
+export default (skuPath: string): BuyUISpec | undefined => {
+  const key = skuPath.split('-').slice(0, 2).join('-')
+  return map.get(key)
+}

package/util/index.ts

@@ -1,4 +1,4 @@
-import type { StringMutator, CommerceService, Promo } from '../types'
+import type { StringMutator, CommerceService } from '../types'
 
 export function toTitleCase(str: string) {
   return str.replace(
@@ -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,11 +52,14 @@ 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
 }
 
 
 export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
-export { default as processSquareCardPayment } from './square-payment'
+export { default as processSquareCardPayment } from './square-payment'
+export { default as ObsStringMutator } from './obs-string-mutator'
+
+export { default as getUISpecFromPath } from './buy-ui-conf'