Add popular product and ready stock product in home

3 files changed, 77 insertions, 8 deletions

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 250a5c7d..360e11ff 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -32,6 +32,11 @@ export default function ProductCard({ data }) {
             </div>
           ) : ''}
           <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p>
+          {product.stock_total > 0 ? (
+            <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div>
+          ) : (
+            <div className="h-6"></div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/product/ProductSlider.js b/src/components/product/ProductSlider.js
new file mode 100644
index 00000000..26584d8a
--- /dev/null
+++ b/src/components/product/ProductSlider.js
@@ -0,0 +1,44 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import ProductCard from "../ProductCard";
+import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
+import "swiper/css";
+
+export default function ProductSlider({ products }) {
+  return (
+    <>
+      <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8}>
+        {products?.products?.map((product, index) => (
+          <SwiperSlide key={index}>
+            <ProductCard data={product} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      {products == null ? (
+        <div className="grid grid-cols-2 gap-x-4">
+          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+            <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full"></div>
+            <span className="sr-only">Loading...</span>
+          </div>
+          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+              <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full"></div>
+            <span className="sr-only">Loading...</span>
+          </div>
+        </div>
+      ) : ''}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 899626f5..dc8f5617 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,29 +5,41 @@ import { Pagination, Autoplay } from "swiper";
 import Header from "../components/Header";
 import { getOdoo } from "../helpers/apiOdoo";
 import "react-lazy-load-image-component/src/effects/blur.css";
-
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/autoplay";
+import ProductSlider from "../components/product/ProductSlider";
 
 export default function Home() {
-  const [heroBanners, setHeroBanners] = useState([]);
-  const [manufactures, setManufactures] = useState([]);
+  const [heroBanners, setHeroBanners] = useState(null);
+  const [manufactures, setManufactures] = useState(null);
+  const [readyStockProducts, setReadyStockProducts] = useState(null);
+  const [popularProducts, setPopularProducts] = useState(null);
 
   useEffect(() => {
-    setHeroBanners([]);
     const getHeroBanners = async () => {
       const dataHeroBanners = await getOdoo(`/api/v1/banner?type=index-a-1`);
       setHeroBanners(dataHeroBanners);
     }
     getHeroBanners();
 
-    setManufactures([]);
     const getManufactures = async () => {
       const dataManufactures = await getOdoo(`/api/v1/manufacture?level=prioritas`);
       setManufactures(dataManufactures);
     }
     getManufactures();
+    
+    const getReadyStockProducts = async () => {
+      const dataReadyStockProducts = await getOdoo(`/api/v1/product?ready_stock=1&limit=30`);
+      setReadyStockProducts(dataReadyStockProducts);
+    }
+    getReadyStockProducts();
+
+    const getPopularProducts = async () => {
+      const dataPopularProducts = await getOdoo(`/api/v1/product?manufactures=10&limit=30`);
+      setPopularProducts(dataPopularProducts);
+    }
+    getPopularProducts();
   }, []);
 
   return (
@@ -42,13 +54,13 @@ export default function Home() {
           ))
         }
       </Swiper>
-      <div className="mt-5 px-4">
-        <h2 className="text-gray-900 font-medium mb-3">Brand Pilihan</h2>
+      <div className="mt-6 px-4">
+        <h2 className="text-gray-900 font-semibold mb-3">Brand Pilihan</h2>
         <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
           {
             manufactures?.manufactures?.map((manufacture, index) => (
               <SwiperSlide key={index}>
-                <div className="border border-gray-300 p-2 rounded h-full">
+                <div className="border border-gray-300 p-1 rounded h-full">
                   <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
                 </div>
               </SwiperSlide>
@@ -56,6 +68,14 @@ export default function Home() {
           }
         </Swiper>
       </div>
+      <div className="mt-6 px-4 mb-6">
+        <h2 className="text-gray-900 font-semibold mb-3">Produk Ready Stock</h2>
+        <ProductSlider products={readyStockProducts} />
+      </div>
+      <div className="mt-6 px-4 mb-6">
+        <h2 className="text-gray-900 font-semibold mb-3">Produk Populer</h2>
+        <ProductSlider products={popularProducts} />
+      </div>
     </>
   )
 }