added google pay and apple pay, restyled payment step on checkout

packages/commerce/components/checkout/index.tsx

@@ -1,62 +1,31 @@
 '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'
 import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
 
 import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
-import ContactInfo from './contact-info'
 import { Cart } from '..'
 import Payment from './payment'
 
-const contactFormSchema = z.object({
-  firstName: z.string().min(1, 'Enter your first name.'),
-  lastName: z.string().min(1, 'Enter your last name.'),
-  email: z.string().email(),
-})
-
 const Checkout: React.FC<{toggleCheckout: () => void}> = observer(({toggleCheckout}) => {
   const auth = useAuth()
 
   const [currentStep, setCurrentStep] = useState(1)
   const [orderId, setOrderId] = useState<string>()
 
-  const contactForm = useForm<z.infer<typeof contactFormSchema>>({
-    resolver: zodResolver(contactFormSchema),  
-    defaultValues: {
-      firstName: auth.user?.displayName ?? '',
-      lastName: '',
-      email: auth.user?.email ?? '',
-    },
-  })
-
-  useEffect(() => {
-    if (auth.loggedIn) {
-      contactForm.setValue('firstName', auth.user?.displayName ?? '')
-      contactForm.setValue('email', auth.user?.email ?? '')
-    }
-  }, [auth.loggedIn])
-
   const step1 = auth.loggedIn ? (
-    <div className='flex flex-col gap-4'>
-      <ContactInfo form={contactForm}/>
-      <Payment
-        orderId={orderId} 
-        setOrderId={setOrderId}
-        setCurrentStep={setCurrentStep}
-        contactForm={contactForm}
-      />
-    </div>
+    <Payment
+      orderId={orderId} 
+      setOrderId={setOrderId}
+      setCurrentStep={setCurrentStep}
+    />
   ) : (
     <LoginComponent hideHeader className='max-w-[20rem] mx-auto'/>
   )

packages/commerce/components/checkout/payment/contact-info.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+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-4'>
+          <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

packages/commerce/components/checkout/payment/index.tsx

@@ -1,45 +1,58 @@
 '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 PayByBankTransfer from './pay-by-bank-transfer'
+import PayWithBankTransfer from './pay-with-bank-transfer'
 import PayWithCard from './pay-with-card'
-import { useState } from 'react'
 import { useCommerce, type TransactionStatus } from '../../..'
-import { useAuth } from '@hanzo/auth/service'
-import type { UseFormReturn } from 'react-hook-form'
+
+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
-  contactForm: UseFormReturn<{
-    firstName: string
-    lastName: string
-    email: string
-  }, any, {
-    firstName: string
-    lastName: string
-    email: string
-  }>,
 }> = observer(({
   setCurrentStep,
   orderId,
-  setOrderId,
-  contactForm
+  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 {firstName, lastName, email} = contactForm.getValues()
+      const {name, email} = contactForm.getValues()
       let id
       if (!orderId) {
-        id = await cmmc.createOrder(email ? email : auth.user.email, `${firstName} ${lastName}`)
+        id = await cmmc.createOrder(email ? email : auth.user.email, name)
         setOrderId(id)
       }
       if (id) {
@@ -91,9 +104,10 @@ const Payment: React.FC<{
         />
       </TabsContent>
       <TabsContent value='bank'>
-        <PayByBankTransfer
+        <PayWithBankTransfer
           setCurrentStep={setCurrentStep}
           storePaymentInfo={storePaymentInfo}
+          contactForm={contactForm}
         />
       </TabsContent>
     </Tabs>