@hanzo/commerce 6.1.13 → 6.2.1

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

@@ -1,261 +1,212 @@
 'use client'
 import React, { useRef, useEffect, type ComponentType } from 'react'
-import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
+import { ApplyTypography, Button, MediaStack, Skeleton } from '@hanzo/ui/primitives'
 
 import type { 
-  SelectedPaths, 
   ItemSelectorProps, 
-  ItemSelectorCompProps,
   LineItem, 
   Family, 
-  ProductTreeNode, 
+  CategoryNode,
+  CategoryNodeRole,
+  SelectionUISpecifier,
+  ItemSelectorOptions, 
 } from '../../types'
 
 import { useCommerce } from '../../service/context'
-import SEP from '../../util/sep'
-import { ObsStringMutator } from '../../util'
+import * as pathUtils from '../../service/path-utils'
+import { ObsStringMutator, getSelectionUISpecifier } from '../../util'
+
+import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'
+import FamilyCarousel from '../select-family/family-carousel'
 
 import AddToCartWidget from './add-to-cart-widget'
-import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
 
-const CarouselBuyCard: React.FC<{
-  skuPath: string
+const SCROLL = {
+  scrollAfter: 5,
+  scrollHeightClx: 'h-[65vh]'
+}
 
-    /** For any selectors that show a list of choices,
-     * starting with 'scrollAfter' elements, 
-     * the list will scroll, and the card will
-     * have 'scrollHeightClx' applied to it to define and fix the height.
-     * This is most like something like '80vh' 
-     * defaults are '5' and 'h-[70vh]'
-     * */
-  scrollAfter?: number
-  scrollHeightClx?: string
+const MEDIA_CONSTRAINT = {w: 200, h: 200}
 
+const CarouselBuyCard: React.FC<{
+  skuPath: string
   clx?: string
-  famWidgetClx?: string
-  addWidgetClx?: string
-  selector: ComponentType<ItemSelectorProps>
-  selectorProps?: ItemSelectorCompProps 
-
-    /** Show all items from all sibling families
-     * If skuPath defines a Family, the first of it's items will 
-     * be selected. The facet widget will just select a the first 
-     * item in the chosen Family without changings the overall set
-     * of choices. */
-  allVariants?: boolean
-
-  familyTabAs?: 'image' | 'label' | 'image-and-label'
-  showItemMedia?: boolean
-
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
   mobile?: boolean
+  handleCheckout: () => void
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
   skuPath,
-  scrollAfter=5,
-  scrollHeightClx='h-[80vh]',
   clx='',
-  famWidgetClx='',
-  addWidgetClx='',
-  selector: Selector,
-  selectorProps={
-    clx: '',
-    soleItemClx: '',
-    itemClx: '',
-    ext: {}
-  },
-  familyTabAs='image-and-label', 
-  showItemMedia=true,
-  allVariants=false,
   mobile=false,
+  handleCheckout,
   onQuantityChanged,
 }) => {
 
   const cmmc = useCommerce()
-  const inst = useRef<{
-    level: number,
-    reqFamily : Family | undefined
-    parentNode: ProductTreeNode | undefined
-    disposers: IReactionDisposer[]
-  } | undefined>(undefined)
 
+  const r = useRef<{
+    role: CategoryNodeRole
+    item: LineItem | undefined
+    family: Family | undefined
+    families: Family[] | undefined
+    node: CategoryNode 
+    uiSpec: SelectionUISpecifier
+    single?: {
+      items: LineItem[]
+      Selector: ComponentType<ItemSelectorProps>
+      selOptions: ItemSelectorOptions | undefined
+      scrollable: boolean
+      showItemMedia: boolean
+    } 
+  } | undefined>(undefined)
 
   useEffect(() => {
 
-    let reqFamily = cmmc.getFamily(skuPath) 
-    let parentNode = reqFamily ? undefined : cmmc.getNodeAtPath(skuPath)
-    let initialFamily = undefined
-    const toks = skuPath.split(SEP.TOK)
-    const level = toks.length - 1
-    if (level === 0) {
-      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
+    const peek = cmmc.peek(skuPath)
+    if (typeof peek === 'string') {
+      throw new Error(peek)
     }
-    const paths: SelectedPaths = {}
-    for (let l = 1; l <= level; l++ ) {
-      paths[l] = [toks[l]]   
-    } 
-    if (reqFamily) { 
-      if (allVariants && level >= 2) {
-          // select all siblings of reqFamily.
-          // ie, go one level back
-        delete paths[level]
-        initialFamily = reqFamily
-        reqFamily = undefined
-        parentNode = cmmc.getNodeAtPath(toks.slice(0, -1).join(SEP.TOK))
-      }
-    }
-    else {
-        // select siblings paths
-      if (allVariants) {
-        paths[level + 1] = [...parentNode!.subNodes!.map((node) => (node.skuToken))]
-      }
-        // Actually select the the first fam at the fam level, 
-      else {
-        paths[level + 1] = [parentNode!.subNodes![0].skuToken]
-      }
+    if (peek.role === 'non-outermost') {
+      throw new Error(`BuyCard: skuPath ${skuPath} isn't an outermost tree node or product family!`)
     }
 
-    const selFamilies = cmmc.selectPaths(paths)
-    initialFamily = initialFamily ? initialFamily : (reqFamily ? reqFamily : selFamilies[0])
-    cmmc.setCurrentItem(initialFamily.products[0].sku)
-    const currentFamily = new ObsStringMutator(initialFamily!.id.split(SEP.TOK).pop()!)
+    const uiSpec = getSelectionUISpecifier(skuPath)
 
-    inst.current = {
-      level,
-      reqFamily,
-      parentNode,
-      disposers: []
+    r.current = {
+      ...peek,
+      node: peek.node!, // else exception was thrown.
+      uiSpec,
     }
 
-    if (!allVariants) {
-      inst.current?.disposers.push(reaction(
-        () => {
-          const fams = cmmc.selectedFamilies
-          return (fams.length > 0) ? fams[0].id : undefined
-        },
-        (famId) => {
-          if (famId && famId !== cmmc.currentItem?.familyId) {
-            const fam = cmmc.getFamily(famId)
-            if (fam) { 
-              cmmc.setCurrentItem(fam.products[0].sku) 
-            }
-          }
-        }
-      ))
-    }
+    if (peek.role === 'single-family') {
 
-    return () => {
-      inst.current?.disposers.forEach((d) => {d()})
-    }
+      const singleSpec = uiSpec.singleFamily 
+      const Selector: ComponentType<ItemSelectorProps> = 
+        (singleSpec?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector
+      const selOptions = singleSpec?.options
+      const items = peek.family!.products as LineItem[]
 
-  }, [])
+      r.current.single = {
+        items,
+        Selector,
+        selOptions,
+        scrollable: !!(items.length > SCROLL.scrollAfter),
+        showItemMedia: singleSpec?.type !== 'carousel'
+      }
 
-  const setFamilyPath = (pathValue: string | null) => {
-    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
-    if (found) { 
-      cmmc.setCurrentItem(found.sku) 
+      const currItem = peek.item ?? peek.family!.products[0]
+      cmmc.setCurrentItem(currItem.sku)
+    }
+    else {
+      const initialFamily = peek.family ? peek.family : peek.families![0]
+      const currItem = peek.item ?? initialFamily.products[0]
+      cmmc.setCurrentItem(currItem.sku)
     }
-  }
-
-  const selectSku = (sku: string) => {
-    cmmc.setCurrentItem(sku)
-    const pathValue = cmmc.currentItem?.familyId.split(SEP.TOK).pop()!
-  }
-
-  const famTitle = inst.current?.reqFamily ? inst.current.reqFamily.title : cmmc.selectedFamilies?.[0]?.title
-
-  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
-    allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
 
+  }, [])
 
   const TitleArea: React.FC<{
     title: string
     byline?: string
     clx?: string
+    bylineClx?: string
   }> = ({
     title,
     byline,
-    clx='' 
+    clx='',
+    bylineClx='' 
   }) => (
     <ApplyTypography className={clx}>
       <h3>{title}</h3>
-      {byline && (<h6>{byline}</h6>)}
+      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
     </ApplyTypography>
   )
 
-  const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter)
   return (
     <div className={cn(
-      'px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', 
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-4 items-center min-h-[40vh]', 
       clx,
-      scroll ? scrollHeightClx : 'h-auto'
-    )} >
-    {inst.current?.parentNode && (<>
-      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
-        <h3>{inst.current!.parentNode.label}</h3>
-        {inst.current!.parentNode.subNodesLabel && (
-          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.parentNode.subNodesLabel}</h6>
-        )}
-      </ApplyTypography>
-      {/* }
-      <LevelNodesWidget
-        className={cn(
-          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.parentNode.subNodes!.length}`, 
-          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
-          (scroll ? 'shrink-0' : ''),
-          famWidgetClx  
-        )} 
-        mobile={mobile}
-        mutator={allVariants ? 
-          {
-            get: () => (inst.current!.currentFamily.s),
-            set: setFamilyPath
-          }
-          : 
-          getFacetValuesMutator(inst.current.level + 1, cmmc)
-        } 
-        itemClx='flex-col h-auto gap-0 py-1 px-3'
-        buttonClx={
-          'h-full ' +
-          '!border-level-3'
-        }
-        levelNodes={inst.current.parentNode.subNodes!}
-        show={familyTabAs}
-      />
-      */}
-    </>)} 
-    {!inst.current?.parentNode && famTitle && (
-      <TitleArea title={famTitle} clx=''/>
-    )}
-    {(cmmc.currentItem && showItemMedia) && (
-      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
-    )} 
-    {itemsToShow && (
-      <Selector 
-        items={itemsToShow}
-        selectedItemRef={cmmc}
-        selectSku={selectSku}
-        {...selectorProps}
-        scrollList={scroll}
-        showFamily={selectorProps.showFamily ? 
-          selectorProps.showFamily
-          :
-          (allVariants && !inst.current?.reqFamily)
-        }
-      />  
-    )}
+      r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto'
+    )}>
+    {r.current?.single ? (<>
+      <TitleArea title={r.current?.family?.title ?? ''} clx=''/>
+      {(r.current.single.showItemMedia && cmmc.currentItem ) && (
+        <MediaStack 
+          media={cmmc.currentItem} 
+          constrainTo={MEDIA_CONSTRAINT} 
+          clx={(r.current.single.scrollable ? 'shrink-0' : '')}
+        />
+      )}
+      {(r.current.single.showItemMedia && !cmmc.currentItem ) && (
+        <Skeleton className={'w-[200px] h-[200px] my-4 ' + (r.current.single.scrollable ? 'shrink-0' : '')}/>
+      )}
+      {r.current.single.items && (
+        <r.current.single.Selector 
+          items={r.current.single.items}
+          selectedItemRef={cmmc}
+          selectSku={cmmc.setCurrentItem.bind(cmmc)}
+          scrollable={r.current.single.scrollable}
+          mobile={mobile}
+          options={r.current.single.selOptions}
+        />  
+      )}
+    </>) : (<>
+      {r.current?.uiSpec.multiFamily?.showParentTitle && (
+        <TitleArea 
+          title={r.current?.node.label ?? ''} 
+          byline={r.current?.node.subNodesLabel} 
+          clx={'mb-2 '}
+          bylineClx='!text-center font-bold text-muted mt-3'
+        />
+      )}
+      {r.current?.families && ( // safegaurd for first render etc.
+        <FamilyCarousel 
+          families={r.current?.families}
+          clx='w-full'
+          slideOptions={r.current?.uiSpec.multiFamily?.slide.options}
+          mediaConstraint={MEDIA_CONSTRAINT}
+          mobile={mobile}
+        />
+      )}
+    </>)}
     {(cmmc.currentItem) && (
-      <AddToCartWidget 
-        size='default' 
-        item={cmmc.currentItem}
-        onQuantityChanged={onQuantityChanged} 
-        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
-      />
+      <div className={cn(
+        'self-stretch mt-4 flex flex-col items-center gap-3',
+        (r.current?.single?.scrollable ? 'shrink-0' : '')
+      )}>
+        <AddToCartWidget 
+          size='default' 
+          item={cmmc.currentItem}
+          onQuantityChanged={onQuantityChanged} 
+          variant={cmmc.cartEmpty ? 'primary' : 'outline'}
+          className='min-w-[160px] w-full sm:max-w-[320px]' 
+        />
+        {!cmmc.cartEmpty && (
+          <Button 
+            onClick={handleCheckout} 
+            variant='primary' 
+            rounded='lg' 
+            className='min-w-[160px] w-full sm:max-w-[320px]'
+          >
+            Checkout
+          </Button>
+        )}
+      </div>
     )} 
     </div >
   )
 })
 
+/* Above family carousel
+      <TitleArea 
+        title={r.current?.node.label ?? ''} 
+        byline={r.current?.node.subNodesLabel} 
+        clx={'mb-2 '}
+        bylineClx='!text-center font-bold text-muted mt-3'
+      />
+*/
+
 export default CarouselBuyCard

package/components/buy/foo.txt

@@ -0,0 +1,27 @@
+    {/*
+      <LevelNodesWidget
+        className={cn(
+          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.parentNode.subNodes!.length}`, 
+          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
+          (scroll ? 'shrink-0' : ''),
+          famWidgetClx  
+        )} 
+        mobile={mobile}
+        mutator={allVariants ? 
+          {
+            get: () => (inst.current!.currentFamily.s),
+            set: setFamilyPath
+          }
+          : 
+          getFacetValuesMutator(inst.current.level + 1, cmmc)
+        } 
+        itemClx='flex-col h-auto gap-0 py-1 px-3'
+        buttonClx={
+          'h-full ' +
+          '!border-level-3'
+        }
+        levelNodes={inst.current.parentNode.subNodes!}
+        show={familyTabAs}
+      />
+      */}
+    </>)} 

package/components/cart/cart-panel/cart-line-item.tsx

@@ -61,7 +61,7 @@ const CartLineItem: React.FC<{
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
+          <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' variant='minimal'/>
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>

package/components/checkout/payment-step-form/contact-form.tsx

@@ -23,7 +23,7 @@ const ContactForm: React.FC<{
           render={({ field }) => (
             <FormItem className='w-full'>
               <FormControl>
-                <Input {...field} className='border-muted-4' placeholder='Full name'/>
+                <Input {...field} placeholder='Full name'/>
               </FormControl>
               <FormMessage className='py-0 space-y-0 !m-0'/>
             </FormItem>
@@ -35,7 +35,7 @@ const ContactForm: React.FC<{
           render={({ field }) => (
             <FormItem className='w-full'>
               <FormControl>
-                <Input {...field} className='border-muted-4' placeholder='Email'/>
+                <Input {...field} placeholder='Email'/>
               </FormControl>
               <FormMessage className='py-0 space-y-0 !m-0'/>
             </FormItem>

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

@@ -178,7 +178,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
         <div className='flex gap-2 grid grid-cols-3'>
           <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
             <SelectTrigger>
-              <SelectValue defaultValue='eth' className='border-muted-4'/>
+              <SelectValue defaultValue='eth' />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
@@ -192,7 +192,6 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
             <Input
               value={amount ? amount/(10**18) : amount}
               contentEditable={false}
-              className='border-muted-4'
             />
             <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
               <Eth height={10}/>

package/components/checkout/shipping-step-form.tsx

@@ -82,7 +82,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
                 <FormControl>
-                  <Input {...field} className='border-muted-4' placeholder='Address line 1'/>
+                  <Input {...field} placeholder='Address line 1'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -94,7 +94,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
                 <FormControl>
-                  <Input {...field} className='border-muted-4' placeholder='Address line 2 (optional)'/>
+                  <Input {...field} placeholder='Address line 2 (optional)'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -107,7 +107,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
                   <FormControl>
-                    <Input {...field} className='border-muted-4' placeholder='Zip code'/>
+                    <Input {...field} placeholder='Zip code'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -119,7 +119,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
                   <FormControl>
-                    <Input {...field} className='border-muted-4' placeholder='City'/>
+                    <Input {...field} placeholder='City'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -133,7 +133,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
                   <FormControl>
-                    <Input {...field} className='border-muted-4' placeholder='State (optional)'/>
+                    <Input {...field} placeholder='State (optional)'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>

package/components/index.ts

@@ -15,6 +15,4 @@ 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-product/image-selector'
-export { default as RadioItemSelector } from './select-product/radio-selector'
-export { default as CarouselItemSelector, type CarouselItemSelectorPropsExt } from './select-product/carousel-selector'
+export * from './item-selector'