Merge branch 'new-release' into CR/new_product_detail

# Conflicts:
#	src/lib/product/components/Product/ProductDesktopVariant.jsx

4 files changed, 251 insertions, 142 deletions

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index ddb77c1f..1c30bb13 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,105 +1,115 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { getCartApi } from '../api/CartApi'
-import currencyFormat from '@/core/utils/currencyFormat'
-import { createSlug } from '@/core/utils/slug'
-import useAuth from '@/core/hooks/useAuth'
-import { useRouter } from 'next/router'
-import odooApi from '@/core/api/odooApi'
-import { useProductCartContext } from '@/contexts/ProductCartContext'
-import Image from '@/core/components/elements/Image/Image'
-import whatsappUrl from '@/core/utils/whatsappUrl'
-import { AnimatePresence, motion } from 'framer-motion'
-import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
-const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
-const { default: Link } = require('next/link')
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getCartApi } from '../api/CartApi';
+import currencyFormat from '@/core/utils/currencyFormat';
+import { createSlug } from '@/core/utils/slug';
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
+import odooApi from '@/core/api/odooApi';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
+import Image from '@/core/components/elements/Image/Image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { AnimatePresence, motion } from 'framer-motion';
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css';
+const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline');
+const { default: Link } = require('next/link');
 
 const Cardheader = (cartCount) => {
-  
-  const router = useRouter()
-  const [subTotal, setSubTotal] = useState(null)
-  const [buttonLoading, SetButtonTerapkan] = useState(false)
-  const itemLoading = [1, 2, 3]
-  const auth = useAuth()
-  const [countCart, setCountCart] = useState(null)
-  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
-    useProductCartContext()
+  const router = useRouter();
+  const [subTotal, setSubTotal] = useState(null);
+  const [buttonLoading, SetButtonTerapkan] = useState(false);
+  const itemLoading = [1, 2, 3];
+  const auth = useAuth();
+  const [countCart, setCountCart] = useState(null);
+  const {
+    productCart,
+    setRefreshCart,
+    setProductCart,
+    refreshCart,
+    isLoading,
+    setIsloading,
+  } = useProductCartContext();
 
-  const [isHovered, setIsHovered] = useState(false)
-  const [isTop, setIsTop] = useState(true)
+  const [isHovered, setIsHovered] = useState(false);
+  const [isTop, setIsTop] = useState(true);
   const products = useMemo(() => {
-    return productCart?.products || []
-  }, [productCart])
+    return productCart?.products || [];
+  }, [productCart]);
 
   const handleMouseEnter = () => {
-    setIsHovered(true)
-    getCart()
-  }
+    setIsHovered(true);
+    getCart();
+  };
 
   const handleMouseLeave = () => {
-    setIsHovered(false)
-  }
+    setIsHovered(false);
+  };
 
   const getCart = () => {
     if (!productCart && auth) {
-      refreshCartf()
+      refreshCartf();
     }
-  }
+  };
   const refreshCartf = useCallback(async () => {
-    setIsloading(true)
-    let cart = await getCartApi()
-    setProductCart(cart)
-    setCountCart(cart?.productTotal)
-    setIsloading(false)
-  }, [setProductCart, setIsloading])
+    setIsloading(true);
+    let cart = await getCartApi();
+    setProductCart(cart);
+    setCountCart(cart?.products?.length);
+    setIsloading(false);
+  }, [setProductCart, setIsloading]);
 
   useEffect(() => {
-    if (!products) return
+    if (!products) return;
 
-    let calculateTotalPriceBeforeTax = 0
-    let calculateTotalTaxAmount = 0
-    let calculateTotalDiscountAmount = 0
+    let calculateTotalPriceBeforeTax = 0;
+    let calculateTotalTaxAmount = 0;
+    let calculateTotalDiscountAmount = 0;
     for (const product of products) {
-      if (product.quantity == '') continue
+      if (product.quantity == '') continue;
 
-      let priceBeforeTax = product.price.price / 1.11
-      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
-      calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
+      let priceBeforeTax = product.price.price / 1.11;
+      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
+      calculateTotalTaxAmount +=
+        (product.price.price - priceBeforeTax) * product.quantity;
       calculateTotalDiscountAmount +=
-        (product.price.price - product.price.priceDiscount) * product.quantity
+        (product.price.price - product.price.priceDiscount) * product.quantity;
     }
     let subTotal =
-      calculateTotalPriceBeforeTax - calculateTotalDiscountAmount + calculateTotalTaxAmount
-    setSubTotal(subTotal)
-  }, [products])
+      calculateTotalPriceBeforeTax -
+      calculateTotalDiscountAmount +
+      calculateTotalTaxAmount;
+    setSubTotal(subTotal);
+  }, [products]);
 
   useEffect(() => {
     if (refreshCart) {
-      refreshCartf()
+      refreshCartf();
     }
-    setRefreshCart(false)
-  }, [refreshCart, refreshCartf, setRefreshCart])
+    setRefreshCart(false);
+  }, [refreshCart, refreshCartf, setRefreshCart]);
 
   useEffect(() => {
-    setCountCart(cartCount.cartCount)
-    setRefreshCart(false)
-  }, [cartCount])
+    setCountCart(cartCount.cartCount);
+    setRefreshCart(false);
+  }, [cartCount]);
 
   useEffect(() => {
     const handleScroll = () => {
-      setIsTop(window.scrollY === 0)
-    }
-    window.addEventListener('scroll', handleScroll)
+      setIsTop(window.scrollY === 0);
+    };
+    window.addEventListener('scroll', handleScroll);
     return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   const handleCheckout = async () => {
-    SetButtonTerapkan(true)
-    let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
-    router.push('/shop/checkout')
-  }
-
+    SetButtonTerapkan(true);
+    let checkoutAll = await odooApi(
+      'POST',
+      `/api/v1/user/${auth.id}/cart/select-all`
+    );
+    router.push('/shop/checkout');
+  };
 
   return (
     <div className='relative group'>
@@ -152,8 +162,13 @@ const Cardheader = (cartCount) => {
                 className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
               >
                 <div className='p-2 flex justify-between items-center'>
-                  <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
-                  <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+                  <h5 className='text-base font-semibold leading-none'>
+                    Keranjang Belanja
+                  </h5>
+                  <Link
+                    href='/shop/cart'
+                    class='text-sm font-medium text-red-600 underline'
+                  >
                     Lihat Semua
                   </Link>
                 </div>
@@ -163,7 +178,10 @@ const Cardheader = (cartCount) => {
                     <div className='justify-center p-4'>
                       <p className='text-gray-500 text-center '>
                         Silahkan{' '}
-                        <Link href='/login' className='text-red-600 underline leading-6'>
+                        <Link
+                          href='/login'
+                          className='text-red-600 underline leading-6'
+                        >
                           Login
                         </Link>{' '}
                         Untuk Melihat Daftar Keranjang Belanja Anda
@@ -172,7 +190,11 @@ const Cardheader = (cartCount) => {
                   )}
                   {isLoading &&
                     itemLoading.map((item) => (
-                      <div key={item} role='status' className='max-w-sm animate-pulse'>
+                      <div
+                        key={item}
+                        role='status'
+                        className='max-w-sm animate-pulse'
+                      >
                         <div className='flex items-center space-x-4 mb- 2'>
                           <div className='flex-shrink-0'>
                             <PhotoIcon className='h-16 w-16 text-gray-500' />
@@ -194,14 +216,17 @@ const Cardheader = (cartCount) => {
                   )}
                   {auth && products.length > 0 && !isLoading && (
                     <>
-                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+                      <ul
+                        role='list'
+                        className='divide-y divide-gray-200 dark:divide-gray-700'
+                      >
                         {products &&
                           products?.map((product, index) => (
                             <>
                               <li className='py-1 sm:py-2'>
                                 <div className='flex items-center space-x-4'>
                                   <div className='bagian gambar flex-shrink-0'>
-                                    {product.cartType === 'promotion' &&  (
+                                    {product.cartType === 'promotion' && (
                                       <Image
                                         src={product.imageProgram[0]}
                                         alt={product.name}
@@ -227,10 +252,10 @@ const Cardheader = (cartCount) => {
                                   </div>
                                   <div className='bagian tulisan dan harga flex-1 min-w-0'>
                                     {product.cartType === 'promotion' && (
-                                          <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
-                                            {product.name}
-                                          </p>
-                                      )}
+                                      <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                        {product.name}
+                                      </p>
+                                    )}
                                     {product.cartType === 'product' && (
                                       <Link
                                         href={createSlug(
@@ -252,27 +277,32 @@ const Cardheader = (cartCount) => {
                                           {product?.price?.discountPercentage}%
                                         </div>
                                         <div className='text-gray_r-11 line-through text-caption-2'>
-                                          {currencyFormat(product?.price?.price)}
+                                          {currencyFormat(
+                                            product?.price?.price
+                                          )}
                                         </div>
                                       </div>
                                     )}
-                                    
+
                                     <div className='flex justify-between items-center'>
                                       <div className='font-semibold text-sm text-red-600'>
                                         {product?.price?.priceDiscount > 0 ? (
-                                          currencyFormat(product?.price?.priceDiscount)
+                                          currencyFormat(
+                                            product?.price?.priceDiscount
+                                          )
                                         ) : (
                                           <span className='text-gray_r-12/90 font-normal text-caption-1'>
                                             <a
                                               href={whatsappUrl('product', {
                                                 name: product.name,
-                                                manufacture: product.manufacture?.name,
+                                                manufacture:
+                                                  product.manufacture?.name,
                                                 url: createSlug(
                                                   '/shop/product/',
                                                   product.name,
                                                   product.id,
                                                   true
-                                                )
+                                                ),
                                               })}
                                               className='text-danger-500 underline'
                                               rel='noopener noreferrer'
@@ -286,56 +316,112 @@ const Cardheader = (cartCount) => {
                                     </div>
                                   </div>
                                 </div>
-                                  <div className="flex flex-col w-3/4">
-                                      {product.products?.map((product) => 
-                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
-                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
-                                            {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
-                                          </Link>
-                                  
-                                          <div className="ml-4 w-full flex flex-col gap-y-1">
-                                            <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
-                                              {product.displayName}
-                                            </Link>
-                                    
-                                            <div className='flex w-full'>
-                                              <div className="flex flex-col">
-                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
-                                                <div>
-                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
-                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
-                                                </div>
-                                              </div>
+                                <div className='flex flex-col w-3/4'>
+                                  {product.products?.map((product) => (
+                                    <div
+                                      key={product.id}
+                                      className='md:ml-8 ml-4 mt-2 flex'
+                                    >
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product.parent.name,
+                                          product.parent.id.toString()
+                                        )}
+                                        className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
+                                      >
+                                        {product?.image && (
+                                          <Image
+                                            src={product.image}
+                                            alt={product.name}
+                                            width={40}
+                                            height={40}
+                                            className='w-full h-full object-fill'
+                                          />
+                                        )}
+                                      </Link>
+
+                                      <div className='ml-4 w-full flex flex-col gap-y-1'>
+                                        <Link
+                                          href={createSlug(
+                                            '/shop/product/',
+                                            product.parent.name,
+                                            product.parent.id.toString()
+                                          )}
+                                          className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
+                                        >
+                                          {product.displayName}
+                                        </Link>
+
+                                        <div className='flex w-full'>
+                                          <div className='flex flex-col'>
+                                            {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                            <div>
+                                              <span className='text-gray-500 text-caption-1'>
+                                                Berat Barang:{' '}
+                                              </span>
+                                              <span className='text-gray-500 text-caption-1'>
+                                                {product.packageWeight} Kg
+                                              </span>
                                             </div>
                                           </div>
-                                    
                                         </div>
+                                      </div>
+                                    </div>
+                                  ))}
+                                  {product.freeProducts?.map((product) => (
+                                    <div
+                                      key={product.id}
+                                      className='md:ml-8 ml-4 mt-2 flex'
+                                    >
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product.parent.name,
+                                          product.parent.id.toString()
                                         )}
-                                      {product.freeProducts?.map((product) => 
-                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
-                                        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
-                                          {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                        className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
+                                      >
+                                        {product?.image && (
+                                          <Image
+                                            src={product.image}
+                                            alt={product.name}
+                                            width={40}
+                                            height={40}
+                                            className='w-full h-full object-fill'
+                                          />
+                                        )}
+                                      </Link>
+
+                                      <div className='ml-4 w-full flex flex-col gap-y-1'>
+                                        <Link
+                                          href={createSlug(
+                                            '/shop/product/',
+                                            product.parent.name,
+                                            product.parent.id.toString()
+                                          )}
+                                          className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
+                                        >
+                                          {product.displayName}
                                         </Link>
-                                  
-                                        <div className="ml-4 w-full flex flex-col gap-y-1">
-                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
-                                            {product.displayName}
-                                          </Link>
-                                  
-                                          <div className='flex w-full'>
-                                              <div className="flex flex-col">
-                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
-                                                <div>
-                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
-                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
-                                                </div>
-                                              </div>
+
+                                        <div className='flex w-full'>
+                                          <div className='flex flex-col'>
+                                            {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                            <div>
+                                              <span className='text-gray-500 text-caption-1'>
+                                                Berat Barang:{' '}
+                                              </span>
+                                              <span className='text-gray-500 text-caption-1'>
+                                                {product.packageWeight} Kg
+                                              </span>
                                             </div>
                                           </div>
-                                    
                                         </div>
-                                      )}
+                                      </div>
                                     </div>
+                                  ))}
+                                </div>
                               </li>
                             </>
                           ))}
@@ -347,8 +433,12 @@ const Cardheader = (cartCount) => {
                 {auth && products.length > 0 && !isLoading && (
                   <>
                     <div className='mt-3'>
-                      <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
-                      <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+                      <span className='text-gray-400 text-caption-2'>
+                        Subtotal Sebelum PPN :{' '}
+                      </span>
+                      <span className='font-semibold text-red-600'>
+                        {currencyFormat(subTotal)}
+                      </span>
                     </div>
                     <div className='mt-5 mb-2'>
                       <button
@@ -357,7 +447,9 @@ const Cardheader = (cartCount) => {
                         onClick={handleCheckout}
                         disabled={buttonLoading}
                       >
-                        {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+                        {buttonLoading
+                          ? 'Loading...'
+                          : 'Lanjutkan Ke Pembayaran'}
                       </button>
                     </div>
                   </>
@@ -368,7 +460,7 @@ const Cardheader = (cartCount) => {
         )}
       </AnimatePresence>
     </div>
-  )
-}
+  );
+};
 
-export default Cardheader
+export default Cardheader;
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index 5b16915d..b3cc8fe5 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -32,7 +32,7 @@ const ServiceList = () => {
         </div>
         <div className='w-full'>
           <Link
-            href='/tentang-kami'
+            href='/garansi-resmi'
             className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
           >
             <div className=''>
@@ -57,7 +57,7 @@ const ServiceList = () => {
         </div>
         <div className='w-full '>
           <Link
-            href='/tentang-kami'
+            href='/pembayaran-tempo'
             className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
           >
             <div className=''>
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index c181676c..e7a1fa4e 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -4,8 +4,9 @@ import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist';
+import { RWebShare } from 'react-web-share';
 import LazyLoad from 'react-lazy-load';
-
 import { useProductCartContext } from '@/contexts/ProductCartContext';
 import odooApi from '@/core/api/odooApi';
 import Image from '@/core/components/elements/Image/Image';
@@ -20,11 +21,11 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
 import { getAuth } from '~/libs/auth';
 
 import ImageNext from 'next/image';
-import { RWebShare } from 'react-web-share';
 import productSimilarApi from '../../api/productSimilarApi';
 import ProductCard from '../ProductCard';
 import ProductSimilar from '../ProductSimilar';
 import ProductPromoSection from '~/modules/product-promo/components/Section';
+import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
 
 const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 
@@ -38,6 +39,7 @@ const ProductDesktopVariant = ({
   let auth = useAuth();
   const { slug } = router.query;
   const { srsltid } = router.query;
+  const [askAdminUrl, setAskAdminUrl, isApproval] = useState();
   const [lowestPrice, setLowestPrice] = useState(null);
 
   const [addCartAlert, setAddCartAlert] = useState(false);
@@ -229,6 +231,7 @@ const ProductDesktopVariant = ({
     };
     fetchData();
   }, [product]);
+  console.log('product', product);
 
   return (
     <DesktopView>
@@ -533,7 +536,7 @@ const ProductDesktopVariant = ({
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
               </div>
-              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
+              <div className='h-full divide-y divide-gray_r-6 max-h-[500px]'>
                 {productSimilarInBrand &&
                   productSimilarInBrand?.map((product) => (
                     <div className='py-2' key={product.id}>
@@ -550,8 +553,11 @@ const ProductDesktopVariant = ({
             Kamu Mungkin Juga Suka
           </div>
           <LazyLoad>
-            <ProductSimilar query={productSimilarQuery} />
+            <SimilarBottom product={product} />
           </LazyLoad>
+          {/* <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad> */}
         </div>
 
         <BottomPopup
@@ -586,8 +592,11 @@ const ProductDesktopVariant = ({
               Kamu Mungkin Juga Suka
             </div>
             <LazyLoad>
-              <ProductSimilar query={productSimilarQuery} />
+              <SimilarBottom product={product} />
             </LazyLoad>
+            {/* <LazyLoad>
+              <ProductSimilar query={productSimilarQuery} />
+            </LazyLoad> */}
           </div>
         </BottomPopup>
       </div>
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index b00c2daa..b87bcbc8 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -17,7 +17,7 @@ import { gtagAddToCart } from '@/core/utils/googleTag';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import { getAuth } from '~/libs/auth';
-
+import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
 import ProductSimilar from '../ProductSimilar';
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
@@ -197,7 +197,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             )}
           </button>
         </div>
-        <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
+        <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
+          {activeVariant?.name}
+        </h1>
 
         {activeVariant.isFlashSale &&
         activeVariant?.price?.discountPercentage > 0 ? (
@@ -438,8 +440,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
       <div className='p-4'>
         <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
         <LazyLoad>
-          <ProductSimilar query={productSimilarQuery} />
+          <SimilarBottom product={product} />
         </LazyLoad>
+        {/* <LazyLoad>
+          <ProductSimilar query={productSimilarQuery} />
+        </LazyLoad> */}
       </div>
 
       <BottomPopup
@@ -472,8 +477,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             Kamu Mungkin Juga Suka
           </div>
           <LazyLoad>
-            <ProductSimilar query={productSimilarQuery} />
+            <SimilarBottom product={product} />
           </LazyLoad>
+          {/* <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad> */}
         </div>
       </BottomPopup>
     </MobileView>