@hanzo/commerce 4.3.0 → 4.3.2

package/components/buy-item/buy-item-button-wrapper.tsx

@@ -0,0 +1,27 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import BuyItemPopup from './buy-item-popup'
+import BuyItemMobileDrawer from './buy-item-mobile-drawer'
+
+const BuyItemButtonWrapper: React.FC<{
+  skuPath: string
+  desktopTrigger: React.ReactNode
+  mobileTrigger: React.ReactNode
+  popupClx?: string
+}> = ({
+  skuPath,
+  desktopTrigger,
+  mobileTrigger,
+  popupClx=''
+}) => (<>
+  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
+    {desktopTrigger}
+  </BuyItemPopup>
+  <BuyItemMobileDrawer skuPath={skuPath} trigger={mobileTrigger} />
+</>
+)
+
+
+
+export default BuyItemButtonWrapper

package/components/buy-item/select-category-item-card.tsx

@@ -40,7 +40,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       const item = category.products[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
         </div>
       )
     }

package/components/checkout-panel/close-button.tsx

@@ -15,9 +15,9 @@ const CloseButton: React.FC<{
       variant='ghost'
       size='icon'
       onClick={onClose}
-      className={className}
+      className={'group ' + className}
     >
-      <ChevronLeft className='w-5 h-5'/>
+      <ChevronLeft className='w-5 h-5 group-hover:scale-110 transition-scale transition-duration-300'/>
     </Button>    
 )
 

package/components/checkout-panel/icons/bag-icon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill="currentColor" viewBox='0 0 20 23' {...props}>
+    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
+  </svg>
+)
+
+export default BagIcon

package/components/checkout-panel/index.tsx

@@ -3,7 +3,15 @@
 import { useState }  from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Dialog, DialogPortal, Separator, Toaster } from '@hanzo/ui/primitives'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Dialog,
+  DialogPortal,
+  Toaster
+} from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useAuth } from '@hanzo/auth/service'
 import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
@@ -14,6 +22,8 @@ import CartPanel from '../cart-panel'
 import Payment from './payment'
 import CloseButton from './close-button'
 import StepIndicator from './step-indicator'
+import BagIcon from './icons/bag-icon'
+import { formatPrice, useCommerce } from '../..'
 
 const CheckoutPanel: React.FC<{
   open: boolean
@@ -24,6 +34,7 @@ const CheckoutPanel: React.FC<{
 }) => {
 
   const auth = useAuth()
+  const cmmc = useCommerce()
   
   const [step, setStep] = useState<number>(1)
   const [orderId, setOrderId] = useState<string>()
@@ -75,10 +86,24 @@ const CheckoutPanel: React.FC<{
         >
           <div id='GRID' className='grid  grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
             <div className='bg-background flex flex-row items-start justify-end'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 py-8 sm:py-20 '>
-                <CloseButton onClose={onClose} className='absolute top-2 left-4 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
-                <AuthWidget hideLogin className='flex md:hidden absolute top-4 right-4 '/>
-                <CartPanel noCheckout className='md:border md:border-muted-2 mt-10 w-full max-w-[550px]'/>
+              <div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-10 pb-0 md:pb-9'>
+                <CloseButton onClose={onClose} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
+                <AuthWidget hideLogin className='flex md:hidden absolute top-3 right-3'/>
+                <CartPanel noCheckout className='border border-muted-2 mt-10 w-full max-w-[550px] hidden md:flex'/>
+
+                <Accordion type="single" collapsible className='flex items-center justify-center py-2 w-full md:hidden'>
+                  <AccordionItem value="cart" className='w-full border-b-0'>
+                    <AccordionTrigger className='!no-underline'>
+                      <div className='flex gap-4 items-center'>
+                        <BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/>
+                        <h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <CartPanel noCheckout className='border-none w-full'/>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
               </div>
             </div>
             <div className='bg-level-1 flex flex-row items-start justify-start'>

package/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
+export { default as BuyItemButtonWrapper } from './buy-item/buy-item-button-wrapper'
 export { default as BuyItemButton } from './buy-item/buy-item-button'
 export { default as BuyItemCard } from './buy-item/buy-item-card'
 export { default as BuyItemPopup } from './buy-item/buy-item-popup'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",