@hanzo/commerce 5.1.3 → 6.1.0

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/util/use-sync-sku-param-w-current-item.ts

@@ -9,7 +9,7 @@ import {
 } from 'next-usequerystate'
 
 import { useCommerce } from '../service/context'
-import type { FacetsValue } from '../types'
+import type { SelectedPaths } from '../types'
 
 const PLEASE_SELECT_FACETS = 'Please select an option from each group.'
 
@@ -32,7 +32,7 @@ const useSyncSkuParamWithCurrentItem = (
   useEffect(() => {
 
     return reaction(() => ({
-      specifiedCat: cmmc.specifiedCategories.length === 1 ? cmmc.specifiedCategories[0] : undefined, 
+      specifiedCat: cmmc.selectedCategories.length === 1 ? cmmc.selectedCategories[0] : undefined, 
       currentItem: cmmc.currentItem
     }),
     ({specifiedCat, currentItem}) => {
@@ -55,14 +55,14 @@ const useSyncSkuParamWithCurrentItem = (
     
     const setCurrentCategoryFromSku = (sku: string) => {
       const toks: string[] = sku.split('-')
-      const fv: FacetsValue = {}
-        // TODO: confirm that extra trailing nonsense tokens won't break setFacets()
+      const fv: SelectedPaths = {}
+        // TODO: confirm that extra trailing nonsense tokens won't break selectPaths()
       for (let i = 1; i < categoryLevel; i++) {
         if (i in toks) {
           fv[i] = [toks[i]]
         } 
       } 
-      cmmc.setFacets(fv)
+      cmmc.selectPaths(fv)
     }
 
       // setCI returns true if it's a recognized sku

package/components/buy-item/buy-item-button-wrapper.tsx

@@ -1,27 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import BuyItemPopup from './buy-item-popup'
-import BuyItemMobileDrawer from './buy-item-mobile-drawer'
-
-const BuyItemButtonWrapper: React.FC<{
-  skuPath: string
-  desktopTrigger: React.ReactNode
-  mobileTrigger: React.ReactNode
-  popupClx?: string
-}> = ({
-  skuPath,
-  desktopTrigger,
-  mobileTrigger,
-  popupClx=''
-}) => (<>
-  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
-    {desktopTrigger}
-  </BuyItemPopup>
-  <BuyItemMobileDrawer skuPath={skuPath} trigger={mobileTrigger} />
-</>
-)
-
-
-
-export default BuyItemButtonWrapper

package/components/buy-item/buy-item-button.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
-
-import BuyItemPopup from './buy-item-popup'
-import BuyItemMobileDrawer from './buy-item-mobile-drawer'
-import { cn } from '@hanzo/ui/util'
-
-const BuyItemButton: React.FC<PropsWithChildren & {
-  skuPath: string
-  variant? : ButtonVariants 
-  size?: ButtonSizes  
-  /* rounded?: ButtonRounded // wait for version bump*/
-  className?: string 
-  popupClx?: string
-}> = ({
-  skuPath,
-  variant,
-  size,
-  children,
-  className='',
-  popupClx=''
-}) => (<>
-  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
-    <Button size={size} variant={variant} className={cn(className, 'hidden md:flex')}>{children}</Button>
-  </BuyItemPopup>
-  <BuyItemMobileDrawer skuPath={skuPath} trigger={<Button size={size} variant={variant} className={cn(className, 'md:hidden')}>{children}</Button>} />
-</>
-)
-
-
-
-export default BuyItemButton

package/components/buy-item/buy-item-card.tsx

@@ -1,92 +0,0 @@
-'use client'
-import React, { useRef, useEffect } from 'react'
-import { autorun  } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetsValue } from '../../types'
-import { useCommerce } from '../../service/context'
-import { getFacetValuesMutator } from '../../util'
-import FacetValuesWidget from '../facet-values-widget'
-import SelectCategoryItemCard from './select-category-item-card'
-
-
-const BuyItemCard: React.FC<{
-  skuPath: string
-  mobile?: boolean
-  className?: string
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = observer(({
-  skuPath,
-  mobile=false,
-  className='',
-  onQuantityChanged
-}) => {
-
-  const cmmc = useCommerce()
-  const levelRef = useRef<number>(-1)
-
-  const cat = cmmc.getCategory(skuPath) 
-  const facets = cat ? undefined : cmmc.getFacetValuesAtSkuPath(skuPath)
-
-  useEffect(() => {
-
-    const toks = skuPath.split('-')
-    levelRef.current = toks.length - 1
-    const fsv: FacetsValue = {}
-    for (let level = 1; level <= levelRef.current; level++ ) {
-      fsv[level] = [toks[level]]   
-    } 
-    if (facets) {
-      fsv[levelRef.current + 1] = [facets[0].value]
-    }
-    cmmc.setFacets(fsv)
-
-    return autorun(() => {
-      const cats = cmmc.specifiedCategories
-        // Original cat was legit
-      if (cat && (cats.length === 0 || cats[0].id !== cat.id)) {
-        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cat.id) {
-          cmmc.setCurrentItem(cat.products[0].sku)
-        }
-      }
-      else if (cats.length > 0) {
-        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cats[0].id) {
-          cmmc.setCurrentItem(cats[0].products[0].sku)
-        }
-      }
-    })
-  }, [cat, facets])
-
-  const renderFacetTabs = facets && levelRef.current > 0
-
-  return (
-    <div className={className} >
-    {renderFacetTabs && (
-      <FacetValuesWidget
-        className={cn('grid gap-0 ' + `grid-cols-${facets.length}` + ' self-start ', 'border-b-2 border-level-3 mb-2 -mr-2 -ml-2')} 
-        isMobile={false}
-        mutator={getFacetValuesMutator(levelRef.current + 1, cmmc)} 
-        itemClx='flex-col h-auto gap-0 pb-1 pt-3 px-3'
-        buttonClx={'h-full !rounded-bl-none !rounded-br-none !rounded-tl-lg !rounded-tr-lg ' +
-        '!border-r !border-t !border-level-3'}
-        facetValues={facets}
-      />
-    )}
-    {cmmc.specifiedCategories[0] && (
-      <SelectCategoryItemCard 
-        noTitle
-        mobile={mobile}
-        category={cmmc.specifiedCategories[0]}
-        selectedItemRef={cmmc /* ...conveniently. :) */ }
-        selectSku={cmmc.setCurrentItem.bind(cmmc)}
-        className=''
-        onQuantityChanged={onQuantityChanged}
-      />  
-    )}
-    </div >
-  )
-})
-
-export default BuyItemCard

package/components/buy-item/buy-item-mobile-drawer.tsx

@@ -1,54 +0,0 @@
-'use client'
-import React, { useState, type ReactNode } from 'react'
-
-//import { X as LucideX} from 'lucide-react'
-//import { Sheet, SheetContent, SheetTrigger } from '@hanzo/ui/primitives'
-
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
-import BuyItemCard from './buy-item-card'
-
-const BuyItemMobileDrawer: React.FC<{
-  skuPath: string
-  trigger: ReactNode
-  triggerClx?: string  
-  drawerClx?: string
-  cardClx?: string
-}> = ({
-  skuPath,
-  trigger,
-  triggerClx='',
-  drawerClx='',
-  cardClx=''
-}) => {
-
-  const [open, setOpen] = useState<boolean>(false)
-
-  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
-    if (oldV === 0 && newV === 1) {
-      setTimeout(() => {setOpen(false)}, 150)
-    }
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen} >
-      <DrawerTrigger asChild className={triggerClx}>
-        {trigger}
-      </DrawerTrigger>
-      <DrawerContent 
-        className={cn('rounded-tl-xl rounded-tr-xl p-0 overflow-hidden', drawerClx)}
-       // side="bottom" 
-      >
-        <BuyItemCard skuPath={skuPath} mobile onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default BuyItemMobileDrawer

package/components/buy-item/select-category-and-item-widget.tsx

@@ -1,83 +0,0 @@
-'use client'
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ApplyTypography, ListBox } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetValueDesc, FacetsValue, LineItem } from '../../types'
-import { useCommerce } from '../../service/context'
-import { formatCurrencyValue } from '../../util'
-
-import FacetTogglesWidget from '../facet-values-widget'
-
-const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
-  `${item.titleAsOption}, ${formatCurrencyValue(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
-)
-
-const SelectCategoryAndItemWidget: React.FC<{
-  categoryLevel: number
-  parentLevelToken: string
-  categoryLevelValues: FacetValueDesc[]
-  className?: string
-}> = observer(({
-  categoryLevel, 
-  parentLevelToken,
-  categoryLevelValues,
-  className=''
-}) => {
-  const comm = useCommerce()
-
-  useEffect(() => {
-    const facets: FacetsValue = {}
-    facets[categoryLevel - 1] = [parentLevelToken]
-    facets[categoryLevel] = [categoryLevelValues[0].value]
-    comm.setFacets(facets)
-    comm.setCurrentItem(comm.specifiedCategories[0].products[0].sku)
-  }, [])
-
-  const onFacetTokenChanged = (token: string): void => {
-    const facets: FacetsValue = {}
-    facets[categoryLevel - 1] = [parentLevelToken]
-    facets[categoryLevel] = [token]
-    comm.setFacets(facets)
-  }
-
-  const currentFacetToken = (): string | null => {
-    if (comm.specifiedCategories.length === 0) return null
-    const skuPath = comm.specifiedCategories[0].id
-    const skuPathTokens = skuPath.split('-')
-    return skuPathTokens.length > 0 ? skuPathTokens[skuPathTokens.length - 1] : null
-  }
-
-  return (
-    <div className={cn('flex flex-col justify-start gap-4 items-start pt-3', className)}>
-      <FacetTogglesWidget 
-        facetValues={categoryLevelValues} 
-        mutator={{
-          get: currentFacetToken, // computed's are accessed through their get()
-          set: onFacetTokenChanged
-        }} 
-      />
-      {comm.specifiedItems.length === 0 ? (
-        <ApplyTypography>
-          <h3>No Items</h3>
-        </ApplyTypography>
-      ) : comm.specifiedItems.length === 1 ? (
-        <ApplyTypography>
-          <h4>{formatItem(comm.specifiedItems[0])}</h4>
-        </ApplyTypography>
-      ) : (
-        <ListBox<string> 
-          values={comm.specifiedItems.map((it) => (it.sku))}   
-          labels={comm.specifiedItems.map((it) => (formatItem(it)))}   
-          isEqual={(v1: string, v2: string) => (v1 === v2)}
-          value={comm.currentItem?.sku}
-          onValueChange={comm.setCurrentItem.bind(comm)}
-        />
-      )}
-    </div>
-  )
-})
-
-export default SelectCategoryAndItemWidget

package/components/category-item-radio-selector.tsx

@@ -1,55 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import type { ItemSelector, LineItem, Product } from '../types'
-import { formatCurrencyValue } from '../util'
-import { cn } from '@hanzo/ui/util'
-
-const CategoryItemRadioSelector: React.FC<ItemSelector & {
-  groupClx?: string
-  itemClx?: string
-}> = observer(({
-  category,
-  selectedItemRef: itemRef,
-  selectSku,
-  groupClx='',
-  itemClx='',
-  showPrice=true,
-  showQuantity=true
-}) => {
-
-  const Choice: React.FC<{
-    item: Product
-    className?: string
-  }> = ({
-    item,
-    className=''
-  }) => (
-    <div className={cn(className, itemClx)}>
-      <RadioGroupItem value={item.sku} id={item.sku} />
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
-    </div>
-  )
-
-  return ( category.products.length > 1 ? (
-      <RadioGroup
-        className={cn(showQuantity ? 'table' : '', groupClx)}
-        onValueChange={selectSku}
-        value={itemRef.item ? itemRef.item.sku : ''}
-      >
-      {(category.products as LineItem[]).map((item) => (showQuantity ? (
-        <div className='table-row' key={item.sku}>
-          <Choice item={item} className='table-cell pr-2 align-text-top pb-2'/>
-          <div className='table-cell font-semibold text-sm leading-none align-text-top pb-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
-        </div>
-      ) : (
-        <Choice item={item} className='mb-2'  key={item.sku}/>
-      )))}
-      </RadioGroup>
-    ) : (<p>TODO</p>)
-  )
-})
-
-export default CategoryItemRadioSelector

package/components/category-item-scroll-selector.tsx

@@ -1,40 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { ScrollArea } from '@hanzo/ui/primitives'
-
-import type { ItemSelector } from '../types'
-import { formatCurrencyValue } from '../util'
-
-
-const CategoryItemScrollSelector: React.FC<ItemSelector & {
-  outerClx?: string
-  itemClx?: string
-}> = observer(({
-  category,
-  selectedItemRef: iRef,
-  selectSku,
-  outerClx='',
-  itemClx=''
-}) => {
-
-  return (
-    <ScrollArea className={cn('border border-muted-4 rounded-lg', outerClx)}>
-      {category.products.map((prod) => (
-        <div key={prod.sku} onClick={() => {selectSku(prod.sku)}}>
-          <div className={cn(
-            'h-10 border-b flex flex-col justify-center px-4',
-            (iRef.item?.sku === prod.sku) ? 'font-semibold text-accent' : 'text-muted', 
-            itemClx
-          )}>
-            {prod.titleAsOption + ', ' + formatCurrencyValue(prod.price)}
-          </div>
-        </div>
-      ))}
-    </ScrollArea>
-  )
-})
-
-export default CategoryItemScrollSelector

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

@@ -1,41 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import type { FacetValueDesc } from '../../types'
-
-const ICON_SIZE = 20
-
-const FacetImage: React.FC<{
-  facetValueDesc: FacetValueDesc
-}> = ({
-  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
-

package/components/item-carousel.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-
-import Spline from '@splinetool/react-spline'
-
-import { cn } from '@hanzo/ui/util'
-
-import {
-  type CarouselOptionsType,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext
-} from '@hanzo/ui/primitives'
-
-import {
-  VideoBlockComponent,
-  ImageBlockComponent,
-  type ImageBlock,
-  type Block,
-  type VideoBlock
-} from '@hanzo/ui/blocks'
-
-import type { LineItem } from '../types'
-import type { Dimensions } from '@hanzo/ui/types'
-
-  // Order of precedence of visuals: 3D > MP4 > Image
-const ItemCarousel: React.FC<{
-  items: LineItem[]
-  constrainTo: Dimensions
-  options?: CarouselOptionsType 
-  className?: string
-  itemClx?: string  
-}> = ({ 
-  items,
-  options,
-  className='',
-  constrainTo,
-  itemClx=''
-}) => ( 
-  // className: 'w-full max-w-sm mx-auto 
-  // itemClx:  'flex aspect-square items-center justify-center '
-  <Carousel options={options} className={cn('px-2', className)} >
-    <CarouselContent>
-    {items.map(({title, img, video, animation}, index) => (
-      <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
-      {animation ? (
-        <Spline
-          scene={animation}
-          className='pointer-events-none' // !aspect-[12/10] 
-          style={{
-            width: (6/5 * (typeof constrainTo.h === 'number' ? constrainTo.h as number : parseInt(constrainTo.h as string)) ),
-            height: constrainTo.h
-          }}
-        />
-      ) : video ? (
-        <VideoBlockComponent
-          constraint={constrainTo}
-          block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
-        />
-      ) : (
-        <ImageBlockComponent
-          block={{
-            blockType: 'image',
-            src: img ?? '',
-            alt: title + ' image',
-            dim: constrainTo
-          } satisfies ImageBlock as Block} 
-          className='m-auto'
-        />
-      )}
-      </CarouselItem>
-    ))}
-    </CarouselContent>
-    <CarouselPrevious className='left-1'/>
-    <CarouselNext className='right-1'/>
-  </Carousel>
-)
-
-export default ItemCarousel

package/components/product-card.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import { 
-  AspectRatio, 
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@hanzo/ui/primitives'
-import type { ImageDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { formatCurrencyValue } from '../util'
-import type { LineItem } from '../types'
-import { Icons } from './Icons'
-
-import AddToCartWidget from './add-to-cart-widget'
-
-interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  item: LineItem
-}
-
-const ProductCard: React.FC<ProductCardProps> = ({
-  item,
-  className,
-  ...props
-}) => {
-
-  const ProductImage: React.FC<{className?: string}> = ({className=''}) => (
-    <Image
-      src={item.img!}
-      alt={item.title}
-      className={className}
-      loading='lazy'
-//          width={700}
-//          height={700}
-      fill
-      style={{
-        objectFit: 'contain',
-      }}
-    />
-  )
-    
-  return (
-    <Card
-      className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-      {...props}
-    >
-      <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      {item.img ? (
-        <ProductImage className='p-6' />
-      ) : (
-          <div
-            aria-label='Placeholder'
-            role='img'
-            aria-roledescription='placeholder'
-            className='flex h-full items-center justify-center bg-background'
-          >
-            <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
-          </div>
-      )}
-      </CardHeader>
-      <CardContent className='grid gap-2.5 p-4'>
-        <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
-          {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
-          <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
-        </CardTitle>
-      </CardContent>
-      <CardFooter className='p-4 flex flex-row justify-center'>
-        <AddToCartWidget item={item}/>
-      </CardFooter>
-    </Card>
-  )
-}
-
-export default ProductCard

package/types/facet.ts

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react'
-
-interface FacetValueDesc {
-  value: string             // a token in the sku
-  label: string
-  img? : string | ReactNode  // icon is required 
-  imgAR? : number           // helps with svgs
-  sub?: FacetValueDesc[]
-}
-
-/* *** FOR EXAMPLE **
-{
-  1: [ {
-      token: 'AG',
-      label: 'Silver',
-      img: '/assets/img/cart/ui/facets/silver-swatch-200x200.png'
-    },
-    ... more FaceValues describing the "type" level (Silver, Gold)
-  ],
-  2 [
-    {
-      token: 'B'
-      label: 'Minted Bar
-    },
-    ... more FaceValues describing the "form" level (Bar, Coin, )
-  ]
-}
-*/
-  // Which facets tokens are on at each level
-type FacetsValue = Record<number, string[]>
-
-export type {
-  FacetValueDesc,
-  FacetsValue
-}