@hanzo/commerce 1.1.12 → 1.1.13

package/components/checkout/contact-info.tsx

@@ -30,12 +30,6 @@ const ContactInfo: React.FC<{
     <Form {...form}>
       <form className='text-left'>
         <div className='flex flex-col gap-4'>
-          <div className='flex gap-4 items-center'>
-            <User />
-            <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-              heading: { text: `Contact Info`, level: 4 },
-            } as EnhHeadingBlock}/>
-          </div>
           <div className='flex flex-col sm:flex-row gap-4'>
             <FormField
               control={form.control}

package/components/checkout/index.tsx

@@ -8,10 +8,10 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 
-import { ApplyTypography, Button, Main, Separator } from '@hanzo/ui/primitives'
+import { Button, Main, Separator, Toaster } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useAuth } from '@hanzo/auth/service'
-import { LoginComponent } from '@hanzo/auth/components'
+import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
 
 import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
@@ -86,45 +86,45 @@ const Checkout: React.FC<{toggleCheckout: () => void}> = observer(({toggleChecko
   const steps = [step1, step2, step3, step4]
 
   return (
-    <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-[51]">        
-      <Main className='grid grid-cols-5 justify-center gap-8 overflow-y-auto h-full'>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='absolute sm:ml-2 sm:mt-2'
-          onClick={() => {
-            setCurrentStep(0)
-            toggleCheckout()
-          }}
-        >
-          <ChevronLeft/>
-        </Button>
-
-        <div className='col-span-2 hidden md:flex'>
-          <Cart hideCheckout className='fixed justify-center border-none mt-10 w-1/3 max-w-[40rem]'/>
-        </div>
+    <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-[51]">  
+      <Toaster/>  
+      <Main className='flex flex-col gap-1 h-full'>
+        <div className='flex justify-between'>
+          <Button
+            variant='ghost'
+            size='icon'
+            className='sm:ml-2 sm:mt-2'
+            onClick={() => {
+              setCurrentStep(0)
+              toggleCheckout()
+            }}
+          >
+            <ChevronLeft/>
+          </Button>
+          <AuthWidget/>
+        </div>    
+
+        <div className='grid grid-cols-5 justify-center gap-8 h-full'>
+          <div className='col-span-2 hidden md:flex'>
+            <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-[40rem] mx-auto'>
-          <ApplyTypography className='w-full'>
-            <h3 className='!text-center w-1/2 mx-auto sm:w-full sm:mt-5'>FINALIZE PAYMENT</h3>
-          </ApplyTypography>
-          <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' : '')}>
-              1
-              <div className='relative text-foreground top-2 h-0 whitespace-nowrap'>Contact info</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' : '')}>
-              2
-              <div className='relative text-foreground top-2 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 === 3 ? 'bg-foreground text-muted-4' : '')}>
-              3
-              <div className='relative text-foreground top-2 h-0 whitespace-nowrap'>Shipping info</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 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>
+              <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>
+              <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>
             </div>
+            {steps[currentStep - 1]}
           </div>
-          {steps[currentStep - 1]}
         </div>
       </Main>
     </div>

package/components/checkout/pay-by-bank-transfer.tsx

@@ -27,13 +27,6 @@ const InfoField: React.FC<{label: string, value: ReactNode, copyValue: string}>
 
 const PayByBankTransfer: React.FC<{setCurrentStep: (step: number) => void}> = ({setCurrentStep}) => {
   return (<>
-    <EnhHeadingBlockComponent 
-      block={{blockType: 'enh-heading',
-        specifiers: 'center byline-center',
-        heading: { text: `WIRE INFO`, level: 3 },
-        byline: { text: 'Click the copy icon to copy text to your clipboard.', level: 6}
-      } satisfies EnhHeadingBlock as Block}
-    />
     <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>

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

@@ -47,10 +47,12 @@ const PayWithCrypto: React.FC<{
   const [amount, setAmount] = useState<number>()
   const [availableAmount, setAvailableAmount] = useState<number>()
   const [provider, setProvider] = useState<ethers.BrowserProvider>()
+  const [transactionStatus, setTransactionStatus] = useState<'unpaid' | 'paid' | 'confirmed' | 'error'>('unpaid')
 
   //const selectedToken = 'eth'
 
   useEffect(() => {
+    setTransactionStatus('unpaid')
       // responding to changes in user.walletAddress
     return autorun(() => {
       const newProvider = new ethers.BrowserProvider(window.ethereum)
@@ -121,7 +123,17 @@ const PayWithCrypto: React.FC<{
       })
       console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
       console.log('tx', tx)
-      setCurrentStep(3)
+      setTransactionStatus('paid')
+
+      provider.waitForTransaction(tx.hash)
+        .then((receipt) => {
+          console.log(receipt)
+          setTransactionStatus('confirmed')
+        })
+        .catch((error) => {
+          console.log(error)
+          setTransactionStatus('error')
+        })
     } catch (err) {
       console.log(err)
       // :aa TODO string table
@@ -155,12 +167,18 @@ const PayWithCrypto: React.FC<{
         <Input value={amount ? amount/(10**18) : amount} contentEditable={false}/>
         <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>
-      <Button
-        onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
-        disabled={!amount || loadingPrice}
-      >
-        Pay now
-      </Button>
+      {transactionStatus === 'unpaid' || transactionStatus === 'error' ? (
+        <Button
+          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+          disabled={!amount || loadingPrice}
+        >
+          Pay now
+        </Button>
+      ) : transactionStatus === 'paid' ? (
+        <h4>Waiting for transaction to be confirmed on chain.</h4>
+      ) : (
+        <h4>Transaction confirmed!</h4>
+      )}
     </div>
   )
 
@@ -169,7 +187,7 @@ const PayWithCrypto: React.FC<{
       {payWidget}
       <div className='flex gap-4 items-center mt-6'>
         <Button variant='outline' onClick={() => setCurrentStep(1)} className='mx-auto w-full'>Back</Button>
-        <Button onClick={() => setCurrentStep(3)} className='mx-auto w-full'>Continue (Pay later)</Button>
+        <Button onClick={() => setCurrentStep(3)} disabled={transactionStatus !== 'confirmed'} className='mx-auto w-full'>Continue</Button>
       </div>
     </div>
   )

package/components/checkout/shipping-info.tsx

@@ -66,12 +66,6 @@ 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-center'>
-            <BookUser />
-            <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-              heading: { text: `Shipping address`, level: 4 },
-            } as EnhHeadingBlock}/>
-          </div>
           <div className='flex gap-4 items-end'>
             <FormField
               control={shippingForm.control}

package/package.json

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