@hanzo/commerce 7.5.0 → 7.5.1

package/dist/components/checkout/payment-step-form/index.jsx

@@ -0,0 +1,86 @@
+'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 METHODS from './methods';
+const contactFormSchema = z.object({
+    name: z.string().min(1, 'Enter your full name.'),
+    email: z.string().email(),
+});
+const PaymentStepForm = observer(({ onDone, orderId, setOrderId }) => {
+    const cmmc = useCommerce();
+    const auth = useAuth(); // may be null in some cases
+    const [transactionStatus, setTransactionStatus] = useState('unpaid');
+    if (!auth) {
+        console.log("PAYMENT STEP FORM:  auth service is null! ");
+    }
+    const contactForm = useForm({
+        // @ts-expect-error Zod version incompatibility between ZodTypeDef and $ZodTypeInternals
+        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) => {
+        const { name, email } = contactForm.getValues();
+        let id = 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;
+//# sourceMappingURL=index.jsx.map

package/dist/components/checkout/payment-step-form/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../components/checkout/payment-step-form/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/checkout/payment-step-form/methods/bank-transfer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PaymentMethodComponentProps } from '../../../../types';
+declare const PayWithBankTransfer: React.FC<PaymentMethodComponentProps>;
+export default PayWithBankTransfer;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Copy } from 'lucide-react';
+import { Button, toast } from '@hanzo/ui/primitives';
+import ContactForm from '../contact-form';
+const InfoField = ({ label, value, copyValue }) => {
+    const copyToClipboard = (label, text) => {
+        navigator.clipboard.writeText(text);
+        toast(`${label} copied to clipboard.`);
+    };
+    return (_jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-xs', children: label }), _jsxs("div", { className: 'flex items-center justify-between sm:text-lg border rounded-lg py-2 px-4', children: [value, _jsx(Button, { variant: 'ghost', size: 'icon', onClick: () => copyToClipboard(label, copyValue), children: _jsx(Copy, { className: 'h-4 w-4' }) })] })] }));
+};
+const PayWithBankTransfer = ({ onDone, storePaymentInfo, contactForm }) => {
+    const payByBankTransfer = async () => {
+        contactForm.handleSubmit(async () => {
+            await storePaymentInfo({ paymentMethod: 'bank-transfer' });
+            onDone();
+        })();
+    };
+    return (_jsxs("div", { className: 'flex flex-col gap-2 mt-6', children: [_jsx(ContactForm, { form: contactForm }), _jsx("div", { className: 'w-full mx-auto max-w-[50rem]', children: _jsxs("div", { className: 'flex flex-col gap-4 w-full', children: [_jsx(InfoField, { label: 'Beneficiary Bank', value: _jsxs("div", { children: ["Bank of America", _jsx("br", {}), "NA 222 Broadway", _jsx("br", {}), "New York, New York. 10038"] }), copyValue: 'Bank of America, NA 222 Broadway, New York, New York. 10038' }), _jsx(InfoField, { label: 'Beneficiary', value: _jsxs("div", { children: ["Hanzo, Inc", _jsx("br", {}), "4811 Mastin Street", _jsx("br", {}), "Merriam, KS 66203"] }), copyValue: 'Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203' }), _jsx(InfoField, { label: 'Routing Number - ACH', value: '113000023 / 111000025', copyValue: '113000023 / 111000025' }), _jsx(InfoField, { label: 'Routing Number - Wire', value: '026009593', copyValue: '026009593' }), _jsx(InfoField, { label: 'Routing Number - SWIFT', value: 'BOFAUS3N', copyValue: 'BOFAUS3N' }), _jsx(InfoField, { label: 'Reference', value: 'Lux', copyValue: 'Lux' })] }) }), _jsx(Button, { onClick: payByBankTransfer, className: 'mx-auto w-full mt-4', children: "Continue" })] }));
+};
+export default PayWithBankTransfer;
+//# sourceMappingURL=bank-transfer.js.map

package/dist/components/checkout/payment-step-form/methods/bank-transfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bank-transfer.js","sourceRoot":"","sources":["../../../../../components/checkout/payment-step-form/methods/bank-transfer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAIpD,OAAO,WAAW,MAAM,iBAAiB,CAAA;AAEzC,MAAM,SAAS,GAIV,CAAC,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACV,EAAE,EAAE;IAEH,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;QACtD,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACnC,KAAK,CAAC,GAAG,KAAK,uBAAuB,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,YAAG,SAAS,EAAC,SAAS,YAAE,KAAK,GAAK,EAClC,eAAK,SAAS,EAAC,0EAA0E,aACtF,KAAK,EACN,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,YAClF,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAE,GACpB,IACL,IACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAA0C,CAAC,EAClE,MAAM,EACN,gBAAgB,EAChB,WAAW,EACZ,EAAE,EAAE;IAEH,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACnC,WAAW,CAAC,YAAY,CAAE,KAAK,IAAI,EAAE;YACnC,MAAM,gBAAgB,CAAC,EAAC,aAAa,EAAE,eAAe,EAAC,CAAC,CAAA;YACxD,MAAM,EAAE,CAAA;QACV,CAAC,CAAC,EAAE,CAAA;IACN,CAAC,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,WAAW,IAAC,IAAI,EAAE,WAAW,GAAG,EACjC,cAAK,SAAS,EAAC,8BAA8B,YAC3C,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,SAAS,IACR,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,6CAAoB,cAAK,qBAAe,cAAK,iCAA+B,EACnF,SAAS,EAAC,6DAA6D,GACvE,EACF,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,wCAAe,cAAK,wBAAkB,cAAK,yBAAuB,EACzE,SAAS,EAAC,mDAAmD,GAC7D,EACF,KAAC,SAAS,IAAC,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAC,uBAAuB,EAAC,SAAS,EAAC,uBAAuB,GAAE,EACzG,KAAC,SAAS,IAAC,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,WAAW,GAAE,EAClF,KAAC,SAAS,IAAC,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,GAAE,EACjF,KAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,KAAK,GAAE,IACtD,GACF,EACN,KAAC,MAAM,IAAC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAC,qBAAqB,yBAAkB,IACjF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import { Copy } from 'lucide-react';
+import { Button, toast } from '@hanzo/ui/primitives';
+import ContactForm from '../contact-form';
+const InfoField = ({ label, value, copyValue }) => {
+    const copyToClipboard = (label, text) => {
+        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 = ({ 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;
+//# sourceMappingURL=bank-transfer.jsx.map

package/dist/components/checkout/payment-step-form/methods/bank-transfer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"bank-transfer.jsx","sourceRoot":"","sources":["../../../../../components/checkout/payment-step-form/methods/bank-transfer.tsx"],"names":[],"mappings":"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"}

package/dist/components/checkout/payment-step-form/methods/card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PaymentMethodComponentProps } from '../../../../types';
+declare const PayWithCard: React.FC<PaymentMethodComponentProps>;
+export default PayWithCard;

package/dist/components/checkout/payment-step-form/methods/card.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk';
+import { observer } from 'mobx-react-lite';
+import { ApplyTypography, Button, Separator, Skeleton, } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import { useCommerce } from '../../../../service/context';
+import { processSquareCardPayment } from '../../../../util';
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics';
+import ContactInfo from '../contact-form';
+import PaymentMethods from '../card-icon-row';
+const PayWithCard = observer(({ onDone, transactionStatus, setTransactionStatus, storePaymentInfo, contactForm, }) => {
+    const cmmc = useCommerce();
+    const cardTokenizeResponseReceived = async (token, verifiedBuyer) => {
+        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.familyId,
+                        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(false);
+    useEffect(() => {
+        setLoadingPaymentForm(true);
+        const timeout = setTimeout(() => setLoadingPaymentForm(false), 1000);
+        return () => clearTimeout(timeout);
+    }, [cmmc.promoAppliedCartTotal]);
+    if (loadingPaymentForm) {
+        return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(Skeleton, { className: 'w-full h-10' }), _jsx(Skeleton, { className: 'w-full h-10' })] }));
+    }
+    return (_jsx(PaymentForm
+    /**
+     * Identifies the calling form with a verified application ID generated from
+     * the Square Application Dashboard.
+     */
+    , { 
+        /**
+         * 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 ?? '', children: _jsx(ApplyTypography, { className: 'flex flex-col mt-6 gap-1', children: transactionStatus === 'paid' ? (_jsx("h6", { className: 'mx-auto', children: "Processing your payment..." })) : transactionStatus === 'confirmed' ? (_jsxs("div", { className: 'flex flex-col gap-4', children: [_jsx("h5", { className: 'mx-auto', children: "Payment confirmed!" }), _jsx("p", { className: 'mx-auto', children: "Thank you for your purchase." }), _jsx(Button, { onClick: onDone, children: "Continue" })] })) : (_jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx(GooglePay, {}), _jsx(ApplePay, {}), _jsxs("div", { className: 'flex gap-2 whitespace-nowrap items-center my-1 sm:my-3 text-xs text-muted', children: [_jsx(Separator, { className: 'grow w-auto' }), _jsx("div", { className: 'shrink-0 mx-1', children: "or" }), _jsx(Separator, { className: 'grow w-auto' })] }), _jsx(PaymentMethods, {}), _jsx(ContactInfo, { form: contactForm }), _jsx(CreditCard, { style: {
+                            '.input-container': {
+                                borderColor: '#666666',
+                                borderRadius: '8px',
+                            },
+                            '.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) => (_jsx(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'), children: "Pay" })) }), transactionStatus === 'error' && (_jsx("p", { className: 'mx-auto text-destructive', children: "There was an error processing your payment." }))] })) }) }));
+});
+export default PayWithCard;
+//# sourceMappingURL=card.js.map

package/dist/components/checkout/payment-step-form/methods/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../components/checkout/payment-step-form/methods/card.tsx"],"names":[],"mappings":"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"}

package/dist/components/checkout/payment-step-form/methods/card.jsx

@@ -0,0 +1,182 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk';
+import { observer } from 'mobx-react-lite';
+import { ApplyTypography, Button, Separator, Skeleton, } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import { useCommerce } from '../../../../service/context';
+import { processSquareCardPayment } from '../../../../util';
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics';
+import ContactInfo from '../contact-form';
+import PaymentMethods from '../card-icon-row';
+const PayWithCard = observer(({ onDone, transactionStatus, setTransactionStatus, storePaymentInfo, contactForm, }) => {
+    const cmmc = useCommerce();
+    const cardTokenizeResponseReceived = async (token, verifiedBuyer) => {
+        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.familyId,
+                        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(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'>Processing your payment...</h6>) : transactionStatus === 'confirmed' ? (<div className='flex flex-col gap-4'>
+            <h5 className='mx-auto'>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'>
+              <Separator className='grow w-auto'/><div className='shrink-0 mx-1'>or</div><Separator className='grow w-auto'/>
+            </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: '#666666',
+                    borderRadius: '8px',
+                },
+                '.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) => (<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;
+//# sourceMappingURL=card.jsx.map

package/dist/components/checkout/payment-step-form/methods/card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.jsx","sourceRoot":"","sources":["../../../../../components/checkout/payment-step-form/methods/card.tsx"],"names":[],"mappings":"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"}

package/dist/components/checkout/payment-step-form/methods/crypto.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PaymentMethodComponentProps } from '../../../../types';
+declare global {
+    interface Window {
+        ethereum?: any;
+    }
+}
+declare const PayWithCrypto: React.FC<PaymentMethodComponentProps>;
+export default PayWithCrypto;