From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src/lib/cart/components/Cart.jsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/lib/cart/components/Cart.jsx (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx new file mode 100644 index 00000000..5f9ae1c0 --- /dev/null +++ b/src/lib/cart/components/Cart.jsx @@ -0,0 +1,30 @@ +import Link from "@/core/components/elements/Link/Link" +import useCart from "../hooks/useCart" +import Image from "@/core/components/elements/Image/Image" + +const Cart = () => { + const { cart } = useCart() + + return ( +
+
+

Daftar Produk Belanja

+ Cari Produk Lain +
+
+ { cart.data?.map((product) => ( +
+
+ {product?.name} +
+
+
{ product?.parent?.name }
+
+
+ )) } +
+
+ ) +} + +export default Cart \ No newline at end of file -- cgit v1.2.3 From d22df6bd30b8ed4bcfa938dcbbedc5fc376c2304 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 10:49:35 +0700 Subject: cart refactor --- src/lib/cart/components/Cart.jsx | 200 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 190 insertions(+), 10 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 5f9ae1c0..3dd54429 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -1,28 +1,208 @@ import Link from "@/core/components/elements/Link/Link" import useCart from "../hooks/useCart" import Image from "@/core/components/elements/Image/Image" +import currencyFormat from "@/core/utils/currencyFormat" +import { useEffect, useState } from "react" +import { getItemCart, updateItemCart } from "@/core/utils/cart" +import { CheckIcon, RectangleGroupIcon } from "@heroicons/react/24/outline" +import { createSlug } from "@/core/utils/slug" +import { useRouter } from "next/router" const Cart = () => { - const { cart } = useCart() + const router = useRouter() + const [ products, setProducts ] = useState(null) + const { cart } = useCart({ enabled: !products }) + + const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0) + const [ totalTaxAmount, setTotalTaxAmount ] = useState(0) + const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0) + + useEffect(() => { + if (cart.data && !products) { + const productsWithQuantity = cart.data.map((product) => { + const productInCart = getItemCart({ productId: product.id }) + if (!productInCart) return + return { + ...product, + quantity: productInCart.quantity, + selected: productInCart.selected + } + }) + setProducts(productsWithQuantity) + } + }, [cart, products]) + + useEffect(() => { + if (!products) return + + let calculateTotalPriceBeforeTax = 0 + let calculateTotalTaxAmount = 0 + let calculateTotalDiscountAmount = 0 + for (const product of products) { + if (product.quantity == '') continue + updateItemCart({ + productId: product.id, + quantity: product.quantity, + selected: product.selected + }) + + if (!product.selected) continue + let priceBeforeTax = product.price.price / 1.11 + calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity + calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity + calculateTotalDiscountAmount += (product.price.price - product.price.priceDiscount) * product.quantity + } + setTotalPriceBeforeTax(calculateTotalPriceBeforeTax) + setTotalTaxAmount(calculateTotalTaxAmount) + setTotalDiscountAmount(calculateTotalDiscountAmount) + }, [products]) + + const updateQuantity = (value, productId, operation = '') => { + let productIndex = products.findIndex((product) => product.id == productId) + if (productIndex < 0) return + + let productsToUpdate = products + let quantity = productsToUpdate[productIndex].quantity + if (value != '' && isNaN(parseInt(value))) return + value = value != '' ? parseInt(value) : '' + switch (operation) { + case 'PLUS': + quantity += value + break + case 'MINUS': + if ((quantity - value) < 1) return + quantity -= value + break + case 'BLUR': + if (value != '') return + quantity = 1 + break + default: + quantity = value + break + } + productsToUpdate[productIndex].quantity = quantity + setProducts([ ...productsToUpdate ]) + } + + const toggleSelected = (productId) => { + let productIndex = products.findIndex((product) => product.id == productId) + if (productIndex < 0) return + + let productsToUpdate = products + productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected + setProducts([ ...productsToUpdate ]) + } + + const selectedProduct = () => { + if (!products) return [] + return products.filter((product) => product.selected == true) + } return ( -
-
+
+

Daftar Produk Belanja

Cari Produk Lain
-
- { cart.data?.map((product) => ( +
+ { products?.map((product) => (
-
- {product?.name} -
-
-
{ product?.parent?.name }
+ + + {product?.name} + +
+ + { product?.parent?.name } + +
{ product.code }
+ { product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+
+ ) } +
+ { currencyFormat(product?.price?.priceDiscount) } +
+
+
+ { currencyFormat(product?.price?.priceDiscount * product.quantity) } +
+
+ + updateQuantity(e.target.value, product.id)} + onBlur={(e) => updateQuantity(e.target.value, product.id, 'BLUR')} + /> + +
+
)) }
+
+
+
+ Total: { currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) } +
+
+
+ + +
+
) } -- cgit v1.2.3 From 525166e62b793b351d1a6be2421c0a33b22f7b7b Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 11:35:25 +0700 Subject: cart refactor --- src/lib/cart/components/Cart.jsx | 77 ++++++++++++++++++++++++++++++++-------- 1 file changed, 63 insertions(+), 14 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 3dd54429..69b4ded4 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -3,10 +3,12 @@ import useCart from "../hooks/useCart" import Image from "@/core/components/elements/Image/Image" import currencyFormat from "@/core/utils/currencyFormat" import { useEffect, useState } from "react" -import { getItemCart, updateItemCart } from "@/core/utils/cart" -import { CheckIcon, RectangleGroupIcon } from "@heroicons/react/24/outline" +import { deleteItemCart, getItemCart, updateItemCart } from "@/core/utils/cart" +import { CheckIcon, RectangleGroupIcon, TrashIcon } from "@heroicons/react/24/outline" import { createSlug } from "@/core/utils/slug" import { useRouter } from "next/router" +import BottomPopup from "@/core/components/elements/Popup/BottomPopup" +import { toast } from "react-hot-toast" const Cart = () => { const router = useRouter() @@ -17,6 +19,8 @@ const Cart = () => { const [ totalTaxAmount, setTotalTaxAmount ] = useState(0) const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0) + const [ deleteConfirmation, setDeleteConfirmation ] = useState(null) + useEffect(() => { if (cart.data && !products) { const productsWithQuantity = cart.data.map((product) => { @@ -98,6 +102,14 @@ const Cart = () => { if (!products) return [] return products.filter((product) => product.selected == true) } + + const deleteProduct = (productId) => { + const productsToUpdate = products.filter((product) => product.id != productId) + deleteItemCart({ productId }) + setDeleteConfirmation(null) + setProducts([...productsToUpdate]) + toast.success('Berhasil menghapus barang dari keranjang') + } return (
@@ -105,35 +117,38 @@ const Cart = () => {

Daftar Produk Belanja

Cari Produk Lain
+
{ products?.map((product) => ( -
+
{product?.name}
{ product?.parent?.name } -
{ product.code }
+
+ { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''} +
{ product?.price?.discountPercentage > 0 && (
@@ -149,35 +164,43 @@ const Cart = () => {
- { currencyFormat(product?.price?.priceDiscount * product.quantity) } + { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
updateQuantity(e.target.value, product.id)} - onBlur={(e) => updateQuantity(e.target.value, product.id, 'BLUR')} + type="number" + value={product?.quantity} + onChange={(e) => updateQuantity(e.target.value, product?.id)} + onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} /> +
)) }
+
@@ -203,6 +226,32 @@ const Cart = () => {
+ + setDeleteConfirmation(null)} + title="Hapus dari Keranjang" + > +
+ Apakah anda yakin menghapus barang {deleteConfirmation?.name} dari keranjang? +
+
+ + +
+
) } -- cgit v1.2.3 From 58ab91f8a99a79e0dbae33cf71830e4d1646e264 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 12:00:29 +0700 Subject: cart refactor --- src/lib/cart/components/Cart.jsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 69b4ded4..0b6ea768 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -204,7 +204,10 @@ const Cart = () => {
- Total: { currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) } + Total: + + { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : ' - ' } +
@@ -235,20 +238,20 @@ const Cart = () => {
Apakah anda yakin menghapus barang {deleteConfirmation?.name} dari keranjang?
-
+
-- cgit v1.2.3 From fdefe7cfe899125a9bd553b542976eed0de919c1 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 13:09:22 +0700 Subject: fix --- src/lib/cart/components/Cart.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 0b6ea768..4b9dd41f 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -166,11 +166,12 @@ const Cart = () => {
{ currencyFormat(product?.price?.priceDiscount * product?.quantity) }
-
+
@@ -189,7 +190,7 @@ const Cart = () => { +
+ { cart.isLoading && ( +
+ +
+ ) } { products?.map((product) => (
{product?.name} @@ -182,7 +182,7 @@ const Cart = () => { - updateQuantity(e.target.value, product?.id)} @@ -213,7 +213,7 @@ const Cart = () => {
Total: - { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : ' - ' } +  { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : '-' }
-- cgit v1.2.3 From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 11:03:34 +0700 Subject: prettier --- src/lib/cart/components/Cart.jsx | 216 ++++++++++++++++++++------------------- 1 file changed, 110 insertions(+), 106 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index e7606582..df74bed6 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -1,26 +1,26 @@ -import Link from "@/core/components/elements/Link/Link" -import useCart from "../hooks/useCart" -import Image from "@/core/components/elements/Image/Image" -import currencyFormat from "@/core/utils/currencyFormat" -import { useEffect, useState } from "react" -import { deleteItemCart, getItemCart, updateItemCart } from "@/core/utils/cart" -import { CheckIcon, RectangleGroupIcon, TrashIcon } from "@heroicons/react/24/outline" -import { createSlug } from "@/core/utils/slug" -import { useRouter } from "next/router" -import BottomPopup from "@/core/components/elements/Popup/BottomPopup" -import { toast } from "react-hot-toast" -import Spinner from "@/core/components/elements/Spinner/Spinner" +import Link from '@/core/components/elements/Link/Link' +import useCart from '../hooks/useCart' +import Image from '@/core/components/elements/Image/Image' +import currencyFormat from '@/core/utils/currencyFormat' +import { useEffect, useState } from 'react' +import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart' +import { CheckIcon, RectangleGroupIcon, TrashIcon } from '@heroicons/react/24/outline' +import { createSlug } from '@/core/utils/slug' +import { useRouter } from 'next/router' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { toast } from 'react-hot-toast' +import Spinner from '@/core/components/elements/Spinner/Spinner' const Cart = () => { const router = useRouter() - const [ products, setProducts ] = useState(null) + const [products, setProducts] = useState(null) const { cart } = useCart({ enabled: !products }) - const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0) - const [ totalTaxAmount, setTotalTaxAmount ] = useState(0) - const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0) + const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0) + const [totalTaxAmount, setTotalTaxAmount] = useState(0) + const [totalDiscountAmount, setTotalDiscountAmount] = useState(0) - const [ deleteConfirmation, setDeleteConfirmation ] = useState(null) + const [deleteConfirmation, setDeleteConfirmation] = useState(null) useEffect(() => { if (cart.data && !products) { @@ -38,7 +38,7 @@ const Cart = () => { }, [cart, products]) useEffect(() => { - if (!products) return + if (!products) return let calculateTotalPriceBeforeTax = 0 let calculateTotalTaxAmount = 0 @@ -50,12 +50,13 @@ const Cart = () => { quantity: product.quantity, selected: product.selected }) - + if (!product.selected) continue - let priceBeforeTax = product.price.price / 1.11 + let priceBeforeTax = product.price.price / 1.11 calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity - calculateTotalDiscountAmount += (product.price.price - product.price.priceDiscount) * product.quantity + calculateTotalDiscountAmount += + (product.price.price - product.price.priceDiscount) * product.quantity } setTotalPriceBeforeTax(calculateTotalPriceBeforeTax) setTotalTaxAmount(calculateTotalTaxAmount) @@ -75,7 +76,7 @@ const Cart = () => { quantity += value break case 'MINUS': - if ((quantity - value) < 1) return + if (quantity - value < 1) return quantity -= value break case 'BLUR': @@ -87,7 +88,7 @@ const Cart = () => { break } productsToUpdate[productIndex].quantity = quantity - setProducts([ ...productsToUpdate ]) + setProducts([...productsToUpdate]) } const toggleSelected = (productId) => { @@ -96,7 +97,7 @@ const Cart = () => { let productsToUpdate = products productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected - setProducts([ ...productsToUpdate ]) + setProducts([...productsToUpdate]) } const selectedProduct = () => { @@ -111,124 +112,126 @@ const Cart = () => { setProducts([...productsToUpdate]) toast.success('Berhasil menghapus barang dari keranjang') } - + return ( -
-
-

Daftar Produk Belanja

- Cari Produk Lain +
+
+

Daftar Produk Belanja

+ Cari Produk Lain
-
- { cart.isLoading && ( -
- +
+ {cart.isLoading && ( +
+
- ) } - { products?.map((product) => ( -
+ )} + {products?.map((product) => ( +
- - {product?.name} + {product?.name} -
- + - { product?.parent?.name } + {product?.parent?.name} -
- { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''} +
+ {product?.code}{' '} + {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
- { product?.price?.discountPercentage > 0 && ( -
-
+ {product?.price?.discountPercentage > 0 && ( +
+
{currencyFormat(product?.price?.price)}
-
- {product?.price?.discountPercentage}% -
+
{product?.price?.discountPercentage}%
- ) } -
- { currencyFormat(product?.price?.priceDiscount) } + )} +
+ {currencyFormat(product?.price?.priceDiscount)}
-
-
- { currencyFormat(product?.price?.priceDiscount * product?.quantity) } +
+
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
-
- - updateQuantity(e.target.value, product?.id)} onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} /> - -
- )) } + ))}
-
-
-
- Total: - -  { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : '-' } +
+
+
+ Total: + +   + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'}
-
- - -
)} + + {!cart.isLoading && !products && ( + + Keranjang belanja anda masih kosong + + )} + {products?.map((product) => (
))} -
-
-
-
- Total: - -   - {selectedProduct().length > 0 - ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) - : '-'} - +
+
+
+ Total: + +   + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'} + +
+
+
+ +
-
-
- -
-- cgit v1.2.3 From 32f684cc40e66239451fcaa93ae2971b4bd86026 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 23:05:10 +0700 Subject: fix --- src/lib/cart/components/Cart.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index af2bec78..d0408ddf 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -129,9 +129,11 @@ const Cart = () => { )} {!cart.isLoading && (!products || products?.length == 0) && ( - - Keranjang belanja anda masih kosong - +
+ + Keranjang belanja anda masih kosong + +
)} {products?.map((product) => ( @@ -154,7 +156,7 @@ const Cart = () => { className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' /> -
+
Date: Wed, 22 Feb 2023 23:36:47 +0700 Subject: fix --- src/lib/cart/components/Cart.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/lib/cart/components') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index d0408ddf..6a503c0a 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -130,14 +130,20 @@ const Cart = () => { {!cart.isLoading && (!products || products?.length == 0) && (
- + Keranjang belanja anda masih kosong
)} {products?.map((product) => ( -
+