no message

5 files changed, 40 insertions, 13 deletions

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 41d6c2f6..34cdf857 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -13,6 +13,7 @@ function MyApp({ Component, pageProps }) {
         position="top-center"
         toastOptions={{
           duration: 3000,
+          className: 'border border-gray_r-8'
         }}
       />
       <NextProgress color="#D7A30A" options={{ showSpinner: false }} />
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index b04d2715..a2f05cfa 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Filter from "../../../components/Filter";
 import Header from "../../../components/Header";
 import Layout from "../../../components/Layout";
@@ -58,6 +58,7 @@ export default function BrandDetail({
   const productFound = searchResults.response.numFound;
 
   const [activeFilter, setActiveFilter] = useState(false);
+  const [filterCount, setFilterCount] = useState(0);
 
   const route = () => {
     let route = `/shop/brands/${slug}`;
@@ -68,6 +69,14 @@ export default function BrandDetail({
     return route;
   }
 
+  useEffect(() => {
+    let calculateFilterCount = 0;
+    if (category) calculateFilterCount++;
+    if (price_from || price_to) calculateFilterCount++;
+    if (order_by) calculateFilterCount++;
+    setFilterCount(calculateFilterCount);
+  }, [category, price_from, price_to, order_by]);
+
   return (
     <>
       <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} />
@@ -85,9 +94,6 @@ export default function BrandDetail({
       />
       <Layout>
         <div className="p-4">
-          <button className="btn-light py-2 flex items-center gap-x-2 mb-2" onClick={() => setActiveFilter(true)}>
-            <FilterIcon className="w-4 h-4" /> <span>Filter</span>
-          </button>
           <h1 className="mb-2">Produk</h1>
           <div className="text-caption-1 mb-4">
             {productFound > 0 ? (
@@ -106,6 +112,9 @@ export default function BrandDetail({
               </>
             ) : 'Mungkin yang anda cari'}
           </div>
+          <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}>
+            <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span>
+          </button>
           <div className="grid grid-cols-2 gap-3">
             {searchResults.response.products.map((product) => (
               <ProductCard key={product.id} data={product} />
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 0baaccd1..fe31e7c9 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -80,9 +80,7 @@ export default function Cart() {
 
   const updateQuantity = (productId, quantity) => {
     quantity = quantity == '' ? '' : parseInt(quantity);
-    if (quantity > 0) {
-      updateCart(productId, quantity);
-    }
+    updateCart(productId, quantity);
   };
 
   const plusQuantity = (productId) => {
@@ -119,7 +117,7 @@ export default function Cart() {
     setProducts([...productsToUpdate]);
     deleteItemCart(productId);
     hideDeleteConfirmation();
-    toast.success('Berhasil menghapus 1 item dari keranjang', { duration: 1500 });
+    toast.success('Berhasil menghapus 1 barang dari keranjang', { duration: 1500 });
   }
 
   const toggleProductToProcess = (productId) => {
@@ -132,7 +130,8 @@ export default function Cart() {
   return (
     <>
       <ConfirmAlert 
-        title="Apakah anda yakin menghapus item dari keranjang?"
+        title="Hapus barang dari keranjang"
+        caption="Apakah anda yakin menghapus barang dari keranjang?"
         show={deleteConfirmation.show}
         onClose={hideDeleteConfirmation}
         onSubmit={deleteItem}
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index de52eb72..2b54a1e0 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -83,10 +83,18 @@ export default function ProductDetail({ product }) {
   }
 
   let addItemToCart = () => {
+    if (product.variant_total > 1 && !selectedVariant) {
+      toast.error('Pilih varian terlebih dahulu untuk menambahkan ke keranjang', { duration: 2000 });
+      return false;
+    }
+
     if (quantity > 0) {
       toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 });
       createOrUpdateItemCart(activeVariant.id, parseInt(quantity));
+    } else {
+      toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 });
     }
+
     return true;
   }
 
@@ -101,7 +109,7 @@ export default function ProductDetail({ product }) {
           </Link>
           <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
 
-          {product.variant_total > 1 && !selectedVariant ? (
+          {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? (
             <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p>
           ) : ''}
 
@@ -145,7 +153,7 @@ export default function ProductDetail({ product }) {
             <button 
               className="btn-yellow w-full" 
               onClick={addItemToCart} 
-              disabled={(product.lowest_price.price == 0 ? true : false) || (product.variant_total > 1 && !selectedVariant)}
+              disabled={(product.lowest_price.price == 0 ? true : false)}
             >
               + Keranjang
             </button>
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 404685d1..a0a916fc 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -4,7 +4,7 @@ import Layout from "../../components/Layout";
 import Pagination from "../../components/Pagination";
 import ProductCard from "../../components/ProductCard";
 import FilterIcon from "../../icons/filter.svg";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Filter from "../../components/Filter";
 
 export async function getServerSideProps(context) {
@@ -48,6 +48,7 @@ export default function ShopSearch({
 
   // Variable for <Filter/> props state
   const [activeFilter, setActiveFilter] = useState(false);
+  const [filterCount, setFilterCount] = useState(0);
 
   const route = () => {
     let route = `/shop/search?q=${q}`;
@@ -59,6 +60,15 @@ export default function ShopSearch({
     return route;
   }
 
+  useEffect(() => {
+    let calculateFilterCount = 0;
+    if (brand) calculateFilterCount++;
+    if (category) calculateFilterCount++;
+    if (price_from || price_to) calculateFilterCount++;
+    if (order_by) calculateFilterCount++;
+    setFilterCount(calculateFilterCount);
+  }, [brand, category, price_from, price_to, order_by]);
+
   return (
     <>
       <Header title={`Jual ${q} - Indoteknik`} />
@@ -94,7 +104,7 @@ export default function ShopSearch({
             ) : 'Mungkin yang anda cari'}
           </div>
           <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}>
-            <FilterIcon className="w-4 h-4" /> <span>Filter</span>
+            <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span>
           </button>
           <div className="grid grid-cols-2 gap-3">
             {searchResults.response.products.map((product) => (