@hanzo/commerce 7.7.0 → 7.7.2

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

@@ -1,243 +0,0 @@
-'use client'
-import React, { 
-  useRef, 
-  useEffect, 
-  type ComponentType, 
-  useState 
-} from 'react'
-import { observer } from 'mobx-react-lite'
-
-import {
-  cn,
-} from '@hanzo/ui'
-import type { 
-  ItemSelectorProps, 
-  LineItem, 
-  Family, 
-  CategoryNode,
-  CategoryNodeRole,
-  SelectionUISpecifier,
-  ItemSelectorOptions,
-  MultiFamilySelectorProps,
-  MultiFamilySelectorOptions, 
-} from '../../types'
-
-import { useCommerce } from '../../service/context'
-import { getSelectionUISpecifier } from '../../util'
-
-import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'
-import SingleFamilySelector from './single-family-selector'
-import { FamilyCarousel, AllVariantsCarousel } from './multi-family'
-
-import AddToCartWidget from '../add-to-cart-widget'
-
-const SCROLL = {
-  scrollAfter: 5,
-  scrollHeightClx: 'h-[65vh]'
-}
-
-const MEDIA_CONSTRAINT = {w: 200, h: 200}
-
-const sortItems = (items: LineItem[], sort: 'asc' | 'desc' | 'none'): LineItem[] => (
-  ((sort === 'asc') ? 
-    items.sort((a: LineItem, b: LineItem): number => (a.price - b.price))
-    :
-    ((sort === 'desc') ?   
-      items.sort((a: LineItem, b: LineItem): number => (b.price - a.price ))
-      :
-      items
-    )
-  )
-)
-
-const CarouselBuyCard: React.FC<{
-  skuPath: string
-  checkoutButton: React.ReactNode
-  clx?: string
-  selectorClx?: string
-  addBtnClx?: string
-  buttonsAreaClx?: string
-  mobile?: boolean
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = ({
-  skuPath,
-  checkoutButton,
-  clx='',
-  selectorClx='',
-  addBtnClx='',
-  buttonsAreaClx='',
-  mobile=false,
-  onQuantityChanged,
-}) => {
-
-  const cmmc = useCommerce()
-
-  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
-    }
-    multi?: {
-      Selector: ComponentType<MultiFamilySelectorProps>
-      selectorOptions: MultiFamilySelectorOptions | undefined
-      itemOptions: ItemSelectorOptions | undefined
-      initialFamilyId: string
-    }  
-  } | undefined>(undefined)
-
-  const [changeMeToRerender, setChangeMeToRerender] = useState<boolean>(false)
-
-  useEffect(() => {
-
-    if (!skuPath || skuPath.length === 0 ) {
-      // The component is being hidden (w an amination)
-      // keep things the same so no layout jump
-      return 
-    }
-
-    const peek = cmmc.peek(skuPath)
-    if (typeof peek === 'string') {
-      throw new Error(peek)
-    }
-    if (peek.role === 'non-outermost') {
-      throw new Error(`BuyCard: skuPath ${skuPath} isn't an outermost tree node or product family!`)
-    }
-
-    const uiSpec = getSelectionUISpecifier(skuPath)
-
-    r.current = {
-      ...peek,
-      node: peek.node!, // else exception was thrown.
-      uiSpec,
-    }
-
-    if (peek.role === 'single-family') {
-
-      const sort = (): 'none' | 'asc' | 'desc' => {
-        const options = uiSpec.singleFamily?.options ?? {}
-        const showSlider = 'showSlider' in options ? options.showSlider! : true
-        return ('sort' in options) ? 
-          options.sort!
-          :
-          (showSlider ? 'asc' : 'none')
-      }
-
-      const items = peek.family!.products as LineItem[]
-      const Selector: ComponentType<ItemSelectorProps> = 
-        (uiSpec.singleFamily?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector
-      const selOptions = uiSpec.singleFamily?.options
-
-      r.current.single = {
-        items: sortItems(items, sort()),
-        Selector,
-        selOptions,
-        scrollable: !!(items.length > SCROLL.scrollAfter),
-        showItemMedia: uiSpec.singleFamily?.type !== 'carousel'
-      }
-
-      const currItem = peek.item ?? r.current.single.items[0]
-      cmmc.setCurrentItem(currItem.sku)
-    }
-    else {
-      const initialFamily = peek.family ? peek.family : peek.families![0]
-        // TODO: Does this ever need to be sorted??
-      const currItem = peek.item ?? initialFamily.products[0]
-
-          // sets currentFamily as well
-      cmmc.setCurrentItem(currItem.sku)
-
-      r.current.multi = {
-        Selector:  (uiSpec.multiFamily?.type === 'family-carousel') ? 
-          FamilyCarousel 
-          : 
-          AllVariantsCarousel,
-        itemOptions: uiSpec.multiFamily?.itemOptions,
-        selectorOptions: uiSpec.multiFamily?.selectorOptions,
-        initialFamilyId: initialFamily.id
-      }
-    }
-
-      // Must do this since Dialog code takes this comp out of the React shadow DOM
-      // (only in prod apparently.)
-    setChangeMeToRerender(!changeMeToRerender)
-  }, [skuPath])
-
-  const MultiFamilyUI: React.FC<{      
-    Selector: ComponentType<MultiFamilySelectorProps>
-    selectorOptions: MultiFamilySelectorOptions | undefined
-    itemOptions: ItemSelectorOptions | undefined
-    families: Family[]
-    parent: CategoryNode
-    clx?: string
-  }> = ({
-    Selector,
-    itemOptions,
-    selectorOptions,
-    families,
-    parent,
-    clx=''
-  }) => (
-    <Selector 
-      families={families}
-      parent={parent}
-      clx={clx}
-      itemOptions={itemOptions}
-      selectorOptions={selectorOptions}
-      mediaConstraint={MEDIA_CONSTRAINT}
-      mobile={mobile}
-    />
-  )
-
-  const Buttons: React.FC<{clx?: string}> = observer(({
-    clx=''
-  }) => (cmmc.currentItem ? (
-    <div className={clx}>
-      <AddToCartWidget 
-        item={cmmc.currentItem}
-        onQuantityChanged={onQuantityChanged} 
-        variant={cmmc.cartEmpty ? 'primary' : 'outline'}
-        className={addBtnClx} 
-      />
-      {!cmmc.cartEmpty && checkoutButton}
-    </div>
-  ) : null))
-
-  return (
-    <div className={cn(
-      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center', 
-      r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto',
-      clx,
-    )}>
-      {r.current?.single ? ( 
-        <SingleFamilySelector 
-          {...r.current.single} 
-          mediaConstraint={MEDIA_CONSTRAINT}
-          mobile={mobile} 
-          clx={selectorClx}
-        /> 
-      ) : (r.current?.multi && r.current.families && /* safegaurd for first render, etc. */ (
-        <MultiFamilyUI 
-          {...r.current.multi} 
-          families={r.current.families} 
-          parent={r.current.node}
-          clx={selectorClx}
-        />
-      ))}
-      <Buttons clx={cn(
-        'self-stretch mt-8 flex flex-col items-center gap-3 shrink-0 grow-0',
-        buttonsAreaClx
-      )}/>
-    </div >
-  )
-}
-
-export default CarouselBuyCard

package/components/buy/multi-family/all-variants-carousel.tsx

@@ -1,259 +0,0 @@
-'use client'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import {
-  cn,
-  ApplyTypography,
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  MediaStack,
-} from '@hanzo/ui'
-import type { MultiFamilySelectorProps, LineItem } from '../../../types'
-import { 
-  formatCurrencyValue, 
-  accessItemOptions, 
-  accessMultiSelectorOptions 
-} from '../../../util'
-
-import QuantityIndicator from '../../item-selector/quantity-indicator'
-import { ButtonItemSelector, useCommerce } from '../../..'
-
-const debugBorder = (c: 'r' | 'g' | 'b', disable: boolean = true): string => {
-
-  if (disable) {
-    return ''
-  }
-  switch (c) {
-    case 'r': return ' border border-[#ffaaaa] '
-    case 'g': return ' border border-[#aaffaa] '
-    case 'b': return ' border border-[#aaaaff] '
-  }
-}
-
-const DEFAULT_CONSTRAINT = {w: 250, h: 250}
-
-const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({ 
-  families,
-  parent,
-  clx='',
-  itemClx='',
-  itemOptions,
-  selectorOptions,
-  mediaConstraint=DEFAULT_CONSTRAINT,
-  mobile=false, // not relavant to any children
-}) => {
-   
-  const cmmc = useCommerce()
-  const r = useRef<{
-    api: CarouselApi | undefined 
-    items: LineItem[] 
-    dontRespond: boolean
-    initialIndex: number 
-  } | undefined>(undefined)
-
-
-  const [changeMeToRerender, setChangeMeToRerender] = useState<boolean>(false)
-    // Safe, since Carousel is only render (and this method passed), once the ref is initialized.
-  const setApi = (api: CarouselApi) => { r.current!.api = api }
-  
-  const onSelect = useCallback((emblaApi: CarouselApi) => {
-    if (r.current?.dontRespond) {
-      r.current.dontRespond = false
-      return
-    }
-    const index = emblaApi.selectedScrollSnap()
-    if (index !== -1) {
-      const item = r.current?.items[index]
-      cmmc.setCurrentItem(item?.sku) // (sets currentFamily as well)
-    }
-    if (r.current) {
-      r.current.dontRespond = false  
-    }
-  }, [])
-
-  useEffect(() => {
-
-    const items = families.map((fam) => (fam.products as LineItem[])).flat()
-    const foundIndex = cmmc.currentItem ? items.findIndex((item) => (cmmc.currentItem!.sku == item.sku)) : -1
-    r.current = {
-      items,
-      initialIndex: foundIndex === -1 ? 0 : foundIndex,
-      dontRespond: false,
-      api: undefined
-    }
-
-    setChangeMeToRerender(!changeMeToRerender)
-
-      // This responds to the swatch clicks
-    return reaction(
-      () => (cmmc.currentItem),
-      (item) => {
-        if (r.current && r.current.api) {
-          const index = r.current.items.findIndex((_item: LineItem) => (_item.sku === item?.sku))  
-          if (index && index !== -1) {
-              // no need to sync family, since ui only allows selecting within a family            
-            r.current.dontRespond = true
-            r.current.api.scrollTo(index) 
-          }
-        }
-      }  
-    )
-  }, [])
-
-  const Header: React.FC<{clx?: string}> = observer(({
-    clx=''
-  }) => {
-
-    const { showParentTitle, parentByline: parentBylineMode  } = accessMultiSelectorOptions(selectorOptions)
-    const { familyTitle, showFamilyByline } = accessItemOptions(itemOptions)
-
-    const parentTitleDisplay = showParentTitle ? parent.label : undefined
-    const parentBylineDisplay = (parentBylineMode === 'own-line') ? parent.subNodesLabel : ''
-
-    const title = (familyTitle === 'none' ? 
-      undefined 
-      : 
-      (familyTitle === 'long' ? 
-        cmmc.currentFamily?.title 
-        : 
-        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
-      ) 
-    )
-
-    let titleLinePrefix = (parentBylineMode === 'none' || parentBylineMode ===  'own-line') ? '' : (parent.subNodesLabel ?? '')
-    if (titleLinePrefix.length > 0 && title && parentBylineMode === 'comma-sep') {
-        titleLinePrefix += ', '
-    }
-    else if (titleLinePrefix.length > 0 && title && parentBylineMode === 'colon-sep') {
-        titleLinePrefix += ': '
-    }
-    const titleDisplay = title ? (titleLinePrefix + title) : undefined
-    const bylineDisplay = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
-
-    return (
-      <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
-        {parentTitleDisplay && <h4>{parentTitleDisplay}</h4>}
-        {parentBylineDisplay && <h4>{parentBylineDisplay}</h4>}
-        {titleDisplay && <h4>{titleDisplay}</h4>}
-        {bylineDisplay && (<h6 >{bylineDisplay}</h6>)}
-      </ApplyTypography>
-    )
-  })
-
-  const ItemInfo: React.FC<{
-    clx?: string
-    labelClx?: string
-  }> = observer(({
-    clx='',
-    labelClx=''
-  }) => {
-
-    const {
-      showPrice, 
-      showQuantity,
-      showFamilyInOption,
-      showByline,
-    } = accessItemOptions(itemOptions)
-    
-    const optionLabel = () => (
-      showFamilyInOption ? 
-        (cmmc.currentItem!.familyTitle + ', ' + cmmc.currentItem!.optionLabel) 
-        : 
-        cmmc.currentItem!.optionLabel 
-    )
-
-    return (cmmc.currentItem && (
-      <ApplyTypography className={cn('flex flex-col items-center [&>*]:!m-0 !gap-1 ', clx)}>
-        <div className={
-          'flex items-center gap-1 [&>*]:!m-0 ' + 
-          debugBorder('g') + 
-          (showFamilyInOption ? 'flex-col' : 'flex-row')
-        }>
-          <h6 className={cn('font-semibold', labelClx)}>
-            {optionLabel() + (showPrice && !showFamilyInOption ? ',' : '')}
-          </h6>
-          <div className={
-            'flex items-center gap-1 [&>*]:!m-0 flex-row ' +  debugBorder('b') +  
-            (showFamilyInOption ? 'w-full justify-between' : '')
-          }>
-            {showPrice && (<p>{formatCurrencyValue(cmmc.currentItem.price)}</p>)}
-            {showQuantity && (
-              <QuantityIndicator 
-                item={cmmc.currentItem} 
-                clx='h-[22px] ml-4' 
-                iconClx='fill-foreground'
-                digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
-              />
-            )}
-          </div>
-        </div>
-        {showByline && cmmc.currentItem.byline && (<p>{cmmc.currentItem.byline}</p>)}
-      </ApplyTypography>
-    ))
-  })
-
-  const Swatches: React.FC<{
-    clx?: string
-  }> = observer(({
-    clx=''
-  }) => {
-    const { showItemSwatches } = accessMultiSelectorOptions(selectorOptions)
-    if (
-      !showItemSwatches || 
-      !cmmc.currentFamily 
-      //|| cmmc.currentFamily.products.length === 1
-    ) {
-      return null
-    }
-    return <ButtonItemSelector
-      items={cmmc.currentFamily.products as LineItem[]}
-      selectedItemRef={cmmc}
-      selectSku={cmmc.setCurrentItem.bind(cmmc)}
-      clx={clx}
-      options={{
-        buttonType: 'image',
-        horizButtons: true
-      }}      
-    />
-  })
-
-  return ( 
-    <div className={cn('w-full flex flex-col items-center', clx)}>
-      <Header />
-      {r.current && /* Only render once we've set the ref fields, or else bad things! */ (
-        <Carousel 
-          options={{loop: true, startIndex: r.current.initialIndex}} 
-          className={'w-full px-2' + debugBorder('r')} 
-          onCarouselSelect={onSelect} 
-          setApi={setApi}
-        >
-          <CarouselContent>
-          {r.current.items.map((item) => (
-            <CarouselItem key={item.sku} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
-              <MediaStack media={item} constrainTo={mediaConstraint} className='my-4'/>
-            </CarouselItem>
-          ))}
-          </CarouselContent>
-          {r.current.items.length > 1 && (<>
-            <CarouselPrevious className='left-1'/>
-            <CarouselNext className='right-1'/>
-          </>)}
-        </Carousel>
-      )}
-      <div className='flex flex-col items-center justify-start'>
-        <ItemInfo labelClx='!text-base font-medium'/>
-        <Swatches clx='mt-2'/> 
-      </div>
-    </div>
-  )
-}
-
-export {
-  AllVariantsCarousel as default 
-}

package/components/buy/multi-family/family-carousel/index.tsx

@@ -1,75 +0,0 @@
-'use client'
-import React, { useCallback, useRef } from 'react'
-
-import {
-  cn,
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-} from '@hanzo/ui'
-import type { MultiFamilySelectorProps } from '../../../../types'
-
-import FamilySlide from './slide'
-import { FamilyCarouselState } from './state'
-
-import { useCommerce } from '../../../..'
-
-const FamilyCarousel: React.FC<MultiFamilySelectorProps> = ({ 
-  families,
-  clx='',
-  itemClx='',
-  itemOptions, 
-  selectorOptions,
-  mediaConstraint={w: 250, h: 250},
-  mobile=false,
-}) => {
-
-  const cmmc = useCommerce()
-  const stateRef = useRef<FamilyCarouselState>(
-    new FamilyCarouselState(families, cmmc.setCurrentItem.bind(cmmc))
-  )
-
-  const onSelect = useCallback((emblaApi: CarouselApi) => {
-    const index = emblaApi.selectedScrollSnap()
-    if (index !== -1) {
-      stateRef.current.setCurrentFamily(families[index].id)
-    }
-  }, [stateRef.current])
-
-  return ( 
-    <Carousel 
-      className={cn('px-2', clx)}
-      options={{loop: false}}  
-      onCarouselSelect={onSelect} 
-    >
-      <CarouselContent>
-      {families.map((family) => {
-        const slideState = stateRef.current.getSlideState(family.id)
-        if (!slideState) {
-          throw new Error(`FamilyCarousel: no SlideState for family '${family.id}'!`)
-        }
-        return (
-          <CarouselItem key={family.id} className='p-2 flex flex-col justify-center items-center'>
-            <FamilySlide 
-              family={family}
-              selectedItemRef={slideState}
-              selectSku={slideState.selectSku.bind(slideState)}
-              mediaConstraint={mediaConstraint}
-              options={itemOptions}
-              mobile={mobile}
-              clx={itemClx}
-            />
-          </CarouselItem>
-        )}
-      )}
-      </CarouselContent>
-      <CarouselPrevious className='left-1'/>
-      <CarouselNext className='right-1'/>
-    </Carousel>
-  )
-}
-
-export default FamilyCarousel

package/components/buy/multi-family/family-carousel/slide.tsx

@@ -1,82 +0,0 @@
-'use client'
-import React from 'react'
-
-import {
-  ApplyTypography,
-  MediaStack,
-  cn,
-} from '@hanzo/ui'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
-import { ButtonItemSelector } from '../../..'
-const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
-  family: Family
-  mediaConstraint: Dimensions
-  clx?: string
-  mobile?: boolean,
-  options?: ItemSelectorOptions
-}> = ({
-  family,
-  selectedItemRef,
-  selectSku,
-  mediaConstraint: cnst = {w: 200, h: 200},
-  clx='',
-  mobile=false,
-  options={}
-}) => {
-
-  const titleSpec = 'title' in options ? options.title : 'short'
-  const showByline = 'showByline' in options ? options.showByline : true
-  const title = titleSpec === 'long' ? 
-    family.title 
-    : 
-    (
-      titleSpec === 'short' ? 
-        (family.titleShort ? family.titleShort : family.title ) 
-        : 
-        undefined
-    )
-
-  const byline = (showByline && family.byline) ? family.byline : undefined
-  /*
-  let byline: string | undefined = undefined
-  if (showByline) {
-    if (family.byline) {
-        // if byline names another field thats a function, call it
-      if (family.byline in family && typeof (family as any)[family.byline] === 'function') {
-        byline = (family as any)[family.byline]() as string
-      }
-      else {
-        byline = family.byline
-      }
-    }
-  }
-  */
-
-  return (
-    <div className={cn('flex flex-col items-center gap-4', clx)}  data-vaul-no-drag >
-      {title && (
-        <ApplyTypography className='flex flex-col items-center !gap-1 [&>*]:!m-0' data-vaul-no-drag >
-          <h6 className='font-bold text-lg'>{title}</h6>
-          {byline && (<p className={''}>{byline}</p>)}
-        </ApplyTypography>
-      )}
-      <MediaStack 
-        media={selectedItemRef.item!} 
-        constrainTo={cnst}
-      />
-      <ButtonItemSelector
-        items={family.products as LineItem[]}
-        selectedItemRef={selectedItemRef}
-        selectSku={selectSku}
-        scrollable={false}
-        mobile={mobile}
-        options={options}
-        itemClx='text-sm'
-      />
-    </div>
-  )
-}
-
-export default FamilySlide