Merged in CR/flash_sale (pull request #33)

CR/flash sale

12 files changed, 239 insertions, 38 deletions

diff --git a/public/images/ICON_FLASH_SALE.svg b/public/images/ICON_FLASH_SALE.svg
new file mode 100644
index 00000000..d6d90b18
--- /dev/null
+++ b/public/images/ICON_FLASH_SALE.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 230 230" style="enable-background:new 0 0 230 230;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F0C83B;}
+	.st1{fill:#FEFEFE;}
+</style>
+<g>
+	<path class="st0" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5
+		c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1
+		c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/>
+	<path class="st0" d="M169.1,192.3c-1-1.2-0.9-1.7,0.3-2.6c2.4-1.9,4.9-3.8,7.1-5.9c26-25.7,34.9-56.6,26.6-92.1
+		c-9.6-40.9-46.5-69.9-89.7-69.9c-4.8,0.1-11.4,0.7-17.8,2.2c-48.4,11-79.8,59.2-69.6,110c4.3,21.7,15.3,39.7,32.4,53.8
+		c1.4,1.2,1.7,1.9,0.4,3.4c-4.4,5.4-8.7,11-13,16.4c-1.3,1.7-2.3,3.6-1.8,5.9c0.6,2.9,2.2,4.8,5.1,5.6c3.1,0.8,5.4-0.4,7.3-2.7
+		c4.5-5.7,9.1-11.4,13.5-17.3c1.3-1.7,2.1-2,4-1c26.6,13.2,53.5,13.6,80.4,0.9c1.5-0.7,2.3-0.4,3.2,0.8c4.5,5.7,9.1,11.3,13.6,16.9
+		c2.9,3.6,7.1,4.4,10.2,1.9c3.3-2.7,3.5-6.8,0.5-10.5C177.6,202.8,173.4,197.5,169.1,192.3z M121.8,194.1
+		c-23.4,2-43.6-5.5-60.3-21.8c-13.5-13.1-21.2-29.4-23.3-48.2c-0.4-3.1-0.4-6.2-0.5-9.3c0.2-22.1,7.8-41.2,23.3-56.8
+		c13-13.1,28.9-20.6,47.5-22.3c38.4-3.5,73.8,23.2,81.8,61.7c6.2,29.7-1.8,55.6-23.8,76.6C154.2,186,139.1,192.6,121.8,194.1z"/>
+	<path class="st0" d="M23.9,58.9c-5.3,0-8.4-5.5-5.8-10.3c4.6-8.4,10.6-15.8,17.6-22.3c6.2-5.7,12.9-10.6,20.3-14.6
+		c4.6-2.5,9.6,0.1,10.3,5.1c0.4,2.9-1,5.4-4,7.1c-9.2,5.2-17.4,11.6-24.2,19.8c-3,3.6-5.6,7.3-7.9,11.4
+		C28.8,57.5,26.8,58.9,23.9,58.9z"/>
+	<path class="st0" d="M169.9,10c1.2-0.2,2.4,0.3,3.6,1c15.6,8.4,28.4,19.8,37.7,35c1,1.7,1.9,3.4,1.6,5.5c-0.4,2.9-2.5,5.2-5.1,5.9
+		c-2.9,0.7-5.9-0.3-7.4-2.9c-8.1-13.8-19.7-24-33.6-31.6c-3-1.6-4.2-4.8-3.3-7.8C164.1,12,166.6,10.1,169.9,10z"/>
+	<path class="st1" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5
+		c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1
+		c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/>
+	<path class="st0" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5
+		c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1
+		c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/>
+</g>
+</svg>
diff --git a/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg b/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg
new file mode 100644
index 00000000..2a8b40b8
--- /dev/null
+++ b/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 199.8 213" style="enable-background:new 0 0 199.8 213;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F0C83B;}
+	.st1{fill:#FEFEFE;}
+</style>
+<g>
+	<path class="st0" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6
+		c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3
+		c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/>
+	<path class="st0" d="M154.5,184.4c-1-1.2-0.9-1.7,0.3-2.6c2.4-1.9,4.9-3.8,7.2-5.9c26.2-25.9,35.2-57.1,26.8-92.9
+		c-9.7-41.2-46.9-70.5-90.5-70.5c-4.8,0.1-11.5,0.7-17.9,2.2C31.5,25.8-0.1,74.4,10.2,125.6c4.3,21.9,15.4,40,32.7,54.3
+		c1.4,1.2,1.7,1.9,0.4,3.4c-4.4,5.4-8.8,11.1-13.1,16.5c-1.3,1.7-2.3,3.6-1.8,5.9c0.6,2.9,2.2,4.8,5.1,5.6c3.1,0.8,5.4-0.4,7.4-2.7
+		c4.5-5.7,9.2-11.5,13.6-17.4c1.3-1.7,2.1-2,4-1c26.8,13.3,53.9,13.7,81.1,0.9c1.5-0.7,2.3-0.4,3.2,0.8c4.5,5.7,9.2,11.4,13.7,17
+		c2.9,3.6,7.2,4.4,10.3,1.9c3.3-2.7,3.5-6.9,0.5-10.6C163,195,158.8,189.7,154.5,184.4z M106.8,186.2c-23.6,2-44-5.5-60.8-22
+		c-13.6-13.2-21.4-29.6-23.5-48.6c-0.4-3.1-0.4-6.3-0.5-9.4C22.2,84,29.8,64.7,45.5,49c13.1-13.2,29.1-20.8,47.9-22.5
+		c38.7-3.5,74.4,23.4,82.5,62.2c6.3,29.9-1.8,56.1-24,77.2C139.4,178.1,124.2,184.7,106.8,186.2z"/>
+	<path class="st0" d="M8,49.9c-5.3,0-8.5-5.5-5.8-10.4C6.8,31.1,12.9,23.6,19.9,17c6.3-5.7,13-10.7,20.5-14.7
+		c4.6-2.5,9.7,0.1,10.4,5.1c0.4,2.9-1,5.4-4,7.2c-9.3,5.2-17.5,11.7-24.4,20c-3,3.6-5.6,7.4-8,11.5C13,48.5,11,49.9,8,49.9z"/>
+	<path class="st0" d="M155.3,0.6c1.2-0.2,2.4,0.3,3.6,1c15.7,8.5,28.6,20,38,35.3c1,1.7,1.9,3.4,1.6,5.5c-0.4,2.9-2.5,5.2-5.1,5.9
+		c-2.9,0.7-5.9-0.3-7.5-2.9c-8.2-13.9-19.9-24.2-33.9-31.9c-3-1.6-4.2-4.8-3.3-7.9C149.4,2.6,151.9,0.7,155.3,0.6z"/>
+	<path class="st1" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6
+		c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3
+		c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/>
+	<path class="st0" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2
+		c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6
+		c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3
+		c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/>
+</g>
+</svg>
diff --git a/src/api/productApi.js b/src/api/productApi.js
index cca052f7..feb91257 100644
--- a/src/api/productApi.js
+++ b/src/api/productApi.js
@@ -3,7 +3,7 @@ import axios from 'axios'
 export const popularProductApi = () => {
   return async () => {
     const dataPopularProducts = await axios(
-      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular`
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular-weekly`
     )
     return dataPopularProducts.data.response
   }
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/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 073303fe..c6029f39 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -37,7 +37,6 @@ const BasicLayout = ({ children }) => {
       const { slug } = router.query
       const getProduct = async () => {
         let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
-        console.log('ini product', product)
         setPayloadWa({
           name: product[0]?.name,
           manufacture: product[0]?.manufacture.name,
diff --git a/src/lib/home/api/popularProductApi.js b/src/lib/home/api/popularProductApi.js
index 37e4390e..4bb5e580 100644
--- a/src/lib/home/api/popularProductApi.js
+++ b/src/lib/home/api/popularProductApi.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 const popularProductApi = async () => {
   const dataPopularProducts = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular-weekly`
   )
   return dataPopularProducts.data.response
 }
diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js
index 93c7f22c..f9599e86 100644
--- a/src/lib/product/api/productSimilarApi.js
+++ b/src/lib/product/api/productSimilarApi.js
@@ -1,9 +1,30 @@
+import odooApi from '@/core/api/odooApi'
 import axios from 'axios'
+import productSearchApi from './productSearchApi'
 
-const productSimilarApi = async ({ query }) => {
+const productSimilarApi = async ({ query, source }) => {
+  let dataflashSale = null
+  const flashSale = await odooApi('GET', '/api/v1/flashsale/header')
+  if (flashSale && flashSale.length > 0) {
+    const dataFlash = await productSearchApi({
+      query: `fq=flashsale_id_i:${flashSale[0].pricelistId}&fq=flashsale_price_f:[1 TO *]&limit=${
+        source === 'bottom' ? '4' : '2'
+      }`,
+      operation: 'AND'
+    })
+    if (source === 'bottom') {
+      dataflashSale = dataFlash.response.products.slice('2', '4')
+    } else {
+      dataflashSale = dataFlash.response.products
+    }
+  }
   const dataProductSimilar = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular&operation=OR`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR`
   )
+  dataProductSimilar.data.response.products = [
+    ...dataflashSale,
+    ...dataProductSimilar.data.response.products,
+  ];
   return dataProductSimilar.data.response
 }
 
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index dfff91d7..5cbe8a8a 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -18,8 +18,12 @@ 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 }) => {
+  console.log('ini product', products)
   const router = useRouter()
   const auth = useAuth()
   const { slug } = router.query
@@ -96,6 +100,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
       router.push(`/login?next=/shop/product/${slug}`)
       return
     }
+
     const quantity = variantQuantityRefs.current[variantId].value
 
     if (!validQuantity(quantity)) return
@@ -141,7 +146,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()
@@ -170,11 +176,41 @@ 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 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>
+                )}
+                <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'>
@@ -374,6 +410,16 @@ 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'>FLASH SALE</span>
+                  </div>
+                )}
               </div>
             )}
             <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
@@ -615,7 +661,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         )} */}
                         <button
                           type='button'
-                          onClick={() => handleAddToCart(variant)}
+                          onClick={() => handleAddToCart(variant.id)}
                           className='flex-1 py-2 btn-yellow'
                         >
                           Keranjang
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a8964310..b38bb43c 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,10 +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)
@@ -22,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
@@ -29,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 ${
@@ -101,6 +122,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           </Link>
         </div>
         <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}
+              />
+              <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+            </div>
+          )}
           {product?.manufacture?.name ? (
             <Link
               href={createSlug(
diff --git a/src/lib/product/components/ProductSimilar.jsx b/src/lib/product/components/ProductSimilar.jsx
index 63a33089..1b82c2e5 100644
--- a/src/lib/product/components/ProductSimilar.jsx
+++ b/src/lib/product/components/ProductSimilar.jsx
@@ -3,7 +3,8 @@ import useProductSimilar from '../hooks/useProductSimilar'
 import ProductSlider from './ProductSlider'
 
 const ProductSimilar = ({ query }) => {
-  const { productSimilar } = useProductSimilar({ query })
+  const source = "bottom"
+  const { productSimilar } = useProductSimilar({ query, source })
 
   if (productSimilar.isLoading) {
     return <PopularProductSkeleton />
diff --git a/src/lib/product/hooks/useProductSimilar.js b/src/lib/product/hooks/useProductSimilar.js
index d16e4c58..712d07ad 100644
--- a/src/lib/product/hooks/useProductSimilar.js
+++ b/src/lib/product/hooks/useProductSimilar.js
@@ -1,10 +1,9 @@
 import productSimilarApi from '../api/productSimilarApi'
 import { useQuery } from 'react-query'
 
-const useProductSimilar = ({ query }) => {
-  const fetchProductSimilar = async () => await productSimilarApi({ query })
+const useProductSimilar = ({ query, source }) => {
+  const fetchProductSimilar = async () => await productSimilarApi({ query, source })
   const { data, isLoading } = useQuery(`productSimilar-${query}`, fetchProductSimilar)
-
   return {
     productSimilar: { data, isLoading }
   }
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'
       }
     }