2 files changed, 121 insertions, 41 deletions
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 5be6d4e3..6d90cad7 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -2,10 +2,8 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
 import CountDown from '@/core/components/elements/CountDown/CountDown';
-import productSearchApi from '@/lib/product/api/productSearchApi';
 import ProductSlider from '@/lib/product/components/ProductSlider';
 
-import flashSaleApi from '../api/flashSaleApi';
 import { FlashSaleSkeleton } from '../skeleton/FlashSaleSkeleton';
 
 const FlashSale = () => {
@@ -14,10 +12,14 @@ const FlashSale = () => {
 
   useEffect(() => {
     const loadFlashSales = async () => {
-      const dataFlashSales = await flashSaleApi();
-      setFlashSales(dataFlashSales);
+      const res = await fetch('/api/flashsale-header');
+      const { data } = await res.json();
+      if (data) {
+        setFlashSales(data);
+      }
       setIsLoading(false);
     };
+
     loadFlashSales();
   }, []);
 
@@ -26,54 +28,64 @@ const FlashSale = () => {
   }
 
   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 className='sm:mt-4'>
+      {flashSales?.length > 0 && (
+        <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8 sm:mt-4'>
+          {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>
-              <CountDown initialTime={flashSale.duration} />
-            </div>
 
-            <div className='relative'>
-              <Image
-                src={flashSale.banner}
-                alt={flashSale.name}
-                width={1080}
-                height={192}
-                className='w-full rounded mb-4 hidden sm:block'
-              />
-              <Image
-                src={flashSale.bannerMobile}
-                alt={flashSale.name}
-                width={256}
-                height={48}
-                className='w-full rounded mb-4 block sm:hidden'
-              />
-              <FlashSaleProduct flashSaleId={flashSale.pricelistId} />
+              <div className='relative'>
+                <Image
+                  src={flashSale.banner}
+                  alt={flashSale.name}
+                  width={1080}
+                  height={192}
+                  className='w-full rounded mb-4 hidden sm:block'
+                />
+                <Image
+                  src={flashSale.bannerMobile}
+                  alt={flashSale.name}
+                  width={256}
+                  height={48}
+                  className='w-full rounded mb-4 block sm:hidden'
+                />
+                <FlashSaleProduct
+                  flashSaleId={flashSale.pricelistId}
+                  duration={flashSale.duration}
+                />
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    )
+          ))}
+        </div>
+      )}
+    </div>
   );
 };
 
-const FlashSaleProduct = ({ flashSaleId }) => {
+const FlashSaleProduct = ({ flashSaleId, duration }) => {
   const [products, setProducts] = useState(null);
-
   useEffect(() => {
+    const data_search = new URLSearchParams({
+      query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500&orderBy=flashsale-price-asc&source=similar`,
+      operation: 'AND',
+      duration: `${duration}`,
+    });
     const loadProducts = async () => {
-      const dataProducts = await productSearchApi({
-        query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500&orderBy=flashsale-price-asc`,
-        operation: 'AND',
-      });
-      setProducts(dataProducts.response);
+      const res = await fetch(
+        `/api/search-flashsale?${data_search.toString()}`
+      );
+      const { data } = await res.json();
+      setProducts(data.response);
     };
+
     loadProducts();
-  }, [flashSaleId]);
+  }, []);
 
   return <ProductSlider products={products} />;
 };
diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
new file mode 100644
index 00000000..4b420fac
--- /dev/null
+++ b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
@@ -0,0 +1,68 @@
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import CountDown from '@/core/components/elements/CountDown/CountDown';
+import productSearchApi from '@/lib/product/api/productSearchApi';
+import ProductSlider from '@/lib/product/components/ProductSlider';
+import flashSaleApi from '../api/flashSaleApi';
+import { FlashSaleSkeleton } from '../skeleton/FlashSaleSkeleton';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+const FlashSaleNonDisplay = () => {
+  const [flashSales, setFlashSales] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+  useEffect(() => {
+    const loadFlashSales = async () => {
+      const dataFlashSales = await flashSaleApi();
+      setFlashSales(dataFlashSales);
+      setIsLoading(false);
+    };
+    loadFlashSales();
+  }, []);
+  const handleSubmit = () => {
+    router.push(`/shop/search?penawaran=${flashSales[0]?.pricelistId}`);
+  };
+  if (isLoading) {
+    return <FlashSaleSkeleton />;
+  }
+
+  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 items-center mb-4 justify-between '>
+              <div className='font-medium sm:text-h-lg mt-1.5'>
+                Penawaran Terbatas
+              </div>
+              <div
+                onClick={handleSubmit}
+                className='!text-red-500 font-semibold cursor-pointer'
+              >
+                Lihat Semua
+              </div>
+            </div>
+            <div className='relative'>
+              <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=25&orderBy=flashsale-discount-desc&source=similar`,
+        operation: 'AND',
+      });
+      setProducts(dataProducts.response);
+    };
+    loadProducts();
+  }, [flashSaleId]);
+  return <ProductSlider products={products} />;
+};
+export default FlashSaleNonDisplay;