From e07a57651649cb2493e5b00a361797cf1392a186 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 1 Aug 2024 11:59:26 +0700
Subject: <iman> update template switch

---
 .../components/Product/ProductDesktopVariant.jsx   | 66 ++++++++++++++++++--
 .../components/Product/ProductMobileVariant.jsx    | 71 +++++++++++++++++++---
 2 files changed, 123 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 09b30a44..882673f4 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -6,6 +6,11 @@ import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import LazyLoad from 'react-lazy-load';
+import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist'
+import { RWebShare } from 'react-web-share'
+// import Link from 'next/link'
 
 import { useProductCartContext } from '@/contexts/ProductCartContext';
 import odooApi from '@/core/api/odooApi';
@@ -18,11 +23,14 @@ import { updateItemCart } from '@/core/utils/cart';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
+import Breadcrumb from '../../../../../src-migrate/modules/product-detail/components/Breadcrumb';
 
 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,
@@ -32,7 +40,7 @@ const ProductDesktopVariant = ({
   const router = useRouter();
   const auth = useAuth();
   const { slug } = router.query;
-
+  const [ askAdminUrl, setAskAdminUrl ] = useState()
   const [lowestPrice, setLowestPrice] = useState(null);
 
   const [addCartAlert, setAddCartAlert] = useState(false);
@@ -53,6 +61,20 @@ const ProductDesktopVariant = ({
     setLowestPrice(lowest);
   }, [getLowestPrice]);
 
+  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 [informationTab, setInformationTab] = useState(
     informationTabOptions[0].value
   );
@@ -154,6 +176,7 @@ const ProductDesktopVariant = ({
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
+        <Breadcrumb productId={product.id} productName={product.name} />
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
             <div className='w-5/12'>
@@ -263,9 +286,42 @@ 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='p-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>
               <div className='h-4' />
               <div
@@ -279,7 +335,7 @@ const ProductDesktopVariant = ({
               />
             </div>
           </div>
-          <div className='w-[25%]'>
+          <div className='w-[35%]'>
             {product?.isFlashsale > 0 &&
             product?.price?.discountPercentage > 0 ? (
               <>
@@ -359,7 +415,7 @@ const ProductDesktopVariant = ({
                 Beli
               </button>
             </div>
-            <div className='flex mt-4'>
+            {/* <div className='flex mt-4'>
               <button
                 className='flex items-center gap-x-1'
                 onClick={toggleWishlist}
@@ -371,7 +427,7 @@ const ProductDesktopVariant = ({
                 )}
                 Wishlist
               </button>
-            </div>
+            </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
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index af9e52bb..ce836d5b 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -16,9 +16,15 @@ import currencyFormat from '@/core/utils/currencyFormat';
 import { gtagAddToCart } from '@/core/utils/googleTag';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
-
+import Breadcrumb from '../../../../../src-migrate/modules/product-detail/components/Breadcrumb';
+import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist'
+import { RWebShare } from 'react-web-share'
 import ProductSimilar from '../ProductSimilar';
 
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter();
 
@@ -28,7 +34,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     informationTabOptions[0].value
   );
   const [addCartAlert, setAddCartAlert] = useState(false);
-
+  const [ askAdminUrl, setAskAdminUrl ] = useState()
   const [isLoadingSLA, setIsLoadingSLA] = useState(true);
 
   const getLowestPrice = () => {
@@ -60,6 +66,20 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     }
   }, [selectedVariant, product]);
 
+  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 validAction = () => {
     let isValid = true;
     if (!selectedVariant) {
@@ -120,14 +140,17 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <MobileView>
+      <div className='p-4'>
+        <Breadcrumb id={product.id} name={product.name} />
+      </div>
       <Image
         src={product.image + '?variant=True'}
         alt={product.name}
-        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
+        className='h-72 object-contain mt-4 object-center w-full border-b border-gray_r-4'
       />
 
       <div className='p-4'>
-        <div className='flex items-end mb-2'>
+        <div className='flex items-center mb-2'>
           {product.manufacture?.name ? (
             <Link
               href={createSlug(
@@ -141,15 +164,45 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
           ) : (
             <div>-</div>
           )}
-          <button type='button' className='ml-auto' onClick={toggleWishlist}>
+          <div className="ml-2 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>
+          {/* <button type='button' className='ml-auto' onClick={toggleWishlist}>
             {wishlist.data?.productTotal > 0 ? (
               <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
             ) : (
               <HeartIcon className='w-6' />
             )}
-          </button>
+          </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 ? (
@@ -173,11 +226,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             </div>
           </>
         ) : (
-          <h3 className='text-danger-500 font-semibold mt-1'>
+          <h3 className='font-medium text-danger-500 text-title-md mt-1'>
             {activeVariant?.price?.price > 0 ? (
               <>
                 {currencyFormat(activeVariant?.price?.price)}
-                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                <div className='text-gray_r-9 text-base font-medium mt-1'>
                   Termasuk PPN:{' '}
                   {currencyFormat(
                     activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
-- 
cgit v1.2.3