17 files changed, 278 insertions, 0 deletions
diff --git a/src/lib/home/api/categoryHomeApi.js b/src/lib/home/api/categoryHomeApi.js
new file mode 100644
index 00000000..efb31240
--- /dev/null
+++ b/src/lib/home/api/categoryHomeApi.js
@@ -0,0 +1,8 @@
+import odooApi from "@/core/api/odooApi"
+
+const categoryHomeIdApi = async ({ id }) => {
+  const dataCategoryHomeId = await odooApi('GET', `/api/v1/categories_homepage?id=${id}`)
+  return dataCategoryHomeId
+}
+
+export default categoryHomeIdApi
+\ No newline at end of file
diff --git a/src/lib/home/api/categoryHomeIdApi.js b/src/lib/home/api/categoryHomeIdApi.js
new file mode 100644
index 00000000..d5612195
--- /dev/null
+++ b/src/lib/home/api/categoryHomeIdApi.js
@@ -0,0 +1,8 @@
+import odooApi from "@/core/api/odooApi"
+
+const categoryHomeIdApi = async () => {
+  const dataCategoryHomeIds = await odooApi('GET', '/api/v1/categories_homepage/ids')
+  return dataCategoryHomeIds
+}
+
+export default categoryHomeIdApi
+\ No newline at end of file
diff --git a/src/lib/home/api/heroBannerApi.js b/src/lib/home/api/heroBannerApi.js
new file mode 100644
index 00000000..7ba84bc6
--- /dev/null
+++ b/src/lib/home/api/heroBannerApi.js
@@ -0,0 +1,8 @@
+import odooApi from "@/core/api/odooApi"
+
+const heroBannerApi = async () => {
+  const dataHeroBanners = await odooApi('GET', '/api/v1/banner?type=index-a-1')
+  return dataHeroBanners
+}
+
+export default heroBannerApi
+\ No newline at end of file
diff --git a/src/lib/home/api/popularProductApi.js b/src/lib/home/api/popularProductApi.js
new file mode 100644
index 00000000..d7adca83
--- /dev/null
+++ b/src/lib/home/api/popularProductApi.js
@@ -0,0 +1,8 @@
+import axios from "axios"
+
+const popularProductApi = async () => {
+  const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular`)
+  return dataPopularProducts.data.response
+}
+
+export default popularProductApi
+\ No newline at end of file
diff --git a/src/lib/home/api/preferredBrandApi.js b/src/lib/home/api/preferredBrandApi.js
new file mode 100644
index 00000000..f289f387
--- /dev/null
+++ b/src/lib/home/api/preferredBrandApi.js
@@ -0,0 +1,8 @@
+import odooApi from "@/core/api/odooApi"
+
+const preferredBrandApi = async () => {
+  const dataPreferredBrands = await odooApi('GET', '/api/v1/manufacture?level=prioritas')
+  return dataPreferredBrands
+}
+
+export default preferredBrandApi
+\ No newline at end of file
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
new file mode 100644
index 00000000..0bca9846
--- /dev/null
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -0,0 +1,28 @@
+import ProductSlider from "@/lib/product/components/ProductSlider"
+import useCategoryHome from "../hooks/useCategoryHome"
+import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton"
+
+const CategoryHome = ({ id }) => {
+  const { categoryHome } = useCategoryHome({ id })
+  
+  return (
+    <div className="p-4 relative bg-yellow_r-2">
+      { categoryHome.data ? (
+        <ProductSlider 
+          products={{
+            products: categoryHome.data?.[0].products,
+            banner: {
+              image: categoryHome.data?.[0].image,
+              name: categoryHome.data?.[0].name,
+              url: `/shop/search?category=${categoryHome.data?.[0].name}`
+            }
+          }} 
+          simpleTitle
+          bannerMode
+        />
+      ) : <PopularProductSkeleton /> }
+    </div>
+  )
+}
+
+export default CategoryHome
+\ No newline at end of file
diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx
new file mode 100644
index 00000000..4cbbd1fc
--- /dev/null
+++ b/src/lib/home/components/CategoryHomeId.jsx
@@ -0,0 +1,19 @@
+import { LazyLoadComponent } from "react-lazy-load-image-component"
+import useCategoryHomeId from "../hooks/useCategoryHomeId"
+import CategoryHome from "./CategoryHome"
+
+const CategoryHomeId = () => {
+  const { categoryHomeIds } = useCategoryHomeId()
+
+  return (
+    <div className="flex flex-col gap-y-6">
+      { categoryHomeIds.data?.map((id) => (
+        <LazyLoadComponent key={id}>
+          <CategoryHome id={id} />
+        </LazyLoadComponent>
+      )) }
+    </div>
+  )
+}
+
+export default CategoryHomeId
+\ No newline at end of file
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
new file mode 100644
index 00000000..604ca8ac
--- /dev/null
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -0,0 +1,50 @@
+import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton"
+import useHeroBanner from "../hooks/useHeroBanner"
+import Image from "@/core/components/elements/Image/Image"
+
+// Swiper
+import { Swiper, SwiperSlide } from "swiper/react"
+import { Pagination, Autoplay } from "swiper"
+import "swiper/css"
+import "swiper/css/pagination"
+import "swiper/css/autoplay"
+
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
+const HeroBanner = () => {
+  const { heroBanners } = useHeroBanner()
+  
+  return (
+    <div className="min-h-[200px]">
+      { heroBanners.isLoading && <ImageSkeleton /> }
+      { !heroBanners.isLoading && (
+        <Swiper
+          slidesPerView={1}
+          pagination={swiperBanner.pagination} 
+          modules={swiperBanner.modules}
+          autoplay={swiperBanner.autoplay}
+          className="border-b border-gray_r-6"
+        >
+          { heroBanners.data?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image 
+                src={banner.image}
+                alt={banner.name}
+                className="w-full h-auto"
+              />
+            </SwiperSlide>
+          )) }
+        </Swiper>
+      ) }
+    </div>
+  )
+}
+
+export default HeroBanner
+\ No newline at end of file
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
new file mode 100644
index 00000000..87e47218
--- /dev/null
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -0,0 +1,24 @@
+import { Swiper, SwiperSlide } from "swiper/react"
+import usePopularProduct from "../hooks/usePopularProduct"
+import ProductCard from "@/lib/product/components/ProductCard"
+import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton"
+import ProductSlider from "@/lib/product/components/ProductSlider"
+
+const PopularProduct = () => {
+  const { popularProducts } = usePopularProduct()
+  
+  return (
+    <div className="px-4">
+      <div className="font-medium mb-4">Produk Populer</div>
+      { popularProducts.isLoading && <PopularProductSkeleton /> }
+      { !popularProducts.isLoading && (
+        <ProductSlider 
+          products={popularProducts.data}
+          simpleTitle
+        />
+      ) }
+    </div>
+  )
+}
+
+export default PopularProduct
+\ No newline at end of file
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
new file mode 100644
index 00000000..3d3b1b69
--- /dev/null
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -0,0 +1,30 @@
+import { Swiper, SwiperSlide } from "swiper/react"
+import usePreferredBrand from "../hooks/usePreferredBrand"
+import PreferredBrandSkeleton from "./Skeleton/PreferredBrandSkeleton"
+import BrandCard from "@/lib/brand/components/BrandCard"
+
+const PreferredBrand = () => {
+  const { preferredBrands } = usePreferredBrand()
+  
+  return (
+    <div className="px-4">
+      <div className="font-medium mb-4">Brand Pilihan</div>
+      { preferredBrands.isLoading && <PreferredBrandSkeleton /> }
+      { !preferredBrands.isLoading && (
+        <Swiper 
+          slidesPerView={3.5} 
+          spaceBetween={8}
+          freeMode 
+        >
+          { preferredBrands.data?.manufactures.map((brand) => (
+            <SwiperSlide key={brand.id}>
+              <BrandCard brand={brand} />
+            </SwiperSlide>
+          )) }
+        </Swiper>
+      ) }
+    </div>
+  )
+}
+
+export default PreferredBrand
+\ No newline at end of file
diff --git a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx
new file mode 100644
index 00000000..c5b0fcaa
--- /dev/null
+++ b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx
@@ -0,0 +1,10 @@
+import ProductCardSkeleton from "@/core/components/elements/Skeleton/ProductCardSkeleton"
+
+const PopularProductSkeleton = () => (
+  <div className="grid grid-cols-2 gap-x-3">
+    <ProductCardSkeleton />
+    <ProductCardSkeleton />
+  </div>
+)
+
+export default PopularProductSkeleton
+\ No newline at end of file
diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
new file mode 100644
index 00000000..6bdd3c82
--- /dev/null
+++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
@@ -0,0 +1,12 @@
+import BrandSkeleton from "@/core/components/elements/Skeleton/BrandSkeleton"
+
+const PreferredBrandSkeleton = () => (
+  <div className="grid grid-cols-4 gap-x-3">
+    <BrandSkeleton />
+    <BrandSkeleton />
+    <BrandSkeleton />
+    <BrandSkeleton />
+  </div>
+)
+
+export default PreferredBrandSkeleton
+\ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryHome.js b/src/lib/home/hooks/useCategoryHome.js
new file mode 100644
index 00000000..14ef2a0f
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryHome.js
@@ -0,0 +1,13 @@
+import categoryHomeApi from "../api/categoryHomeApi"
+import { useQuery } from "react-query"
+
+const useCategoryHome = ({ id }) => {
+  const fetchCategoryHome = async () => await categoryHomeApi({ id })
+  const { isLoading, data } = useQuery(`categoryHome-${id}`, fetchCategoryHome) 
+  
+  return {
+    categoryHome: { data, isLoading }
+  }
+}
+
+export default useCategoryHome
+\ No newline at end of file
diff --git a/src/lib/home/hooks/useCategoryHomeId.js b/src/lib/home/hooks/useCategoryHomeId.js
new file mode 100644
index 00000000..bb61b655
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryHomeId.js
@@ -0,0 +1,13 @@
+import categoryHomeIdApi from "../api/categoryHomeIdApi"
+import { useQuery } from "react-query"
+
+const useCategoryHomeId = () => {
+  const fetchCategoryHomeId = async () => await categoryHomeIdApi()
+  const { isLoading, data } = useQuery("categoryHomeId", fetchCategoryHomeId) 
+  
+  return {
+    categoryHomeIds: { data, isLoading }
+  }
+}
+
+export default useCategoryHomeId
+\ No newline at end of file
diff --git a/src/lib/home/hooks/useHeroBanner.js b/src/lib/home/hooks/useHeroBanner.js
new file mode 100644
index 00000000..a15dda60
--- /dev/null
+++ b/src/lib/home/hooks/useHeroBanner.js
@@ -0,0 +1,13 @@
+import heroBannerApi from "../api/heroBannerApi"
+import { useQuery } from "react-query"
+
+const useHeroBanner = () => {
+  const fetchHeroBanner = async () => await heroBannerApi()
+  const { isLoading, data } = useQuery("heroBanner", fetchHeroBanner) 
+  
+  return {
+    heroBanners: { data, isLoading }
+  }
+}
+
+export default useHeroBanner
+\ No newline at end of file
diff --git a/src/lib/home/hooks/usePopularProduct.js b/src/lib/home/hooks/usePopularProduct.js
new file mode 100644
index 00000000..f69c2f71
--- /dev/null
+++ b/src/lib/home/hooks/usePopularProduct.js
@@ -0,0 +1,13 @@
+import popularProductApi from "../api/popularProductApi"
+import { useQuery } from "react-query"
+
+const usePopularProduct = () => {
+  const fetchPopularProduct = async () => await popularProductApi()
+  const { data, isLoading } = useQuery('popularProduct', fetchPopularProduct)
+
+  return {
+    popularProducts: { data, isLoading }
+  }
+}
+
+export default usePopularProduct
+\ No newline at end of file
diff --git a/src/lib/home/hooks/usePreferredBrand.js b/src/lib/home/hooks/usePreferredBrand.js
new file mode 100644
index 00000000..4be9793e
--- /dev/null
+++ b/src/lib/home/hooks/usePreferredBrand.js
@@ -0,0 +1,13 @@
+import preferredBrandApi from "../api/preferredBrandApi"
+import { useQuery } from "react-query"
+
+const usePreferredBrand = () => {
+  const fetchPreferredBrand = async () => await preferredBrandApi()
+  const { data, isLoading } = useQuery('preferredBrand', fetchPreferredBrand)
+
+  return {
+    preferredBrands: { data, isLoading }
+  }
+}
+
+export default usePreferredBrand
+\ No newline at end of file