@hanzo/commerce 7.1.27 → 7.1.29

package/components/add-to-cart-widget.tsx

@@ -68,7 +68,7 @@ const AddToCartWidget: React.FC<{
 
   const inc = (event: React.MouseEvent<HTMLElement>) => {
     item.increment()
-    event.stopPropagation()
+    event.stopPropagation() // in case we're part of a larger selection UI
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -94,7 +94,7 @@ const AddToCartWidget: React.FC<{
 
   const dec = (event: React.MouseEvent<HTMLElement>) => {
     item.decrement()
-    event.stopPropagation()
+    event.stopPropagation() // in case we're part of a larger selection UI
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,

package/components/cart/cart-accordian.tsx

@@ -10,6 +10,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
 
 import { formatCurrencyValue } from '../../util'
 import { useCommerce } from '../../context'
@@ -18,15 +19,23 @@ import CartPanel from './cart-panel'
 
 const CartAccordian: React.FC<{
   icon?: React.ReactNode
-  className?: string
+  clx?: string
+  triggerClx?: string
+  panelClx?: string
+  scrollAfter: number
+  scrollHeightClx: string
 }> = observer(({
   icon,
-  className=''
+  clx='',
+  panelClx='',
+  triggerClx='',
+  scrollAfter,
+  scrollHeightClx
 }) => { 
   const cmmc = useCommerce()
   return (
-    <Accordion type="single" collapsible className={className}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
+    <Accordion type="single" collapsible className={clx}>
+      <AccordionItem value="cart" className={'w-full border-b-0 ' + triggerClx}>
         <AccordionTrigger className='!no-underline group flex justify-between'>
           <div className='flex gap-0 items-center'>
             {icon}
@@ -42,9 +51,9 @@ const CartAccordian: React.FC<{
         </AccordionTrigger>
         <AccordionContent className='data-[state=open]:mb-4'>
           <CartPanel 
-            className='w-full '
-            scrollAfter={4}
-            scrollHeightClx='h-[350px]'
+            className={cn('w-full', panelClx)} 
+            scrollAfter={scrollAfter}
+            scrollHeightClx={scrollHeightClx}
             itemClx='mt-2'
             totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
             showShipping

package/components/cart/cart-panel/cart-line-item.tsx

@@ -10,7 +10,6 @@ import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../add-to-cart-widget'
 import { useCommerce } from '../../../context'
-import { computed } from 'mobx'
 
 const DEF_IMG_SIZE=40
 
@@ -41,8 +40,6 @@ const CartLineItem: React.FC<{
   const cmmc = useCommerce()
   const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
 
-  //const selected = item.sku === cmmc.currentItem?.sku
-
   return (
     <div 
       className={cn(

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

@@ -1,19 +1,18 @@
 'use client'
 import React, { useLayoutEffect, type PropsWithChildren } from 'react'
+import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
+import type { LineItem } from '../../../types'
 import { useCommerce } from '../../../context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'
 import TotalArea from './total-area'
 
-import type { LineItem } from '../../../types'
-import { autorun, reaction } from 'mobx'
-
 const CartPanel: React.FC<PropsWithChildren & {
     /** fix size and scroll after 'scrollAfter items in teh cart. */
   scrollAfter?: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "7.1.27",
+  "version": "7.1.29",
   "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",