@hanzo/commerce 5.1.3 → 6.0.0

package/components/{payment-step-form → checkout/payment-step-form}/methods/index.ts

@@ -1,4 +1,4 @@
-import type { PaymentMethodDesc } from '../../../types'
+import type { PaymentMethodDesc } from '../../../../types'
 
 import Card from './card'
 import Crypto from './crypto'

package/components/{shipping-step-form.tsx → checkout/shipping-step-form.tsx}

@@ -19,12 +19,12 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../service/context'
+import { useCommerce } from '../../service/context'
 
-import countries from '../util/countries'
-import { sendGAEvent } from '../util/analytics'
+import countries from '../../util/countries'
+import { sendGAEvent } from '../../util/analytics'
 
-import type { CheckoutStepComponentProps } from '../types'
+import type { CheckoutStepComponentProps } from '../../types'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),

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

@@ -1,12 +1,12 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { FacetValueDesc } from '../../types'
+import type { ProductTreeNode } from '../../types'
 
 const ICON_SIZE = 20
 
 const FacetImage: React.FC<{
-  facetValueDesc: FacetValueDesc
+  facetValueDesc: ProductTreeNode
 }> = ({
   facetValueDesc
 }) => {

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

@@ -4,18 +4,19 @@ import React, { useState } from 'react'
 import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
-import type { FacetValueDesc, StringMutator, StringArrayMutator } from '../../types'
+import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../types'
 import FacetImage from './facet-image'
 
 const FacetValuesWidget: React.FC<{
-  facetValues: FacetValueDesc[]
+  facetValues: ProductTreeNode[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
   buttonClx?: string
   itemClx?: string
-  isMobile?: boolean
+  mobile?: boolean
   tabSize?: string
+  show?: 'image' | 'label' | 'image-and-label'
 }> = ({
   facetValues,
   mutator,
@@ -23,8 +24,9 @@ const FacetValuesWidget: React.FC<{
   buttonClx='',
   itemClx='',
   className='',
-  isMobile=false,
-  tabSize
+  mobile=false,
+  tabSize,
+  show='image-and-label'
 }) => {
 
   const [last, setLast] = useState<string | undefined>(undefined)
@@ -54,7 +56,7 @@ const FacetValuesWidget: React.FC<{
       type={multiple ? 'multiple' : 'single'} 
       value={val}
       variant='default'
-      size={tabSize ? tabSize : (isMobile ? 'sm' : 'default')}
+      size={tabSize ? tabSize : (mobile ? 'sm' : 'default')}
       onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
       className={className}
       {...roundedToSpread}
@@ -68,16 +70,16 @@ const FacetValuesWidget: React.FC<{
       }
       return (
         <ToggleGroupItem 
-          key={fv.value}
-          value={fv.value} 
-          disabled={(last && last === fv.value || fv.value === mutator.get())} 
+          key={fv.skuToken}
+          value={fv.skuToken} 
+          disabled={(last && last === fv.skuToken || fv.skuToken === mutator.get())} 
           aria-label={`Select ${fv.label}`}
           {...roundedToSpread}
           className={buttonClx}
         >
           <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
-            <FacetImage facetValueDesc={fv} />
-            {(!isMobile || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
+            {!(show === 'label') && (<FacetImage facetValueDesc={fv} />) }
+            {(!(show === 'image') || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
           </span>
         </ToggleGroupItem>
       )
@@ -85,6 +87,5 @@ const FacetValuesWidget: React.FC<{
     </ToggleGroup>  
   )
 }
-// hidden md:block 
 
 export default FacetValuesWidget

package/components/index.ts

@@ -1,18 +1,20 @@
-export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as BuyItemButtonWrapper } from './buy-item/buy-item-button-wrapper'
-export { default as BuyItemButton } from './buy-item/buy-item-button'
-export { default as BuyItemCard } from './buy-item/buy-item-card'
-export { default as BuyItemPopup } from './buy-item/buy-item-popup'
-export { default as CartAccordian } from './cart-accordian'
-export { default as CartPanel } from './cart-panel'
-export { default as CategoryItemIOSWheelSelector } from './category-item-scroll-selector'
-export { default as CategoryItemRadioSelector } from './category-item-radio-selector'
+export { default as AddToCartWidget } from './buy/add-to-cart-widget'
+export { default as BuyTriggerWrapper } from './buy/buy-trigger-wrapper'
+export { default as BuyButton } from './buy/buy-button'
+export { default as BuyCard } from './buy/buy-card'
+export { default as BuyDrawer } from './buy/buy-drawer'
+
+export { default as CartAccordian } from './cart/cart-accordian'
+export { default as CartPanel } from './cart/cart-panel'
+
 export { default as FacetValuesWidget } from './facet-values-widget'
-export { default as ItemCarousel } from './item-carousel'
-export { default as PaymentStepForm } from './payment-step-form'
-export { default as ProductCard } from './product-card'
-export { default as SelectCategoryAndItemWidget } from './buy-item/select-category-and-item-widget'
-export { default as SelectCategoryItemCard } from './buy-item/select-category-item-card'
-export { default as SelectCategoryItemPanel } from './select-category-item-panel'
-export { default as ShippingStepForm } from './shipping-step-form'
-export { Icons } from './Icons'
+
+export { default as PaymentStepForm } from './checkout/payment-step-form'
+export { default as ShippingStepForm } from './checkout/shipping-step-form'
+
+export { default as ProductCard } from './item/product-card'
+export { Icons } from './Icons'
+
+export { default as ImageItemSelector } from './select/image-selector'
+export { default as RadioItemSelector } from './select/radio-selector'
+export { default as CarouselItemSelector, type CarouselItemSelectorPropsExt } from './select/carousel-selector'

package/components/item/item-media.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import type { Dimensions } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+
+import {
+  VideoBlockComponent,
+  ImageBlockComponent,
+  type ImageBlock,
+  type Block,
+  type VideoBlock
+} from '@hanzo/ui/blocks'
+import type { LineItem } from '../../types'
+
+const ItemMedia: React.FC<{
+  item: LineItem
+  constrainTo?: Dimensions
+  clx?: string
+}> = ({
+  item,
+  constrainTo: cnst = {w: 250, h: 250},
+  clx=''
+}) => {
+
+  const {title, img, video, animation} = item
+    // 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
+      constraint={cnst}
+      block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+      className={clx}
+    />
+  ) : (
+    <ImageBlockComponent
+      block={{
+        blockType: 'image',
+        src: img ?? '',
+        alt: title + ' image',
+        dim: cnst
+      } satisfies ImageBlock as Block} 
+      className={cn('m-auto', clx)}
+    />
+  )
+}
+
+export default ItemMedia

package/components/{product-card.tsx → item/product-card.tsx}

@@ -2,22 +2,20 @@ 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 { formatCurrencyValue } from '../../util'
+import type { LineItem } from '../../types'
+import { Icons } from '../Icons'
 
-import AddToCartWidget from './add-to-cart-widget'
+import AddToCartWidget from '../buy/add-to-cart-widget'
 
 interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
   item: LineItem

package/components/select/carousel-selector.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import type { Dimensions } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+import ItemMedia from '../item/item-media'
+
+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 { ItemSelectorProps } from '../../types'
+
+interface CarouselItemSelectorPropsExt {
+  constrainTo: Dimensions
+  options?: CarouselOptionsType 
+  noSelection?: boolean // "display only" mode
+}
+  
+const CarouselItemSelector: React.FC<ItemSelectorProps> = ({ 
+  items,
+  clx='',
+  itemClx='',
+  ext={
+    options: {},
+    constrainTo: {w: 250, h: 250} 
+  } satisfies CarouselItemSelectorPropsExt
+}) => {
+
+  const { options, constrainTo} = ext
+
+  return ( 
+    <Carousel options={options} className={cn('px-2', clx)} >
+      <CarouselContent>
+      {items.map((item, index) => (
+        <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
+          <ItemMedia item={item} constrainTo={constrainTo} clx='' />
+        </CarouselItem>
+      ))}
+      </CarouselContent>
+      <CarouselPrevious className='left-1'/>
+      <CarouselNext className='right-1'/>
+    </Carousel>
+  )
+}
+
+export {
+  type CarouselItemSelectorPropsExt,
+  CarouselItemSelector as default 
+}

package/components/select/image-selector.tsx

@@ -0,0 +1,125 @@
+'use client'
+import React from 'react'
+import Image from 'next/image'
+import { observer } from 'mobx-react-lite'
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+import { cn } from '@hanzo/ui/util'
+import type { Dimensions } from '@hanzo/ui/types'
+
+const ImageRadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
+    item: LineItem,
+    imgSizePx: number  
+  }
+>(({ 
+  item,
+  imgSizePx,
+  className, 
+  ...props 
+}, ref) => {
+
+  let dim: Dimensions 
+  if (item.imgAR) {
+    if (item.imgAR >= 1) {
+      dim = {
+        w: imgSizePx,
+        h: imgSizePx / item.imgAR
+      }
+    }
+    else {
+      dim = {
+        w: imgSizePx * item.imgAR,
+        h: imgSizePx
+      }
+    }
+  }
+  else {
+    dim = {
+      w: imgSizePx,
+      h: imgSizePx
+    }
+  }
+
+  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 src={item.img} alt={item.title + ' image'} height={dim.h} width={dim.w} className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: dim.h, width: dim.w}}/>
+      )}
+    </RadioGroupPrimitive.Item>
+  )
+})
+ImageRadioGroupItem.displayName = 'ImageRadioGroupItem'
+
+const ImageItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  showPrice=true,
+  showQuantity=true
+}) => {
+
+  const Choice: React.FC<{
+    item: LineItem
+    className?: string
+  }> = ({
+    item,
+    className=''
+  }) => (
+    <div className={cn('flex items-center mb-1', className, itemClx)}>
+      <ImageRadioGroupItem item={item} imgSizePx={40} className='mr-2 border-2 border-transparent rounded-sm data-[state=checked]:border-foreground'/>
+      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
+    </div>
+  )
+
+  const SoleChoice: React.FC<{
+    item: LineItem
+    className?: string
+  }> = ({
+    item,
+    className=''
+  }) => (
+    <div className={cn(className, soleItemClx)}>
+      {item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}
+    </div>
+  )
+
+  return items.length > 1 ? (
+    <RadioGroup
+      className={cn('gap-0', showQuantity ? 'table' : '', clx)}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+    >
+    {items.map((item) => (showQuantity ? (
+      <div className='table-row' key={item.sku}>
+        <Choice item={item} className='table-cell pr-2 align-text-top pb-3'/>
+        <div className='table-cell font-semibold text-sm leading-none align-text-top pb-3'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
+      </div>
+    ) : (
+      <Choice item={item} className='mb-3'  key={item.sku}/>
+    )))}
+    </RadioGroup>
+  ) : (
+    <SoleChoice item={items[0]} className=''/>
+  )
+})
+
+export default ImageItemSelector

package/components/select/radio-selector.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+import { cn } from '@hanzo/ui/util'
+
+const RadioItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  showPrice=true,
+  showQuantity=true
+}) => {
+
+  const Choice: React.FC<{
+    item: LineItem
+    className?: string
+  }> = ({
+    item,
+    className=''
+  }) => (
+    <div className={cn(className, itemClx)}>
+      <RadioGroupItem value={item.sku} id={item.sku} className='mr-2'/>
+      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
+    </div>
+  )
+
+  const SoleChoice: React.FC<{
+    item: LineItem
+    className?: string
+  }> = ({
+    item,
+    className=''
+  }) => (
+    <div className={cn(className, soleItemClx)}>
+      {item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}
+    </div>
+  )
+
+  return items.length > 1 ? (
+    <RadioGroup
+      className={cn('gap-0', showQuantity ? 'table' : '', clx)}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+    >
+    {items.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>
+  ) : (
+    <SoleChoice item={items[0]} className=''/>
+  )
+})
+
+export default RadioItemSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "5.1.3",
+  "version": "6.0.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -42,6 +42,7 @@
     "@hanzo/auth": "^2.3.3",
     "@hanzo/ui": "^3.1.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/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
     )