@hanzo/commerce 1.0.8

package/blocks/components/commerce-cat-and-item-block.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import type  CommerceCatAndItemBlock from '../def/commerce-cat-and-item-block'
+
+/*
+
+interface CommerceCatAndItemBlock extends Block {
+  blockType: 'commerce-cat-and-item'
+  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
+  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
+}
+
+*/
+

package/blocks/def/commerce-cat-and-item-block.ts

@@ -0,0 +1,9 @@
+import type  { Block } from '@hanzo/ui/blocks'
+
+interface CommerceCatAndItemBlock extends Block {
+  blockType: 'commerce-cat-and-item'
+  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
+  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
+}
+
+export { type CommerceCatAndItemBlock as default }

package/components/Icons.tsx

@@ -0,0 +1,35 @@
+import {
+  ShoppingCart,
+  Menu,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  Check,
+  Plus,
+  Minus,
+  ChevronDown,
+  ChevronsLeft,
+  ChevronsRight,
+  Image,
+  Trash2,
+  Search,
+  Barcode
+} from "lucide-react"
+
+export const Icons = {
+  shoppingCart: ShoppingCart,
+  menu: Menu,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  spinner: Loader2,
+  check: Check,
+  plus: Plus,
+  minus: Minus,
+  chevronDown: ChevronDown,
+  chevronsLeft: ChevronsLeft,
+  chevronsRight: ChevronsRight,
+  placeholder: Image,
+  trash: Trash2,
+  search: Search,
+  barcode: Barcode
+}

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

@@ -0,0 +1,83 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, type ButtonSizes } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import { Icons } from './Icons'
+import type { LineItem } from '../types'
+
+const AddToCartWidget: React.FC<{ 
+  item: LineItem
+  ghost?: boolean
+  disabled?: boolean
+  className?: string
+  isMobile?: boolean
+  wide?: boolean
+  size?: ButtonSizes
+}> = observer(({
+  item,
+  ghost=false,
+  disabled=false,
+  className='',
+  size='xs'
+}) => {
+
+  const iconClx = ghost ? 'h-3 w-3 text-muted-3 hover:text-foreground' : 'h-5 w-5 mr-1'
+  const digitClx = ghost ? 'px-1' : 'px-2 font-bold '
+
+  if (disabled) {
+    return (
+      <div className={cn('flex flex-row items-stretch ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-secondary rounded-xl'), className)}>
+        <div className={'text-sm flex items-center cursor-default ' + digitClx} >{item.quantity}</div>
+      </div>
+    )
+  }
+
+  return ( item.isInCart ? (
+    <div className={cn('flex flex-row items-stretch justify-center ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-secondary rounded-xl'), className)}>
+      <Button
+        aria-label={'Remove a ' + item.title + ' from the cart'}
+        size={size}
+        variant={ghost ? 'ghost' : 'secondary'}
+        rounded={ghost ? 'full' : 'xl'}
+        className='px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-end'
+        key='left'
+        onClick={item.decrement.bind(item)}
+      >
+      {(item.quantity > 1) ? (
+        <Icons.minus className={iconClx} aria-hidden='true'/>
+      ) : (
+        <Icons.trash className={iconClx} aria-hidden='true'/>
+      )}
+      </Button>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
+      <Button
+        aria-label={'Add another ' + item.title + ' to the cart'}
+        size={size}
+        variant={ghost ? 'ghost' : 'secondary'}
+        rounded={ghost ? 'full' : 'xl'}
+        className='px-1 lg:min-w-0 lg:px-2 xs:grow xs:justify-start'
+        onClick={item.increment.bind(item)}
+        key='right'
+      >
+        <Icons.plus className={iconClx} aria-hidden='true'/>
+      </Button>
+    </div>
+  ) : (
+    <Button
+      aria-label={'Add a ' + item.title + ' to cart'}
+      size={size}
+      variant='secondary'
+      rounded='xl'
+      className={className}
+      onClick={item.increment.bind(item)}
+    >
+      <Icons.plus className='h-5 w-5 mr-1' aria-hidden='true'/>
+      <span className='mr-1'>Add</span>
+    </Button>
+  ))
+})
+
+export default AddToCartWidget

package/components/cart-icon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const CartIcon: React.FC<LucideProps> = (props: LucideProps) => (
+<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' {...props}>
+  <path d='m3.731 8-1.231 20h27l-1.231-20zm1.991 2.103h20.557l.972 15.794h-22.502l.972-15.794z'/>
+  <path d='m20.718 8.134c0-2.375-1.932-4.307-4.307-4.307s-4.307 1.932-4.307 4.307h-2.084c0-3.524 2.867-6.391 6.391-6.391s6.391 2.867 6.391 6.391z'/>
+</svg>)
+
+export default CartIcon

package/components/cart-line-item.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+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'
+
+const IMG_SIZE=40
+
+const CartLineItem: React.FC<{
+  item: LineItem
+  className?: string
+  isMobile?: boolean
+}> = observer(({ 
+  item,
+  className='',
+  isMobile=false 
+}) => {
+
+  const imgSize = (isMobile) ? IMG_SIZE * 0.65 : IMG_SIZE
+
+  return (
+    <div className='flex flex-row justify-between items-center gap-2 sm:gap-4'>
+    {!!item.img ? (
+      <Image src={item.img} alt={item.title + ' image'} height={imgSize} width={imgSize} className='self-start'/>
+    ) : (
+      <div style={{height: imgSize, width: imgSize}}/ >
+    )}
+      <div className={cn('text-sm font-sans grow', className)} >
+        <div className=''>{item.title}</div>
+        <div className='flex flex-row items-center justify-between'>
+          <div className='flex flex-row items-center'>
+            <AddToCartWidget isMobile={isMobile} className='mr-2' item={item} ghost/>{item.quantity > 1 && '@' + formatPrice(item.price)}
+          </div>
+          <div className='flex flex-row items-center justify-end'>
+            {formatPrice(item.price * item.quantity)}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default CartLineItem

package/components/cart.tsx

@@ -0,0 +1,64 @@
+'use client'
+import React, { type PropsWithChildren, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Button } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import { persistCart, useCommerce } from '../service'
+import { formatPrice } from '../util'
+
+import CartLineItem from './cart-line-item'
+import { useRouter } from 'next/navigation'
+import { useAuth } from '@hanzo/auth/service'
+
+
+const Cart: React.FC<PropsWithChildren & {
+  className?: string
+  isMobile?: boolean,
+  hideCheckout?: boolean
+}> = observer(({
+  children,
+  className='',
+  isMobile=false,
+  hideCheckout=false
+}) => {
+  const [loadingCheckout, setLoadingCheckout] = useState(false)
+  const c = useCommerce()
+  const router = useRouter()
+  const auth = useAuth()
+
+  const checkout = async () => {
+    setLoadingCheckout(true)
+    if (auth.user) {
+      await persistCart(c.cartItems, auth.user.email)
+    }
+    router.push('/checkout')
+  }
+  
+  return (
+    <div className={cn('border p-6 rounded-lg', className)}>
+      {children}
+      <div className='mt-2'>
+        {!!children && <div className='h-[1px] w-pr-80 mx-auto bg-muted-3'/>}
+      {c.cartItems.length === 0 ? (
+        <p className='text-center mt-4'>No items in cart</p>
+      ) : (<>
+        {c.cartItems.map((item, i) => (<CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-4 sm:mb-2'/>))}
+        <p className='mt-6 text-right border-t pt-1'>TOTAL: {c.cartTotal === 0 ? '0' : formatPrice(c.cartTotal)}</p>
+      </>)}
+      </div>
+      {c.cartItems.length > 0 && !hideCheckout && (
+        <>
+          {!auth.loggedIn ? (
+            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/login?redirectUrl=checkout')}>Login</Button>
+          ) : (
+            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={checkout} disabled={loadingCheckout}>Checkout</Button>
+          )}
+        </>
+      )}
+    </div>
+  )
+})
+
+export default Cart

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import Image from 'next/image'
+
+import type { FacetValueDesc } from '../../types'
+
+const ICON_SIZE = 16
+const SVG_MULT = 1.5
+
+const FacetImage: React.FC<{
+  facetValueDesc: FacetValueDesc
+}> = ({
+  facetValueDesc
+}) => {
+  if (!facetValueDesc.img) {
+    return null
+  }
+  const isURL = typeof facetValueDesc.img === 'string'
+  if (isURL) {
+    return (
+      <Image 
+        src={facetValueDesc.img as string} 
+        alt={`Toggle ${facetValueDesc.label}`} 
+        className={'block mr-1 aspect-square rounded border border-muted-2'}
+        width={ICON_SIZE}
+        height={ICON_SIZE}
+      />
+    )
+  }
+  const svgStyle: any = { position: 'relative' }
+  if (facetValueDesc.imgAR && facetValueDesc.imgAR < 1) {
+    const w = ICON_SIZE * SVG_MULT
+    svgStyle.top = (( 1 / facetValueDesc.imgAR - 1) * w) / 2
+  }
+  else if (facetValueDesc.imgAR && facetValueDesc.imgAR > 1) {
+    const h = ICON_SIZE * SVG_MULT
+    svgStyle.left = (((1 - facetValueDesc.imgAR) * h) / 2)
+  }
+
+  return (
+    <span 
+      className='block overflow-hidden ' 
+      style={{
+        color: 'inherit',
+        width: ICON_SIZE * SVG_MULT, 
+        height: ICON_SIZE * SVG_MULT,
+      }} 
+    >
+      {React.cloneElement(facetValueDesc.img as React.ReactElement<any>, {
+        width: (facetValueDesc.imgAR ?? 1) * ICON_SIZE * SVG_MULT, 
+        height: SVG_MULT * ICON_SIZE,
+        style: svgStyle
+      })}
+    </span>
+  )
+} 
+
+export default FacetImage
+

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

@@ -0,0 +1,82 @@
+'use client'
+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'
+
+const FacetTogglesWidget: React.FC<{
+  facetValues: FacetValueDesc[]
+  mutator: StringMutator | StringArrayMutator
+  multiple?: boolean
+  className?: string
+  isMobile?: boolean
+}> = ({
+  facetValues,
+  mutator,
+  multiple='',
+  className='',
+  isMobile=false
+}) => {
+
+  const [last, setLast] = useState<string | undefined>(undefined)
+
+  const handleChangeMultiple = (selected: string[]) => {
+    (mutator as StringArrayMutator).set(selected)
+    setLast(selected.length === 1 ? selected[0] : undefined)
+  }
+
+  const handleChangeSingle = (selected: string) => {
+    (mutator as StringMutator).set(selected)
+    if (selected) { setLast(selected) }
+  }
+
+  const roundedToSpread: any = {}
+  if (multiple) {
+    roundedToSpread.rounded = 'xl'   
+  }
+
+  const val = multiple ? 
+    (mutator as StringArrayMutator).get() 
+    : 
+    (mutator as StringMutator).get()
+
+  return (
+    <ToggleGroup 
+      type={multiple ? 'multiple' : 'single'} 
+      value={val}
+      variant='default'
+      size={isMobile ? 'sm' : 'default'}
+      onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
+      className={className}
+      {...roundedToSpread}
+    >
+    {facetValues.map((fv, index) => {
+      const roundedToSpread: any = {}
+      if (!multiple) {
+        roundedToSpread.rounded = 'none'   
+        if (index === 0) { roundedToSpread.rounded = 'llg' }
+        else if (index === facetValues.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}`}
+          {...roundedToSpread}
+        >
+          <span className={cn('flex flex-row justify-center gap-1 h-4 items-center')} >
+            <FacetImage facetValueDesc={fv} />
+            <span className='hidden md:block whitespace-nowrap'>{fv.label}</span>
+          </span>
+        </ToggleGroupItem>
+      )
+    })}
+    </ToggleGroup>  
+  )
+}
+
+export default FacetTogglesWidget

package/components/facets-widget.tsx

@@ -0,0 +1,46 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { cn } from '@hanzo/ui/util'
+
+import type { FacetsDesc, StringMutator, StringArrayMutator } from '../types'
+
+import FacetTogglesWidget from './facet-toggles-widget'
+
+const FacetsWidget: React.FC<PropsWithChildren & {
+  facets: FacetsDesc
+  facetClassNames?: string[]
+  mutators:  StringMutator[] | StringArrayMutator[]
+  multiple?: boolean
+  isMobile?: boolean
+  id?: string
+  className?: string
+}> = ({
+  children,
+  facets,
+  mutators,
+  multiple=false,
+  facetClassNames,
+  isMobile=false,
+  className='',
+  id='FacetsWidget'
+}) => {
+  const horiz = className.includes('flex-row')
+  return (
+    <div id={id} className={className} >
+    {Object.keys(facets).map((key, i) => (
+      <FacetTogglesWidget 
+        key={i}
+        multiple={multiple}
+        mutator={mutators[i]} 
+        isMobile={isMobile}
+        facetValues={facets[parseInt(key)]} 
+        className={cn((horiz ? '' : 'mb-2'), (i !== 0 && !horiz) ? 'mt-2' : '', (facetClassNames?.[i]) ?? '')} 
+      />
+    ))}
+      {children}
+    </div>
+  )
+}
+
+export default FacetsWidget

package/components/index.ts

@@ -0,0 +1,14 @@
+export { default as AddToCartWidget } from './add-to-cart-widget'
+export { default as Cart } from './cart'
+export { default as CartLineItem } from './cart-line-item'
+export { default as FacetsWidget } from './facets-widget'
+export { default as FacetTogglesWidget,
+  type FacetMutatorSingle, 
+  type FacetMutatorMultiple
+} from './facet-toggles-widget'
+export { default as ProductCard } from './product-card'
+export { default as ProductSelectionMobilePicker } from './product-selection-mobile-picker'
+export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
+export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
+export { default as SelectItemInCategoryView } from './select-item-in-category-view'
+export * as Icons from './Icons'

package/components/product-card.tsx

@@ -0,0 +1,79 @@
+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 { formatPrice } 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-secondary'
+          >
+            <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'>{formatPrice(item.price)}</p>
+        </CardTitle>
+      </CardContent>
+      <CardFooter className='p-4 flex flex-row justify-center'>
+        <AddToCartWidget item={item}/>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default ProductCard

package/components/product-selection-mobile-picker.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import Picker from 'react-mobile-picker'
+
+import type { Product } from '../types'
+import { formatPrice } from '../util'
+import { cn } from '@hanzo/ui/util'
+
+  // from source code
+interface PickerItemRenderProps {
+  selected: boolean;
+}
+
+function renderOptions(options: string[], selectedColor: string) {
+  return options.map((option) => (
+    <Picker.Item key={option} value={option}>
+      {({ selected }: PickerItemRenderProps) => (
+        <div className={selected ? `font-semibold ${selectedColor}` : 'text-neutral-400'}>{option}</div>
+      )}
+    </Picker.Item>
+  ))
+}
+
+// const DEFAULT_HEIGHT = 216
+// const DEFAULT_ITEM_HEIGHT = 36
+
+
+const ProductSelectionMobilePicker: React.FC<{
+  products: Product[]
+  selectedSku: string | undefined
+  onValueChange: (v: string) => void
+  height?: number
+  itemHeight?: number
+  outerClx?: string
+  itemClx?: string
+}> = ({
+  products,
+  selectedSku,
+  onValueChange,
+  height,
+  itemHeight,
+  outerClx='',
+  itemClx=''
+}) => {
+
+    // @ts-ignore
+  const onChange = (val, ignore) => {
+    console.log("VAL", val)
+    console.log("key")
+    onValueChange(val.item)
+  }
+
+return (
+  <div className={cn('border border-muted-4 rounded-lg px-2', outerClx)}>
+    <Picker
+      className=''
+      value={selectedSku ? {item: selectedSku} : {item: undefined}}
+      onChange={onChange}
+      wheelMode="natural"
+      height={height}
+      itemHeight={itemHeight}
+    >
+      <Picker.Column name="item">
+      {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 ProductSelectionMobilePicker

package/components/product-selection-radio-group.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+import type { Product } from '../types'
+import { formatPrice } from '../util'
+
+const ProductSelectionRadioGroup: React.FC<{
+  products: Product[]
+  selectedSku: string | undefined
+  onValueChange: (v: string) => void
+  groupClx?: string
+  itemClx?: string
+}> = ({
+  products,
+  selectedSku,
+  onValueChange,
+  groupClx='',
+  itemClx=''
+}) => (
+  <RadioGroup
+    className={groupClx}
+    onValueChange={onValueChange}
+    value={selectedSku}
+  >
+  {products.map((prod) => (
+    <div className={itemClx} key={prod.sku}>
+      <RadioGroupItem value={prod.sku} id={prod.sku} />
+      <Label htmlFor={prod.sku}>{prod.titleAsOption + ', ' + formatPrice(prod.price)}</Label>
+    </div>
+  ))}
+  </RadioGroup>
+)
+
+export default ProductSelectionRadioGroup