From 55d476a4666150a013a308deb6cb99513778ac22 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 23 Feb 2024 09:16:24 +0700
Subject: Update variant image without watermark

---
 .../components/Product/ProductMobileVariant.jsx    | 240 +++++++++++++--------
 1 file changed, 151 insertions(+), 89 deletions(-)

(limited to 'src/lib/product/components/Product/ProductMobileVariant.jsx')

diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index 9888e482..af9e52bb 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -1,37 +1,40 @@
-import Divider from '@/core/components/elements/Divider/Divider'
-import Image from '@/core/components/elements/Image/Image'
-import Link from '@/core/components/elements/Link/Link'
-import currencyFormat from '@/core/utils/currencyFormat'
-import { useEffect, useState } from 'react'
-import Select from 'react-select'
-import ProductSimilar from '../ProductSimilar'
-import LazyLoad from 'react-lazy-load'
-import { updateItemCart } from '@/core/utils/cart'
-import { HeartIcon } from '@heroicons/react/24/outline'
-import { useRouter } from 'next/router'
-import MobileView from '@/core/components/views/MobileView'
-import { toast } from 'react-hot-toast'
-import { createSlug } from '@/core/utils/slug'
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import whatsappUrl from '@/core/utils/whatsappUrl'
-import { gtagAddToCart } from '@/core/utils/googleTag'
-import odooApi from '@/core/api/odooApi'
-import { Skeleton } from '@chakra-ui/react'
+import { Skeleton } from '@chakra-ui/react';
+import { HeartIcon } from '@heroicons/react/24/outline';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import LazyLoad from 'react-lazy-load';
+
+import odooApi from '@/core/api/odooApi';
+import Divider from '@/core/components/elements/Divider/Divider';
+import Image from '@/core/components/elements/Image/Image';
+import Link from '@/core/components/elements/Link/Link';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import MobileView from '@/core/components/views/MobileView';
+import { updateItemCart } from '@/core/utils/cart';
+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 ProductSimilar from '../ProductSimilar';
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
-  const router = useRouter()
+  const router = useRouter();
 
-  const [quantity, setQuantity] = useState('1')
-  const [selectedVariant, setSelectedVariant] = useState(product.id)
-  const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
-  const [addCartAlert, setAddCartAlert] = useState(false)
+  const [quantity, setQuantity] = useState('1');
+  const [selectedVariant, setSelectedVariant] = useState(product.id);
+  const [informationTab, setInformationTab] = useState(
+    informationTabOptions[0].value
+  );
+  const [addCartAlert, setAddCartAlert] = useState(false);
 
-  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
+  const [isLoadingSLA, setIsLoadingSLA] = useState(true);
 
   const getLowestPrice = () => {
-    const lowest = product.lowestPrice
-    return lowest
-  }
+    const lowest = product.lowestPrice;
+    return lowest;
+  };
 
   const [activeVariant, setActiveVariant] = useState({
     id: null,
@@ -40,8 +43,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     price: getLowestPrice(),
     stock: product.stockTotal,
     weight: product.weight,
-    isFlashSale: product.isFlashSale
-  })
+    isFlashSale: product.isFlashSale,
+  });
 
   useEffect(() => {
     if (selectedVariant) {
@@ -52,70 +55,73 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         price: product.price,
         stock: product.stockTotal,
         weight: product.weight,
-        isFlashSale: product.isFlashSale
-      })
+        isFlashSale: product.isFlashSale,
+      });
     }
-  }, [selectedVariant, product])
+  }, [selectedVariant, product]);
 
   const validAction = () => {
-    let isValid = true
+    let isValid = true;
     if (!selectedVariant) {
-      toast.error('Pilih varian terlebih dahulu')
-      isValid = false
+      toast.error('Pilih varian terlebih dahulu');
+      isValid = false;
     }
     if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
-      toast.error('Jumlah barang minimal 1')
-      isValid = false
+      toast.error('Jumlah barang minimal 1');
+      isValid = false;
     }
-    return isValid
-  }
+    return isValid;
+  };
 
   const handleClickCart = () => {
-    if (!validAction()) return
-    gtagAddToCart(activeVariant, quantity)
+    if (!validAction()) return;
+    gtagAddToCart(activeVariant, quantity);
     updateItemCart({
       productId: variant,
       quantity,
       programLineId: null,
       selected: true,
-      source: null
-    })
-    setAddCartAlert(true)
-  }
+      source: null,
+    });
+    setAddCartAlert(true);
+  };
 
   const handleClickBuy = () => {
-    if (!validAction()) return
+    if (!validAction()) return;
 
     updateItemCart({
       productId: product.id,
       quantity,
       programLineId: null,
       selected: true,
-      source: 'buy'
-    })
-    router.push(`/shop/checkout?source=buy`)
-  }
+      source: 'buy',
+    });
+    router.push(`/shop/checkout?source=buy`);
+  };
 
   const productSimilarQuery = [
     product?.name,
     `fq=-product_id_i:${product.id}`,
-    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
-  ].join('&')
+    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
+  ].join('&');
 
   useEffect(() => {
     const fetchData = async () => {
-      const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`)
-      product.sla = dataSLA
+      const dataSLA = await odooApi(
+        'GET',
+        `/api/v1/product_variant/${product.id}/stock`
+      );
+      product.sla = dataSLA;
 
-      setIsLoadingSLA(false)
-    }
-    fetchData()
-  }, [product])
+      setIsLoadingSLA(false);
+    };
+    fetchData();
+  }, [product]);
 
   return (
     <MobileView>
       <Image
-        src={product.image}
+        src={product.image + '?variant=True'}
         alt={product.name}
         className='h-72 object-contain object-center w-full border-b border-gray_r-4'
       />
@@ -124,7 +130,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         <div className='flex items-end mb-2'>
           {product.manufacture?.name ? (
             <Link
-              href={createSlug('/shop/brands/', product.manufacture?.name, product.manufacture?.id)}
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture?.name,
+                product.manufacture?.id
+              )}
             >
               {product.manufacture?.name}
             </Link>
@@ -141,10 +151,13 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         </div>
         <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
 
-        {activeVariant.isFlashSale && activeVariant?.price?.discountPercentage > 0 ? (
+        {activeVariant.isFlashSale &&
+        activeVariant?.price?.discountPercentage > 0 ? (
           <>
             <div className='flex gap-x-1 items-center'>
-              <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
+              <div className='badge-solid-red'>
+                {activeVariant?.price?.discountPercentage}%
+              </div>
               <div className='text-gray_r-11 line-through text-caption-1'>
                 {currencyFormat(activeVariant?.price?.price)}
               </div>
@@ -154,7 +167,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             </div>
             <div className='text-gray_r-9 text-base font-normal mt-1'>
               Termasuk PPN:{' '}
-              {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
+              {currencyFormat(
+                activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
+              )}
             </div>
           </>
         ) : (
@@ -164,7 +179,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                 {currencyFormat(activeVariant?.price?.price)}
                 <div className='text-gray_r-9 text-base font-normal mt-1'>
                   Termasuk PPN:{' '}
-                  {currencyFormat(activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN)}
+                  {currencyFormat(
+                    activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
+                  )}
                 </div>
               </>
             ) : (
@@ -173,7 +190,12 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                 <a
                   href={whatsappUrl('product', {
                     name: product.name,
-                    url: createSlug('/shop/product/', product.name, product.id, true)
+                    url: createSlug(
+                      '/shop/product/',
+                      product.name,
+                      product.id,
+                      true
+                    ),
                   })}
                   className='text-danger-500 underline'
                 >
@@ -199,10 +221,18 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
               onChange={(e) => setQuantity(e.target.value)}
             />
           </div>
-          <button type='button' className='btn-yellow flex-1' onClick={handleClickCart}>
+          <button
+            type='button'
+            className='btn-yellow flex-1'
+            onClick={handleClickCart}
+          >
             Keranjang
           </button>
-          <button type='button' className='btn-solid-red flex-1' onClick={handleClickBuy}>
+          <button
+            type='button'
+            className='btn-solid-red flex-1'
+            onClick={handleClickBuy}
+          >
             Beli
           </button>
         </div>
@@ -238,7 +268,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                   type='button'
                   title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
                   className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
-                    product?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+                    product?.sla?.slaDate === 'indent'
+                      ? 'bg-indigo-900'
+                      : 'btn-light'
                   }`}
                 >
                   <div
@@ -281,14 +313,21 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             {activeVariant?.stock > 0 && (
               <span className='flex gap-x-1.5'>
                 <div className='badge-solid-red'>Ready Stock</div>
-                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
+                <div className='badge-gray'>
+                  {activeVariant?.stock > 5 ? '> 5' : '< 5'}
+                </div>
               </span>
             )}
             {activeVariant?.stock == 0 && (
               <a
                 href={whatsappUrl('product', {
                   name: product.name,
-                  url: createSlug('/shop/product/', product.name, product.id, true)
+                  url: createSlug(
+                    '/shop/product/',
+                    product.name,
+                    product.id,
+                    true
+                  ),
                 })}
                 className='text-danger-500 font-medium'
               >
@@ -297,12 +336,19 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             )}
           </SpecificationContent>
           <SpecificationContent label='Berat Barang'>
-            {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
+            {activeVariant?.weight > 0 && (
+              <span>{activeVariant?.weight} KG</span>
+            )}
             {activeVariant?.weight == 0 && (
               <a
                 href={whatsappUrl('productWeight', {
                   name: product.name,
-                  url: createSlug('/shop/product/', product.name, product.id, true)
+                  url: createSlug(
+                    '/shop/product/',
+                    product.name,
+                    product.id,
+                    true
+                  ),
                 })}
                 className='text-danger-500 font-medium'
               >
@@ -316,7 +362,10 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
           active={informationTab == 'description'}
           className='leading-6 text-gray_r-11'
           dangerouslySetInnerHTML={{
-            __html: product.description != '' ? product.description : 'Belum ada deskripsi produk.'
+            __html:
+              product.description != ''
+                ? product.description
+                : 'Belum ada deskripsi produk.',
           }}
         />
       </div>
@@ -338,55 +387,68 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         <div className='flex mt-4'>
           <div className='w-[15%]'>
             <Image
-              src={product.image}
+              src={product.image + '?variant=True'}
               alt={product.name}
               className='h-20 object-contain object-center w-full border border-gray_r-4'
             />
           </div>
-          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>{product.name}</div>
+          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
+            {product.name}
+          </div>
           <div className='ml-3 flex items-center text-sm font-normal'>
-            <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
+            <Link
+              href='/shop/cart'
+              className='flex-1 py-2 text-gray_r-12 btn-yellow'
+            >
               Lihat Keranjang
             </Link>
           </div>
         </div>
         <div className='mt-8 mb-4'>
-          <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+          <div className='text-h-sm font-semibold mb-6'>
+            Kamu Mungkin Juga Suka
+          </div>
           <LazyLoad>
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
       </BottomPopup>
     </MobileView>
-  )
-}
+  );
+};
 
 const informationTabOptions = [
-  { value: 'specification', label: 'Spesifikasi' }
+  { value: 'specification', label: 'Spesifikasi' },
   // { value: 'description', label: 'Deskripsi' },
   // { value: 'information', label: 'Info Penting' }
-]
+];
 
 const TabButton = ({ children, active, ...props }) => {
-  const activeClassName = active ? 'text-danger-500 underline underline-offset-4' : 'text-gray_r-11'
+  const activeClassName = active
+    ? 'text-danger-500 underline underline-offset-4'
+    : 'text-gray_r-11';
   return (
-    <button {...props} type='button' className={`font-medium pb-1 ${activeClassName}`}>
+    <button
+      {...props}
+      type='button'
+      className={`font-medium pb-1 ${activeClassName}`}
+    >
       {children}
     </button>
-  )
-}
+  );
+};
 
 const TabContent = ({ children, active, className, ...props }) => (
   <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
     {children}
   </div>
-)
+);
 
 const SpecificationContent = ({ children, label }) => (
   <div className='flex justify-between p-3'>
     <span className='text-gray_r-11'>{label}</span>
     {children}
   </div>
-)
+);
 
-export default ProductMobileVariant
+export default ProductMobileVariant;
-- 
cgit v1.2.3