@hanzo/commerce 4.6.0 → 4.8.0

package/components/add-to-cart-widget.tsx

@@ -29,7 +29,7 @@ const AddToCartWidget: React.FC<{
 }) => {
 
   const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
-  const digitClx = ghost ? 'px-2 md:px-0.5' : 'sm:px-2 font-bold '
+  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-bold text-primary-fg '
 
   if (disabled) {
     return (
@@ -116,7 +116,7 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 text-primary-fg ' + digitClx} >{item.quantity}</div>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}

package/components/cart-panel/index.tsx

@@ -10,29 +10,29 @@ import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
 import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import ProductsCarousel from './products-carousel'
 
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
-  noCheckout?: boolean
-  onCheckoutOpen?: () => void
+  showCarousel?: boolean
+    /** if not provided, checkout button will not be shown */
+  handleCheckout?: () => void
 }> = observer(({
     /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
-  noCheckout=false,
-  onCheckoutOpen,
+  showCarousel=false,
+  handleCheckout,
 }) => {
-  /* TODO: onCheckoutOpen is a hackish way fix a bug with multiple dialog opened at the same time.
-  *  Needs refactor with context or so.
-  **/
+
   const cmmc = useCommerce()
   if (!cmmc) {
     return <div />
   }
 
-  const showCheckout = () => {
+  const _handleCheckout = () => {
     sendGAEvent('begin_checkout', {
       currency: 'USD',
       value: cmmc.cartTotal,
@@ -54,12 +54,13 @@ const CartPanel: React.FC<PropsWithChildren & {
       value: cmmc.cartTotal,
       currency: 'USD',
     })
-    onCheckoutOpen && onCheckoutOpen()
+    handleCheckout && handleCheckout()
   }
 
   return (
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
+      {showCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
       <div className='mt-2 w-full'>
         {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>
@@ -70,13 +71,13 @@ const CartPanel: React.FC<PropsWithChildren & {
           <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
         </>)}
       </div>
-      {!noCheckout && (<>
+      {handleCheckout && (<>
         {!cmmc.cartEmpty && (
           <Button 
             variant='primary' 
             rounded='lg' 
-            className='mt-12 mx-auto w-full' 
-            onClick={showCheckout}
+            className='mt-12 mx-auto w-full sm:max-w-[220px]' 
+            onClick={_handleCheckout}
           >
             Checkout
           </Button>

package/components/cart-panel/products-carousel.tsx

@@ -0,0 +1,60 @@
+import Spline from '@splinetool/react-spline'
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from '@hanzo/ui/primitives'
+import {
+  VideoBlockComponent,
+  ImageBlockComponent,
+  type ImageBlock,
+  type Block,
+  type VideoBlock
+} from '@hanzo/ui/blocks'
+
+import type { LineItem } from '../../types'
+
+  // Carousel content hierarchy: 3D > MP4 > Image
+const ProductsCarousel: React.FC<{
+  items: LineItem[]
+}> = ({ 
+  items,
+}) => (
+  <Carousel options={{ loop: true }} className='w-full max-w-sm mx-auto px-2' >
+    <CarouselContent>
+      {items.map(({title, img, video, animation}, index) => (
+        <CarouselItem key={index}>
+          <div className='flex aspect-square items-center justify-center p-6'>
+            {animation ? (
+              <Spline
+                scene={animation}
+                className='!aspect-[12/10] pointer-events-none !w-auto !h-auto'
+              />
+            ) : video ? (
+              <VideoBlockComponent
+                block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+              />
+            ) : (
+              <ImageBlockComponent
+                block={{
+                  blockType: 'image',
+                  src: img ?? '',
+                  alt: title + ' image',
+                  dim: { w: 250, h: 250 }
+                } satisfies ImageBlock as Block} 
+                className='m-auto'
+              />
+            )}
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+)
+
+export default ProductsCarousel

package/components/checkout-panel/cart-accordian.tsx

@@ -0,0 +1,47 @@
+'use client'
+import React  from 'react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+
+import { formatPrice, useCommerce } from '../..'
+
+import CartPanel from '../cart-panel'
+import BagIcon from './icons/bag-icon'
+import { ChevronRight } from 'lucide-react'
+
+const CartAccordian: React.FC<{className?: string}> = observer(({
+  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'>
+            <BagIcon className='w-4 h-4 relative -top-0.5 sm:w-6 shrink-0 sm:h-6'/>
+            <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>
+            </h5>
+          </div>
+          <div className='flex gap-1 items-center'>
+            <h5 className='text-sm sm:text-xl grow truncate'>{formatPrice(cmmc.cartTotal)}</h5>
+            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className='data-[state=open]:mb-4'>
+          <CartPanel className='w-full'/>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+})
+
+export default CartAccordian

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

@@ -5,16 +5,16 @@ import { ChevronLeft } from 'lucide-react'
 import { Button } from '@hanzo/ui/primitives'
 
 const CloseButton: React.FC<{
-  onClose: () => void
+  close: () => void
   className?: string
 }> = ({
-  onClose,
+  close,
   className=''
 }) => (
     <Button
       variant='ghost'
       size='icon'
-      onClick={onClose}
+      onClick={close}
       className={'group ' + className}
     >
       <ChevronLeft className='w-5 h-5 group-hover:scale-110 transition-scale transition-duration-300'/>

package/components/checkout-panel/desktop.tsx

@@ -0,0 +1,46 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import CartPanel from '../cart-panel'
+import CloseButton from './close-button'
+
+const DesktopPanel: React.FC<PropsWithChildren & {
+  index: number
+  stepNames: string[]
+  close:() => void
+  className?: string
+}> = ({
+  index,
+  stepNames,
+  close,
+  className='',
+  children
+}) => (
+  <div /* id='DT-GRID' */ className={className}>
+    <div className='w-full bg-background flex flex-row items-start justify-end'>
+      <ScrollArea className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-9'>
+        <CloseButton close={close} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
+        <CartPanel showCarousel className='flex border-none mt-10 w-full max-w-[550px] flex-col' />
+      </ScrollArea>
+    </div>
+    <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start justify-start overflow-y-auto'>
+      <div className='h-full w-full max-w-[750px] relative flex flex-col items-center gap-6 px-8 pb-6 pt-0'>
+        <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
+        <div className='bg-level-1 sticky h-[90px] pb-2 w-full top-0 flex justify-center items-end'>
+          <StepIndicator 
+            dotSizeRem={1.5} 
+            steps={stepNames} 
+            currentStep={index} 
+            className='gap-2 text-base w-pr-70 ' 
+          />
+        </div>
+        {children}
+      </div>
+    </ScrollArea>
+  </div>
+)
+
+export default DesktopPanel

package/components/checkout-panel/index.tsx

@@ -1,34 +1,42 @@
 'use client'
+import React, { useState }  from 'react'
 
-import { useState }  from 'react'
-import { observer } from 'mobx-react-lite'
+import { capitalize } from '@hanzo/ui/util'
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Dialog,
-  DialogPortal,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import { useCommerce } from '../..'
 
-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'
-import BagIcon from './icons/bag-icon'
-import { formatPrice, useCommerce } from '../..'
+import type { CheckoutStep } from './steps/types'
+import ShippingInfo from './steps/shipping-info'
+import ThankYou from './steps/thank-you'
+import Payment from './steps/payment'
+
+const STEPS = [
+  {
+    name: 'payment',
+    Comp: Payment
+  }, 
+  {
+    name: 'delivery',
+    Comp: ShippingInfo
+  }, 
+  {
+    name: 'done',
+    label: 'Done!',
+    Comp: ThankYou
+  }
+] satisfies CheckoutStep[]
+
+const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
+
+import DesktopCP from './desktop'
+import MobileCP from './mobile'
 
 const CheckoutPanel: React.FC<{
-  open: boolean
-  onCheckoutClose: () => void
-}> = observer(({
-  open,
-  onCheckoutClose
+  close: () => void
+  className?: string
+}> = ({
+  close,
+  className=''
 }) => {
 
   const cmmc = useCommerce()
@@ -37,83 +45,64 @@ const CheckoutPanel: React.FC<{
   if (!cmmc) {
     return <></>
   }
-  
-  const [step, setStep] = useState<number>(1)
-  const [orderId, setOrderId] = useState<string>()
+  const [stepIndex, setStepIndex] = useState<number>(0)
+  const [orderId, setOrderId] = useState<string | undefined>(undefined)
 
-  const steps = {
-    1: {
-      label: 'Payment',
-      element: (
-        <Payment
-          orderId={orderId} 
-          setOrderId={setOrderId}
-          setStep={setStep}
-        />
-    )}
-    , 
-    2: {
-      label: 'Delivery',
-      element: (
-        <ShippingInfo orderId={orderId} setStep={setStep}/>   
-    )}, 
-    3: {
-      label: 'Done!',
-      element: (
-      <ThankYou/>  
-    )}
-  } as Record<number, {label: string, element: JSX.Element}>
+    // Step.name or 'first' or 'next' or 'last' 
+  const setStep = (name: string): void => {
 
-  const onClose = () => {
-    setStep(1)
-    onCheckoutClose()
+    if (name === 'first') {
+      setStepIndex(0)
+    }
+    else if (name === 'last') {
+      setStepIndex(STEPS.length - 1)
+    } 
+    else if (name === 'next') {
+      if (stepIndex < STEPS.length - 2) {
+        setStepIndex(stepIndex + 1)
+      }
+      else {
+        throw new Error('CheckoutPanel.setStep(): Attempting to advance past last step!')
+      }
+    } 
+    else {
+      const indexFound = STEPS.findIndex((el) => (el.name === name))
+      if (indexFound !== -1) {
+        setStepIndex(indexFound)
+      }
+      else {
+        throw new Error('CheckoutPanel.setStep(): Step named ' + name + ' not found!')
+      }
+    }
+  } 
+
+  const _close = () => {
+    setStep('first')
+    close()
   }
 
-  return (
-    <Dialog open={open}>
-      <DialogPortal>
-        <div id='PORTAL_OUTER'
-          className={cn(
-            'fixed top-0 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'
-          )}
-        >
-          <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 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'/>
+  const StepToRender = STEPS[stepIndex].Comp  
 
-                <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 md:overflow-y-auto'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 px-8 pb-6 pt-6 md:pt-14'>
-                <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>
-      </DialogPortal>
-    </Dialog>
+  return (
+    <div /* id='CHECKOUT_PANEL' */  className={className} >
+      <DesktopCP 
+        className='hidden md:flex h-full flex-row justify-center overflow-y-hidden' 
+        close={_close}
+        index={stepIndex}
+        stepNames={STEP_NAMES}
+      >
+        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
+      </DesktopCP>
+      <MobileCP 
+        className='md:hidden h-full overflow-y-auto' 
+        close={_close}
+        index={stepIndex}
+        stepNames={STEP_NAMES}
+      >
+        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
+      </MobileCP>
+    </div>
   )
-})
+}
 
 export default CheckoutPanel

package/components/checkout-panel/mobile.tsx

@@ -0,0 +1,41 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { StepIndicator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import CloseButton from './close-button'
+import CartAccordian from './cart-accordian'
+
+const MobilePanel: React.FC<PropsWithChildren & {
+  index: number
+  stepNames: string[]
+  close:() => void
+  className?: string
+}> = ({
+  index,
+  stepNames,
+  close,
+  className='',
+  children
+}) => (
+
+  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4', className)}>
+    <div className='sticky top-0 w-full flex flex-row justify-between items-start bg-background'>
+      <CloseButton close={close} className='rounded-full bg-background hover:bg-background p-1 -ml-3' />
+      <StepIndicator 
+        dotSizeRem={1} 
+        steps={stepNames} 
+        currentStep={index} 
+        className='text-xs font-semibold w-pr-70 mt-3' 
+      />
+      {/* Need wrapper div since 'noLogin' returns null if no logged in user */}
+      <div className='w-10 h-10 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
+    </div>
+    <CartAccordian className='flex items-center justify-center py-2 mt-2 w-full' />
+    {children}
+  </div>
+)
+
+export default MobilePanel

package/components/checkout-panel/{payment/payment-methods → steps/payment/cards}/index.tsx

@@ -6,11 +6,12 @@ import Visa from './visa'
 import DinersClub from './diners-club'
 import Jcb from './jcb'
 
+//       <span className='hidden sm:flex text-sm'>Secure payments with</span>
+
 const PaymentMethods: React.FC = () => {
   return (
-    <div className='flex gap-1 items-center'>
+    <div className='flex gap-1 items-center text-muted-1'>
       <LockKeyhole className='w-4 h-4'/>
-      <span className='hidden sm:flex text-sm'>Secure payments with</span>
       <Amex className='w-9 h-5'/>
       <Discover className='w-9 h-5'/>
       <Mastercard className='w-9 h-5'/>

package/components/checkout-panel/steps/payment/cc-button.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@hanzo/ui/primitives'
+
+import PaymentMethods from './cards'
+import type { PropsWithChildren } from 'react'
+
+const CCButton: React.FC<PropsWithChildren> = ({
+  children
+}) => (
+  <Button variant='outline' size='lg' className='flex items-center' >
+    <div className='font-sans text-base mr-2 text-muted'>CC</div>
+    <PaymentMethods />
+    {children}
+  </Button>
+)
+
+
+export default CCButton

package/components/checkout-panel/{payment → steps/payment}/contact-info.tsx

@@ -3,7 +3,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@hanzo/ui/primitives/form'
 import { Input } from '@hanzo/ui/primitives'
@@ -23,17 +22,16 @@ const ContactInfo: React.FC<{
   return (
     <Form {...form}>
       <form className='text-left'>
-        <div className='flex flex-col sm:flex-row gap-2'>
+        <div className='flex flex-col gap-1 sm:gap-2'>
           <FormField
             control={form.control}
             name='name'
             render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
-                <FormLabel>Full name</FormLabel>
+              <FormItem className='w-full'>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Full name'/>
                 </FormControl>
-                <FormMessage />
+                <FormMessage className='py-0 space-y-0 !m-0'/>
               </FormItem>
             )}
           />
@@ -41,12 +39,11 @@ const ContactInfo: React.FC<{
             control={form.control}
             name='email'
             render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
-                <FormLabel>Email</FormLabel>
+              <FormItem className='w-full'>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Email'/>
                 </FormControl>
-                <FormMessage />
+                <FormMessage className='py-0 space-y-0 !m-0'/>
               </FormItem>
             )}
           />