Merge branch 'new-release' into Feature/pengajuan-tempo

11 files changed, 152 insertions, 126 deletions

diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..dff61b24 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -11,6 +11,7 @@ const BrandCard = ({ brand }) => {
       className={`py-1 px-2  border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
         isMobile ? 'h-16' : 'h-24'
       }`}
+      aria-label={brand.name}
     >
       {brand.logo && (
         <NextImage
@@ -20,6 +21,7 @@ const BrandCard = ({ brand }) => {
           height={500}
           quality={85}
           className='h-full w-[122px] object-contain object-center'
+          loading='eager'
         />
       )}
       {!brand.logo && (
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 6d90cad7..f4be279e 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -47,6 +47,7 @@ const FlashSale = () => {
                   width={1080}
                   height={192}
                   className='w-full rounded mb-4 hidden sm:block'
+                  loading='eager'
                 />
                 <Image
                   src={flashSale.bannerMobile}
@@ -54,6 +55,7 @@ const FlashSale = () => {
                   width={256}
                   height={48}
                   className='w-full rounded mb-4 block sm:hidden'
+                  loading='eager'
                 />
                 <FlashSaleProduct
                   flashSaleId={flashSale.pricelistId}
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 303b5c4b..898f1bf5 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -51,6 +51,7 @@ const BannerSection = () => {
               src={banner.image}
               alt={banner.name}
               className='h-auto w-full rounded'
+              loading='eager'
             />
           </Link>
         ))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index cc4f42b7..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -9,6 +9,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 const CategoryDynamic = () => {
   const [categoryManagement, setCategoryManagement] = useState([]);
@@ -22,12 +23,17 @@ const CategoryDynamic = () => {
       if (data) {
         setCategoryManagement(data);
       }
-      setIsLoading(false);
     };
 
     fetchCategoryData();
   }, []);
 
+  useEffect(() => {
+    if (categoryManagement?.length > 0) {
+      setIsLoading(false);
+    }
+  }, [categoryManagement]);
+
   const swiperBanner = {
     modules: [Pagination],
     classNames: 'mySwiper',
@@ -44,95 +50,105 @@ const CategoryDynamic = () => {
       {categoryManagement &&
         categoryManagement.map((category) => (
           <Skeleton key={category.id} isLoaded={!isLoading}>
-            <div key={category.id}>
-              <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
-                <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
-                  {category.name}
-                </h1>
-                <Link
-                  href={createSlug(
-                    '/shop/category/',
-                    category?.name,
-                    category?.category_id
-                  )}
-                  className='!text-red-500 font-semibold'
-                >
-                  Lihat Semua
-                </Link>
-              </div>
+            <LazyLoadComponent key={category.id}>
+              <div key={category.id}>
+                <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+                  <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+                    {category.name}
+                  </h1>
+                  <Link
+                    href={createSlug(
+                      '/shop/category/',
+                      category?.name,
+                      category?.category_id
+                    )}
+                    className='!text-red-500 font-semibold'
+                  >
+                    Lihat Semua
+                  </Link>
+                </div>
 
-              <Swiper {...swiperBanner}>
-                {category?.categories?.map((subCategory) => (
-                  <SwiperSlide key={subCategory.id}>
-                    <div className='border rounded justify-start items-start '>
-                      <div className='p-3'>
-                        <div className='flex flex-row border rounded mb-2 justify-start items-center'>
-                          <NextImage
-                            src={
-                              subCategory.image
-                                ? subCategory.image
-                                : '/images/noimage.jpeg'
-                            }
-                            alt={subCategory.name}
-                            width={90}
-                            height={30}
-                            className='object-fit p-4'
-                          />
-                          <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
-                            <h2 className='font-semibold text-lg mr-2'>
-                              {subCategory?.name}
-                            </h2>
-                            <Link
-                              href={createSlug(
-                                '/shop/category/',
-                                subCategory?.name,
-                                subCategory?.id_level_2
-                              )}
-                              className='!text-red-500 font-semibold'
-                            >
-                              Lihat Semua
-                            </Link>
-                          </div>
-                        </div>
-                        <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
-                          {subCategory.child_frontend_id_i.map(
-                            (childCategory) => (
-                              <div key={childCategory.id} className=''>
+                <Swiper {...swiperBanner}>
+                  {category?.categories?.map((subCategory) => (
+                    <LazyLoadComponent key={subCategory.id}>
+                      <SwiperSlide key={subCategory.id}>
+                        <div className='border rounded justify-start items-start '>
+                          <div className='p-3'>
+                            <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+                              <NextImage
+                                src={
+                                  subCategory.image
+                                    ? subCategory.image
+                                    : '/images/noimage.jpeg'
+                                }
+                                alt={subCategory.name}
+                                width={90}
+                                height={30}
+                                className='object-fit p-4'
+                                loading='eager'
+                              />
+                              <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                                <h2 className='font-semibold text-lg mr-2'>
+                                  {subCategory?.name}
+                                </h2>
                                 <Link
                                   href={createSlug(
                                     '/shop/category/',
-                                    childCategory?.name,
-                                    childCategory?.id_level_3
+                                    subCategory?.name,
+                                    subCategory?.id_level_2
                                   )}
-                                  className='flex flex-row gap-2 border rounded group hover:border-red-500'
+                                  className='!text-red-500 font-semibold'
                                 >
-                                  <NextImage
-                                    src={
-                                      childCategory.image
-                                        ? childCategory.image
-                                        : '/images/noimage.jpeg'
-                                    }
-                                    alt={childCategory.name}
-                                    className='p-2 ml-1'
-                                    width={40}
-                                    height={40}
-                                  />
-                                  <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
-                                    <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
-                                      {childCategory.name}
-                                    </h3>
-                                  </div>
+                                  Lihat Semua
                                 </Link>
                               </div>
-                            )
-                          )}
+                            </div>
+                            <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
+                              {subCategory.child_frontend_id_i.map(
+                                (childCategory) => (
+                                  <LazyLoadComponent key={childCategory.id}>
+                                    <div key={childCategory.id} className=''>
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/category/',
+                                          childCategory?.name,
+                                          childCategory?.id_level_3
+                                        )}
+                                        className='flex flex-row gap-2 border rounded group hover:border-red-500'
+                                      >
+                                        <NextImage
+                                          src={
+                                            childCategory.image
+                                              ? childCategory.image
+                                              : '/images/noimage.jpeg'
+                                          }
+                                          alt={childCategory.name}
+                                          className='p-2 ml-1'
+                                          width={40}
+                                          height={40}
+                                          placeholder='blur'
+                                          blurDataURL='/icon.jpg'
+                                          loading='eager'
+                                        />
+                                        <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+                                          <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+                                            {childCategory.name}
+                                          </h3>
+                                        </div>
+                                      </Link>
+                                    </div>
+                                  </LazyLoadComponent>
+                                )
+                              )}
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </SwiperSlide>
-                ))}
-              </Swiper>
-            </div>
+                      </SwiperSlide>
+                    </LazyLoadComponent>
+                  ))}
+                </Swiper>
+              </div>
+            </LazyLoadComponent>
           </Skeleton>
         ))}
     </div>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 67ae6f5f..5d9e872c 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => {
                           width={30}
                           height={30}
                           className=''
+                          loading='eager'
                         />
                         <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
                           <h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
                             width={40}
                             height={40}
                             className='p-2'
+                            loading='eager'
                           />
                           <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
                             <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 562fa138..d8bf3edb 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,56 +4,35 @@ 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 { isMobile, isDesktop } = useDevice();
   const [data, setData] = useState(null);
   const [shouldFetch, setShouldFetch] = useState(false);
+  const [ isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     const fetchData = async () => {
-      const res = await fetch(`/api/hero-banner?type=banner-promotion`);
-      const { data } = await res.json();
-      if (data) {
-        setData(data);
+      try {
+        const res = await fetch(`/api/hero-banner?type=banner-promotion`);
+        const { data } = await res.json();
+        if (data) {
+          setData(data);
+        }
+      } catch (e) {
+        console.log(e);
+      } finally {
+        setIsLoading(false);
       }
     };
 
     fetchData();
   }, []);
 
-  // useEffect(() => {
-  //   const localData = localStorage.getItem('Homepage_promotionProgram');
-  //   if (localData) {
-  //     setData(JSON.parse(localData));
-  //   } else {
-  //     setShouldFetch(true);
-  //   }
-  // }, []);
-
-  // const getPromotionProgram = useQuery(
-  //   'promotionProgram',
-  //   bannerApi({ type: 'banner-promotion' }),
-  //   {
-  //     enabled: shouldFetch,
-  //     onSuccess: (data) => {
-  //       if (data) {
-  //         localStorage.setItem(
-  //           'Homepage_promotionProgram',
-  //           JSON.stringify(data)
-  //         );
-  //         setData(data);
-  //       }
-  //     },
-  //   }
-  // );
-
   const promotionProgram = data;
 
-  // if (getPromotionProgram?.isLoading && !data) {
-  //   return <BannerPromoSkeleton />;
-  // }
-  if (!data) {
+  if (isLoading) {
     return <BannerPromoSkeleton />;
   }
 
@@ -90,7 +69,8 @@ const BannerSection = () => {
                 quality={85}
                 src={banner.image}
                 alt={banner.name}
-                className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+                className='rounded hover:scale-105 transition duration-500 ease-in-out'
+                loading='eager'
               />
             </Link>
           ))}
@@ -103,12 +83,13 @@ const BannerSection = () => {
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image
-                  width={439}
-                  height={150}
-                  quality={85}
+                  width={350}
+                  height={100}
+                  quality={70}
                   src={banner.image}
                   alt={banner.name}
-                  className='h-auto  w-full rounded '
+                  className='rounded '
+                  loading='eager'
                 />
               </Link>
             </SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..6d03a587 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -18,6 +18,7 @@ const ServiceList = () => {
                 src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
                 src='/images/icon_service/WARRANTY.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -68,6 +70,7 @@ const ServiceList = () => {
                 src='/images/icon_service/DUE-PAYMENT.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
                 src='/images/icon_service/TAX.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 444ddd8e..19e76a2b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -255,6 +255,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         >
                           <ImageNext
                             src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                            alt='Flash Sale'
                             width={17}
                             height={10}
                           />
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 113a1e42..4cfd3755 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -219,6 +219,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
                   >
                     <ImageNext
                       src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      alt='Flash Sale'
                       width={17}
                       height={10}
                     />
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 174e5cb1..a8ed90a4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -74,7 +74,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]'>
-        <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+        <Link href={URL.product} className='border-b border-gray_r-4 relative'  aria-label='Produk'>
           <div className='relative'>
             <Image
               src={image}
@@ -90,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-4 h-5 object-contain object-top   sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -101,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -115,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   className='h-full'
                   width={1000}
                   height={100}
+                  loading='eager'
                 />
               </div>
               <div className='relative'>
@@ -127,8 +130,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
                     <ImageNext
                       src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      alt='flash sale'
                       width={13}
                       height={5}
+                      loading='eager'
                     />
                     <span className='text-white text-[9px] md:text-[10px] font-semibold'>
                       {product?.flashSale?.tag != 'false' ||
@@ -150,26 +155,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
           <div className='flex justify-between '>
             {product?.manufacture?.name ? (
-              <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
+              <Link href={URL.manufacture} className='mb-1 mt-1 truncate' aria-label={product.manufacture.name}>
                 {product.manufacture.name}
               </Link>
             ) : (
               <div>-</div>
             )}
             {product?.isInBu && (
-              <Link href='/panduan-pick-up-service' className='group'>
+              <Link href='/panduan-pick-up-service' className='group' aria-label='pickup now'>
                 <Image
                   src='/images/PICKUP-NOW.png'
                   className='group-hover:scale-105 transition-transform duration-200'
                   alt='pickup now'
                   width={90}
                   height={12}
+                  loading='eager'
                 />
               </Link>
             )}
           </div>
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
             title={product?.name}
           >
@@ -194,6 +201,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -217,6 +225,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>
@@ -251,7 +260,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     return (
       <div className='flex bg-white'>
         <div className='w-4/12'>
-          <Link href={URL.product} className='relative'>
+          <Link href={URL.product} className='relative' aria-label={product?.name}>
             <div className='relative'>
               <Image
                 src={image}
@@ -267,6 +276,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-4 h-5 object-contain object-top   sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -278,6 +288,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-11 h-6 object-contain object-top  ml-1 sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -295,8 +306,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
               <ImageNext
                 src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                alt='flash sae'
                 width={15}
                 height={10}
+                loading='eager'
               />
               <span className='text-white text-xs font-semibold'>
                 {' '}
@@ -308,7 +321,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           {product?.manufacture?.name ? (
             <div className='flex justify-between'>
-              <Link href={URL.manufacture} className='mb-1'>
+              <Link href={URL.manufacture} className='mb-1' aria-label={product?.manufacture.name}>
                 {product.manufacture.name}
               </Link>
               {/* {product?.is_in_bu && (
@@ -324,6 +337,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
           >
             {product?.name}
@@ -350,6 +364,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -373,6 +388,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 54f209cc..91d199a6 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -35,7 +35,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       <>
         {bannerMode && (
           <SwiperSlide>
-            <Link href={products.banner.url} className='w-full h-full block'></Link>
+            <Link href={products.banner.url} className='w-full h-full block' aria-label={products.banner.name}></Link>
           </SwiperSlide>
         )}
         {products?.products?.map((product, index) => (