@hanzo/commerce 6.1.13 → 6.2.1

package/components/select-family/level-nodes-widget/node-image.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { ProductTreeNode } from '../../../types'
+import type { CategoryNode } from '../../../types'
 
 const ICON_SIZE = 20
 
 const NodeImage: React.FC<{
-  treeNode: ProductTreeNode
+  treeNode: CategoryNode
 }> = ({
   treeNode: {
     img,

package/index.ts

@@ -1,11 +1,11 @@
 export * from './service/context'
 export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue } from './util'
-export { PROMO_CODES } from './util/promo-codes'
+export { 
+  useSyncSkuParamWithCurrentItem, 
+  getFacetValuesMutator, 
+  formatCurrencyValue,
+  ProductMediaAccessor 
+} from './util'
 
-export const SEP = {
-  TOK: '-',
-  SUB_TOK: '_',
-  DECIMAL: '.'
-}
+export * from './util/selection-ui-specifiers'

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.1.13",
+  "version": "6.2.1",
   "description": "e-commerce framework.",
+  "type": "module",  
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
@@ -28,7 +29,9 @@
   },
   "exports": {
     ".": "./index.ts",
-    "./types": "./types/index.ts"
+    "./path-utils": "./service/path-utils.ts",
+    "./types": "./types/index.ts",
+    "./debug": "./service/debug.ts"
   },
   "dependencies": {
     "ethers": "^6.11.1",
@@ -38,11 +41,11 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.3.4",
-    "@hanzo/ui": "^3.4.2",
+    "@hanzo/ui": "^3.5.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",
-    "lucide-react": "^0.307.0",
+    "lucide-react": "^0.344.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "mobx-utils": "^6.0.8",

package/service/context.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { createContext, useContext, useRef, type PropsWithChildren } from 'react'
+import { createContext, useContext, useRef, type PropsWithChildren, useEffect } from 'react'
 
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
 import { enableStaticRendering } from 'mobx-react-lite'
@@ -8,29 +8,30 @@ enableStaticRendering(typeof window === "undefined")
 
 import type CommerceService from '../types/commerce-service'
 import type { ServiceOptions } from '..'
-import getServiceSingleton from './impls'
-import type { Family, ProductTreeNode } from '../types'
+import getInstance from './get-instance'
+import type { Family, CategoryNode, SelectionUISpecifier } from '../types'
 
 const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
 
-
 const useCommerce = (): CommerceService => {
   return useContext(CommerceServiceContext) as CommerceService
 }
 
 const CommerceServiceProvider: React.FC<PropsWithChildren & {
   productsByFamily: Family[]
-  rootNode: ProductTreeNode
+  rootNode: CategoryNode
   options?: ServiceOptions
+  uiSpecs?: Record<string, SelectionUISpecifier>
 }> = ({ 
   children,
   productsByFamily,
   rootNode,
-  options
+  options,
+  uiSpecs
 }) => {
 
     // TODO: Inject Promo fixture here
-  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByFamily, rootNode, options))
+  const serviceRef = useRef<CommerceService>(getInstance(productsByFamily, rootNode, options, uiSpecs))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>
       {children}

package/service/debug.ts

@@ -0,0 +1,41 @@
+import type { CategoryNode,  CategoryNodeRole, Family, LineItem } from '../types'
+
+  // Note recursion
+export const categoryNodeDump = (node: CategoryNode, level: number = 0): void => {
+  const spacers: string[] = []
+  for (let i = 0; i < level; i++) {
+    spacers.push('----')
+  }
+  console.log("NODE:" + spacers.join(''), node.skuToken)
+  node.subNodes?.forEach((sn: CategoryNode) => {categoryNodeDump(sn, level + 1)})
+}
+ 
+export const selectedFamiliesDump = (result: Family[]): string => {
+  const toDisplay = result.map((c) => (c.id)) 
+  return JSON.stringify(toDisplay, null, 2)
+}
+
+export const peekDump = (result : {
+    role: CategoryNodeRole
+    family: Family | undefined
+    families: Family[] | undefined
+    node: CategoryNode | undefined
+    item: LineItem | undefined
+} | string): string => {
+
+  if (typeof result === 'string') {
+    return result
+  }
+
+  const toDisplay = {
+    role: result.role,
+    item: result.item ? result.item.sku : 'UNDEF',
+    family: result.family ? result.family.id : 'UNDEF',
+    families: result.families ? result.families.map((f) => (f.id)) : 'UNDEF',
+    node: result.node ? 
+      (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : '')) 
+      : 
+      'UNDEF'
+  }
+  return JSON.stringify(toDisplay, null, 2)
+}

package/service/get-instance.ts

@@ -0,0 +1,3 @@
+import { getInstance } from './impls/standalone'
+
+export default getInstance

package/service/impls/standalone/actual-line-item.ts

@@ -30,11 +30,13 @@ class ActualLineItem
   optionLabel: string
   familyTitle: string
   familyId: string  
+  byline?: string
   desc?: string
   price: number
   img?: ImageDef 
   video?: VideoDef 
-  animation?: string 
+  animation?: string
+  optionImg?: ImageDef
   timeAdded: number = 0 // timeAdded of being added to cart
 
   constructor(prod: Product, snap?: ActualLineItemSnapshot) {
@@ -44,11 +46,13 @@ class ActualLineItem
     this.optionLabel = prod.optionLabel
     this.familyTitle = prod.familyTitle
     this.familyId = prod.familyId
+    this.byline = prod.byline
     this.desc = prod.desc
     this.price = prod.price
     this.img = prod.img
     this.video = prod.video
     this.animation = prod.animation
+    this.optionImg = prod.optionImg
 
     if (snap) {
       this.qu = snap.quantity
@@ -106,12 +110,6 @@ class ActualLineItem
       }
     }
   }
-
-  inFamily(id: string): boolean {
-      // TODO: will break for level one (which is ok for lux, but not generally)
-    return this.sku.includes(`-${id}-`)
-  }
-
 }
 
 export {

package/service/impls/standalone/index.ts

@@ -1,7 +1,8 @@
 import { enableStaticRendering } from 'mobx-react-lite'
 
-import type { CommerceService, Family, ProductTreeNode } from '../../../types'
+import type { CommerceService, Family, CategoryNode, SelectionUISpecifier } from '../../../types'
 import StandaloneService, {type StandaloneServiceOptions} from './standalone-service'
+import { initSelectionUI } from '../../../util'
 
 import { readSnapshot, listenAndWriteSnapshots } from './localStorage'
 
@@ -19,8 +20,9 @@ let instance: StandaloneService | undefined =  undefined
 
 export const getInstance = (
   families: Family[], 
-  rootNode: ProductTreeNode, 
-  options?: StandaloneServiceOptions
+  rootNode: CategoryNode, 
+  options?: StandaloneServiceOptions,
+  uiSpecs?: Record<string, SelectionUISpecifier>
 ): CommerceService => {
 
   if (!options) {
@@ -28,6 +30,9 @@ export const getInstance = (
   }
 
    if (typeof window === "undefined") {
+    if (uiSpecs) {
+      initSelectionUI(uiSpecs)
+    }
     //_log("NEW INSTANCE FOR SERVER")
     return new StandaloneService(
       families, 
@@ -38,6 +43,9 @@ export const getInstance = (
 
     // Client side, create the store only once in the client
   if (!instance) {
+    if (uiSpecs) {
+      initSelectionUI(uiSpecs)
+    }
     //_log("NEW INSTANCE FOR CLIENT")
     const snapShot = readSnapshot()
     instance = new StandaloneService(

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

@@ -14,7 +14,8 @@ import type {
   Family, 
   LineItem,
   SelectedPaths, 
-  ProductTreeNode,
+  CategoryNode,
+  CategoryNodeRole,
   Promo
 } from '../../../types'
 
@@ -25,10 +26,11 @@ import {
 } from './orders'
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
-import SEP from '../../../util/sep'
+import { getParentPath } from '../../../service/path-utils'
+import { getErrorMessage } from '../../../util'
+import sep from '../../sep'
 
 type StandaloneServiceOptions = {
-  levelZeroPrefix?: string
   dbName: string
   ordersTable: string
 }
@@ -37,11 +39,12 @@ interface StandaloneServiceSnapshot {
   items: ActualLineItemSnapshot[]  
 }
 
+
 class StandaloneService 
   implements CommerceService
 {
   private _familyMap = new Map<string, Family>()
-  private _rootNode: ProductTreeNode 
+  private _rootNode: CategoryNode 
   private _selectedPaths: SelectedPaths = {}
   private _promo: Promo | null = null
 
@@ -50,7 +53,7 @@ class StandaloneService
 
   constructor(
     families: Family[],
-    rootNode: ProductTreeNode,
+    rootNode: CategoryNode,
     options: StandaloneServiceOptions,
     serviceSnapshot?: StandaloneServiceSnapshot,
   ) {
@@ -58,8 +61,8 @@ class StandaloneService
     this._rootNode = rootNode
     this._options = options
 
-    families.forEach((c) => {
-      c.products = c.products.map((p) => { 
+    families.forEach((fam) => {
+      fam.products = fam.products.map((p) => { 
         if (serviceSnapshot) {
           const itemSnapshot = serviceSnapshot.items.find((is) => (is.sku === p.sku))
           if (itemSnapshot) {
@@ -68,7 +71,7 @@ class StandaloneService
         }
         return new ActualLineItem(p)
       })
-      this._familyMap.set(c.id, c)
+      this._familyMap.set(fam.id, fam)
     })
 
     makeObservable<
@@ -105,44 +108,143 @@ class StandaloneService
     return this._familyMap.get(id)
   }
 
-  getNodeAtPath(skuPath: string): ProductTreeNode | undefined {
-    const toks = skuPath.split(SEP.TOK)
+  getNodeAtPath(skuPath: string): CategoryNode | undefined {
+    const toks = skuPath.split(sep.tok)
     let level = 1
-    let desc: ProductTreeNode | undefined = this._rootNode
+    let node: CategoryNode | undefined = this._rootNode
     do {
-      desc = desc!.subNodes?.find((vf) => (vf.skuToken === toks[level])) 
+      node = node!.subNodes?.find((sn) => (sn.skuToken === toks[level])) 
       level++
     }
-    while (desc && (level < toks.length))
-    return level === toks.length ? desc : undefined 
+    while (node && (level < toks.length))
+    return level === toks.length ? node : undefined 
+  } 
+
+  peek(skuPath: string): {
+    role: CategoryNodeRole
+    family: Family | undefined
+    families: Family[] | undefined
+    node: CategoryNode | undefined
+    item: LineItem | undefined
+  } | string /* OR error string */ {
+
+    const toks = skuPath.split(sep.tok)
+    let level: number
+    let node: CategoryNode | undefined = this._rootNode
+    let parent: CategoryNode | undefined = undefined
+
+    for (level = 1; level < toks.length && node && node.subNodes; level++) {
+        // https://stackoverflow.com/questions/62367492/inference-problem-referenced-directly-or-indirectly-in-its-own-initializer
+      const _node: CategoryNode | undefined = 
+        node!.subNodes.find((sn) => (sn.skuToken === toks[level])) 
+      if (!_node) {
+        return `service.peekAtNode: traversing '${skuPath}'... no CategoryNode at '${toks[level]}'!`
+      }
+      parent = node
+      node = _node
+    }
+
+    const atEnd = level === toks.length
+    const possibleSKU = level === toks.length - 1
+
+    let role: CategoryNodeRole = 'non-outermost'
+    let families: Family[] | undefined = undefined
+    let family: Family | undefined = undefined
+    let item: LineItem | undefined = undefined
+    let error: string | undefined = undefined
+
+    try {
+      if (node.subNodes && atEnd && node.terminal) {
+        role = 'multi-family'
+        families = node.subNodes.map((sub) => {
+          const familyId = skuPath + sep.tok + sub.skuToken
+          const fam = this._familyMap.get(familyId)
+          if (!fam) {
+            throw new Error(`service.peekAtNode: No Family under for CategoryNode '${skuPath}' with id ${familyId}!`)
+          }
+          return fam
+        })
+      }
+      else if (!node.subNodes && (atEnd || possibleSKU)) {
+        const _skuPath = (possibleSKU) ? getParentPath(skuPath) : skuPath
+        if (parent?.terminal) {
+          role = 'family-in-multi-family'  
+          const fam = this._familyMap.get(_skuPath)
+          if (!fam) {
+            throw new Error(`service.peekAtNode: '${_skuPath}' graphs as a Family under a multi-family node, but no such family exists!`)
+          }
+          family = fam
+          const parentPath = getParentPath(_skuPath)
+            // get all siblings (subnodes of parent)
+          families = parent.subNodes!.map((sn) => {
+            const familyId = parentPath + sep.tok + sn.skuToken
+            const fam = this._familyMap.get(familyId)
+            if (!fam) {
+              throw new Error(`service.peekAtNode: No sibling Family for '${_skuPath}' with id '${familyId}'!`)
+            }
+            return fam
+          })
+          node = parent
+        }
+        else {
+          role = 'single-family'  
+          const fam = this._familyMap.get(_skuPath)
+          if (!fam) {
+            throw new Error(`service.peekAtNode: '${_skuPath}' graphs as a single Family, but no such family exists!`)
+          }
+          family = fam
+        }
+        if (possibleSKU) {
+          const skuToTry = family.id + sep.tok + toks[toks.length - 1]
+          const _item = family.products.find((p) => (p.sku === skuToTry)) 
+          if (_item) {
+            item = _item as LineItem  
+          }
+          else {
+            throw new Error(`service.peekAtNode: '${skuPath}' graphs as LineItem in Family '${family.id}', but no such sku exists there!`)
+          }
+        }
+      }
+    }
+    catch (e) {
+      error = getErrorMessage(e)
+    }
+
+    return error ?? {
+      role,
+      family,
+      families,
+      node,
+      item
+    }
   } 
 
-  getSelectedNodesAtLevel = computedFn((level: number): ProductTreeNode[] | undefined => {
+  getSelectedNodesAtLevel = computedFn((level: number): CategoryNode[] | undefined => {
 
     let lvl = 1
-    let valuesAtLevel: ProductTreeNode[] | undefined  = this._rootNode.subNodes
+    let nodesAtLevel: CategoryNode[] | undefined  = this._rootNode.subNodes
 
     do {
-      let selectedAtLevel: ProductTreeNode[] | undefined = undefined
+      let selectedAtLevel: CategoryNode[] | undefined = undefined
         // If not specified, assume all
       if (lvl in this._selectedPaths) {
-        selectedAtLevel = valuesAtLevel!.filter((fv) => (this._selectedPaths[lvl].includes(fv.skuToken))) 
+        selectedAtLevel = nodesAtLevel!.filter((n) => (this._selectedPaths[lvl].includes(n.skuToken))) 
       }
       else {
-        selectedAtLevel = valuesAtLevel 
+        selectedAtLevel = nodesAtLevel 
       }
-      let allSubsOfSelected: ProductTreeNode[] = []
-      selectedAtLevel?.forEach((fvd: ProductTreeNode) => {
-        if (fvd.subNodes) {
-          allSubsOfSelected = [...allSubsOfSelected, ...fvd.subNodes] 
+      let allSubsOfSelected: CategoryNode[] = []
+      selectedAtLevel?.forEach((n: CategoryNode) => {
+        if (n.subNodes) {
+          allSubsOfSelected = [...allSubsOfSelected, ...n.subNodes] 
         }  
       })
 
-      valuesAtLevel = allSubsOfSelected
+      nodesAtLevel = allSubsOfSelected
       lvl++
-    } while (valuesAtLevel.length > 0 && lvl <= level)
+    } while (nodesAtLevel.length > 0 && lvl <= level)
 
-    return (valuesAtLevel.length > 0 && ((lvl - 1) === level)) ? valuesAtLevel : undefined
+    return (nodesAtLevel.length > 0 && ((lvl - 1) === level)) ? nodesAtLevel : undefined
   })
 
 
@@ -284,7 +386,7 @@ class StandaloneService
   }
 
   selectPath(skuPath: string): Family[] {
-    const toks = skuPath.split(SEP.TOK)
+    const toks = skuPath.split(sep.tok)
     const highestLevel = toks.length - 1
     const fsv: SelectedPaths = {}
     for (let level = 1; level <= highestLevel; level++ ) {
@@ -308,7 +410,7 @@ class StandaloneService
     }
 
     return this._rootNode.subNodes!.reduce(
-      (acc: Family[], subFacet: ProductTreeNode) => (
+      (acc: Family[], subFacet: CategoryNode) => (
           // Pass the root token as a one member array
         this._reduceNode([this._rootNode.skuToken], acc, subFacet)   
       ), 
@@ -316,7 +418,7 @@ class StandaloneService
     )
   }
 
-  private _reduceNode(parentPath: string[], acc: Family[], node: ProductTreeNode): Family[] {
+  private _reduceNode(parentPath: string[], acc: Family[], node: CategoryNode): Family[] {
     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,
@@ -336,9 +438,9 @@ class StandaloneService
         , acc)
       }
         // Process leaf
-      const fam = this._familyMap.get(path.join(SEP.TOK))
+      const fam = this._familyMap.get(path.join(sep.tok))
       if (!fam) {
-        throw new Error("selectedFamilies WTF?!" + path.join(SEP.TOK))
+        throw new Error("selectedFamilies WTF?!" + path.join(sep.tok))
       }
       acc.push(fam)    
     }
@@ -392,13 +494,6 @@ class StandaloneService
     )
   }
 
-  debug_getSelectedFamilies = () => {
-    const spec = this.selectedFamilies
-    console.log('NUM SEL FAMS: ', spec.length) 
-    if (spec.length > 0) {
-      console.log('IDS: ', (spec.map((c) => (c.id))).join(', ')) 
-    }
-  }
 }
 
 export {

package/service/path-utils.ts

@@ -0,0 +1,26 @@
+import type { SelectedPaths } from '../types'
+import sep from './sep'
+
+export const getSelectedPaths = (
+  skuPath: string
+): { paths: SelectedPaths; level: number } => {
+  
+  const toks = skuPath.split(sep.tok)
+  const level = toks.length - 1
+  const paths: SelectedPaths = {}
+  for (let l = 1; l <= level; l++ ) {
+    paths[l] = [toks[l]]   
+  } 
+  return {
+    paths,
+    level
+  }
+}
+
+export const getParentPath = (skuPath: string): string => (
+  skuPath.split(sep.tok).slice(0, -1).join(sep.tok)
+)
+
+export const lastToken = (skuPath: string): string => (
+  skuPath.split(sep.tok).pop()!
+)

package/service/sep.ts

@@ -0,0 +1,7 @@
+import type { TokenSeparators } from '../types'
+
+export default {
+  tok: '-',
+  subTok: '_',
+  decimal: '.'
+} satisfies TokenSeparators 

package/types/category-node.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+interface CategoryNode {
+  skuToken: string             // a token in the sku
+  label: string;
+    /** 
+     * If this node has subnodes, marks it as a "last user-visible" / "outermost" Category. 
+     * Normally, a node without subnodes (one that has products and is a family), is by definition terminal. 
+     * If it *has* subnodes, but its subNodes are to be treated as sibling families
+     * of a Category, rather rather sub Categories, this is specified by setting terminal=true.
+     * */
+  terminal?: boolean;
+  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?: CategoryNode[]
+}
+
+type CategoryNodeRole = 
+  'single-family' | 
+  'family-in-multi-family' | 
+  'multi-family' | 
+  'non-outermost' 
+
+  // Which facets tokens are 'on' at each level
+type SelectedPaths = Record<number, string[]>
+
+export type {
+  CategoryNodeRole,
+  CategoryNode,
+  SelectedPaths
+}

package/types/commerce-service.ts

@@ -1,8 +1,9 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
-import type { ProductTreeNode, SelectedPaths } from './tree-node'
+import type { CategoryNode, SelectedPaths, CategoryNodeRole } from './category-node'
 import type Family from './family'
 import type Promo from './promo'
 
+
 interface CommerceService extends ObsLineItemRef {
 
     /** Items in cart */
@@ -39,29 +40,60 @@ interface CommerceService extends ObsLineItemRef {
   selectPaths(value: SelectedPaths): Family[]
   selectPath(skuPath: string): Family[] 
 
-/*
-  peekPath(skuPath: string): {
+    /**
+     * With role as ...
+     *  
+     * 'single-family': 
+     *    item: item with skuPath as SKU, otherwise undefined
+     *    node: node at path (or item's parent node),
+     *    family: node at path as family (or item's parent node as family), 
+     *    families: undefined 
+     * 
+     * 'family-in-multi-family': 
+     *    item: item with skuPath as SKU, otherwise undefined
+     *    node: parent node of this family (or parent node of item's family)
+     *    family: this family (or item's family)
+     *    families: this family (or item's family) and siblings
+     * 
+     * 'multi-family': 
+     *    item: undefined
+     *    node: node at path 
+     *    family: undefined
+     *    families: subnodes / families of this node
+     *    
+     * 'non-outermost': 
+     *    item: undefined
+     *    node: node at path
+     *    family: undefined
+     *    families: undefined
+     * 
+    */
+  peek(skuPath: string): {
+    role: CategoryNodeRole
     family: Family | undefined
-    siblingFamilies: Family[] | undefined
-    categoryNode: ProductTreeNode | undefined
-    isSku: boolean
-  } 
-*/
+    families: Family[] | undefined
+    node: CategoryNode | undefined
+    item: LineItem | undefined
+  } | string // or error string
+
+    /** @deprecated
+     *  Whether this path defines a Family, or if it has further levels 
+     * */
+  getNodeAtPath(skuPath: string): CategoryNode | undefined 
+
   get selectedPaths(): SelectedPaths // returns a copy
   
   get selectedItems(): LineItem[]
   get selectedFamilies(): Family[] 
   get hasSelection(): boolean
 
-    /** Whether this path defines a Family, or if it has further levels */
-  getNodeAtPath(skuPath: string): ProductTreeNode | undefined 
 
     /** 
      * Who are the subnodes selected at 'level'? 
      * If more than one value is selected at 'level', 
-     * the returned ProductTreeNode[] may represent multiple sets. 
+     * the returned CategoryNode[] may represent multiple sets. 
      * */ 
-  getSelectedNodesAtLevel(level: number): ProductTreeNode[] | undefined 
+  getSelectedNodesAtLevel(level: number): CategoryNode[] | undefined 
 
       /**
      * For convenience, so widgets can share state.