@hanzo/commerce 6.1.8 → 6.1.9

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

@@ -11,7 +11,7 @@ import type { Product, LineItem, CommerceService } from '../../../types'
 
 interface ActualLineItemSnapshot {
   sku: string  
-  categoryId: string  // helps impl of restoreFromSnapshot
+  familyId: string  // helps impl of restoreFromSnapshot
   title: string
   price: number
   quantity: number
@@ -28,8 +28,8 @@ class ActualLineItem
   sku: string   
   fullTitle?: string
   optionLabel: string
-  categoryTitle: string
-  categoryId: string  
+  familyTitle: string
+  familyId: string  
   desc?: string
   price: number
   img?: ImageDef 
@@ -42,8 +42,8 @@ class ActualLineItem
     this.sku = prod.sku
     this.fullTitle = prod.fullTitle
     this.optionLabel = prod.optionLabel
-    this.categoryTitle = prod.categoryTitle
-    this.categoryId = prod.categoryId
+    this.familyTitle = prod.familyTitle
+    this.familyId = prod.familyId
     this.desc = prod.desc
     this.price = prod.price
     this.img = prod.img
@@ -67,7 +67,7 @@ class ActualLineItem
   }
 
   get title(): string {
-    return this.fullTitle ? this.fullTitle : (this.categoryTitle + ', ' + this.optionLabel)
+    return this.fullTitle ? this.fullTitle : (this.familyTitle + ', ' + this.optionLabel)
   }
 
   takeSnapshot = (cmmc: CommerceService): ActualLineItemSnapshot => {
@@ -75,11 +75,11 @@ class ActualLineItem
     const title = this.fullTitle ? 
       this.fullTitle 
       : 
-      ((cmmc.getCategory(this.categoryId)?.title ?? this.categoryTitle) + ', ' + this.optionLabel)
+      ((cmmc.getFamily(this.familyId)?.title ?? this.familyTitle) + ', ' + this.optionLabel)
 
     return({
       sku: this.sku,
-      categoryId: this.categoryId,
+      familyId: this.familyId,
       title,
       price: this.price,
       quantity: this.qu,
@@ -107,7 +107,7 @@ class ActualLineItem
     }
   }
 
-  inCategory(id: string): boolean {
+  inFamily(id: string): boolean {
       // TODO: will break for level one (which is ok for lux, but not generally)
     return this.sku.includes(`-${id}-`)
   }

package/service/impls/standalone/index.ts

@@ -1,6 +1,6 @@
 import { enableStaticRendering } from 'mobx-react-lite'
 
-import type { CommerceService, Category, ProductTreeNode } from '../../../types'
+import type { CommerceService, Family, ProductTreeNode } from '../../../types'
 import StandaloneService, {type StandaloneServiceOptions} from './standalone-service'
 
 import { readSnapshot, listenAndWriteSnapshots } from './localStorage'
@@ -18,7 +18,7 @@ const _log = (s: string) => {
 let instance: StandaloneService | undefined =  undefined
 
 export const getInstance = (
-  categories: Category[], 
+  families: Family[], 
   rootNode: ProductTreeNode, 
   options?: StandaloneServiceOptions
 ): CommerceService => {
@@ -30,7 +30,7 @@ export const getInstance = (
    if (typeof window === "undefined") {
     //_log("NEW INSTANCE FOR SERVER")
     return new StandaloneService(
-      categories, 
+      families, 
       rootNode, 
       options
     )
@@ -41,7 +41,7 @@ export const getInstance = (
     //_log("NEW INSTANCE FOR CLIENT")
     const snapShot = readSnapshot()
     instance = new StandaloneService(
-      categories, 
+      families, 
       rootNode, 
       options,
       snapShot

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

@@ -11,7 +11,7 @@ import { computedFn } from 'mobx-utils'
 
 import type {
   CommerceService, 
-  Category, 
+  Family, 
   LineItem,
   SelectedPaths, 
   ProductTreeNode,
@@ -25,8 +25,7 @@ import {
 } from './orders'
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
-
-const SEP = '-'
+import SEP from '../../../util/sep'
 
 type StandaloneServiceOptions = {
   levelZeroPrefix?: string
@@ -41,7 +40,7 @@ interface StandaloneServiceSnapshot {
 class StandaloneService 
   implements CommerceService
 {
-  private _categoryMap = new Map<string, Category>()
+  private _familyMap = new Map<string, Family>()
   private _rootNode: ProductTreeNode 
   private _selectedPaths: SelectedPaths = {}
   private _promo: Promo | null = null
@@ -50,7 +49,7 @@ class StandaloneService
   private _currentItem: ActualLineItem | undefined = undefined
 
   constructor(
-    categories: Category[],
+    families: Family[],
     rootNode: ProductTreeNode,
     options: StandaloneServiceOptions,
     serviceSnapshot?: StandaloneServiceSnapshot,
@@ -59,7 +58,7 @@ class StandaloneService
     this._rootNode = rootNode
     this._options = options
 
-    categories.forEach((c) => {
+    families.forEach((c) => {
       c.products = c.products.map((p) => { 
         if (serviceSnapshot) {
           const itemSnapshot = serviceSnapshot.items.find((is) => (is.sku === p.sku))
@@ -69,7 +68,7 @@ class StandaloneService
         }
         return new ActualLineItem(p)
       })
-      this._categoryMap.set(c.id, c)
+      this._familyMap.set(c.id, c)
     })
 
     makeObservable<
@@ -90,7 +89,7 @@ class StandaloneService
       promoAppliedCartTotal: computed,
       cartEmpty: computed,
       selectedItems: computed,
-      selectedCategories: computed, 
+      selectedFamilies: computed, 
       hasSelection: computed, 
       setCurrentItem: action,
       currentItem: computed,
@@ -102,12 +101,12 @@ class StandaloneService
     })
   }
 
-  getCategory(id: string): Category | undefined {
-    return this._categoryMap.get(id)
+  getFamily(id: string): Family | undefined {
+    return this._familyMap.get(id)
   }
 
   getNodeAtPath(skuPath: string): ProductTreeNode | undefined {
-    const toks = skuPath.split(SEP)
+    const toks = skuPath.split(SEP.TOK)
     let level = 1
     let desc: ProductTreeNode | undefined = this._rootNode
     do {
@@ -170,8 +169,8 @@ class StandaloneService
 
   get cartItems(): LineItem[] {
     let result: LineItem[] = []
-    this._categoryMap.forEach((cat) => {
-      result = [...result, ...(cat.products as LineItem[]).filter((item) => (item.isInCart))]
+    this._familyMap.forEach((fam) => {
+      result = [...result, ...(fam.products as LineItem[]).filter((item) => (item.isInCart))]
     })
     return result.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
   }
@@ -238,46 +237,33 @@ 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.selectedCategories && this.selectedCategories.length > 0) {
-          for (let category of this.selectedCategories) {
-          categoriesTried.push(category.id)
-          const foundItem = category.products.find((p) => (p.sku === skuToFind))
+      const familiesTried: string[] = []
+      if (this.selectedFamilies && this.selectedFamilies.length > 0) {
+          for (let family of this.selectedFamilies) {
+          familiesTried.push(family.id)
+          const foundItem = family.products.find((p) => (p.sku === skuToFind))
           if (foundItem) {
-            logMe("FOUND 1st LOOP")
             return foundItem as ActualLineItem
           }
         }
       }
-      for( const [categoryId, category] of this._categoryMap.entries()) {
-        if (categoriesTried.includes(categoryId)) continue
-        const foundItem = category.products.find((p) => (p.sku === skuToFind)) as ActualLineItem | undefined
+      for( const [familyId, family] of this._familyMap.entries()) {
+        if (familiesTried.includes(familyId)) continue
+        const foundItem = family.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
   }
 
@@ -290,15 +276,15 @@ class StandaloneService
     return this._currentItem
   }
 
-  selectPaths(sel: SelectedPaths): Category[] {
+  selectPaths(sel: SelectedPaths): Family[] {
     runInAction (() => {
       this._selectedPaths = this._processAndValidate(sel) 
     })
-    return this.selectedCategories
+    return this.selectedFamilies
   }
 
-  selectPath(skuPath: string): Category[] {
-    const toks = skuPath.split(SEP)
+  selectPath(skuPath: string): Family[] {
+    const toks = skuPath.split(SEP.TOK)
     const highestLevel = toks.length - 1
     const fsv: SelectedPaths = {}
     for (let level = 1; level <= highestLevel; level++ ) {
@@ -315,14 +301,14 @@ class StandaloneService
     return result
   }
 
-  get selectedCategories(): Category[] {
+  get selectedFamilies(): Family[] {
     if (Object.keys(toJS(this._selectedPaths)).length === 0) {
       // FacetsDesc have never been set or unset, so cannot evaluate them
       return []
     }
 
     return this._rootNode.subNodes!.reduce(
-      (acc: Category[], subFacet: ProductTreeNode) => (
+      (acc: Family[], subFacet: ProductTreeNode) => (
           // Pass the root token as a one member array
         this._reduceNode([this._rootNode.skuToken], acc, subFacet)   
       ), 
@@ -330,7 +316,7 @@ class StandaloneService
     )
   }
 
-  private _reduceNode(parentPath: string[], acc: Category[], node: ProductTreeNode): Category[] {
+  private _reduceNode(parentPath: string[], acc: Family[], node: ProductTreeNode): 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,
@@ -350,11 +336,11 @@ class StandaloneService
         , acc)
       }
         // Process leaf
-      const cat = this._categoryMap.get(path.join(SEP))
-      if (!cat) {
-        throw new Error("selectedCategories WTF?!" + path.join(SEP))
+      const fam = this._familyMap.get(path.join(SEP.TOK))
+      if (!fam) {
+        throw new Error("selectedFamilies WTF?!" + path.join(SEP.TOK))
       }
-      acc.push(cat)    
+      acc.push(fam)    
     }
     return acc
   }
@@ -389,16 +375,16 @@ class StandaloneService
       return []
     }
 
-    return this.selectedCategories.reduce(
-      (allProducts, cat) => ([...allProducts, ...(cat.products as LineItem[])]), [] as LineItem[])
+    return this.selectedFamilies.reduce(
+      (allProducts, fam) => ([...allProducts, ...(fam.products as LineItem[])]), [] as LineItem[])
   }
 
   get hasSelection(): boolean {
-    return this.selectedCategories.length > 0
+    return this.selectedFamilies.length > 0
   }
 
-  getCartCategorySubtotal(categoryId: string): number {
-    const c = this._categoryMap.get(categoryId)!
+  getFamilySubtotal(familyId: string): number {
+    const c = this._familyMap.get(familyId)!
     return (c.products as LineItem[]).reduce(
         // avoid floating point bs around zero
       (total, item) => (item.quantity > 0 ? total + item.price * item.quantity : total),
@@ -406,9 +392,9 @@ class StandaloneService
     )
   }
 
-  debug_getSelectedCategories = () => {
-    const spec = this.selectedCategories
-    console.log('NUM SPEC CATS: ', spec.length) 
+  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(', ')) 
     }

package/types/commerce-service.ts

@@ -1,6 +1,6 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
 import type { ProductTreeNode, SelectedPaths } from './tree-node'
-import type Category from './category'
+import type Family from './family'
 import type Promo from './promo'
 
 interface CommerceService extends ObsLineItemRef {
@@ -21,7 +21,7 @@ interface CommerceService extends ObsLineItemRef {
     /** returns the price with promo applied, of undefined if no promo or promo does not apply */
   itemPromoPrice(item: LineItem): number | undefined
    
-  getCartCategorySubtotal(categoryId: string): number
+  getFamilySubtotal(familyId: string): number
 
   createOrder(email: string, name?: string): Promise<string | undefined>
   updateOrderShippingInfo(orderId: string, shippingInfo: any): Promise<void>
@@ -32,20 +32,28 @@ interface CommerceService extends ObsLineItemRef {
      * If a level is selected as [], nothing will be selected.
      * If a level is missing (undefined), everything at that level is selected
      * 
-     * This selects one or more Category's, and all the LineItem's in them.
+     * This selects one or more Family's, and all the LineItem's in them.
      * 
-     * An empty value object selects all Category's and all LineItem's,
+     * An empty value object selects all Family's and all LineItem's,
      * */ 
-  selectPaths(value: SelectedPaths): Category[]
-  selectPath(skuPath: string): Category[] 
+  selectPaths(value: SelectedPaths): Family[]
+  selectPath(skuPath: string): Family[] 
 
+/*
+  peekPath(skuPath: string): {
+    family: Family | undefined
+    siblingFamilies: Family[] | undefined
+    categoryNode: ProductTreeNode | undefined
+    isSku: boolean
+  } 
+*/
   get selectedPaths(): SelectedPaths // returns a copy
   
   get selectedItems(): LineItem[]
-  get selectedCategories(): Category[] 
+  get selectedFamilies(): Family[] 
   get hasSelection(): boolean
 
-    /** Whether this path defines a Category, or if it has further levels */
+    /** Whether this path defines a Family, or if it has further levels */
   getNodeAtPath(skuPath: string): ProductTreeNode | undefined 
 
     /** 
@@ -72,10 +80,11 @@ interface CommerceService extends ObsLineItemRef {
      *  */ 
   get currentItem(): LineItem | undefined
 
-  getCategory(id: string): Category | undefined
+  getFamily(id: string): Family | undefined
 
 }
 
+
 export {
   type CommerceService as default
 }

package/types/{category.ts → family.ts}

@@ -1,7 +1,7 @@
 import type { ImageDef } from '@hanzo/ui/types'
 import type Product from './product'
 
-interface Category {
+interface Family {
   id: string            // LXB-AU-B
   title: string         // Minted Bar, Lux Elite Card
   titleShort?: string   // Elite
@@ -13,5 +13,5 @@ interface Category {
 }
 
 export {
-  type Category as default
+  type Family as default
 }

package/types/index.ts

@@ -1,5 +1,5 @@
 
-export type { default as Category } from './category'
+export type { default as Family } from './family'
 export type { default as CommerceService } from './commerce-service'
 export type { default as Product } from './product'
 export type { default as Promo } from './promo'

package/types/item-selector.ts

@@ -17,12 +17,12 @@ interface _ItemSelectorCompProps {
     /** List selectors will scroll.  Used internally */
   scrollList: boolean
     /** 
-     * Whether the item label includes the Category name.
+     * Whether the item label includes the Family name.
      * eg, 'Minted Bar, 1oz' vs '1oz'
      * default: true in 'allVariants' mode and false otherwise.
      * This overrides
      */
-  showCategory?: boolean
+  showFamily?: boolean
     /**
      * Show the current item quantity along with title and price.
      * default: false

package/types/product.ts

@@ -1,17 +1,14 @@
-import type { ImageDef, VideoDef } from '@hanzo/ui/types'
+import type { MediaStackDef } from '@hanzo/ui/types'
 
-interface Product {
+interface Product extends MediaStackDef {
   id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
   sku: string   // human visible on orders etc.
   fullTitle?: string
   optionLabel: string
-  categoryId: string  // skuPath, eg LXB-AU-B
-  categoryTitle: string
+  familyId: string  // skuPath, eg LXB-AU-B
+  familyTitle: string
   desc?: string
   price: number
-  img?: ImageDef  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
-  animation?: string  // spline scene url
-  video?: VideoDef
 }
 
 export {

package/util/buy-ui-conf.ts

@@ -1,4 +1,5 @@
 import type { BuyUISpec } from '../types'
+import SEP from './sep'
 
 const map = new Map<string, BuyUISpec>([
   ['LXM_AU', {
@@ -29,6 +30,6 @@ const map = new Map<string, BuyUISpec>([
 ])
 
 export default (skuPath: string): BuyUISpec | undefined => {
-  const key = skuPath.split('-').slice(0, 2).join('-')
+  const key = skuPath.split(SEP.TOK).slice(0, 2).join(SEP.TOK)
   return map.get(key)
 }

package/util/sep.ts

@@ -0,0 +1,5 @@
+export default {
+  TOK: '-',
+  SUB_TOK: '_',
+  DECIMAL: '.'
+}

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

@@ -10,11 +10,12 @@ import {
 
 import { useCommerce } from '../service/context'
 import type { SelectedPaths } from '../types'
+import SEP from './sep'
 
 const PLEASE_SELECT_FACETS = 'Please select an option from each group.'
 
 const useSyncSkuParamWithCurrentItem = (
-  categoryLevel: number,
+  familyLevel: number,
   setMessage: (m: string | undefined) => void,
   setLoading?: (l: boolean) => void
 ) => {
@@ -32,14 +33,14 @@ const useSyncSkuParamWithCurrentItem = (
   useEffect(() => {
 
     return reaction(() => ({
-      specifiedCat: cmmc.selectedCategories.length === 1 ? cmmc.selectedCategories[0] : undefined, 
+      specifiedCat: cmmc.selectedFamilies.length === 1 ? cmmc.selectedFamilies[0] : undefined, 
       currentItem: cmmc.currentItem
     }),
     ({specifiedCat, currentItem}) => {
-      //console.log("REACTION: " + `CAT ID: ${category?.id} SKU: ${item?.sku}`)
+      //console.log("REACTION: " + `CAT ID: ${family?.id} SKU: ${item?.sku}`)
       if (currentItem) {
           // if we set the currentItem w sku, then user selects other facets
-        if (specifiedCat && currentItem.categoryId != specifiedCat.id ) {
+        if (specifiedCat && currentItem.familyId != specifiedCat.id ) {
           cmmc.setCurrentItem(specifiedCat.products[0].sku)
         }
         setSkuParam(cmmc.currentItem!.sku)
@@ -53,11 +54,11 @@ const useSyncSkuParamWithCurrentItem = (
 
   useEffect(() => {
     
-    const setCurrentCategoryFromSku = (sku: string) => {
-      const toks: string[] = sku.split('-')
+    const setCurrentFamilyFromSku = (sku: string) => {
+      const toks: string[] = sku.split(SEP.TOK)
       const fv: SelectedPaths = {}
         // TODO: confirm that extra trailing nonsense tokens won't break selectPaths()
-      for (let i = 1; i < categoryLevel; i++) {
+      for (let i = 1; i < familyLevel; i++) {
         if (i in toks) {
           fv[i] = [toks[i]]
         } 
@@ -73,7 +74,7 @@ const useSyncSkuParamWithCurrentItem = (
         }
         setAddParam(false)
       }
-      setCurrentCategoryFromSku(skuParam)
+      setCurrentFamilyFromSku(skuParam)
       setMessage(undefined)
     }
     else {

package/components/item/item-media.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import Spline from '@splinetool/react-spline'
-
-import { Image  } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import {
-  VideoBlockComponent,
-  type Block,
-  type VideoBlock
-} from '@hanzo/ui/blocks'
-import type { Product } from '../../types'
-
-const ItemMedia: React.FC<{
-  item: Product
-  constrainTo?: {w: number, h: number}
-  clx?: string
-}> = ({
-  item: {img, video, animation},
-  constrainTo: cnst = {w: 250, h: 250},
-  clx=''
-}) => {
-
-    // Order of precedence: 3D > MP4 > Image
-  return animation ? ( 
-    <Spline
-      scene={animation}
-      className={cn(clx, 'pointer-events-none')} 
-      style={{
-          // // !aspect-[12/10] 
-        width: (6/5 * (typeof cnst.h === 'number' ? cnst.h as number : parseInt(cnst.h as string)) ),
-        height: cnst.h
-      }}
-    />
-  ) : video ? (
-    <VideoBlockComponent
-      constrainTo={cnst}
-      block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
-      className={clx}
-    />
-  ) : (img && 
-    <Image
-      def={img}
-      constrainTo={cnst} 
-      className={cn('m-auto', clx)}
-    />
-  ) // TODO: return placeholder
-}
-
-export default ItemMedia