@libreapps/commerce 7.5.1

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

@@ -0,0 +1,197 @@
+'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 type { Dimensions } from '@libreapps/ui/types'
+
+import {
+  ApplyTypography,
+  type CarouselOptions,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  MediaStack,
+} from '@libreapps/ui/primitives'
+
+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} clx='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

@@ -0,0 +1,40 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+import { Slider } from '@libreapps/ui/primitives'
+
+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} 
+      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
+      trackBgClx='bg-level-3'
+      rangeBgClx='bg-level-3'
+      thumbSlidingClx='bg-muted-2' 
+      defaultValue={[0]} 
+      min={0}
+      max={numStops - 1} 
+      step={1} 
+      value={[index]}
+      onValueChange={onValueChange}
+    />
+  )
+}
+
+export default ItemCarouselSlider

package/components/item-selector/index.ts

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

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

@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { type LucideProps } from 'lucide-react'
+
+import { cn } from '@libreapps/ui/util'
+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

@@ -0,0 +1,91 @@
+'use client'
+import React, { useState } from 'react'
+
+import { ToggleGroup, ToggleGroupItem} from "@libreapps/ui/primitives"
+import { cn } from '@libreapps/ui/util'
+
+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
+  buttonClx?: string
+  itemClx?: string
+  mobile?: boolean
+  tabSize?: string
+  show?: 'image' | 'label' | 'image-and-label'
+}> = ({
+  levelNodes,
+  mutator,
+  multiple=false,
+  buttonClx='',
+  itemClx='',
+  className='',
+  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 roundedToSpread: any = {}
+  if (multiple) {
+    roundedToSpread.rounded = 'xl'   
+  }
+
+  const val = multiple ? 
+    (mutator as StringArrayMutator).get() 
+    : 
+    (mutator as StringMutator).get()
+
+  return (
+    <ToggleGroup 
+      type={multiple ? 'multiple' : 'single'} 
+      value={val}
+      variant='default'
+      size={tabSize ? tabSize : (mobile ? 'sm' : 'default')}
+      onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
+      className={className}
+      {...roundedToSpread}
+    >
+    {levelNodes.map((treeNode, index) => {
+      const roundedToSpread: any = {}
+      if (!multiple) {
+        roundedToSpread.rounded = 'none'   
+        if (index === 0) { roundedToSpread.rounded = 'llg' }
+        else if (index === levelNodes.length - 1) { roundedToSpread.rounded = 'rlg' } 
+      }
+      return (
+        <ToggleGroupItem 
+          key={treeNode.skuToken}
+          value={treeNode.skuToken} 
+          disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} 
+          aria-label={`Select ${treeNode.label}`}
+          {...roundedToSpread}
+          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

@@ -0,0 +1,31 @@
+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/dist/components/Icons.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    shoppingCart: any;
+    menu: any;
+    chevronLeft: any;
+    chevronRight: any;
+    spinner: any;
+    check: any;
+    plus: any;
+    minus: any;
+    chevronDown: any;
+    chevronsLeft: any;
+    chevronsRight: any;
+    placeholder: any;
+    trash: any;
+    search: any;
+    barcode: any;
+};
+export default _default;

package/dist/components/Icons.js

@@ -0,0 +1,19 @@
+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
+};
+//# sourceMappingURL=Icons.js.map

package/dist/components/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACR,MAAM,cAAc,CAAA;AAErB,eAAe;IACb,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;CACjB,CAAA"}

package/dist/components/add-to-cart-widget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LineItem } from '../types';
+declare 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;
+}>;
+export default AddToCartWidget;

package/dist/components/add-to-cart-widget.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button, buttonVariants } from '@libreapps/ui/primitives';
+import { cn } from '@libreapps/ui/util';
+import Icons from './Icons';
+import { sendFBEvent, sendGAEvent } from '../util/analytics';
+const AddToCartWidget = observer(({ item, variant = 'primary', disabled = false, className = '', buttonClx = '', onQuantityChanged }) => {
+    const reactionDisposer = useRef(undefined);
+    useEffect(() => {
+        if (onQuantityChanged) {
+            reactionDisposer.current = reaction(() => (item.quantity), (quantity, previous) => {
+                onQuantityChanged(item.sku, quantity, previous);
+            });
+        }
+        return () => {
+            if (reactionDisposer.current) {
+                reactionDisposer.current();
+            }
+        };
+    }, []);
+    const ROUNDED_VAL = 'lg';
+    // no need to safelist, since its used widely
+    const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `;
+    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 (_jsx("div", { className: cn('flex flex-row items-stretch' + ROUNDED_CLX + (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className), children: _jsx("div", { className: 'text-sm flex items-center cursor-default ' + digitClx, children: item.quantity }) }));
+    }
+    const inc = (event) => {
+        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) => {
+        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 ? (_jsxs("div", { className: cn('flex flex-row items-stretch justify-between ', 
+        // should match 'xs' and 'default' button heights
+        (ghost || priSmaller ? 'h-8' : 'h-9'), ROUNDED_CLX, (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), (outline ? 'border border-muted' : ''), className), children: [_jsx(Button, { "aria-label": 'Remove a ' + item.title + ' from the cart', size: ghost || priSmaller ? 'xs' : 'default', variant: primary || priSmaller ? 'primary' : 'ghost', rounded: ghost ? 'full' : ROUNDED_VAL, 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
+                ), onClick: dec, children: (item.quantity > 1) ? (_jsx(Icons.minus, { className: iconClx, "aria-hidden": 'true' })) : (_jsx(Icons.trash, { className: iconClx, "aria-hidden": 'true' })) }, 'left'), _jsxs("div", { className: cn('grow-0 shrink-0 flex items-center cursor-default xs:px-2', priSmaller || ghost ? 'text-xs' : 'text-sm', digitClx), children: [item.quantity, ghost ? '' : ' in Bag'] }), _jsx(Button, { "aria-label": 'Add another ' + item.title + ' to the cart', size: ghost || priSmaller ? 'xs' : 'default', variant: primary || priSmaller ? 'primary' : 'ghost', rounded: ghost ? 'full' : ROUNDED_VAL, 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, children: _jsx(Icons.plus, { className: iconClx, "aria-hidden": 'true' }) }, 'right')] })) : (_jsxs(Button, { "aria-label": 'Add a ' + item.title + ' to cart', size: ghost || priSmaller ? 'xs' : 'default', variant: ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline'), rounded: ROUNDED_VAL, className: cn(buttonClx, className), onClick: inc, children: [_jsx("span", { className: 'm1-1', children: "Add" }), _jsx(Icons.plus, { className: 'h-5 w-5 ml-1', "aria-hidden": 'true' })] })));
+});
+export default AddToCartWidget;
+//# sourceMappingURL=add-to-cart-widget.js.map

package/dist/components/add-to-cart-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-to-cart-widget.js","sourceRoot":"","sources":["../../components/add-to-cart-widget.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/buy-card.d.ts

@@ -0,0 +1,30 @@
+import React, { type ComponentType } from 'react';
+import type { ItemSelectorProps, ItemSelectorCompProps } from '../../types';
+declare 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;
+}>;
+export default BuyCard;