@hanzo/commerce 4.7.0 → 4.8.0

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

@@ -0,0 +1,246 @@
+'use client'
+import React from 'react'
+
+import type { UseFormReturn } from 'react-hook-form'
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
+
+import { ChevronRight } from 'lucide-react'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography, 
+  Button, 
+  buttonVariants
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { processSquareCardPayment } from '../../../../util'
+import { useCommerce } from '../../../../service/context'
+import type { TransactionStatus } from '../../../../types'
+
+import ContactInfo from './contact-info'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import PaymentMethods from './cards'
+
+const PayWithCard: 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
+  }>
+}> = ({
+  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.cartTotal, verifiedBuyer.token)
+      if (res) {
+        console.log(token)
+        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.cartTotal,
+          currency: 'USD',
+        })
+      } else {
+        setTransactionStatus('error')
+      }  
+    })() 
+  }
+
+  const createVerificationDetails = () => {
+    const {name, email} = contactForm.getValues()
+    return {
+      amount: cmmc.cartTotal.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.cartTotal.toFixed(2),
+      label: "Total",
+    },
+  })
+
+  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>
+        ) : (
+          <>
+            <GooglePay/>
+            <ApplePay/>
+            
+            <div className='flex gap-2 whitespace-nowrap items-center my-0.5 sm:my-1 text-xs text-muted'>
+              <hr className='grow border'/><div className='shrink-0 mx-1'>or</div><hr className='grow border'/>
+            </div>
+
+            <Accordion type="single" collapsible className={''}>
+              <AccordionItem value="cart" className='w-full border-b-0 data-[state=open]:border data-[state=open]:px-3 rounded '>
+                <AccordionTrigger className={cn(
+                  buttonVariants({variant: 'outline', size: 'lg'}),
+                  '!no-underline group flex justify-between ',
+                  'bg-transparent hover:bg-transparent border-muted-2 hover:border-muted-2',
+                  'data-[state=open]:border-none data-[state=open]:py-0 px-4 data-[state=open]:px-1'
+                )}>
+                  <div className='font-sans text-base mr-2 text-muted'>CC</div>
+                  <PaymentMethods />
+                  <div>
+                    <ChevronRight className="h-5 w-5 -mr-2 text-muted shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 hidden group-data-[state=open]:block" />
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className='data-[state=open]:mb-4 data-[state=open]:mt-1'>
+                  <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: '#1f1f1f',
+                        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>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+          </>
+        )}
+      </ApplyTypography>
+    </PaymentForm>
+  )
+}
+
+export default PayWithCard

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

@@ -20,12 +20,12 @@ import {
 
 import { useAuth } from '@hanzo/auth/service'
 
-import Eth from '../icons/eth'
-import { useCommerce } from '../../../service/context'
-import type { TransactionStatus } from '../../../types'
+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 { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 
 declare global {
   interface Window{
@@ -34,7 +34,7 @@ declare global {
 }
 
 const PayWithCrypto: React.FC<{
-  setStep: (currentStep: number) => void
+  onDone: () => void
   transactionStatus: TransactionStatus
   setTransactionStatus: (status: TransactionStatus) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
@@ -46,7 +46,7 @@ const PayWithCrypto: React.FC<{
     email: string
   }>
 }> = observer(({
-  setStep,
+  onDone,
   transactionStatus,
   setTransactionStatus,
   storePaymentInfo,
@@ -182,7 +182,7 @@ const PayWithCrypto: React.FC<{
     await storePaymentInfo({
       paymentMethod: 'crypto'
     })
-    setStep(2)
+    onDone()
   }
 
   return (

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

@@ -21,10 +21,12 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../..'
+import { useCommerce } from '../../..'
 
-import { countries } from './countries'
-import { sendGAEvent } from '../../util/analytics'
+import countries from '../../../util/countries'
+import { sendGAEvent } from '../../../util/analytics'
+
+import type { StepComponentProps } from './types'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
@@ -35,12 +37,9 @@ const shippingFormSchema = z.object({
   country: z.string().min(2, 'Country is invalid.'),
 })
 
-const ShippingInfo: React.FC<{
-  orderId?: string,
-  setStep: (currentStep: number) => void
-}> = ({
+const ShippingInfo: React.FC<StepComponentProps> = ({
   orderId,
-  setStep
+  onDone
 }) => { 
   const cmmc = useCommerce()
   
@@ -72,7 +71,7 @@ const ShippingInfo: React.FC<{
       value: cmmc.cartTotal,
       currency: 'USD',
     })
-    setStep(3)
+    onDone()
   }
 
   return (

package/components/checkout-panel/{thank-you.tsx → steps/thank-you.tsx}

@@ -1,8 +1,11 @@
 import React from 'react'
 import Link from 'next/link'
+
 import { ApplyTypography } from '@hanzo/ui/primitives'
 
-const ThankYou: React.FC = () =>  (
+import type { StepComponentProps } from './types'
+
+const ThankYou: React.FC<StepComponentProps> = ({}) =>  (
   <ApplyTypography className='flex flex-col gap-4 text-center mt-10'>
     <h3>Thank you for your order!</h3>
     <h6>Once your payment has been confirmed we will send additional information to your email.</h6>

package/components/checkout-panel/steps/types.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react'
+ 
+export interface StepComponentProps {
+  onDone: () => void
+  orderId: string | undefined
+  setOrderId: (orderId: string | undefined) => void
+}
+
+export interface CheckoutStep {
+  name: string  
+  label?: string 
+  Comp: ComponentType<StepComponentProps>
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -39,8 +39,8 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.3.1",
-    "@hanzo/ui": "^3.0.9",
+    "@hanzo/auth": "^2.3.2",
+    "@hanzo/ui": "^3.0.10",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",

package/{components/checkout-panel → util}/countries.ts

@@ -1,5 +1,5 @@
 //https://stefangabos.github.io/world_countries/
-export const countries = [ 
+export default [ 
   {"id":4,"alpha2":"af","alpha3":"afg","name":"Afghanistan"},
   {"id":8,"alpha2":"al","alpha3":"alb","name":"Albania"},
   {"id":12,"alpha2":"dz","alpha3":"dza","name":"Algeria"},

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

@@ -1,222 +0,0 @@
-'use client'
-import React from 'react'
-
-import type { UseFormReturn } from 'react-hook-form'
-// @ts-ignore
-import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
-
-import { ApplyTypography, Button } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { processSquareCardPayment } from '../../../util'
-import { useCommerce } from '../../../service/context'
-import type { TransactionStatus } from '../../../types'
-
-import PaymentMethods from './payment-methods'
-import ContactInfo from './contact-info'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
-
-const PayWithCard: React.FC<{
-  setStep: (currentStep: number) => void
-  transactionStatus: TransactionStatus
-  setTransactionStatus: (status: TransactionStatus) => void
-  storePaymentInfo: (paymentInfo: any) => Promise<void>
-  contactForm: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>
-}> = ({
-  setStep,
-  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.cartTotal, verifiedBuyer.token)
-      if (res) {
-        console.log(token)
-        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.cartTotal,
-          currency: 'USD',
-        })
-      } else {
-        setTransactionStatus('error')
-      }  
-    })() 
-  }
-
-  const createVerificationDetails = () => {
-    const {name, email} = contactForm.getValues()
-    return {
-      amount: cmmc.cartTotal.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.cartTotal.toFixed(2),
-      label: "Total",
-    },
-  })
-
-  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'>
-        {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>
-        ) : (
-          <>
-            <GooglePay/>
-            <ApplePay/>
-            
-            <div className='flex gap-2 whitespace-nowrap items-center my-1 sm:my-2 text-xs text-foreground/60'>
-              <hr className='bg-foreground/60 w-full border'/> or pay with card <hr className='bg-foreground/60 w-full border'/>
-            </div>
-
-            <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: '#1f1f1f',
-                  color: '#FFFFFF',
-                  fontSize: '15px',
-                  fontFamily: 'helvetica neue, sans-serif',
-                },
-                'input::placeholder': {
-                  color: '#999999',
-                },
-                'input.is-error': {
-                  color: '#ff1600',
-                },
-              }}
-              render={(Button: any) => (<>
-                <PaymentMethods/>
-                <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>
-              </>)}
-            >
-              
-            </CreditCard>
-            
-            {transactionStatus === 'error' && (
-              <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
-            )}
-          </>
-        )}
-      </ApplyTypography>
-    </PaymentForm>
-  )
-}
-
-export default PayWithCard

package/components/checkout-panel/step-indicator.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { Separator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import type { CheckoutSteps } from './step'
-
-const StepIndicator: React.FC<{
-  steps: CheckoutSteps
-  currentStep: number
-  className?: string
-}> = ({
-  steps,
-  currentStep,
-  className=''
-}) => ( 
-  <div className={className}>
-  {Object.keys(steps).map((key, index) => (<>
-    {index !== 0 && (<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 === parseInt(key) ? 'bg-foreground text-muted-4' : ''
-    )}>
-      <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>{steps[parseInt(key)].label}</div>
-    </div>
-  </>))}
-  </div>
-)
-
-export default StepIndicator

package/components/checkout-panel/step.ts

@@ -1,11 +0,0 @@
-interface CheckoutStep {
-  label: string 
-  element: JSX.Element
-}
-
-type CheckoutSteps = Record<number, CheckoutStep>
-
-export {
-  type CheckoutStep,
-  type CheckoutSteps
-}