@hanzo/commerce 4.4.0 → 4.4.1

package/components/checkout-panel/index.tsx

@@ -13,8 +13,7 @@ import {
   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 { AuthWidget } from '@hanzo/auth/components'
 
 import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
@@ -33,7 +32,6 @@ const CheckoutPanel: React.FC<{
   setOpen
 }) => {
 
-  const auth = useAuth()
   const cmmc = useCommerce()
   
   const [step, setStep] = useState<number>(1)
@@ -43,17 +41,11 @@ const CheckoutPanel: React.FC<{
     1: {
       label: 'Payment',
       element: (
-        auth.loggedIn ? (
-          <Payment
-            orderId={orderId} 
-            setOrderId={setOrderId}
-            setStep={setStep}
-          />
-        ) : (
-          <LoginComponent hideHeader className='max-w-[20rem] mx-auto' inputClassName='border-muted-4'>
-            <h6 className='font-nav'>Please login to proceed</h6>
-          </LoginComponent >
-        )
+        <Payment
+          orderId={orderId} 
+          setOrderId={setOrderId}
+          setStep={setStep}
+        />
     )}
     , 
     2: {

package/components/checkout-panel/payment/index.tsx

@@ -49,16 +49,14 @@ const Payment: React.FC<{
   }, [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)
-      }
+    const {name, email} = contactForm.getValues()
+    let id
+    if (!orderId) {
+      id = await cmmc.createOrder(email, name)
+      setOrderId(id)
+    }
+    if (id) {
+      await cmmc.updateOrderPaymentInfo(id, paymentInfo)
     }
   }
 
@@ -67,21 +65,21 @@ const Payment: React.FC<{
       <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'
+          className='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'
+          className='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'
+          className='whitespace-normal h-full text-sm sm:text-base'
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
           BANK TRANSFER
@@ -102,6 +100,7 @@ const Payment: React.FC<{
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
+          contactForm={contactForm}
         />
       </TabsContent>
       <TabsContent value='bank'>

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

@@ -112,13 +112,13 @@ const PayWithCard: React.FC<{
     >
       <ApplyTypography className='flex flex-col gap-2 mt-6'>
         {transactionStatus === 'paid' ? (
+          <h6 className='mx-auto font-nav'>Processing your payment...</h6>
+        ) : transactionStatus === 'confirmed' ? (
           <div 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={() => setStep(2)}>Continue</Button>
           </div>
-        ) : transactionStatus === 'confirmed' ? (
-            <h6 className='mx-auto font-nav'>Processing your payment...</h6>
         ) : (
           <>
             <GooglePay/>

package/components/checkout-panel/payment/pay-with-crypto.tsx

@@ -24,6 +24,9 @@ import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
 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 { LoginComponent } from '@hanzo/auth/components'
 
 declare global {
   interface Window{
@@ -36,11 +39,19 @@ const PayWithCrypto: React.FC<{
   transactionStatus: TransactionStatus
   setTransactionStatus: (status: TransactionStatus) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: UseFormReturn<{
+    name: string
+    email: string
+  }, any, {
+    name: string
+    email: string
+  }>
 }> = observer(({
   setStep,
   transactionStatus,
   setTransactionStatus,
-  storePaymentInfo
+  storePaymentInfo,
+  contactForm
 }) => {
   const c = useCommerce()
   const auth = useAuth()
@@ -90,61 +101,69 @@ const PayWithCrypto: React.FC<{
   }, [c.cartTotal])
 
   const sendPayment = async (ether: number) => {
-    // Check that we are on ethereum network
-    try {
-      await window.ethereum.request({
-        method: 'wallet_switchEthereumChain',
-        params: [{ chainId: "0x1"}],
-      })
-      const newProvider = new ethers.BrowserProvider(window.ethereum)
-      setProvider(newProvider)
-      if (auth.user?.walletAddress) {
-        newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
-          setAvailableAmount(Number(balance)/(10**18))
+    contactForm.handleSubmit(async () => {
+      // Check that we are on ethereum network
+      try {
+        await window.ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: "0x1"}],
         })
+        const newProvider = new ethers.BrowserProvider(window.ethereum)
+        setProvider(newProvider)
+        if (auth.user?.walletAddress) {
+          newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
+            setAvailableAmount(Number(balance)/(10**18))
+          })
+        }
+      } catch (err) {
+        toast({title: 'Please switch your wallet to the Ethereum network.'})
+        return
       }
-    } catch (err) {
-      toast({title: 'Please switch your wallet to the Ethereum network.'})
-      return
-    }
 
-    try {
-      if (!provider) {
-        // :aa TODO string table
-        throw new Error('No crypto wallet found. Please install it.')
-      }
-  
-      await window.ethereum.send('eth_requestAccounts')
-
-      const signer = await provider.getSigner()
-      ethers.getAddress(process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS ?? '')
-      const tx = await signer.sendTransaction({
-        to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-        value: ethers.parseEther(ether.toString())
-      })
-      console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
-      console.log('tx', tx)
-      setTransactionStatus('paid')
-
-      provider.waitForTransaction(tx.hash)
-        .then(async (receipt) => {
-          console.log(receipt)
-          await storePaymentInfo({
-            ether,
-            addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-            receipt
-          })
-          setTransactionStatus('confirmed')
+      try {
+        if (!provider) {
+          // :aa TODO string table
+          throw new Error('No crypto wallet found. Please install it.')
+        }
+    
+        await window.ethereum.send('eth_requestAccounts')
+
+        const signer = await provider.getSigner()
+        ethers.getAddress(process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS ?? '')
+        const tx = await signer.sendTransaction({
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          value: ethers.parseEther(ether.toString())
         })
-        .catch((error) => {
-          console.error(error)
-          setTransactionStatus('error')
+        console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
+        console.log('tx', tx)
+        setTransactionStatus('paid')
+        await storePaymentInfo({
+          ether,
+          transactionHash: tx.hash,
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          paymentMethod: 'crypto'
         })
-    } catch (err) {
-      console.log(err)
-      // :aa TODO string table
-      toast({title: 'Not enough funds in your wallet'})
-    }
+
+        provider.waitForTransaction(tx.hash)
+          .then(async (receipt) => {
+            console.log(receipt)
+            await storePaymentInfo({
+              ether,
+              addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+              receipt
+            })
+            setTransactionStatus('confirmed')
+          })
+          .catch((error) => {
+            console.error(error)
+            setTransactionStatus('error')
+          })
+      } catch (err) {
+        console.log(err)
+        // :aa TODO string table
+        toast({title: 'Not enough funds in your wallet'})
+      }
+    })()
   }
 
   const nextStep = async () => {
@@ -154,69 +173,57 @@ const PayWithCrypto: React.FC<{
     setStep(2)
   }
 
-  const cryptoPriceWidget = !!!(auth.user?.walletAddress) ? (
-    <div className='w-full mx-auto max-w-[20rem]'>
-      <Button
-        variant='outline'
-        className='w-full flex items-center gap-2'
-        onClick={auth.associateWallet.bind(auth)}
-      >
-        <EthIconFromAuth height={20}/>Connect your wallet
-      </Button>
-    </div>
-  ) : (
-    <div className='flex flex-col gap-2 w-full'>
-      <div className='flex gap-2 grid grid-cols-3'>
-        <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
-          <SelectTrigger>
-            <SelectValue defaultValue='eth' className='border-muted-4'/>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectItem value='eth'><div className='flex items-center gap-2'><Eth height={14}/>ETH</div></SelectItem>
-              {/* <SelectItem value='btc' ><div className='flex items-center gap-2'><Btc height={14}/>BTC</div></SelectItem>
-              <SelectItem value='usdt' ><div className='flex items-center gap-2'><Usdt height={14}/>USDT</div></SelectItem> */}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        <div className='col-span-2'>
-          <Input
-            value={amount ? amount/(10**18) : amount}
-            contentEditable={false}
-            className='border-muted-4'
-          />
-          <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
-            <Eth height={10}/>
-            ETH
+  return (
+    <div className='flex flex-col gap-6 mt-6'>
+      <div className='flex flex-col gap-2 w-full'>
+        <ContactInfo form={contactForm}/>
+        <div className='flex gap-2 grid grid-cols-3'>
+          <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
+            <SelectTrigger>
+              <SelectValue defaultValue='eth' className='border-muted-4'/>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value='eth'><div className='flex items-center gap-2'><Eth height={14}/>ETH</div></SelectItem>
+                {/* <SelectItem value='btc' ><div className='flex items-center gap-2'><Btc height={14}/>BTC</div></SelectItem>
+                <SelectItem value='usdt' ><div className='flex items-center gap-2'><Usdt height={14}/>USDT</div></SelectItem> */}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <div className='col-span-2'>
+            <Input
+              value={amount ? amount/(10**18) : amount}
+              contentEditable={false}
+              className='border-muted-4'
+            />
+            <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
+              <Eth height={10}/>
+              ETH
+            </div>
           </div>
         </div>
+        <div>Available funds in your wallet: {availableAmount} ETH</div>
+        
+        {transactionStatus === 'error' ? (
+          <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
+        ) : transactionStatus === 'paid' ? (
+          <h4>Waiting for transaction to be confirmed on chain.</h4>
+        ) : transactionStatus === 'confirmed' ? (
+          <h4>Transaction confirmed!</h4>
+        ) : null}
+
+        {transactionStatus === 'unpaid' ? (
+          <Button
+            onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+            className='mx-auto w-full'
+            disabled={loadingPrice}
+          >
+            Pay
+          </Button>
+        ) : (
+          <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
+        )}
       </div>
-      <div>Available funds in your wallet: {availableAmount} ETH</div>
-      
-      {transactionStatus === 'error' ? (
-        <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
-      ) : transactionStatus === 'paid' ? (
-        <h4>Waiting for transaction to be confirmed on chain.</h4>
-      ) : transactionStatus === 'confirmed' ? (
-        <h4>Transaction confirmed!</h4>
-      ) : null}
-    </div>
-  )
-
-  return (
-    <div className='flex flex-col gap-6 mt-6'>
-      {cryptoPriceWidget}
-      {transactionStatus === 'unpaid' ? (
-        <Button
-          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
-          className='mx-auto w-full'
-          disabled={loadingPrice}
-        >
-          Pay
-        </Button>
-      ) : (
-        <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
-      )}
     </div>
   )
 })

package/components/checkout-panel/shipping-info.tsx

@@ -28,8 +28,6 @@ import { useCommerce } from '../..'
 import { countries } from './countries'
 
 const shippingFormSchema = z.object({
-  firstName: z.string().min(2, 'First name must be at least 2 characters.'),
-  lastName: z.string().min(2, 'Last name must be at least 2 characters.'),
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
   addressLine2: z.string().optional(),
   zipCode: z.string().min(2, 'Zip code is invalid.'),
@@ -51,8 +49,6 @@ const ShippingInfo: React.FC<{
   const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
     resolver: zodResolver(shippingFormSchema),
     defaultValues: {
-      firstName: '',
-      lastName: '',
       addressLine1: '',
       addressLine2: '',
       zipCode: '',
@@ -63,7 +59,7 @@ const ShippingInfo: React.FC<{
   })
 
   const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
-    if (auth.user && orderId) {
+    if (orderId) {
       await cmmc.updateOrderShippingInfo(orderId, values)
     }
     setStep(3)
@@ -73,62 +69,32 @@ const ShippingInfo: React.FC<{
     <Form {...shippingForm}>
       <form onSubmit={shippingForm.handleSubmit(onSubmit)} className='text-left'>
         <div className='flex flex-col gap-4'>
-          <div className='flex gap-4 items-end'>
-            <FormField
-              control={shippingForm.control}
-              name='firstName'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>First name</FormLabel>
-                  <FormControl>
-                    <Input {...field} className='border-muted-4'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={shippingForm.control}
-              name='lastName'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Last name</FormLabel>
-                  <FormControl>
-                    <Input {...field} className='border-muted-4'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-          <div className='flex gap-4 items-end'>
-            <FormField
-              control={shippingForm.control}
-              name='addressLine1'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Address line 1</FormLabel>
-                  <FormControl>
-                    <Input {...field} className='border-muted-4'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={shippingForm.control}
-              name='addressLine2'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Address line 2 (optional)</FormLabel>
-                  <FormControl>
-                    <Input {...field} className='border-muted-4'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
+          <FormField
+            control={shippingForm.control}
+            name='addressLine1'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormLabel>Address line 1</FormLabel>
+                <FormControl>
+                  <Input {...field} className='border-muted-4'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={shippingForm.control}
+            name='addressLine2'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormLabel>Address line 2 (optional)</FormLabel>
+                <FormControl>
+                  <Input {...field} className='border-muted-4'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           <div className='flex gap-4 items-end'>
             <FormField
               control={shippingForm.control}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",