checkout / cart improvements (#104)

packages/commerce/components/add-to-cart-widget.tsx

@@ -139,7 +139,7 @@ const AddToCartWidget: React.FC<{
       </Button>
         <div className={cn(
           'grow-0 shrink-0 flex items-center cursor-default xs:px-2',
-          priSmaller ? 'text-xs' : 'text-sm',
+          priSmaller || ghost ? 'text-xs' : 'text-sm',
           digitClx
         )}>
           {item.quantity}{ghost ? '' : ' in Bag'}

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!

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 (
-    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-      <div 
-        className={
-          'flex flex-row justify-between items-center gap-1 ' + 
-          (itemClicked && !selected ? 'cursor-pointer ' : 'cursor-default ') 
-        } 
-        onClick={() => {itemClicked && itemClicked(item)}}
-      >
-        {/* 1px gap between image and border for better emphasis w small images */}
-        <div className={selected ? 'border-foreground p-[1px] border rounded-sm' : 'p-[2px]'}>
+    <div 
+      className={cn(
+        'flex flex-col justify-start items-start text-sm font-sans',
+        'border border-background rounded-sm p-1', 
+        selected ? 'border-foreground' : '',
+        (itemClicked && !selected ? 'cursor-pointer hover:!border-muted-4' : 'cursor-default '), 
+        className
+      )}
+      onClick={() => {itemClicked && itemClicked(item)}}
+    >
+      <div className='flex flex-row justify-between items-center gap-1' >
         {item.img ? (
           <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
         ) : ( // placeholder so things align
           <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
         )}
-        </div>
         <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
+          <AddToCartWidget variant='minimal' item={item} />
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>

packages/commerce/components/cart/cart-panel/index.tsx

@@ -97,13 +97,14 @@ const CartPanel: React.FC<PropsWithChildren & {
       />
     ))}
     </>)}
+    <div className={totalClx}> 
     {showPromoCode && (
       <Suspense>
         <PromoCode/>
       </Suspense>
     )}
     {(showShipping || showPromoCode) && (
-      <div className='flex flex-col gap-1 py-2 border-t'>
+      <div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
         <p className='flex justify-between'>
           <span className='text-muted-1'>Subtotal</span>
           <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
@@ -122,10 +123,11 @@ const CartPanel: React.FC<PropsWithChildren & {
         )}
       </div>
     )}
-    <p className={cn('border-t py-2 flex justify-between', totalClx)}>
+    <p className={cn('border-t py-2 flex justify-between')}>
       TOTAL
       <span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
     </p>
+    </div>
   </>))
 
   const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)

packages/commerce/components/cart/cart-panel/promo-code.tsx

@@ -68,7 +68,7 @@ const PromoCode = observer(() => {
   }
 
   return (
-    <div className='flex flex-col gap-2 border-t py-2'>
+    <div className='flex flex-col gap-2 border-t py-1'>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(applyPromoCode)}>
           <div className='flex gap-2 items-center'>
@@ -78,15 +78,15 @@ const PromoCode = observer(() => {
               render={({ field }) => (
                 <FormItem className='w-full'>
                   <FormControl>
-                    <Input {...field} placeholder='Discount or invite code' onInput={removePromoCode}/>
+                    <Input {...field} className='h-9' placeholder='Discount or invite code' onInput={removePromoCode}/>
                   </FormControl>
                 </FormItem>
               )}
             />
             {codeAccepted ? (
               <Check/>
             ) : (
-              <Button variant='outline' className='!w-fit !min-w-0 font-inter'>Apply</Button>
+              <Button variant='outline' className='!w-fit !min-w-0 font-inter text-muted text-sm'>Apply</Button>
             )}
           </div>
         </form>

packages/commerce/package.json

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

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",

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'

packages/ui/primitives/input.tsx

@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         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
         )}

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<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-floating overflow-hidden rounded-sm border bg-level-1 px-2 py-1.5 text-sm text-muted shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }