From 4a615aae5f29ed8c0ad3631a8510df57b80cae94 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 15 Dec 2022 16:37:45 +0700 Subject: feature checbox add to process in cart --- src/pages/shop/cart.js | 138 +++++++++++++++++++++++++++++++-------- src/pages/shop/product/[slug].js | 8 ++- src/styles/globals.css | 53 +++++++++++---- 3 files changed, 158 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 5e7ff822..653f1ac4 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -2,18 +2,23 @@ import { useEffect, useState } from "react"; import Header from "../../components/Header"; import Layout from "../../components/Layout"; import Link from "../../components/Link"; -import { createOrUpdateItemCart, deleteItemCart, getCart, getItemCart } from "../../helpers/cart"; +import { createOrUpdateItemCart, deleteItemCart, getCart } from "../../helpers/cart"; import ChevronLeftIcon from "../../icons/chevron-left.svg"; import MinusIcon from "../../icons/minus.svg"; import PlusIcon from "../../icons/plus.svg"; +import TrashIcon from "../../icons/trash.svg"; import { LazyLoadImage } from "react-lazy-load-image-component"; - -import 'react-lazy-load-image-component/src/effects/blur.css'; import apiOdoo from "../../helpers/apiOdoo"; import currencyFormat from "../../helpers/currencyFormat"; +import 'react-lazy-load-image-component/src/effects/blur.css'; +import { createSlug } from "../../helpers/slug"; + export default function Cart() { const [products, setProducts] = useState([]); + const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0); + const [totalTaxAmount, setTotalTaxAmount] = useState(0); + const [totalDiscountAmount, setTotalDiscountAmount] = useState(0); const getProducts = async () => { let cart = getCart(); @@ -23,7 +28,8 @@ export default function Cart() { let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`); dataProducts = dataProducts.map((product) => ({ ...product, - quantity: cart[product.id].quantity + quantity: cart[product.id].quantity, + to_process: false })); setProducts(dataProducts); } @@ -33,13 +39,31 @@ export default function Cart() { getProducts(); }, []); + 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); + } + }, [products]); + const updateCart = (productId, quantity) => { let productIndexToUpdate = products.findIndex((product) => product.id == productId); if (quantity != '') createOrUpdateItemCart(productId, quantity); - setProducts((products) => { - products[productIndexToUpdate].quantity = quantity; - return [...products]; - }); + let productsToUpdate = products; + productsToUpdate[productIndexToUpdate].quantity = quantity; + setProducts([...productsToUpdate]); }; const blurQuantity = (productId, quantity) => { @@ -49,7 +73,9 @@ export default function Cart() { const updateQuantity = (productId, quantity) => { quantity = quantity == '' ? '' : parseInt(quantity); - updateCart(productId, quantity); + if (quantity > 0) { + updateCart(productId, quantity); + } }; const plusQuantity = (productId) => { @@ -61,15 +87,22 @@ export default function Cart() { const minusQuantity = (productId) => { let productIndexToUpdate = products.findIndex((product) => product.id == productId); let quantity = products[productIndexToUpdate].quantity - 1; - if (quantity <= 0) { - deleteItemCart(productId); - setProducts((products) => { - products.splice(productIndexToUpdate, 1); - return [...products]; - }); - } else { - updateCart(productId, quantity); - } + updateCart(productId, quantity); + } + + const deleteItem = (productId) => { + let productIndexToUpdate = products.findIndex((product) => product.id == productId); + let productsToUpdate = products; + productsToUpdate.splice(productIndexToUpdate, 1); + setProducts([...productsToUpdate]); + deleteItemCart(productId); + } + + const toggleProductToProcess = (productId) => { + let productIndexToUpdate = products.findIndex((product) => product.id == productId); + let productsToUpdate = products; + productsToUpdate[productIndexToUpdate].to_process = !productsToUpdate[productIndexToUpdate].to_process; + setProducts([...productsToUpdate]); } return ( @@ -86,14 +119,14 @@ export default function Cart() {
-
2
+
2

Pembayaran

-
3
+
3

Selesai

@@ -110,14 +143,18 @@ export default function Cart() { {/* [End] Title */} {/* [Start] Product List */} -
+
{products.map((product, index) => (
-
+
+
- + {product.parent.name}

{product.code ? product.code : '-'}

@@ -134,17 +171,27 @@ export default function Cart() {

{currencyFormat(product.quantity * product.price.price_discount)}

- + blurQuantity(product.id, e.target.value)} onChange={(e) => updateQuantity(product.id, e.target.value)} value={product.quantity} /> -
@@ -155,6 +202,43 @@ export default function Cart() {
{/* [End] Product List */} + {/* [Start] Review Order */} +
+

Ringkasan Pesanan

+
+
+
+

Harga Sebelum PPN

+

{currencyFormat(totalPriceBeforeTax)}

+
+
+

PPN 11%

+

{currencyFormat(totalTaxAmount)}

+
+
+

Total Diskon

+

- {currencyFormat(totalDiscountAmount)}

+
+
+
+
+

Total Harga

+

{currencyFormat(totalPriceBeforeTax + totalTaxAmount - totalDiscountAmount)}

+
+

*) Belum termasuk biaya pengiriman

+

+ Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui Syarat & Ketentuan yang berlaku +

+
+ {/* [End] Review Order */} + + {/* [Start] Submit Button */} +
+ + +
+ {/* [End] Submit Button */} +
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index cabda175..9bb76fb6 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -140,7 +140,13 @@ export default function ProductDetail({ product }) {
- +
diff --git a/src/styles/globals.css b/src/styles/globals.css index 3ecf04b8..1224d661 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -14,6 +14,16 @@ html, body { } @layer base { + input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + input[type=number] { + -moz-appearance:textfield; + } + h1, .h1 { @apply text-h-md @@ -104,34 +114,48 @@ html, body { ; } - .btn-yellow { - @apply + .btn-yellow, + .btn-light, + .btn-red { + @apply block w-fit p-3 - bg-yellow_r-9 - border-yellow_r-9 rounded border text-center + font-medium + ease-linear + duration-150 + ; + } + + .btn-yellow { + @apply + bg-yellow_r-9 + border-yellow_r-9 disabled:text-gray_r-10 disabled:bg-yellow_r-7 disabled:border-yellow_r-7 - ease-linear - duration-150 + ; + } + + .btn-red { + @apply + bg-red_r-3 + border-red_r-6 + text-red_r-12 + disabled:text-red_r-10 + disabled:bg-red_r-6 ; } .btn-light { @apply - block - w-fit - p-3 bg-gray_r-3 border-gray_r-6 - rounded - border - text-center + disabled:text-gray_r-10 + disabled:bg-gray_r-6 ; } @@ -299,7 +323,10 @@ html, body { } .lazy-load-image-background { - @apply !block; + @apply + !block + w-full + ; } .swiper-pagination-bullet-active { -- cgit v1.2.3