summaryrefslogtreecommitdiff
path: root/src/lib/cart
diff options
context:
space:
mode:
authorRafi Zadanly <zadanlyr@gmail.com>2023-02-22 11:03:34 +0700
committerRafi Zadanly <zadanlyr@gmail.com>2023-02-22 11:03:34 +0700
commitf66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch)
tree253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/cart
parent3c559031623649a67825ff47f34512f0eb946861 (diff)
prettier
Diffstat (limited to 'src/lib/cart')
-rw-r--r--src/lib/cart/api/CartApi.js4
-rw-r--r--src/lib/cart/components/Cart.jsx216
-rw-r--r--src/lib/cart/hooks/useCart.js10
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">
- &nbsp;{ 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'>
+ &nbsp;
+ {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