@hanzo/commerce 4.9.0 → 5.1.0

package/components/{checkout-panel/steps/payment → payment-step-form}/index.tsx

@@ -1,6 +1,5 @@
 'use client'
-
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -9,22 +8,19 @@ 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 } from '../../../../service/context'
-import type { TransactionStatus } from '../../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import { useCommerce } from '../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../types'
 
-import type { StepComponentProps } from '../types'
+import METHODS from './methods'
 
 const contactFormSchema = z.object({
   name: z.string().min(1, 'Enter your full name.'),
   email: z.string().email(),
 })
 
-const Payment: React.FC<StepComponentProps> = observer(({
+const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
   onDone,
   orderId,
   setOrderId
@@ -64,7 +60,7 @@ const Payment: React.FC<StepComponentProps> = observer(({
           price: item.price,
           quantity: item.quantity
         })),
-        value: cmmc.cartTotal,
+        value: cmmc.promoAppliedCartTotal,
         currency: 'USD',
         payment_type: paymentInfo.paymentMethod ?? ''
       })
@@ -73,7 +69,7 @@ const Payment: React.FC<StepComponentProps> = observer(({
           id: item.sku,
           quantity: item.quantity
         })),
-        value: cmmc.cartTotal,
+        value: cmmc.promoAppliedCartTotal,
         currency: 'USD'
       })
       await cmmc.updateOrderPaymentInfo(id, paymentInfo)
@@ -87,58 +83,35 @@ const Payment: React.FC<StepComponentProps> = observer(({
   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 sm:max-w-[500px] sm:mx-auto'>
+    <Tabs defaultValue='card' className='w-full'>
       <TabsList className={groupClx}>
+      {METHODS.map(({ label, value }) => (
         <TabsTrigger
-          value='card'
-          className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
-        >
-          Card
-        </TabsTrigger>
-        <TabsTrigger
-          value='crypto'
-          className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
-        >
-          Wallet
-        </TabsTrigger>
-        <TabsTrigger
-          value='bank'
+          value={value}
           className={tabClx}
-          disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
+          disabled={disabled}
+          key={`tabs-${value}`}
         >
-          Bank Wire
+          {label}
         </TabsTrigger>
+      ))}
       </TabsList>
-      <TabsContent value='card'>
-        <PayWithCard
-          onDone={onDone}
-          transactionStatus={transactionStatus}
-          setTransactionStatus={setTransactionStatus}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
-      <TabsContent value='crypto'>
-        <PayWithCrypto
-          onDone={onDone}
-          transactionStatus={transactionStatus}
-          setTransactionStatus={setTransactionStatus}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
-      <TabsContent value='bank'>
-        <PayWithBankTransfer
-          onDone={onDone}
-          storePaymentInfo={storePaymentInfo}
-          contactForm={contactForm}
-        />
-      </TabsContent>
+      {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 Payment
+export default PaymentStepForm

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

@@ -0,0 +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

package/components/payment-step-form/methods/card.tsx

@@ -0,0 +1,237 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
+
+import { ChevronRight } from 'lucide-react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography, 
+  Button, 
+  Skeleton, 
+  buttonVariants
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { useCommerce } from '../../../service/context'
+import { processSquareCardPayment } from '../../../util'
+import type { PaymentMethodComponentProps } from '../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+
+import ContactInfo from '../contact-form'
+import PaymentMethods from '../card-icon-row'
+
+const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
+  onDone,
+  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.promoAppliedCartTotal, verifiedBuyer.token)
+      if (res) {
+        await storePaymentInfo({paymentMethod: token.details.method ?? null, processed: res})
+        setTransactionStatus('confirmed')
+        sendGAEvent('purchase', {
+          transaction_id: res.payment?.id,
+          value: res.payment?.amountMoney?.amount,
+          currency: res.payment?.amountMoney?.currency,
+          items: cmmc.cartItems.map((item) => ({
+            item_id: item.sku,
+            item_name: item.title,
+            item_category: item.categoryId,
+            price: item.price,
+            quantity: item.quantity
+          })),
+        })
+        sendFBEvent('Purchase', {
+          content_ids: cmmc.cartItems.map((item) => item.sku),
+          contents: cmmc.cartItems.map(item => ({
+            id: item.sku,
+            quantity: item.quantity
+          })),
+          num_items: cmmc.cartItems.length,
+          value: cmmc.promoAppliedCartTotal,
+          currency: 'USD',
+        })
+      } else {
+        setTransactionStatus('error')
+      }  
+    })() 
+  }
+
+  const createVerificationDetails = () => {
+    const {name, email} = contactForm.getValues()
+    return {
+      amount: cmmc.promoAppliedCartTotal.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.promoAppliedCartTotal.toFixed(2),
+      label: "Total",
+    },
+  })
+
+  /**
+   * Reload payment form after checkout value changes (promo code applied, etc.)
+   * Reloading is required so that Apple Pay and Google Pay buttons are updated for new cart total.
+   */
+  const [loadingPaymentForm, setLoadingPaymentForm] = useState<boolean>(false)
+  useEffect(() => {
+    setLoadingPaymentForm(true)
+    const timeout = setTimeout(() => setLoadingPaymentForm(false), 1000)
+    return () => clearTimeout(timeout)
+  }, [cmmc.promoAppliedCartTotal])
+
+  if (loadingPaymentForm) {
+    return (
+      <div className='flex flex-col gap-2'>
+        <Skeleton className='w-full h-10' />
+        <Skeleton className='w-full h-10' />
+      </div>
+    )
+  }
+
+  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}
+    >
+      <ApplyTypography className='flex flex-col mt-6 gap-1'>
+        {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={onDone}>Continue</Button>
+          </div>
+        ) : (
+          <div className='flex flex-col gap-1'>
+            <GooglePay/>
+            <ApplePay/>
+            
+            <div className='flex gap-2 whitespace-nowrap items-center my-1 sm:my-3 text-xs text-muted'>
+              <hr className='grow border'/><div className='shrink-0 mx-1'>or</div><hr className='grow border'/>
+            </div>
+
+            <PaymentMethods />
+
+            <ContactInfo form={contactForm}/>
+            {/* 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: '#404040',
+                  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: 'transparent',
+                  color: '#FFFFFF',
+                  fontSize: '15px',
+                  fontFamily: 'helvetica neue, sans-serif',
+                },
+                'input::placeholder': {
+                  color: '#999999',
+                },
+                'input.is-error': {
+                  color: '#ff1600',
+                },
+              }}
+              render={(Button: any) => (
+                <Button className={cn(
+                  'items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
+                  'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+                  '!bg-primary !text-primary-fg hover:!bg-primary-hover font-nav whitespace-nowrap not-typography h-10 py-2 px-4',
+                  '!text-sm rounded-md lg:min-w-[220px] sm:min-w-[220px] flex'
+                )}>
+                  Pay
+                </Button>
+              )}
+            />
+            {transactionStatus === 'error' && (
+              <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
+            )}
+          </div>
+        )}
+      </ApplyTypography>
+    </PaymentForm>
+  )
+})
+
+export default PayWithCard

package/components/{checkout-panel/steps/payment/pay-with-crypto.tsx → payment-step-form/methods/crypto.tsx}

@@ -18,14 +18,12 @@ import {
   toast 
 } from '@hanzo/ui/primitives'
 
-import { useAuth } from '@hanzo/auth/service'
+import Eth from '../crypto-icons/eth'
+import { useCommerce } from '../../../service/context'
+import type { PaymentMethodComponentProps } from '../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
-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 { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import ContactForm from '../contact-form'
 
 declare global {
   interface Window{
@@ -33,19 +31,7 @@ declare global {
   }
 }
 
-const PayWithCrypto: React.FC<{
-  onDone: () => void
-  transactionStatus: TransactionStatus
-  setTransactionStatus: (status: TransactionStatus) => void
-  storePaymentInfo: (paymentInfo: any) => Promise<void>
-  contactForm: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>
-}> = observer(({
+const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
   onDone,
   transactionStatus,
   setTransactionStatus,
@@ -53,7 +39,7 @@ const PayWithCrypto: React.FC<{
   contactForm
 }) => {
   const cmmc = useCommerce()
-  const auth = useAuth()
+
   const [loadingPrice, setLoadingPrice] = useState(false)
   //const [selectedToken, setSelectedToken] = useState('eth')
   const [amount, setAmount] = useState<number>()
@@ -78,7 +64,7 @@ const PayWithCrypto: React.FC<{
         .then(res => res.json())
         .then((exchangeRate) => {
           const oneUsdInWei = (10**18) / exchangeRate.data.amount
-          const usdAmountInWei = oneUsdInWei * cmmc.cartTotal 
+          const usdAmountInWei = oneUsdInWei * cmmc.promoAppliedCartTotal 
           setAmount(usdAmountInWei)
           setLoadingPrice(false)
         })
@@ -91,7 +77,7 @@ const PayWithCrypto: React.FC<{
     const interval = setInterval(fetchPrice, 30000)
 
     return () => clearInterval(interval)
-  }, [cmmc.cartTotal])
+  }, [cmmc.promoAppliedCartTotal])
 
   const sendPayment = async (ether: number) => {
     contactForm.handleSubmit(async () => {
@@ -188,7 +174,7 @@ const PayWithCrypto: React.FC<{
   return (
     <div className='flex flex-col gap-6 mt-6'>
       <div className='flex flex-col gap-2 w-full'>
-        <ContactInfo form={contactForm}/>
+        <ContactForm form={contactForm}/>
         <div className='flex gap-2 grid grid-cols-3'>
           <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
             <SelectTrigger>

package/components/payment-step-form/methods/index.ts

@@ -0,0 +1,23 @@
+import type { PaymentMethodDesc } from '../../../types'
+
+import Card from './card'
+import Crypto from './crypto'
+import BankTransfer from './bank-transfer'
+
+export default [
+  {
+    value: 'card',
+    label: 'Card',
+    Comp: Card
+  },
+  {
+    value: 'crypto',
+    label: 'Wallet',
+    Comp: Crypto
+  },
+  {
+    value: 'bank',
+    label: 'Bank Wire',
+    Comp: BankTransfer
+  },
+] satisfies PaymentMethodDesc[]

package/components/product-card.tsx

@@ -13,7 +13,7 @@ import {
 import type { ImageDef } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
 
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import type { LineItem } from '../types'
 import { Icons } from './Icons'
 
@@ -66,7 +66,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
       <CardContent className='grid gap-2.5 p-4'>
         <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
           {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
-          <p className='mt-1 font-semibold'>{formatPrice(item.price)}</p>
+          <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
         </CardTitle>
       </CardContent>
       <CardFooter className='p-4 flex flex-row justify-center'>

package/components/select-category-item-panel.tsx

@@ -7,7 +7,7 @@ import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
 import type { ItemSelector } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import { Icons } from './Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
@@ -132,7 +132,7 @@ const SelectCategoryItemPanel: React.FC<
         </h3>
         {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
-            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatPrice(selectedItemRef.item.price)}
+            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
           </h6>
         ) : ''}
       </div>

package/components/{checkout-panel/steps/shipping-info.tsx → shipping-step-form.tsx}

@@ -1,6 +1,5 @@
 'use client'
 
-
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -12,7 +11,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
   Select, 
   SelectContent, 
@@ -21,12 +19,12 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../..'
+import { useCommerce } from '../service/context'
 
-import countries from '../../../util/countries'
-import { sendGAEvent } from '../../../util/analytics'
+import countries from '../util/countries'
+import { sendGAEvent } from '../util/analytics'
 
-import type { StepComponentProps } from './types'
+import type { CheckoutStepComponentProps } from '../types'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
@@ -37,7 +35,7 @@ const shippingFormSchema = z.object({
   country: z.string().min(2, 'Country is invalid.'),
 })
 
-const ShippingInfo: React.FC<StepComponentProps> = ({
+const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
   orderId,
   onDone
 }) => { 
@@ -171,4 +169,4 @@ const ShippingInfo: React.FC<StepComponentProps> = ({
   )
 }
 
-export default ShippingInfo
+export default ShippingStepForm

package/index.ts

@@ -1,4 +1,4 @@
 export * from './service/context'
 export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatPrice } from './util'
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue } from './util'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.9.0",
+  "version": "5.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.3.2",
-    "@hanzo/ui": "^3.0.18",
+    "@hanzo/ui": "^3.0.19",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",

package/service/context.tsx

@@ -29,6 +29,7 @@ const CommerceServiceProvider: React.FC<PropsWithChildren & {
   options
 }) => {
 
+    // TODO: Inject Promo fixture here
   const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootFacet, options))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>