@hanzo/commerce 5.1.3 → 6.1.0

package/components/{buy-item/select-category-item-card.tsx → buy/_to_deprecate_select-category-item-card.tsx}

@@ -7,40 +7,39 @@ import { Skeleton } from '@hanzo/ui/primitives'
 
 import type { ItemSelector, LineItem } from '../../types'
 
-import AddToCartWidget from '../add-to-cart-widget'
-import CategoryItemRadioSelector from '../category-item-radio-selector'
-import CategoryItemScrollSelector from '../category-item-scroll-selector'
+import AddToCartWidget from './add-to-cart-widget'
+import RadioItemSelector from '../select/radio-selector'
 import { formatCurrencyValue } from '../../util'
 
 const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
   isLoading?: boolean
   mobile?: boolean
-  noTitle?: boolean
+  title?: string
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = /* NOT observer */({
-  category,
+  items,
   selectedItemRef: selItemRef,
   selectSku,
   className, 
   isLoading = false, 
   mobile = false, 
-  noTitle = false,
+  title,
   onQuantityChanged,
   ...props
 }) => {
 
-  const soleOption = category.products.length === 1
+  const soleOption = items.length === 1
 
   const SelectProductComp: React.FC<{ className?: string }> = ({ 
     className = '' 
   }) => {
 
-    const mobilePicker = (mobile || category.products.length > 6) 
+    const mobilePicker = (mobile || items.length > 6) 
     if (soleOption) {
-      const item = category.products[0] as LineItem
+      const item = items[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatCurrencyValue(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.optionLabel + ', ' + formatCurrencyValue(item.price)}</p>
         </div>
       )
     }
@@ -50,25 +49,16 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
         'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
         className
       )}>
-        {!noTitle && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
-        {mobilePicker ? (
-          <CategoryItemScrollSelector
-            category={category}
-            selectedItemRef={selItemRef}  
-            selectSku={selectSku}
-            itemClx='h-10 border-b px-4'
-            outerClx='min-w-pr-80 h-[180px]' // 80% of 65% parent
-          />
-        ) : (
-          <CategoryItemRadioSelector 
-            category={category}
-            selectedItemRef={selItemRef}  
-            selectSku={selectSku}
-            groupClx='mt-2'
-            showQuantity={false}
-            itemClx='flex flex-row gap-2.5 items-center'
-          />
-        )}
+        {title && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
+        <RadioItemSelector 
+          items={items}
+          selectedItemRef={selItemRef}  
+          selectSku={selectSku}
+          clx='mt-2'
+          showQuantity={false}
+          scrollList={false}
+          itemClx='flex flex-row gap-2.5 items-center'
+        />
       </div>
     )
   }
@@ -90,7 +80,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
     isLoading ? (<Skeleton className={'h-8 w-full ' + className} />) : (
 
       <div className={cn('text-center flex flex-col justify-start items-center', className)}>
-        <p className='font-heading text-center'>{category.title}</p>
+        <p className='font-heading text-center'>{title}</p>
       </div>
 
   )))
@@ -103,13 +93,13 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       )} 
       {...props}
     >
-      {!noTitle && (<TitleArea className='grow pt-3 mb-0' />)}
+      {title && (<TitleArea className='grow pt-3 mb-0' />)}
       <SelectProductComp className='w-pr-65' />
       <AddToCartComp className='w-pr-65' />
     </div>
   ) : (
     <div className={cn('', className)} {...props}>
-      {!noTitle && (<TitleArea className='' />)}
+      {title && (<TitleArea className='' />)}
       <div className='flex flex-col justify-start items-center gap-4'>
         <SelectProductComp />
         <AddToCartComp className='' />

package/components/{select-category-item-panel.tsx → buy/_to_deprecate_select-category-item-panel.tsx}

@@ -6,17 +6,20 @@ import { observer } from 'mobx-react-lite'
 import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
-import type { ItemSelector } from '../types'
-import { formatCurrencyValue } from '../util'
-import { Icons } from './Icons'
+import type { Category, ObsLineItemRef, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+import { Icons } from '../Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
-import CategoryItemRadioSelector from './category-item-radio-selector'
-import CategoryItemScrollSelector from './category-item-scroll-selector'
+import RadioItemSelector from '../select/radio-selector'
 
 const SelectCategoryItemPanel: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & ItemSelector &   
+  React.HTMLAttributes<HTMLDivElement> &   
   {
+    category: Category
+    selectedItemRef: ObsLineItemRef
+    selectSku: (sku: string) => void 
+    showQuantity?: boolean
     isLoading?: boolean
     mobile?: boolean
   }
@@ -49,7 +52,7 @@ const SelectCategoryItemPanel: React.FC<
         <div className={cn('w-full border rounded-xl p-6 ')}>
           <div className={cn('w-full aspect-square  relative')}>
             <Image
-              src={category.img}
+              src={category.img.src}
               fill
               sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
               alt={category.title}
@@ -88,25 +91,16 @@ const SelectCategoryItemPanel: React.FC<
           <h6 className='text-center font-semibold'>Available options</h6>
           <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
-        {mobilePicker ? (
-          <CategoryItemScrollSelector
-            category={category}
+          <RadioItemSelector 
+            items={category.products as LineItem[]}
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
             showQuantity={showQuantity}
-            itemClx='h-10 border-b px-4'
-            outerClx='mb-4 h-[180px]'
-          />
-        ) : (
-          <CategoryItemRadioSelector 
-            category={category}
-            selectedItemRef={selectedItemRef}  
-            selectSku={selectSku}
-            showQuantity={showQuantity}
-            groupClx='block columns-2 gap-4'
+                      scrollList={false}
+
+            clx='block columns-2 gap-4'
             itemClx='flex flex-row gap-2 items-center mb-2.5'
           />
-        )}
       </div>
     )
   })
@@ -132,7 +126,7 @@ const SelectCategoryItemPanel: React.FC<
         </h3>
         {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
-            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
+            {(soleOption ? '' : (selectedItemRef.item.optionLabel + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
           </h6>
         ) : ''}
       </div>

package/components/{buy-item/buy-item-popup.tsx → buy/_unused_buy-popup.tsx_}

@@ -12,9 +12,9 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import BuyItemCard from './buy-item-card'
+import BuyCard from './buy-item-card'
 
-const BuyItemPopup: React.FC<PropsWithChildren & {
+const BuyPopup: React.FC<PropsWithChildren & {
   skuPath: string
   triggerClx?: string  
   popupClx?: string
@@ -42,10 +42,10 @@ const BuyItemPopup: React.FC<PropsWithChildren & {
       </PopoverTrigger>
       <PopoverContent className={cn('relative flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
         <PopoverClose className='absolute z-20 right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <BuyItemCard skuPath={skuPath} onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
+        <BuyCard skuPath={skuPath} onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
       </PopoverContent>
     </Popover>
   )
 }
 
-export default BuyItemPopup
+export default BuyPopup

package/components/{add-to-cart-widget.tsx → buy/add-to-cart-widget.tsx}

@@ -5,9 +5,9 @@ import { observer } from 'mobx-react-lite'
 import { Button, toast, type ButtonSizes } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { Icons } from './Icons'
-import type { LineItem } from '../types'
-import { sendFBEvent, sendGAEvent } from '../util/analytics'
+import { Icons } from '../Icons'
+import type { LineItem } from '../../types'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
@@ -27,8 +27,8 @@ const AddToCartWidget: React.FC<{
   onQuantityChanged
 }) => {
 
-  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
-  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-bold text-primary-fg '
+  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1 opacity-50'
+  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-semibold text-primary-fg '
 
   if (disabled) {
     return (
@@ -44,12 +44,14 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old + 1) 
     }
+    /*
     if (old === 0) {
       toast(`Added ${item.title} to your bag.`)
     }
     else {
       toast(`Changed quantity to ${old + 1} for ${item.title}.`)
     }
+    */
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -79,12 +81,14 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old - 1) 
     }
+    /*
     if (old === 1) {
       toast(`Removed ${item.title} from your bag.`)
     }
     else {
       toast(`Changed quantity to ${old - 1} for ${item.title}.`)
     }
+    */
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,
@@ -115,7 +119,7 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}

package/components/buy/buy-button.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
+
+import BuyTriggerWrapper from './buy-trigger-wrapper'
+import { cn } from '@hanzo/ui/util'
+
+const BuyButton: React.FC<PropsWithChildren & {
+  skuPath: string
+  variant? : ButtonVariants 
+  size?: ButtonSizes  
+  /* rounded?: ButtonRounded // TODO: wait for version bump*/
+  className?: string 
+  mobile?: boolean
+}> = ({
+  skuPath,
+  variant,
+  size,
+  children,
+  className='',
+  mobile=false
+}) => (
+  <BuyTriggerWrapper skuPath={skuPath} mobile={mobile}
+    trigger={  <Button size={size} variant={variant} className={cn(className, '')}>{children}</Button> }
+  />
+)
+
+
+
+export default BuyButton

package/components/buy/buy-card.tsx

@@ -0,0 +1,267 @@
+'use client'
+import React, { useRef, useEffect, type ComponentType } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+
+import type { 
+  SelectedPaths, 
+  ItemSelectorProps, 
+  ItemSelectorCompProps,
+  LineItem, 
+  Category, 
+  ProductTreeNode, 
+} from '../../types'
+
+import { useCommerce } from '../../service/context'
+import { getFacetValuesMutator, ObsStringMutator } from '../../util'
+
+import LevelNodesWidget from '../level-nodes-widget'
+import AddToCartWidget from './add-to-cart-widget'
+import ItemMedia from '../item/item-media'
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+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
+  catWidgetClx?: string
+  addWidgetClx?: string
+
+  selector: ComponentType<ItemSelectorProps>
+  selectorProps?: ItemSelectorCompProps 
+
+    /** Show all items from all sibling categories
+     * If skuPath defines a Category, the first of it's items will 
+     * be selected. The facet widget will just select a the first 
+     * item in the chosen Category without changings the overall set
+     * of choices. */
+  allVariants?: boolean
+
+  categoryTabAs?: '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='',
+  catWidgetClx='',
+  addWidgetClx='',
+  selector: Selector,
+  selectorProps={
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+  },
+  categoryTabAs='image-and-label', 
+  showItemMedia=true,
+  allVariants=false,
+  mobile=false,
+  onQuantityChanged,
+}) => {
+
+  const cmmc = useCommerce()
+  const inst = useRef<{
+    level: number,
+    requestedCat : Category | undefined
+    requestedNode: ProductTreeNode | undefined
+    currentCat: ObsStringMutator
+    disposers: IReactionDisposer[]
+  } | undefined>(undefined)
+
+
+  useEffect(() => {
+
+    let requestedCat = cmmc.getCategory(skuPath) 
+    let requestedNode = requestedCat ? undefined : cmmc.getNodeAtPath(skuPath)
+    let initialCat = undefined
+    const toks = skuPath.split('-')
+    const level = toks.length - 1
+    if (level === 0) {
+      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
+    }
+    const paths: SelectedPaths = {}
+    for (let l = 1; l <= level; l++ ) {
+      paths[l] = [toks[l]]   
+    } 
+    if (requestedCat) { 
+      if (allVariants && level >= 2) {
+          // select all siblings of requestedCat.
+          // ie, go one level back
+        delete paths[level]
+        initialCat = requestedCat
+        requestedCat = undefined
+        requestedNode = cmmc.getNodeAtPath(toks.slice(0, -1).join('-'))
+      }
+    }
+    else {
+        // select siblings paths
+      if (allVariants) {
+        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
+      }
+        // Actually select the the first cat at the cat level, 
+      else {
+        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
+      }
+    }
+
+    const selectedCats = cmmc.selectPaths(paths)
+    initialCat = initialCat ? initialCat : (requestedCat ? requestedCat : selectedCats[0])
+    cmmc.setCurrentItem(initialCat.products[0].sku)
+    const currentCat = new ObsStringMutator(initialCat!.id.split('-').pop()!)
+
+    inst.current = {
+      level,
+      requestedCat,
+      requestedNode,
+      currentCat,
+      disposers: []
+    }
+
+    if (!allVariants) {
+      inst.current?.disposers.push(reaction(
+        () => {
+          const cats = cmmc.selectedCategories
+          return (cats.length > 0) ? cats[0].id : undefined
+        },
+        (catId) => {
+          if (catId && catId !== cmmc.currentItem?.categoryId) {
+            const cat = cmmc.getCategory(catId)
+            cmmc.setCurrentItem(cat?.products[0].sku)
+          }
+        }
+      ))
+    }
+
+    return () => {
+      inst.current?.disposers.forEach((d) => {d()})
+    }
+
+  }, [])
+
+  const setCatPath = (pathValue: string | null) => {
+    if (inst.current?.currentCat.get() !== pathValue) {
+      inst.current?.currentCat.set(pathValue) 
+    }
+    const found = cmmc.selectedItems.find((item) => (item.categoryId.endsWith(pathValue!)))
+    if (found) { 
+      cmmc.setCurrentItem(found.sku) 
+    }
+  }
+
+  const selectSku = (sku: string) => {
+    cmmc.setCurrentItem(sku)
+    const pathValue = cmmc.currentItem?.categoryId.split('-').pop()!
+    if (pathValue !== inst.current?.currentCat.get()) {
+      inst.current?.currentCat.set(pathValue) 
+    }
+  }
+
+  const catTitle = inst.current?.requestedCat ? inst.current.requestedCat.title : cmmc.selectedCategories?.[0]?.title
+
+  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
+    allVariants ? cmmc.selectedItems : cmmc.selectedCategories[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>
+      <LevelNodesWidget
+        className={cn(
+          'grid gap-0 ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
+          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px]',
+          (scroll ? 'shrink-0' : ''),
+          catWidgetClx  
+        )} 
+        mobile={mobile}
+        mutator={allVariants ? 
+          {
+            get: () => (inst.current!.currentCat.s),
+            set: setCatPath
+          }
+          : 
+          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={categoryTabAs}
+      />
+    </>)} 
+    {!inst.current?.requestedNode && catTitle && (
+      <TitleArea title={catTitle} clx=''/>
+    )}
+    {(cmmc.currentItem && showItemMedia) && (
+      <ItemMedia item={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+    )} 
+    {itemsToShow && (
+      <Selector 
+        items={itemsToShow}
+        selectedItemRef={cmmc}
+        selectSku={selectSku}
+        {...selectorProps}
+        scrollList={scroll}
+        showCategory={selectorProps.showCategory ? 
+          selectorProps.showCategory
+          :
+          (allVariants && !inst.current?.requestedCat)
+        }
+      />  
+    )}
+    {(cmmc.currentItem) && (
+      <AddToCartWidget 
+        size='default' 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
+      />
+    )} 
+    </div >
+  )
+})
+
+export default BuyCard

package/components/buy/buy-drawer.tsx

@@ -0,0 +1,89 @@
+'use client'
+import React, { useState, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  Button,
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { getUISpecFromPath } from '../../util'
+
+import BuyCard from './buy-card'
+import RadioItemSelector from '../select/radio-selector'
+import ImageItemSelector from '../select/image-selector'
+import CarouselItemSelector from '../select/carousel-selector'
+
+const BuyDrawer: React.FC<{
+  skuPath: string
+  trigger: ReactNode
+  triggerClx?: string  
+  drawerClx?: string
+  cardClx?: string
+  mobile?: boolean
+}> = ({
+  skuPath,
+  trigger,
+  triggerClx='',
+  drawerClx='',
+  cardClx='',
+  mobile=false
+}) => {
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
+    //if (oldV === 0 && newV === 1) {
+    //  setTimeout(() => {setOpen(false)}, 150)
+    //}
+  }
+
+  const spec = getUISpecFromPath(skuPath) ?? {
+    selector: 'radio',
+    allVariants: false
+  }
+
+  const selector = spec.selector === 'radio' ? RadioItemSelector :
+    (spec.selector === 'image' ? ImageItemSelector : CarouselItemSelector)
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} >
+      <DrawerTrigger asChild className={triggerClx}>
+        {trigger}
+      </DrawerTrigger>
+      <DrawerContent 
+        className={cn('rounded-t-xl z-[52] mt-6 pb-12 h-auto min-h-[35vh] pt-6 md:max-w-[550px] md:mx-auto', drawerClx)}
+        overlayClx='z-[51]'
+      >
+        <BuyCard 
+          skuPath={skuPath} 
+          scrollAfter={spec.selector === 'carousel' ? 999 : undefined}
+          mobile={mobile} 
+          onQuantityChanged={onQuantityChanged} 
+          clx={cn('w-full', cardClx)}
+          selector={selector}
+          selectorProps={{soleItemClx:'mb-3'}}
+          showItemMedia={spec.selector !== 'carousel'}
+          categoryTabAs='label'
+          allVariants={spec.allVariants}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={() => {setOpen(false)}}
+          className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
+        >
+          <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
+        </Button>    
+
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default BuyDrawer

package/components/buy/buy-trigger-wrapper.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+
+import BuyDrawer from './buy-drawer'
+
+const BuyTriggerWrapper: React.FC<{
+  skuPath: string
+  trigger: React.ReactNode
+  mobileTrigger?: React.ReactNode
+  mobile?: boolean
+}> = ({
+  skuPath,
+  trigger,
+  mobileTrigger,
+  mobile
+}) => (
+  <BuyDrawer skuPath={skuPath} trigger={trigger} mobile={mobile}/>
+)
+
+export default BuyTriggerWrapper