Merge branch 'Feature/new-register' into Feature/switch-account

3 files changed, 73 insertions, 46 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 2ddf5efe..2a51c41f 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -5,7 +5,9 @@ import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import IndoteknikLogo from '@/images/logo.png';
 import Cardheader from '@/lib/cart/components/Cartheader';
+import Quotationheader from "../../../../../src/lib/quotation/components/Quotationheader.jsx"
 import Category from '@/lib/category/components/Category';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
 import {
   ChevronDownIcon,
   DocumentCheckIcon,
@@ -29,6 +31,8 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import style from "./style/NavbarDesktop.module.css";
+import useTransactions from '@/lib/transaction/hooks/useTransactions';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -38,15 +42,27 @@ const NavbarDesktop = () => {
   const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
-
+  const [quotationCount, setQuotationCount] = useState(0);
+  const [pendingTransactions, setPendingTransactions] = useState([])
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
-
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
   const router = useRouter();
 
   const { product } = useProductContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  const query = {
+    context: 'quotation',
+    site:
+    (auth?.webRole === null && auth?.site ? auth.site : null),
+  };
+  
+  const { transactions } = useTransactions({ query });
+  const data = transactions?.data?.saleOrders.filter(
+    (transaction) => transaction.status === 'draft'
+  );
 
   const [showPopup, setShowPopup] = useState(false);
   const [isTop, setIsTop] = useState(true);
@@ -89,6 +105,11 @@ const NavbarDesktop = () => {
   }, []);
 
   useEffect(() => {
+    setPendingTransactions(data);
+  }, [transactions.data]);
+  
+  
+  useEffect(() => {
     if (router.pathname === '/shop/product/[slug]') {
       setPayloadWa({
         name: product?.name,
@@ -96,11 +117,11 @@ const NavbarDesktop = () => {
         url: createSlug('/shop/product/', product?.name, product?.id, true),
       });
       setTemplateWA('product');
-
+      
       setUrlPath(router.asPath);
     }
   }, [product, router]);
-
+  
   useEffect(() => {
     const handleCartChange = () => {
       const cart = async () => {
@@ -109,15 +130,31 @@ const NavbarDesktop = () => {
       };
       cart();
     };
-    handleCartChange();
-
+    handleCartChange(); 
+    
     window.addEventListener('localStorageChange', handleCartChange);
-
+    
     return () => {
       window.removeEventListener('localStorageChange', handleCartChange);
     };
-  }, []);
+  }, [transactions.data, cart]);
 
+  useEffect(() => {
+    const handleQuotationChange = () => {
+      const quotation = async () => {
+        setQuotationCount(pendingTransactions?.length);
+      };
+      quotation();
+    };
+    handleQuotationChange();
+
+    window.addEventListener('localStorageChange', handleQuotationChange);
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleQuotationChange);
+    };
+  }, [pendingTransactions]);
+  
   return (
     <DesktopView>
       <TopBanner onLoad={handleTopBannerLoad} />
@@ -180,17 +217,7 @@ const NavbarDesktop = () => {
             <Search />
           </div>
           <div className='flex gap-x-4 items-center'>
-            <Link
-              href='/my/transactions'
-              target='_blank'
-              rel='noreferrer'
-              className='flex items-center gap-x-2 !text-gray_r-12/80'
-            >
-              <DocumentCheckIcon className='w-7' />
-              Daftar
-              <br />
-              Quotation
-            </Link>
+            <Quotationheader quotationCount={quotationCount} data={pendingTransactions} />
 
             <Cardheader cartCount={cartCount} />
 
@@ -225,8 +252,7 @@ const NavbarDesktop = () => {
 
         <div className='container mx-auto mt-6'>
           <div className='flex'>
-            <button
-              type='button'
+            <div
               onClick={() => setIsOpenCategory((isOpen) => !isOpen)}
               onBlur={() => setIsOpenCategory(false)}
               className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative'
@@ -243,7 +269,7 @@ const NavbarDesktop = () => {
               >
                 <Category />
               </div>
-            </button>
+            </div>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
             
             <Link
@@ -267,7 +293,7 @@ const NavbarDesktop = () => {
                   />
                   </div>
               )}
-                <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>
+                <span 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</span>
               </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`}>
@@ -286,18 +312,18 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer'
               >
-               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
+               <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</span>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
                 className={`${
-                  router.asPath === '/shop/search?orderBy=stock' &&
+                  router.asPath.includes('/shop/search?orderBy=stock') &&
                   'bg-gray_r-3'
                 } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
+                <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</span>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
@@ -305,7 +331,7 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
+                <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</span>
               </Link>
               {/* <Link
                 href='/video'
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
 
 const Search = dynamic(() => import('./Search'));
 
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      {/* <TopBanner /> */}
+      <TopBanner />
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 7bc8fb6a..f438ae67 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,19 +1,20 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { background } from '@chakra-ui/react';
 import { useEffect } from 'react';
 
-const TopBanner = ({ onLoad }) => {
+const TopBanner = ({ onLoad = () => {} }) => {
+  const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
     queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
     refetchOnWindowFocus: false,
   });
 
-  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
@@ -26,21 +27,21 @@ const TopBanner = ({ onLoad }) => {
   return (
     <SmoothRender
       isLoaded={hasData}
-      height='36px'
+      // height='36px'
       duration='700ms'
       delay='300ms'
-      style={{ backgroundColor }}
-    >
-      <Link href={data?.url}>
-        <Image
-          src={data?.image}
-          alt={data?.name}
-          width={1440}
-          height={40}
-          className='object-cover object-center h-full mx-auto'
-        />
-      </Link>
-    </SmoothRender>
+      className='h-auto'
+      >
+      <Link
+          href={data?.url}
+          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+          style={{
+            backgroundImage: `url('${data?.image}')`,
+          }}
+        >
+        </Link>
+
+      </SmoothRender>
   );
 };