From 4c8d08def514cb441007c0bd2bc78e105e6d0153 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Wed, 4 Dec 2024 11:50:21 +0700
Subject: cr popup information method

---
 src-migrate/modules/popup-information/index.tsx    | 61 +++++++++++++++++-----
 src/components/ui/HeroBanner.jsx                   |  2 +-
 .../components/elements/Navbar/NavbarDesktop.jsx   | 12 ++++-
 .../product/components/Product/ProductDesktop.jsx  |  1 +
 .../product/components/Product/ProductMobile.jsx   |  1 +
 src/lib/product/components/ProductCard.jsx         |  6 ++-
 src/lib/product/components/ProductSlider.jsx       |  2 +-
 src/pages/api/hero-banner.js                       |  2 +
 8 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 0d36f8e9..20afa902 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -1,33 +1,66 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { Modal } from "~/components/ui/modal";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Modal } from '~/components/ui/modal';
 import { getAuth } from '~/libs/auth';
-import PageContent from '../page-content';
 
-const PagePopupInformation = () => {
+const PagePopupInformation = ({data} : {data: any[]}) => {
   const router = useRouter();
   const isHomePage = router.pathname === '/';
   const auth = getAuth();
   const [active, setActive] = useState<boolean>(false);
+  // const [data, setData] = useState<any>(null);
 
   useEffect(() => {
-    if (isHomePage && !auth) setActive(true);
+    // const getData = async () => {
+    //   const res = await fetch(`/api/hero-banner?type=popup-banner`);
+    //   const { data } = await res.json();
+    //   if (data) {
+    //     setData(data);
+    //   }
+    // };
+
+    if (isHomePage && !auth) {
+      setActive(true);
+      // getData();
+    }
   }, [isHomePage, auth]);
   return (
     <div className='group'>
-      <Modal
-        active={active}
-        className='!w-fit !bg-transparent !border-none overflow-hidden'
-        close={() => setActive(false)}
-        mode='desktop'
-      >
-        <div className='w-[350px] md:w-[530px]' onClick={() => setActive(false)}>
-          <PageContent path='/onbording-popup' />
-        </div>
-      </Modal>
+      {data && (
+        <Modal
+          active={active}
+          className='!w-fit !bg-transparent !border-none overflow-hidden'
+          close={() => setActive(false)}
+          mode='desktop'
+        >
+          <div
+            className='w-[350px] md:w-[530px]'
+            onClick={() => setActive(false)}
+          >
+            <Link href={data[0].url === false ? '/' :data[0].url} aria-label='popup'>
+              <Image
+                src={data[0]?.image}
+                alt={data[0]?.name}
+                width={1152}
+                height={768}
+                sizes='(max-width: 768px) 100vw, 50vw'
+                priority={true}
+              />
+            </Link>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 };
+export async function getServerSideProps() {
+  const res = await fetch(`/api/hero-banner?type=popup-banner`);
+  const { data } = await res.json();
+  return { props: { data } };
+}
+
 
 export default PagePopupInformation;
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 3025fc1e..6f1ef641 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -55,7 +55,7 @@ const HeroBanner = () => {
 
     return heroBanner.map((banner, index) => (
       <SwiperSlide key={index}>
-        <Link href={banner.url} className='w-full h-auto'>
+        <Link href={banner.url} className='w-full h-auto' aria-label={banner.name}>
           <Image
             src={banner.image}
             alt={banner.name}
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 7d6d8c9e..253a2b03 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -192,7 +192,7 @@ const NavbarDesktop = () => {
 
       <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'>
         <div className='container mx-auto flex gap-x-6'>
-          <Link href='/'>
+          <Link href='/' aria-label='Indoteknik Logo'>
             <Image
               src={IndoteknikLogo}
               alt='Indoteknik Logo'
@@ -217,6 +217,7 @@ const NavbarDesktop = () => {
               target='_blank'
               rel='noreferrer'
               href='/my/wishlist'
+              aria-label='Wishlist'
               className='flex items-center gap-x-2 !text-gray_r-12/80'
             >
               <HeartIcon className='w-7' />
@@ -224,6 +225,7 @@ const NavbarDesktop = () => {
             </Link>
             <a
               href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              aria-label='Whatsapp'
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
@@ -266,6 +268,7 @@ const NavbarDesktop = () => {
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
               <Link
                 href='/shop/promo'
+                aria-label='Promo'
                 className={`${
                   router.asPath === '/shop/promo' && 'bg-gray_r-3'
                 }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
@@ -300,6 +303,7 @@ const NavbarDesktop = () => {
 
               <Link
                 href='/shop/brands'
+                aria-label='Brand'
                 className={`${
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
                 } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
@@ -312,6 +316,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
+                aria-label='Ready Stock'
                 className={`${
                   router.asPath.includes('/shop/search?orderBy=stock') &&
                   'bg-gray_r-3'
@@ -325,6 +330,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
+                aria-label='Blog Indoteknik'
                 className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
@@ -348,12 +354,14 @@ const NavbarDesktop = () => {
                 <>
                   <Link
                     href='/login'
+                    aria-label='Login'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Masuk
                   </Link>
                   <Link
                     href='/register'
+                    aria-label='Register'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Daftar
@@ -362,7 +370,7 @@ const NavbarDesktop = () => {
               )}
               {auth && (
                 <>
-                  <div href='/' className='navbar-user-dropdown-button'>
+                  <div href='/' className='navbar-user-dropdown-button' aria-label='User'>
                     <span>Halo, {auth?.name}</span>
                     <div className='ml-auto'>
                       <ChevronDownIcon className='w-6' />
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 2291398d..a8ed90a4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -73,8 +73,8 @@ 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]' aria-label='Produk'>
-        <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+      <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'  aria-label='Produk'>
           <div className='relative'>
             <Image
               src={image}
@@ -130,6 +130,7 @@ 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'
@@ -305,6 +306,7 @@ 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'
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) => (
diff --git a/src/pages/api/hero-banner.js b/src/pages/api/hero-banner.js
index 7a348cfa..b7f3c1c5 100644
--- a/src/pages/api/hero-banner.js
+++ b/src/pages/api/hero-banner.js
@@ -28,6 +28,8 @@ export default async function handler(req, res) {
         `/api/v1/banner?type=${type}`
       );
 
+      if(!dataBannerSections) return res.status(200).json({ data: [] });
+
       // Simpan hasil fetch ke Redis dengan masa kadaluarsa 3 hari (259200 detik)
       await client.set(
         cacheKey,
-- 
cgit v1.2.3