@hanzo/commerce 4.8.0 → 5.0.0

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

@@ -18,14 +18,12 @@ import {
   toast 
 } from '@hanzo/ui/primitives'
 
-import { useAuth } from '@hanzo/auth/service'
+import Eth from '../crypto-icons/eth'
+import { useCommerce } from '../../../service/context'
+import type { PaymentMethodComponentProps } from '../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
-import Eth from '../../icons/eth'
-import { useCommerce } from '../../../../service/context'
-import type { TransactionStatus } from '../../../../types'
-import ContactInfo from './contact-info'
-import type { UseFormReturn } from 'react-hook-form'
-import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import ContactForm from '../contact-form'
 
 declare global {
   interface Window{
@@ -33,19 +31,7 @@ declare global {
   }
 }
 
-const PayWithCrypto: 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
-  }>
-}> = observer(({
+const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
   onDone,
   transactionStatus,
   setTransactionStatus,
@@ -53,7 +39,7 @@ const PayWithCrypto: React.FC<{
   contactForm
 }) => {
   const cmmc = useCommerce()
-  const auth = useAuth()
+
   const [loadingPrice, setLoadingPrice] = useState(false)
   //const [selectedToken, setSelectedToken] = useState('eth')
   const [amount, setAmount] = useState<number>()
@@ -188,7 +174,7 @@ const PayWithCrypto: React.FC<{
   return (
     <div className='flex flex-col gap-6 mt-6'>
       <div className='flex flex-col gap-2 w-full'>
-        <ContactInfo form={contactForm}/>
+        <ContactForm form={contactForm}/>
         <div className='flex gap-2 grid grid-cols-3'>
           <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
             <SelectTrigger>

package/components/payment-step-form/methods/index.ts

@@ -0,0 +1,23 @@
+import type { PaymentMethodDesc } from '../../../types'
+
+import Card from './card'
+import Crypto from './crypto'
+import BankTransfer from './bank-transfer'
+
+export default [
+  {
+    value: 'card',
+    label: 'Card',
+    Comp: Card
+  },
+  {
+    value: 'crypto',
+    label: 'Wallet',
+    Comp: Crypto
+  },
+  {
+    value: 'bank',
+    label: 'Bank Wire',
+    Comp: BankTransfer
+  },
+] satisfies PaymentMethodDesc[]

package/components/{checkout-panel/steps/shipping-info.tsx → shipping-step-form.tsx}

@@ -1,6 +1,5 @@
 'use client'
 
-
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -12,7 +11,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
   Select, 
   SelectContent, 
@@ -21,12 +19,12 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../..'
+import { useCommerce } from '../service/context'
 
-import countries from '../../../util/countries'
-import { sendGAEvent } from '../../../util/analytics'
+import countries from '../util/countries'
+import { sendGAEvent } from '../util/analytics'
 
-import type { StepComponentProps } from './types'
+import type { CheckoutStepComponentProps } from '../types'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
@@ -37,7 +35,7 @@ const shippingFormSchema = z.object({
   country: z.string().min(2, 'Country is invalid.'),
 })
 
-const ShippingInfo: React.FC<StepComponentProps> = ({
+const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
   orderId,
   onDone
 }) => { 
@@ -171,4 +169,4 @@ const ShippingInfo: React.FC<StepComponentProps> = ({
   )
 }
 
-export default ShippingInfo
+export default ShippingStepForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.8.0",
+  "version": "5.0.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.3.2",
-    "@hanzo/ui": "^3.0.10",
+    "@hanzo/ui": "^3.0.19",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",

package/types/checkout.ts

@@ -1,6 +1,48 @@
+import type { ComponentType } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
 
 type TransactionStatus = 'unpaid' | 'paid' | 'confirmed' | 'error'
 
+interface CheckoutStepComponentProps {
+  onDone: () => void
+  orderId: string | undefined
+  setOrderId: (orderId: string | undefined) => void
+}
+
+interface CheckoutStep {
+  name: string  
+  label?: string 
+  Comp: ComponentType<CheckoutStepComponentProps>
+}
+
+type ContactFormType = UseFormReturn<{
+  name: string
+  email: string
+}, any, {
+  name: string
+  email: string
+}>
+
+interface PaymentMethodComponentProps {
+  onDone: () => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: ContactFormType
+}
+
+interface PaymentMethodDesc {
+  value: string  
+  label: string 
+  Comp: ComponentType<PaymentMethodComponentProps>
+}
+
+
 export {
-  type TransactionStatus as default
+  type TransactionStatus,
+  type CheckoutStepComponentProps,
+  type CheckoutStep,
+  type PaymentMethodComponentProps,
+  type PaymentMethodDesc,
+  type ContactFormType
 }

package/types/index.ts

@@ -4,7 +4,7 @@ export type { default as CommerceService } from './commerce-service'
 export type { default as ItemSelector } from './item-selector'
 export type { default as Product } from './product'
 
-export type { default as TransactionStatus } from './checkout'
+export * from './checkout'
 export * from './line-item'
 export * from './facet'
 export * from './string-mutator'

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

@@ -1,60 +0,0 @@
-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/_confirm-order.tsx_unused

@@ -1,143 +0,0 @@
-'use client'
-import React from 'react'
-import type { UseFormReturn } from 'react-hook-form'
-import { BookUser, Lock, User } from 'lucide-react'
-
-import { ApplyTypography, Button } from '@hanzo/ui/primitives'
-import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
- 
-const ConfirmOrder: React.FC<{
-  paymentForm: UseFormReturn<{
-    name: string;
-    email: string;
-    cardName: string;
-    cardNumber: string;
-    cardExpiryDate: string;
-    cardCvc: string;
-  }, any, {
-    name: string;
-    email: string;
-    cardName: string;
-    cardNumber: string;
-    cardExpiryDate: string;
-    cardCvc: string;
-  }>,
-  shippingForm: UseFormReturn<{
-    firstName: string;
-    lastName: string;
-    addressLine1: string;
-    zipCode: string;
-    city: string;
-    country: string;
-    addressLine2?: string | undefined;
-    state?: string | undefined;
-  }, any, {
-    firstName: string;
-    lastName: string;
-    addressLine1: string;
-    zipCode: string;
-    city: string;
-    country: string;
-    addressLine2?: string | undefined;
-    state?: string | undefined;
-  }>,
-  setStep: (step: number) => void,
-  onPayClick: () => void
-}> = ({
-  paymentForm,
-  shippingForm,
-  setStep,
-  onPayClick
-}) => {
-
-  const paymentFormValues = paymentForm.getValues()
-  const shippingFormValues = shippingForm.getValues()
-  
-  return (
-    <div className='flex flex-col gap-6'>
-      <div className='flex gap-4 items-center'>
-        <User />
-        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-          heading: { text: `Contact Details`, level: 4 },
-        } as EnhHeadingBlock}/>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Contact name', level: 6 },
-        byline: { text: paymentFormValues.name, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Contact email', level: 6 },
-        byline: { text: paymentFormValues.email, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex gap-4 items-center'>
-        <ApplyTypography>
-          <h4 className='flex gap-4 items-center'><Lock /> Payment Info</h4>
-          <p>Guaranteed safe & secure checkout.</p>
-        </ApplyTypography>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Name on card', level: 6 },
-        byline: { text: paymentFormValues.cardName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card number', level: 6 },
-        byline: { text: paymentFormValues.cardNumber, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card expiry date', level: 6 },
-        byline: { text: paymentFormValues.cardExpiryDate, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card CVC', level: 6 },
-        byline: { text: paymentFormValues.cardCvc, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex gap-4 items-center'>
-        <BookUser />
-        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-          heading: { text: `Shipping address`, level: 4 },
-        } as EnhHeadingBlock}/>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'First name', level: 6 },
-        byline: { text: shippingFormValues.firstName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Last name', level: 6 },
-        byline: { text: shippingFormValues.lastName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Address line 1', level: 6 },
-        byline: { text: shippingFormValues.addressLine1, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Address line 2 (optional)', level: 6 },
-        byline: { text: shippingFormValues.addressLine2, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Zip code', level: 6 },
-        byline: { text: shippingFormValues.zipCode, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'City', level: 6 },
-        byline: { text: shippingFormValues.city, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'State (optional)', level: 6 },
-        byline: { text: shippingFormValues.state, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Country', level: 6 },
-        byline: { text: shippingFormValues.country, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex justify-between mt-8'>
-        <Button variant='outline' onClick={() => setStep(1)}>Back</Button>
-        <Button onClick={onPayClick}>Pay</Button>
-      </div>
-    </div>
-  )
-}
-
-export default ConfirmOrder

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

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

package/components/checkout-panel/desktop.tsx

@@ -1,46 +0,0 @@
-'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/icons/bag-icon.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,108 +0,0 @@
-'use client'
-import React, { useState }  from 'react'
-
-import { capitalize } from '@hanzo/ui/util'
-
-import { 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<{
-  close: () => void
-  className?: string
-}> = ({
-  close,
-  className=''
-}) => {
-
-  const cmmc = useCommerce()
-    
-    // For sites that don't initialize cmmc
-  if (!cmmc) {
-    return <></>
-  }
-  const [stepIndex, setStepIndex] = useState<number>(0)
-  const [orderId, setOrderId] = useState<string | undefined>(undefined)
-
-    // Step.name or 'first' or 'next' or 'last' 
-  const setStep = (name: string): void => {
-
-    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()
-  }
-
-  const StepToRender = STEPS[stepIndex].Comp  
-
-  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

@@ -1,41 +0,0 @@
-'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