@hanzo/commerce 5.1.3 → 6.1.0

package/components/{cart-accordian.tsx → cart/cart-accordian.tsx}

@@ -11,7 +11,8 @@ import {
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
 
-import { formatCurrencyValue, useCommerce } from '..'
+import { formatCurrencyValue } from '../../util'
+import { useCommerce } from '../../service/context'
 
 import CartPanel from './cart-panel'
 

package/components/{cart-panel → cart/cart-panel}/cart-line-item.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import React from 'react'
-import Image from 'next/image'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
 
-import type { LineItem } from '../../types'
-import { formatCurrencyValue } from '../../util'
-import AddToCartWidget from '../add-to-cart-widget'
-import { useCommerce } from '../..'
+import type { LineItem } from '../../../types'
+import { formatCurrencyValue } from '../../../util'
+import AddToCartWidget from '../../buy/add-to-cart-widget'
+import { useCommerce } from '../../../service/context'
 
 const DEF_IMG_SIZE=40
 
@@ -26,25 +26,38 @@ const CartLineItem: React.FC<{
   className?: string
   imgSizePx?: number
   showPromoCode?: boolean
+  itemClicked?: (item: LineItem) => void
+  selected?: boolean
 }> = observer(({
   item,
   className='',
   imgSizePx=DEF_IMG_SIZE,
-  showPromoCode
+  showPromoCode=false,
+  itemClicked,
+  selected=false
 }) => {
 
   const cmmc = useCommerce()
   const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
-  
+
   return (
     <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-      <div className='flex flex-row justify-between items-center gap-2'>
-      {!!item.img ? (
-        <Image src={item.img} alt={item.title + ' image'} height={imgSizePx} width={imgSizePx} className=''/>
-      ) : ( // placeholder so things align
-        <div style={{height: imgSizePx, width: imgSizePx}}/>
-      )}
-        <div className='grow leading-tight'>{renderTitle(item.title)}</div>
+      <div 
+        className={
+          'flex flex-row justify-between items-center gap-1 ' + 
+          (itemClicked && !selected ? 'cursor-pointer ' : 'cursor-default ') 
+        } 
+        onClick={() => {itemClicked && itemClicked(item)}}
+      >
+        {/* 1px gap between image and border for better emphasis w small images */}
+        <div className={selected ? 'border-foreground p-[1px] border rounded-sm' : 'p-[2px]'}>
+        {item.img ? (
+          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
+        ) : ( // placeholder so things align
+          <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
+        )}
+        </div>
+        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>

package/components/{cart-panel → cart/cart-panel}/index.tsx

@@ -5,12 +5,13 @@ import { observer } from 'mobx-react-lite'
 import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../service/context'
-import { formatCurrencyValue } from '../../util'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import { useCommerce } from '../../../service/context'
+import { formatCurrencyValue } from '../../../util'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'
 import PromoCode from './promo-code'
+import type { LineItem } from '../../../types'
 
 const CartPanel: React.FC<PropsWithChildren & {
     /** fix size and scroll after 'scrollAfter items in teh cart. */
@@ -25,6 +26,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   buttonClx?: string
   showPromoCode?: boolean
   showShipping?: boolean
+  selectItems?: boolean
     /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
@@ -41,6 +43,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   buttonClx='',
   showPromoCode=false,
   showShipping=false,
+  selectItems=false,
   handleCheckout,
 }) => {
 
@@ -74,6 +77,10 @@ const CartPanel: React.FC<PropsWithChildren & {
     handleCheckout && handleCheckout()
   }
 
+  const itemClicked = (item: LineItem) => { 
+    cmmc.setCurrentItem(item.sku) 
+  }
+
   const Main: React.FC = observer(() => (<>
     {cmmc.cartEmpty ? (
       <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
@@ -85,6 +92,8 @@ const CartPanel: React.FC<PropsWithChildren & {
         item={item}
         className={cn('mb-2', itemClx)}
         showPromoCode={showPromoCode}
+        itemClicked={selectItems ? itemClicked : undefined}
+        selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}
       />
     ))}
     </>)}

package/components/{cart-panel → cart/cart-panel}/promo-code.tsx

@@ -10,9 +10,9 @@ import { observer } from 'mobx-react-lite'
 
 import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../..'
-import type { Promo } from '../../types'
-import getPromoFromApi from '../../util/promo-codes'
+import { useCommerce } from '../../../service/context'
+import type { Promo } from '../../../types'
+import getPromoFromApi from '../../../util/promo-codes'
 
 const formSchema = z.object({
   code: z.string().min(1, 'Invalid code'),

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

@@ -7,7 +7,7 @@ import {
 } from '@hanzo/ui/primitives/form'
 import { Input } from '@hanzo/ui/primitives'
 
-import type { ContactFormType } from '../../types'
+import type { ContactFormType } from '../../../types'
  
 const ContactForm: React.FC<{
   form: ContactFormType,

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

@@ -9,9 +9,9 @@ import { useForm } from 'react-hook-form'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
 import { useAuth } from '@hanzo/auth/service'
 
-import { useCommerce } from '../../service/context'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
-import type { CheckoutStepComponentProps, TransactionStatus } from '../../types'
+import { useCommerce } from '../../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
 
 import METHODS from './methods'
 

package/components/{payment-step-form → checkout/payment-step-form}/methods/bank-transfer.tsx

@@ -5,7 +5,7 @@ import { Copy } from 'lucide-react'
 
 import { Button, toast } from '@hanzo/ui/primitives'
 
-import type { PaymentMethodComponentProps } from '../../../types'
+import type { PaymentMethodComponentProps } from '../../../../types'
 
 import ContactForm from '../contact-form'
 

package/components/{payment-step-form → checkout/payment-step-form}/methods/card.tsx

@@ -15,10 +15,10 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../service/context'
-import { processSquareCardPayment } from '../../../util'
-import type { PaymentMethodComponentProps } from '../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import { useCommerce } from '../../../../service/context'
+import { processSquareCardPayment } from '../../../../util'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 
 import ContactInfo from '../contact-form'
 import PaymentMethods from '../card-icon-row'

package/components/{payment-step-form → checkout/payment-step-form}/methods/crypto.tsx

@@ -19,9 +19,9 @@ import {
 } from '@hanzo/ui/primitives'
 
 import Eth from '../crypto-icons/eth'
-import { useCommerce } from '../../../service/context'
-import type { PaymentMethodComponentProps } from '../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import { useCommerce } from '../../../../service/context'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 
 import ContactForm from '../contact-form'
 

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/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 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 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 LevelNodesWidget } from './level-nodes-widget'
+
+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,51 @@
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import { Image  } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import {
+  VideoBlockComponent,
+  type Block,
+  type VideoBlock
+} from '@hanzo/ui/blocks'
+import type { Product } from '../../types'
+
+const ItemMedia: React.FC<{
+  item: Product
+  constrainTo?: {w: number, h: number}
+  clx?: string
+}> = ({
+  item: {img, video, animation},
+  constrainTo: cnst = {w: 250, h: 250},
+  clx=''
+}) => {
+
+    // 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
+      constrainTo={cnst}
+      block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+      className={clx}
+    />
+  ) : (img && 
+    <Image
+      def={img}
+      constrainTo={cnst} 
+      className={cn('m-auto', clx)}
+    />
+  ) // TODO: return placeholder
+}
+
+export default ItemMedia

package/components/item/product-card.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { 
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { formatCurrencyValue } from '../../util'
+import type { LineItem } from '../../types'
+
+import AddToCartWidget from '../buy/add-to-cart-widget'
+import ItemMedia from './item-media'
+
+interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  item: LineItem
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({
+  item,
+  className,
+  ...props
+}) => (
+  <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'>
+      <ItemMedia item={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+    </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/components/{facet-values-widget → level-nodes-widget}/index.tsx

@@ -4,27 +4,29 @@ 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 FacetImage from './facet-image'
+import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../types'
+import NodeImage from './node-image'
 
-const FacetValuesWidget: React.FC<{
-  facetValues: FacetValueDesc[]
+const LevelNodesWidget: React.FC<{
+  levelNodes: 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,
+  levelNodes,
   mutator,
   multiple=false,
   buttonClx='',
   itemClx='',
   className='',
-  isMobile=false,
-  tabSize
+  mobile=false,
+  tabSize,
+  show='image-and-label'
 }) => {
 
   const [last, setLast] = useState<string | undefined>(undefined)
@@ -54,30 +56,30 @@ 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}
     >
-    {facetValues.map((fv, index) => {
+    {levelNodes.map((treeNode, index) => {
       const roundedToSpread: any = {}
       if (!multiple) {
         roundedToSpread.rounded = 'none'   
         if (index === 0) { roundedToSpread.rounded = 'llg' }
-        else if (index === facetValues.length - 1) { roundedToSpread.rounded = 'rlg' } 
+        else if (index === levelNodes.length - 1) { roundedToSpread.rounded = 'rlg' } 
       }
       return (
         <ToggleGroupItem 
-          key={fv.value}
-          value={fv.value} 
-          disabled={(last && last === fv.value || fv.value === mutator.get())} 
-          aria-label={`Select ${fv.label}`}
+          key={treeNode.skuToken}
+          value={treeNode.skuToken} 
+          disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} 
+          aria-label={`Select ${treeNode.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') && (<NodeImage treeNode={treeNode} />) }
+            {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
           </span>
         </ToggleGroupItem>
       )
@@ -85,6 +87,5 @@ const FacetValuesWidget: React.FC<{
     </ToggleGroup>  
   )
 }
-// hidden md:block 
 
-export default FacetValuesWidget
+export default LevelNodesWidget

package/components/level-nodes-widget/node-image.tsx

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

package/components/select/carousel-selector.tsx

@@ -0,0 +1,112 @@
+'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 ItemMedia from '../item/item-media'
+
+import {
+  type CarouselOptionsType,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  ApplyTypography
+} from '@hanzo/ui/primitives'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+
+interface CarouselItemSelectorPropsExt {
+  constrainTo: {w: number, h: number}
+  options?: CarouselOptionsType 
+    /** Do not show Category and / or Item title and Price */
+  imageOnly?: boolean
+}
+  
+const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
+  items,
+  selectSku,
+  selectedItemRef: itemRef,
+  scrollList, // ignored
+  clx='',
+  itemClx='',
+  showCategory=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')}>
+      {showCategory && (<h4>{item.categoryTitle}</h4>)}
+      <p>{item.optionLabel}</p>
+      <p>{formatCurrencyValue(item.price)}</p>
+    </ApplyTypography>
+  )
+
+  return ( 
+    <Carousel options={options} className={cn('w-full px-2', clx)} onSelect={onSelect} setApi={setApi}>
+      <CarouselContent>
+      {items.map((item, index) => (
+        <CarouselItem key={index} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
+          <ItemMedia item={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 
+}