From 86a715473aca30e277c1857bbcb6e6e9283e13f4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 15:22:39 +0700
Subject: <iman> update all promo

---
 public/images/penawaran-terbatas.jpg               | Bin 0 -> 6802 bytes
 public/images/penawaran-terbatas.svg               |  24 --------
 .../promo/components/FlashSaleNonDisplay.tsx       |  20 +++++++
 src-migrate/pages/shop/promo/index.tsx             |   4 ++
 .../components/elements/Navbar/NavbarDesktop.jsx   |  19 +++---
 .../flashSale/components/FlashSaleNonDisplay.jsx   |  66 +++++++++++++++++++++
 6 files changed, 100 insertions(+), 33 deletions(-)
 create mode 100644 public/images/penawaran-terbatas.jpg
 delete mode 100644 public/images/penawaran-terbatas.svg
 create mode 100644 src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx
 create mode 100644 src/lib/flashSale/components/FlashSaleNonDisplay.jsx

diff --git a/public/images/penawaran-terbatas.jpg b/public/images/penawaran-terbatas.jpg
new file mode 100644
index 00000000..e43739fc
Binary files /dev/null and b/public/images/penawaran-terbatas.jpg differ
diff --git a/public/images/penawaran-terbatas.svg b/public/images/penawaran-terbatas.svg
deleted file mode 100644
index 485f01a1..00000000
--- a/public/images/penawaran-terbatas.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<?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 74 16" style="enable-background:new 0 0 74 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#D8ECD9;stroke:#309D48;stroke-miterlimit:10;}
-	.st1{fill:#D8ECD9;stroke:#309D48;stroke-width:0.6;stroke-miterlimit:10;}
-	.st2{fill:#2F9F48;}
-	.st3{font-family:'Gilroy-Bold';}
-	.st4{font-size:6.2912px;}
-</style>
-<image style="overflow:visible;" width="1159" height="710" xlink:href="B62B1E21.jpg"  transform="matrix(1.5216 0 0 1.5216 -3030.1304 -258.0337)">
-</image>
-<path class="st0" d="M-2358.9-67.4h-157.8c-8.3,0-15.1,6.7-15.1,15.1v0c0,8.3,6.8,15.1,15.1,15.1h1.5c0.6,0,1.1,0.3,1.5,0.7l5.9,7.3
-	c0.7,0.9,2.2,0.9,3,0l6-7.3c0.3-0.4,0.9-0.7,1.5-0.7h138.4c8.3,0,15.1-6.7,15.1-15.1v0C-2343.8-60.7-2350.5-67.4-2358.9-67.4z"/>
-<g>
-	<text transform="matrix(1.0188 0 0 1 -2518.741 -47.305)" class="st2 st3" style="font-size:16.7726px;">Penawaran Terbatas</text>
-</g>
-<path class="st1" d="M66,0.9H6.9c-3.1,0-5.7,2.5-5.7,5.6v0c0,3.1,2.5,5.6,5.7,5.6h0.6c0.2,0,0.4,0.1,0.6,0.3l2.2,2.7
-	c0.3,0.3,0.8,0.3,1.1,0l2.3-2.7c0.1-0.2,0.3-0.2,0.6-0.2H66c3.1,0,5.7-2.5,5.7-5.6v0C71.7,3.4,69.2,0.9,66,0.9z"/>
-<g>
-	<text transform="matrix(1.0188 0 0 1 6.0805 8.4081)" class="st2 st3 st4">Penawaran Terbatas</text>
-</g>
-</svg>
diff --git a/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx
new file mode 100644
index 00000000..1c5cc86d
--- /dev/null
+++ b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx
@@ -0,0 +1,20 @@
+import dynamic from "next/dynamic";
+import React from "react";
+import { FlashSaleSkeleton } from "@/lib/flashSale/skeleton/FlashSaleSkeleton";
+
+const FlashSaleNonDisplay = dynamic(
+    () => import('@/lib/flashSale/components/FlashSaleNonDisplay'),
+    {
+      loading: () => <FlashSaleSkeleton />,
+    }
+  );
+
+  const FlashSalePromo = ()=> {
+    return(
+        <>  
+            <FlashSaleNonDisplay/>
+        </>
+    )
+  }
+
+  export default FlashSalePromo
\ No newline at end of file
diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx
index febe31a4..95d8a4d5 100644
--- a/src-migrate/pages/shop/promo/index.tsx
+++ b/src-migrate/pages/shop/promo/index.tsx
@@ -5,6 +5,7 @@ import Hero from '~/modules/promo/components/Hero'
 import PromotionProgram from '~/modules/promo/components/PromotinProgram'
 import Voucher from '~/modules/promo/components/Voucher'
 import FlashSale from '../../../modules/promo/components/FlashSale'
+import FlashSaleNonDisplay from '../../../modules/promo/components/FlashSaleNonDisplay'
 const PromoList = dynamic(() => import('../../../modules/promo/components/PromoList'));
 
 
@@ -28,6 +29,9 @@ const PromoPage = () => {
         <FlashSale />
       </LazyLoadComponent>
       <h1 className='h-1'></h1>
+      <LazyLoadComponent>
+        <FlashSaleNonDisplay />
+      </LazyLoadComponent>
       <LazyLoadComponent>
         <Voucher />
       </LazyLoadComponent>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 78e7f54a..cc5ea611 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -255,6 +255,16 @@ const NavbarDesktop = () => {
                 rel="noreferrer"
               >
                 <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
+              {showPopup &&  (
+                <Image
+                src='/images/penawaran-terbatas.jpg'
+                alt='penawaran terbatas'
+                width={1440}
+                height={160}
+                quality={100}
+                className={`fixed ${isTop ? 'top-[155px]' : 'top-[80px]'} rounded-3xl left-[645px] w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
+              />
+              )}
               </Link>
               {/* {showPopup && router.pathname === '/' && (
                 <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
@@ -263,15 +273,6 @@ const NavbarDesktop = () => {
                     </p>
                 </div>
               )} */}
-              {showPopup && router.pathname === '/' && (
-                <Image
-                src='/images/penawaran-terbatas.svg'
-                alt='penawaran terbatas'
-                width={144}
-                height={3}
-                className={`fixed ${isTop ? 'top-[-275px]' : 'top-[-345px]'} rounded-3xl left-[680px] w-48 h-full  p-2 z-50 transition-all duration-300`}
-              />
-              )}
               
 
               <Link
diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
new file mode 100644
index 00000000..85807fad
--- /dev/null
+++ b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
@@ -0,0 +1,66 @@
+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 FlashSaleNonDisplay = () => {
+  const [flashSales, setFlashSales] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadFlashSales = async () => {
+      const dataFlashSales = await flashSaleApi();
+      setFlashSales(dataFlashSales);
+      setIsLoading(false);
+    };
+    loadFlashSales();
+  }, []);
+
+  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 gap-x-3 mb-4 justify-between sm:justify-start'>
+              <div className='font-medium sm:text-h-lg mt-1.5'>
+                Penawaran Terbatas
+              </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=500&orderBy=flashsale_discount_f desc`,
+        operation: 'AND',
+      });
+      setProducts(dataProducts.response);
+    };
+    loadProducts();
+  }, [flashSaleId]);
+
+  return <ProductSlider products={products} />;
+};
+
+export default FlashSaleNonDisplay;
-- 
cgit v1.2.3