@hanzo/commerce 2.0.0 → 3.0.0

package/components/add-to-cart-widget.tsx

@@ -26,7 +26,7 @@ const AddToCartWidget: React.FC<{
   size='xs'
 }) => {
 
-  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-5 mr-1'
+  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
   const digitClx = ghost ? 'px-2 md:px-0.5' : 'sm:px-2 font-bold '
 
   if (disabled) {
@@ -44,7 +44,7 @@ const AddToCartWidget: React.FC<{
         size={size}
         variant={ghost ? 'ghost' : 'secondary'}
         rounded={ghost ? 'full' : 'xl'}
-        className={cn('px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-end', buttonClx)}
+        className={cn('px-1 lg:min-w-0 lg:px-2  xs:justify-end', buttonClx)}
         key='left'
         onClick={item.decrement.bind(item)}
       >
@@ -60,7 +60,7 @@ const AddToCartWidget: React.FC<{
         size={size}
         variant={ghost ? 'ghost' : 'secondary'}
         rounded={ghost ? 'full' : 'xl'}
-        className={cn('px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-start', buttonClx)}
+        className={cn('px-1 lg:min-w-0 lg:px-2 xs:justify-start', buttonClx)}
         onClick={item.increment.bind(item)}
         key='right'
       >

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

@@ -0,0 +1,28 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
+
+import BuyItemPopup from './buy-item-popup'
+
+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={className}>{children}</Button>
+  </BuyItemPopup>
+)
+
+export default BuyItemButton

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

@@ -0,0 +1,82 @@
+'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
+  className?: string
+}> = observer(({
+  skuPath,
+  className=''
+}) => {
+
+  const cmmc = useCommerce()
+  const levelRef = useRef<number>(-1)
+
+  const cat = cmmc.getCategory(skuPath) 
+  const facets = cat ? undefined : cmmc.getFacetValuesAtSkuPath(skuPath)
+
+  useEffect(() => {
+
+    if (facets) {
+      const toks = skuPath.split('-')
+      const levelSpecified = toks.length - 1
+      const fsv: FacetsValue = {}
+      for (let level = 1; level <= levelSpecified; level++ ) {
+        fsv[level] = [toks[level]]   
+      } 
+      fsv[levelSpecified + 1] = [facets[0].value]
+      levelRef.current = levelSpecified
+      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])
+
+  return (
+    <div className={className} >
+    {facets && levelRef.current > 0 && (
+      <FacetValuesWidget
+        className={cn('grid gap-0 ' + `grid-cols-${facets.length}` + ' self-start ', 'border-b 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-auto !rounded-bl-none !rounded-br-none !rounded-tl-lg !rounded-tr-lg '
+        facetValues={facets}
+      />
+    )}
+    {cmmc.specifiedCategories[0] && (
+      <SelectCategoryItemCard 
+        noTitle
+        category={cmmc.specifiedCategories[0]}
+        selectedItemRef={cmmc /* ...conveniently. :) */ }
+        selectSku={cmmc.setCurrentItem.bind(cmmc)}
+      />  
+    )}
+    </div >
+  )
+})
+
+export default BuyItemCard

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

@@ -0,0 +1,38 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui/util'
+
+import BuyItemCard from './buy-item-card'
+
+const BuyItemPopup: React.FC<PropsWithChildren & {
+  skuPath: string
+  popupClx?: string
+  cardClx?: string
+}> = ({
+  skuPath,
+  children,
+  popupClx='',
+  cardClx='',
+}) => (
+  <Popover>
+    <PopoverTrigger asChild>
+      {children}
+    </PopoverTrigger>
+    <PopoverContent className={cn('relative flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+      <PopoverClose className='absolute z-20 right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+      <BuyItemCard skuPath={skuPath} className={cn("w-full relative ", cardClx)}/>
+    </PopoverContent>
+  </Popover>
+)
+
+export default BuyItemPopup

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

@@ -5,11 +5,11 @@ 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 { formatPrice } from '../util'
+import type { FacetValueDesc, FacetsValue, LineItem } from '../../types'
+import { useCommerce } from '../../service/context'
+import { formatPrice } from '../../util'
 
-import FacetTogglesWidget from './facet-toggles-widget'
+import FacetTogglesWidget from '../facet-values-widget'
 
 const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
   `${item.titleAsOption}, ${formatPrice(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`

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

@@ -0,0 +1,111 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Skeleton } from '@hanzo/ui/primitives'
+
+import type { ItemSelector, LineItem } from '../../types'
+
+import AddToCartWidget from '../add-to-cart-widget'
+import CategoryItemRadioSelector from '../category-item-radio-selector'
+import CategoryItemIOSWheelSelector from '../category-item-ios-wheel-selector'
+import { formatPrice } from '../../util'
+
+const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
+  isLoading?: boolean
+  mobile?: boolean
+  noTitle?: boolean
+}> = /* NOT observer */({
+  category,
+  selectedItemRef: selItemRef,
+  selectSku,
+  className, 
+  isLoading = false, 
+  mobile = false, 
+  noTitle = false,
+  ...props
+}) => {
+
+  const soleOption = category.products.length === 1
+
+  const SelectProductComp: React.FC<{ className?: string }> = ({ className = '' }) => {
+
+    if (soleOption) {
+      const item = category.products[0] as LineItem
+      return (
+        <p >{item.titleAsOption + ', ' + formatPrice(item.price) + (item.quantity > 0 ? `(${item.quantity})` : '')}</p>
+      )
+    }
+    const mobilePicker = (mobile && category.products.length > 6) 
+
+    return (
+      <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
+        'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
+        className
+      )}>
+        {!noTitle && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
+        {mobilePicker ? (
+          <CategoryItemIOSWheelSelector
+            category={category}
+            selectedItemRef={selItemRef}  
+            selectSku={selectSku}
+            height={180}
+            itemHeight={30}
+            outerClx='mb-4'
+          />
+        ) : (
+          <CategoryItemRadioSelector 
+            category={category}
+            selectedItemRef={selItemRef}  
+            selectSku={selectSku}
+            groupClx='mt-2'
+            itemClx='flex flex-row gap-2.5 items-center'
+          />
+        )}
+      </div>
+    )
+  }
+
+  const AddToCartComp: React.FC<{ className?: string }> = observer(({ className = '' }) => (
+      // TODO disable if nothing selected
+    (selItemRef.item && !isLoading) && (
+      <AddToCartWidget size='default' item={selItemRef.item} className={cn('lg:min-w-[160px] lg:mx-auto', className)}/>
+    ) 
+  ))
+
+  const TitleArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
+
+    isLoading ? (<Skeleton className={'h-8 w-full ' + className} />) : (
+
+      <div className={cn('text-center flex flex-col justify-start items-center', className)}>
+        <p className='font-nav text-center'>{category.title}</p>
+      </div>
+
+  )))
+
+  return mobile ? (
+    <div /* id='CV_OUTER' */ 
+      className={cn(
+        'w-full h-[calc(100svh-96px)] max-h-[700px] flex flex-col justify-between ' + 
+        'items-stretch gap-[4vh] mt-[2vh] pb-[6vh]', 
+        className
+      )} 
+      {...props}
+    >
+      {!noTitle && (<TitleArea className='grow pt-3 mb-0' />)}
+      <SelectProductComp className='mb-[3vh]' />
+      <AddToCartComp className='w-pr-70 mx-auto' />
+    </div>
+  ) : (
+    <div className={cn('', className)} {...props}>
+      {!noTitle && (<TitleArea className='' />)}
+      <div className='flex flex-col justify-start items-center gap-4'>
+        <SelectProductComp />
+        <AddToCartComp className='' />
+      </div>
+    </div>
+  )
+}
+
+export default SelectCategoryItemCard

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

@@ -4,9 +4,10 @@ import Image from 'next/image'
 
 import { cn } from '@hanzo/ui/util'
 
-import type { LineItem } from '../types'
-import AddToCartWidget from './add-to-cart-widget'
-import { formatPrice } from '../util'
+import type { LineItem } from '../../types'
+import { formatPrice } from '../../util'
+
+import AddToCartWidget from '../add-to-cart-widget'
 
 const IMG_SIZE=40
 

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

@@ -5,24 +5,25 @@ import { observer } from 'mobx-react-lite'
 import { Button } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../service/context'
-import { formatPrice } from '../util'
+import { useCommerce } from '../../service/context'
+import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
-import { Checkout } from '.'
+import CheckoutPanel from '../checkout-panel'
 
-const Cart: React.FC<PropsWithChildren & {
+const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
-  hideCheckout?: boolean
+  noCheckout?: boolean
 }> = observer(({
     /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
-  hideCheckout=false
+  noCheckout=false
 }) => {
-  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false)
+
+  const [checkoutOpen, setCheckoutOpen] = useState<boolean>(false)
   const cmmc = useCommerce()
 
   return (
@@ -30,7 +31,7 @@ const Cart: React.FC<PropsWithChildren & {
       {children}
       <div className='mt-2 w-full'>
         {!!children && <div className='h-[1px] w-pr-80 mb-4 mx-auto bg-muted-3'/>}
-        {cmmc.cartItems.length === 0 ? (
+        {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>
         ) : (<>
           {cmmc.cartItems.map((item, i) => (
@@ -39,16 +40,22 @@ const Cart: React.FC<PropsWithChildren & {
           <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
         </>)}
       </div>
-      {!hideCheckout && (
-        <>
-          {cmmc.cartItems.length > 0 && (
-            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => setIsCheckoutOpen(!isCheckoutOpen)}>Checkout</Button>
-          )}
-          {isCheckoutOpen && <Checkout toggleCheckout={() => setIsCheckoutOpen(!isCheckoutOpen)}/>}
-        </>
-      )}
+      {!noCheckout && (<>
+        {!cmmc.cartEmpty && (
+          <Button 
+            size='lg' 
+            variant='secondary' 
+            rounded='lg' 
+            className='mt-12 mx-auto' 
+            onClick={() => setCheckoutOpen(!checkoutOpen)}
+          >
+            Checkout
+          </Button>
+        )}
+        {checkoutOpen && <CheckoutPanel close={() => {setCheckoutOpen(false)}}/>}
+      </>)}
     </div>
   )
 })
 
-export default Cart
+export default CartPanel

package/components/category-item-ios-wheel-selector.tsx

@@ -0,0 +1,60 @@
+'use client'
+import React from 'react'
+import Picker from 'react-mobile-picker'
+
+import type { ItemSelector } from '../types'
+import { formatPrice } from '../util'
+import { cn } from '@hanzo/ui/util'
+
+  // from source code
+interface PickerItemRenderProps {
+  selected: boolean;
+}
+
+const CategoryItemIOSWheelSelector: React.FC<ItemSelector & {
+  height?: number
+  itemHeight?: number
+  outerClx?: string
+  itemClx?: string
+}> = ({
+  category,
+  selectedItemRef: iRef,
+  selectSku,
+  height,
+  itemHeight,
+  outerClx='',
+  itemClx=''
+}) => {
+
+    // @ts-ignore
+  const onChange = (val, ignore) => {
+    selectSku(val.item)
+  }
+
+  return (
+    <div className={cn('border border-muted-4 rounded-lg px-2', outerClx)}>
+      <Picker
+        className=''
+        value={iRef.item ? {item: iRef.item.sku} : {item: undefined}}
+        onChange={onChange}
+        wheelMode="natural"
+        height={height}
+        itemHeight={itemHeight}
+      >
+        <Picker.Column name="item">
+        {category.products.map((prod) => (
+          <Picker.Item key={prod.sku} value={prod.sku}>
+          {({ selected }: PickerItemRenderProps) => (
+            <div className={cn(selected ? 'font-semibold text-accent' : 'text-muted', itemClx)}>
+              {prod.titleAsOption + ', ' + formatPrice(prod.price)}
+            </div>
+          )}
+          </Picker.Item>
+        ))}
+        </Picker.Column>
+      </Picker>
+    </div>
+  )
+}
+
+export default CategoryItemIOSWheelSelector

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

@@ -0,0 +1,55 @@
+'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 { formatPrice } 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 ? (', ' + formatPrice(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/{checkout → checkout-panel}/confirm-order.tsx

@@ -1,9 +1,10 @@
 'use client'
+import React from 'react'
+import type { UseFormReturn } from 'react-hook-form'
+import { BookUser, Lock, User } from 'lucide-react'
 
 import { ApplyTypography, Button } from '@hanzo/ui/primitives'
-import { BookUser, Lock, User } from 'lucide-react'
 import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
-import type { UseFormReturn } from 'react-hook-form'
  
 const ConfirmOrder: React.FC<{
   paymentForm: UseFormReturn<{