flash sale mapping, mobile flash sale

2 files changed, 36 insertions, 16 deletions

diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 0167dc57..91248c12 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import flashSaleApi from '../api/flashSaleApi'
 import Image from '@/core/components/elements/Image/Image'
 import CountDown from '@/core/components/elements/CountDown/CountDown'
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import ProductSlider from '@/lib/product/components/ProductSlider'
 
 const FlashSale = () => {
   const [flashSales, setFlashSales] = useState(null)
@@ -14,24 +16,42 @@ const FlashSale = () => {
     loadFlashSales()
   }, [])
 
-  return flashSales?.length > 0 && (
-    <div className='px-4 sm:px-0'>
-      
-      {flashSales.map((flashSale, index) => (
-        <div key={index}>
-          <div className='font-medium sm:text-h-lg mb-4'>{flashSale.name}</div>
-
-          <div className='relative'>
-            <div className='absolute top-0 left-0 p-4'>
+  return (
+    flashSales?.length > 0 && (
+      <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8'>
+        {flashSales.map((flashSale, index) => (
+          <div key={index}>
+            <div className='flex gap-x-3 mb-4 justify-between sm:justify-start'>
+              <div className='font-medium sm:text-h-lg mt-1.5'>{flashSale.name}</div>
               <CountDown initialTime={flashSale.duration} />
             </div>
-            <Image src={flashSale.banner} alt={flashSale.name} className='w-full rounded' />
-          </div>
 
-        </div>
-      ))}
-    </div>
+            <div className='relative'>
+              <Image src={flashSale.banner} alt={flashSale.name} className='w-full rounded mb-4' />
+              <FlashSaleProduct flashSaleId={flashSale.pricelistId} />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
   )
 }
 
+const FlashSaleProduct = ({ flashSaleId }) => {
+  const [products, setProducts] = useState(null)
+
+  useEffect(() => {
+    const loadProducts = async () => {
+      const dataProducts = await productSearchApi({
+        query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500`,
+        operation: 'AND'
+      })
+      setProducts(dataProducts.response)
+    }
+    loadProducts()
+  }, [flashSaleId])
+
+  return <ProductSlider products={products} />
+}
+
 export default FlashSale
diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js
index 71fb72e6..8ff8e57d 100644
--- a/src/lib/product/api/productSearchApi.js
+++ b/src/lib/product/api/productSearchApi.js
@@ -1,9 +1,9 @@
 import _ from 'lodash-contrib'
 import axios from 'axios'
 
-const productSearchApi = async ({ query }) => {
+const productSearchApi = async ({ query, operation = 'OR' }) => {
   const dataProductSearch = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=OR`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}`
   )
   return dataProductSearch.data
 }