Bag as accordion on mobile checkout

packages/commerce/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

packages/commerce/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'>