From 51a7dfbe21f4aa1cf1c99b90b71948650806aa08 Mon Sep 17 00:00:00 2001 From: artem ash Date: Sun, 16 Jun 2024 19:03:35 -0700 Subject: [PATCH] checkout / cart improvements --- .../components/add-to-cart-widget.tsx | 2 +- .../components/buy/carousel-buy-card.tsx | 5 +--- .../cart/cart-panel/cart-line-item.tsx | 24 +++++++-------- .../components/cart/cart-panel/index.tsx | 6 ++-- .../components/cart/cart-panel/promo-code.tsx | 6 ++-- packages/commerce/package.json | 2 +- packages/ui/package.json | 3 +- packages/ui/primitives/index.ts | 3 ++ packages/ui/primitives/input.tsx | 2 +- packages/ui/primitives/tooltip.tsx | 30 +++++++++++++++++++ pnpm-lock.yaml | 3 ++ 11 files changed, 61 insertions(+), 25 deletions(-) create mode 100644 packages/ui/primitives/tooltip.tsx diff --git a/packages/commerce/components/add-to-cart-widget.tsx b/packages/commerce/components/add-to-cart-widget.tsx index bd403f33..2d789cb6 100644 --- a/packages/commerce/components/add-to-cart-widget.tsx +++ b/packages/commerce/components/add-to-cart-widget.tsx @@ -139,7 +139,7 @@ const AddToCartWidget: React.FC<{
{item.quantity}{ghost ? '' : ' in Bag'} diff --git a/packages/commerce/components/buy/carousel-buy-card.tsx b/packages/commerce/components/buy/carousel-buy-card.tsx index 6f91d2fd..eeaadbc5 100644 --- a/packages/commerce/components/buy/carousel-buy-card.tsx +++ b/packages/commerce/components/buy/carousel-buy-card.tsx @@ -122,10 +122,7 @@ const CarouselBuyCard: React.FC<{ if (peek.role === 'single-family') { const sort = (): 'none' | 'asc' | 'desc' => { - if (!uiSpec.singleFamily?.options) { - return 'none' - } - const options = uiSpec.singleFamily.options + const options = uiSpec.singleFamily?.options ?? {} const showSlider = 'showSlider' in options ? options.showSlider! : true return ('sort' in options) ? options.sort! diff --git a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx index 69cb91c5..72039ef9 100644 --- a/packages/commerce/components/cart/cart-panel/cart-line-item.tsx +++ b/packages/commerce/components/cart/cart-panel/cart-line-item.tsx @@ -41,27 +41,27 @@ const CartLineItem: React.FC<{ const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined return ( -
-
{itemClicked && itemClicked(item)}} - > - {/* 1px gap between image and border for better emphasis w small images */} -
+
{itemClicked && itemClicked(item)}} + > +
{item.img ? ( ) : ( // placeholder so things align
)} -
{renderTitle(item.title)}
- + {item.quantity > 1 && ({'@' + formatCurrencyValue(item.price)})}
diff --git a/packages/commerce/components/cart/cart-panel/index.tsx b/packages/commerce/components/cart/cart-panel/index.tsx index 9009fc80..a30d69c4 100644 --- a/packages/commerce/components/cart/cart-panel/index.tsx +++ b/packages/commerce/components/cart/cart-panel/index.tsx @@ -97,13 +97,14 @@ const CartPanel: React.FC ))} )} +
{showPromoCode && ( )} {(showShipping || showPromoCode) && ( -
+

Subtotal {cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)} @@ -122,10 +123,11 @@ const CartPanel: React.FC )} -

+

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

+
)) const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter) diff --git a/packages/commerce/components/cart/cart-panel/promo-code.tsx b/packages/commerce/components/cart/cart-panel/promo-code.tsx index 0a71cfee..67ef6f6f 100644 --- a/packages/commerce/components/cart/cart-panel/promo-code.tsx +++ b/packages/commerce/components/cart/cart-panel/promo-code.tsx @@ -68,7 +68,7 @@ const PromoCode = observer(() => { } return ( -
+
@@ -78,7 +78,7 @@ const PromoCode = observer(() => { render={({ field }) => ( - + )} @@ -86,7 +86,7 @@ const PromoCode = observer(() => { {codeAccepted ? ( ) : ( - + )}
diff --git a/packages/commerce/package.json b/packages/commerce/package.json index dd79cfd3..58185eca 100644 --- a/packages/commerce/package.json +++ b/packages/commerce/package.json @@ -1,6 +1,6 @@ { "name": "@hanzo/commerce", - "version": "7.1.4", + "version": "7.1.20", "description": "e-commerce framework.", "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/packages/ui/package.json b/packages/ui/package.json index 0a483914..9e6a862c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@hanzo/ui", - "version": "3.8.21", + "version": "3.8.24", "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.", "publishConfig": { "registry": "https://registry.npmjs.org/", @@ -66,6 +66,7 @@ "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.6", "@splinetool/react-spline": "^2.2.6", "@splinetool/runtime": "^1.0.75", "@tailwindcss/container-queries": "^0.1.1", diff --git a/packages/ui/primitives/index.ts b/packages/ui/primitives/index.ts index ea044ddc..18339711 100644 --- a/packages/ui/primitives/index.ts +++ b/packages/ui/primitives/index.ts @@ -169,6 +169,9 @@ export { TabsContent } from './tabs' +export * from './tooltip' + + export { default as ActionButton } from './action-button' export { default as ApplyTypography, type TypographySize} from './apply-typography' export { default as AspectRatio } from './aspect-ratio' diff --git a/packages/ui/primitives/input.tsx b/packages/ui/primitives/input.tsx index 08c8a91b..2d31afd1 100644 --- a/packages/ui/primitives/input.tsx +++ b/packages/ui/primitives/input.tsx @@ -15,7 +15,7 @@ const Input = React.forwardRef( className={cn( 'flex h-10 w-full rounded-md border border-muted-3 bg-inherit px-3 py-2 text-sm ring-offset-background ' + 'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-2 ' + - 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' + + 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 ' + 'first-letter:disabled:cursor-not-allowed disabled:opacity-50', className )} diff --git a/packages/ui/primitives/tooltip.tsx b/packages/ui/primitives/tooltip.tsx new file mode 100644 index 00000000..57c9595b --- /dev/null +++ b/packages/ui/primitives/tooltip.tsx @@ -0,0 +1,30 @@ +'use client' + +import * as React from 'react' +import * as TooltipPrimitive from '@radix-ui/react-tooltip' + +import { cn } from '../util' + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b19982e..b984de30 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -478,6 +478,9 @@ importers: '@radix-ui/react-toggle-group': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.0.6 + version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@splinetool/react-spline': specifier: ^2.2.6 version: 2.2.6(@splinetool/runtime@1.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)