@libreapps/commerce 7.5.1

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

@@ -0,0 +1,242 @@
+'use client'
+import React, { 
+  useRef, 
+  useEffect, 
+  type ComponentType, 
+  useState 
+} from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@libreapps/ui/util'
+
+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

@@ -0,0 +1,261 @@
+'use client'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@libreapps/ui/util'
+
+import {
+  ApplyTypography,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  MediaStack,
+} from '@libreapps/ui/primitives'
+
+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} clx='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

@@ -0,0 +1,77 @@
+'use client'
+import React, { useCallback, useRef } from 'react'
+
+import { cn } from '@libreapps/ui/util'
+
+import {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@libreapps/ui/primitives'
+
+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

@@ -0,0 +1,83 @@
+'use client'
+import React from 'react'
+
+import {
+  ApplyTypography,
+  MediaStack
+} from '@libreapps/ui/primitives'
+import type { Dimensions } from '@libreapps/ui/types'
+
+import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
+import { ButtonItemSelector } from '../../..'
+import { cn } from '@libreapps/ui/util'
+
+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