Merge branch 'new-release' into CR/new_product_detail

23 files changed, 798 insertions, 314 deletions

diff --git a/src/lib/address/api/cityApi.js b/src/lib/address/api/cityApi.js
index 7873435b..0b0201e6 100644
--- a/src/lib/address/api/cityApi.js
+++ b/src/lib/address/api/cityApi.js
@@ -1,7 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 
-const cityApi = async () => {
-  const dataCities = await odooApi('GET', '/api/v1/city')
+const cityApi = async ({stateId}) => {
+  const dataCities = await odooApi('GET', '/api/v1/city?state_id='+stateId)
   return dataCities
 }
 
diff --git a/src/lib/address/api/stateApi.js b/src/lib/address/api/stateApi.js
new file mode 100644
index 00000000..cea49e7e
--- /dev/null
+++ b/src/lib/address/api/stateApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const stateApi = async () => {
+  const dataState = await odooApi('GET', '/api/v1/state')
+  return dataState
+}
+
+export default stateApi
\ No newline at end of file
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index e315affe..9d70e8fc 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -12,6 +12,7 @@ import { toast } from 'react-hot-toast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Menu from '@/lib/auth/components/Menu';
 import useAddresses from '../hooks/useAddresses';
+import stateApi from '../api/stateApi';
 
 const CreateAddress = () => {
   const auth = useAuth();
@@ -28,23 +29,40 @@ const CreateAddress = () => {
     defaultValues,
   });
   const { addresses = [] } = useAddresses(); // Ensure addresses is an array
+  const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
   const [subDistricts, setSubDistricts] = useState([]);
   const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
 
   useEffect(() => {
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
+    const loadState = async () => {
+      let dataState = await stateApi();
+      dataState = dataState.map((state) => ({
+        value: state.id,
+        label: state.name,
       }));
-      setCities(dataCities);
+      setState(dataState);
     };
-    loadCities();
+    loadState();
   }, []);
 
+  const watchState = watch('state');
+  useEffect(() => {
+    setValue('city', '');
+    if (watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({stateId: watchState});
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+      };
+      loadCities();
+    }
+  }, [watchState, setValue]);
+
   useEffect(() => {
     if (addresses) {
       let hasContactAddress = false;
@@ -100,6 +118,7 @@ const CreateAddress = () => {
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
+      state_id: values.state,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
@@ -205,12 +224,26 @@ const CreateAddress = () => {
             </div>
 
             <div>
+              <label className='form-label mb-2'>Provinsi</label>
+              <Controller
+                name='state'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect {...props} options={states} />
+                )}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.state?.message}
+              </div>
+            </div>
+
+            <div>
               <label className='form-label mb-2'>Kota</label>
               <Controller
                 name='city'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={cities} />
+                  <HookFormSelect {...props} options={cities}  disabled={!watchState}/>
                 )}
               />
               <div className='text-caption-2 text-danger-500 mt-1'>
@@ -270,6 +303,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });
@@ -280,6 +314,7 @@ const defaultValues = {
   email: '',
   mobile: '',
   street: '',
+  state: '',
   city: '',
   district: '',
   subDistrict: '',
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 182c8a31..23cf72a9 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -13,6 +13,7 @@ import { toast } from 'react-hot-toast';
 import Menu from '@/lib/auth/components/Menu';
 import useAuth from '@/core/hooks/useAuth';
 import odooApi from '@/core/api/odooApi';
+import stateApi from '../api/stateApi';
 
 const EditAddress = ({ id, defaultValues }) => {
   const auth = useAuth();
@@ -29,9 +30,11 @@ const EditAddress = ({ id, defaultValues }) => {
     resolver: yupResolver(validationSchema),
     defaultValues,
   });
+
+  const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [districts, setDistricts] = useState([]);
-  const [subDistricts, setSubDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]); 
 
   useEffect(() => {
     const loadProfile = async () => {
@@ -48,16 +51,38 @@ const EditAddress = ({ id, defaultValues }) => {
   }, [auth?.parentId]);
 
   useEffect(() => {
-    const loadCities = async () => {
-      let dataCities = await cityApi();
-      dataCities = dataCities.map((city) => ({
-        value: city.id,
-        label: city.name,
+    const loadStates = async () => {
+      let dataStates = await stateApi();
+      dataStates = dataStates.map((state) => ({
+        value: state.id,
+        label: state.name,
       }));
-      setCities(dataCities);
+      setStates(dataStates);
     };
-    loadCities();
-  }, []);
+    loadStates();
+  },[])
+
+  const watchState = watch('state');
+  useEffect(() => {
+    setValue('city', '');
+    if(watchState) {
+      const loadCities = async () => {
+        let dataCities = await cityApi({ stateId: watchState });
+        dataCities = dataCities.map((city) => ({
+          value: city.id,
+          label: city.name,
+        }));
+        setCities(dataCities);
+        let oldCity = getValues('oldCity');
+        if (oldCity) {
+          setValue('city', oldCity);
+          setValue('oldCity', '');
+        }
+      };
+      loadCities();
+    }
+    
+  }, [watchState, setValue, getValues]);
 
   const watchCity = watch('city');
   useEffect(() => {
@@ -107,6 +132,7 @@ const EditAddress = ({ id, defaultValues }) => {
     const data = {
       ...values,
       phone: values.mobile,
+      state_id: values.state,
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
@@ -242,12 +268,26 @@ const EditAddress = ({ id, defaultValues }) => {
               </div>
 
               <div>
+                <label className='form-label mb-2'>Provinsi</label>
+                <Controller
+                  name='state'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={states} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.state?.message}
+                </div>
+              </div>
+
+              <div>
                 <label className='form-label mb-2'>Kota</label>
                 <Controller
                   name='city'
                   control={control}
                   render={(props) => (
-                    <HookFormSelect {...props} options={cities} />
+                    <HookFormSelect {...props} options={cities} disabled={!watchState} />
                   )}
                 />
                 <div className='text-caption-2 text-danger-500 mt-1'>
@@ -308,6 +348,7 @@ const validationSchema = Yup.object().shape({
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
+  state : Yup.string().required('Harus di-pilih'),
   city: Yup.string().required('Harus di-pilih'),
   district: Yup.string().required('Harus di-pilih'),
 });
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 4c7e852f..0e180d9c 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -1664,7 +1664,7 @@ const SectionAddress = ({ address, label, url }) => (
 );
 
 const SectionValidation = ({ address }) =>
-  address?.rajaongkirCityId == 0 && (
+  address?.stateId == 0 && (
     <BottomPopup active={true} title='Update Alamat'>
       <div className='leading-7 text-gray_r-12/80'>
         Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
index 92245e31..4a67b252 100644
--- a/src/lib/checkout/components/FinishCheckout.jsx
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -1,27 +1,86 @@
-import Link from '@/core/components/elements/Link/Link'
+import Link from 'next/link';
+import Image from '~/components/ui/image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { useEffect, useState } from 'react';
+import odooApi from '@/core/api/odooApi';
+import useDevice from '@/core/hooks/useDevice';
+import useAuth from '@/core/hooks/useAuth';
+import axios from 'axios';
+import { toast } from 'react-hot-toast';
 
 const FinishCheckout = ({ query }) => {
+  const [data, setData] = useState();
+  const [transactionData, setTransactionData] = useState();
+  const { isDesktop, isMobile } = useDevice();
+  const auth = useAuth();
+
+  const so_order = query?.order_id?.replaceAll('-', '/');
+  useEffect(() => {
+    const fetchData = async () => {
+      const fetchedData = await odooApi(
+        'GET',
+        `/api/v1/sale_order_number?sale_number=${so_order}`
+      );
+      setData(fetchedData[0]);
+    };
+    fetchData();
+  }, [query]);
+
+  // Kirim email ketika komponen ini dimount atau sesuai kondisi
+  const sendEmail = async () => {
+    try {
+      const send = await axios.post(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${query?.order_id}`,
+        {}
+      );
+      if (send.status === 200) {
+        toast.success('Berhasil mengirim rincian pesanan');
+      } else {
+        toast.error('Gagal mengirimkan rincian pesanan');
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal mengirimkan rincian pesanan');
+    }
+  };
+
   return (
-    <div className='mx-auto container p-4 md:p-0 mt-0 md:mt-10'>
-      <div className='rounded-xl bg-warning-100 text-center border border-warning-300 w-full md:w-1/2 mx-auto'>
-        <div className='px-4 py-6 text-warning-900'>
-          <p className='font-semibold mb-2'>Terima Kasih atas Pembelian Anda</p>
-          <p className='text-warning-800 mb-4 leading-6'>
-            Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak
-            menerima email, anda dapat menghubungi kami disini.
-          </p>
-          <p className='mb-2 font-medium'>{query?.order_id?.replaceAll('-', '/')}</p>
-          <p className='text-caption-2 text-warning-800'>No. Transaksi</p>
-        </div>
+    <div className='flex flex-col items-center'>
+      <Image
+        src='/images/CHECKOUT-PESANAN.svg'
+        alt='Checkout Pesanan'
+        width={isMobile ? 300 : 450}
+        height={isMobile ? 300 : 450}
+      />
+      <div className='text-title-sm md:text-title-lg text-center font-semibold'>
+        Terima Kasih atas Pembelian Kamu
+      </div>
+      <div className='flex flex-col justify-center items-center text-body-2 md:text-body-1 text-center mt-3 px-24 md:px-36 py-4 border-2 gap-y-2 rounded'>
+        <p className='font-bold'>No. Transaksi</p>
+        <p className='mb-2 font-medium text-red-500 text-xl'>
+          {query?.order_id?.replaceAll('-', '/')}
+        </p>
         <Link
-          href='/my/quotations'
-          className='bg-warning-400 text-warning-900 rounded-b-xl py-4 block'
+          href={`/my/quotations/${data?.id}`}
+          className='btn-solid-red rounded-md text-base'
         >
-          Lihat detail pembelian Anda disini
+          Cek Detail Transaksi
         </Link>
       </div>
+      <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 md:max-w-[700px]'>
+        Rincian pembelian sudah kami kirimkan ke email kamu. Mohon dicek
+        kembali. jika tidak menerima email, kamu dapat menghubungi kami{' '}
+        <a className='text-red-500' href={whatsappUrl()}>
+          di sini
+        </a>{' '}
+        atau{' '}
+        <span onClick={sendEmail} className='text-red-500 cursor-pointer'>
+          kirim rincian pesanan ulang
+        </span>
+        .
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default FinishCheckout
+export default FinishCheckout;
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 5be6d4e3..89c46de4 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -26,38 +26,40 @@ 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} />
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    )
+          ))}
+        </div>
+      )}
+    </div>
   );
 };
 
diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
new file mode 100644
index 00000000..c91de2be
--- /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`,
+        operation: 'AND',
+      });
+      setProducts(dataProducts.response);
+    };
+    loadProducts();
+  }, [flashSaleId]);
+  return <ProductSlider products={products} />;
+};
+export default FlashSaleNonDisplay;
diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js
index 2ff4fdfc..4101f87a 100644
--- a/src/lib/home/api/categoryManagementApi.js
+++ b/src/lib/home/api/categoryManagementApi.js
@@ -42,3 +42,11 @@ const map = async (promotions) => {
     return productMapped;
   });
 };
+
+export const fetchCategoryManagementVersion = async () => {
+  const response = await fetch(
+    '/solr/admin/cores?action=STATUS&core=category_management'
+  );
+  const data = await response.json();
+  return data.status.category_management.index.version;
+};
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index f83c36fc..60d38f8f 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -1,18 +1,42 @@
 import Link from '@/core/components/elements/Link/Link';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
 
 const { useQuery } = require('react-query');
 const { default: bannerSectionApi } = require('../api/bannerSectionApi');
 
 const BannerSection = () => {
-  const fetchBannerSection = async () => await bannerSectionApi();
-  const bannerSection = useQuery('bannerSection', fetchBannerSection);
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_bannerSection');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }else{
+      setShouldFetch(true);
+    }
+  }, []);
+
+  // const fetchBannerSection = async () => await bannerSectionApi();
+  const getBannerSection = useQuery('bannerSection', bannerApi({ type: 'home-banner' }), {
+    enabled: shouldFetch,
+    onSuccess: (data) => {
+      if (data) {
+        localStorage.setItem('Homepage_bannerSection', JSON.stringify(data));
+        setData(data);
+      }
+    },
+  });
+
+  const bannerSection = data;
 
   return (
-    bannerSection.data &&
-    bannerSection.data?.length > 0 && (
+    bannerSection &&
+    bannerSection?.length > 0 && (
       <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
-        {bannerSection.data?.map((banner) => (
+        {bannerSection?.map((banner) => (
           <Link key={banner.id} href={banner.url}>
             <Image
               width={1024}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 49a9a93f..e62575f7 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import {
+  fetchCategoryManagementSolr,
+  fetchCategoryManagementVersion,
+} from '../api/categoryManagementApi';
 import NextImage from 'next/image';
 import Link from 'next/link';
 import { createSlug } from '@/core/utils/slug';
@@ -10,48 +13,69 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
 
+const saveToLocalStorage = (key, data, version) => {
+  const now = new Date();
+  const item = {
+    value: data,
+    version: version,
+    lastFetchedTime: now.getTime(),
+  };
+  localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(key);
+  if (!itemStr) return null;
+
+  const item = JSON.parse(itemStr);
+  return item;
+};
+
+const getElapsedTime = (lastFetchedTime) => {
+  const now = new Date();
+  return now.getTime() - lastFetchedTime;
+};
+
 const CategoryDynamic = () => {
   const [categoryManagement, setCategoryManagement] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+
   const loadBrand = useCallback(async () => {
-    setIsLoading(true);
-    const items = await fetchCategoryManagementSolr();
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
+
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
 
-    setIsLoading(false);
-    setCategoryManagement(items);
+      if (elapsedTime < 24 * 60 * 60 * 1000) {
+        setCategoryManagement(cachedData.value);
+        return;
+      }
+    }
+
+    const latestVersion = await fetchCategoryManagementVersion();
+    if (cachedData && cachedData.version === latestVersion) {
+      // perbarui waktu
+      saveToLocalStorage(
+        'homepage_categoryDynamic',
+        cachedData.value,
+        latestVersion
+      );
+      setCategoryManagement(cachedData.value);
+    } else {
+      setIsLoading(true);
+      const items = await fetchCategoryManagementSolr();
+      setIsLoading(false);
+
+      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
+      setCategoryManagement(items);
+    }
   }, []);
 
   useEffect(() => {
     loadBrand();
   }, [loadBrand]);
 
-  // const [categoryData, setCategoryData] = useState({});
-  // const [subCategoryData, setSubCategoryData] = useState({});
-
-  // useEffect(() => {
-  //   const fetchCategoryData = async () => {
-  //     if (categoryManagement && categoryManagement.data) {
-  //       const updatedCategoryData = {};
-  //       const updatedSubCategoryData = {};
-
-  //       for (const category of categoryManagement.data) {
-  //         const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
-
-  //         updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
-
-  //         for (const subCategory of countLevel1?.children) {
-  //           updatedSubCategoryData[subCategory.id] = subCategory?.numFound;
-  //         }
-  //       }
-
-  //       setCategoryData(updatedCategoryData);
-  //       setSubCategoryData(updatedSubCategoryData);
-  //     }
-  //   };
-
-  //   fetchCategoryData();
-  // }, [categoryManagement.isLoading]);
-
   const swiperBanner = {
     modules: [Pagination],
     classNames: 'mySwiper',
@@ -67,7 +91,6 @@ const CategoryDynamic = () => {
     <div>
       {categoryManagement &&
         categoryManagement?.map((category) => {
-          // const countLevel1 = categoryData[category.categoryIdI] || 0;
           return (
             <Skeleton key={category.id} isLoaded={!isLoading}>
               <div key={category.id}>
@@ -75,9 +98,6 @@ const CategoryDynamic = () => {
                   <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
                     {category.name}
                   </h1>
-                  {/* <Skeleton isLoaded={countLevel1 != 0}>
-                    <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
-                  </Skeleton> */}
                   <Link
                     href={createSlug(
                       '/shop/category/',
@@ -93,8 +113,6 @@ const CategoryDynamic = () => {
                 {/* Swiper for SubCategories */}
                 <Swiper {...swiperBanner}>
                   {category.categories.map((subCategory) => {
-                    // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
-
                     return (
                       <SwiperSlide key={subCategory.id}>
                         <div className='border rounded justify-start items-start '>
@@ -115,11 +133,6 @@ const CategoryDynamic = () => {
                                 <h2 className='font-semibold text-lg mr-2'>
                                   {subCategory?.name}
                                 </h2>
-                                {/* <Skeleton isLoaded={countLevel2 != 0}>
-                                  <p className={`text-gray_r-10 text-sm`}>
-                                    {countLevel2} Produk tersedia
-                                  </p>
-                                </Skeleton> */}
                                 <Link
                                   href={createSlug(
                                     '/shop/category/',
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 4a8f13cf..55654b0e 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -4,52 +4,91 @@ import Link from 'next/link';
 import { createSlug } from '@/core/utils/slug';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
-import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import {
+  fetchCategoryManagementSolr,
+  fetchCategoryManagementVersion,
+} from '../api/categoryManagementApi';
+
+const saveToLocalStorage = (key, data, version) => {
+  const now = new Date();
+  const item = {
+    value: data,
+    version: version,
+    lastFetchedTime: now.getTime(),
+  };
+  localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(key);
+  if (!itemStr) return null;
+
+  const item = JSON.parse(itemStr);
+  return item;
+};
+
+const getElapsedTime = (lastFetchedTime) => {
+  const now = new Date();
+  return now.getTime() - lastFetchedTime;
+};
 
 const CategoryDynamicMobile = () => {
   const [selectedCategory, setSelectedCategory] = useState({});
   const [categoryManagement, setCategoryManagement] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
 
-  const loadBrand = useCallback(async () => {
-    setIsLoading(true);
-    const items = await fetchCategoryManagementSolr();
+  const loadCategoryManagement = useCallback(async () => {
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
+
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
+
+      if (elapsedTime < 24 * 60 * 60 * 1000) {
+        setCategoryManagement(cachedData.value);
+        return;
+      }
+    }
 
-    setIsLoading(false);
-    setCategoryManagement(items);
+    const latestVersion = await fetchCategoryManagementVersion();
+    if (cachedData && cachedData.version === latestVersion) {
+      // perbarui waktu
+      saveToLocalStorage(
+        'homepage_categoryDynamic',
+        cachedData.value,
+        latestVersion
+      );
+      setCategoryManagement(cachedData.value);
+    } else {
+      setIsLoading(true);
+      const items = await fetchCategoryManagementSolr();
+      setIsLoading(false);
+
+      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
+      setCategoryManagement(items);
+    }
   }, []);
 
   useEffect(() => {
-    loadBrand();
-  }, [loadBrand]);
+    loadCategoryManagement();
+  }, [loadCategoryManagement]);
 
   useEffect(() => {
-    const loadPromo = async () => {
-      try {
-        if (categoryManagement?.length > 0) {
-          const initialSelections = categoryManagement.reduce(
-            (acc, category) => {
-              if (category.categories.length > 0) {
-                acc[category.id] = category.categories[0].id_level_2;
-              }
-              return acc;
-            },
-            {}
-          );
-          setSelectedCategory(initialSelections);
+    if (categoryManagement?.length > 0) {
+      const initialSelections = categoryManagement.reduce((acc, category) => {
+        if (category.categories.length > 0) {
+          acc[category.id] = category.categories[0].id_level_2;
         }
-      } catch (loadError) {
-        // console.error("Error loading promo items:", loadError);
-      }
-    };
-
-    loadPromo();
+        return acc;
+      }, {});
+      setSelectedCategory(initialSelections);
+    }
   }, [categoryManagement]);
 
-  const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
+  const handleCategoryLevel2Click = (categoryId, idLevel2) => {
     setSelectedCategory((prev) => ({
       ...prev,
-      [categoryIdI]: idLevel2,
+      [categoryId]: idLevel2,
     }));
   };
 
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae06bd4d..7433e7f0 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,15 +4,38 @@ import { bannerApi } from '@/api/bannerApi';
 import useDevice from '@/core/hooks/useDevice';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+import { useEffect, useState } from 'react';
 const { useQuery } = require('react-query');
 const BannerSection = () => {
-  const promotionProgram = useQuery(
+  const { isMobile, isDesktop } = useDevice();
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_promotionProgram');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }else{
+      setShouldFetch(true);
+    }
+  },[])
+
+  const getPromotionProgram = useQuery(
     'promotionProgram',
-    bannerApi({ type: 'banner-promotion' })
+    bannerApi({ type: 'banner-promotion' }),{
+      enabled: shouldFetch,
+      onSuccess: (data) => {
+        if (data) {
+          localStorage.setItem('Homepage_promotionProgram', JSON.stringify(data));
+          setData(data);
+        }
+      }
+    }
   );
-  const { isMobile, isDesktop } = useDevice();
 
-  if (promotionProgram.isLoading) {
+  const promotionProgram = data
+
+  if (getPromotionProgram?.isLoading && !data) {
     return <BannerPromoSkeleton />;
   }
 
@@ -40,10 +63,10 @@ const BannerSection = () => {
         )}
       </div>
       {isDesktop &&
-        promotionProgram.data &&
-        promotionProgram.data?.length > 0 && (
+        promotionProgram &&
+        promotionProgram?.length > 0 && (
           <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
-            {promotionProgram.data?.map((banner) => (
+            {promotionProgram?.map((banner) => (
               <Link key={banner.id} href={banner.url}>
                 <Image
                   width={439}
@@ -60,7 +83,7 @@ const BannerSection = () => {
 
       {isMobile && (
         <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
-          {promotionProgram.data?.map((banner) => (
+          {promotionProgram?.map((banner) => (
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 55effdfb..86b58e23 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -17,6 +17,7 @@ import { updateItemCart } from '@/core/utils/cart';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
+import { getAuth } from '~/libs/auth';
 
 import { RWebShare } from 'react-web-share';
 import productSimilarApi from '../../api/productSimilarApi';
@@ -33,11 +34,9 @@ const ProductDesktopVariant = ({
   isVariant,
 }) => {
   const router = useRouter();
-  const auth = useAuth();
+  let auth = useAuth();
   const { slug } = router.query;
-
-  console.log('ini product variant', product);
-
+  const { srsltid } = router.query;
   const [lowestPrice, setLowestPrice] = useState(null);
 
   const [addCartAlert, setAddCartAlert] = useState(false);
@@ -88,7 +87,7 @@ const ProductDesktopVariant = ({
 
   const handleAddToCart = (variant) => {
     if (!auth) {
-      router.push(`/login?next=/shop/product/${slug}`);
+      router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`);
       return;
     }
     const quantity = quantityInput;
@@ -105,8 +104,34 @@ const ProductDesktopVariant = ({
     setAddCartAlert(true);
   };
 
-  const handleBuy = (variant) => {
-    const quantity = quantityInput;
+  const handleBuy = async (variant) => {
+    const quantity = variantQuantityRefs?.current[product.id]?.value;
+    let isLoggedIn = typeof auth === 'object';
+
+    if (!isLoggedIn) {
+      const currentUrl = encodeURIComponent(router.asPath);
+      await router.push(`/login?next=${currentUrl}`);
+
+      // Tunggu login berhasil, misalnya dengan memantau perubahan status auth.
+      const authCheckInterval = setInterval(() => {
+        const newAuth = getAuth();
+        if (typeof newAuth === 'object') {
+          isLoggedIn = true;
+          auth = newAuth; // Update nilai auth setelah login
+          clearInterval(authCheckInterval);
+        }
+      }, 500); // Periksa status login setiap 500ms
+
+      await new Promise((resolve) => {
+        const checkLogin = setInterval(() => {
+          if (isLoggedIn) {
+            clearInterval(checkLogin);
+            resolve(null);
+          }
+        }, 500);
+      });
+    }
+
     if (!validQuantity(quantity)) return;
 
     updateItemCart({
@@ -255,7 +280,7 @@ const ProductDesktopVariant = ({
               </div>
             </div>
 
-            <div className='p-4 md:p-6 '>
+            <div className='p-4 md:p-6 w-full'>
               <ProductPromoSection product={product} productId={product.id} />
 
               <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index af9e52bb..c1d7ffe0 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -16,12 +16,15 @@ import currencyFormat from '@/core/utils/currencyFormat';
 import { gtagAddToCart } from '@/core/utils/googleTag';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
+import { getAuth } from '~/libs/auth';
 
 import ProductSimilar from '../ProductSimilar';
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter();
-
+  const { slug } = router.query;
+  const { srsltid } = router.query;
+  let auth = getAuth();
   const [quantity, setQuantity] = useState('1');
   const [selectedVariant, setSelectedVariant] = useState(product.id);
   const [informationTab, setInformationTab] = useState(
@@ -73,11 +76,16 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     return isValid;
   };
 
-  const handleClickCart = () => {
+  const handleClickCart = async () => {
+    if (!auth) {
+      router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`);
+      return;
+    }
+
     if (!validAction()) return;
     gtagAddToCart(activeVariant, quantity);
     updateItemCart({
-      productId: variant,
+      productId: product.id,
       quantity,
       programLineId: null,
       selected: true,
@@ -86,7 +94,33 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     setAddCartAlert(true);
   };
 
-  const handleClickBuy = () => {
+  const handleClickBuy = async () => {
+    let isLoggedIn = typeof auth === 'object';
+
+    if (!isLoggedIn) {
+      const currentUrl = encodeURIComponent(router.asPath);
+      await router.push(`/login?next=${currentUrl}`);
+
+      // Tunggu login berhasil, misalnya dengan memantau perubahan status auth.
+      const authCheckInterval = setInterval(() => {
+        const newAuth = getAuth();
+        if (typeof newAuth === 'object') {
+          isLoggedIn = true;
+          auth = newAuth; // Update nilai auth setelah login
+          clearInterval(authCheckInterval);
+        }
+      }, 500); // Periksa status login setiap 500ms
+
+      await new Promise((resolve) => {
+        const checkLogin = setInterval(() => {
+          if (isLoggedIn) {
+            clearInterval(checkLogin);
+            resolve(null);
+          }
+        }, 500);
+      });
+    }
+
     if (!validAction()) return;
 
     updateItemCart({
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index d52fcb90..947550b7 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -1,88 +1,96 @@
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import _ from 'lodash'
-import { toQuery } from 'lodash-contrib'
-import { Checkbox } from '@chakra-ui/react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import _ from 'lodash';
+import { toQuery } from 'lodash-contrib';
+import { Checkbox } from '@chakra-ui/react';
 
 const orderOptions = [
   { value: 'price-asc', label: 'Harga Terendah' },
   { value: 'price-desc', label: 'Harga Tertinggi' },
   { value: 'popular', label: 'Populer' },
-  { value: 'stock', label: 'Ready Stock' }
-]
+  { value: 'stock', label: 'Ready Stock' },
+];
 
-const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBrand = null }) => {
-  const router = useRouter()
-  const { query } = router
-  const [order, setOrder] = useState(query?.orderBy || 'popular')
-  const [brand, setBrand] = useState(query?.brand)
-  const [category, setCategory] = useState(query?.category)
-  const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
-  const [priceTo, setPriceTo] = useState(query?.priceTo)
+const ProductFilter = ({
+  active,
+  close,
+  brands,
+  categories,
+  prefixUrl,
+  defaultBrand = null,
+}) => {
+  const router = useRouter();
+  const { query } = router;
+  const [order, setOrder] = useState(query?.orderBy || 'popular');
+  const [brand, setBrand] = useState(query?.brand);
+  const [category, setCategory] = useState(query?.category);
+  const [priceFrom, setPriceFrom] = useState(query?.priceFrom);
+  const [priceTo, setPriceTo] = useState(query?.priceTo);
 
-  const [stock, setStock] = useState(query?.stock)
+  const [stock, setStock] = useState(query?.stock);
 
-  const [activeRange, setActiveRange] = useState(null)
+  const [activeRange, setActiveRange] = useState(null);
 
   const priceRange = [
     {
       priceFrom: 100000,
-      priceTo: 200000
+      priceTo: 200000,
     },
     {
       priceFrom: 200000,
-      priceTo: 300000
+      priceTo: 300000,
     },
     {
       priceFrom: 300000,
-      priceTo: 400000
+      priceTo: 400000,
     },
     {
       priceFrom: 400000,
-      priceTo: 500000
-    }
-  ]
+      priceTo: 500000,
+    },
+  ];
 
   const handlePriceFromChange = async (priceFromr, priceTor, index) => {
-    await setPriceFrom(priceFromr)
-    await setPriceTo(priceTor)
-    setActiveRange(index)
-  }
+    await setPriceFrom(priceFromr);
+    await setPriceTo(priceTor);
+    setActiveRange(index);
+  };
 
   const handleReadyStockChange = (event) => {
-    const value = event.target.value
-    const isChecked = event.target.checked
+    const value = event.target.value;
+    const isChecked = event.target.checked;
     if (isChecked) {
-      setStock(value)
+      setStock(value);
     } else {
-      setStock(null)
+      setStock(null);
     }
-  }
+  };
 
   const handleSubmit = () => {
     let params = {
+      penawaran: router.query.penawaran,
       q: router.query.q,
       orderBy: order,
       brand,
       category,
       priceFrom,
       priceTo,
-      stock: stock
-    }
-    params = _.pickBy(params, _.identity)
-    params = toQuery(params)
-    router.push(`${prefixUrl}?${params}`)
-  }
+      stock: stock,
+    };
+    params = _.pickBy(params, _.identity);
+    params = toQuery(params);
+    router.push(`${prefixUrl}?${params}`);
+  };
 
   const formatCurrency = (value) => {
     if (value >= 1000) {
-      const thousands = Math.floor(value / 1000) // Menghitung ribuan
-      return `Rp${thousands}k`
+      const thousands = Math.floor(value / 1000); // Menghitung ribuan
+      return `Rp${thousands}k`;
     } else {
-      return `Rp${value}`
+      return `Rp${value}`;
     }
-  }
+  };
 
   return (
     <BottomPopup active={active} close={close} title='Filter Produk'>
@@ -101,7 +109,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
                   <option value=''>Pilih Brand...</option>
                   {brands.map((brand, index) => (
                     <option value={brand.brand} key={index}>
-                      {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span>
+                      {brand.brand}{' '}
+                      <span className='text-sm text-gray-200'>
+                        ({brand.qty})
+                      </span>
                     </option>
                   ))}
                 </>
@@ -125,7 +136,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
                 <option value=''>Pilih Kategori...</option>
                 {categories.map((category, index) => (
                   <option value={category.name} key={index}>
-                    {category.name} <span className='text-sm text-gray-200'>({category.qty})</span>
+                    {category.name}{' '}
+                    <span className='text-sm text-gray-200'>
+                      ({category.qty})
+                    </span>
                   </option>
                 ))}
               </>
@@ -141,7 +155,9 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
               <button
                 key={orderOption.value}
                 className={`btn-light px-3 font-normal flex-shrink-0 ${
-                  order == orderOption.value ? 'bg-warning-500' : 'bg-transparent'
+                  order == orderOption.value
+                    ? 'bg-warning-500'
+                    : 'bg-transparent'
                 }`}
                 onClick={() => setOrder(orderOption.value)}
               >
@@ -173,13 +189,16 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             {priceRange.map((price, i) => (
               <button
                 key={i}
-                onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)}
+                onClick={() =>
+                  handlePriceFromChange(price.priceFrom, price.priceTo, i)
+                }
                 className={`w-full border ${
                   i === activeRange ? 'border-red-600' : 'border-gray-400'
                 }
                     py-2 p-3 rounded-full text-sm whitespace-nowrap`}
               >
-                {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)}
+                {formatCurrency(price.priceFrom)} -{' '}
+                {formatCurrency(price.priceTo)}
               </button>
             ))}
           </div>
@@ -197,12 +216,16 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             </Checkbox>
           </div>
         </div> */}
-        <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
+        <button
+          type='button'
+          className='btn-solid-red w-full mt-2'
+          onClick={handleSubmit}
+        >
           Terapkan Filter
         </button>
       </div>
     </BottomPopup>
-  )
-}
+  );
+};
 
-export default ProductFilter
+export default ProductFilter;
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index 73fecab5..d2ecb4d9 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import _ from 'lodash'
-import { toQuery } from 'lodash-contrib'
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { toQuery } from 'lodash-contrib';
 import {
   Accordion,
   AccordionButton,
@@ -15,110 +15,119 @@ import {
   InputGroup,
   InputLeftAddon,
   Stack,
-  VStack
-} from '@chakra-ui/react'
-import Image from '@/core/components/elements/Image/Image'
-import { formatCurrency } from '@/core/utils/formatValue'
+  VStack,
+} from '@chakra-ui/react';
+import Image from '@/core/components/elements/Image/Image';
+import { formatCurrency } from '@/core/utils/formatValue';
 
-const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => {
-  
-  
-  const router = useRouter()
-  const { query } = router
-  const [order, setOrder] = useState(query?.orderBy)
-  const [brandValues, setBrand] = useState(query?.brand?.split(',') || [])
-  const [categoryValues, setCategory] = useState(query?.category?.split(',') || [])
-  const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
-  const [priceTo, setPriceTo] = useState(query?.priceTo)
-  const [stock, setStock] = useState(query?.stock)
-  const [activeRange, setActiveRange] = useState(null)
-  const [activeIndeces, setActiveIndeces] = useState([])
+const ProductFilterDesktop = ({
+  brands,
+  categories,
+  prefixUrl,
+  defaultBrand = null,
+}) => {
+  const router = useRouter();
+  const { query } = router;
+  const [order, setOrder] = useState(query?.orderBy);
+  const [brandValues, setBrand] = useState(query?.brand?.split(',') || []);
+  const [categoryValues, setCategory] = useState(
+    query?.category?.split(',') || []
+  );
+  const [priceFrom, setPriceFrom] = useState(query?.priceFrom);
+  const [priceTo, setPriceTo] = useState(query?.priceTo);
+  const [stock, setStock] = useState(query?.stock);
+  const [activeRange, setActiveRange] = useState(null);
+  const [activeIndeces, setActiveIndeces] = useState([]);
 
   const priceRange = [
     {
       priceFrom: 100000,
-      priceTo: 200000
+      priceTo: 200000,
     },
     {
       priceFrom: 200000,
-      priceTo: 300000
+      priceTo: 300000,
     },
     {
       priceFrom: 300000,
-      priceTo: 400000
+      priceTo: 400000,
     },
     {
       priceFrom: 400000,
-      priceTo: 500000
-    }
-  ]
+      priceTo: 500000,
+    },
+  ];
 
   const indexRange = priceRange.findIndex((range) => {
-    return range.priceFrom === parseInt(priceFrom) && range.priceTo == parseInt(priceTo)
-  })
+    return (
+      range.priceFrom === parseInt(priceFrom) &&
+      range.priceTo == parseInt(priceTo)
+    );
+  });
 
   const handleCategoriesChange = (event) => {
-    const value = event.target.value
-    const isChecked = event.target.checked
+    const value = event.target.value;
+    const isChecked = event.target.checked;
     if (isChecked) {
-      setCategory([...categoryValues, value])
+      setCategory([...categoryValues, value]);
     } else {
-      setCategory(categoryValues.filter((val) => val !== value))
+      setCategory(categoryValues.filter((val) => val !== value));
     }
-  }
+  };
   const handleBrandsChange = (event) => {
-    const value = event.target.value
-    const isChecked = event.target.checked
+    const value = event.target.value;
+    const isChecked = event.target.checked;
     if (isChecked) {
-      setBrand([...brandValues, value])
+      setBrand([...brandValues, value]);
     } else {
-      setBrand(brandValues.filter((val) => val !== value))
+      setBrand(brandValues.filter((val) => val !== value));
     }
-  }
+  };
 
   const handleReadyStockChange = (event) => {
-    const value = event.target.value
-    const isChecked = event.target.checked
+    const value = event.target.value;
+    const isChecked = event.target.checked;
     if (isChecked) {
-      setStock(value)
+      setStock(value);
     } else {
-      setStock(null)
+      setStock(null);
     }
-  }
+  };
 
   const handlePriceFromChange = async (priceFromr, priceTor, index) => {
-    await setPriceFrom(priceFromr)
-    await setPriceTo(priceTor)
-    setActiveRange(index)
-  }
+    await setPriceFrom(priceFromr);
+    await setPriceTo(priceTor);
+    setActiveRange(index);
+  };
 
   const handleSubmit = () => {
     let params = {
+      penawaran: router.query.penawaran,
       q: router.query.q,
       orderBy: order,
       brand: brandValues.join(','),
       category: categoryValues.join(','),
       priceFrom,
       priceTo,
-      stock: stock
-    }
-    params = _.pickBy(params, _.identity)
-    params = toQuery(params)
+      stock: stock,
+    };
+    params = _.pickBy(params, _.identity);
+    params = toQuery(params);
 
-    const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug;
+    const slug = Array.isArray(router.query.slug)
+      ? router.query.slug[0]
+      : router.query.slug;
 
     if (slug) {
-      if(prefixUrl.includes('category') || prefixUrl.includes('lob')){
-        router.push(`${prefixUrl}?${params}`)
-      }else{
-        router.push(`${prefixUrl}/${slug}?${params}`)
+      if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
+        router.push(`${prefixUrl}?${params}`);
+      } else {
+        router.push(`${prefixUrl}/${slug}?${params}`);
       }
     } else {
-      router.push(`${prefixUrl}?${params}`)
+      router.push(`${prefixUrl}?${params}`);
     }
-  }
-
- 
+  };
 
   /*const handleIndexAccordion = async () => {
     if (brandValues) {
@@ -136,9 +145,8 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
   }*/
 
   useEffect(() => {
-    setActiveRange(indexRange)
-  }, [])
-
+    setActiveRange(indexRange);
+  }, []);
 
   return (
     <>
@@ -165,13 +173,17 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
                       >
                         <div className='flex items-center gap-2'>
                           <span>{brand.brand} </span>
-                          <span className='text-sm text-gray-600'>({brand.qty})</span>
+                          <span className='text-sm text-gray-600'>
+                            ({brand.qty})
+                          </span>
                         </div>
                       </Checkbox>
                     </div>
                   ))
                 ) : (
-                  <div className='flex items-center gap-2'>Brands tidak tersedia</div>
+                  <div className='flex items-center gap-2'>
+                    Brands tidak tersedia
+                  </div>
                 )}
               </Stack>
             </AccordionPanel>
@@ -199,13 +211,17 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
                     >
                       <div className='flex items-center gap-2'>
                         <span>{category.name} </span>
-                        <span className='text-sm text-gray-600'>({category.qty})</span>
+                        <span className='text-sm text-gray-600'>
+                          ({category.qty})
+                        </span>
                       </div>
                     </Checkbox>
                   </div>
                 ))
               ) : (
-                <div className='flex items-center gap-2'>Kategori tidak tersedia</div>
+                <div className='flex items-center gap-2'>
+                  Kategori tidak tersedia
+                </div>
               )}
             </Stack>
           </AccordionPanel>
@@ -243,13 +259,16 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
                 {priceRange.map((price, i) => (
                   <button
                     key={i}
-                    onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)}
+                    onClick={() =>
+                      handlePriceFromChange(price.priceFrom, price.priceTo, i)
+                    }
                     className={`w-full border ${
                       i === activeRange ? 'border-red-600' : 'border-gray-400'
                     }
                     py-2 p-3 rounded-full text-sm whitespace-nowrap`}
                   >
-                    {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)}
+                    {formatCurrency(price.priceFrom)} -{' '}
+                    {formatCurrency(price.priceTo)}
                   </button>
                 ))}
               </div>
@@ -282,7 +301,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
         Terapkan
       </Button>
     </>
-  )
-}
+  );
+};
 
-export default ProductFilterDesktop
+export default ProductFilterDesktop;
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 26114acf..f7b044aa 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -79,6 +79,24 @@ const ProductSearch = ({
     }
   }, [categoryId]);
 
+  useEffect(() => {
+    const checkIfPenawaran = async () => {
+      if (router.asPath.includes('penawaran')) {
+        query = {
+          ...query,
+          fq: [
+            `-flashsale_id_i:${router.query.penawaran}`,
+            `flashsale_price_f:[1 TO *]`,
+          ],
+          orderBy: 'flashsale-discount-desc',
+        };
+        setFinalQuery(query);
+        setOrderBy('flashsale-discount-desc');
+      }
+    };
+    checkIfPenawaran();
+  }, [router.query]);
+
   const collectIds = (category) => {
     const ids = [];
     function recurse(cat) {
@@ -337,6 +355,7 @@ const ProductSearch = ({
 
   const handleDeleteFilter = async (source, value) => {
     let params = {
+      penawaran: router.query.penawaran,
       q: router.query.q,
       orderBy: orderBy,
       brand: brandValues.join(','),
@@ -364,6 +383,7 @@ const ProductSearch = ({
         break;
       case 'delete':
         params = {
+          penawaran: router.query.penawaran,
           q: router.query.q,
           orderBy: orderBy,
         };
diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx
index a6e697f0..6ca0fa7b 100644
--- a/src/lib/review/components/CustomerReviews.jsx
+++ b/src/lib/review/components/CustomerReviews.jsx
@@ -3,16 +3,37 @@ import MobileView from '@/core/components/views/MobileView';
 import Image from 'next/image';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay } from 'swiper';
+import { useEffect, useState } from 'react';
 
 const { useQuery } = require('react-query');
 const { getCustomerReviews } = require('../api/customerReviewsApi');
 
 const CustomerReviews = () => {
-  const { data: customerReviews } = useQuery(
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_customerReviews');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }
+  },[])
+
+
+  const { data: fetchCustomerReviews } = useQuery(
     'customerReviews',
-    getCustomerReviews
+    getCustomerReviews,{
+      enabled: !data,
+      onSuccess: (data) => {
+        if (data) {
+          localStorage.setItem('Homepage_customerReviews', JSON.stringify(data));
+          setData(data);
+        }
+      }
+    }
   );
 
+  const customerReviews = data
+
   return (
     <div className='px-4 sm:px-0'>
       <h1 className='font-semibold text-[14px] sm:text-h-lg mb-4'>
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 6269d3ed..49a5fe69 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -23,6 +23,9 @@ export default async function handler(req, res) {
 
   let paramOrderBy = '';
   switch (orderBy) {
+    case 'flashsale-discount-desc':
+      paramOrderBy += 'flashsale_discount_f DESC';
+      break;
     case 'price-asc':
       paramOrderBy += 'price_tier1_v2_f ASC';
       break;
@@ -68,15 +71,23 @@ export default async function handler(req, res) {
   let checkQ = q.trim().split(/[\s\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/]+/);
   let newQ = escapeSolrQuery(q);
 
-  const formattedQuery = `(${newQ.split(' ').map(term => `${term}*`).join(' ') })`;
-  const mm = checkQ.length > 2 ?  checkQ.length > 5 ? '55%' : '85%' : `${checkQ.length}`;
+  const formattedQuery = `(${newQ
+    .split(' ')
+    .map((term) => `${term}*`)
+    .join(' ')})`;
+  const mm =
+    checkQ.length > 2
+      ? checkQ.length > 5
+        ? '55%'
+        : '85%'
+      : `${checkQ.length}`;
 
   const filterQueries = [
     '-publish_b:false',
     'product_rating_f:[8 TO *]',
-    'price_tier1_v2_f:[1 TO *]'
+    'price_tier1_v2_f:[1 TO *]',
   ];
-  
+
   const fq_ = filterQueries.join('AND ');
 
   let offset = (page - 1) * limit;
@@ -87,7 +98,13 @@ export default async function handler(req, res) {
     'indent=true',
     `facet.query=${escapeSolrQuery(q)}`,
     `q.op=OR`,
-    `q=${source == 'similar' || checkQ.length < 3  ?  checkQ.length < 2 ?  newQ : newQ + '*' : formattedQuery }`,
+    `q=${
+      source == 'similar' || checkQ.length < 3
+        ? checkQ.length < 2
+          ? newQ
+          : newQ + '*'
+        : formattedQuery
+    }`,
     `defType=edismax`,
     'qf=name_s description_clean_t category_name manufacture_name_s variants_code_t variants_name_t category_id_ids default_code_s',
     `start=${parseInt(offset)}`,
@@ -135,12 +152,14 @@ export default async function handler(req, res) {
   if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`);
   // Multi fq in url params
   if (Array.isArray(fq))
-    parameter = parameter.concat(fq.map((val) => `fq=${encodeURIComponent(val)}`));
-  
+    parameter = parameter.concat(
+      fq.map((val) => `fq=${encodeURIComponent(val)}`)
+    );
+
   let result = await axios(
     process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&')
   );
-  
+
   try {
     result.data.response.products = productMappingSolr(
       result.data.response.docs,
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ac925b4e..cc4d68db 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -60,11 +60,11 @@ const CategoryHomeId = dynamic(() =>
 );
 
 const CategoryDynamic = dynamic(() =>
-  import('@/lib/home/components/CategoryDynamic'), {ssr : false}
+  import('@/lib/home/components/CategoryDynamic')
 );
 
 const CategoryDynamicMobile = dynamic(() =>
-import('@/lib/home/components/CategoryDynamicMobile'), {ssr: false}
+import('@/lib/home/components/CategoryDynamicMobile')
 );
 
 const CustomerReviews = dynamic(() =>
diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx
index c552659b..19d7af41 100644
--- a/src/pages/my/address/[id]/edit.jsx
+++ b/src/pages/my/address/[id]/edit.jsx
@@ -37,12 +37,15 @@ export async function getServerSideProps(context) {
     mobile: address.mobile,
     street: address.street,
     zip: address.zip,
-    city: address.city?.id || '',
+    state: address.stateId?.id || '',
+    oldCity: address.city?.id || '',
+    city: '',
     oldDistrict: address.district?.id || '',
     district: '',
     oldSubDistrict: address.subDistrict?.id || '',
     subDistrict: '',
     business_name: '',
   };
+  // console.log('ini default',defaultValues);
   return { props: { id, defaultValues } };
 }
diff --git a/src/pages/shop/checkout/[status].jsx b/src/pages/shop/checkout/[status].jsx
index 2c3bebcf..0d5cffe8 100644
--- a/src/pages/shop/checkout/[status].jsx
+++ b/src/pages/shop/checkout/[status].jsx
@@ -1,22 +1,22 @@
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import IsAuth from '@/lib/auth/components/IsAuth'
-import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout'
-import { useRouter } from 'next/router'
-import axios from 'axios'
-import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import IsAuth from '@/lib/auth/components/IsAuth';
+import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout';
+import { useRouter } from 'next/router';
+import axios from 'axios';
+import Seo from '@/core/components/Seo';
 
 export async function getServerSideProps(context) {
-  const { order_id } = context.query
+  const { order_id } = context.query;
   await axios.post(
     `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${order_id}`,
     {},
     { headers: context.req.headers }
-  )
-  return { props: {} }
+  );
+  return { props: {} };
 }
 
 export default function Finish() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <>
@@ -28,5 +28,5 @@ export default function Finish() {
         </BasicLayout>
       </IsAuth>
     </>
-  )
+  );
 }