Merge branch 'master' into development_tri/feedback_UAT

13 files changed, 73 insertions, 66 deletions

diff --git a/src/core/components/elements/Alert/Alert.jsx b/src/core/components/elements/Alert/Alert.jsx
index 695be8a3..cf84b591 100644
--- a/src/core/components/elements/Alert/Alert.jsx
+++ b/src/core/components/elements/Alert/Alert.jsx
@@ -1,3 +1,13 @@
+/**
+ * The Alert component is used to display different types of alerts or notifications
+ * with different styles based on the provided type prop.
+ *
+ * @param {Object} props - Props received by the component.
+ * @param {ReactNode} props.children - The content to be displayed inside the alert.
+ * @param {string} props.className - Additional CSS class names for the alert.
+ * @param {string} props.type - The type of the alert ('info', 'success', or 'warning').
+ * @returns {JSX.Element} - Rendered Alert component.
+ */
 const Alert = ({ children, className, type }) => {
   let typeClass = ''
   switch (type) {
diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index 098d0a33..f1456a7c 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -2,38 +2,33 @@ import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
 
+/**
+ * The AppBar component is a navigation component used to display a header or toolbar
+ * in a web application.
+ *
+ * @param {Object} props - Props received by the component.
+ * @param {string} props.title - The title to be displayed on the AppBar.
+ * @returns {JSX.Element} - Rendered AppBar component.
+ */
 const AppBar = ({ title }) => {
   const router = useRouter()
 
   return (
     <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
       <div className='flex items-center'>
-        <button
-          type='button'
-          className='p-4'
-          onClick={() => router.back()}
-        >
+        <button type='button' className='p-4' onClick={() => router.back()}>
           <ChevronLeftIcon className='w-6 stroke-2' />
         </button>
         <div className='font-medium text-h-sm line-clamp-1'>{title}</div>
       </div>
       <div className='flex items-center px-2'>
-        <Link
-          href='/shop/cart'
-          className='py-4 px-2'
-        >
+        <Link href='/shop/cart' className='py-4 px-2'>
           <ShoppingCartIcon className='w-6 text-gray_r-12' />
         </Link>
-        <Link
-          href='/'
-          className='py-4 px-2'
-        >
+        <Link href='/' className='py-4 px-2'>
           <HomeIcon className='w-6 text-gray_r-12' />
         </Link>
-        <Link
-          href='/my/menu'
-          className='py-4 px-2'
-        >
+        <Link href='/my/menu' className='py-4 px-2'>
           <Bars3Icon className='w-6 text-gray_r-12' />
         </Link>
       </div>
diff --git a/src/core/components/elements/Divider/Divider.jsx b/src/core/components/elements/Divider/Divider.jsx
index ce54a2ea..f3650b00 100644
--- a/src/core/components/elements/Divider/Divider.jsx
+++ b/src/core/components/elements/Divider/Divider.jsx
@@ -1,3 +1,11 @@
+/**
+ * The Divider component is used to create a horizontal line or divider with a specific
+ * background color based on the provided className prop.
+ *
+ * @param {Object} props - Props that are passed to the Divider component.
+ * @param {string} props.className - Additional CSS classes to apply to the divider.
+ * @returns {JSX.Element} - Rendered Divider component.
+ */
 const Divider = (props) => <div className={`h-1 bg-gray_r-4 ${props.className}`} />
 
 Divider.defaultProps = {
diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index ac82aaaf..ba6bf50d 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -1,6 +1,14 @@
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import 'react-lazy-load-image-component/src/effects/opacity.css'
 
+/**
+ * The `Image` component is used to display lazy-loaded images.
+ *
+ * @param {Object} props - Props passed to the `Image` component.
+ * @param {string} props.src - URL of the image to be displayed.
+ * @param {string} props.alt - Alternative text to be displayed if the image is not found.
+ * @returns {JSX.Element} - Rendered `Image` component.
+ */
 const Image = ({ ...props }) => (
   <>
     <LazyLoadImage
diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx
index 360444a6..f6b39d45 100644
--- a/src/core/components/elements/Link/Link.jsx
+++ b/src/core/components/elements/Link/Link.jsx
@@ -1,14 +1,14 @@
 import NextLink from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 
+/**
+ * The `Link` component is used to render Next.js links with customizable properties such as `children`, `scroll`, and `className`.
+ *
+ * @param {Object} props - Props passed to the `Link` component.
+ * @param {ReactNode} props.children - Child elements to be rendered as link content.
+ * @param {string} props.className - Additional CSS class to be applied to the link.
+ * @returns {JSX.Element} - Rendered `Link` component.
+ */
 const Link = ({ children, ...props }) => {
-  const router = useRouter()
-
-  useEffect(() => {
-    router.events.on('routeChangeComplete', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
-  }, [router])
-
   return (
     <NextLink
       {...props}
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 3998875b..24ff3a51 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -16,12 +16,7 @@ const NavbarMobile = () => {
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
-            <Image
-              src={IndoteknikLogo}
-              alt='Indoteknik Logo'
-              width={120}
-              height={40}
-            />
+            <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={120} height={40} />
           </Link>
           <div className='flex gap-x-3'>
             <Link href='/my/wishlist'>
@@ -30,10 +25,7 @@ const NavbarMobile = () => {
             <Link href='/shop/cart'>
               <ShoppingCartIcon className='w-6 text-gray_r-12' />
             </Link>
-            <button
-              type='button'
-              onClick={open}
-            >
+            <button type='button' onClick={open}>
               <Bars3Icon className='w-6 text-gray_r-12' />
             </button>
           </div>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index d0627b24..3046782b 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -45,10 +45,7 @@ const Search = () => {
 
   return (
     <>
-      <form
-        onSubmit={handleSubmit}
-        className='flex-1 flex relative'
-      >
+      <form onSubmit={handleSubmit} className='flex-1 flex relative'>
         <input
           type='text'
           ref={queryRef}
@@ -59,10 +56,7 @@ const Search = () => {
           onBlur={onInputBlur}
           onFocus={loadSuggestion}
         />
-        <button
-          type='submit'
-          className='rounded-r border border-l-0 border-gray_r-6 px-2'
-        >
+        <button type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'>
           <MagnifyingGlassIcon className='w-6' />
         </button>
 
diff --git a/src/core/components/elements/Pagination/Pagination.js b/src/core/components/elements/Pagination/Pagination.js
index 18964fc4..c009171f 100644
--- a/src/core/components/elements/Pagination/Pagination.js
+++ b/src/core/components/elements/Pagination/Pagination.js
@@ -26,10 +26,7 @@ const Pagination = ({ pageCount, currentPage, url, className }) => {
             </Link>
           )
           let DotsComponent = (
-            <div
-              key={i}
-              className='pagination-dots'
-            >
+            <div key={i} className='pagination-dots'>
               ...
             </div>
           )
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 1d65c7a3..80afa8d9 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'
 
 const transition = { ease: 'linear', duration: 0.2 }
 
-const BottomPopup = ({ children, active = false, title, close }) => {
+const BottomPopup = ({ children, active = false, title, close, className = '' }) => {
   useEffect(() => {
     if (active) {
       document.querySelector('html, body').classList.add('overflow-hidden')
@@ -35,7 +35,7 @@ const BottomPopup = ({ children, active = false, title, close }) => {
                 animate={{ bottom: 0 }}
                 exit={{ bottom: '-100%' }}
                 transition={transition}
-                className='fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto'
+                className={`fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
                   <div className='font-semibold text-h-sm'>{title}</div>
@@ -53,7 +53,7 @@ const BottomPopup = ({ children, active = false, title, close }) => {
                 animate={{ bottom: '50%', opacity: 1 }}
                 exit={{ bottom: '45%', opacity: 0 }}
                 transition={transition}
-                className='fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto'
+                className={`fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
                   <div className='font-semibold text-h-sm'>{title}</div>
diff --git a/src/core/components/elements/Skeleton/BrandSkeleton.jsx b/src/core/components/elements/Skeleton/BrandSkeleton.jsx
index 9a34fb9b..9a7a51f9 100644
--- a/src/core/components/elements/Skeleton/BrandSkeleton.jsx
+++ b/src/core/components/elements/Skeleton/BrandSkeleton.jsx
@@ -1,8 +1,5 @@
 const BrandSkeleton = () => (
-  <div
-    role='status'
-    className='animate-pulse'
-  >
+  <div role='status' className='animate-pulse'>
     <div className='h-12 bg-gray-200 rounded'></div>
     <span className='sr-only'>Loading...</span>
   </div>
diff --git a/src/core/components/elements/Skeleton/ImageSkeleton.jsx b/src/core/components/elements/Skeleton/ImageSkeleton.jsx
index 39d06331..2ca6b2a3 100644
--- a/src/core/components/elements/Skeleton/ImageSkeleton.jsx
+++ b/src/core/components/elements/Skeleton/ImageSkeleton.jsx
@@ -1,12 +1,6 @@
 const ImageSkeleton = () => (
-  <div
-    role='status'
-    className='animate-pulse'
-  >
-    <div
-      className='flex items-center justify-center h-56 mb-4 bg-gray-300 rounded'
-      aria-busy
-    >
+  <div role='status' className='animate-pulse'>
+    <div className='flex items-center justify-center h-56 mb-4 bg-gray-300 rounded' aria-busy>
       <svg
         className='w-12 h-12 text-gray-200'
         xmlns='http://www.w3.org/2000/svg'
diff --git a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx
index ddc0d3bc..84d1c0d1 100644
--- a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx
+++ b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx
@@ -3,10 +3,7 @@ const ProductCardSkeleton = () => (
     role='status'
     className='p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6'
   >
-    <div
-      className='flex items-center justify-center h-36 mb-4 bg-gray-300 rounded'
-      aria-busy
-    >
+    <div className='flex items-center justify-center h-36 mb-4 bg-gray-300 rounded' aria-busy>
       <svg
         className='w-12 h-12 text-gray-200'
         xmlns='http://www.w3.org/2000/svg'
diff --git a/src/core/components/elements/Spinner/LogoSpinner.jsx b/src/core/components/elements/Spinner/LogoSpinner.jsx
new file mode 100644
index 00000000..73b84e84
--- /dev/null
+++ b/src/core/components/elements/Spinner/LogoSpinner.jsx
@@ -0,0 +1,15 @@
+import Image from 'next/image'
+import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
+
+const LogoSpinner = ({ ...props }) => (
+  <Image
+    src={IndoteknikLogo}
+    alt='Indoteknik Logo'
+    width={64}
+    height={64}
+    className='page-loader'
+    {...props}
+  />
+)
+
+export default LogoSpinner