@hanzo/commerce 6.1.7 → 6.1.9

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

@@ -0,0 +1,261 @@
+'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 type { 
+  SelectedPaths, 
+  ItemSelectorProps, 
+  ItemSelectorCompProps,
+  LineItem, 
+  Family, 
+  ProductTreeNode, 
+} from '../../types'
+
+import { useCommerce } from '../../service/context'
+import SEP from '../../util/sep'
+import { ObsStringMutator } from '../../util'
+
+import AddToCartWidget from './add-to-cart-widget'
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
+
+const CarouselBuyCard: React.FC<{
+  skuPath: string
+
+    /** 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
+
+  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
+}> = 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,
+  onQuantityChanged,
+}) => {
+
+  const cmmc = useCommerce()
+  const inst = useRef<{
+    level: number,
+    reqFamily : Family | undefined
+    parentNode: ProductTreeNode | undefined
+    disposers: IReactionDisposer[]
+  } | 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 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]
+      }
+    }
+
+    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()!)
+
+    inst.current = {
+      level,
+      reqFamily,
+      parentNode,
+      disposers: []
+    }
+
+    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) 
+            }
+          }
+        }
+      ))
+    }
+
+    return () => {
+      inst.current?.disposers.forEach((d) => {d()})
+    }
+
+  }, [])
+
+  const setFamilyPath = (pathValue: string | null) => {
+    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
+    if (found) { 
+      cmmc.setCurrentItem(found.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
+  }> = ({
+    title,
+    byline,
+    clx='' 
+  }) => (
+    <ApplyTypography className={clx}>
+      <h3>{title}</h3>
+      {byline && (<h6>{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]', 
+      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)
+        }
+      />  
+    )}
+    {(cmmc.currentItem) && (
+      <AddToCartWidget 
+        size='default' 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
+      />
+    )} 
+    </div >
+  )
+})
+
+export default CarouselBuyCard

package/components/cart/cart-panel/index.tsx

@@ -59,7 +59,7 @@ const CartPanel: React.FC<PropsWithChildren & {
       items: cmmc.cartItems.map((item) => ({
         item_id: item.sku,
         item_name: item.title,
-        item_category: item.categoryId,
+        item_category: item.familyId,
         price: item.price,
         quantity: item.quantity
       })),

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

@@ -56,7 +56,7 @@ const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
         items: cmmc.cartItems.map((item) => ({
           item_id: item.sku,
           item_name: item.title,
-          item_category: item.categoryId,
+          item_category: item.familyId,
           price: item.price,
           quantity: item.quantity
         })),

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

@@ -49,7 +49,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
           items: cmmc.cartItems.map((item) => ({
             item_id: item.sku,
             item_name: item.title,
-            item_category: item.categoryId,
+            item_category: item.familyId,
             price: item.price,
             quantity: item.quantity
           })),

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

@@ -135,7 +135,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
               items: cmmc.cartItems.map((item) => ({
                 item_id: item.sku,
                 item_name: item.title,
-                item_category: item.categoryId,
+                item_category: item.familyId,
                 price: item.price,
                 quantity: item.quantity
               })),

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

@@ -61,7 +61,7 @@ const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
       items: cmmc.cartItems.map((item) => ({
         item_id: item.sku,
         item_name: item.title,
-        item_category: item.categoryId,
+        item_category: item.familyId,
         price: item.price,
         quantity: item.quantity
       })),

package/components/index.ts

@@ -7,7 +7,7 @@ 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 LevelNodesWidget } from './select-family/level-nodes-widget'
 
 export { default as PaymentStepForm } from './checkout/payment-step-form'
 export { default as ShippingStepForm } from './checkout/shipping-step-form'
@@ -15,6 +15,6 @@ 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'
+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'

package/components/item/product-card.tsx

@@ -6,6 +6,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  MediaStack
 } from '@hanzo/ui/primitives'
 
 import { cn } from '@hanzo/ui/util'
@@ -14,7 +15,6 @@ 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
@@ -30,7 +30,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
     {...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' />
+      <MediaStack media={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'>

package/components/select-family/family-carousel/family-slide.tsx

@@ -0,0 +1,36 @@
+'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 {
+  ApplyTypography,
+  MediaStack
+} from '@hanzo/ui/primitives'
+import type { Family } from '../../../types'
+
+const FamilySlide: React.FC<{
+  family: Family
+  clx?: string
+  mediaConstraint?: {w: number, h: number}
+  getBylineText?: (c: Family) => string
+  variantOrientation?: 'vert' | 'horiz' 
+  showVariantImage?: boolean
+  showVariantPrice?: boolean
+}> = ({
+  family,
+  clx='',
+  mediaConstraint,
+  getBylineText,
+  variantOrientation,
+  showVariantImage,
+  showVariantPrice
+}) => {
+
+
+  return <></>
+}
+
+export default FamilySlide

package/components/select-family/family-carousel/index.tsx

@@ -0,0 +1,78 @@
+'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 {
+  type CarouselOptions,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  ApplyTypography,
+  MediaStack
+} from '@hanzo/ui/primitives'
+
+import type { Family, LineItem, ProductTreeNode } from '../../../types'
+import { formatCurrencyValue } from '../../../util'
+
+
+const FamilyCarousel: React.FC<{
+  skuPath: string
+  clx?: string
+  itemClx?: string
+  options?: CarouselOptions
+  mediaConstraint?: {w: number, h: number}
+  getBylineText?: (c: Family) => string
+  variantOrientation?: 'vert' | 'horiz' 
+  showVariantImage?: boolean
+  showVariantPrice?: boolean
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+  mobile?: boolean
+}> = observer(({ 
+  skuPath,
+  clx='',
+  itemClx='',
+  options={loop: true},
+  mediaConstraint={w: 250, h: 250},
+  variantOrientation='vert',
+  showVariantImage=true,
+  showVariantPrice=true,
+  onQuantityChanged,
+  mobile=false,
+}) => {
+
+  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
+  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
+
+  const onSelect = useCallback((emblaApi: CarouselApi) => {
+    const index = emblaApi.selectedScrollSnap()
+    if (index !== -1) {
+      //selectSku(items[index].sku)
+      // cmmc.selectPath
+    }
+  }, [])
+
+  const TEST = ["one", "two", "three"]
+
+  return ( 
+    <Carousel options={options} className={cn('w-full px-2', clx)} onCarouselSelect={onSelect} setApi={setApi}>
+      <CarouselContent>
+
+      {/*items.map((item, index) => (
+        <CarouselItem key={index} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
+          <FamilySlide cat
+        </CarouselItem>
+      ))*/}
+      </CarouselContent>
+      <CarouselPrevious className='left-1'/>
+      <CarouselNext className='right-1'/>
+    </Carousel>
+  )
+})
+
+export default FamilyCarousel

package/components/{level-nodes-widget → select-family/level-nodes-widget}/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
-import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../types'
+import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../../types'
 import NodeImage from './node-image'
 
 const LevelNodesWidget: React.FC<{

package/components/{level-nodes-widget → select-family/level-nodes-widget}/node-image.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { ProductTreeNode } from '../../types'
+import type { ProductTreeNode } from '../../../types'
 
 const ICON_SIZE = 20
 

package/components/{select → select-product}/carousel-selector.tsx

@@ -4,17 +4,17 @@ 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 CarouselOptions,
   type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-  ApplyTypography
+  ApplyTypography,
+  MediaStack
 } from '@hanzo/ui/primitives'
 
 import type { ItemSelectorProps, LineItem } from '../../types'
@@ -22,8 +22,8 @@ import { formatCurrencyValue } from '../../util'
 
 interface CarouselItemSelectorPropsExt {
   constrainTo: {w: number, h: number}
-  options?: CarouselOptionsType 
-    /** Do not show Category and / or Item title and Price */
+  options?: CarouselOptions 
+    /** Do not show Family and / or Item title and Price */
   imageOnly?: boolean
 }
   
@@ -34,7 +34,7 @@ const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({
   scrollList, // ignored
   clx='',
   itemClx='',
-  showCategory=false,
+  showFamily=false,
   ext={
     options: {loop: true},
     constrainTo: {w: 250, h: 250},
@@ -84,18 +84,18 @@ const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({
     clx
   }) => (
     <ApplyTypography className={cn(clx, 'flex flex-col items-center !gap-2 [&>*]:!m-0')}>
-      {showCategory && (<h4>{item.categoryTitle}</h4>)}
+      {showFamily && (<h4>{item.familyTitle}</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}>
+    <Carousel options={options} className={cn('w-full px-2', clx)} onCarouselSelect={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='' />
+          <MediaStack media={item} constrainTo={constrainTo} clx='' />
           {!imageOnly && (<ItemInfo item={item} clx=''/>)}
         </CarouselItem>
       ))}

package/components/{select → select-product}/image-selector.tsx

@@ -56,14 +56,14 @@ const ImageItemSelector: React.FC<ItemSelectorProps> = observer(({
   clx='',
   itemClx='',
   soleItemClx='',
-  showCategory=false,
+  showFamily=false,
   showQuantity=false,
   scrollList=false
 }) => {
 
   const LabelText: React.FC<{item: LineItem}> = ({item}) => (
-    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+    (showFamily ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showFamily ? ': ' : ', ') + formatCurrencyValue(item.price)
   )
 
   const ItemAndPrice: React.FC<{

package/components/{select → select-product}/radio-selector.tsx

@@ -20,14 +20,14 @@ const RadioItemSelector: React.FC<ItemSelectorProps> = observer(({
   clx='',
   itemClx='',
   soleItemClx='',
-  showCategory=false,
+  showFamily=false,
   showQuantity=false,
   scrollList=false
 }) => {
 
   const LabelText: React.FC<{item: LineItem}> = ({item}) => (
-    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+    (showFamily ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showFamily ? ': ' : ', ') + formatCurrencyValue(item.price)
   )
 
   const ItemAndPrice: React.FC<{

package/index.ts

@@ -1,4 +1,11 @@
 export * from './service/context'
 export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue } from './util'
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue } from './util'
+//export { default as SEP } from './util/sep'
+
+export const sep = {
+  TOK: '-',
+  SUB_TOK: '_',
+  DECIMAL: '.'
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.1.7",
-  "description": "Library with shopping cart components.",
+  "version": "6.1.9",
+  "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
@@ -31,8 +31,6 @@
     "./types": "./types/index.ts"
   },
   "dependencies": {
-    "@splinetool/react-spline": "^2.2.6",
-    "@splinetool/runtime": "^1.0.75",
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
     "react-square-web-payments-sdk": "^3.2.1",

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, ProductTreeNode } from '../types'
+import type { Family, ProductTreeNode } from '../types'
 
 const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
 
@@ -19,18 +19,18 @@ const useCommerce = (): CommerceService => {
 }
 
 const CommerceServiceProvider: React.FC<PropsWithChildren & {
-  productsByCategory: Category[]
+  productsByFamily: Family[]
   rootNode: ProductTreeNode
   options?: ServiceOptions
 }> = ({ 
   children,
-  productsByCategory,
+  productsByFamily,
   rootNode,
   options
 }) => {
 
     // TODO: Inject Promo fixture here
-  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootNode, options))
+  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByFamily, rootNode, options))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>
       {children}