summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json1
-rw-r--r--src/components/ConfirmAlert.js7
-rw-r--r--src/components/Header.js8
-rw-r--r--src/components/ProductCard.js17
-rw-r--r--src/icons/chevron-right.svg2
-rw-r--r--src/pages/_app.js1
-rw-r--r--src/pages/shop/brands/[slug].js17
-rw-r--r--src/pages/shop/cart.js9
-rw-r--r--src/pages/shop/product/[slug].js12
-rw-r--r--src/pages/shop/search.js14
-rw-r--r--src/styles/globals.css8
11 files changed, 67 insertions, 29 deletions
diff --git a/package.json b/package.json
index 9d8e529f..bde091d5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "@heroicons/react": "^2.0.13",
"axios": "^1.1.3",
"cookies-next": "^2.1.1",
"framer-motion": "^7.6.7",
diff --git a/src/components/ConfirmAlert.js b/src/components/ConfirmAlert.js
index 3a8f796d..27155011 100644
--- a/src/components/ConfirmAlert.js
+++ b/src/components/ConfirmAlert.js
@@ -1,5 +1,3 @@
-import { useState } from "react";
-
const ConfirmAlert = ({
title,
caption,
@@ -13,10 +11,11 @@ const ConfirmAlert = ({
<div className="menu-overlay" onClick={onClose}></div>
)}
<div className={"p-4 rounded border bg-white border-gray_r-6 fixed top-[50%] left-[50%] translate-x-[-50%] z-[70] w-[80%] translate-y-[-50%] " + (show ? "block" : "hidden")}>
- <p className="h2 mb-4">{title}</p>
+ <p className="h2 mb-2">{title}</p>
+ <p className="text-gray_r-11 mb-6">{caption}</p>
<div className="flex gap-x-2">
<button className="flex-1 btn-light" onClick={onClose}>Batal</button>
- <button className="flex-1 btn-yellow" onClick={onSubmit}>Hapus</button>
+ <button className="flex-1 btn-red" onClick={onSubmit}>Hapus</button>
</div>
</div>
</>
diff --git a/src/components/Header.js b/src/components/Header.js
index 88d4d368..fe76baba 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -84,26 +84,26 @@ export default function Header({ title }) {
<Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
<span>Profil Saya</span>
<div className="ml-auto">
- <ChevronRightIcon className="stroke-gray-700" />
+ <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
</div>
</Link>
) : ''}
<Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
<span>Semua Brand</span>
<div className="ml-auto">
- <ChevronRightIcon className="stroke-gray-700" />
+ <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
</div>
</Link>
<Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}>
<span>Blog Indoteknik</span>
<div className="ml-auto">
- <ChevronRightIcon className="stroke-gray-700" />
+ <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
</div>
</Link>
<button className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}>
<span>Kategori</span>
<div className="ml-auto">
- <ChevronRightIcon className="stroke-gray-700" />
+ <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
</div>
</button>
</div>
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 604ee9e0..b8967cc8 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -2,6 +2,7 @@ import Link from "./Link";
import currencyFormat from "../helpers/currencyFormat";
import { createSlug } from "../helpers/slug";
import { LazyLoadImage } from "react-lazy-load-image-component";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
import 'react-lazy-load-image-component/src/effects/blur.css';
@@ -34,17 +35,27 @@ export default function ProductCard({ data }) {
<span className="badge-red">{product.lowest_price.discount_percentage}%</span>
</div>
) : ''}
+
{product.lowest_price.price_discount > 0 ? (
<p className="text-caption-1 text-gray_r-12 font-bold">
{currencyFormat(product.lowest_price.price_discount)}
</p>
) : (
- <a href="https://wa.me" className="py-2 rounded block text-sm border border-yellow-900 text-center">
- Tanya Harga
+ <a
+ href="https://wa.me"
+ target="_blank"
+ rel="noreferrer"
+ className="flex items-center gap-x-1 text-caption-1"
+ >
+ Tanya Harga <ChevronRightIcon className="text-yellow_r-11 w-5 h-5" />
</a>
)}
+
{product.stock_total > 0 ? (
- <div className="badge-green mt-2">Ready Stock {product.stock_total > 5 ? '> 5' : '< 5'}</div>
+ <div className="flex gap-x-1 mt-2">
+ <div className="badge-green">Ready Stock</div>
+ <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
+ </div>
) : ''}
</div>
</div>
diff --git a/src/icons/chevron-right.svg b/src/icons/chevron-right.svg
index fc5a76aa..eb58f2f2 100644
--- a/src/icons/chevron-right.svg
+++ b/src/icons/chevron-right.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-right">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg> \ No newline at end of file
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) => (
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b10e043a..c3776373 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -66,28 +66,28 @@ html, body {
.badge-red {
@apply
bg-red_r-5
- text-red_r-11
+ text-red_r-10
;
}
.badge-gray {
@apply
bg-gray_r-5
- text-gray_r-11
+ text-gray_r-10
;
}
.badge-yellow {
@apply
bg-yellow_r-5
- text-yellow_r-11
+ text-yellow_r-10
;
}
.badge-green {
@apply
bg-green_r-5
- text-green_r-11
+ text-green_r-10
;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 23:37:58 +0000