summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/brand/components/BrandCard.jsx8
-rw-r--r--src/lib/cart/components/Cartheader.jsx5
-rw-r--r--src/lib/category/components/Category.jsx79
-rw-r--r--src/lib/home/api/CategoryPilihanApi.js8
-rw-r--r--src/lib/home/api/categoryManagementApi.js8
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx109
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx101
-rw-r--r--src/lib/home/components/CategoryPilihan.jsx120
-rw-r--r--src/lib/home/components/PreferredBrand.jsx46
-rw-r--r--src/lib/home/hooks/useCategoryManagement.js13
-rw-r--r--src/lib/home/hooks/useCategoryPilihan.js13
-rw-r--r--src/lib/lob/components/Breadcrumb.jsx55
-rw-r--r--src/lib/product/components/CategorySection.jsx104
-rw-r--r--src/lib/product/components/LobSectionCategory.jsx81
-rw-r--r--src/lib/product/components/ProductCard.jsx2
-rw-r--r--src/lib/product/components/ProductFilterDesktop.jsx6
-rw-r--r--src/lib/product/components/ProductSearch.jsx147
17 files changed, 855 insertions, 50 deletions
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 731214ff..2d78d956 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -8,7 +8,7 @@ const BrandCard = ({ brand }) => {
return (
<Link
href={createSlug('/shop/brands/', brand.name, brand.id)}
- className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${
+ 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'
}`}
>
@@ -16,9 +16,9 @@ const BrandCard = ({ brand }) => {
<Image
src={brand.logo}
alt={brand.name}
- width={128}
- height={128}
- className='h-full w-full object-contain object-center'
+ width={50}
+ height={50}
+ className='h-full w-[122px] object-contain object-center'
/>
)}
{!brand.logo && (
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index e3a5cc1f..f76634ce 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,5 +1,8 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { getCartApi } from '../api/CartApi'
+import currencyFormat from '@/core/utils/currencyFormat'
+import Image from '@/core/components/elements/Image/Image'
+import { createSlug } from '@/core/utils/slug'
import useAuth from '@/core/hooks/useAuth'
import { useRouter } from 'next/router'
import odooApi from '@/core/api/odooApi'
@@ -14,6 +17,7 @@ const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
const { default: Link } = require('next/link')
const Cardheader = (cartCount) => {
+
const router = useRouter()
const [subTotal, setSubTotal] = useState(null)
const [buttonLoading, SetButtonTerapkan] = useState(false)
@@ -98,6 +102,7 @@ const Cardheader = (cartCount) => {
router.push('/shop/checkout')
}
+
return (
<div className='relative group'>
<div>
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index e6ea5acf..c147a3b3 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -2,10 +2,14 @@ import odooApi from '@/core/api/odooApi'
import Link from '@/core/components/elements/Link/Link'
import DesktopView from '@/core/components/views/DesktopView'
import { createSlug } from '@/core/utils/slug'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
import { useEffect, useState } from 'react'
const Category = () => {
const [categories, setCategories] = useState([])
+ const [openCategories, setOpenCategory] = useState([]);
+
useEffect(() => {
const loadCategories = async () => {
@@ -31,7 +35,7 @@ const Category = () => {
<DesktopView>
<div className='category-mega-box'>
{categories?.map((category) => (
- <div key={category.id}>
+ <div key={category.id} className='flex'>
<Link
href={createSlug('/shop/category/', category.name, category.id)}
className='category-mega-box__parent'
@@ -39,33 +43,74 @@ const Category = () => {
{category.name}
</Link>
<div className='category-mega-box__child-wrapper'>
- <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'>
+ <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'>
{category.childs.map((child1Category) => (
- <div key={child1Category.id}>
+ <div key={child1Category.id} className='w-full'>
<Link
href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
- className='category-mega-box__child-one mb-4'
+ className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2'
>
{child1Category.name}
</Link>
- <div className='flex flex-col gap-y-3'>
- {child1Category.childs.map((child2Category) => (
- <Link
- href={createSlug(
- '/shop/category/',
- child2Category.name,
- child2Category.id
- )}
- className='category-mega-box__child-two'
- key={child2Category.id}
- >
- {child2Category.name}
- </Link>
+ <div className='flex flex-col gap-y-3 w-full'>
+ {child1Category.childs.map((child2Category, index) => (
+ (index < 4) && (
+ <Link
+ href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
+ className='category-mega-box__child-two truncate'
+ key={child2Category.id}
+ >
+ {child2Category.name}
+ </Link>
+ )
))}
+ {child1Category.childs.length > 5 && (
+ <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+ <Link
+ href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+ className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+ >
+ <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p>
+ <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+ </Link>
+ </div>
+ )}
</div>
</div>
))}
</div>
+ <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
+ <div className='flex flex-col'>
+ <div className='grid grid-cols-2 max-h-full w-full gap-2'>
+ {category.childs.map((brand, index) => (
+ (index < 8 ) && (
+ <div key={brand.id} className='w-full flex items-center justify-center pb-2'>
+ <Link
+ href={createSlug('/shop/category/', brand.name, brand.id)}
+ className='category-mega-box__child-one w-fit h-full flex items-center justify-center '
+ >
+ <Image src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/661' alt='' width={104} height={44} objectFit='cover' />
+ </Link>
+ </div>
+ )
+ ))}
+ </div>
+ {category.childs.length > 8 && (
+ <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+ <Link
+ href={createSlug('/shop/category/', category.name, category.id)}
+ className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+ >
+ <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p>
+ <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+ </Link>
+ </div>
+ )}
+ </div>
+ <div className='flex w-60 h-20 object-cover'>
+ <Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} />
+ </div>
+ </div>
</div>
</div>
))}
diff --git a/src/lib/home/api/CategoryPilihanApi.js b/src/lib/home/api/CategoryPilihanApi.js
new file mode 100644
index 00000000..8a0b38d3
--- /dev/null
+++ b/src/lib/home/api/CategoryPilihanApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const categoryPilihanApi = async () => {
+ const dataCategoryPilihan = await odooApi('GET', '/api/v1/lob_homepage')
+ return dataCategoryPilihan
+}
+
+export default categoryPilihanApi
diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js
new file mode 100644
index 00000000..b70d60ce
--- /dev/null
+++ b/src/lib/home/api/categoryManagementApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const categoryManagementApi = async () => {
+ const dataCategoryManagement = await odooApi('GET', '/api/v1/categories_management')
+ return dataCategoryManagement
+}
+
+export default categoryManagementApi
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
new file mode 100644
index 00000000..f2d1a16f
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import useCategoryManagement from '../hooks/useCategoryManagement';
+import NextImage from 'next/image';
+import Link from "next/link";
+import { createSlug } from '@/core/utils/slug';
+import odooApi from '@/core/api/odooApi';
+import { Skeleton} from '@chakra-ui/react'
+
+const CategoryDynamic = () => {
+ const { categoryManagement } = useCategoryManagement();
+ 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, categoryData]);
+
+
+ return (
+ <div>
+ {categoryManagement && categoryManagement.data?.map((category) => {
+ const countLevel1 = categoryData[category.categoryIdI] || 0;
+
+ return (
+ <Skeleton key={category.id} isLoaded={categoryManagement}>
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+ <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div>
+ <Skeleton isLoaded={countLevel1 !=0}>
+ <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
+ </Skeleton>
+ <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+ </div>
+ <div className='grid grid-cols-3 gap-2'>
+ {category.categories.map((subCategory) => {
+ const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
+
+ return (
+ <div key={subCategory.id} 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'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+ <div className='font-semibold text-lg mr-2'>{subCategory.name}</div>
+ <Skeleton isLoaded={countLevel2 != 0}>
+ <p className={`text-gray_r-10 text-sm`}>
+ {countLevel2} Produk tersedia
+ </p>
+ </Skeleton>
+ <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} 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]'>
+ {subCategory.childFrontendIdI.map((childCategory) => (
+ <div key={childCategory.id}>
+ <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.idLevel3)} 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}
+ 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'>
+ <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div>
+ </div>
+ </Link>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ </Skeleton>
+ );
+ })}
+ </div>
+ );
+};
+
+export default CategoryDynamic;
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
new file mode 100644
index 00000000..c1433a2d
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import useCategoryManagement from '../hooks/useCategoryManagement';
+import NextImage from 'next/image';
+import Link from "next/link";
+import { createSlug } from '@/core/utils/slug';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+const CategoryDynamicMobile = () => {
+ const { categoryManagement } = useCategoryManagement()
+ const [selectedCategory, setSelectedCategory] = useState({});
+
+ useEffect(() => {
+ const loadPromo = async () => {
+ try {
+ if (categoryManagement.data?.length > 0) {
+ const initialSelections = categoryManagement.data.reduce((acc, category) => {
+ if (category.categories.length > 0) {
+ acc[category.id] = category.categories[0].idLevel2;
+ }
+ return acc;
+ }, {});
+ setSelectedCategory(initialSelections);
+ }
+ } catch (loadError) {
+ // console.error("Error loading promo items:", loadError);
+ }
+ };
+
+ loadPromo();
+ }, [categoryManagement.data]);
+
+ const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
+ setSelectedCategory(prev => ({
+ ...prev,
+ [categoryIdI]: idLevel2
+ }));
+ };
+
+ return (
+ <div className='p-4'>
+ {categoryManagement.data && categoryManagement.data.map((category) => (
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+ <div className='font-semibold sm:text-h-sm mr-2'>{category.name}</div>
+ <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link>
+ </div>
+ <Swiper slidesPerView={2.3} spaceBetween={10}>
+ {category.categories.map((index) => (
+ <SwiperSlide key={index.id}>
+ <div
+ onClick={() => handleCategoryLevel2Click(category.id, index?.idLevel2)}
+ className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.idLevel2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+ >
+ <div className='p-1 flex justify-start items-center'>
+ <div className='flex flex-row justify-center items-center'>
+ <NextImage
+ src={index.image ? index.image : "/images/noimage.jpeg"}
+ alt={index.name}
+ width={30}
+ height={30}
+ className='object-'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
+ <div className='font-semibold text-[10px] line-clamp-1'>{index.name}</div>
+ <p className='text-gray_r-10 text-[10px]'>999 rb+ Produk</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ <div className='p-3 mt-2 border'>
+ <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+ {category.categories.map((index) => (
+ selectedCategory[category.id] === index?.idLevel2 && index.childFrontendIdI.map((x) => (
+ <div key={x.id}>
+ <Link href={createSlug('/shop/category/', x?.name, x?.idLevel3)} className="flex flex-row gap-1 border rounded group hover:border-red-500">
+ <NextImage
+ src={x.image ? x.image : "/images/noimage.jpeg"}
+ alt={x.name}
+ width={40}
+ height={40}
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
+ <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x.name}</div>
+ </div>
+ </Link>
+ </div>
+ ))
+ ))}
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+};
+
+export default CategoryDynamicMobile;
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
new file mode 100644
index 00000000..6568621c
--- /dev/null
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -0,0 +1,120 @@
+import Image from 'next/image'
+import useCategoryHome from '../hooks/useCategoryHome'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
+const { useQuery } = require('react-query')
+import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
+import useCategoryPilihan from '../hooks/useCategoryPilihan';
+import useDevice from '@/core/hooks/useDevice'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+const CategoryPilihan = ({ id, categories }) => {
+ const { isDesktop, isMobile } = useDevice()
+ const { categoryPilihan } = useCategoryPilihan();
+ const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
+ return (
+ <section>
+ {isDesktop && (
+ <div>
+ <div className='flex flex-row items-center mb-4'>
+ <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div>
+ <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
+ </div>
+ {heroBanner.data &&
+ heroBanner.data?.length > 0 && (
+ <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
+ <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+ <Image
+ width={1260}
+ height={170}
+ quality={100}
+ src={heroBanner.data[0].image}
+ alt={heroBanner.data[0].name}
+ className='h-full object-cover w-full'
+ />
+ </Link>
+ </div>
+ )}
+ <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
+ {categoryPilihan?.data?.map((category) => (
+ <div key={category.id} className="KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group">
+ <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
+ <div className="group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible">
+ <div className=' h-36 flex justify-end items-end'>
+ <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} />
+ </div>
+ <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+ </div>
+ </div>
+ <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+ <Link
+ href={createSlug('/shop/lob/', category?.industries, category?.id)}
+ className='category-mega-box__parent text-white rounded-lg'
+ >
+ Lihat semua
+ </Link>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+ {isMobile && (
+ <div className='p-4'>
+ <div className='flex flex-row items-center mb-4'>
+ <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div>
+ {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
+ </div>
+ <div className='flex'>
+ {heroBanner.data &&
+ heroBanner.data?.length > 0 && (
+ <div className=' object-fill '>
+ <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+ <Image
+ width={439}
+ height={150}
+ quality={100}
+ src={heroBanner.data[0].image}
+ alt={heroBanner.data[0].name}
+ className='object-cover'
+ />
+ </Link>
+ </div>
+ )}
+ </div>
+ <Swiper slidesPerView={2.1} spaceBetween={10}>
+ {categoryPilihan?.data?.map((category) => (
+ <SwiperSlide key={category.id}>
+ <div key={category.id} className="KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group">
+ <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
+ <div className="group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible">
+ <div className=' h-36 flex justify-end items-end'>
+ <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} />
+ </div>
+ <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+ </div>
+ </div>
+ <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+ <Link
+ href={createSlug('/shop/lob/', category?.industries, category?.id)}
+ className='category-mega-box__parent text-white rounded-lg'
+ >
+ Lihat semua
+ </Link>
+ </div>
+ </div>
+ </SwiperSlide>
+ ))}
+
+ </Swiper>
+
+ </div>
+ )}
+ </section>
+ )
+}
+
+export default CategoryPilihan
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 6b64a444..ae12505d 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -1,4 +1,5 @@
import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation, Pagination, Autoplay } from 'swiper';
import { useCallback, useEffect, useState } from 'react'
import usePreferredBrand from '../hooks/usePreferredBrand'
import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
@@ -38,7 +39,23 @@ const PreferredBrand = () => {
const { preferredBrands } = usePreferredBrand(query)
const { isMobile, isDesktop } = useDevice()
-
+ const swiperBanner = {
+ modules:[Navigation, Pagination, Autoplay],
+ autoplay: {
+ delay: 4000,
+ disableOnInteraction: false
+ },
+ loop: true,
+ className: 'h-[70px] md:h-[100px] w-full',
+ slidesPerView: isMobile ? 4 : 8,
+ spaceBetween: isMobile ? 12 : 0,
+ pagination: {
+ dynamicBullets: true,
+ dynamicMainBullets: isMobile ? 6 : 8,
+ clickable: true,
+ }
+ }
+ const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : []
return (
<div className='px-4 sm:px-0'>
<div className='flex justify-between items-center mb-4'>
@@ -48,24 +65,21 @@ const PreferredBrand = () => {
Lihat Semua
</Link>
)}
- {isMobile && (
- <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'>
- Lihat Semua
- </Link>
+ </div>
+ <div className='border rounded border-gray_r-6'>
+ {manufactures.isLoading && <PreferredBrandSkeleton />}
+ {!manufactures.isLoading && (
+ <Swiper {...swiperBanner}>
+ {preferredBrandsData.map((manufacture) => (
+ <SwiperSlide key={manufacture.id}>
+ <BrandCard brand={manufacture} />
+ </SwiperSlide>
+ ))}
+ </Swiper>
)}
</div>
- {manufactures.isLoading && <PreferredBrandSkeleton />}
- {!manufactures.isLoading && (
- <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 24} freeMode>
- {manufactures.map((manufacture) => (
- <SwiperSlide key={manufacture.id}>
- <BrandCard brand={manufacture} />
- </SwiperSlide>
- ))}
- </Swiper>
- )}
</div>
)
}
-export default PreferredBrand
+export default PreferredBrand \ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryManagement.js b/src/lib/home/hooks/useCategoryManagement.js
new file mode 100644
index 00000000..c1dda585
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryManagement.js
@@ -0,0 +1,13 @@
+import categoryManagementApi from '../api/categoryManagementApi'
+import { useQuery } from 'react-query'
+
+const useCategoryManagement = () => {
+ const fetchCategoryManagement = async () => await categoryManagementApi()
+ const { isLoading, data } = useQuery('categoryManagementApi', fetchCategoryManagement)
+
+ return {
+ categoryManagement: { data, isLoading }
+ }
+}
+
+export default useCategoryManagement \ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryPilihan.js b/src/lib/home/hooks/useCategoryPilihan.js
new file mode 100644
index 00000000..12a86f7e
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryPilihan.js
@@ -0,0 +1,13 @@
+import categoryPilihanApi from '../api/CategoryPilihanApi'
+import { useQuery } from 'react-query'
+
+const useCategoryPilihan = () => {
+ const fetchCategoryPilihan = async () => await categoryPilihanApi()
+ const { isLoading, data } = useQuery('categoryPilihanApi', fetchCategoryPilihan)
+
+ return {
+ categoryPilihan: { data, isLoading }
+ }
+}
+
+export default useCategoryPilihan \ No newline at end of file
diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx
new file mode 100644
index 00000000..5722fd39
--- /dev/null
+++ b/src/lib/lob/components/Breadcrumb.jsx
@@ -0,0 +1,55 @@
+import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import {
+ Breadcrumb as ChakraBreadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ Skeleton
+} from '@chakra-ui/react'
+import Link from 'next/link'
+import React from 'react'
+import { useQuery } from 'react-query'
+
+/**
+ * Render a breadcrumb component.
+ *
+ * @param {object} categoryId - The ID of the category.
+ * @return {JSX.Element} The breadcrumb component.
+ */
+const Breadcrumb = ({ categoryId }) => {
+ const breadcrumbs = useQuery(
+ `lob-breadcrumbs/${categoryId}`,
+ async () => await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`)
+ )
+ return (
+ <div className='container mx-auto py-4 md:py-6'>
+ <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
+ <ChakraBreadcrumb>
+ <BreadcrumbItem>
+ <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+ Home
+ </BreadcrumbLink>
+ </BreadcrumbItem>
+
+ {breadcrumbs?.data?.map((category, index) => (
+ <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
+ {index === breadcrumbs.data.length - 1 ? (
+ <BreadcrumbLink className='whitespace-nowrap'>{category.industries}</BreadcrumbLink>
+ ) : (
+ <BreadcrumbLink
+ as={Link}
+ href={createSlug('/shop/lob/', category.industries, category.id)}
+ className='!text-danger-500 whitespace-nowrap'
+ >
+ {category.industries}
+ </BreadcrumbLink>
+ )}
+ </BreadcrumbItem>
+ ))}
+ </ChakraBreadcrumb>
+ </Skeleton>
+ </div>
+ )
+}
+
+export default Breadcrumb
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx
new file mode 100644
index 00000000..2af3db10
--- /dev/null
+++ b/src/lib/product/components/CategorySection.jsx
@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import useDevice from '@/core/hooks/useDevice';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+import {
+ ChevronDownIcon,
+ ChevronUpIcon, // Import ChevronUpIcon for toggling
+ DocumentCheckIcon,
+ HeartIcon,
+} from '@heroicons/react/24/outline';
+import { useState } from 'react'; // Import useState
+import { getIdFromSlug } from '@/core/utils/slug'
+
+const CategorySection = ({ categories }) => {
+ const { isDesktop, isMobile } = useDevice();
+ const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility
+
+ const handleToggleCategories = () => {
+ setIsOpenCategory(!isOpenCategory);
+ };
+
+
+ const displayedCategories = isOpenCategory ? categories : categories.slice(0, 10);
+
+ return (
+ <section>
+ {isDesktop && (
+ <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 ">
+ {displayedCategories.map((category) => (
+ <Link href={createSlug('/shop/category/', category?.name, category?.id)} key={category?.id} passHref>
+ <div className="group transition-colors duration-300 ">
+ <div className="KartuInti h-12 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:border-red-400 rounded relative ">
+ <div className="flex items-center justify-start h-full px-1 flex-row ">
+ <Image className="h-full" src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'} width={56} height={48} alt={category?.name} />
+ <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">{category?.name}</h2>
+ </div>
+ </div>
+ </div>
+ </Link>
+ ))}
+ </div>
+ )}
+ {isDesktop && categories.length > 10 && (
+ <div className="w-full flex justify-center mt-4">
+ <button
+ onClick={handleToggleCategories}
+ className="flex justify-end mt-4 text-red-500 font-bold px-4 py-2 rounded"
+ >
+ {isOpenCategory ? 'Sembunyikan' : 'Lihat semua'}
+ {isOpenCategory ? (
+ <ChevronUpIcon className="ml-auto w-5 font-bold" />
+ ) : (
+ <ChevronDownIcon className="ml-auto w-5 font-bold" />
+ )}
+ </button>
+ </div>
+ )}
+
+ {isMobile && (
+ <div className="py-4">
+ <Swiper slidesPerView={2.3} spaceBetween={10}>
+ {displayedCategories.map((category) => (
+ <SwiperSlide key={category?.id}>
+ <Link href={createSlug('/shop/category/', category?.name, category?.id)} passHref>
+ <div className="group transition-colors duration-300">
+ <div className="KartuInti min-h-16 max-h-16 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:bg-red-200 group-hover:border-red-400 rounded relative">
+ <div className="flex items-center justify-center h-full px-1 flex-row">
+ <Image
+ src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'}
+ width={56}
+ height={48}
+ alt={category?.name}
+ />
+ <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">
+ {category?.name}
+ </h2>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ {categories.length > 10 && (
+ <div className="w-full flex justify-end mt-4">
+ <button
+ onClick={handleToggleCategories}
+ className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded"
+ >
+ {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
+ </button>
+ </div>
+ )}
+ </div>
+ )}
+ </section>
+ )
+}
+
+export default CategorySection
diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx
new file mode 100644
index 00000000..03d6e8c0
--- /dev/null
+++ b/src/lib/product/components/LobSectionCategory.jsx
@@ -0,0 +1,81 @@
+import Image from "next/image";
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import useDevice from '@/core/hooks/useDevice';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+import {
+ ChevronDownIcon,
+ ChevronUpIcon, // Import ChevronUpIcon for toggling
+ DocumentCheckIcon,
+ HeartIcon,
+} from '@heroicons/react/24/outline';
+import { useState } from 'react'; // Import useState
+import { getIdFromSlug } from '@/core/utils/slug'
+
+const LobSectionCategory = ({ categories }) => {
+ const { isDesktop, isMobile } = useDevice();
+ const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility
+
+ const handleToggleCategories = () => {
+ setIsOpenCategory(!isOpenCategory);
+ };
+
+ const displayedCategories = categories[0]?.categoryIds;
+
+ return (
+ <section>
+ {isDesktop && (
+ <div className="group/item grid grid-flow-col gap-y-2 gap-x-4 w-full h-full">
+ {displayedCategories?.map((category) => (
+ <Link
+ href={createSlug('/shop/category/', category?.name, category?.id)}
+ key={category?.id}
+ passHref
+ className="block hover:scale-105 transition-transform duration-300 bg-cover bg-center h-[144px]"
+ style={{
+ backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`,
+ }}
+ >
+ </Link>
+ ))}
+ </div>
+ )}
+
+ {isMobile && (
+ <div className="py-4">
+ <Swiper slidesPerView={1.2} spaceBetween={10}>
+ {displayedCategories?.map((category) => (
+ <SwiperSlide key={category?.id}>
+ <Link
+ href={createSlug('/shop/category/', category?.name, category?.id)}
+ key={category?.id}
+ passHref
+ className="block bg-cover bg-center h-[144px]"
+ style={{
+ backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`,
+ }}
+ >
+ </Link>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ {categories.length > 10 && (
+ <div className="w-full flex justify-end mt-4">
+ <button
+ onClick={handleToggleCategories}
+ className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded"
+ >
+ {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
+ </button>
+ </div>
+ )}
+ </div>
+ )}
+ </section>
+ )
+}
+
+export default LobSectionCategory
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index e10241a7..94db144d 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -18,7 +18,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
let voucherPastiHemat = 0;
- if (product?.voucherPastiHemat.length > 0) {
+ if (product?.voucherPastiHemat?.length > 0) {
const stringVoucher = product?.voucherPastiHemat[0];
const validJsonString = stringVoucher.replace(/'/g, '"');
voucherPastiHemat = JSON.parse(validJsonString);
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index a8073036..1933c5f0 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -107,7 +107,11 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug;
if (slug) {
- 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}`)
}
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index b1a5d409..09534a5d 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,6 +26,10 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';
import SideBanner from '~/modules/side-banner';
import FooterBanner from '~/modules/footer-banner';
+import CategorySection from './CategorySection';
+import LobSectionCategory from './LobSectionCategory';
+import { getIdFromSlug } from '@/core/utils/slug'
+import { data } from 'autoprefixer';
const ProductSearch = ({
query,
@@ -37,11 +41,109 @@ const ProductSearch = ({
const { page = 1 } = query;
const [q, setQ] = useState(query?.q || '*');
const [search, setSearch] = useState(query?.q || '*');
- const [limit, setLimit] = useState(query?.limit || 30);
+ const [limit, setLimit] = useState(router.query?.limit || 30);
const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
+ const [finalQuery, setFinalQuery] = useState({});
+ const [queryFinal, setQueryFinal] = useState({});
+ const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
+ const [dataCategoriesLob, setDataCategoriesLob] = useState([])
+ const categoryId = getIdFromSlug(prefixUrl)
+ const [data, setData] = useState([])
+ const [dataLob, setDataLob] = useState([]);
if (defaultBrand) query.brand = defaultBrand.toLowerCase();
+ const dataIdCategories = []
+ useEffect(() => {
+ if(prefixUrl.includes('category')){
+ const loadProduct = async () => {
+ const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`);
+ if (getCategoriesId) {
+ setDataCategoriesProduct(getCategoriesId);
+ }
+ };
+ loadProduct();
+ }else if(prefixUrl.includes('lob')){
+ const loadProduct = async () => {
+ const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`);
+
+ if (lobData) {
+ setDataLob(lobData);
+ }
+ };
+ loadProduct();
+
+ }
+ }, [categoryId]);
+
+ const collectIds = (category) => {
+ const ids = [];
+ function recurse(cat) {
+ if (cat && cat.id) {
+ ids.push(cat.id);
+ }
+ if (Array.isArray(cat.children)) {
+ cat.children.forEach(recurse);
+ }
+ }
+ recurse(category);
+ return ids;
+ };
+
+ useEffect(() => {
+ if(prefixUrl.includes('category')){
+ const ids = collectIds(dataCategoriesProduct);
+ const newQuery = {
+ fq: `category_id_ids:(${ids.join(' OR ')})`,
+ page : router.query.page? router.query.page : 1,
+ brand : router.query.brand? router.query.brand : '',
+ category : router.query.category? router.query.category : '',
+ priceFrom : router.query.priceFrom? router.query.priceFrom : '',
+ priceTo : router.query.priceTo? router.query.priceTo : '',
+ limit : router.query.limit? router.query.limit : '',
+ orderBy : router.query.orderBy? router.query.orderBy : ''
+ };
+ setFinalQuery(newQuery);
+ } else if (prefixUrl.includes('lob')){
+
+ const fetchCategoryData = async () => {
+ if (dataLob[0]?.categoryIds) {
+
+ for (const cate of dataLob[0].categoryIds) {
+
+ dataIdCategories.push(cate.childId)
+ }
+
+
+ const mergedArray = dataIdCategories.flat();
+
+ const newQuery = {
+ fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
+ category : router.query.category? router.query.category : '',
+ page : router.query.page? router.query.page : 1,
+ brand : router.query.brand? router.query.brand : '',
+ priceFrom : router.query.priceFrom? router.query.priceFrom : '',
+ priceTo : router.query.priceTo? router.query.priceTo : '',
+ limit : router.query.limit? router.query.limit : '',
+ orderBy : router.query.orderBy? router.query.orderBy : ''
+ };
+
+ setFinalQuery(newQuery);
+
+ }
+ };
+ fetchCategoryData();
+ }
+ }, [dataCategoriesProduct, dataLob]);
+
+ useEffect(() => {
+ if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
+ setQueryFinal({ ...finalQuery, q, limit, orderBy });
+ } else {
+ setQueryFinal({ ...query, q, limit, orderBy });
+ }
+ }, [prefixUrl,dataCategoriesProduct, query, finalQuery]);
+
const { productSearch } = useProductSearch({
- query: { ...query, q, limit, orderBy },
+ query: queryFinal,
operation: 'AND',
});
const [products, setProducts] = useState(null);
@@ -53,22 +155,24 @@ const ProductSearch = ({
const numRows = [30, 50, 80, 100];
const [brandValues, setBrand] = useState(
!router.pathname.includes('brands')
- ? query.brand
- ? query.brand.split(',')
+ ? router.query.brand
+ ? router.query.brand.split(',')
: []
: []
);
const [categoryValues, setCategory] = useState(
- query?.category?.split(',') || []
+ router.query?.category?.split(',') || router.query?.category?.split(',')
);
- const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null);
- const [priceTo, setPriceTo] = useState(query?.priceTo || null);
+
+ const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null);
+ const [priceTo, setPriceTo] = useState(router.query?.priceTo || null);
const pageCount = Math.ceil(productSearch.data?.response.numFound / limit);
const productStart = productSearch.data?.responseHeader.params.start;
const productRows = limit;
const productFound = productSearch.data?.response.numFound;
-
+ const [dataCategories, setDataCategories] = useState([])
+
useEffect(() => {
if (productFound == 0 && query.q && !spellings) {
searchSpellApi({ query: query.q }).then((response) => {
@@ -98,7 +202,7 @@ const ProductSearch = ({
});
}
}, [productFound, query, spellings]);
-
+ let id = []
useEffect(() => {
const checkIfBrand = async () => {
const brand = await axios(
@@ -115,6 +219,21 @@ const ProductSearch = ({
checkIfBrand();
}
}, [q]);
+
+ useEffect(() => {
+ if(prefixUrl.includes('category')){
+ const loadCategories = async () => {
+ const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`)
+ if(getCategories){
+ setDataCategories(getCategories)
+ }
+ }
+ loadCategories()
+ }
+ }, [])
+
+
+
const brands = [];
for (
@@ -223,7 +342,7 @@ const ProductSearch = ({
q: router.query.q,
orderBy: orderBy,
brand: brandValues.join(','),
- category: categoryValues.join(','),
+ category: categoryValues?.join(','),
priceFrom,
priceTo,
};
@@ -262,7 +381,6 @@ const ProductSearch = ({
};
const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock';
-
return (
<>
<MobileView>
@@ -323,6 +441,8 @@ const ProductSearch = ({
SpellingComponent
)}
</div>
+ <LobSectionCategory categories={dataLob}/>
+ <CategorySection categories={dataCategories}/>
{productFound > 0 && (
<div className='flex items-center gap-x-2 mb-5 justify-between'>
@@ -363,6 +483,7 @@ const ProductSearch = ({
pageCount={pageCount}
currentPage={parseInt(page)}
url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+ // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
className='mt-6 mb-2'
/>
@@ -411,7 +532,10 @@ const ProductSearch = ({
<SideBanner />
</div>
+
<div className='w-9/12 pl-6'>
+ <LobSectionCategory categories={dataLob}/>
+ <CategorySection categories={dataCategories}/>
{bannerPromotionHeader && bannerPromotionHeader?.image && (
<div className='mb-3'>
<Image
@@ -549,6 +673,7 @@ const ProductSearch = ({
pageCount={pageCount}
currentPage={parseInt(page)}
url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+ // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
className='!justify-end'
/>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:08:23 +0000