@hanzo/commerce 7.7.0 → 7.7.2

package/components/item-selector/button.tsx

@@ -1,213 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-
-import {
-  Label,
-  RadioGroup,
-  ScrollArea,
-  cn,
-  MediaStack,
-} from '@hanzo/ui'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import type { ItemSelectorProps, LineItem } from '../../types'
-import { accessItemOptions, formatCurrencyValue } from '../../util'
-
-import QuantityIndicator from './quantity-indicator'
-
-const DEFAULT_CONSTRAINT = {h: 36, w: 72} // // Apple suggest 42px for clickability
-
-// `ImageDef.rounded` is a corner of the radius scale, spelled by whoever wrote
-// the catalog. It used to be pasted straight into a class — `rounded-${...}` —
-// and Tailwind reads source text, so no such rule was ever generated: setting
-// `rounded: 'full'` produced LESS rounding than leaving it unset, because the
-// truthy branch handed back a class name with nothing behind it while the
-// default branch at least said `rounded-sm`. Writing the scale out is what makes
-// the extractor see it. Anything off the scale falls back to the default, which
-// is what the old code did by accident for every value.
-const ROUNDED: Record<string, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  '2xl': 'rounded-2xl',
-  '3xl': 'rounded-3xl',
-  full: 'rounded-full',
-}
-
-const ImageRadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
-    item: LineItem,
-    constrainTo: Dimensions  
-  }
->(({ 
-  item,
-  constrainTo,
-  className, 
-  ...props 
-}, ref) => {
-
-  const img = item.optionImg ? item.optionImg : item.img
-
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      data-vaul-no-drag 
-      className={cn(
-        'ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-        'overflow-hidden',
-        (img?.rounded && ROUNDED[img.rounded]) || 'rounded-sm'
-      )}
-      {...props}
-      id={item.sku}
-      value={item.sku}
-    >
-      {img ? (
-        <MediaStack media={{img}} constrainTo={constrainTo} />
-      ) : ( // placeholder so things align
-        <div style={{height: constrainTo.h, width: constrainTo.w}}/>
-      )}
-    </RadioGroupPrimitive.Item>
-  )
-})
-ImageRadioGroupItem.displayName = 'ImageRadioGroupItem'
-
-const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
-  items,
-  selectedItemRef: itemRef,
-  selectSku,
-  clx='',
-  itemClx='',
-  soleItemClx='',
-  scrollable=false,
-  mobile=false,
-  options={}
-}) => {
-
-  const {
-    showPrice, 
-    showQuantity,
-    showFamilyInOption,
-    buttonType,
-    horizButtons,
-    showButtonIfOnlyOne
-  } = accessItemOptions(options)
-
-  const showImage = buttonType !== 'text'
-  const showText = buttonType !== 'image' 
-  const showBoth = buttonType === 'image-and-text' 
-
-  const labelAndPrice = (item : LineItem) => (
-    (showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showPrice ? ((showFamilyInOption ? ': ' : ', ') + formatCurrencyValue(item.price)) : '')
-  )
-
-  const Item: React.FC<{ 
-    item: LineItem
-    selected: boolean
-  }> = observer(({
-    item,
-    selected
-  }) => {
-    
-    const textClx = (selected) ? 'text-accent' : 'text-muted'
-    const cursorClx = (selected) ? 'hover:cursor-default' : 'hover:cursor-pointer' 
-    const justifyClx = (showBoth) ?  '' : 'justify-center'
-      // If no image, the Label must fill the entire button since it has to be
-      // clickable all the way to the border
-    const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2' ) : '' 
-    let bgClx = '' 
-    let borderClx = ''
-    if (scrollable) {
-      borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
-    }
-    else if (!showImage) {
-      borderClx += 'border rounded-lg ' 
-      borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
-      bgClx += 'hover:bg-level-2' 
-    }
-
-    const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
-
-    return (
-      <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
-        <ImageRadioGroupItem 
-          item={item} 
-          constrainTo={DEFAULT_CONSTRAINT} 
-          className={cn(
-            cursorClx,
-            (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
-            showBoth ? 'mr-2' : (showImage ? '' : 'hidden') 
-          )}
-        />
-        <Label htmlFor={item.sku} className={cn(
-          showQuantity ? 'flex items-center' : 'block',
-          textClx, 
-          cursorClx,
-          (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'),
-          (showText ? '' : 'hidden') 
-        )}>
-          <div className={showQuantity ? 'grow' : ''}>{labelAndPrice(item)}</div>
-          {showQuantity && (
-            <QuantityIndicator 
-              item={item} 
-              clx='grow-0 shrink-0 h-[20px] ml-2' 
-              iconClx={selected ? 'fill-foreground' : 'fill-muted'}
-              digitClx='font-semibold text-primary-fg leading-none font-sans text-xxs' 
-            />
-          )}
-        </Label>
-      </div>
-    )
-  })
- 
-  return showButtonIfOnlyOne || items.length > 1 ? (
-    <RadioGroup
-      className={cn(
-        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')),
-        (horizButtons ? 'grid gap-1' : 'flex flex-col'),
-        (mobile && showText) ? 'min-w-pr-50' : '',
-        clx,
-      )}
-      // One column per item, same as the family tabs: the count is data, and
-      // data cannot be a class name. Interpolating it produced a rule only when
-      // the number happened to be 3, because two other files in this package
-      // spell that one literally — so this laid out correctly in a three-option
-      // selector and stacked in every other.
-      style={horizButtons ? { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` } : undefined}
-      onValueChange={selectSku}
-      value={itemRef.item ? itemRef.item.sku : ''}
-      data-vaul-no-drag 
-    >
-    {scrollable ? (
-      <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2' data-vaul-no-drag>
-      {items.map((item) => (
-        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
-      ))}
-      </ScrollArea>
-    ) : (<>
-      {items.map((item) => (
-        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
-      ))}
-    </>)}
-    </RadioGroup>
-  ) : (
-    <div className={cn(showQuantity ? 'flex items-center' : 'block', soleItemClx )}>
-      <div className={showQuantity ? 'grow' : ''}>
-        {labelAndPrice(items[0])}
-      </div>
-        {showQuantity && (
-          <QuantityIndicator item={items[0]} clx='grow-0 shrink-0 font-semibold text-sm leading-none px-2' />
-        )}
-    </div>
-  )
-})
-
-export default ButtonItemSelector

package/components/item-selector/carousel/index.tsx

@@ -1,196 +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 CarouselOptions,
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  MediaStack,
-} from '@hanzo/ui'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import type { ItemSelectorProps, LineItem } from '../../../types'
-import { formatCurrencyValue, accessItemOptions } from '../../../util'
-
-import QuantityIndicator from '../quantity-indicator'
-import ItemCarouselSlider from './slider'
-
-const DEFAULT_CONSTRAINT = {w: 250, h: 250}
-
-interface CarouselItemSelectorPropsExt {
-  constrainTo: Dimensions
-  options?: CarouselOptions 
-    /** Do not show Family and / or Item title and Price */
-  imageOnly?: boolean
-}
-
-const ItemSlide: React.FC<{
-  item: LineItem,
-  constrainTo: Dimensions
-  clx?: string
-}> = ({
-  item,
-  constrainTo,
-  clx=''
-}) => (
-  <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
-    <MediaStack media={item} constrainTo={constrainTo} className='my-4' />
-  </CarouselItem>
-) 
-
-const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
-  items,
-  selectSku,
-  selectedItemRef: itemRef,
-  clx='',
-  itemClx='',
-  options={},
-  ext={
-    options: {loop: true},
-    constrainTo: DEFAULT_CONSTRAINT,
-    imageOnly: false 
-  } satisfies CarouselItemSelectorPropsExt
-}) => {
-
-  const {
-    showPrice, 
-    showQuantity,
-    showFamilyInOption,
-    showByline,
-    showSlider,
-  } = accessItemOptions(options)
-    
-  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
-  const scrollToRef = useRef<((index: number) => void) | undefined>(undefined)
-  const dontRespondRef = useRef<boolean>(false)
-
-  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
-  const setScrollTo = (scrollTo: (index: number) => void) => { scrollToRef.current = scrollTo}
-
-  const carouselOptions = 'options' in ext ? ext.options : undefined
-  const constrainTo = 'constrainTo' in ext ? ext.constrainTo : DEFAULT_CONSTRAINT
-  const imageOnly = 'imageOnly' in ext ? ext.imageOnly : false
-
-  const onSelect = useCallback((emblaApi: CarouselApi) => {
-    if (dontRespondRef.current) {
-      dontRespondRef.current = false
-      return
-    }
-    const index = emblaApi.selectedScrollSnap()
-    if (index !== -1) {
-      selectSku(items[index].sku)
-      if (scrollToRef.current) {
-        scrollToRef.current(index)
-      }
-    }
-    dontRespondRef.current = false
-  }, [scrollToRef.current ])
-
-  useEffect(() => {
-    return reaction(
-      () => (itemRef.item),
-      (item) => {
-        if (elbaApiRef.current) {
-          const index = items.findIndex((el) => (el.sku === item?.sku))  
-          if (index !== -1) {
-            dontRespondRef.current = true
-            elbaApiRef.current.scrollTo(index) 
-          }
-        }
-      }  
-    )
-  }, [])
-
-  const optionLabel = () => (
-    showFamilyInOption ? 
-      (itemRef.item?.familyTitle + ', ' + itemRef.item?.optionLabel) 
-      : 
-      itemRef.item?.optionLabel 
-  )
-
-  const debugBorder = (c: 'r' | 'g' | 'b'): string => {
-     return ''
-
-    switch (c) {
-      case 'r': return ' border border-[#ffaaaa] '
-      case 'g': return ' border border-[#aaffaa] '
-      case 'b': return ' border border-[#aaaaff] '
-    }
-  }
-
-  const onScrollIndexChange = (index: number) => {
-    dontRespondRef.current = true
-    selectSku(items![index].sku)
-    elbaApiRef.current?.scrollTo(index) 
-  }
-
-  return ( 
-    <div className={cn('w-full flex flex-col items-center', clx)}>
-      <Carousel 
-        options={showSlider ? {...carouselOptions, loop: false} : carouselOptions } 
-        className={'w-full px-2' + debugBorder('r')} 
-        onCarouselSelect={onSelect} 
-        setApi={setApi}
-      >
-        <CarouselContent>
-        {items.map((item) => (
-          <ItemSlide key={item.sku} item={item} constrainTo={constrainTo} clx={itemClx} />
-        ))}
-        </CarouselContent>
-        {!showSlider && (<>
-          <CarouselPrevious className='left-1'/>
-          <CarouselNext className='right-1'/>
-        </>)}
-      </Carousel>
-     
-      {(!imageOnly && itemRef.item) && (<>
-        <ApplyTypography className='flex flex-col items-center [&>*]:!m-0 !gap-1 '>
-          <div className={
-            'flex items-center gap-1 [&>*]:!m-0 ' + debugBorder('g') + 
-            (showFamilyInOption ? 'flex-col' : 'flex-row')
-          }>
-            <h6 className='font-semibold'>
-              {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(itemRef.item.price)}</p>)}
-              {showQuantity && (
-                <QuantityIndicator 
-                  item={itemRef.item} 
-                  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 && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
-        </ApplyTypography>
-        {showSlider && items.length > 1 && (
-          <ItemCarouselSlider 
-            clx='mt-5 w-[320px]' 
-            numStops={items.length}  
-            setScrollTo={setScrollTo}
-            onIndexChange={onScrollIndexChange}
-          />
-        )}
-      </>)}
-    </div>
-  )
-})
-
-export {
-  type CarouselItemSelectorPropsExt,
-  CarouselItemSelector as default 
-}

package/components/item-selector/carousel/slider.tsx

@@ -1,37 +0,0 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-
-import {
-  Slider,
-} from '@hanzo/ui'
-const ItemCarouselSlider: React.FC<{
-  clx?: string
-  setScrollTo: (scrollTo: (index: number) => void) => void
-  onIndexChange: (i: number) => void
-  numStops: number
-}> = ({
-  clx='',
-  setScrollTo,
-  onIndexChange,
-  numStops,
-}) => {
-
-  const [index, setIndex] = useState<number>(0)
-  useEffect(() => { setScrollTo(setIndex) }, [setScrollTo])
-
-  const onValueChange = (v: number[]) => { setIndex(v[0]); onIndexChange(v[0]) }
-
-  return ( 
-    <Slider 
-      className={clx}   
-      defaultValue={[0]} 
-      min={0}
-      max={numStops - 1} 
-      step={1} 
-      value={[index]}
-      onValueChange={onValueChange}
-    />
-  )
-}
-
-export default ItemCarouselSlider

package/components/item-selector/index.ts

@@ -1,5 +0,0 @@
-export { default as ButtonItemSelector } from './button'
-export { 
-  default as CarouselItemSelector,
-  type CarouselItemSelectorPropsExt
-} from './carousel'

package/components/item-selector/quantity-indicator.tsx

@@ -1,50 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { type LucideProps } from 'lucide-react'
-
-import {
-  cn,
-} from '@hanzo/ui'
-import type { LineItem } from '../../types'
-
-  // Generalize this.
-const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="currentColor" viewBox='0 0 20 23' {...props}>
-    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
-  </svg>
-)
-
-const QuantityIndicator: React.FC<{
-  item: LineItem
-  clx?: string
-  iconClx?: string
-  digitClx?: string
-}> = observer(({
-  item,
-  clx='',
-  iconClx='',
-  digitClx=''
-}) => {
-
-  if (!item.isInCart) {
-    return <div /> 
-  }
-
-  return (
-    <div className={cn('relative aspect-square flex items-center justify-center', clx)} >
-      <div className={cn(
-        'z-above-content flex flex-col justify-center items-center',
-        'absolute left-0 right-0 top-0 bottom-0',
-        digitClx
-      )}>
-        <div className='h-[1px] w-full' />
-        <div style={{color: 'black' /* tailwind bug */}}>{item.quantity}</div>
-      </div>
-      <BagIcon className={cn('relative -top-[12%] h-full ', iconClx, )} aria-hidden="true" />
-    </div>            
-  )
-}) // -top-[3px] 
-
-export default QuantityIndicator

package/components/node-tabs/index.tsx

@@ -1,90 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-  cn,
-  type ToggleGroupSize,
-} from '@hanzo/ui'
-import type { CategoryNode, StringMutator, StringArrayMutator } from '../../types'
-import NodeImage from './node-image'
-
-const NodeTabs: React.FC<{
-  levelNodes: CategoryNode[]
-  mutator: StringMutator | StringArrayMutator
-  multiple?: boolean
-  className?: string
-  /** Layout the caller computes from data. A column count is a number, and a
-   *  number cannot be a class name — Tailwind reads source text, so a template
-   *  literal never becomes a rule. */
-  style?: React.CSSProperties
-  buttonClx?: string
-  itemClx?: string
-  mobile?: boolean
-  tabSize?: ToggleGroupSize
-  show?: 'image' | 'label' | 'image-and-label'
-}> = ({
-  levelNodes,
-  mutator,
-  multiple=false,
-  buttonClx='',
-  itemClx='',
-  className='',
-  style,
-  mobile=false,
-  tabSize,
-  show='image-and-label'
-}) => {
-
-  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 val = multiple
-    ? (mutator as StringArrayMutator).get()
-    : (mutator as StringMutator).get()
-
-  // The per-item `rounded` that used to ride here named a 5.x variant. The
-  // group owns the segmented look now, so passing it did nothing but say it did.
-  return (
-    <ToggleGroup
-      type={multiple ? 'multiple' : 'single'}
-      value={val}
-      variant='default'
-      size={tabSize ? tabSize : (mobile ? 'sm' : 'default')}
-      onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
-      className={className}
-      // The two type systems meet here. gui types `style` as a native view
-      // style; on web it hands the object straight to the DOM element, and a
-      // `grid-template-columns` written this way arrives as inline CSS
-      // (measured). The cast says which of the two platforms this is.
-      style={style as React.ComponentProps<typeof ToggleGroup>['style']}
-    >
-    {levelNodes.map((treeNode) => (
-      <ToggleGroupItem
-        key={treeNode.skuToken}
-        value={treeNode.skuToken}
-        disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())}
-        aria-label={`Select ${treeNode.label}`}
-        className={buttonClx}
-      >
-        <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
-          {!(show === 'label') && (<NodeImage treeNode={treeNode} />) }
-          {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
-        </span>
-      </ToggleGroupItem>
-    ))}
-    </ToggleGroup>
-  )
-}
-
-export default NodeTabs

package/components/node-tabs/node-image.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import type { CategoryNode } from '../../types'
-
-const ICON_SIZE = 20
-
-const NodeImage: React.FC<{
-  treeNode: CategoryNode
-}> = ({
-  treeNode: {
-    img,
-    imgAR: ar,
-    label
-  }
-}) => {
-
-  if (!img) { return null }
-    // treat as URL
-  return (typeof img === 'string') ? (
-    <Image 
-      src={img as string} 
-      alt={`Toggle ${label}`} 
-      className={'block mr-1 '} 
-      width={ar ?  ar * ICON_SIZE : ICON_SIZE}
-      height={ICON_SIZE}
-    />
-  ) : (img as React.ReactNode) 
-} 
-
-export default NodeImage

package/index.ts

@@ -1,55 +0,0 @@
-export * from './service/context'
-export * from './components'
-  // Impl-dependent, so leave w impl
-export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone'
-export {
-  useSyncSkuParamWithCurrentItem,
-  getFacetValuesMutator,
-  formatCurrencyValue,
-  ProductMediaAccessor,
-  LineItemRef
-} from './util'
-
-export * from './util/selection-ui-specifiers'
-
-// Commerce API client
-export { Commerce, CommerceApiError, hanzoCommerce } from './client'
-export type {
-  CommerceClientConfig,
-  Balance,
-  TierResponse,
-  Transaction,
-  Subscription,
-  Plan,
-  Payment,
-  UsageRecord,
-  Coupon,
-  CouponType,
-  CouponValidateResult,
-  Discount,
-  CheckoutItem,
-  CheckoutSessionRequest,
-  CheckoutSessionResponse,
-  PaymentMethod,
-  PaymentMethodType,
-  Referral,
-  Referrer,
-  Affiliate,
-  CreditGrant,
-} from './client'
-
-// Server-side usage metering (the one way every product meters to commerce)
-export {
-  Metering,
-  DEFAULT_COMMERCE_URL,
-  identityFromHeaders,
-  HEADER_USER_ID,
-  HEADER_ORG_ID,
-} from './metering'
-export type {
-  MeteringConfig,
-  MeteringIdentity,
-  UsageEvent,
-  RecordResult,
-  AuthDecision,
-} from './metering'