<iman> add google tag button add to cart

2 files changed, 84 insertions, 5 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 280e4a7a..95bc1d88 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -15,7 +15,8 @@ import { useProductCartContext } from '@/contexts/ProductCartContext';
 import { createSlug } from '~/libs/slug';
 import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
-
+import { gtagAddToCart } from '@/core/utils/googleTag';
+import axios from 'axios';
 type Props = {
   variantId: number | null;
   quantity?: number;
@@ -50,6 +51,38 @@ const AddToCart = ({
     isLoading,
     setIsloading,
   } = useProductCartContext();
+  const [activeVariant, setActiveVariant] = useState({
+    id: 0,
+    code: '',
+    name: '',
+    price: '',
+    stock: '',
+    weight: '',
+    isFlashSale: false,
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (variantId) {
+        let response = await axios(
+          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/variant-detail?id=${variantId}`
+        );
+        let productVariant = response.data;
+        if (productVariant) {
+          setActiveVariant({
+            id: productVariant[0].id,
+            code: productVariant[0].code,
+            name: productVariant[0].name,
+            price: productVariant[0].price.price,
+            stock: productVariant[0].stockTotal,
+            weight: productVariant[0].weight,
+            isFlashSale: productVariant[0].isFlashsale,
+          });
+        }
+      }
+    };
+    fetchData();
+  }, [variantId]);
 
   const productSimilarQuery = [
     product?.name,
@@ -101,6 +134,8 @@ const AddToCart = ({
     setRefreshCart(true);
     setAddCartAlert(true);
 
+    gtagAddToCart(activeVariant, quantity);
+
     toast({
       title: 'Tambah ke keranjang',
       description: 'Berhasil menambahkan barang ke keranjang belanja',
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 5dfd452b..de88e5bb 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -26,7 +26,7 @@ import ProductCard from '../ProductCard';
 import ProductSimilar from '../ProductSimilar';
 import ProductPromoSection from '~/modules/product-promo/components/Section';
 import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
-
+import { gtagAddToCart } from '@/core/utils/googleTag';
 const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 
 const ProductDesktopVariant = ({
@@ -41,14 +41,38 @@ const ProductDesktopVariant = ({
   const { srsltid } = router.query;
   const [askAdminUrl, setAskAdminUrl, isApproval] = useState();
   const [lowestPrice, setLowestPrice] = useState(null);
-
+  const [qtyPickUp, setQtyPickUp] = useState(0);
   const [addCartAlert, setAddCartAlert] = useState(false);
   const [isLoadingSLA, setIsLoadingSLA] = useState(true);
-
+  const [selectedVariant, setSelectedVariant] = useState(product.id);
   const { setRefreshCart } = useProductCartContext();
 
   const [quantityInput, setQuantityInput] = useState(1);
 
+  const [activeVariant, setActiveVariant] = useState({
+    id: null,
+    code: product.code,
+    name: product.name,
+    price: lowestPrice,
+    stock: product.stockTotal,
+    weight: product.weight,
+    isFlashSale: product.isFlashSale,
+  });
+
+  useEffect(() => {
+    if (selectedVariant) {
+      setActiveVariant({
+        id: product.id,
+        code: product.code,
+        name: product.name,
+        price: product.price,
+        stock: product.stockTotal,
+        weight: product.weight,
+        isFlashSale: product.isFlashSale,
+      });
+    }
+  }, [selectedVariant, product]);
+
   const createdAskUrl = whatsappUrl({
     template: 'product',
     payload: {
@@ -95,6 +119,7 @@ const ProductDesktopVariant = ({
     }
     const quantity = quantityInput;
     if (!validQuantity(quantity)) return;
+    gtagAddToCart(activeVariant, quantity);
     updateItemCart({
       productId: product.id,
       quantity,
@@ -232,6 +257,17 @@ const ProductDesktopVariant = ({
     fetchData();
   }, [product]);
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const qty_available = await odooApi(
+        'GET',
+        `/api/v1/product_variant/${product.id}/qty_available`
+      );
+      setQtyPickUp(qty_available?.qty);
+    };
+    fetchData();
+  }, [product]);
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
@@ -451,7 +487,7 @@ const ProductDesktopVariant = ({
                 </Skeleton>
               </div>
               <div>
-                {product?.sla?.qty > 0 && (
+                {qtyPickUp > 0 && (
                   <Link href='/panduan-pick-up-service' className='group'>
                     <Image
                       src='/images/PICKUP-NOW.png'
@@ -462,6 +498,14 @@ const ProductDesktopVariant = ({
                 )}
               </div>
             </div>
+            {qtyPickUp > 0 && (
+              <>
+                <div className='text-[12px] mt-1 text-red-500 italic'>
+                  * {qtyPickUp} barang bisa di pickup
+                </div>
+                <div className='h-4' />
+              </>
+            )}
             <div className='flex gap-x-3'>
               <Button
                 onClick={() => handleAddToCart(product.id)}