@hanzo/commerce 6.1.13 → 6.2.1

package/types/family.ts

@@ -6,9 +6,12 @@ interface Family {
   title: string         // Minted Bar, Lux Elite Card
   titleShort?: string   // Elite
   parentTitle?: string  // Lux Gold, Lux Credit
+  byline?: string       // literal text, or name of function on 'this' object that returns a string
   desc?: string
   img?: ImageDef, 
-    // inbound they're Products and then interally they become LineItems
+    // inbound to the service, they're Products 
+    // when it's initialized, interally they become LineItems
+    // always ok to cast up to LineItem thereafter
   products: Product[] 
 }
 

package/types/index.ts

@@ -3,10 +3,11 @@ 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'
-export type { default as BuyUISpec } from './buy-ui-spec'
+export type { default as TokenSeparators } from './token-separators'
 
 export * from './checkout'
 export * from './item-selector'
 export * from './line-item'
-export * from './tree-node'
+export * from './category-node'
 export * from './string-mutator'
+export * from './selection-ui-specifier'

package/types/item-selector.ts

@@ -6,31 +6,45 @@ interface ItemSelector {
   selectSku: (sku: string) => void 
 }
 
-interface _ItemSelectorCompProps {
-  clx?: string
-  itemClx?: string
-  soleItemClx?: string
-    /** type-specific props for ItemSelector's.
-     * eg, Carousel options.
-     */
-  ext?: any
-    /** List selectors will scroll.  Used internally */
-  scrollList: boolean
+type ItemSelectorOptions = {
     /** 
      * Whether the item label includes the Family name.
      * eg, 'Minted Bar, 1oz' vs '1oz'
-     * default: true in 'allVariants' mode and false otherwise.
-     * This overrides
+     * default: false.
      */
   showFamily?: boolean
     /**
      * Show the current item quantity along with title and price.
      * default: false
      */
-  showQuantity?: boolean    
+  showQuantity?: boolean   
+
+    /** default: true */
+  showPrice?: boolean
+
+    /** default: false */
+  imageButtons?: boolean  
+
+    /** default: false */
+  horizButtons?: boolean  
+}
+
+interface _ItemSelectorCompProps {
+  clx?: string
+  itemClx?: string
+  soleItemClx?: string
+    /** type-specific props for ItemSelector's.
+     * eg, Carousel options.
+     */
+  ext?: any
+    /** List selectors will scroll.  Used internally */
+  scrollable: boolean
+  options?: ItemSelectorOptions
+
+  mobile?: boolean 
 }
 
-type ItemSelectorCompProps = Omit<_ItemSelectorCompProps, 'scrollList'>
+type ItemSelectorCompProps = Omit<_ItemSelectorCompProps, 'scrollable'>
 
 interface ItemSelectorProps extends 
   ItemSelector, _ItemSelectorCompProps {}
@@ -38,5 +52,6 @@ interface ItemSelectorProps extends
 export {
   type ItemSelector,
   type ItemSelectorCompProps,
+  type ItemSelectorOptions,
   type ItemSelectorProps
 }

package/types/product.ts

@@ -1,4 +1,4 @@
-import type { MediaStackDef } from '@hanzo/ui/types'
+import type { ImageDef, MediaStackDef } from '@hanzo/ui/types'
 
 interface Product extends MediaStackDef {
   id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
@@ -7,8 +7,12 @@ interface Product extends MediaStackDef {
   optionLabel: string
   familyId: string  // skuPath, eg LXB-AU-B
   familyTitle: string
+  byline?: string
   desc?: string
   price: number
+    // image to by uses as an image button in a list of choices
+    // defaults to (MediaStackDef's) img
+  optionImg?: ImageDef
 }
 
 export {

package/types/selection-ui-specifier.ts

@@ -0,0 +1,36 @@
+import type { ItemSelectorOptions } from './item-selector'
+type SelectorType = 'buttons' | 'carousel' 
+
+interface FamilyCarouselSlideOptions extends ItemSelectorOptions {
+    /** 
+     * default: short
+     * 'short': product.shortTitle if defined
+     * 'long': always us product.title, even if .shortTitle is defined
+     * 'none': do not show title AND BYLINE
+     */
+  title?: 'none' | 'long' | 'short'
+    /** default: true */ 
+  showByline?: boolean
+}
+
+interface SelectionUISpecifier {
+  multiFamily?: {
+    familySelector: 'carousel'
+      /** default: true */ 
+    showParentTitle: boolean 
+    slide: {
+      type: 'buttons'
+      options?: FamilyCarouselSlideOptions
+    }
+  }
+  singleFamily?: {
+    type: SelectorType
+    options?: ItemSelectorOptions
+  } 
+}
+
+export {
+  type SelectionUISpecifier,
+  type FamilyCarouselSlideOptions,
+  type SelectorType
+}

package/types/token-separators.ts

@@ -0,0 +1,7 @@
+interface TokenSeparators {
+  readonly tok: string
+  readonly subTok: string
+  readonly decimal: string
+}
+
+export { type TokenSeparators as default }

package/util/error.ts

@@ -0,0 +1,34 @@
+
+// https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript
+
+type ErrorWithMessage = {
+  message: string
+}
+
+const isErrorWithMessage = (error: unknown): error is ErrorWithMessage => {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    typeof (error as Record<string, unknown>).message === 'string'
+  )
+}
+
+const toErrorWithMessage = (maybeError: unknown): ErrorWithMessage => {
+
+  if (isErrorWithMessage(maybeError)) {
+    return maybeError
+  }
+
+  try {
+    return new Error(JSON.stringify(maybeError))
+  } 
+  catch {
+    // fallback in case there's an error stringifying the maybeError
+    // like with circular references for example.
+    return new Error(String(maybeError))
+  }
+}
+
+export const getErrorMessage = (error: unknown) => (toErrorWithMessage(error).message)
+

package/util/index.ts

@@ -61,5 +61,8 @@ 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 ObsStringMutator } from './obs-string-mutator'
+export { default as ProductMediaAccessor } from './product-media-accessor'
 
-export { default as getUISpecFromPath } from './buy-ui-conf'
+export * from './selection-ui-specifiers'
+
+export { getErrorMessage } from './error'

package/util/product-media-accessor.ts

@@ -0,0 +1,58 @@
+import type { AnimationDef, ImageDef, MediaStackDef, VideoDef } from '@hanzo/ui/types'
+
+interface FamilyMediaData {
+  img?: Record<string, ImageDef>
+  video?: Record<string, VideoDef>
+  anim?: Record<string, AnimationDef>
+  optionImg?: Record<string, ImageDef> 
+}
+
+class ProductMediaAccessor {
+
+  _data: FamilyMediaData
+
+  constructor(data: FamilyMediaData) {
+    this._data = data 
+  }
+
+  img = (key: string): ImageDef | undefined => (
+    (this._data.img) ? this._data.img[key] : undefined
+  )
+
+  spreadableImg = (key: string): { img?: ImageDef } => (
+    (this._data.img) ? {img: this._data.img[key]} : {}
+  )
+
+  video = (key: string): VideoDef | undefined => (
+    (this._data.video) ? this._data.video[key] : undefined
+  )
+
+  spreadableVideo = (key: string): { video?: VideoDef } => (
+    (this._data.video) ? {video: this._data.video[key]} : {}
+  )
+
+  anim = (key: string): AnimationDef | undefined => (
+    (this._data.anim) ? this._data.anim[key] : undefined
+  )
+
+  spreadableAnim = (key: string): { animation?: AnimationDef } => (
+    (this._data.anim) ? {animation: this._data.anim[key]} : {}
+  )
+
+  mediaStack = (key: string): MediaStackDef => ({
+    ...this.spreadableImg(key),
+    ...this.spreadableVideo(key),
+    ...this.spreadableAnim(key)
+  })
+ 
+
+  optionImg = (key: string): ImageDef | undefined => (
+    (this._data.optionImg) ? this._data.optionImg[key] : undefined
+  )
+
+  spreadableOptionImg = (key: string): { optionImg?: ImageDef } => {
+    return (this._data.optionImg) ? { optionImg: this._data.optionImg[key]} : {}
+  }
+}
+
+export default ProductMediaAccessor

package/util/promo-codes.ts

@@ -42,6 +42,5 @@ const getPromoFromApi = async (code: string) => {
 }
 
 export {
-  getPromoFromApi as default,
-  PROMO_CODES
+  getPromoFromApi as default
 }

package/util/selection-ui-specifiers.ts

@@ -0,0 +1,34 @@
+import type { SelectionUISpecifier } from '../types'
+import sep from '../service/sep'
+
+const DEFAULT = {
+  multiFamily: {
+    familySelector: 'carousel',
+    showParentTitle: false, 
+    slide: { 
+      type: 'buttons' 
+    }
+  },
+  singleFamily: { type: 'carousel' }
+} satisfies SelectionUISpecifier
+
+const map = new Map<string, SelectionUISpecifier>()
+
+  // key: first two tokens of path
+export const initSelectionUI = (v: Record<string, SelectionUISpecifier>) => {
+  
+    // Might have multiple calls client and server side
+  if (map.size > 0) {
+    map.clear()
+  }
+
+  for (let [key, value] of Object.entries(v)) {
+    map.set(key, value)
+  }
+}
+
+export const getSelectionUISpecifier = (skuPath: string): SelectionUISpecifier => {
+  const key = skuPath.split(sep.tok).slice(0, 2).join(sep.tok)
+  const result = map.get(key)
+  return result ?? DEFAULT
+}

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

@@ -10,7 +10,7 @@ import {
 
 import { useCommerce } from '../service/context'
 import type { SelectedPaths } from '../types'
-import SEP from './sep'
+import sep from '../service/sep'
 
 const PLEASE_SELECT_FACETS = 'Please select an option from each group.'
 
@@ -55,7 +55,7 @@ const useSyncSkuParamWithCurrentItem = (
   useEffect(() => {
     
     const setCurrentFamilyFromSku = (sku: string) => {
-      const toks: string[] = sku.split(SEP.TOK)
+      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 < familyLevel; i++) {

package/components/select-family/family-carousel/family-slide.tsx

@@ -1,36 +0,0 @@
-'use client'
-import React, { useCallback, useEffect, useRef } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-
-import {
-  ApplyTypography,
-  MediaStack
-} from '@hanzo/ui/primitives'
-import type { Family } from '../../../types'
-
-const FamilySlide: React.FC<{
-  family: Family
-  clx?: string
-  mediaConstraint?: {w: number, h: number}
-  getBylineText?: (c: Family) => string
-  variantOrientation?: 'vert' | 'horiz' 
-  showVariantImage?: boolean
-  showVariantPrice?: boolean
-}> = ({
-  family,
-  clx='',
-  mediaConstraint,
-  getBylineText,
-  variantOrientation,
-  showVariantImage,
-  showVariantPrice
-}) => {
-
-
-  return <></>
-}
-
-export default FamilySlide

package/components/select-product/carousel-selector.tsx

@@ -1,112 +0,0 @@
-'use client'
-import React, { useCallback, useEffect, useRef } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-
-import {
-  type CarouselOptions,
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  ApplyTypography,
-  MediaStack
-} from '@hanzo/ui/primitives'
-
-import type { ItemSelectorProps, LineItem } from '../../types'
-import { formatCurrencyValue } from '../../util'
-
-interface CarouselItemSelectorPropsExt {
-  constrainTo: {w: number, h: number}
-  options?: CarouselOptions 
-    /** Do not show Family and / or Item title and Price */
-  imageOnly?: boolean
-}
-  
-const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
-  items,
-  selectSku,
-  selectedItemRef: itemRef,
-  scrollList, // ignored
-  clx='',
-  itemClx='',
-  showFamily=false,
-  ext={
-    options: {loop: true},
-    constrainTo: {w: 250, h: 250},
-    imageOnly: false 
-  } satisfies CarouselItemSelectorPropsExt
-}) => {
-
-  const { options, constrainTo, imageOnly} = ext
-
-  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
-  const dontRespondRef = useRef<boolean>(false)
-
-  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
-
-  const onSelect = useCallback((emblaApi: CarouselApi) => {
-    if (dontRespondRef.current) {
-      dontRespondRef.current = false
-      return
-    }
-    const index = emblaApi.selectedScrollSnap()
-    if (index !== -1) {
-      selectSku(items[index].sku)
-    }
-    dontRespondRef.current = false
-  }, [])
-
-  useEffect(() => {
-    return reaction(
-      () => ({item: itemRef.item}),
-      ({item}) => {
-        if (elbaApiRef.current) {
-          const index = items.findIndex((el) => (el.sku === item?.sku))  
-          if (index !== -1) {
-            dontRespondRef.current = true
-            elbaApiRef.current.scrollTo(index) 
-          }
-        }
-      }  
-    )
-  }, [])
-
-  const ItemInfo: React.FC<{
-    item: LineItem
-    clx?: string
-  }> = ({
-    item,
-    clx
-  }) => (
-    <ApplyTypography className={cn(clx, 'flex flex-col items-center !gap-2 [&>*]:!m-0')}>
-      {showFamily && (<h4>{item.familyTitle}</h4>)}
-      <p>{item.optionLabel}</p>
-      <p>{formatCurrencyValue(item.price)}</p>
-    </ApplyTypography>
-  )
-
-  return ( 
-    <Carousel options={options} className={cn('w-full px-2', clx)} onCarouselSelect={onSelect} setApi={setApi}>
-      <CarouselContent>
-      {items.map((item, index) => (
-        <CarouselItem key={index} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
-          <MediaStack media={item} constrainTo={constrainTo} clx='' />
-          {!imageOnly && (<ItemInfo item={item} clx=''/>)}
-        </CarouselItem>
-      ))}
-      </CarouselContent>
-      <CarouselPrevious className='left-1'/>
-      <CarouselNext className='right-1'/>
-    </Carousel>
-  )
-})
-
-export {
-  type CarouselItemSelectorPropsExt,
-  CarouselItemSelector as default 
-}

package/components/select-product/image-selector.tsx

@@ -1,162 +0,0 @@
-'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='',
-  showFamily=false,
-  showQuantity=false,
-  scrollList=false
-}) => {
-
-  const LabelText: React.FC<{item: LineItem}> = ({item}) => (
-    (showFamily ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showFamily ? ': ' : ', ') + 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