@hanzo/commerce 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.3.3",
-    "@hanzo/ui": "^3.1.0",
+    "@hanzo/ui": "^3.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

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

@@ -5,9 +5,9 @@ import {
   observable, 
 } from 'mobx'
 
-import type { VideoDef } from '@hanzo/ui/types'
+import type { ImageDef, VideoDef } from '@hanzo/ui/types'
 
-import type { Product, LineItem } from '../../../types'
+import type { Product, LineItem, CommerceService } from '../../../types'
 
 interface ActualLineItemSnapshot {
   sku: string  
@@ -26,12 +26,13 @@ class ActualLineItem
 
   id: string    
   sku: string   
-  title: string
-  titleAsOption: string
+  fullTitle?: string
+  optionLabel: string
+  categoryTitle: string
   categoryId: string  
   desc?: string
   price: number
-  img?: string 
+  img?: ImageDef 
   video?: VideoDef 
   animation?: string 
   timeAdded: number = 0 // timeAdded of being added to cart
@@ -39,8 +40,9 @@ class ActualLineItem
   constructor(prod: Product, snap?: ActualLineItemSnapshot) {
     this.id = prod.id
     this.sku = prod.sku
-    this.title = prod.title
-    this.titleAsOption = prod.titleAsOption
+    this.fullTitle = prod.fullTitle
+    this.optionLabel = prod.optionLabel
+    this.categoryTitle = prod.categoryTitle
     this.categoryId = prod.categoryId
     this.desc = prod.desc
     this.price = prod.price
@@ -58,20 +60,32 @@ class ActualLineItem
       timeAdded: observable,
       canDecrement: computed,  
       isInCart: computed,
-      
+      title: computed,
       increment: action,
       decrement: action,
     })
   }
 
-  takeSnapshot = (): ActualLineItemSnapshot => ({
-    sku: this.sku,
-    categoryId: this.categoryId,
-    title: this.title,
-    price: this.price,
-    quantity: this.qu,
-    timeAdded: this.timeAdded
-  } satisfies ActualLineItemSnapshot)
+  get title(): string {
+    return this.fullTitle ? this.fullTitle : (this.categoryTitle + ', ' + this.optionLabel)
+  }
+
+  takeSnapshot = (cmmc: CommerceService): ActualLineItemSnapshot => {
+
+    const title = this.fullTitle ? 
+      this.fullTitle 
+      : 
+      ((cmmc.getCategory(this.categoryId)?.title ?? this.categoryTitle) + ', ' + this.optionLabel)
+
+    return({
+      sku: this.sku,
+      categoryId: this.categoryId,
+      title,
+      price: this.price,
+      quantity: this.qu,
+      timeAdded: this.timeAdded
+    } satisfies ActualLineItemSnapshot)
+  }
  
   get canDecrement(): boolean { return this.qu > 0 }
   get quantity(): number {return this.qu}

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

@@ -78,8 +78,8 @@ class StandaloneService
         '_currentItem' |
         '_promo'
     >(this, {
-      _selectedPaths :  observable.deep,
-      _currentItem: observable,
+      _selectedPaths : observable.deep,
+      _currentItem: observable.shallow,
       _promo: observable,
     })
 
@@ -91,6 +91,7 @@ class StandaloneService
       cartEmpty: computed,
       selectedItems: computed,
       selectedCategories: computed, 
+      hasSelection: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
@@ -164,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[] {
@@ -237,10 +238,19 @@ 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  => {
 
@@ -250,6 +260,7 @@ class StandaloneService
           categoriesTried.push(category.id)
           const foundItem = category.products.find((p) => (p.sku === skuToFind))
           if (foundItem) {
+            logMe("FOUND 1st LOOP")
             return foundItem as ActualLineItem
           }
         }
@@ -258,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
   }
 
@@ -379,6 +393,10 @@ class StandaloneService
       (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(

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

@@ -43,6 +43,7 @@ interface CommerceService extends ObsLineItemRef {
   
   get selectedItems(): LineItem[]
   get selectedCategories(): Category[] 
+  get hasSelection(): boolean
 
     /** Whether this path defines a Category, or if it has further levels */
   getNodeAtPath(skuPath: string): ProductTreeNode | undefined 

package/types/index.ts

@@ -3,6 +3,7 @@ export type { default as Category } from './category'
 export type { default as CommerceService } from './commerce-service'
 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'

package/types/item-selector.ts

@@ -4,18 +4,39 @@ interface ItemSelector {
   items: LineItem[]
   selectedItemRef: ObsLineItemRef
   selectSku: (sku: string) => void 
-  showPrice?: boolean       // true by default
-  showQuantity?: boolean    // false by default (not impl)
 }
 
-interface ItemSelectorProps extends ItemSelector {
+interface _ItemSelectorCompProps {
   clx?: string
-  soleItemClx?: 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,
+  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,16 +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)
-  imgAR?: number
+  img?: ImageDef  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
   animation?: string  // spline scene url
   video?: VideoDef
 }

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(
@@ -59,4 +59,7 @@ export const getFacetValuesMutator = (level: number, cmmc: CommerceService): Str
 
 
 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'

package/util/obs-string-mutator.ts

@@ -0,0 +1,22 @@
+
+import { makeObservable, observable, action  } from 'mobx'
+import type { StringMutator } from '../types'
+
+class ObsStringMutator implements StringMutator {
+
+  s: string | null
+  constructor(_s: string) {
+    this.s = _s
+    makeObservable(this, {
+      s: observable,
+      set: action,
+      //get: computed 
+    })
+  }
+
+  set(v: string | null): void { this.s = v }
+  get(): string | null { return this.s }
+}
+
+export default ObsStringMutator
+

package/components/facet-values-widget/facet-image.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import type { ProductTreeNode } from '../../types'
-
-const ICON_SIZE = 20
-
-const FacetImage: React.FC<{
-  facetValueDesc: ProductTreeNode
-}> = ({
-  facetValueDesc
-}) => {
-
-  const {
-    img,
-    imgAR: ar,
-    label
-  } = facetValueDesc
-
-  if (!img) {
-    return null
-  }
-
-    // url
-  if (typeof img === 'string') {
-    return (
-      <Image 
-        src={img as string} 
-        alt={`Toggle ${label}`} 
-        className={'block mr-1 '} 
-        width={ar ?  ar * ICON_SIZE : ICON_SIZE}
-        height={ICON_SIZE}
-      />
-    )
-  }
-    // ReactNode
-  return img as React.ReactNode
-} 
-
-export default FacetImage
-