From 0ee7434188364dc230bbd034dc165a0f4850e3db Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 3 Jun 2023 11:16:32 +0700
Subject: Add gtag event on product detail

---
 src/lib/product/components/Product/Product.jsx        |  6 ++++++
 src/lib/product/components/Product/ProductDesktop.jsx | 14 ++++++++------
 src/lib/product/components/Product/ProductMobile.jsx  |  2 ++
 3 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..351c07c1 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -5,6 +5,8 @@ import ProductDesktop from './ProductDesktop'
 import useAuth from '@/core/hooks/useAuth'
 import ProductMobile from './ProductMobile'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { gtagViewItem } from '@/core/utils/googleTag'
 
 const Product = ({ product }) => {
   const auth = useAuth()
@@ -26,6 +28,10 @@ const Product = ({ product }) => {
     wishlist.refetch()
   }
 
+  useEffect(() => {
+    gtagViewItem(product.variants)
+  }, [product])
+
   return (
     <>
       <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..4a584761 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +14,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -52,11 +53,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     return isValid
   }
 
-  const handleAddToCart = (variantId) => {
-    const quantity = variantQuantityRefs.current[variantId].value
+  const handleAddToCart = (variant) => {
+    const quantity = variantQuantityRefs.current[variant.id].value
     if (!validQuantity(quantity)) return
+    gtagAddToCart(variant, quantity)
     updateItemCart({
-      productId: variantId,
+      productId: variant.id,
       quantity,
       selected: true
     })
@@ -247,14 +249,14 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 />
                 <button
                   type='button'
-                  onClick={() => handleAddToCart(product.variants[0].id)}
+                  onClick={() => handleAddToCart(product.variants[0])}
                   className='flex-1 py-2 btn-yellow'
                 >
                   Keranjang
                 </button>
                 <button
                   type='button'
-                  onClick={() => handleBuy(product.variants[0].id)}
+                  onClick={() => handleBuy(product.variants[0])}
                   className='flex-1 py-2 btn-solid-red'
                 >
                   Beli
@@ -345,7 +347,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                       <td className='flex gap-x-3'>
                         <button
                           type='button'
-                          onClick={() => handleAddToCart(variant.id)}
+                          onClick={() => handleAddToCart(variant)}
                           className='flex-1 py-2 btn-yellow'
                         >
                           Keranjang
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..667a4ba1 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -85,6 +86,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
   const handleClickCart = () => {
     if (!validAction()) return
+    gtagAddToCart(activeVariant, quantity)
     updateItemCart({
       productId: activeVariant.id,
       quantity,
-- 
cgit v1.2.3