@hanzo/commerce 4.5.0 → 4.6.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,6 +9,7 @@ import { useCommerce } from '../../service/context'
 import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
@@ -31,6 +32,31 @@ 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}
@@ -50,7 +76,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/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)
     }
   }

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

@@ -13,6 +13,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 +47,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')
       }  

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,7 +52,7 @@ 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')
@@ -85,7 +84,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 +97,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 () => {
@@ -130,9 +129,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 +150,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')
           })

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)
   }
 

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.6.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -37,7 +37,7 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.2.1",
+    "@hanzo/auth": "^2.3.0",
     "@hanzo/ui": "^3.0.7",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",

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,
+}