@hanzo/commerce 7.7.1 → 7.7.3

package/components/Icons.tsx

@@ -1,35 +0,0 @@
-import {
-  ShoppingCart,
-  Menu,
-  ChevronLeft,
-  ChevronRight,
-  Loader2,
-  Check,
-  Plus,
-  Minus,
-  ChevronDown,
-  ChevronsLeft,
-  ChevronsRight,
-  Image,
-  Trash2,
-  Search,
-  Barcode
-} from "lucide-react"
-
-export default {
-  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

@@ -1,195 +0,0 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { reaction, type IReactionDisposer } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import {
-  Button,
-  buttonVariants,
-  cn,
-  sx,
-} from '@hanzo/ui'
-import Icons from './Icons'
-import type { LineItem } from '../types'
-import { sendFBEvent, sendGAEvent } from '../util/analytics'
-
-const AddToCartWidget: React.FC<{ 
-  item: LineItem
-  disabled?: boolean
-  className?: string
-  buttonClx?: string
-  variant?: 'minimal' | 'primary' | 'primary-smaller' | 'outline'
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = observer(({
-  item,
-  variant='primary',
-  disabled=false,
-  className='',
-  buttonClx='',
-  onQuantityChanged
-}) => {
-
-  const reactionDisposer = useRef<IReactionDisposer | undefined>(undefined)
-  useEffect(() => {
-    if (onQuantityChanged) {
-      reactionDisposer.current = reaction(
-        () => (item.quantity),
-        (quantity: number, previous: number) => {
-          onQuantityChanged(item.sku, quantity, previous)
-        }  
-      )
-    }
-    return () => {
-      if (reactionDisposer.current) {
-        reactionDisposer.current()
-      }  
-    }
-  }, [])
-
-  // `rounded-lg` written out, not interpolated. The note that used to sit here
-  // said safelisting was unnecessary "since its used widely" — which is true
-  // only for as long as some OTHER file in whatever the consumer scans spells it
-  // literally. Tailwind reads source text; a template literal is not a class
-  // name, so this one was borrowing a rule it did not ask for.
-  const ROUNDED_CLX = ' rounded-lg ' // the class
-
-  const ghost = variant === 'minimal'
-  const outline = variant === 'outline'
-  const primary = variant === 'primary'
-  const priSmaller = variant === 'primary-smaller'
-
-  let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : (priSmaller ? 'h-4 w-6 px-0.5 opacity-70' : 'h-5 w-7 px-1 opacity-70 ')
-  iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100'
-
-  let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold '
-  digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg '
-
-  if (disabled) {
-    return (
-      <div className={cn('flex flex-row items-stretch' + ROUNDED_CLX +  (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className)}>
-        <div className={'text-sm flex items-center cursor-default ' + digitClx} >{item.quantity}</div>
-      </div>
-    )
-  }
-
-  const inc = (event: React.MouseEvent<HTMLElement>) => {
-    item.increment()
-    event.stopPropagation() // in case we're part of a larger selection UI
-    sendGAEvent('add_to_cart', {
-      items: [{
-        item_id: item.sku,
-        item_name: item.title,
-        item_category: item.familyId,
-        price: item.price,
-        quantity: item.quantity
-      }],
-      value: item.price,
-      currency: 'USD',
-    })
-    sendFBEvent('AddToCart', {
-      content_ids: [item.sku],
-      contents: [{
-        id: item.sku,
-        quantity: item.quantity
-      }],
-      content_name: item.title,
-      value: item.price,
-      currency: 'USD',
-    })
-  }
-
-  const dec = (event: React.MouseEvent<HTMLElement>) => {
-    item.decrement()
-    event.stopPropagation() // in case we're part of a larger selection UI
-    sendGAEvent('remove_from_cart', {
-      items: [{
-        item_id: item.sku,
-        item_name: item.title,
-        item_category: item.familyId,
-        price: item.price,
-        quantity: item.quantity
-      }],
-      value: item.price,
-      currency: 'USD',
-    })
-  }
-
-  return ( item.isInCart ? (
-    <div className={cn(
-      'flex flex-row items-stretch justify-between ',
-        // should match 'sm' and 'default' button heights
-      (ghost || priSmaller ? 'h-8' : 'h-9'),
-      ROUNDED_CLX,
-      (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), 
-      (outline ? 'border border-muted' : ''),
-      className
-    )}>
-      <Button
-        aria-label={'Remove a ' + item.title + ' from the cart'}
-        size={ghost || priSmaller ? 'sm' : 'default'}
-        variant={primary || priSmaller ? 'primary' : 'ghost'}
-        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
-        className={cn(
-          'lg:min-w-0 lg:px-2 grow justify-start group', 
-          (ghost || priSmaller ? 'px-1' : 'px-2'), 
-          (outline ? 'hover:bg-transparent' : ''),
-          buttonClx,
-          'h-auto self-stretch' // must be smaller than normal
-        )}
-        key='left'
-        onClick={dec}
-      >
-      {(item.quantity > 1) ? (
-        <Icons.minus className={iconClx} aria-hidden='true'/>
-      ) : (
-        <Icons.trash className={iconClx} aria-hidden='true'/>
-      )}
-      </Button>
-        <div className={cn(
-          'grow-0 shrink-0 flex items-center cursor-default xs:px-2',
-          priSmaller || ghost ? 'text-xs' : 'text-sm',
-          digitClx
-        )}>
-          {item.quantity}{ghost ? '' : ' in Bag'}
-        </div>
-      <Button
-        aria-label={'Add another ' + item.title + ' to the cart'}
-        itemProp='potentialAction'
-        itemScope
-        itemType='https://schema.org/AddAction'
-        size={ghost || priSmaller ? 'sm' : 'default'}
-
-        variant={primary || priSmaller ? 'primary' : 'ghost'}
-        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
-        className={cn(
-          'lg:min-w-0 lg:px-2 grow justify-end group', 
-          (ghost || priSmaller ? 'px-1' : 'px-2'), 
-          (outline ? 'hover:bg-transparent' : ''),
-          buttonClx,
-          'h-auto self-stretch' // must be smaller than normal
-        )}
-        onClick={inc}
-        key='right'
-      >
-        <Icons.plus className={iconClx} aria-hidden='true'/>
-      </Button>
-    </div>
-  ) : (
-    <Button
-      aria-label={'Add a ' + item.title + ' to cart'}
-      itemProp='potentialAction'
-      itemScope
-      itemType='https://schema.org/AddAction'
-      size={ghost || priSmaller ? 'sm' : 'default'}
-      variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')}
-      {...sx('rounded-lg')}
-      className={cn(buttonClx, className)}
-      onClick={inc}
-    >
-      <span className='m1-1'>Add</span>
-      <Icons.plus className='h-5 w-5 ml-1' aria-hidden='true'/>
-    </Button>
-  ))
-})
-
-export default AddToCartWidget

package/components/buy/buy-card.tsx

@@ -1,269 +0,0 @@
-'use client'
-import React, { useRef, useEffect, type ComponentType } from 'react'
-import { reaction, type IReactionDisposer } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import {
-  cn,
-  ApplyTypography,
-  MediaStack,
-} from '@hanzo/ui'
-import type { 
-  ItemSelectorProps, 
-  ItemSelectorCompProps,
-  LineItem, 
-  Family, 
-  CategoryNode, 
-} from '../../types'
-
-import { useCommerce } from '../../service/context'
-import * as pathUtils from '../../service/path-utils'
-import { getFacetValuesMutator, ObsStringMutator } from '../../util'
-
-import NodeTabs from '../node-tabs'
-import AddToCartWidget from '../add-to-cart-widget'
-
-const BuyCard: 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,
-    requestedFamily : Family | undefined
-    requestedNode: CategoryNode | undefined
-    currentFamTokenMutator: ObsStringMutator
-    disposers: IReactionDisposer[]
-  } | undefined>(undefined)
-
-
-  useEffect(() => {
-
-    let requestedFamily = cmmc.getFamilyById(skuPath) 
-    let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
-    let initialFamily = undefined
-
-    const { paths, level } = pathUtils.getSelectedPaths(skuPath)
-
-    if (level === 0) {
-      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
-    }
-    if (requestedFamily) { 
-      if (allVariants && level >= 2) {
-          // select all siblings of requestedFamily.
-          // ie, go one level back
-        delete paths[level]
-        initialFamily = requestedFamily
-        requestedFamily = undefined
-        requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath))
-      }
-    }
-    else {
-        // select siblings paths
-      if (allVariants) {
-        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
-      }
-        // Actually select the the first fam at the fam level, 
-      else {
-        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
-      }
-    }
-
-    const selectedFams = cmmc.selectPaths(paths)
-    initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0])
-    cmmc.setCurrentItem(initialFamily.products[0].sku)
-    const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily!.id))
-
-    inst.current = {
-      level,
-      requestedFamily,
-      requestedNode,
-      currentFamTokenMutator,
-      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.getFamilyById(famId)
-            if (fam) { 
-              cmmc.setCurrentItem(fam.products[0].sku) 
-            }
-          }
-        }
-      ))
-    }
-
-    return () => {
-      inst.current?.disposers.forEach((d) => {d()})
-    }
-
-  }, [])
-
-  const setFamilyPath = (pathValue: string | null) => {
-    if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
-      inst.current?.currentFamTokenMutator.set(pathValue) 
-    }
-    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 = pathUtils.lastToken(cmmc.currentItem!.familyId)
-    if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
-      inst.current?.currentFamTokenMutator.set(pathValue) 
-    }
-  }
-
-  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.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?.requestedNode && (<>
-      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
-        <h3>{inst.current!.requestedNode.label}</h3>
-        {inst.current!.requestedNode.subNodesLabel && (
-          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
-        )}
-      </ApplyTypography>
-      <NodeTabs
-        className={cn(
-          'grid gap-0 align-stretch justify-normal',
-          '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
-        )}
-        // One column per sub-node. The count used to be interpolated into a
-        // column-count utility in the className, and Tailwind's extractor never
-        // saw it: the extractor reads source text, and a template literal is not
-        // a class name. The element got `display:grid` with the default
-        // `grid-template-columns: none`, so every family tab row stacked in a
-        // single column. `repeat(n, minmax(0, 1fr))` is exactly what the utility
-        // would have compiled to, and it holds for any n.
-        style={{ gridTemplateColumns: `repeat(${inst.current.requestedNode.subNodes!.length}, minmax(0, 1fr))` }}
-        mobile={mobile}
-        mutator={allVariants ? 
-          {
-            get: () => (inst.current!.currentFamTokenMutator.get()),
-            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.requestedNode.subNodes!}
-        show={familyTabAs}
-      />
-    </>)} 
-    {!inst.current?.requestedNode && famTitle && (
-      <TitleArea title={famTitle} clx=''/>
-    )}
-    {(cmmc.currentItem && showItemMedia) && (
-      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} className={(scroll ? 'shrink-0' : '')}/>
-    )} 
-    {itemsToShow && (
-      <Selector 
-        items={itemsToShow}
-        selectedItemRef={cmmc}
-        selectSku={selectSku}
-        {...selectorProps}
-        scrollable={scroll}
-      />  
-    )}
-    {(cmmc.currentItem) && (
-      <AddToCartWidget 
-        item={cmmc.currentItem}
-        onQuantityChanged={onQuantityChanged} 
-        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
-      />
-    )} 
-    </div >
-  )
-})
-
-export default BuyCard