@hanzo/commerce 4.5.0 → 4.7.0

package/components/add-to-cart-widget.tsx

@@ -7,6 +7,7 @@ import { cn } from '@hanzo/ui/util'
 
 import { Icons } from './Icons'
 import type { LineItem } from '../types'
+import { sendFBEvent, sendGAEvent } from '../util/analytics'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
@@ -50,7 +51,27 @@ const AddToCartWidget: React.FC<{
     else {
       toast(`Changed quantity to ${old + 1} for ${item.title}.`)
     }
-
+    sendGAEvent('add_to_cart', {
+      items: [{
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.categoryId,
+        price: item.price,
+        quantity: item.quantity
+      }],
+      value: item.price,
+      currency: 'USD',
+    })
+    sendFBEvent('AddToCart', {
+      content_ids: [item.sku],
+      contents: [{
+        id: item.sku,
+        quantity: item.quantity
+      }],
+      content_name: item.title,
+      value: item.price,
+      currency: 'USD',
+    })
   }
 
   const dec = () => {
@@ -65,6 +86,17 @@ const AddToCartWidget: React.FC<{
     else {
       toast(`Changed quantity to ${old - 1} for ${item.title}.`)
     }
+    sendGAEvent('remove_from_cart', {
+      items: [{
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.categoryId,
+        price: item.price,
+        quantity: item.quantity
+      }],
+      value: item.price,
+      currency: 'USD',
+    })
   }
 
   return ( item.isInCart ? (

package/components/cart-panel/index.tsx

@@ -9,11 +9,14 @@ import { useCommerce } from '../../service/context'
 import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import ProductsCarousel from './products-carousel'
 
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
   noCheckout?: boolean
+  showProductsCarousel?: boolean
   onCheckoutOpen?: () => void
 }> = observer(({
     /** Children is the heading area. */
@@ -21,6 +24,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   className='',
   isMobile=false,
   noCheckout=false,
+  showProductsCarousel=false,
   onCheckoutOpen,
 }) => {
   /* TODO: onCheckoutOpen is a hackish way fix a bug with multiple dialog opened at the same time.
@@ -31,9 +35,35 @@ const CartPanel: React.FC<PropsWithChildren & {
     return <div />
   }
 
+  const showCheckout = () => {
+    sendGAEvent('begin_checkout', {
+      currency: 'USD',
+      value: cmmc.cartTotal,
+      items: cmmc.cartItems.map((item) => ({
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.categoryId,
+        price: item.price,
+        quantity: item.quantity
+      })),
+    })
+    sendFBEvent('InitiateCheckout', {
+      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',
+    })
+    onCheckoutOpen && onCheckoutOpen()
+  }
+
   return (
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
+      {showProductsCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
       <div className='mt-2 w-full'>
         {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>
@@ -50,7 +80,7 @@ const CartPanel: React.FC<PropsWithChildren & {
             variant='primary' 
             rounded='lg' 
             className='mt-12 mx-auto w-full' 
-            onClick={onCheckoutOpen}
+            onClick={showCheckout}
           >
             Checkout
           </Button>

package/components/cart-panel/products-carousel.tsx

@@ -0,0 +1,60 @@
+import Spline from '@splinetool/react-spline'
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from '@hanzo/ui/primitives'
+import {
+  VideoBlockComponent,
+  ImageBlockComponent,
+  type ImageBlock,
+  type Block,
+  type VideoBlock
+} from '@hanzo/ui/blocks'
+
+import type { LineItem } from '../../types'
+
+  // Carousel content hierarchy: 3D > MP4 > Image
+const ProductsCarousel: React.FC<{
+  items: LineItem[]
+}> = ({ 
+  items,
+}) => (
+  <Carousel options={{ loop: true }} className='w-full max-w-sm mx-auto px-2' >
+    <CarouselContent>
+      {items.map(({title, img, video, animation}, index) => (
+        <CarouselItem key={index}>
+          <div className='flex aspect-square items-center justify-center p-6'>
+            {animation ? (
+              <Spline
+                scene={animation}
+                className='!aspect-[12/10] pointer-events-none !w-auto !h-auto'
+              />
+            ) : video ? (
+              <VideoBlockComponent
+                block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+              />
+            ) : (
+              <ImageBlockComponent
+                block={{
+                  blockType: 'image',
+                  src: img ?? '',
+                  alt: title + ' image',
+                  dim: { w: 250, h: 250 }
+                } satisfies ImageBlock as Block} 
+                className='m-auto'
+              />
+            )}
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+)
+
+export default ProductsCarousel

package/components/checkout-panel/cart-accordian.tsx

@@ -0,0 +1,39 @@
+'use client'
+import React  from 'react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+
+import { formatPrice, useCommerce } from '../..'
+
+import CartPanel from '../cart-panel'
+import BagIcon from './icons/bag-icon'
+
+const CartAccordian: React.FC<{className?: string}> = observer(({
+  className=''
+}) => { 
+
+  const cmmc = useCommerce()
+  return (
+    <Accordion type="single" collapsible className={className}>
+      <AccordionItem value="cart" className='w-full border-b-0'>
+        <AccordionTrigger className='!no-underline py-1'>
+          <div className='flex gap-4 items-center'>
+            <BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/>
+            <h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <CartPanel noCheckout className='border-none w-full'/>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+})
+
+export default CartAccordian

package/components/checkout-panel/index.tsx

@@ -4,24 +4,22 @@ import { useState }  from 'react'
 import { observer } from 'mobx-react-lite'
 
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
   Dialog,
   DialogPortal,
+  ScrollArea,
 } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
 
+import { useCommerce } from '../..'
+
 import ShippingInfo from './shipping-info'
 import ThankYou from './thank-you'
 import CartPanel from '../cart-panel'
 import Payment from './payment'
 import CloseButton from './close-button'
 import StepIndicator from './step-indicator'
-import BagIcon from './icons/bag-icon'
-import { formatPrice, useCommerce } from '../..'
+import CartAccordian from './cart-accordian'
 
 const CheckoutPanel: React.FC<{
   open: boolean
@@ -72,7 +70,7 @@ const CheckoutPanel: React.FC<{
   return (
     <Dialog open={open}>
       <DialogPortal>
-        <div id='PORTAL_OUTER'
+        <div /* id='PORTAL_OUTER' */
           className={cn(
             'fixed top-0 shadow-lg ',
             'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10',
@@ -80,35 +78,26 @@ const CheckoutPanel: React.FC<{
             '!max-w-none w-full h-full min-h-screen bg-transparent backdrop-blur-sm z-50'
           )}
         >
-          <div id='GRID' className='grid  grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
-            <div className='bg-background flex flex-row items-start justify-end'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-10 pb-0 md:pb-9'>
+          <div /* id='GRID' */ className='flex flex-col md:flex-row justify-center h-full overflow-y-auto md:overflow-y-hidden'>
+            <div className='w-full bg-background flex flex-row items-start justify-end'>
+              <ScrollArea className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-0 md:pb-9'>
                 <CloseButton onClose={onClose} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
                 <AuthWidget hideLogin className='flex md:hidden absolute top-3 right-3'/>
-                <CartPanel noCheckout className='border border-muted-2 mt-10 w-full max-w-[550px] hidden md:flex'/>
-
-                <Accordion type="single" collapsible className='flex items-center justify-center py-2 w-full md:hidden'>
-                  <AccordionItem value="cart" className='w-full border-b-0'>
-                    <AccordionTrigger className='!no-underline'>
-                      <div className='flex gap-4 items-center'>
-                        <BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/>
-                        <h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5>
-                      </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                      <CartPanel noCheckout className='border-none w-full'/>
-                    </AccordionContent>
-                  </AccordionItem>
-                </Accordion>
-              </div>
+                <CartPanel
+                  className='hidden md:flex border-none mt-10 w-full max-w-[550px] flex-col'
+                  noCheckout
+                  showProductsCarousel
+                />
+                <CartAccordian className='md:hidden flex items-center justify-center py-2 w-full' />
+              </ScrollArea>
             </div>
-            <div className='bg-level-1 flex flex-row items-start justify-start md:overflow-y-auto'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 px-8 pb-6 pt-6 md:pt-14'>
+            <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start justify-start md:overflow-y-auto'>
+              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 px-4 md:px-8 pb-6 pt-6 md:pt-14'>
                 <AuthWidget hideLogin className='hidden md:flex absolute top-4 right-4 '/>
                 <StepIndicator steps={steps} currentStep={step} className='flex gap-2 mx-auto items-center text-xxs sm:text-base' />
                 {steps[step].element}
               </div>
-            </div>
+            </ScrollArea>
           </div>
         </div>
       </DialogPortal>

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

@@ -23,15 +23,14 @@ const ContactInfo: React.FC<{
   return (
     <Form {...form}>
       <form className='text-left'>
-        <div className='flex flex-col sm:flex-row gap-2'>
+        <div className='flex gap-1 sm:gap-2'>
           <FormField
             control={form.control}
             name='name'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Full name</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Full name'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -42,9 +41,8 @@ const ContactInfo: React.FC<{
             name='email'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Email'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>

package/components/checkout-panel/payment/index.tsx

@@ -14,6 +14,7 @@ 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'
 
 const contactFormSchema = z.object({
   name: z.string().min(1, 'Enter your full name.'),
@@ -56,6 +57,26 @@ const Payment: React.FC<{
       setOrderId(id)
     }
     if (id) {
+      sendGAEvent('add_payment_info', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.categoryId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD',
+        payment_type: paymentInfo.paymentMethod ?? ''
+      })
+      sendFBEvent('AddPaymentInfo', {
+        contents: cmmc.cartItems.map(item => ({
+          id: item.sku,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD'
+      })
       await cmmc.updateOrderPaymentInfo(id, paymentInfo)
     }
   }
@@ -65,24 +86,24 @@ const Payment: React.FC<{
       <TabsList className='grid w-full grid-cols-3 mx-auto bg-level-2 h-auto'>
         <TabsTrigger
           value='card'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className='whitespace-normal h-full text-xs sm:text-base px-1'
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          PAY WITH CARD
+          Pay with card
         </TabsTrigger>
         <TabsTrigger
           value='crypto'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className='whitespace-normal h-full text-xs sm:text-base px-1'
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          PAY WITH CRYPTO
+          Pay with Wallet
         </TabsTrigger>
         <TabsTrigger
           value='bank'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className='whitespace-normal h-full text-xs sm:text-base px-1'
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          BANK TRANSFER
+          Pay with Wire
         </TabsTrigger>
       </TabsList>
       <TabsContent value='card'>

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

@@ -18,13 +18,13 @@ const InfoField: React.FC<{
 }) => {
   const copyToClipboard = (label: string, text: string) => {
     navigator.clipboard.writeText(text)
-    toast(`${label} copied to clipboard`)
+    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 text-lg border rounded-lg py-2 px-4'>
+      <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'/>
@@ -57,7 +57,7 @@ const PayWithBankTransfer: React.FC<{
   }
 
   return (
-    <div className='flex flex-col gap-6 mt-6'>
+    <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 bg-level-2">

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

@@ -6,6 +6,7 @@ import type { UseFormReturn } from 'react-hook-form'
 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'
@@ -13,6 +14,7 @@ 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
@@ -46,6 +48,28 @@ const PayWithCard: React.FC<{
         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')
       }  
@@ -110,7 +134,7 @@ const PayWithCard: React.FC<{
        */
       locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID}
     >
-      <ApplyTypography className='flex flex-col gap-2 mt-6'>
+      <ApplyTypography className='flex flex-col mt-6'>
         {transactionStatus === 'paid' ? (
           <h6 className='mx-auto font-nav'>Processing your payment...</h6>
         ) : transactionStatus === 'confirmed' ? (
@@ -124,13 +148,11 @@ const PayWithCard: React.FC<{
             <GooglePay/>
             <ApplePay/>
             
-            <div className='flex gap-2 whitespace-nowrap items-center my-6 sm:my-10 text-sm text-foreground/60'>
+            <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}/>
-            
-            <PaymentMethods/>
 
             {/* Imitates hanzo/ui Button and Input styles, I was unable to render the
               hanzo/ui button outright and keeping the submit form functionality*/}
@@ -161,6 +183,8 @@ const PayWithCard: React.FC<{
                 input: {
                   backgroundColor: '#1f1f1f',
                   color: '#FFFFFF',
+                  fontSize: '15px',
+                  fontFamily: 'helvetica neue, sans-serif',
                 },
                 'input::placeholder': {
                   color: '#999999',
@@ -169,18 +193,22 @@ const PayWithCard: React.FC<{
                   color: '#ff1600',
                 },
               }}
-              buttonProps={{
-                className: 'font-nav h-10',
-                css: {
-                  backgroundColor: '#fff',
-                  color: '#000',
-                  padding: 0,
-                  '&:hover': {
-                    backgroundColor: '#ffffffd9',
-                  },
-                },
-              }}
-            />
+              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>
             )}

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

@@ -19,14 +19,13 @@ import {
 } from '@hanzo/ui/primitives'
 
 import { useAuth } from '@hanzo/auth/service'
-import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
 
 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 { LoginComponent } from '@hanzo/auth/components'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 declare global {
   interface Window{
@@ -53,12 +52,11 @@ const PayWithCrypto: React.FC<{
   storePaymentInfo,
   contactForm
 }) => {
-  const c = useCommerce()
+  const cmmc = useCommerce()
   const auth = useAuth()
   const [loadingPrice, setLoadingPrice] = useState(false)
   //const [selectedToken, setSelectedToken] = useState('eth')
   const [amount, setAmount] = useState<number>()
-  const [availableAmount, setAvailableAmount] = useState<number>()
   const [provider, setProvider] = useState<ethers.BrowserProvider>()
 
   //const selectedToken = 'eth'
@@ -69,11 +67,6 @@ const PayWithCrypto: React.FC<{
     return autorun(() => {
       const newProvider = new ethers.BrowserProvider(window.ethereum)
       setProvider(newProvider)
-      if (auth.user?.walletAddress) {
-        newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
-          setAvailableAmount(Number(balance)/(10**18))
-        })
-      }
     })
   }, [])
 
@@ -85,7 +78,7 @@ const PayWithCrypto: React.FC<{
         .then(res => res.json())
         .then((exchangeRate) => {
           const oneUsdInWei = (10**18) / exchangeRate.data.amount
-          const usdAmountInWei = oneUsdInWei * c.cartTotal 
+          const usdAmountInWei = oneUsdInWei * cmmc.cartTotal 
           setAmount(usdAmountInWei)
           setLoadingPrice(false)
         })
@@ -98,7 +91,7 @@ const PayWithCrypto: React.FC<{
     const interval = setInterval(fetchPrice, 30000)
 
     return () => clearInterval(interval)
-  }, [c.cartTotal])
+  }, [cmmc.cartTotal])
 
   const sendPayment = async (ether: number) => {
     contactForm.handleSubmit(async () => {
@@ -110,11 +103,6 @@ const PayWithCrypto: React.FC<{
         })
         const newProvider = new ethers.BrowserProvider(window.ethereum)
         setProvider(newProvider)
-        if (auth.user?.walletAddress) {
-          newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
-            setAvailableAmount(Number(balance)/(10**18))
-          })
-        }
       } catch (err) {
         toast('Please switch your wallet to the Ethereum network.')
         return
@@ -130,9 +118,10 @@ const PayWithCrypto: React.FC<{
 
         const signer = await provider.getSigner()
         ethers.getAddress(process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS ?? '')
+        const price = ethers.parseEther(ether.toString())
         const tx = await signer.sendTransaction({
           to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-          value: ethers.parseEther(ether.toString())
+          value: price
         })
         console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
         console.log('tx', tx)
@@ -150,7 +139,30 @@ const PayWithCrypto: React.FC<{
             await storePaymentInfo({
               ether,
               addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-              receipt
+              receipt,
+              paymentMethod: 'crypto'
+            })
+            sendGAEvent('purchase', {
+              transaction_id: tx.hash,
+              value: price,
+              currency: 'ETH',
+              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: price,
+              currency: 'ETH',
             })
             setTransactionStatus('confirmed')
           })
@@ -202,7 +214,6 @@ const PayWithCrypto: React.FC<{
             </div>
           </div>
         </div>
-        <div>Available funds in your wallet: {availableAmount} ETH</div>
         
         {transactionStatus === 'error' ? (
           <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>

package/components/checkout-panel/payment/payment-methods/index.tsx

@@ -8,7 +8,7 @@ import Jcb from './jcb'
 
 const PaymentMethods: React.FC = () => {
   return (
-    <div className='flex gap-1 items-center'>
+    <div className='flex gap-1 items-center text-muted-1'>
       <LockKeyhole className='w-4 h-4'/>
       <span className='hidden sm:flex text-sm'>Secure payments with</span>
       <Amex className='w-9 h-5'/>

package/components/checkout-panel/shipping-info.tsx

@@ -21,11 +21,10 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useAuth } from '@hanzo/auth/service'
-
 import { useCommerce } from '../..'
 
 import { countries } from './countries'
+import { sendGAEvent } from '../../util/analytics'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
@@ -43,7 +42,6 @@ const ShippingInfo: React.FC<{
   orderId,
   setStep
 }) => { 
-  const auth = useAuth()
   const cmmc = useCommerce()
   
   const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
@@ -62,6 +60,18 @@ const ShippingInfo: React.FC<{
     if (orderId) {
       await cmmc.updateOrderShippingInfo(orderId, values)
     }
+    sendGAEvent('add_shipping_info', {
+      items: cmmc.cartItems.map((item) => ({
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.categoryId,
+        price: item.price,
+        quantity: item.quantity
+      })),
+      num_items: cmmc.cartItems.length,
+      value: cmmc.cartTotal,
+      currency: 'USD',
+    })
     setStep(3)
   }
 
@@ -74,9 +84,8 @@ const ShippingInfo: React.FC<{
             name='addressLine1'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Address line 1</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Address line 1'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -87,9 +96,8 @@ const ShippingInfo: React.FC<{
             name='addressLine2'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Address line 2 (optional)</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Address line 2 (optional)'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -101,9 +109,8 @@ const ShippingInfo: React.FC<{
               name='zipCode'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Zip code</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='Zip code'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -114,9 +121,8 @@ const ShippingInfo: React.FC<{
               name='city'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>City</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='City'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -129,9 +135,8 @@ const ShippingInfo: React.FC<{
               name='state'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>State (Optional)</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='State (optional)'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -142,11 +147,10 @@ const ShippingInfo: React.FC<{
               name='country'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Country</FormLabel>
                   <Select onValueChange={field.onChange} defaultValue={field.value}>
                     <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder='Select a country' />
+                      <SelectTrigger className='bg-level-1 border-muted-4'>
+                        <SelectValue placeholder='Country' />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>

package/components/facet-values-widget/facet-image.tsx

@@ -4,25 +4,25 @@ import Image from 'next/image'
 import type { FacetValueDesc } from '../../types'
 
 const ICON_SIZE = 20
-const SVG_MULT = 1.5
 
 const FacetImage: React.FC<{
   facetValueDesc: FacetValueDesc
 }> = ({
   facetValueDesc
 }) => {
+
   const {
     img,
     imgAR: ar,
     label
   } = facetValueDesc
 
-
   if (!img) {
     return null
   }
-  const isURL = typeof img === 'string'
-  if (isURL) {
+
+    // url
+  if (typeof img === 'string') {
     return (
       <Image 
         src={img as string} 
@@ -33,42 +33,8 @@ const FacetImage: React.FC<{
       />
     )
   }
-
+    // ReactNode
   return img as React.ReactNode
-
-    // Otherwise, assume it's a ReactNode of an imported SVG
-
-    // If it's not square, center it in the appropriate dimension
-    /*
-  const svgStyle: any = { position: 'relative' }
-  if (ar) {
-    if (ar < 1) {
-      const w = ICON_SIZE * SVG_MULT
-      svgStyle.top = (( 1 / ar - 1) * w) / 2
-    }
-    else if (ar > 1) {
-      const h = ICON_SIZE * SVG_MULT
-      svgStyle.left = (((1 - ar) * h) / 2)
-    }
-  }
-
-  return (
-    <span 
-      className='flex justify-center items-center overflow-hidden ' 
-      style={{
-        color: 'inherit',
-        width: ICON_SIZE * SVG_MULT, 
-        height: ICON_SIZE * SVG_MULT,
-      }} 
-    >
-      {React.cloneElement(facetValueDesc.img as React.ReactElement<any>, {
-        width: (facetValueDesc.imgAR ?? 1) * ICON_SIZE * SVG_MULT, 
-        height: SVG_MULT * ICON_SIZE,
-        style: svgStyle
-      })}
-    </span>
-  )
-  */
 } 
 
 export default FacetImage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -31,14 +31,16 @@
     "./types": "./types/index.ts"
   },
   "dependencies": {
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.75",
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
     "react-square-web-payments-sdk": "^3.2.1",
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.2.1",
-    "@hanzo/ui": "^3.0.7",
+    "@hanzo/auth": "^2.3.1",
+    "@hanzo/ui": "^3.0.9",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",

package/service/impls/standalone/actual-line-item.ts

@@ -5,6 +5,8 @@ import {
   observable, 
 } from 'mobx'
 
+import type { VideoDef } from '@hanzo/ui/types'
+
 import type { Product, LineItem } from '../../../types'
 
 interface ActualLineItemSnapshot {
@@ -30,6 +32,8 @@ class ActualLineItem
   desc?: string
   price: number
   img?: string 
+  video?: VideoDef 
+  animation?: string 
   timeAdded: number = 0 // timeAdded of being added to cart
 
   constructor(prod: Product, snap?: ActualLineItemSnapshot) {
@@ -41,10 +45,12 @@ class ActualLineItem
     this.desc = prod.desc
     this.price = prod.price
     this.img = prod.img
+    this.video = prod.video
+    this.animation = prod.animation
 
     if (snap) {
       this.qu = snap.quantity
-      this.timeAdded = snap.quantity
+      this.timeAdded = snap.timeAdded
     }
 
     makeObservable(this, {

package/types/product.ts

@@ -1,3 +1,5 @@
+import type { VideoDef } from '@hanzo/ui/types'
+
 interface Product {
   id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
   sku: string   // human visible on orders etc.
@@ -8,6 +10,8 @@ interface Product {
   desc?: string
   price: number
   img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
+  animation?: string  // spline scene url
+  video?: VideoDef
 }
 
 export {

package/util/analytics.ts

@@ -0,0 +1,21 @@
+declare global {
+  interface Window {
+    fbq: Function;
+    gtag: Function;
+  }
+}
+
+// https://developers.facebook.com/docs/meta-pixel/reference
+const sendFBEvent = (name: string, options = {}) => {
+  window.fbq('track', name, options)
+}
+
+// https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
+const sendGAEvent = (name: string, options = {}) => {
+  window.gtag('event', name, options)
+}
+
+export {
+  sendFBEvent,
+  sendGAEvent,
+}