cmmc: sig rewrite of CartPanel

ui: adjusted tw border radii to be more reasonable
hanzoai · Mar 27, 2024 · 26f97e2 · 26f97e2
1 parent 66a2517
commit 26f97e2
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 37 deletions.
diff --git a/packages/commerce/components/cart-accordian.tsx b/packages/commerce/components/cart-accordian.tsx
@@ -19,18 +19,16 @@ const CartAccordian: React.FC<{
   icon?: React.ReactNode
   className?: string
 }> = observer(({
-  icon: Icon,
+  icon,
   className=''
 }) => { 
-
   const cmmc = useCommerce()
-
   return (
     <Accordion type="single" collapsible className={className}>
       <AccordionItem value="cart" className='w-full border-b-0'>
         <AccordionTrigger className='!no-underline group flex justify-between'>
-          <div className='flex gap-1 items-center'>
-            {Icon}
+          <div className='flex gap-0 items-center'>
+            {icon}
             <h5 className='text-sm sm:text-xl grow'>
               <span className='group-data-[state=open]:hidden' >Order Total:</span>
               <span className='group-data-[state=closed]:hidden' >Your Order</span>
@@ -42,7 +40,13 @@ const CartAccordian: React.FC<{
           </div>
         </AccordionTrigger>
         <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel className='w-full'/>
+          <CartPanel 
+            className='w-full '
+            scrollAfter={4}
+            scrollHeightClx='h-[350px]'
+            itemClx='mt-2'
+            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
+          />
         </AccordionContent>
       </AccordionItem>
     </Accordion>

diff --git a/packages/commerce/components/cart-panel/index.tsx b/packages/commerce/components/cart-panel/index.tsx
@@ -2,7 +2,7 @@
 import React, { type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Button } from '@hanzo/ui/primitives'
+import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import { useCommerce } from '../../service/context'
@@ -12,19 +12,30 @@ import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 import CartLineItem from './cart-line-item'
 
 const CartPanel: React.FC<PropsWithChildren & {
+    /** fix size and scroll after 'scrollAfter items in teh cart. */
+  scrollAfter?: number
+  scrollHeightClx?: string
+  imgSizePx?: number
   className?: string
   itemClx?: string
   listClx?: string
+  noItemsClx?: string
   totalClx?: string
+  buttonClx?: string
     /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
     /** If provided, 'children' is rendered above the items. eg, a heading. */
   children,
+  scrollAfter=5,
+  scrollHeightClx='h-[70vh]',
+  imgSizePx=40,
   className='',
   itemClx='',
   listClx='',
+  noItemsClx='',
   totalClx='',
+  buttonClx='',
   handleCheckout,
 }) => {
 
@@ -33,7 +44,6 @@ const CartPanel: React.FC<PropsWithChildren & {
     return <div />
   }
 
-    // TODO: this should be called in the client code
   const _handleCheckout = () => {
     sendGAEvent('begin_checkout', {
       currency: 'USD',
@@ -59,25 +69,41 @@ const CartPanel: React.FC<PropsWithChildren & {
     handleCheckout && handleCheckout()
   }
 
+  const Main: React.FC = () => (<>
+    {cmmc.cartEmpty ? (
+      <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
+    ) : (<>
+    {cmmc.cartItems.map((item) => (
+      <CartLineItem imgSizePx={imgSizePx} item={item} key={`mobile-${item.sku}`} className={cn('mb-2', itemClx)}/>
+    ))}
+    </>)}
+    <p className={cn('mt-6 text-right border-t pt-1', totalClx)}>
+      <span>TOTAL:&nbsp;</span>
+      <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span>
+    </p>
+  </>)
+
+  const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)
+
   return (
-    <div className={cn('border p-4 rounded-lg', className)}>
+    <div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling() ? scrollHeightClx : 'h-auto')}>
       {children}
-      <div className={cn('mt-2 w-full', listClx)}>
-      {cmmc.cartEmpty ? (
-        <p className='text-center mt-4'>No items in cart</p>
-      ) : (<>
-        {cmmc.cartItems.map((item) => (<>
-          <CartLineItem imgSizePx={26} item={item} key={`mobile-${item.sku}`} className={cn('md:hidden mb-2', itemClx)}/>
-          <CartLineItem imgSizePx={40} item={item} key={`non-mobile-${item.sku}`} className={cn('hidden md:flex mb-3', itemClx)}/>
-        </>))}
-      </>)}
-      </div>
-      <p className={cn('mt-6 text-right border-t pt-1', totalClx)}>
-        <span>TOTAL:&nbsp;</span>
-        <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span>
-      </p>
+      {scrolling() ? (
+        <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
+          <Main />
+        </ScrollArea>
+      ) : (
+        <div className={cn('mt-2 w-full', listClx)}>
+          <Main />
+        </div>
+      )}
       {handleCheckout && !cmmc.cartEmpty && (
-        <Button onClick={_handleCheckout} variant='primary' rounded='lg' className='mt-12 mx-auto w-full sm:max-w-[220px]' >
+        <Button 
+          onClick={_handleCheckout} 
+          variant='primary' 
+          rounded='lg' 
+          className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
+        >
           Checkout
         </Button>
       )}

diff --git a/packages/commerce/package.json b/packages/commerce/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.9.0",
+  "version": "5.0.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.3.2",
-    "@hanzo/ui": "^3.0.18",
+    "@hanzo/ui": "^3.0.19",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/packages/ui/primitives/drawer.tsx b/packages/ui/primitives/drawer.tsx
@@ -42,12 +42,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn('fixed left-0 right-0 bottom-0 ',
-        'mt-24 flex h-[80%] flex-col rounded-t-[10px] border bg-background',
+        'mt-24 flex flex-col h-[80%] rounded-t-[10px] pt-6 border bg-background',
         className
       )}
       {...props}
     >
-      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-level-1' />
+      <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-2 shrink-0' />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

diff --git a/packages/ui/tailwind/tailwind.config.hanzo-preset.js b/packages/ui/tailwind/tailwind.config.hanzo-preset.js
@@ -112,13 +112,13 @@ export default {
         sm: "calc(var(--radius) - 4px)",
       */ 
       none: '0px',
-      sm: '0.125rem',
-      DEFAULT: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      '2xl': '1rem',
-      '3xl': '1.5rem',
+      sm: '0.25rem',
+      DEFAULT: '0.5rem',
+      md: '0.5rem',
+      lg: '0.75rem',
+      xl: '1rem',
+      '2xl': '1.5rem',
+      '3xl': '2rem',
       full: '9999px',
     },
     borderSpacing: spacing,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml