@hanzo/commerce 6.2.1 → 6.2.3

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

@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useEffect, type ComponentType } from 'react'
+import React, { useRef, useEffect, type ComponentType, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
@@ -63,6 +63,8 @@ const CarouselBuyCard: React.FC<{
     } 
   } | undefined>(undefined)
 
+  const [changeMeToRerender, setChangeMeToRerender] = useState<boolean>(false)
+
   useEffect(() => {
 
     const peek = cmmc.peek(skuPath)
@@ -83,18 +85,17 @@ const CarouselBuyCard: React.FC<{
 
     if (peek.role === 'single-family') {
 
-      const singleSpec = uiSpec.singleFamily 
-      const Selector: ComponentType<ItemSelectorProps> = 
-        (singleSpec?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector
-      const selOptions = singleSpec?.options
       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,
         Selector,
         selOptions,
         scrollable: !!(items.length > SCROLL.scrollAfter),
-        showItemMedia: singleSpec?.type !== 'carousel'
+        showItemMedia: uiSpec.singleFamily?.type !== 'carousel'
       }
 
       const currItem = peek.item ?? peek.family!.products[0]
@@ -106,7 +107,11 @@ const CarouselBuyCard: React.FC<{
       cmmc.setCurrentItem(currItem.sku)
     }
 
-  }, [])
+      // Must do this since Dialog code takes this comp out of the React shadow DOM
+      // (only in prod apparently.)
+    setChangeMeToRerender(!changeMeToRerender)
+
+  }, [skuPath])
 
   const TitleArea: React.FC<{
     title: string
@@ -200,13 +205,4 @@ const CarouselBuyCard: React.FC<{
   )
 })
 
-/* Above family carousel
-      <TitleArea 
-        title={r.current?.node.label ?? ''} 
-        byline={r.current?.node.subNodesLabel} 
-        clx={'mb-2 '}
-        bylineClx='!text-center font-bold text-muted mt-3'
-      />
-*/
-
 export default CarouselBuyCard

package/components/cart/cart-panel/index.tsx

@@ -83,7 +83,7 @@ const CartPanel: React.FC<PropsWithChildren & {
 
   const Main: React.FC = observer(() => (<>
     {cmmc.cartEmpty ? (
-      <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
+      <p className={cn('text-center my-3', noItemsClx)}>No items</p>
     ) : (<>
     {cmmc.cartItems.map((item) => (
       <CartLineItem

package/components/item-selector/button.tsx

@@ -38,6 +38,7 @@ const ImageRadioGroupItem = React.forwardRef<
   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',
@@ -108,7 +109,7 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
     const outerClx = ['h-10 py-2 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
 
     return (
-      <div className={cn(...outerClx, itemClx )}>
+      <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
         <ImageRadioGroupItem 
           item={item} 
           constrainTo={DEFAULT_CONSTRAINT} 
@@ -147,6 +148,7 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
       )}
       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>

package/components/select-family/family-carousel/slide.tsx

@@ -56,9 +56,9 @@ const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
   */
 
   return (
-    <div className={cn('flex flex-col items-center gap-4', clx)}>
+    <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'>
+        <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.2.1",
+  "version": "6.2.3",
   "description": "e-commerce framework.",
   "type": "module",  
   "publishConfig": {