@hanzo/commerce 2.1.0 → 3.0.1

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

@@ -7,12 +7,14 @@ import {
   toJS
 } from 'mobx'
 
+import { computedFn } from 'mobx-utils'
+
 import type {
   CommerceService, 
   Category, 
   LineItem,
   FacetsValue, 
-  FacetsDesc
+  FacetValueDesc
 } from '../../../types'
 
 import {
@@ -23,6 +25,8 @@ import {
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
 
+const SEP = '-'
+
 type StandaloneServiceOptions = {
   levelZeroPrefix?: string
   dbName: string
@@ -37,7 +41,7 @@ class StandaloneService
   implements CommerceService
 {
   private _categoryMap = new Map<string, Category>()
-  private _facetsDesc: FacetsDesc 
+  private _rootFacet: FacetValueDesc 
   private _selectedFacets: FacetsValue = {}
 
   private _options : StandaloneServiceOptions
@@ -45,12 +49,12 @@ class StandaloneService
 
   constructor(
     categories: Category[],
-    facets: FacetsDesc,
+    rootFacet: FacetValueDesc,
     options: StandaloneServiceOptions,
     serviceSnapshot?: StandaloneServiceSnapshot,
   ) {
 
-    this._facetsDesc = facets
+    this._rootFacet = rootFacet
     this._options = options
 
     categories.forEach((c) => {
@@ -79,6 +83,7 @@ class StandaloneService
       cartItems: computed,
       cartQuantity: computed,
       cartTotal: computed, 
+      cartEmpty: computed,
       specifiedItems: computed,
       specifiedCategories: computed, 
       setCurrentItem: action,
@@ -89,6 +94,54 @@ class StandaloneService
     })
   }
 
+
+  getCategory(id: string): Category | undefined {
+    return this._categoryMap.get(id)
+  }
+
+  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | undefined {
+    const toks = skuPath.split(SEP)
+    let level = 1
+    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+    do {
+      const fvalue = valuesAtLevel!.find((vf) => (vf.value === toks[level])) 
+      valuesAtLevel = fvalue ? fvalue.sub : undefined
+      level++
+    }
+    while (valuesAtLevel && (level < toks.length))
+    return level === toks.length ? valuesAtLevel : undefined 
+  } 
+
+  getFacetValuesSpecified = computedFn((level: number): FacetValueDesc[] | undefined => {
+
+    let lvl = 1
+    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+
+    do {
+      let selectedAtLevel: FacetValueDesc[] | undefined = undefined
+        // If not specified, assume all
+      if (lvl in this._selectedFacets) {
+        selectedAtLevel = valuesAtLevel!.filter((fv) => (this._selectedFacets[lvl].includes(fv.value))) 
+      }
+      else {
+        selectedAtLevel = valuesAtLevel 
+      }
+      let allSubsOfSelected: FacetValueDesc[] = []
+      selectedAtLevel?.forEach((fvd: FacetValueDesc) => {
+        if (fvd.sub) {
+          allSubsOfSelected = [...allSubsOfSelected, ...fvd.sub] 
+        }  
+      })
+
+      valuesAtLevel = allSubsOfSelected
+      lvl++
+    } while (valuesAtLevel.length > 0 && lvl <= level)
+
+    return (valuesAtLevel.length > 0 && ((lvl - 1) === level)) ? valuesAtLevel : undefined
+  })
+
+
+  //async createOrder(email: string, paymentMethod: string): Promise<string | undefined> {
   async createOrder(email: string, name?: string): Promise<string | undefined> {
     const snapshot = this.takeSnapshot()
     const order = await createOrderHelper(email, snapshot.items, this._options, name) // didn't want to have two levels of 'items'
@@ -117,6 +170,10 @@ class StandaloneService
     return result.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
   }
   
+  get cartEmpty(): boolean {
+    return this.cartItems.length === 0    
+  }
+
   get cartTotal(): number {
     return this.cartItems.reduce(
       (total, item) => (total + item.price * item.quantity), 
@@ -163,7 +220,6 @@ class StandaloneService
     return !!this._currentItem
   }
 
-
   /* ObsLineItemRef */
   get item(): LineItem | undefined {
     return this._currentItem
@@ -175,10 +231,7 @@ class StandaloneService
 
   setFacets(sel: FacetsValue): Category[] {
     runInAction (() => {
-      const res = this._processAndValidate(sel) 
-      if (res) {
-        this._selectedFacets = res
-      }
+      this._selectedFacets = this._processAndValidate(sel) 
     })
     return this.specifiedCategories
   }
@@ -191,46 +244,72 @@ class StandaloneService
     return result
   }
 
+
   get specifiedCategories(): Category[] {
     if (Object.keys(toJS(this._selectedFacets)).length === 0) {
       // FacetsDesc have never been set or unset, so cannot evaluate them
       return []
     }
-    const keysStr = Object.keys(this._facetsDesc)
-      // 1-base, visiting two per iteration
-    let current: string[] = this._selectedFacets[1] 
-    for (let i = 2; i <= keysStr.length; i++) {
-      current = StandaloneService._visit(current, this._selectedFacets[i])
-    }
-    const prefix = this._options.levelZeroPrefix ?? ''
-    return current.map((almostTheCatId) => (this._categoryMap.get(prefix + almostTheCatId)!))
+
+    return this._rootFacet.sub!.reduce(
+      (acc: Category[], subFacet: FacetValueDesc) => (
+          // Pass the root token as a one member array
+        this._reduceNode([this._rootFacet.value], acc, subFacet)   
+      ), 
+      []
+    )
   }
 
-  private static _visit(current: string[], next: string[]): string[] {
-    const result: string[] = []
-    current.forEach((c) => {
-      next.forEach((n) => {
-        result.push(`${c}-${n}`)
-      })
-    })
-    return result
+  private _reduceNode(parentPath: string[], acc: Category[], node: FacetValueDesc): Category[] {
+    const path = [...parentPath, node.value] // 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._selectedFacets[level].includes(node.value)
+    ) 
+    if (specified) {
+        // Process subnodes
+      if (node.sub && node.sub.length > 0) {
+        return node.sub.reduce((acc, n) => (
+          this._reduceNode(path, acc, n)
+        ) 
+        , acc)
+      }
+        // Process leaf
+      const cat = this._categoryMap.get(path.join(SEP))
+      if (!cat) {
+        throw new Error("specifiedCategories WTF?!" + path.join(SEP))
+      }
+      acc.push(cat)    
+    }
+    return acc
   }
 
-  private _processAndValidate(partial: FacetsValue): FacetsValue | undefined {
+  private _processAndValidate(partial: FacetsValue): FacetsValue  {
+
     const result: FacetsValue = {}
-    const keysStr = Object.keys(this._facetsDesc)
-    const keysNum = keysStr.map((key) => (parseInt(key)))
-    keysNum.forEach((key) => {
-      if (partial[key]) {
-          // If present, filter out the bad values (the one's that don't exist in the Desc)
-        const filtered = partial[key].filter((fv) => (this._facetsDesc[key].find((fvDesc) => (fvDesc.value === fv))))
-        result[key] = filtered
-      }
-        // if not present, assume the facet is "off" and allow all (include all in the set).
-      else {
-        result[key] = this._facetsDesc[key].map((fv) => (fv.value))
+
+    let level = 1
+    let currentSet = this._rootFacet.sub!
+    
+    while (true) {
+      let possibleCurrent = currentSet.map((el) => (el.value))
+      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 : []
+      }).flat()
+      level++
+    }
+    
     return result
   }
 

package/types/category.ts

@@ -1,8 +1,9 @@
 import type Product from './product'
 
 interface Category {
-  id: string      // LXB-AU-B
-  title: string   // Lux Gold, Minted Bar
+  id: string          // LXB-AU-B
+  title: string       // Minted Bar
+  parentTitle?: string // Lux Gold
   desc?: string
   img?: string 
     // inbound they're Products and then interally they become LineItems

package/types/commerce-service.ts

@@ -1,15 +1,17 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
-import type { FacetsValue } from './facet'
+import type { FacetValueDesc, FacetsValue } from './facet'
 import type Category from './category'
 
 interface CommerceService extends ObsLineItemRef {
 
     /** Items in cart */
   get cartItems(): LineItem[]
-    /** Total of all quantities of items in cart */
+    /** Total of all quantities of all items in cart */
   get cartQuantity(): number
-    /** Total of all prices X quantities of items in cart */
+    /** Total of all prices * quantities of items in cart */
   get cartTotal(): number
+
+  get cartEmpty(): boolean
    
   getCartCategorySubtotal(categoryId: string): number
 
@@ -31,7 +33,16 @@ interface CommerceService extends ObsLineItemRef {
   get specifiedItems(): LineItem[]
   get specifiedCategories(): Category[] 
 
-    /**
+    /** Whether this path defines a Category, or if it has further levels */
+  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | 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. 
+     * */ 
+  getFacetValuesSpecified(level: number): FacetValueDesc[] | undefined 
+
+      /**
      * For convenience, so widgets can share state.
      * "current" is unrelated to what is "specified",
      * ie, facets' values 
@@ -48,6 +59,8 @@ interface CommerceService extends ObsLineItemRef {
      *  */ 
   get currentItem(): LineItem | undefined
 
+  getCategory(id: string): Category | undefined
+
 }
 
 export {

package/types/facet.ts

@@ -5,6 +5,7 @@ interface FacetValueDesc {
   label: string
   img? : string | ReactNode  // icon is required 
   imgAR? : number           // helps with svgs
+  sub?: FacetValueDesc[]
 }
 
 /* *** FOR EXAMPLE **
@@ -25,13 +26,10 @@ interface FacetValueDesc {
   ]
 }
 */
-type FacetsDesc = Record<number, FacetValueDesc[]>
-
   // Which facets tokens are on at each level
 type FacetsValue = Record<number, string[]>
 
 export type {
   FacetValueDesc,
-  FacetsDesc,
   FacetsValue
 }

package/types/index.ts

@@ -1,7 +1,9 @@
 
+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 Category } from './category'
+
 export type { default as TransactionStatus } from './checkout'
 export * from './line-item'
 export * from './facet'

package/types/item-selector.ts

@@ -0,0 +1,14 @@
+import type Category from './category'
+import type { ObsLineItemRef } from './line-item'
+
+interface ItemSelector {
+  category: Category
+  selectedItemRef: ObsLineItemRef
+  selectSku: (sku: string) => void 
+  showPrice?: boolean       // true by default
+  showQuantity?: boolean    // true by default (not impl)
+}
+
+export {
+  type ItemSelector as default
+}

package/util/index.ts

@@ -1,3 +1,4 @@
+import type { StringMutator, CommerceService } from '../types'
 
 export function toTitleCase(str: string) {
   return str.replace(
@@ -27,6 +28,34 @@ export function formatPrice(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  => {
+    const facets = cmmc.facetsValue
+    facets[level] = [value]
+    cmmc.setFacets(facets)
+    const subFacets = cmmc.getFacetValuesSpecified(level)
+    if (subFacets) {
+      const facets = cmmc.facetsValue
+      facets[level + 1] = [subFacets[0].value]
+      cmmc.setFacets(facets)
+    }
+  }
+
+  const getLevelValueSafe = (level: number): string | null => {
+    const facets = cmmc.facetsValue
+    if (!(level in facets) || facets[level].length === 0 ) {
+      return null
+    }
+    return facets[level][0]
+  }
+
+  return {
+    get: () => (getLevelValueSafe(level)),
+    set: (v: string) => {setLevel(v, level)}
+  } satisfies StringMutator
+}
+
 
 export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
 export { default as processSquareCardPayment } from './square-payment'

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

@@ -56,8 +56,11 @@ 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()
       for (let i = 1; i < categoryLevel; i++) {
-        fv[i] = [toks[i]]
+        if (i in toks) {
+          fv[i] = [toks[i]]
+        } 
       } 
       cmmc.setFacets(fv)
     }

package/blocks/components/commerce-cat-and-item-block.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import type  CommerceCatAndItemBlock from '../def/commerce-cat-and-item-block'
-
-/*
-
-interface CommerceCatAndItemBlock extends Block {
-  blockType: 'commerce-cat-and-item'
-  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
-  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
-}
-
-*/
-

package/blocks/def/commerce-cat-and-item-block.ts

@@ -1,9 +0,0 @@
-import type  { Block } from '@hanzo/ui/blocks'
-
-interface CommerceCatAndItemBlock extends Block {
-  blockType: 'commerce-cat-and-item'
-  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
-  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
-}
-
-export { type CommerceCatAndItemBlock as default }

package/components/facets-widget.tsx

@@ -1,55 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetsDesc, StringMutator, StringArrayMutator } from '../types'
-
-import FacetTogglesWidget from './facet-toggles-widget'
-
-const FacetsWidget: React.FC<PropsWithChildren & {
-  facets: FacetsDesc
-  mutators:  StringMutator[] | StringArrayMutator[]
-  facetClx?: string[]
-  facetItemClx?: string
-  multiple?: boolean
-  isMobile?: boolean
-  id?: string
-  className?: string
-  tabSize?: string 
-  childrenAfter?: boolean
-}> = ({
-  children,
-  facets,
-  mutators,
-  multiple=false,
-  facetClx,
-  facetItemClx='',
-  isMobile=false,
-  className='',
-  tabSize,
-  id='FacetsWidget',
-  childrenAfter=true
-}) => {
-  const horiz = className.includes('flex-row')
-  return (
-    <div id={id} className={className} >
-    {!childrenAfter && children}
-    {Object.keys(facets).map((key, i) => (
-      <FacetTogglesWidget 
-        key={i}
-        multiple={multiple}
-        mutator={mutators[i]} 
-        isMobile={isMobile}
-        facetValues={facets[parseInt(key)]} 
-        className={cn((horiz ? '' : 'mb-2'), (i !== 0 && !horiz) ? 'mt-2' : '', (facetClx?.[i]) ?? '')}
-        buttonClx={facetItemClx} 
-        tabSize={tabSize}
-      />
-    ))}
-      {childrenAfter && children}
-    </div>
-  )
-}
-
-export default FacetsWidget

package/components/product-selection-mobile-picker.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import Picker from 'react-mobile-picker'
-
-import type { Product } from '../types'
-import { formatPrice } from '../util'
-import { cn } from '@hanzo/ui/util'
-
-  // from source code
-interface PickerItemRenderProps {
-  selected: boolean;
-}
-
-function renderOptions(options: string[], selectedColor: string) {
-  return options.map((option) => (
-    <Picker.Item key={option} value={option}>
-      {({ selected }: PickerItemRenderProps) => (
-        <div className={selected ? `font-semibold ${selectedColor}` : 'text-neutral-400'}>{option}</div>
-      )}
-    </Picker.Item>
-  ))
-}
-
-// const DEFAULT_HEIGHT = 216
-// const DEFAULT_ITEM_HEIGHT = 36
-
-
-const ProductSelectionMobilePicker: React.FC<{
-  products: Product[]
-  selectedSku: string | undefined
-  onValueChange: (v: string) => void
-  height?: number
-  itemHeight?: number
-  outerClx?: string
-  itemClx?: string
-}> = ({
-  products,
-  selectedSku,
-  onValueChange,
-  height,
-  itemHeight,
-  outerClx='',
-  itemClx=''
-}) => {
-
-    // @ts-ignore
-  const onChange = (val, ignore) => {
-    console.log("VAL", val)
-    console.log("key")
-    onValueChange(val.item)
-  }
-
-return (
-  <div className={cn('border border-muted-4 rounded-lg px-2', outerClx)}>
-    <Picker
-      className=''
-      value={selectedSku ? {item: selectedSku} : {item: undefined}}
-      onChange={onChange}
-      wheelMode="natural"
-      height={height}
-      itemHeight={itemHeight}
-    >
-      <Picker.Column name="item">
-      {products.map((prod) => (
-        <Picker.Item key={prod.sku} value={prod.sku}>
-        {({ selected }: PickerItemRenderProps) => (
-          <div className={cn(selected ? 'font-semibold text-accent' : 'text-muted', itemClx)}>
-            {prod.titleAsOption + ', ' + formatPrice(prod.price)}
-          </div>
-        )}
-        </Picker.Item>
-      ))}
-      </Picker.Column>
-    </Picker>
-  </div>
-)
-}
-
-export default ProductSelectionMobilePicker

package/components/product-selection-radio-group.tsx

@@ -1,38 +0,0 @@
-'use client'
-
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import type { Product } from '../types'
-import { formatPrice } from '../util'
-
-const ProductSelectionRadioGroup: React.FC<{
-  products: Product[]
-  selectedSku: string | undefined
-  onValueChange: (v: string) => void
-  groupClx?: string
-  itemClx?: string
-  showPrice?: boolean
-}> = ({
-  products,
-  selectedSku,
-  onValueChange,
-  groupClx='',
-  itemClx='',
-  showPrice=true
-}) => (
-  products.length > 1 && (
-    <RadioGroup
-      className={groupClx}
-      onValueChange={onValueChange}
-      value={selectedSku}
-    >
-    {products.map((prod) => (
-      <div className={itemClx} key={prod.sku}>
-        <RadioGroupItem value={prod.sku} id={prod.sku} />
-        <Label htmlFor={prod.sku}>{prod.titleAsOption + (showPrice ? (', ' + formatPrice(prod.price)) : '')}</Label>
-      </div>
-    ))}
-    </RadioGroup>
-  )
-)
-
-export default ProductSelectionRadioGroup