@hanzo/commerce 5.1.3 → 6.1.0

package/components/select/image-selector.tsx

@@ -0,0 +1,162 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { 
+  Image, 
+  Label, 
+  RadioGroup, 
+  ScrollArea 
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+
+const ImageRadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
+    item: LineItem,
+    constrainTo: {w: number, h: number}  
+  }
+>(({ 
+  item,
+  constrainTo,
+  className, 
+  ...props 
+}, ref) => {
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+      id={item.sku}
+      value={item.sku}
+    >
+      {item.img ? (
+        <Image def={item.img} constrainTo={constrainTo} preload className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: constrainTo.h, width: constrainTo.w}}/>
+      )}
+    </RadioGroupPrimitive.Item>
+  )
+})
+ImageRadioGroupItem.displayName = 'ImageRadioGroupItem'
+
+const ImageItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  showCategory=false,
+  showQuantity=false,
+  scrollList=false
+}) => {
+
+  const LabelText: React.FC<{item: LineItem}> = ({item}) => (
+    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+  )
+
+  const ItemAndPrice: React.FC<{
+    item: LineItem
+    listBoxMode: boolean
+    selected: boolean
+    className?: string
+  }> = ({
+    item,
+    listBoxMode,
+    selected,
+    className=''
+  }) => (
+    <div className={cn(
+      'flex items-center', 
+      className, 
+      itemClx,
+    )}>
+      <ImageRadioGroupItem 
+        item={item} 
+        constrainTo={{h: 36, w: 72}} // Apple suggest 42px 
+        className={
+          'mr-2 ' +  (listBoxMode ?  '' : 
+          'border-transparent border-2 rounded-sm data-[state=checked]:border-foreground')
+        }
+      />
+      <Label htmlFor={item.sku} className={selected && listBoxMode ? 'text-accent' : ''}>
+        <LabelText item={item} />
+      </Label>
+    </div>
+  )
+ 
+  const Item: React.FC<{
+    item: LineItem
+    selected: boolean
+    listBoxMode: boolean
+    clx?: string
+  }> = ({
+    item,
+    selected,
+    listBoxMode,
+    clx=''
+  }) => {
+
+    const outClx = [
+      (listBoxMode ? 'border-b border-muted-3 py-1' : 'mb-3'),
+      (selected && listBoxMode ? 'border border-foreground rounded-sm' : ''),
+    ]
+
+    return (showQuantity ? (
+      <div key={item.sku} className={cn('flex flex-row items-center', ...outClx, clx )}>
+        <ItemAndPrice item={item} selected={selected} listBoxMode={listBoxMode} className='grow'/>
+        <div className='grow-0 shrink-0 font-semibold text-sm leading-none px-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
+      </div>
+    ) : (
+      <ItemAndPrice 
+        key={item.sku} 
+        item={item} 
+        selected={selected} 
+        listBoxMode={listBoxMode} 
+        className={cn(...outClx, 
+        listBoxMode ? '' : 'mb-1',
+        clx)} 
+      />
+    ))
+  }
+
+  return items.length > 1 ? (
+    <RadioGroup
+      className={cn('flex flex-col gap-0', 
+        (scrollList ? 'shrink min-h-0' : ''), 
+        clx,
+      )}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+    >
+      {scrollList ? (
+        <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2 rounded-sm '>
+          {items.map((item) => (
+            <Item item={item} listBoxMode={true} selected={itemRef.item?.sku === item.sku}/>
+          ))}
+        </ScrollArea>
+      ) : (<>
+        {items.map((item) => (
+          <Item item={item} listBoxMode={false} selected={itemRef.item?.sku === item.sku}/>
+        ))}
+      </>)}
+    </RadioGroup>
+  ) : (
+    <div className={soleItemClx}>
+      <LabelText item={items[0]} />
+    </div>
+  )
+})
+
+export default ImageItemSelector

package/components/select/radio-selector.tsx

@@ -0,0 +1,125 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  Label, 
+  RadioGroup, 
+  RadioGroupItem,
+  ScrollArea 
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+
+const RadioItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  showCategory=false,
+  showQuantity=false,
+  scrollList=false
+}) => {
+
+  const LabelText: React.FC<{item: LineItem}> = ({item}) => (
+    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+  )
+
+  const ItemAndPrice: React.FC<{
+    item: LineItem
+    listBoxMode: boolean
+    selected: boolean
+    className?: string
+  }> = ({
+    item,
+    listBoxMode,
+    selected,
+    className=''
+  }) => (
+    <div className={cn(
+      'flex items-center', 
+      className, 
+      itemClx,
+    )}>
+      <RadioGroupItem
+        value={item.sku} 
+        larger
+        id={item.sku} 
+        className={'mr-2 ' + (listBoxMode ?  'hidden' : '')}
+      />
+      <Label htmlFor={item.sku} className={selected ? 'text-accent' : ''}>
+        <LabelText item={item} />
+      </Label>
+    </div>
+  )
+ 
+  const Item: React.FC<{
+    item: LineItem
+    selected: boolean
+    listBoxMode: boolean
+    clx?: string
+  }> = ({
+    item,
+    selected,
+    listBoxMode,
+    clx=''
+  }) => {
+
+    const outClx = [
+      'h-10',
+      (listBoxMode ? 'border-b border-muted-3 py-1 pl-2' : 'mb-3'),
+      (selected && listBoxMode ? 'border border-foreground rounded-sm' : ''),
+    ]
+
+    return (showQuantity ? (
+      <div key={item.sku} className={cn('flex flex-row items-center', ...outClx, clx )}>
+        <ItemAndPrice item={item} selected={selected} listBoxMode={listBoxMode} className='grow'/>
+        <div className='grow-0 shrink-0 font-semibold text-sm leading-none px-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
+      </div>
+    ) : (
+      <ItemAndPrice 
+        key={item.sku} 
+        item={item} 
+        selected={selected} 
+        listBoxMode={listBoxMode} 
+        className={cn(...outClx, 
+        listBoxMode ? '' : 'mb-1',
+        clx)} 
+      />
+    ))
+  }
+
+  return items.length > 1 ? (
+    <RadioGroup
+      className={cn('flex flex-col gap-0', 
+        (scrollList ? 'shrink min-h-0' : ''), 
+        clx,
+      )}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+    >
+      {scrollList ? (
+        <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2 rounded-sm '>
+          {items.map((item) => (
+            <Item item={item} listBoxMode={true} selected={itemRef.item?.sku === item.sku}/>
+          ))}
+        </ScrollArea>
+      ) : (<>
+        {items.map((item) => (
+          <Item item={item} listBoxMode={false} selected={itemRef.item?.sku === item.sku}/>
+        ))}
+      </>)}
+    </RadioGroup>
+  ) : (
+    <div className={soleItemClx}>
+      <LabelText item={items[0]} />
+    </div>
+  )
+})
+
+export default RadioItemSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "5.1.3",
+  "version": "6.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,8 +40,9 @@
   },
   "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",
     "lucide-react": "^0.307.0",
     "mobx": "^6.12.0",

package/service/context.tsx

@@ -9,7 +9,7 @@ enableStaticRendering(typeof window === "undefined")
 import type CommerceService from '../types/commerce-service'
 import type { ServiceOptions } from '..'
 import getServiceSingleton from './impls'
-import type { Category, FacetValueDesc } from '../types'
+import type { Category, ProductTreeNode } from '../types'
 
 const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
 
@@ -20,17 +20,17 @@ const useCommerce = (): CommerceService => {
 
 const CommerceServiceProvider: React.FC<PropsWithChildren & {
   productsByCategory: Category[]
-  rootFacet: FacetValueDesc
+  rootNode: ProductTreeNode
   options?: ServiceOptions
 }> = ({ 
   children,
   productsByCategory,
-  rootFacet,
+  rootNode,
   options
 }) => {
 
     // TODO: Inject Promo fixture here
-  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootFacet, options))
+  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootNode, options))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>
       {children}

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/index.ts

@@ -1,6 +1,6 @@
 import { enableStaticRendering } from 'mobx-react-lite'
 
-import type { CommerceService, Category, FacetValueDesc } from '../../../types'
+import type { CommerceService, Category, ProductTreeNode } from '../../../types'
 import StandaloneService, {type StandaloneServiceOptions} from './standalone-service'
 
 import { readSnapshot, listenAndWriteSnapshots } from './localStorage'
@@ -19,7 +19,7 @@ let instance: StandaloneService | undefined =  undefined
 
 export const getInstance = (
   categories: Category[], 
-  rootFacet: FacetValueDesc, 
+  rootNode: ProductTreeNode, 
   options?: StandaloneServiceOptions
 ): CommerceService => {
 
@@ -31,7 +31,7 @@ export const getInstance = (
     //_log("NEW INSTANCE FOR SERVER")
     return new StandaloneService(
       categories, 
-      rootFacet, 
+      rootNode, 
       options
     )
   }
@@ -42,7 +42,7 @@ export const getInstance = (
     const snapShot = readSnapshot()
     instance = new StandaloneService(
       categories, 
-      rootFacet, 
+      rootNode, 
       options,
       snapShot
     )