<iman> add google tag button add to cart

1 files changed, 48 insertions, 4 deletions

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