diff --git a/packages/commerce/components/add-to-cart-widget.tsx b/packages/commerce/components/add-to-cart-widget.tsx index 2d789cb6..7cea576c 100644 --- a/packages/commerce/components/add-to-cart-widget.tsx +++ b/packages/commerce/components/add-to-cart-widget.tsx @@ -66,8 +66,9 @@ const AddToCartWidget: React.FC<{ ) } - const inc = () => { + const inc = (event: React.MouseEvent) => { item.increment() + event.stopPropagation() // in case we're part of a larger selection UI sendGAEvent('add_to_cart', { items: [{ item_id: item.sku, @@ -91,8 +92,9 @@ const AddToCartWidget: React.FC<{ }) } - const dec = () => { + const dec = (event: React.MouseEvent) => { item.decrement() + event.stopPropagation() // in case we're part of a larger selection UI sendGAEvent('remove_from_cart', { items: [{ item_id: item.sku, diff --git a/packages/commerce/components/cart/cart-accordian.tsx b/packages/commerce/components/cart/cart-accordian.tsx deleted file mode 100644 index 5bd28020..00000000 --- a/packages/commerce/components/cart/cart-accordian.tsx +++ /dev/null @@ -1,59 +0,0 @@ -'use client' -import React from 'react' -import { observer } from 'mobx-react-lite' - -import { ChevronRight } from 'lucide-react' - -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from '@hanzo/ui/primitives' - -import { formatCurrencyValue } from '../../util' -import { useCommerce } from '../../context' - -import CartPanel from './cart-panel' - -const CartAccordian: React.FC<{ - icon?: React.ReactNode - className?: string -}> = observer(({ - icon, - className='' -}) => { - const cmmc = useCommerce() - return ( - - - -
- {icon} -
- Order Total: - Your Order -
-
-
-
{formatCurrencyValue(cmmc.promoAppliedCartTotal)}
- -
- - - - - - - ) -}) - -export default CartAccordian diff --git a/packages/commerce/components/cart/cart-panel/index.tsx b/packages/commerce/components/cart/cart-panel/index.tsx index a30d69c4..ad3837c8 100644 --- a/packages/commerce/components/cart/cart-panel/index.tsx +++ b/packages/commerce/components/cart/cart-panel/index.tsx @@ -1,17 +1,17 @@ 'use client' -import React, { Suspense, type PropsWithChildren } from 'react' +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 { formatCurrencyValue } from '../../../util' import { sendFBEvent, sendGAEvent } from '../../../util/analytics' import CartLineItem from './cart-line-item' -import PromoCode from './promo-code' -import type { LineItem } from '../../../types' +import TotalArea from './total-area' const CartPanel: React.FC { const cmmc = useCommerce() + + useLayoutEffect(() => { + if (!cmmc) { + return + } + if (!cmmc.cartEmpty && !cmmc.currentItem) { + cmmc.setCurrentItem(cmmc.cartItems[0].sku) + } + // return mobx disposer + return reaction(() => ( + cmmc.cartItems.length + ), + (itemCount) => { + if (itemCount > 0) { + cmmc.setCurrentItem(cmmc.cartItems[0].sku) + } + }) + }, []) + if (!cmmc) { return
} @@ -97,45 +116,19 @@ const CartPanel: React.FC ))} )} -
- {showPromoCode && ( - - - - )} - {(showShipping || showPromoCode) && ( -
-

- Subtotal - {cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)} -

- {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && ( -

- Promo Discount - -{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)} -

- )} - {showShipping && ( -

- Shipping - Free Global Shipping -

- )} -
- )} -

- TOTAL - {formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)} -

-
+ )) - const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter) + const scrolling = (cmmc.cartItems.length > scrollAfter) return ( -
+
{children} - {scrolling() ? ( + {scrolling ? ( diff --git a/packages/commerce/components/cart/cart-panel/total-area.tsx b/packages/commerce/components/cart/cart-panel/total-area.tsx new file mode 100644 index 00000000..2c84ebca --- /dev/null +++ b/packages/commerce/components/cart/cart-panel/total-area.tsx @@ -0,0 +1,60 @@ +'use client' +import React, { Suspense } from 'react' +import { observer } from 'mobx-react-lite' + +import { cn } from '@hanzo/ui/util' + +import { formatCurrencyValue } from '../../../util' +import PromoCode from './promo-code' +import { useCommerce } from '../../../context' + +const TotalArea: React.FC<{ + showPromoCode?: boolean + showShipping?: boolean + clx?: string +}> = observer(({ + showPromoCode=false, + showShipping=false, + clx +}) => { + + const cmmc = useCommerce() + + return ( +
+ {showPromoCode && ( + + + + )} + {(showShipping || showPromoCode) && ( +
+

+ Subtotal + {cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)} +

+ {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && ( +

+ Promo Discount + -{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)} +

+ )} + {showShipping && ( +

+ Shipping + Free Global Shipping +

+ )} +
+ )} +

+ TOTAL + + {formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)} + +

+
+ ) +}) + +export default TotalArea diff --git a/packages/commerce/components/index.ts b/packages/commerce/components/index.ts index 12e6f4db..b23c3a80 100644 --- a/packages/commerce/components/index.ts +++ b/packages/commerce/components/index.ts @@ -1,7 +1,6 @@ export { default as AddToCartWidget } from './add-to-cart-widget' export { default as CarouselBuyCard } from './buy/carousel-buy-card' -export { default as CartAccordian } from './cart/cart-accordian' export { default as CartPanel } from './cart/cart-panel' export { default as Icons } from './Icons' diff --git a/packages/commerce/package.json b/packages/commerce/package.json index 58185eca..0e252ed3 100644 --- a/packages/commerce/package.json +++ b/packages/commerce/package.json @@ -1,6 +1,6 @@ { "name": "@hanzo/commerce", - "version": "7.1.20", + "version": "7.1.34", "description": "e-commerce framework.", "publishConfig": { "registry": "https://registry.npmjs.org/", @@ -37,7 +37,7 @@ }, "peerDependencies": { "@hanzo/auth": "^2.4.10", - "@hanzo/ui": "^3.8.21", + "@hanzo/ui": "^3.8.31", "@hookform/resolvers": "^3.3.4", "@radix-ui/react-radio-group": "^1.1.3", "firebase": "^10.8.0", diff --git a/packages/ui/blocks/components/image-block.tsx b/packages/ui/blocks/components/image-block.tsx index eb1507f2..99f101f6 100644 --- a/packages/ui/blocks/components/image-block.tsx +++ b/packages/ui/blocks/components/image-block.tsx @@ -75,6 +75,7 @@ const ImageBlockComponent: React.FC ) } + // TODO use constraint else if (!specified('mobile-no-scale')) { if (props?.style?.width === 'auto' && typeof props.style.height === 'number' ) { props.style.height = props.style.height *.75 diff --git a/packages/ui/blocks/components/video-block.tsx b/packages/ui/blocks/components/video-block.tsx index c3d50a3f..c8af8e88 100644 --- a/packages/ui/blocks/components/video-block.tsx +++ b/packages/ui/blocks/components/video-block.tsx @@ -51,7 +51,7 @@ const VideoBlockComponent: React.FC & { - showChevron?: boolean; + showChevron?: boolean + headerClx?: string } const AccordionTrigger = React.forwardRef< React.ElementRef, AccordionTriggerProps ->(({ showChevron, className, children, ...props }, ref) => ( - +>(({ showChevron, headerClx, className, children, ...props }, ref) => ( + index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '' + currentStep >= index ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '', + //currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '' )} /> ))} diff --git a/packages/ui/primitives/video-player.tsx b/packages/ui/primitives/video-player.tsx index 0017ada1..82f5ee53 100644 --- a/packages/ui/primitives/video-player.tsx +++ b/packages/ui/primitives/video-player.tsx @@ -12,7 +12,7 @@ const VideoPlayer = React.forwardRef( }, ref) => { return ( -