Merged in CR/flash_sale (pull request #45)

CR/flash sale

1 files changed, 79 insertions, 12 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 372ad3ba..187ab3c9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -18,6 +18,9 @@ import odooApi from '@/core/api/odooApi'
 import { Button, Spinner } from 'flowbite-react'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
+import ImageNext from 'next/image'
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
+import CountDown from '@/core/components/elements/CountDown/CountDown'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -33,6 +36,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const [promotionType, setPromotionType] = useState(false)
   const [promotionActiveId, setPromotionActiveId] = useState(null)
   const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
+  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -47,6 +51,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     setLowestPrice(lowest)
   }, [getLowestPrice])
 
+  useEffect(() => {
+    const getBackgound = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+      setBackgorundFlashSale(get[0].image)
+    }
+    getBackgound()
+  }, [])
+
+  console.log('ini set', backgorundFlashSale)
+
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
   const variantQuantityRefs = useRef([])
@@ -57,7 +71,6 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       product.variants[variantIndex].quantity = element?.value
     }
     variantQuantityRefs.current[variantId] = element
-    
   }
 
   const validQuantity = (quantity) => {
@@ -97,7 +110,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       router.push(`/login?next=/shop/product/${slug}`)
       return
     }
-    
+
     const quantity = variantQuantityRefs.current[variantId].value
 
     if (!validQuantity(quantity)) return
@@ -108,13 +121,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   }
 
   const handleQuantityChange = (variantId) => (event) => {
-    const { value } = event.target;
-    const variantIndex = product.variants.findIndex((variant) => variant.id === variantId);
+    const { value } = event.target
+    const variantIndex = product.variants.findIndex((variant) => variant.id === variantId)
     if (variantIndex !== -1) {
-      product.variants[variantIndex].quantity = parseInt(value, 10); // Pastikan untuk mengubah ke tipe number jika diperlukan
+      product.variants[variantIndex].quantity = parseInt(value, 10) // Pastikan untuk mengubah ke tipe number jika diperlukan
       // Lakukan sesuatu jika nilai quantity diubah
     }
-  };
+  }
 
   const handleBuy = (variant) => {
     const quantity = variantQuantityRefs.current[variant].value
@@ -152,7 +165,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   useEffect(() => {
     const loadProductSimilarInBrand = async () => {
       const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
-      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
+      const source = 'right'
+      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery, source })
       setProductSimilarInBrand(dataProductSimilar.products)
     }
     if (!productSimilarInBrand) loadProductSimilarInBrand()
@@ -181,11 +195,52 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
             <div className='w-5/12'>
-              <Image
-                src={product.image}
-                alt={product.name}
-                className='h-[430px] object-contain object-center w-full border border-gray_r-4'
-              />
+              <div className='relative mb-2'>
+                {product?.flashSale?.remainingTime > 0 && (
+                  <div className={`absolute bottom-0 w-full`}>
+                    <div className='absolute bottom-0 w-full h-full'>
+                      <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} />
+                    </div>
+                    <div className='relative'>
+                      <div className='flex gap-x-2 items-center p-2'>
+                        <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
+                          <span className='text-lg font-bold'>
+                            {product.lowestPrice.discountPercentage}%
+                          </span>
+                        </div>
+                        <div
+                          className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
+                        >
+                          <ImageNext
+                            src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                            width={17}
+                            height={10}
+                          />
+                          <span className='text-white text-lg font-semibold'>
+                            {product.flashSale.tag || 'FLASH SALE'}
+                          </span>
+                        </div>
+                        <div>
+                          <CountDown2 initialTime={product.flashSale.remainingTime} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                <Image
+                  src={product.image}
+                  alt={product.name}
+                  className='h-[430px] object-contain object-center w-full border border-gray_r-4'
+                />
+              </div>
+              <div>
+                <p className='text-justify text-xs leading-5'>
+                  <span className='font-semibold '>Keterangan : </span>Gambar atau foto berperan
+                  sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan
+                  berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang
+                  lebih baik perihal gambar di 021-2933 8828.
+                </p>
+              </div>
             </div>
 
             <div className='w-7/12 px-4'>
@@ -385,6 +440,18 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 <div className='text-gray_r-11 line-through text-caption-1'>
                   {currencyFormat(lowestPrice?.price)}
                 </div>
+                {product.flashSale.remainingTime > 0 && (
+                  <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+                    <ImageNext
+                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      width={15}
+                      height={10}
+                    />
+                    <span className='text-white text-xs font-semibold'>
+                      {product.flashSale.tag || 'FLASH SALE'}
+                    </span>
+                  </div>
+                )}
               </div>
             )}
             <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>