summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/pages/shop/cart.js116
1 files changed, 67 insertions, 49 deletions
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 16734065..6f61ffcb 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -41,23 +41,24 @@ export default function Cart() {
useEffect(() => {
const productsToProcess = products.filter((product) => product.to_process == true);
- if (products.length > 0) {
-
- let calculateTotalPriceBeforeTax = 0;
- let calculateTotalTaxAmount = 0;
- let calculateTotalDiscountAmount = 0;
- productsToProcess.forEach(product => {
- let priceBeforeTax = product.price.price / 1.11;
- calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
- calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
- calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
- });
- setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
- setTotalTaxAmount(calculateTotalTaxAmount);
- setTotalDiscountAmount(calculateTotalDiscountAmount);
- }
+ let calculateTotalPriceBeforeTax = 0;
+ let calculateTotalTaxAmount = 0;
+ let calculateTotalDiscountAmount = 0;
+ productsToProcess.forEach(product => {
+ let priceBeforeTax = product.price.price / 1.11;
+ calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
+ calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
+ calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
+ });
+ setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
+ setTotalTaxAmount(calculateTotalTaxAmount);
+ setTotalDiscountAmount(calculateTotalDiscountAmount);
}, [products]);
+ const getProductsToProcess = () => {
+ return products.filter((product) => product.to_process == true);
+ }
+
const updateCart = (productId, quantity) => {
let productIndexToUpdate = products.findIndex((product) => product.id == productId);
if (quantity != '') createOrUpdateItemCart(productId, quantity);
@@ -134,12 +135,10 @@ export default function Cart() {
<div className="p-4">
{/* [Start] Title */}
- <div className="flex gap-x-2 mb-8">
- <Link href="/" className="pr-2">
- <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
- </Link>
- <h1>Keranjang Saya</h1>
- </div>
+ <Link href="/" className="flex gap-x-2 mb-8">
+ <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
+ <h1 className="text-gray_r-12">Keranjang Saya</h1>
+ </Link>
{/* [End] Title */}
{/* [Start] Product List */}
@@ -148,7 +147,7 @@ export default function Cart() {
<div className="flex gap-x-3" key={index}>
<div className="w-4/12 flex items-center gap-x-2">
<button
- className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-6')}
+ className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')}
onClick={() => toggleProductToProcess(product.id)}
></button>
<LazyLoadImage effect="blur" src={product.parent.image ? product.parent.image : '/images/noimage.jpeg'} alt={product.parent.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
@@ -203,40 +202,59 @@ export default function Cart() {
{/* [End] Product List */}
{/* [Start] Review Order */}
- <div className="p-4 border border-gray_r-6 rounded-md mb-4">
- <h2>Ringkasan Pesanan</h2>
- <hr className="my-4 border-gray_r-6"/>
- <div className="flex flex-col gap-y-4">
- <div className="flex gap-x-2 justify-between">
- <p>Harga Sebelum PPN</p>
- <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+ {products.length > 0 ? (
+ <div className="p-4 border border-gray_r-6 rounded-md mb-4">
+ <div className="flex justify-between items-center">
+ <h2>Ringkasan Pesanan</h2>
+ {getProductsToProcess().length > 0 ? (
+ <p className="text-gray_r-11">{getProductsToProcess().length} Barang</p>
+ ) : ''}
</div>
- <div className="flex gap-x-2 justify-between">
- <p>PPN 11%</p>
- <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex flex-col gap-y-4">
+ <div className="flex gap-x-2 justify-between">
+ <p>Subtotal</p>
+ <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>PPN 11%</p>
+ <p className="font-medium">{currencyFormat(totalTaxAmount)}</p>
+ </div>
+ <div className="flex gap-x-2 justify-between">
+ <p>Total Diskon</p>
+ <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+ </div>
</div>
- <div className="flex gap-x-2 justify-between">
- <p>Total Diskon</p>
- <p className="font-medium text-red_r-11">- {currencyFormat(totalDiscountAmount)}</p>
+ <hr className="my-4 border-gray_r-6"/>
+ <div className="flex gap-x-2 justify-between mb-4">
+ <p>Total</p>
+ <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
</div>
+ <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
+ <p className="text-caption-2 text-gray_r-10 leading-5">
+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
+ </p>
</div>
- <hr className="my-4 border-gray_r-6"/>
- <div className="flex gap-x-2 justify-between mb-4">
- <p>Total Harga</p>
- <p className="font-medium text-yellow_r-11">{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}</p>
- </div>
- <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
- <p className="text-caption-2 text-gray_r-10 leading-5">
- Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
- </p>
- </div>
+ ) : ''}
{/* [End] Review Order */}
{/* [Start] Submit Button */}
- <div className="flex gap-x-3">
- <button className="flex-1 btn-light">Quotation (1)</button>
- <button className="flex-1 btn-yellow">Bayar (1)</button>
- </div>
+ {products.length > 0 ? (
+ <div className="flex gap-x-3">
+ <button
+ className="flex-1 btn-light"
+ disabled={getProductsToProcess().length == 0}
+ >
+ Quotation {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
+ </button>
+ <button
+ className="flex-1 btn-yellow"
+ disabled={getProductsToProcess().length == 0}
+ >
+ Bayar {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
+ </button>
+ </div>
+ ) : ''}
{/* [End] Submit Button */}
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 08:21:00 +0000