diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/cart | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/lib/cart')
| -rw-r--r-- | src/lib/cart/api/CartApi.js | 4 | ||||
| -rw-r--r-- | src/lib/cart/components/Cart.jsx | 216 | ||||
| -rw-r--r-- | src/lib/cart/hooks/useCart.js | 10 |
3 files changed, 117 insertions, 113 deletions
diff --git a/src/lib/cart/api/CartApi.js b/src/lib/cart/api/CartApi.js index 9a5b5053..33b61891 100644 --- a/src/lib/cart/api/CartApi.js +++ b/src/lib/cart/api/CartApi.js @@ -1,4 +1,4 @@ -import odooApi from "@/core/api/odooApi" +import odooApi from '@/core/api/odooApi' const CartApi = async ({ variantIds }) => { if (variantIds) { @@ -8,4 +8,4 @@ const CartApi = async ({ variantIds }) => { return null } -export default CartApi
\ No newline at end of file +export default CartApi 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 ( - <div className="pt-6"> - <div className="flex justify-between mb-4 px-4"> - <h1 className="font-semibold">Daftar Produk Belanja</h1> - <Link href="/">Cari Produk Lain</Link> + <div className='pt-6'> + <div className='flex justify-between mb-4 px-4'> + <h1 className='font-semibold'>Daftar Produk Belanja</h1> + <Link href='/'>Cari Produk Lain</Link> </div> - <div className="flex flex-col gap-y-4 px-4"> - { cart.isLoading && ( - <div className="flex justify-center my-4"> - <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" /> + <div className='flex flex-col gap-y-4 px-4'> + {cart.isLoading && ( + <div className='flex justify-center my-4'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> </div> - ) } - { products?.map((product) => ( - <div key={product?.id} className="flex"> + )} + {products?.map((product) => ( + <div key={product?.id} className='flex'> <button - type="button" - className="flex items-center mr-2" + type='button' + className='flex items-center mr-2' onClick={() => toggleSelected(product.id)} > - { !product?.selected && ( - <div className="w-5 h-5 border border-gray_r-11 rounded" /> - ) } - { product?.selected && ( - <CheckIcon className="border bg-red_r-10 w-5 text-white" /> - ) } + {!product?.selected && <div className='w-5 h-5 border border-gray_r-11 rounded' />} + {product?.selected && <CheckIcon className='border bg-red_r-10 w-5 text-white' />} </button> - <Link - href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} - className="w-[30%] flex-shrink-0" + <Link + href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} + className='w-[30%] flex-shrink-0' > - <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" /> + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md' + /> </Link> - <div className="flex-1 px-2 text-caption-1"> - <Link - href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} - className="line-clamp-2 leading-6 !text-gray_r-12 font-normal" + <div className='flex-1 px-2 text-caption-1'> + <Link + href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' > - { product?.parent?.name } + {product?.parent?.name} </Link> - <div className="text-gray_r-11 mt-1"> - { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''} + <div className='text-gray_r-11 mt-1'> + {product?.code}{' '} + {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''} </div> - { product?.price?.discountPercentage > 0 && ( - <div className="flex gap-x-1 items-center mt-3"> - <div className="text-gray_r-11 line-through text-caption-2"> + {product?.price?.discountPercentage > 0 && ( + <div className='flex gap-x-1 items-center mt-3'> + <div className='text-gray_r-11 line-through text-caption-2'> {currencyFormat(product?.price?.price)} </div> - <div className="badge-solid-red"> - {product?.price?.discountPercentage}% - </div> + <div className='badge-solid-red'>{product?.price?.discountPercentage}%</div> </div> - ) } - <div className="font-normal mt-1"> - { currencyFormat(product?.price?.priceDiscount) } + )} + <div className='font-normal mt-1'> + {currencyFormat(product?.price?.priceDiscount)} </div> - <div className="flex justify-between items-center mt-1"> - <div className="text-red_r-11 font-medium"> - { currencyFormat(product?.price?.priceDiscount * product?.quantity) } + <div className='flex justify-between items-center mt-1'> + <div className='text-red_r-11 font-medium'> + {currencyFormat(product?.price?.priceDiscount * product?.quantity)} </div> - <div className="flex gap-x-1"> - <button - type="button" - className="btn-light px-2 py-1" + <div className='flex gap-x-1'> + <button + type='button' + className='btn-light px-2 py-1' onClick={() => updateQuantity(1, product?.id, 'MINUS')} disabled={product?.quantity == 1} > - </button> - <input - className="form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center" - type="number" - value={product?.quantity} + <input + className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center' + type='number' + value={product?.quantity} onChange={(e) => updateQuantity(e.target.value, product?.id)} onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} /> - <button - type="button" - className="btn-light px-2 py-1" + <button + type='button' + className='btn-light px-2 py-1' onClick={() => updateQuantity(1, product?.id, 'PLUS')} > + </button> - <button - className="btn-red p-1 ml-1" + <button + className='btn-red p-1 ml-1' onClick={() => setDeleteConfirmation(product)} > - <TrashIcon className="w-4" /> + <TrashIcon className='w-4' /> </button> </div> </div> </div> </div> - )) } + ))} </div> - <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white"> - <div className="flex justify-between mb-4"> - <div className="text-gray_r-11"> - Total: - <span className="text-red_r-11 font-semibold"> - { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : '-' } + <div className='sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white'> + <div className='flex justify-between mb-4'> + <div className='text-gray_r-11'> + Total: + <span className='text-red_r-11 font-semibold'> + + {selectedProduct().length > 0 + ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) + : '-'} </span> </div> </div> - <div className="flex gap-x-3"> - <button - type="button" - className="btn-yellow flex-1" + <div className='flex gap-x-3'> + <button + type='button' + className='btn-yellow flex-1' disabled={selectedProduct().length == 0} onClick={() => router.push('/shop/quotation')} > Quotation </button> - <button - type="button" - className="btn-solid-red flex-1" + <button + type='button' + className='btn-solid-red flex-1' disabled={selectedProduct().length == 0} onClick={() => router.push('/shop/checkout')} > @@ -240,22 +243,23 @@ const Cart = () => { <BottomPopup active={deleteConfirmation} close={() => setDeleteConfirmation(null)} - title="Hapus dari Keranjang" + title='Hapus dari Keranjang' > - <div className="leading-7 text-gray_r-12/80"> - Apakah anda yakin menghapus barang <span className="underline">{deleteConfirmation?.name}</span> dari keranjang? + <div className='leading-7 text-gray_r-12/80'> + Apakah anda yakin menghapus barang{' '} + <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang? </div> - <div className="flex mt-6 gap-x-4"> - <button - className="btn-solid-red flex-1" - type="button" + <div className='flex mt-6 gap-x-4'> + <button + className='btn-solid-red flex-1' + type='button' onClick={() => deleteProduct(deleteConfirmation?.id)} > Ya, Hapus </button> - <button - className="btn-light flex-1" - type="button" + <button + className='btn-light flex-1' + type='button' onClick={() => setDeleteConfirmation(null)} > Batal @@ -266,4 +270,4 @@ const Cart = () => { ) } -export default Cart
\ No newline at end of file +export default Cart diff --git a/src/lib/cart/hooks/useCart.js b/src/lib/cart/hooks/useCart.js index 9eb01e74..bc1ea7ea 100644 --- a/src/lib/cart/hooks/useCart.js +++ b/src/lib/cart/hooks/useCart.js @@ -1,7 +1,7 @@ -import { getCart } from "@/core/utils/cart" -import { useQuery } from "react-query" -import _ from "lodash" -import CartApi from "../api/CartApi" +import { getCart } from '@/core/utils/cart' +import { useQuery } from 'react-query' +import _ from 'lodash' +import CartApi from '../api/CartApi' const useCart = ({ enabled }) => { const cart = getCart() @@ -14,4 +14,4 @@ const useCart = ({ enabled }) => { } } -export default useCart
\ No newline at end of file +export default useCart |
