From 085dcb058ef4b92cea8b4044e65dd940580f3f42 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 15:26:32 +0700
Subject: <iman> merge all promotion

---
 .../components/elements/Footer/BasicFooter.jsx     |  2 +-
 .../components/elements/Navbar/NavbarDesktop.jsx   | 75 ++++++++++++++++++----
 src/core/components/elements/Navbar/TopBanner.jsx  |  9 ++-
 .../flashSale/components/FlashSaleNonDisplay.jsx   | 66 +++++++++++++++++++
 src/lib/product/components/ProductCard.jsx         |  4 +-
 5 files changed, 139 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/flashSale/components/FlashSaleNonDisplay.jsx

(limited to 'src')

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 6129143d..4beea604 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -259,7 +259,7 @@ const InformationCenter = () => (
       <li className='text-gray_r-12/80 flex items-center'>
         <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
         <a href='tel:02129338828' target='_blank' rel='noreferrer'>
-          (021) 2933-8828 / 29
+          (021) 2933-8828
         </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 7d9e4264..cc5ea611 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,11 +10,12 @@ import {
   ChevronDownIcon,
   DocumentCheckIcon,
   HeartIcon,
+  ArrowUpRightIcon,
 } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import DesktopView from '../../views/DesktopView';
 import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
@@ -47,6 +48,46 @@ const NavbarDesktop = () => {
   const { product } = useProductContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const [showPopup, setShowPopup] = useState(false);
+  const [isTop, setIsTop] = useState(true);
+
+  const handleTopBannerLoad = useCallback(() => {
+    const showTimer = setTimeout(() => {
+      setShowPopup(true);
+    }, 500);
+
+    const hideTimer = setTimeout(() => {
+      // setShowPopup(false);
+    }, 9500);
+
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY < 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY < 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   useEffect(() => {
     if (router.pathname === '/shop/product/[slug]') {
       setPayloadWa({
@@ -79,7 +120,7 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
-      <TopBanner />
+      <TopBanner onLoad={handleTopBannerLoad} />
       <div className='py-2 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <div className='flex items-start gap-5'>
@@ -204,6 +245,7 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+            
             <Link
                 href="/shop/promo"
                 className={`${
@@ -213,18 +255,25 @@ 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>
-                {/* <div className='w-full h-full flex justify-end items-start'> 
-                  <Image
-                    src='/images/ICON PROMO DISKON.svg'
-                    alt='promo'
-                    width={100}
-                    height={100}
-                    quality={100}
-                    className={`inline-block  z-20`}
-                  />
-                </div> */}
+              {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`}>
+                  <p className='w-36 h-3'>
+                    Penawaran Terbatas
+                    </p>
+                </div>
+              )} */}
+              
 
               <Link
                 href='/shop/brands'
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index df47e87d..265dfb5e 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -3,9 +3,10 @@ import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDe
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { useEffect } from 'react';
 import { background } from '@chakra-ui/react';
 
-const TopBanner = () => {
+const TopBanner = ({ onLoad }) => {
   const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
@@ -17,6 +18,12 @@ const TopBanner = () => {
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
+  useEffect(() => {
+    if (hasData) {
+      onLoad();
+    }
+  }, [hasData, onLoad]);
+
   return (
     <SmoothRender
       isLoaded={hasData}
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;
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 94db144d..35e2a665 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -17,8 +17,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const [discount, setDiscount] = useState(0);
 
   let voucherPastiHemat = 0;
-
-  if (product?.voucherPastiHemat?.length > 0) {
+  
+  if (product?.voucherPastiHemat ? product?.voucherPastiHemat.length : voucherPastiHemat > 0) {
     const stringVoucher = product?.voucherPastiHemat[0];
     const validJsonString = stringVoucher.replace(/'/g, '"');
     voucherPastiHemat = JSON.parse(validJsonString);
-- 
cgit v1.2.3