1 files changed, 55 insertions, 22 deletions

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 4493fe31..6077c192 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,6 +1,5 @@
 import dynamic from 'next/dynamic';
-import { useRef } from 'react';
-
+import { useEffect, useRef, useState } from 'react';
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
 import Seo from '@/core/components/Seo';
@@ -11,12 +10,15 @@ import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
 import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
 import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton';
 import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
-import PagePopupIformation from '~/modules/popup-information';
-import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
+import PagePopupIformation from '~/modules/popup-information'; // need change to dynamic and ssr : false
+import CategoryPilihan from '../lib/home/components/CategoryPilihan';
+import odooApi from '@/core/api/odooApi';
 import { getAuth } from '~/libs/auth';
+// import { getAuth } from '~/libs/auth';
+import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
 
 const BasicLayout = dynamic(() =>
-  import('@/core/components/layouts/BasicLayout')
+  import('@/core/components/layouts/BasicLayout'),{ssr: false}
 );
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
   loading: () => <HeroBannerSkeleton />,
@@ -53,17 +55,28 @@ const ProgramPromotion = dynamic(() =>
 );
 
 const BannerSection = dynamic(() =>
-  import('@/lib/home/components/BannerSection')
-);
+  import('@/lib/home/components/BannerSection'), {ssr: false}
+);  
 const CategoryHomeId = dynamic(() =>
-  import('@/lib/home/components/CategoryHomeId')
+  import('@/lib/home/components/CategoryHomeId'), {ssr: false}
 );
-const CustomerReviews = dynamic(() =>
-  import('@/lib/review/components/CustomerReviews')
+
+const CategoryDynamic = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamic'), {ssr: false}
+);
+
+const CategoryDynamicMobile = dynamic(() =>
+import('@/lib/home/components/CategoryDynamicMobile'), {ssr: false}
 );
-const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'));
 
-export default function Home() {
+const CustomerReviews = dynamic(() =>
+  import('@/lib/review/components/CustomerReviews'), {ssr: false}
+); // need to ssr:false
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {ssr: false}); // need to ssr: false
+
+
+
+export default function Home({categoryId}) {
   const bannerRef = useRef(null);
   const wrapperRef = useRef(null);
 
@@ -74,7 +87,19 @@ export default function Home() {
       bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
   };
 
+  useEffect(() => {
+    const loadCategories = async () => {
+     const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId})
+     if(getCategories){
+      setDataCategories(getCategories)
+     }
+    }
+    loadCategories()
+  }, [])
+
+  const [dataCategories, setDataCategories] = useState([])
   return (
+    <>
     <BasicLayout>
       <Seo
         title='Indoteknik.com: B2B Industrial Supply & Solution'
@@ -82,11 +107,9 @@ export default function Home() {
         additionalMetaTags={[
           {
             name: 'keywords',
-            content:
-              'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
+            content: 'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
           },
-        ]}
-      />
+        ]} />
 
       <PagePopupIformation />
 
@@ -125,19 +148,22 @@ export default function Home() {
               </DelayRender>
               </>
             )}
-            <PromotinProgram />
+            {/* <PromotinProgram /> */}
+            {dataCategories &&(
+              <CategoryPilihan categories={dataCategories} />
+            )}
+            <CategoryDynamic /> 
             <CategoryHomeId />
             <BannerSection />
             <CustomerReviews />
           </div>
         </div>
-      </DesktopView>
-
-      <MobileView>
+    </DesktopView>
+    <MobileView>
         <DelayRender renderAfter={200}>
           <HeroBanner />
         </DelayRender>
-        <div className='flex flex-col gap-y-12 my-6'>
+        <div className='flex flex-col gap-y-4 my-6'>
           <DelayRender renderAfter={400}>
             <ServiceList />
           </DelayRender>
@@ -157,7 +183,13 @@ export default function Home() {
             </>
           )}
           <DelayRender renderAfter={600}>
-            <PromotinProgram />
+            {/* <PromotinProgram /> */}
+          </DelayRender>
+          <DelayRender renderAfter={600}>
+            {dataCategories &&(
+              <CategoryPilihan categories={dataCategories} />
+            )}
+            <CategoryDynamicMobile />
           </DelayRender>
           <DelayRender renderAfter={800}>
             <PopularProduct />
@@ -172,5 +204,6 @@ export default function Home() {
         </div>
       </MobileView>
     </BasicLayout>
+  </>
   );
 }
\ No newline at end of file