flash sale

4 files changed, 118 insertions, 42 deletions

diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
index 61503d17..5dafb790 100644
--- a/src/core/components/elements/CountDown/CountDown2.jsx
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 const CountDown2 = ({ initialTime }) => {
-  const hours = Math.floor(initialTime / 3600)
+  /*const hours = Math.floor(initialTime / 3600)
   const minutes = Math.floor((initialTime % 3600) / 60)
   const seconds = initialTime % 60
 
@@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => {
       }
     }, 1000)
     return () => clearInterval(timer)
+  }, [timeLeft])*/
+  
+  const days = Math.floor(initialTime / 86400)
+  const hours = Math.floor((initialTime % 86400) / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    day: days,
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds =
+        timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const days = Math.floor(secondsLeft / 86400)
+        const hours = Math.floor((secondsLeft % 86400) / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
   }, [timeLeft])
 
+
   return (
     <div className='flex justify-between gap-x-2'>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.hour.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.day.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Hari</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black  font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.minute.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black  font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.hour.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Jam</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.second.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.minute.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Menit</span>
       </div>
     </div>
   )
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index e13e2ab1..5cbe8a8a 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -19,6 +19,8 @@ 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 }) => {
   console.log('ini product', products)
@@ -173,27 +175,42 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       <div className='container mx-auto pt-10'>
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
-            <div className='w-5/12 relative'>
-              <div className='absolute bottom-0 bg-red-600 w-full'>
-                <div className='flex gap-x-2 items-center p-2'>
-                  <div className='bg-yellow-400 rounded-full p-1 h-10 w-14 flex items-center justify-center '>
-                    <span className='text-lg font-bold'>40%</span>
-                  </div>
-                  <div className='bg-red-600 border border-solid border-yellow-400 rounded-full h-10 p-2 flex w-[50%] items-center justify-center gap-x-4'>
-                    <ImageNext
-                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                      width={20}
-                      height={10}
-                    />
-                    <span className='text-white text-lg font-semibold'>FLASH SALE</span>
+            <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>
+                    </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>
-              <Image
-                src={product.image}
-                alt={product.name}
-                className='h-[430px] object-contain object-center w-full border border-gray_r-4'
-              />
             </div>
 
             <div className='w-7/12 px-4'>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index c85a76e9..b38bb43c 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,11 +1,14 @@
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import ImageNext from 'next/image'
+import Product from './Product/Product'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  console.log('ini prodyct ', product)
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     url: createSlug('/shop/product/', product.name, product.id, true)
@@ -23,6 +26,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             alt={product?.name}
             className='w-full object-contain object-center h-36 sm:h-48'
           />
+          {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'>{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>
+          )}
           {product.variantTotal > 1 && (
             <div className='absolute badge-gray bottom-1.5 left-1.5'>
               {product.variantTotal} Varian
@@ -30,20 +50,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 ${
@@ -104,7 +124,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         <div className='w-8/12 p-2'>
           {product.flashSale.id > 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} />
+              <ImageNext
+                src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                width={15}
+                height={10}
+              />
               <span className='text-white text-xs font-semibold'>FLASH SALE</span>
             </div>
           )}
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 937c6d4c..d465d94b 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -135,7 +135,8 @@ const productResponseMap = (products, pricelist) => {
       categories: [],
       flashSale: {
         id: product?.flashsale_id_i,
-        name: product?.product?.flashsale_name_s
+        name: product?.product?.flashsale_name_s,
+        tag : product?.flashsale_tag_s || 'FLASH SALE'
       }
     }