@hanzo/commerce 4.1.1 → 4.2.0

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

@@ -0,0 +1,24 @@
+'use client'
+import React from 'react'
+
+import { ChevronLeft } from 'lucide-react'
+import { Button } from '@hanzo/ui/primitives'
+
+const CloseButton: React.FC<{
+  onClose: () => void
+  className?: string
+}> = ({
+  onClose,
+  className=''
+}) => (
+    <Button
+      variant='ghost'
+      size='icon'
+      onClick={onClose}
+      className={className}
+    >
+      <ChevronLeft className='w-5 h-5'/>
+    </Button>    
+)
+
+export default CloseButton

package/components/checkout-panel/index.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { useState }  from 'react'
-import { ChevronLeft } from 'lucide-react'
 import { observer } from 'mobx-react-lite'
 
-import { Button, Dialog, DialogPortal, Main, Separator, Toaster } from '@hanzo/ui/primitives'
+import { Dialog, DialogPortal, Separator, Toaster } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useAuth } from '@hanzo/auth/service'
 import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
@@ -13,6 +12,8 @@ import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
 import CartPanel from '../cart-panel'
 import Payment from './payment'
+import CloseButton from './close-button'
+import StepIndicator from './step-indicator'
 
 const CheckoutPanel: React.FC<{
   open: boolean
@@ -24,74 +25,69 @@ const CheckoutPanel: React.FC<{
 
   const auth = useAuth()
   
-  const [currentStep, setCurrentStep] = useState(1)
+  const [step, setStep] = useState<number>(1)
   const [orderId, setOrderId] = useState<string>()
 
-  const step1 = auth.loggedIn ? (
-    <Payment
-      orderId={orderId} 
-      setOrderId={setOrderId}
-      setCurrentStep={setCurrentStep}
-    />
-  ) : (
-    <LoginComponent hideHeader className='max-w-[20rem] mx-auto' inputClassName='border-muted-4'/>
-  )
-
-  const step2 = (
-    <ShippingInfo orderId={orderId} setCurrentStep={setCurrentStep}/>
-  )
-
-  const step3 = <ThankYou/>
+  const steps = {
+    1: {
+      label: 'Payment',
+      element: (
+        auth.loggedIn ? (
+          <Payment
+            orderId={orderId} 
+            setOrderId={setOrderId}
+            setStep={setStep}
+          />
+        ) : (
+          <LoginComponent hideHeader className='max-w-[20rem] mx-auto' inputClassName='border-muted-4'>
+            <h6 className='font-nav'>Please login to proceed</h6>
+          </LoginComponent >
+        )
+    )}
+    , 
+    2: {
+      label: 'Delivery',
+      element: (
+        <ShippingInfo orderId={orderId} setStep={setStep}/>   
+    )}, 
+    3: {
+      label: 'Done!',
+      element: (
+      <ThankYou/>  
+    )}
+  } as Record<number, {label: string, element: JSX.Element}>
 
-  const steps = [step1, step2, step3]
+  const onClose = () => {
+    setStep(1)
+    setOpen(false)
+  }
 
   return (
     <Dialog open={open}>
       <DialogPortal>
-        <div
+        <div id='PORTAL_OUTER'
           className={cn(
-            'fixed grid shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
-            '!max-w-none w-full h-full min-h-screen bg-background z-50'
+            'fixed top-0 pt-[44px] md:pt-[80px] shadow-lg ',
+            'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10',
+            'sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
+            '!max-w-none w-full h-full min-h-screen bg-transparent backdrop-blur-sm z-50'
           )}
         >
-          <Toaster/>  
-          <div className='absolute flex w-full justify-between pt-2 md:pt-5 px-5'>
-            <Button
-              variant='ghost'
-              size='icon'
-              onClick={() => {
-                setCurrentStep(1)
-                setOpen(false)
-              }}
-              className='w-auto h-auto rounded-full bg-level-1 p-2 md:p-4'
-            >
-              <ChevronLeft className='w-5 h-5'/>
-            </Button>    
-            <AuthWidget/>
-          </div>
-
-          <div className='grid grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
-            <div className='flex items-center justify-center py-2'>
-              <CartPanel noCheckout className='border-none mt-10 w-full lg:w-1/2'/>
+          <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>
             </div>
-
-            <div className='bg-level-1'>
-              <Main className='flex flex-col h-full md:h-[calc(100vh-48px)] gap-8 sm:gap-14 max-w-[30rem] w-full mx-auto md:overflow-y-auto px-2 pb-6 md:mt-12'>
-                <div className='flex gap-2 mx-auto items-center text-xxs sm:text-base'>
-                  <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 1 ? 'bg-foreground text-muted-4' : '')}>
-                    <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Payment</div>
-                  </div>
-                  <Separator className='w-[4rem] sm:w-[6rem]'/>
-                  <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 2 ? 'bg-foreground text-muted-4' : '')}>
-                    <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Delivery</div>
-                  </div>
-                  <Separator className='w-[4rem] sm:w-[6rem]'/>
-                  <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 3 ? 'bg-foreground text-muted-4' : '')}>
-                    <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Done!</div>
-                  </div>
-                </div>
-                {steps[currentStep - 1]}
-              </Main>
+            <div className='bg-level-1 flex flex-row items-start justify-start'>
+              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 md:overflow-y-auto px-6 pb-6'>
+                <Toaster/>  
+                <AuthWidget hideLogin className='hidden md:flex absolute top-4 right-4 '/>
+                <StepIndicator steps={steps} currentStep={step} className='flex gap-2 mx-auto items-center text-xxs sm:text-base' />
+                {steps[step].element}
+              </div>
             </div>
           </div>
         </div>

package/components/checkout-panel/payment/index.tsx

@@ -21,11 +21,11 @@ const contactFormSchema = z.object({
 })
 
 const Payment: React.FC<{
-  setCurrentStep: (currentStep: number) => void
+  setStep: (s: number) => void
   orderId?: string
   setOrderId: (orderId?: string) => void
 }> = observer(({
-  setCurrentStep,
+  setStep,
   orderId,
   setOrderId
 }) => {
@@ -89,7 +89,7 @@ const Payment: React.FC<{
       </TabsList>
       <TabsContent value='card'>
         <PayWithCard
-          setCurrentStep={setCurrentStep}
+          setStep={setStep}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -98,7 +98,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='crypto'>
         <PayWithCrypto
-          setCurrentStep={setCurrentStep}
+          setStep={setStep}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -106,7 +106,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='bank'>
         <PayWithBankTransfer
-          setCurrentStep={setCurrentStep}
+          setStep={setStep}
           storePaymentInfo={storePaymentInfo}
           contactForm={contactForm}
         />

package/components/checkout-panel/payment/pay-with-bank-transfer.tsx

@@ -35,7 +35,7 @@ const InfoField: React.FC<{
 }
 
 const PayWithBankTransfer: React.FC<{
-  setCurrentStep: (step: number) => void
+  setStep: (step: number) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
   contactForm: UseFormReturn<{
     name: string
@@ -45,14 +45,14 @@ const PayWithBankTransfer: React.FC<{
     email: string
   }>
 }> = ({
-  setCurrentStep,
+  setStep,
   storePaymentInfo,
   contactForm
 }) => {
   const payByBankTransfer = async () => {
     contactForm.handleSubmit(async () => {
       await storePaymentInfo({paymentMethod: 'bank-transfer'})
-      setCurrentStep(2)
+      setStep(2)
     })()
   }
 

package/components/checkout-panel/payment/pay-with-card.tsx

@@ -15,7 +15,7 @@ import PaymentMethods from './payment-methods'
 import ContactInfo from './contact-info'
 
 const PayWithCard: React.FC<{
-  setCurrentStep: (currentStep: number) => void
+  setStep: (currentStep: number) => void
   transactionStatus: TransactionStatus
   setTransactionStatus: (status: TransactionStatus) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
@@ -27,7 +27,7 @@ const PayWithCard: React.FC<{
     email: string
   }>
 }> = ({
-  setCurrentStep,
+  setStep,
   transactionStatus,
   setTransactionStatus,
   storePaymentInfo,
@@ -115,7 +115,7 @@ const PayWithCard: React.FC<{
           <div className='flex flex-col gap-4'>
             <h5 className='mx-auto font-nav'>Payment confirmed!</h5>
             <p className='mx-auto'>Thank you for your purchase.</p>
-            <Button onClick={() => setCurrentStep(2)}>Continue</Button>
+            <Button onClick={() => setStep(2)}>Continue</Button>
           </div>
         ) : transactionStatus === 'confirmed' ? (
             <h6 className='mx-auto font-nav'>Processing your payment...</h6>

package/components/checkout-panel/payment/pay-with-crypto.tsx

@@ -32,12 +32,12 @@ declare global {
 }
 
 const PayWithCrypto: React.FC<{
-  setCurrentStep: (currentStep: number) => void
+  setStep: (currentStep: number) => void
   transactionStatus: TransactionStatus
   setTransactionStatus: (status: TransactionStatus) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
 }> = observer(({
-  setCurrentStep,
+  setStep,
   transactionStatus,
   setTransactionStatus,
   storePaymentInfo
@@ -151,7 +151,7 @@ const PayWithCrypto: React.FC<{
     await storePaymentInfo({
       paymentMethod: 'crypto'
     })
-    setCurrentStep(2)
+    setStep(2)
   }
 
   const cryptoPriceWidget = !!!(auth.user?.walletAddress) ? (

package/components/checkout-panel/shipping-info.tsx

@@ -40,10 +40,10 @@ const shippingFormSchema = z.object({
 
 const ShippingInfo: React.FC<{
   orderId?: string,
-  setCurrentStep: (currentStep: number) => void
+  setStep: (currentStep: number) => void
 }> = ({
   orderId,
-  setCurrentStep
+  setStep
 }) => { 
   const auth = useAuth()
   const cmmc = useCommerce()
@@ -66,7 +66,7 @@ const ShippingInfo: React.FC<{
     if (auth.user && orderId) {
       await cmmc.updateOrderShippingInfo(orderId, values)
     }
-    setCurrentStep(3)
+    setStep(3)
   }
 
   return (

package/components/checkout-panel/step-indicator.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import type { CheckoutSteps } from './step'
+
+const StepIndicator: React.FC<{
+  steps: CheckoutSteps
+  currentStep: number
+  className?: string
+}> = ({
+  steps,
+  currentStep,
+  className=''
+}) => ( 
+  <div className={className}>
+  {Object.keys(steps).map((key, index) => (<>
+    {index !== 0 && (<Separator className='w-[4rem] sm:w-[6rem]'/>)}
+    <div className={cn(
+      'w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', 
+      currentStep === parseInt(key) ? 'bg-foreground text-muted-4' : ''
+    )}>
+      <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>{steps[parseInt(key)].label}</div>
+    </div>
+  </>))}
+  </div>
+)
+
+export default StepIndicator

package/components/checkout-panel/step.ts

@@ -0,0 +1,11 @@
+interface CheckoutStep {
+  label: string 
+  element: JSX.Element
+}
+
+type CheckoutSteps = Record<number, CheckoutStep>
+
+export {
+  type CheckoutStep,
+  type CheckoutSteps
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -38,7 +38,7 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.0.2",
+    "@hanzo/auth": "^2.2.0",
     "@hanzo/ui": "^3.0.2",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",