<iman> update informasi product varian

2 files changed, 72 insertions, 24 deletions

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 4ecd15c8..a4cc62dd 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -4,8 +4,11 @@ import { Info } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
+import { MessageCircleIcon, Share2Icon } from 'lucide-react';
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist';
+import { RWebShare } from 'react-web-share';
 import LazyLoad from 'react-lazy-load';
-
+import { Button } from '@chakra-ui/react';
 import { useProductCartContext } from '@/contexts/ProductCartContext';
 import odooApi from '@/core/api/odooApi';
 import Image from '@/core/components/elements/Image/Image';
@@ -18,11 +21,11 @@ import currencyFormat from '@/core/utils/currencyFormat';
 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 productSimilarApi from '../../api/productSimilarApi';
 import ProductCard from '../ProductCard';
 import ProductSimilar from '../ProductSimilar';
-
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 const ProductDesktopVariant = ({
   product,
   wishlist,
@@ -33,6 +36,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);
@@ -40,6 +44,20 @@ const ProductDesktopVariant = ({
 
   const { setRefreshCart } = useProductCartContext();
 
+  useEffect(() => {
+    const createdAskUrl = whatsappUrl({
+      template: 'product',
+      payload: {
+        manufacture: product.manufacture.name,
+        productName: product.name,
+        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
+      },
+      fallbackUrl: router.asPath,
+    });
+
+    setAskAdminUrl(createdAskUrl);
+  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]);
+
   const getLowestPrice = useCallback(() => {
     const lowest = product.price;
     /* const lowest = prices.reduce((lowest, price) => {
@@ -190,7 +208,7 @@ const ProductDesktopVariant = ({
               />
             </div>
 
-            <div className='w-7/12 px-4'>
+            <div className='w-7/12 px-4 py-4'>
               <h1 className='text-title-md leading-10 font-medium'>
                 {product?.name}
               </h1>
@@ -289,9 +307,40 @@ const ProductDesktopVariant = ({
                   </div>
                 </div>
               </div>
+              <div className='h-6' />
+              <div className='flex gap-x-5'>
+                <Button
+                  as={Link}
+                  href={askAdminUrl}
+                  variant='link'
+                  target='_blank'
+                  colorScheme='gray'
+                  leftIcon={<MessageCircleIcon size={18} />}
+                >
+                  Ask Admin
+                </Button>
+
+                <AddToWishlist productId={product.id} />
+
+                <RWebShare
+                  data={{
+                    text: 'Check out this product',
+                    title: `${product.name} - Indoteknik.com`,
+                    url: SELF_HOST + router.asPath,
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                  >
+                    Share
+                  </Button>
+                </RWebShare>
+              </div>
             </div>
 
-            <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
+            <div className='py-4 md:p-6 md:bg-gray-50 rounded-xl w-[99%]'>
               <h2 className='text-h-md md:text-h-lg font-medium'>
                 Informasi Produk
               </h2>
@@ -388,24 +437,11 @@ const ProductDesktopVariant = ({
                 Beli
               </button>
             </div>
-            <div className='flex mt-4'>
-              <button
-                className='flex items-center gap-x-1'
-                onClick={toggleWishlist}
-              >
-                {wishlist.data?.productTotal > 0 ? (
-                  <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
-                ) : (
-                  <HeartIcon className='w-6' />
-                )}
-                Wishlist
-              </button>
-            </div>
             <div className='border border-gray_r-6 overflow-auto mt-4'>
               <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}>
@@ -422,8 +458,11 @@ const ProductDesktopVariant = ({
             Kamu Mungkin Juga Suka
           </div>
           <LazyLoad>
-            <ProductSimilar query={productSimilarQuery} />
+            <SimilarBottom product={product} />
           </LazyLoad>
+          {/* <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad> */}
         </div>
 
         <BottomPopup
@@ -458,8 +497,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 4018ac15..790dbbe0 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 }) => {
@@ -411,8 +411,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
@@ -445,8 +448,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>