@hanzo/commerce 6.2.2 → 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/package.json

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