@hanzo/commerce 2.0.0 → 2.1.0

package/components/checkout/index.tsx

@@ -1,13 +1,9 @@
 'use client'
 
-import { useEffect, useState }  from 'react'
+import { useState }  from 'react'
 import { ChevronLeft } from 'lucide-react'
 import { observer } from 'mobx-react-lite'
 
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { useForm } from 'react-hook-form'
-
 import { Button, Main, Separator, Toaster } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useAuth } from '@hanzo/auth/service'
@@ -15,85 +11,41 @@ import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
 
 import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
-import PayWithCrypto from './pay-with-crypto'
-import PayByBankTransfer from './pay-by-bank-transfer'
-import ContactInfo from './contact-info'
 import { Cart } from '..'
-import { useCommerce } from '../../service/context'
-
-const contactFormSchema = z.object({
-  name: z.string().min(2, 'Name must be at least 2 characters.'),
-  email: z.string().email(),
-})
+import Payment from './payment'
 
 const Checkout: React.FC<{toggleCheckout: () => void}> = observer(({toggleCheckout}) => {
   const auth = useAuth()
-  const cmmc = useCommerce()
   
   const [currentStep, setCurrentStep] = useState(1)
-  const [paymentMethod, setPaymentMethod] = useState<'crypto' | 'bank' | undefined>()
   const [orderId, setOrderId] = useState<string>()
 
-  const contactForm = useForm<z.infer<typeof contactFormSchema>>({
-    resolver: zodResolver(contactFormSchema),  
-    defaultValues: {
-      name: auth.user?.displayName ?? '',
-      email: auth.user?.email ?? '',
-    },
-  })
-
-  useEffect(() => {
-    if (auth.loggedIn) {
-      contactForm.setValue('name', auth.user?.displayName ?? '')
-      contactForm.setValue('email', auth.user?.email ?? '')
-    }
-  }, [auth.loggedIn])
-
-  const selectPaymentMethod = async (method: 'crypto' | 'bank') => {
-    contactForm.handleSubmit(async () => {
-      if (auth.user) {
-        if (!!orderId) {
-          await cmmc.updateOrder(orderId, auth.user.email, method)
-        } else {
-          const id = await cmmc.createOrder(auth.user.email, method)
-          setOrderId(id)
-        }
-      }
-      setPaymentMethod(method)
-      setCurrentStep(2)
-    })()    
-  }
-
-
   const step1 = auth.loggedIn ? (
-    <ContactInfo form={contactForm} selectPaymentMethod={selectPaymentMethod}/>
+    <Payment
+      orderId={orderId} 
+      setOrderId={setOrderId}
+      setCurrentStep={setCurrentStep}
+    />
   ) : (
     <LoginComponent hideHeader className='max-w-[20rem] mx-auto'/>
   )
 
-  const step2 = paymentMethod === 'crypto' ? (
-    <PayWithCrypto setCurrentStep={setCurrentStep}/>
-  ) : (
-    <PayByBankTransfer setCurrentStep={setCurrentStep}/>
-  )
-
-  const step3 = (
-    <ShippingInfo orderId={orderId} paymentMethod={paymentMethod} setCurrentStep={setCurrentStep}/>
+  const step2 = (
+    <ShippingInfo orderId={orderId} setCurrentStep={setCurrentStep}/>
   )
 
-  const step4 = <ThankYou/>
+  const step3 = <ThankYou/>
 
-  const steps = [step1, step2, step3, step4]
+  const steps = [step1, step2, step3]
 
   return (
-    <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-[51]">  
+    <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-50">  
       <Toaster/>  
       <Main className='flex flex-col gap-1 h-full'>
-        <div className='flex justify-between'>
+        <div className='flex justify-between items-center'>
           <Button
             variant='ghost'
             size='icon'
-            className='sm:ml-2 sm:mt-2'
             onClick={() => {
               setCurrentStep(0)
               toggleCheckout()
@@ -109,18 +61,18 @@ const Checkout: React.FC<{toggleCheckout: () => void}> = observer(({toggleChecko
             <Cart hideCheckout className='fixed justify-center border-none mt-10 w-1/3 max-w-[40rem]'/>
           </div>
 
-          <div className='flex flex-col gap-8 sm:gap-14 col-span-5 md:col-span-3 max-w-[30rem] w-full mx-auto overflow-y-auto h-[calc(100%-40px)] sm:h-[calc(100%-48px)] py-4'>
+          <div className='flex flex-col gap-8 sm:gap-14 col-span-5 md:col-span-3 max-w-[30rem] w-full mx-auto overflow-y-auto h-[calc(100%-40px)] sm:h-[calc(100%-48px)] py-4 px-1'>
             <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'>Contact</div>
+                <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'>Payment</div>
+                <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'>Delivery</div>
+                <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Done!</div>
               </div>
             </div>
             {steps[currentStep - 1]}

package/components/checkout/payment/contact-info.tsx

@@ -0,0 +1,59 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@hanzo/ui/primitives/form'
+import { Input } from '@hanzo/ui/primitives'
+import type { UseFormReturn } from 'react-hook-form'
+ 
+const ContactInfo: React.FC<{
+  form: UseFormReturn<{
+    name: string
+    email: string
+  }, any, {
+    name: string
+    email: string
+  }>,
+}> = ({
+  form,
+}) => {
+  return (
+    <Form {...form}>
+      <form className='text-left'>
+        <div className='flex flex-col sm:flex-row gap-2'>
+          <FormField
+            control={form.control}
+            name='name'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormLabel>Full name</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default ContactInfo

package/components/checkout/payment/index.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+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, type TransactionStatus } from '../../..'
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, 'Enter your full name.'),
+  email: z.string().email(),
+})
+
+const Payment: React.FC<{
+  setCurrentStep: (currentStep: number) => void
+  orderId?: string
+  setOrderId: (orderId?: string) => void
+}> = observer(({
+  setCurrentStep,
+  orderId,
+  setOrderId
+}) => {
+  const cmmc = useCommerce()
+  const auth = useAuth()
+  const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('unpaid')
+
+  const contactForm = useForm<z.infer<typeof contactFormSchema>>({
+    resolver: zodResolver(contactFormSchema),  
+    defaultValues: {
+      name: auth.user?.displayName ?? '',
+      email: auth.user?.email ?? '',
+    },
+  })
+
+  useEffect(() => {
+    if (auth.loggedIn) {
+      contactForm.setValue('name', auth.user?.displayName ?? '')
+      contactForm.setValue('email', auth.user?.email ?? '')
+    }
+  }, [auth.loggedIn])
+
+  const storePaymentInfo = async (paymentInfo: any) => {
+    if (auth.user) {
+      const {name, email} = contactForm.getValues()
+      let id
+      if (!orderId) {
+        id = await cmmc.createOrder(email ? email : auth.user.email, name)
+        setOrderId(id)
+      }
+      if (id) {
+        await cmmc.updateOrderPaymentInfo(id, paymentInfo)
+      }
+    }
+  }
+
+  return (
+    <Tabs defaultValue='card' className='w-full mx-auto max-w-[50rem]'>
+      <TabsList className='grid w-full grid-cols-3 mx-auto bg-level-2 h-auto'>
+        <TabsTrigger
+          value='card'
+          className='font-nav whitespace-normal h-full text-sm sm:text-base'
+          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
+        >
+          PAY WITH CARD
+        </TabsTrigger>
+        <TabsTrigger
+          value='crypto'
+          className='font-nav whitespace-normal h-full text-sm sm:text-base'
+          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
+        >
+          PAY WITH CRYPTO
+        </TabsTrigger>
+        <TabsTrigger
+          value='bank'
+          className='font-nav whitespace-normal h-full text-sm sm:text-base'
+          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
+        >
+          BANK TRANSFER
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value='card'>
+        <PayWithCard
+          setCurrentStep={setCurrentStep}
+          transactionStatus={transactionStatus}
+          setTransactionStatus={setTransactionStatus}
+          storePaymentInfo={storePaymentInfo}
+          contactForm={contactForm}
+        />
+      </TabsContent>
+      <TabsContent value='crypto'>
+        <PayWithCrypto
+          setCurrentStep={setCurrentStep}
+          transactionStatus={transactionStatus}
+          setTransactionStatus={setTransactionStatus}
+          storePaymentInfo={storePaymentInfo}
+        />
+      </TabsContent>
+      <TabsContent value='bank'>
+        <PayWithBankTransfer
+          setCurrentStep={setCurrentStep}
+          storePaymentInfo={storePaymentInfo}
+          contactForm={contactForm}
+        />
+      </TabsContent>
+    </Tabs>
+  )
+})
+
+export default Payment

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

@@ -0,0 +1,106 @@
+'use client'
+
+import type { ReactNode } 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'
+
+const InfoField: React.FC<{
+  label: string,
+  value: ReactNode,
+  copyValue: string
+}> = ({
+  label,
+  value,
+  copyValue
+}) => {
+  const copyToClipboard = (label: string, text: string) => {
+    navigator.clipboard.writeText(text)
+    toast({title: `${label} copied to clipboard`})
+  }
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <p className='text-xs'>{label}</p>
+      <div className='flex items-center justify-between text-lg border rounded-lg py-2 px-4'>
+        {value}
+        <Button variant='ghost' size='icon' onClick={() => copyToClipboard(label, copyValue)}>
+          <Copy className='h-4 w-4'/>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const PayWithBankTransfer: React.FC<{
+  setCurrentStep: (step: number) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: UseFormReturn<{
+    name: string
+    email: string
+  }, any, {
+    name: string
+    email: string
+  }>
+}> = ({
+  setCurrentStep,
+  storePaymentInfo,
+  contactForm
+}) => {
+  const payByBankTransfer = async () => {
+    contactForm.handleSubmit(async () => {
+      await storePaymentInfo({paymentMethod: 'bank-transfer'})
+      setCurrentStep(2)
+    })()
+  }
+
+  return (
+    <div className='flex flex-col gap-6 mt-6'>
+      <ContactInfo 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 bg-level-2">
+          <TabsTrigger value="usd">USD</TabsTrigger>
+          <TabsTrigger value="eur">EUR/GBP</TabsTrigger>
+        </TabsList>
+        <TabsContent value="usd">
+          <div className='flex flex-col gap-4 w-full'>
+            <InfoField
+              label='Beneficiary Bank'
+              value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
+              copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
+            />
+            <InfoField
+              label='Beneficiary'
+              value={<div>Hanzo, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
+              copyValue='Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203'
+            />
+            <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
+            <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
+            <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
+            <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+          </div>
+        </TabsContent>
+        <TabsContent value="eur">
+          <div className='flex flex-col gap-4 w-full'>
+            <InfoField
+              label='Beneficiary Bank'
+              value={<div>Clear Junction Limited<br/>4th floor<br/>Imperial House</div>}
+              copyValue='Clear Junction Limited, 4th floor, Imperial House'
+            />
+            <InfoField label='Account Number (GBP)' value='33781813' copyValue='33781813'/>
+            <InfoField label='Account Name' value='AiDLT Global Ltd.' copyValue='AiDLT Global Ltd.'/>
+            <InfoField label='SWIFT/BIC' value='CLJUGB21' copyValue='CLJUGB21'/>
+            <InfoField label='Sort Code (GBP)' value='041307' copyValue='041307'/>
+            <InfoField label='IBAN' value='GB75 CLJU 0413 0733 78181 3' copyValue='GB75 CLJU 0413 0733 78181 3'/>
+            <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+          </div>
+        </TabsContent>
+      </Tabs>
+      <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
+    </div>
+  )
+}
+
+export default PayWithBankTransfer

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

@@ -0,0 +1,193 @@
+'use client'
+
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
+import type { UseFormReturn } from 'react-hook-form'
+import { ApplyTypography, Button } from '@hanzo/ui/primitives'
+import { useCommerce, type TransactionStatus } from '../../..'
+import PaymentMethods from './payment-methods'
+import { processSquareCardPayment } from '../../../util'
+import ContactInfo from './contact-info'
+
+const PayWithCard: React.FC<{
+  setCurrentStep: (currentStep: number) => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: UseFormReturn<{
+    name: string
+    email: string
+  }, any, {
+    name: string
+    email: string
+  }>
+}> = ({
+  setCurrentStep,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo,
+  contactForm,
+}) => {
+  const cmmc = useCommerce()
+
+  const cardTokenizeResponseReceived = async (
+    token: any,
+    verifiedBuyer: any
+  ) => {
+    contactForm.handleSubmit(async () => {
+      setTransactionStatus('paid')
+      const res = await processSquareCardPayment(token.token, cmmc.cartTotal, verifiedBuyer.token)
+      if (res) {
+        console.log(token)
+        await storePaymentInfo({paymentMethod: token.details.method ?? null, processed: res})
+        setTransactionStatus('confirmed')
+      } else {
+        setTransactionStatus('error')
+      }  
+    })() 
+  }
+
+  const createVerificationDetails = () => {
+    const {name, email} = contactForm.getValues()
+    return {
+      amount: cmmc.cartTotal.toFixed(2),
+      billingContact: {
+        givenName: name,
+        email,
+      },
+      currencyCode: 'USD',
+      intent: 'CHARGE',
+    }
+  }
+
+  const createPaymentRequest= () => ({
+    countryCode: "US",
+    currencyCode: "USD",
+    lineItems: cmmc.cartItems.map(item => ({
+      amount: item.price.toFixed(2),
+      label: item.title,
+      id: item.sku,
+    })),
+    requestBillingContact: false,
+    requestShippingContact: false,
+    total: {
+      amount: cmmc.cartTotal.toFixed(2),
+      label: "Total",
+    },
+  })
+
+  return (
+    <PaymentForm
+      /**
+       * Identifies the calling form with a verified application ID generated from
+       * the Square Application Dashboard.
+       */
+      applicationId={process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID}
+      /**
+       * Invoked when payment form receives the result of a tokenize generation
+       * request. The result will be a valid credit card or wallet token, or an error.
+       */
+      cardTokenizeResponseReceived={cardTokenizeResponseReceived}
+      /**
+        * This function enable the Strong Customer Authentication (SCA) flow
+        *
+        * We strongly recommend use this function to verify the buyer and reduce
+        * the chance of fraudulent transactions.
+        */
+      createVerificationDetails={createVerificationDetails}
+      /**
+        * This function is required for digital wallets (Apple Pay, Google Pay)
+        */
+      createPaymentRequest={createPaymentRequest}
+      /**
+       * Identifies the location of the merchant that is taking the payment.
+       * Obtained from the Square Application Dashboard - Locations tab.
+       */
+      locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID}
+    >
+      <div className='flex flex-col gap-2 mt-6'>
+        {transactionStatus === 'confirmed' ? (
+          <ApplyTypography 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>
+          </ApplyTypography>
+        ) : transactionStatus === 'paid' ? (
+          <ApplyTypography className='flex flex-col gap-4'>
+            <h5 className='mx-auto font-nav'>Processing your payment...</h5>
+          </ApplyTypography>
+        ) : (
+          <>
+            <GooglePay/>
+            <ApplePay/>
+            
+            <p className='flex gap-2 whitespace-nowrap items-center my-6 sm:my-10 text-sm text-foreground/60'>
+              <hr className='bg-foreground/60 w-full border'/> or pay with card <hr className='bg-foreground/60 w-full border'/>
+            </p>
+
+            <ContactInfo form={contactForm}/>
+            
+            <PaymentMethods/>
+
+            {/* Imitates hanzo/ui Button and Input styles, I was unable to render the
+              hanzo/ui button outright and keeping the submit form functionality*/}
+            <CreditCard
+              style={{
+                '.input-container': {
+                  borderColor: '#2D2D2D',
+                  borderRadius: '6px',
+                },
+                '.input-container.is-focus': {
+                  borderColor: '#ffffff',
+                },
+                '.input-container.is-error': {
+                  borderColor: '#ff1600',
+                },
+                '.message-text': {
+                  color: '#999999',
+                },
+                '.message-icon': {
+                  color: '#999999',
+                },
+                '.message-text.is-error': {
+                  color: '#ff1600',
+                },
+                '.message-icon.is-error': {
+                  color: '#ff1600',
+                },
+                input: {
+                  backgroundColor: '#000000',
+                  color: '#FFFFFF',
+                },
+                'input::placeholder': {
+                  color: '#999999',
+                },
+                'input.is-error': {
+                  color: '#ff1600',
+                },
+              }}
+              buttonProps={{
+                className: 'font-nav h-10',
+                css: {
+                  backgroundColor: '#fff',
+                  color: '#000',
+                  padding: 0,
+                  '&:hover': {
+                    backgroundColor: '#ffffffd9',
+                  },
+                },
+              }}
+            />
+            {transactionStatus === 'error' && (
+              <ApplyTypography>
+                <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
+              </ApplyTypography>
+            )}
+          </>
+        )}
+      </div>
+    </PaymentForm>
+  )
+}
+
+export default PayWithCard