@hanzo/commerce 4.9.0 → 5.1.0

package/components/checkout-panel/mobile.tsx

@@ -1,41 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { StepIndicator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import CloseButton from './close-button'
-import CartAccordian from './cart-accordian'
-
-const MobilePanel: React.FC<PropsWithChildren & {
-  index: number
-  stepNames: string[]
-  close:() => void
-  className?: string
-}> = ({
-  index,
-  stepNames,
-  close,
-  className='',
-  children
-}) => (
-
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4', className)}>
-    <div className='sticky top-0 w-full flex flex-row justify-between items-start bg-background'>
-      <CloseButton close={close} className='rounded-full bg-background hover:bg-background p-1 -ml-3' />
-      <StepIndicator 
-        dotSizeRem={1} 
-        steps={stepNames} 
-        currentStep={index} 
-        className='text-xs font-semibold w-pr-70 mt-3' 
-      />
-      {/* Need wrapper div since 'noLogin' returns null if no logged in user */}
-      <div className='w-10 h-10 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
-    </div>
-    <CartAccordian className='flex items-center justify-center py-2 mt-2 w-full' />
-    {children}
-  </div>
-)
-
-export default MobilePanel

package/components/checkout-panel/steps/payment/contact-info.tsx

@@ -1,56 +0,0 @@
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@hanzo/ui/primitives/form'
-import { Input } from '@hanzo/ui/primitives'
-import type { UseFormReturn } from 'react-hook-form'
- 
-const ContactInfo: React.FC<{
-  form: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>,
-}> = ({
-  form,
-}) => {
-  return (
-    <Form {...form}>
-      <form className='text-left'>
-        <div className='flex flex-col gap-1 sm:gap-2'>
-          <FormField
-            control={form.control}
-            name='name'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormControl>
-                  <Input {...field} className='border-muted-4' placeholder='Full name'/>
-                </FormControl>
-                <FormMessage className='py-0 space-y-0 !m-0'/>
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormControl>
-                  <Input {...field} className='border-muted-4' placeholder='Email'/>
-                </FormControl>
-                <FormMessage className='py-0 space-y-0 !m-0'/>
-              </FormItem>
-            )}
-          />
-        </div>
-      </form>
-    </Form>
-  )
-}
-
-export default ContactInfo

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

@@ -1,110 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Copy } from 'lucide-react'
-import type { UseFormReturn } from 'react-hook-form'
-
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger, toast } from '@hanzo/ui/primitives'
-import ContactInfo from './contact-info'
-
-const InfoField: React.FC<{
-  label: string,
-  value: 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<{
-  onDone: () => void
-  storePaymentInfo: (paymentInfo: any) => Promise<void>
-  contactForm: UseFormReturn<{
-    name: string
-    email: string
-  }, any, {
-    name: string
-    email: string
-  }>
-}> = ({
-  onDone,
-  storePaymentInfo,
-  contactForm
-}) => {
-
-  const payByBankTransfer = async () => {
-    contactForm.handleSubmit( async () => {
-      await storePaymentInfo({paymentMethod: 'bank-transfer'})
-      onDone()
-    })()
-  }
-
-  const groupClx = 'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 p-0 h-auto overflow-hidden rounded-md'
-  const tabClx = 'text-muted data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
-
-  return (
-    <div className='flex flex-col gap-2 mt-6'>
-      <ContactInfo form={contactForm}/>
-      <Tabs defaultValue="usd" className='w-full mx-auto max-w-[50rem]'>
-        <TabsList className={"grid w-full grid-cols-2 max-w-[15rem] mx-auto " + groupClx}>
-          <TabsTrigger className={tabClx} value="usd">USD</TabsTrigger>
-          <TabsTrigger className={tabClx} value="eur">EUR/GBP</TabsTrigger>
-        </TabsList>
-        <TabsContent value="usd">
-          <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>
-        </TabsContent>
-        <TabsContent value="eur">
-          <div className='flex flex-col gap-4 w-full'>
-            <InfoField
-              label='Beneficiary Bank'
-              value={<div>Clear Junction Limited<br/>4th floor<br/>Imperial House</div>}
-              copyValue='Clear Junction Limited, 4th floor, Imperial House'
-            />
-            <InfoField label='Account Number (GBP)' value='33781813' copyValue='33781813'/>
-            <InfoField label='Account Name' value='AiDLT Global Ltd.' copyValue='AiDLT Global Ltd.'/>
-            <InfoField label='SWIFT/BIC' value='CLJUGB21' copyValue='CLJUGB21'/>
-            <InfoField label='Sort Code (GBP)' value='041307' copyValue='041307'/>
-            <InfoField label='IBAN' value='GB75 CLJU 0413 0733 78181 3' copyValue='GB75 CLJU 0413 0733 78181 3'/>
-            <InfoField label='Reference' value='Lux' copyValue='Lux'/>
-          </div>
-        </TabsContent>
-      </Tabs>
-      <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
-    </div>
-  )
-}
-
-export default PayWithBankTransfer

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

@@ -1,246 +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 { 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: '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>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-
-          </>
-        )}
-      </ApplyTypography>
-    </PaymentForm>
-  )
-}
-
-export default PayWithCard

package/components/checkout-panel/steps/thank-you.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { ApplyTypography } from '@hanzo/ui/primitives'
-
-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>
-    <p>
-      While you wait, we cordially invite you to join the <Link href='https://warpcast.com/~/channel/lux'>Lux Channel</Link> on <Link href='https://warpcast.com/~/invite-page/227706?id=fbc9ca91'>Warpcast</Link>.
-    </p>
-  </ApplyTypography>
-)
-
-export default ThankYou

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

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