@hanzo/commerce 4.8.0 → 5.0.0

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

@@ -15,7 +15,6 @@ const AddToCartWidget: React.FC<{
   disabled?: boolean
   className?: string
   buttonClx?: string
-  isMobile?: boolean
   size?: ButtonSizes
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({

package/components/{checkout-panel/cart-accordian.tsx → cart-accordian.tsx}

@@ -2,6 +2,8 @@
 import React  from 'react'
 import { observer } from 'mobx-react-lite'
 
+import { ChevronRight } from 'lucide-react'
+
 import {
   Accordion,
   AccordionContent,
@@ -9,23 +11,24 @@ import {
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
 
-import { formatPrice, useCommerce } from '../..'
+import { formatPrice, useCommerce } from '..'
 
-import CartPanel from '../cart-panel'
-import BagIcon from './icons/bag-icon'
-import { ChevronRight } from 'lucide-react'
+import CartPanel from './cart-panel'
 
-const CartAccordian: React.FC<{className?: string}> = observer(({
+const CartAccordian: React.FC<{
+  icon?: React.ReactNode
+  className?: string
+}> = observer(({
+  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'>
-            <BagIcon className='w-4 h-4 relative -top-0.5 sm:w-6 shrink-0 sm:h-6'/>
+          <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>
@@ -37,7 +40,13 @@ const CartAccordian: React.FC<{className?: string}> = observer(({
           </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>

package/components/cart-panel/cart-line-item.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import { observer } from 'mobx-react-lite'
 import Image from 'next/image'
+import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
 
 import type { LineItem } from '../../types'
 import { formatPrice } from '../../util'
-
 import AddToCartWidget from '../add-to-cart-widget'
 
-const IMG_SIZE=40
+const DEF_IMG_SIZE=40
 
 const renderTitle = (t: string): React.ReactNode => {
   const toks = t.split(', ')
@@ -22,36 +21,31 @@ const renderTitle = (t: string): React.ReactNode => {
 const CartLineItem: React.FC<{
   item: LineItem
   className?: string
-  isMobile?: boolean
+  imgSizePx?: number
 }> = observer(({ 
   item,
   className='',
-  isMobile=false 
-}) => {
-
-  const imgSize = (isMobile) ? IMG_SIZE * 0.65 : IMG_SIZE
-
-  return (
-    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-      <div className='flex flex-row justify-between items-center gap-2'>
-      {!!item.img ? (
-        <Image src={item.img} alt={item.title + ' image'} height={imgSize} width={imgSize} className=''/>
-      ) : (
-        <div style={{height: imgSize, width: imgSize}}/ >
-      )}
-        <div className='grow leading-tight'>{renderTitle(item.title)}</div>
+  imgSizePx=DEF_IMG_SIZE 
+}) => (
+  <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
+    <div className='flex flex-row justify-between items-center gap-2'>
+    {!!item.img ? (
+      <Image src={item.img} alt={item.title + ' image'} height={imgSizePx} width={imgSizePx} className=''/>
+    ) : ( // placeholder so things align
+      <div style={{height: imgSizePx, width: imgSizePx}}/ >
+    )}
+      <div className='grow leading-tight'>{renderTitle(item.title)}</div>
+    </div>
+    <div className='flex flex-row items-center justify-between w-full'>
+      <div className='flex flex-row items-center'>
+        <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
+        {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatPrice(item.price)}</span>)}
       </div>
-      <div className='flex flex-row items-center justify-between w-full'>
-        <div className='flex flex-row items-center'>
-          <AddToCartWidget isMobile={isMobile} className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
-          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatPrice(item.price)}</span>)}
-        </div>
-        <div className='flex flex-row items-center justify-end'>
-          {formatPrice(item.price * item.quantity)}
-        </div>
+      <div className='flex flex-row items-center justify-end'>
+        {formatPrice(item.price * item.quantity)}
       </div>
     </div>
-  )
-})
+  </div>
+))
 
 export default CartLineItem

package/components/cart-panel/index.tsx

@@ -2,28 +2,40 @@
 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'
 import { formatPrice } from '../../util'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 import CartLineItem from './cart-line-item'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
-import ProductsCarousel from './products-carousel'
 
 const CartPanel: React.FC<PropsWithChildren & {
+    /** fix size and scroll after 'scrollAfter items in teh cart. */
+  scrollAfter?: number
+  scrollHeightClx?: string
+  imgSizePx?: number
   className?: string
-  isMobile?: boolean,
-  showCarousel?: boolean
-    /** if not provided, checkout button will not be shown */
+  itemClx?: string
+  listClx?: string
+  noItemsClx?: string
+  totalClx?: string
+  buttonClx?: string
+    /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
-    /** Children is the heading area. */
+    /** If provided, 'children' is rendered above the items. eg, a heading. */
   children,
+  scrollAfter=5,
+  scrollHeightClx='h-[70vh]',
+  imgSizePx=40,
   className='',
-  isMobile=false,
-  showCarousel=false,
+  itemClx='',
+  listClx='',
+  noItemsClx='',
+  totalClx='',
+  buttonClx='',
   handleCheckout,
 }) => {
 
@@ -57,32 +69,44 @@ 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}
-      {showCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
-      <div className='mt-2 w-full'>
-        {cmmc.cartEmpty ? (
-          <p className='text-center mt-4'>No items in cart</p>
-        ) : (<>
-          {cmmc.cartItems.map((item, i) => (
-            <CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-2 md:mb-3'/>
-          ))}
-          <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>
-      {handleCheckout && (<>
-        {!cmmc.cartEmpty && (
-          <Button 
-            variant='primary' 
-            rounded='lg' 
-            className='mt-12 mx-auto w-full sm:max-w-[220px]' 
-            onClick={_handleCheckout}
-          >
-            Checkout
-          </Button>
-        )}
-      </>)}
+      {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={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
+        >
+          Checkout
+        </Button>
+      )}
     </div>
   )
 })

package/components/index.ts

@@ -3,13 +3,16 @@ export { default as BuyItemButtonWrapper } from './buy-item/buy-item-button-wrap
 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'
+export { default as CartAccordian } from './cart-accordian'
 export { default as CartPanel } from './cart-panel'
-export { default as CheckoutPanel } from './checkout-panel'
 export { default as CategoryItemIOSWheelSelector } from './category-item-scroll-selector'
 export { default as CategoryItemRadioSelector } from './category-item-radio-selector'
 export { default as FacetValuesWidget } from './facet-values-widget'
+export { default as ItemCarousel } from './item-carousel'
+export { default as PaymentStepForm } from './payment-step-form'
 export { default as ProductCard } from './product-card'
 export { default as SelectCategoryAndItemWidget } from './buy-item/select-category-and-item-widget'
 export { default as SelectCategoryItemCard } from './buy-item/select-category-item-card'
 export { default as SelectCategoryItemPanel } from './select-category-item-panel'
+export { default as ShippingStepForm } from './shipping-step-form'
 export { Icons } from './Icons'

package/components/item-carousel.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import { cn } from '@hanzo/ui/util'
+
+import {
+  type CarouselOptionsType,
+  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'
+import type { Dimensions } from '@hanzo/ui/types'
+
+  // Order of precedence of visuals: 3D > MP4 > Image
+const ItemCarousel: React.FC<{
+  items: LineItem[]
+  constrainTo: Dimensions
+  options?: CarouselOptionsType 
+  className?: string
+  itemClx?: string  
+}> = ({ 
+  items,
+  options,
+  className='',
+  constrainTo,
+  itemClx=''
+}) => ( 
+  // className: 'w-full max-w-sm mx-auto 
+  // itemClx:  'flex aspect-square items-center justify-center '
+  <Carousel options={options} className={cn('px-2', className)} >
+    <CarouselContent>
+    {items.map(({title, img, video, animation}, index) => (
+      <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
+      {animation ? (
+        <Spline
+          scene={animation}
+          className='pointer-events-none' // !aspect-[12/10] 
+          style={{
+            width: (6/5 * (typeof constrainTo.h === 'number' ? constrainTo.h as number : parseInt(constrainTo.h as string)) ),
+            height: constrainTo.h
+          }}
+        />
+      ) : video ? (
+        <VideoBlockComponent
+          constraint={constrainTo}
+          block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+        />
+      ) : (
+        <ImageBlockComponent
+          block={{
+            blockType: 'image',
+            src: img ?? '',
+            alt: title + ' image',
+            dim: constrainTo
+          } satisfies ImageBlock as Block} 
+          className='m-auto'
+        />
+      )}
+      </CarouselItem>
+    ))}
+    </CarouselContent>
+    <CarouselPrevious className='left-1'/>
+    <CarouselNext className='right-1'/>
+  </Carousel>
+)
+
+export default ItemCarousel

package/components/{checkout-panel/steps/payment/cards/index.tsx → payment-step-form/card-icon-row.tsx}

@@ -1,10 +1,10 @@
 import { LockKeyhole } from 'lucide-react'
-import Amex from './amex'
-import Discover from './discover'
-import Mastercard from './mastercard'
-import Visa from './visa'
-import DinersClub from './diners-club'
-import Jcb from './jcb'
+import Amex from './card-icons/amex'
+import Discover from './card-icons/discover'
+import Mastercard from './card-icons/mastercard'
+import Visa from './card-icons/visa'
+import DinersClub from './card-icons/diners-club'
+import Jcb from './card-icons/jcb'
 
 //       <span className='hidden sm:flex text-sm'>Secure payments with</span>
 

package/components/{checkout-panel/steps/payment → payment-step-form}/cc-button.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@hanzo/ui/primitives'
 
-import PaymentMethods from './cards'
+import PaymentMethods from './card-icon-row'
 import type { PropsWithChildren } from 'react'
 
 const CCButton: React.FC<PropsWithChildren> = ({

package/components/payment-step-form/contact-form.tsx

@@ -0,0 +1,49 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@hanzo/ui/primitives/form'
+import { Input } from '@hanzo/ui/primitives'
+
+import type { ContactFormType } from '../../types'
+ 
+const ContactForm: React.FC<{
+  form: ContactFormType,
+}> = ({
+  form,
+}) => (
+  <Form {...form}>
+    <form className='text-left'>
+      <div className='flex flex-col gap-1 sm:gap-2'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} className='border-muted-4' placeholder='Full name'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} className='border-muted-4' placeholder='Email'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+      </div>
+    </form>
+  </Form>
+)
+
+export default ContactForm

package/components/{checkout-panel/steps/payment → payment-step-form}/index.tsx

@@ -1,6 +1,5 @@
 'use client'
-
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -9,22 +8,19 @@ import { useForm } from 'react-hook-form'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
 import { useAuth } from '@hanzo/auth/service'
-import PayWithCrypto from './pay-with-crypto'
-import PayWithBankTransfer from './pay-with-bank-transfer'
-import PayWithCard from './pay-with-card'
 
-import { useCommerce } from '../../../../service/context'
-import type { TransactionStatus } from '../../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import { useCommerce } from '../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../types'
 
-import type { StepComponentProps } from '../types'
+import METHODS from './methods'
 
 const contactFormSchema = z.object({
   name: z.string().min(1, 'Enter your full name.'),
   email: z.string().email(),
 })
 
-const Payment: React.FC<StepComponentProps> = observer(({
+const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
   onDone,
   orderId,
   setOrderId
@@ -87,58 +83,35 @@ const Payment: React.FC<StepComponentProps> = observer(({
   const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
     'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
 
+  const disabled = transactionStatus === 'paid' || transactionStatus === 'confirmed'
+
   return (
-    <Tabs defaultValue='card' className='w-full sm:max-w-[500px] sm:mx-auto'>
+    <Tabs defaultValue='card' className='w-full'>
       <TabsList className={groupClx}>
+      {METHODS.map(({ label, value }) => (
         <TabsTrigger
-          value='card'
-          className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
-        >
-          Card
-        </TabsTrigger>
-        <TabsTrigger
-          value='crypto'
-          className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
-        >
-          Wallet
-        </TabsTrigger>
-        <TabsTrigger
-          value='bank'
+          value={value}
           className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
+          disabled={disabled}
+          key={`tabs-${value}`}
         >
-          Bank Wire
+          {label}
         </TabsTrigger>
+      ))}
       </TabsList>
-      <TabsContent value='card'>
-        <PayWithCard
-          onDone={onDone}
-          transactionStatus={transactionStatus}
-          setTransactionStatus={setTransactionStatus}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
-      <TabsContent value='crypto'>
-        <PayWithCrypto
-          onDone={onDone}
-          transactionStatus={transactionStatus}
-          setTransactionStatus={setTransactionStatus}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
-      <TabsContent value='bank'>
-        <PayWithBankTransfer
-          onDone={onDone}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
+      {METHODS.map(({Comp: PaymentMethodComp, value}) => (
+        <TabsContent value={value} key={`content-${value}`}>
+          <PaymentMethodComp 
+            onDone={onDone}
+            transactionStatus={transactionStatus}
+            setTransactionStatus={setTransactionStatus}
+            storePaymentInfo={storePaymentInfo}
+            contactForm={contactForm}
+          />
+        </TabsContent>
+      ))}
     </Tabs>
   )
 })
 
-export default Payment
+export default PaymentStepForm

package/components/{checkout-panel/steps/payment/pay-with-bank-transfer.tsx → payment-step-form/methods/bank-transfer.tsx}

@@ -1,21 +1,31 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import React from 'react'
 import { Copy } from 'lucide-react'
-import type { UseFormReturn } from 'react-hook-form'
 
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger, toast } from '@hanzo/ui/primitives'
-import ContactInfo from './contact-info'
+import { 
+  Button, 
+  Tabs, 
+  TabsContent, 
+  TabsList, 
+  TabsTrigger, 
+  toast 
+} from '@hanzo/ui/primitives'
+
+import type { PaymentMethodComponentProps } from '../../../types'
+
+import ContactForm from '../contact-form'
 
 const InfoField: React.FC<{
   label: string,
-  value: ReactNode,
+  value: React.ReactNode,
   copyValue: string
 }> = ({
   label,
   value,
   copyValue
 }) => {
+
   const copyToClipboard = (label: string, text: string) => {
     navigator.clipboard.writeText(text)
     toast(`${label} copied to clipboard.`)
@@ -34,17 +44,7 @@ const InfoField: React.FC<{
   )
 }
 
-const PayWithBankTransfer: React.FC<{
-  onDone: () => void
-  storePaymentInfo: (paymentInfo: any) => Promise<void>
-  contactForm: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>
-}> = ({
+const PayWithBankTransfer: React.FC<PaymentMethodComponentProps> = ({
   onDone,
   storePaymentInfo,
   contactForm
@@ -62,7 +62,7 @@ const PayWithBankTransfer: React.FC<{
 
   return (
     <div className='flex flex-col gap-2 mt-6'>
-      <ContactInfo form={contactForm}/>
+      <ContactForm form={contactForm}/>
       <Tabs defaultValue="usd" className='w-full mx-auto max-w-[50rem]'>
         <TabsList className={"grid w-full grid-cols-2 max-w-[15rem] mx-auto " + groupClx}>
           <TabsTrigger className={tabClx} value="usd">USD</TabsTrigger>

package/components/{checkout-panel/steps/payment/pay-with-card.tsx → payment-step-form/methods/card.tsx}

@@ -19,27 +19,15 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { processSquareCardPayment } from '../../../../util'
-import { useCommerce } from '../../../../service/context'
-import type { TransactionStatus } from '../../../../types'
+import { useCommerce } from '../../../service/context'
+import { processSquareCardPayment } from '../../../util'
+import type { PaymentMethodComponentProps } from '../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
-import ContactInfo from './contact-info'
-import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
-import PaymentMethods from './cards'
+import ContactInfo from '../contact-form'
+import PaymentMethods from '../card-icon-row'
 
-const PayWithCard: React.FC<{
-  onDone: () => void
-  transactionStatus: TransactionStatus
-  setTransactionStatus: (status: TransactionStatus) => void
-  storePaymentInfo: (paymentInfo: any) => Promise<void>
-  contactForm: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>
-}> = ({
+const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
   onDone,
   transactionStatus,
   setTransactionStatus,
@@ -206,7 +194,7 @@ const PayWithCard: React.FC<{
                         color: '#ff1600',
                       },
                       input: {
-                        backgroundColor: '#1f1f1f',
+                        backgroundColor: 'transparent',
                         color: '#FFFFFF',
                         fontSize: '15px',
                         fontFamily: 'helvetica neue, sans-serif',
@@ -243,4 +231,4 @@ const PayWithCard: React.FC<{
   )
 }
 
-export default PayWithCard
+export default PayWithCard