Merged in CR/flash_sale (pull request #36)

CR/flash sale

3 files changed, 190 insertions, 83 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 123ee708..187ab3c9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -36,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)
@@ -50,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 +68,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const setVariantQuantityRef = (variantId) => (element) => {
     if (element) {
       let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
-      product.variants[variantIndex].quantity = element.value
+      product.variants[variantIndex].quantity = element?.value
     }
     variantQuantityRefs.current[variantId] = element
   }
@@ -109,6 +120,15 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     setAddCartAlert(true)
   }
 
+  const handleQuantityChange = (variantId) => (event) => {
+    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
+      // Lakukan sesuatu jika nilai quantity diubah
+    }
+  }
+
   const handleBuy = (variant) => {
     const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
@@ -177,21 +197,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
             <div className='w-5/12'>
               <div className='relative mb-2'>
                 {product?.flashSale?.remainingTime > 0 && (
-                  <div className='absolute bottom-0 bg-red-600 w-full h-15 grid'>
-                    <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 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>
@@ -416,7 +447,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                       width={15}
                       height={10}
                     />
-                    <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+                    <span className='text-white text-xs font-semibold'>
+                      {product.flashSale.tag || 'FLASH SALE'}
+                    </span>
                   </div>
                 )}
               </div>
@@ -456,7 +489,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   type='number'
                   className='form-input w-16 py-2 text-center bg-gray_r-1'
                   ref={setVariantQuantityRef(product.variants[0].id)}
-                  onChange={setVariantQuantityRef(product.variants[0].id)}
+                  onChange={handleQuantityChange(product.variants[0].id)}
                   defaultValue={1}
                 />
                 <button
@@ -623,7 +656,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                           type='number'
                           className='form-input w-16 py-2 text-center bg-gray_r-1'
                           ref={setVariantQuantityRef(variant.id)}
-                          onChange={setVariantQuantityRef(variant.id)}
+                          onChange={handleQuantityChange(variant.id)}
                           defaultValue={1}
                         />
                       </td>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 2edd1a5f..d25d0861 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -18,6 +18,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import { gtagAddToCart } from '@/core/utils/googleTag'
 import odooApi from '@/core/api/odooApi'
 import { Button, Spinner } from 'flowbite-react'
+import ImageNext from 'next/image'
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -30,6 +32,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const [isLoadingSLA, setIsLoadingSLA] = useState(true)
   const [promotionType, setPromotionType] = useState(false)
   const [promotionActiveId, setPromotionActiveId] = useState(null)
+  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
 
   const getLowestPrice = () => {
     const prices = product.variants.map((variant) => variant.price)
@@ -39,6 +42,16 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     return lowest
   }
 
+  useEffect(() => {
+    const getBackgound = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+      if (get.length > 0) {
+        setBackgorundFlashSale(get[0].image)
+      }
+    }
+    getBackgound()
+  }, [])
+
   const [activeVariant, setActiveVariant] = useState({
     id: null,
     code: product.code,
@@ -69,11 +82,11 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       product.variants = variantData
 
       setIsLoadingSLA(false)
-      if(product.variants.length === 1){
+      if (product.variants.length === 1) {
         setActiveVariant({
           id: product.variants[0].id,
           code: product.variants[0].code,
-          name: product.variants[0].parent.name ,
+          name: product.variants[0].parent.name,
           price: product.variants[0].price,
           stock: product.variants[0].stock,
           weight: product.variants[0].weight,
@@ -143,7 +156,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       programLineId: promotionActiveId,
       selected: true,
-      source : 'buy'
+      source: 'buy'
     })
     router.push(`/shop/checkout?source=buy`)
   }
@@ -156,11 +169,48 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <MobileView>
-      <Image
-        src={product.image}
-        alt={product.name}
-        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
-      />
+      <div className='relative'>
+        {product?.flashSale?.remainingTime > 0 && (
+          <div className={`absolute bottom-0 w-full`}>
+            <div className='absolute bottom-0 w-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-72 object-contain object-center w-full border-b border-gray_r-4'
+        />
+      </div>
 
       <div className='p-4'>
         <div className='flex items-end mb-2'>
@@ -294,40 +344,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
                   <Spinner aria-label='Alternate spinner button example' />
                   <span className='pl-3'>Loading...</span>
                 </Button>
-              ) : selectedVariant ? activeVariant?.sla?.slaDate != '-' ? (
-                <button
-                  type='button'
-                  title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
-                  className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
-                    activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-                  }`}
-                >
-                  <div
-                    className={`flex-1 text-sm  ${
-                      activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+              ) : selectedVariant ? (
+                activeVariant?.sla?.slaDate != '-' ? (
+                  <button
+                    type='button'
+                    title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
+                    className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
+                      activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
                     }`}
                   >
-                    {activeVariant?.sla?.slaDate}
-                  </div>
-                  <div className='flex-end'>
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      className={`w-7 h-7 text-sm ${
+                    <div
+                      className={`flex-1 text-sm  ${
                         activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
                       }`}
                     >
-                      <path
-                        d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                  </div>
-                </button>
-              ):('-') : (
+                      {activeVariant?.sla?.slaDate}
+                    </div>
+                    <div className='flex-end'>
+                      <svg
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='1.5'
+                        className={`w-7 h-7 text-sm ${
+                          activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+                        }`}
+                      >
+                        <path
+                          d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+                          stroke-linecap='round'
+                          stroke-linejoin='round'
+                        ></path>
+                      </svg>
+                    </div>
+                  </button>
+                ) : (
+                  '-'
+                )
+              ) : (
                 '-'
               )}
             </span>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 9e559358..d33516dd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -7,14 +7,25 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import ImageNext from 'next/image'
 import Product from './Product/Product'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import odooApi from '@/core/api/odooApi'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const router = useRouter()
-  console.log('ini route', router)
+  
+  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
+  
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     url: createSlug('/shop/product/', product.name, product.id, true)
   })
+  useEffect(() => {
+    const getBackgound = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+      setBackgorundFlashSale(get[0].image)
+    }
+    getBackgound()
+  }, [])
 
   if (variant == 'vertical') {
     return (
@@ -29,18 +40,27 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             className='w-full object-contain object-center h-36 sm:h-48'
           />
           {router.pathname != '/' && product?.flashSale?.id > 0 && (
-            <div className='absolute bottom-0 bg-red-600 w-full h-10 grid'>
-              <div className='flex gap-x-1 items-center p-2 justify-center'>
-                <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
-                  <span className='text-sm font-bold text-black'>{product?.lowestPrice.discountPercentage}%</span>
-                </div>
-                <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
-                  <ImageNext
-                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                    width={13}
-                    height={5}
-                  />
-                  <span className='text-white text-[11px] font-semibold'>{product?.flashSale?.tag}</span>
+            <div className='absolute bottom-0 w-full grid'>
+              <div className='absolute bottom-0 w-full h-full'>
+                <ImageNext src='/images/GAMBAR-BG-FLASH-SALE.jpg' className='h-full' width={1000} height={100} />
+              </div>
+              <div className='relative'>
+                <div className='flex gap-x-1 items-center p-2 justify-center'>
+                  <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
+                    <span className='text-sm font-bold text-black'>
+                      {product?.lowestPrice.discountPercentage}%
+                    </span>
+                  </div>
+                  <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+                    <ImageNext
+                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      width={13}
+                      height={5}
+                    />
+                    <span className='text-white text-[11px] font-semibold'>
+                      {product?.flashSale?.tag}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -52,20 +72,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
         </Link>
         <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
-            {product?.manufacture?.name ? (
-              <Link
-                href={createSlug(
-                  '/shop/brands/',
-                  product?.manufacture?.name,
-                  product?.manufacture.id
-                )}
-                className='mb-1'
-              >
-                {product.manufacture.name}
-              </Link>
-            ) : (
-              <div>-</div>
-            )}
+          {product?.manufacture?.name ? (
+            <Link
+              href={createSlug(
+                '/shop/brands/',
+                product?.manufacture?.name,
+                product?.manufacture.id
+              )}
+              className='mb-1'
+            >
+              {product.manufacture.name}
+            </Link>
+          ) : (
+            <div>-</div>
+          )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
             className={`mb-2 !text-gray_r-12 leading-6 block ${