@hanzo/commerce 7.3.2 → 7.3.4

package/components/checkout/payment-step-form/crypto-icons/btc.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Btc: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg viewBox="0.004 0 64 64" {...props}>
-		<path d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z" fill="#f7931a"/>
-		<path d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z" fill="#ffffff"/>
-	</svg>
-)
-
-export default Btc
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Btc: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0.004 0 64 64" {...props}>
+		<path d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z" fill="#f7931a"/>
+		<path d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z" fill="#ffffff"/>
+	</svg>
+)
+
+export default Btc

package/components/checkout/payment-step-form/crypto-icons/eth.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Eth: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg viewBox="0 0 32 32" {...props}>
-		<g fill="none" fillRule="evenodd">
-			<circle cx="16" cy="16" r="16" fill="#627EEA"/>
-			<g fill="#FFF" fillRule="nonzero">
-				<path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z"/>
-				<path d="M16.498 4L9 16.22l7.498-3.35z"/>
-				<path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z"/>
-				<path d="M16.498 27.995v-6.028L9 17.616z"/>
-				<path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/>
-				<path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/>
-			</g>
-		</g>
-	</svg>
-)
-
-export default Eth
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Eth: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fillRule="evenodd">
+			<circle cx="16" cy="16" r="16" fill="#627EEA"/>
+			<g fill="#FFF" fillRule="nonzero">
+				<path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z"/>
+				<path d="M16.498 4L9 16.22l7.498-3.35z"/>
+				<path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z"/>
+				<path d="M16.498 27.995v-6.028L9 17.616z"/>
+				<path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/>
+				<path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/>
+			</g>
+		</g>
+	</svg>
+)
+
+export default Eth

package/components/checkout/payment-step-form/crypto-icons/usdt.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Usdt: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg viewBox="0 0 32 32" {...props}>
-		<g fill="none" fill-rule="evenodd">
-		<circle cx="16" cy="16" r="16" fill="#26A17B"/>
-		<path fill="#FFF" d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118 0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116 0-1.043-3.301-1.914-7.694-2.117"/>
-		</g>
-	</svg>
-)
-
-export default Usdt
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Usdt: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fill-rule="evenodd">
+		<circle cx="16" cy="16" r="16" fill="#26A17B"/>
+		<path fill="#FFF" d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118 0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116 0-1.043-3.301-1.914-7.694-2.117"/>
+		</g>
+	</svg>
+)
+
+export default Usdt

package/components/checkout/payment-step-form/index.tsx

@@ -1,122 +1,122 @@
-'use client'
-import React, { 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 { useCommerce } from '../../../service/context'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
-import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
-
-import METHODS from './methods'
-
-const contactFormSchema = z.object({
-  name: z.string().min(1, 'Enter your full name.'),
-  email: z.string().email(),
-})
-
-const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
-  onDone,
-  orderId,
-  setOrderId
-}) => {
-  const cmmc = useCommerce()
-  const auth = useAuth() // may be null in some cases
-
-  const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('unpaid')
-
-  if (!auth) {
-    console.log("PAYMENT STEP FORM:  auth service is null! ")
-  }
-
-  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) => {
-    const {name, email} = contactForm.getValues()
-    let id: string | undefined = undefined
-    if (!orderId) {
-      id = await cmmc.createOrder(email, name)
-      setOrderId(id)
-    }
-    if (id) {
-      sendGAEvent('add_payment_info', {
-        items: cmmc.cartItems.map((item) => ({
-          item_id: item.sku,
-          item_name: item.title,
-          item_category: item.familyId,
-          price: item.price,
-          quantity: item.quantity
-        })),
-        value: cmmc.promoAppliedCartTotal,
-        currency: 'USD',
-        payment_type: paymentInfo.paymentMethod ?? ''
-      })
-      sendFBEvent('AddPaymentInfo', {
-        contents: cmmc.cartItems.map(item => ({
-          id: item.sku,
-          quantity: item.quantity
-        })),
-        value: cmmc.promoAppliedCartTotal,
-        currency: 'USD'
-      })
-      await cmmc.updateOrderPaymentInfo(id, paymentInfo)
-    }
-  }
-
-  const groupClx = 'grid w-full grid-cols-3 mx-auto ' + 
-    'p-0 h-auto overflow-hidden ' + 
-    'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 ' 
-
-  const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
-    'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
-
-  const disabled = transactionStatus === 'paid' || transactionStatus === 'confirmed'
-
-  return (
-    <Tabs defaultValue='card' className='w-full'>
-      <TabsList className={groupClx}>
-      {METHODS.map(({ label, value }) => (
-        <TabsTrigger
-          value={value}
-          className={tabClx}
-          disabled={disabled}
-          key={`tabs-${value}`}
-        >
-          {label}
-        </TabsTrigger>
-      ))}
-      </TabsList>
-      {METHODS.map(({Comp: PaymentMethodComp, value}) => (
-        <TabsContent value={value} key={`content-${value}`}>
-          <PaymentMethodComp 
-            onDone={onDone}
-            transactionStatus={transactionStatus}
-            setTransactionStatus={setTransactionStatus}
-            storePaymentInfo={storePaymentInfo}
-            contactForm={contactForm}
-          />
-        </TabsContent>
-      ))}
-    </Tabs>
-  )
-})
-
-export default PaymentStepForm
+'use client'
+import React, { 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 { useCommerce } from '../../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
+
+import METHODS from './methods'
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, 'Enter your full name.'),
+  email: z.string().email(),
+})
+
+const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
+  onDone,
+  orderId,
+  setOrderId
+}) => {
+  const cmmc = useCommerce()
+  const auth = useAuth() // may be null in some cases
+
+  const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('unpaid')
+
+  if (!auth) {
+    console.log("PAYMENT STEP FORM:  auth service is null! ")
+  }
+
+  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) => {
+    const {name, email} = contactForm.getValues()
+    let id: string | undefined = undefined
+    if (!orderId) {
+      id = await cmmc.createOrder(email, name)
+      setOrderId(id)
+    }
+    if (id) {
+      sendGAEvent('add_payment_info', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.promoAppliedCartTotal,
+        currency: 'USD',
+        payment_type: paymentInfo.paymentMethod ?? ''
+      })
+      sendFBEvent('AddPaymentInfo', {
+        contents: cmmc.cartItems.map(item => ({
+          id: item.sku,
+          quantity: item.quantity
+        })),
+        value: cmmc.promoAppliedCartTotal,
+        currency: 'USD'
+      })
+      await cmmc.updateOrderPaymentInfo(id, paymentInfo)
+    }
+  }
+
+  const groupClx = 'grid w-full grid-cols-3 mx-auto ' + 
+    'p-0 h-auto overflow-hidden ' + 
+    'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 ' 
+
+  const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
+    'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
+  const disabled = transactionStatus === 'paid' || transactionStatus === 'confirmed'
+
+  return (
+    <Tabs defaultValue='card' className='w-full'>
+      <TabsList className={groupClx}>
+      {METHODS.map(({ label, value }) => (
+        <TabsTrigger
+          value={value}
+          className={tabClx}
+          disabled={disabled}
+          key={`tabs-${value}`}
+        >
+          {label}
+        </TabsTrigger>
+      ))}
+      </TabsList>
+      {METHODS.map(({Comp: PaymentMethodComp, value}) => (
+        <TabsContent value={value} key={`content-${value}`}>
+          <PaymentMethodComp 
+            onDone={onDone}
+            transactionStatus={transactionStatus}
+            setTransactionStatus={setTransactionStatus}
+            storePaymentInfo={storePaymentInfo}
+            contactForm={contactForm}
+          />
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+})
+
+export default PaymentStepForm

package/components/checkout/payment-step-form/methods/bank-transfer.tsx

@@ -1,79 +1,79 @@
-'use client'
-
-import React from 'react'
-import { Copy } from 'lucide-react'
-
-import { Button, toast } from '@hanzo/ui/primitives'
-
-import type { PaymentMethodComponentProps } from '../../../../types'
-
-import ContactForm from '../contact-form'
-
-const InfoField: React.FC<{
-  label: string,
-  value: React.ReactNode,
-  copyValue: string
-}> = ({
-  label,
-  value,
-  copyValue
-}) => {
-
-  const copyToClipboard = (label: string, text: string) => {
-    navigator.clipboard.writeText(text)
-    toast(`${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 sm: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<PaymentMethodComponentProps> = ({
-  onDone,
-  storePaymentInfo,
-  contactForm
-}) => {
-
-  const payByBankTransfer = async () => {
-    contactForm.handleSubmit( async () => {
-      await storePaymentInfo({paymentMethod: 'bank-transfer'})
-      onDone()
-    })()
-  }
-
-  return (
-    <div className='flex flex-col gap-2 mt-6'>
-      <ContactForm form={contactForm}/>
-      <div className='w-full mx-auto max-w-[50rem]'>
-        <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>
-      </div>
-      <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
-    </div>
-  )
-}
-
-export default PayWithBankTransfer
+'use client'
+
+import React from 'react'
+import { Copy } from 'lucide-react'
+
+import { Button, toast } from '@hanzo/ui/primitives'
+
+import type { PaymentMethodComponentProps } from '../../../../types'
+
+import ContactForm from '../contact-form'
+
+const InfoField: React.FC<{
+  label: string,
+  value: React.ReactNode,
+  copyValue: string
+}> = ({
+  label,
+  value,
+  copyValue
+}) => {
+
+  const copyToClipboard = (label: string, text: string) => {
+    navigator.clipboard.writeText(text)
+    toast(`${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 sm: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<PaymentMethodComponentProps> = ({
+  onDone,
+  storePaymentInfo,
+  contactForm
+}) => {
+
+  const payByBankTransfer = async () => {
+    contactForm.handleSubmit( async () => {
+      await storePaymentInfo({paymentMethod: 'bank-transfer'})
+      onDone()
+    })()
+  }
+
+  return (
+    <div className='flex flex-col gap-2 mt-6'>
+      <ContactForm form={contactForm}/>
+      <div className='w-full mx-auto max-w-[50rem]'>
+        <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>
+      </div>
+      <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
+    </div>
+  )
+}
+
+export default PayWithBankTransfer