get dan delete cart

3 files changed, 521 insertions, 3 deletions

diff --git a/src/lib/cart/api/CartApi.js b/src/lib/cart/api/CartApi.js
index 7683a935..038479f8 100644
--- a/src/lib/cart/api/CartApi.js
+++ b/src/lib/cart/api/CartApi.js
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
 
-const CartApi = async ({ variantIds }) => {
+export const CartApi = async ({ variantIds }) => {
   if (variantIds) {
     const dataCart = await odooApi('GET', `/api/v2/product_variant/${variantIds}`)
     return dataCart
@@ -8,4 +9,11 @@ const CartApi = async ({ variantIds }) => {
   return null
 }
 
-export default CartApi
+// export default CartApi
+
+export const getCartApi = async () => {
+  const id = getAuth()?.id
+  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
+
+  return cart
+}
\ No newline at end of file
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 718541af..561a0064 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -19,14 +19,27 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 
+
+const { useQuery } = require('react-query')
+const { getCartApi } = require('../api/CartApi')
+
 const Cart = () => {
   const router = useRouter()
   const [products, setProducts] = useState(null)
   const auth = useAuth()
+  const { data: listCart } = useQuery('listCart', getCartApi)
 
   useEffect(() => {
     if (!auth) return
   }, [auth])
+
+  useEffect(() => {
+    if(listCart){
+      setProducts(listCart.products)
+    }
+  }, [listCart])
+
+  console.log('product', products)
   const { cart } = useCart({ enabled: !products })
 
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
diff --git a/src/lib/cart/components/CartOld.jsx b/src/lib/cart/components/CartOld.jsx
new file mode 100644
index 00000000..718541af
--- /dev/null
+++ b/src/lib/cart/components/CartOld.jsx
@@ -0,0 +1,497 @@
+import Link from '@/core/components/elements/Link/Link'
+import useCart from '../hooks/useCart'
+import Image from '@/core/components/elements/Image/Image'
+import NextImage from 'next/image'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { useEffect, useState } from 'react'
+import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { CheckIcon, 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 Alert from '@/core/components/elements/Alert/Alert'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import ProductCard from '@/lib/product/components/ProductCard'
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import useAuth from '@/core/hooks/useAuth'
+
+const Cart = () => {
+  const router = useRouter()
+  const [products, setProducts] = useState(null)
+  const auth = useAuth()
+
+  useEffect(() => {
+    if (!auth) return
+  }, [auth])
+  const { cart } = useCart({ enabled: !products })
+
+  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
+  const [totalTaxAmount, setTotalTaxAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+
+  const [deleteConfirmation, setDeleteConfirmation] = useState(null)
+
+  const [productRecomendation, setProductRecomendation] = useState(null)
+
+  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])
+
+  useEffect(() => {
+    const LoadProductSimilar = async () => {
+      const randProductIndex = Math.floor(Math.random() * products.length)
+      const productLoad = await productSearchApi({
+        query: `q=${products?.[randProductIndex].parent.name}&limit=10&operation=OR`
+      })
+
+      setProductRecomendation(productLoad)
+    }
+    if (products?.length > 0 && !productRecomendation) LoadProductSimilar()
+  }, [products, productRecomendation])
+
+  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 != '' && value > 0) return
+        quantity = 1
+        break
+      default:
+        quantity = value != '' && value < 1 ? 1 : 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)
+  }
+
+  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 (
+    <>
+      <BottomPopup
+        active={deleteConfirmation}
+        close={() => setDeleteConfirmation(null)}
+        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>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
+          >
+            Ya, Hapus
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setDeleteConfirmation(null)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+
+      <MobileView>
+        <div className='pt-4'>
+          <div className='flex justify-between mb-4 px-4'>
+            <h1 className='font-semibold'>Keranjang</h1>
+            <Link href='/'>Cari Produk Lain</Link>
+          </div>
+
+          <div className='flex flex-col gap-y-4 h-screen'>
+            {cart.isLoading && (
+              <div className='flex justify-center my-4'>
+                <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+              </div>
+            )}
+
+            {!cart.isLoading && (!products || products?.length == 0) && (
+              <div className='px-4'>
+                <Alert className='text-center my-2' type='info'>
+                  Keranjang belanja anda masih kosong
+                </Alert>
+              </div>
+            )}
+
+            {products?.map((product) => (
+              <div key={product?.id} className='flex mx-4'>
+                <input
+                  type='checkbox'
+                  onClick={() => toggleSelected(product.id)}
+                  checked={product?.selected}
+                  className='mr-2 accent-danger-500 w-4'
+                />
+
+                <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'
+                  />
+                </Link>
+                <div className='flex-1 px-2 text-caption-2'>
+                  <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}
+                  </Link>
+                  <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'>
+                        {currencyFormat(product?.price?.price)}
+                      </div>
+                      <div className='badge-solid-red'>{product?.price?.discountPercentage}%</div>
+                    </div>
+                  )}
+                  <div className='font-normal mt-1'>
+                    {currencyFormat(product?.price?.priceDiscount)}
+                  </div>
+                  <div className='flex justify-between items-center mt-1'>
+                    <div className='text-danger-500 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'
+                        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}
+                        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'
+                        onClick={() => updateQuantity(1, product?.id, 'PLUS')}
+                      >
+                        +
+                      </button>
+                      <button
+                        className='btn-red p-1 ml-1'
+                        onClick={() => setDeleteConfirmation(product)}
+                      >
+                        <TrashIcon className='w-4' />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            <div className='sticky bottom-0 left-0 w-full p-4 mt-auto 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-danger-500 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'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
+                >
+                  Quotation
+                </button>
+                <button
+                  type='button'
+                  className='btn-solid-red flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto py-10 grid grid-cols-12'>
+          <div className='col-span-9 border border-gray_r-6 rounded bg-white p-4 pt-6'>
+            <h1 className='text-title-sm font-semibold mb-6'>Keranjang</h1>
+
+            <table className='table-cart'>
+              <thead>
+                <tr>
+                  <th colSpan={2}>Nama Produk</th>
+                  <th>Jumlah</th>
+                  <th>Harga</th>
+                  <th>Subtotal</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {cart.isLoading && (
+                  <tr>
+                    <td colSpan={6}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!cart.isLoading && (!products || products?.length == 0) && (
+                  <tr>
+                    <td colSpan={6}>Keranjang belanja anda masih kosong</td>
+                  </tr>
+                )}
+                {products &&
+                  products?.map((product) => (
+                    <tr key={product.id}>
+                      <td>
+                        <input
+                          type='checkbox'
+                          onClick={() => toggleSelected(product.id)}
+                          checked={product?.selected}
+                          className='accent-danger-500 w-4'
+                        />
+                      </td>
+                      <td className='flex'>
+                        <Link
+                          href={createSlug(
+                            '/shop/product/',
+                            product?.parent.name,
+                            product?.parent.id
+                          )}
+                          className='w-[20%] flex-shrink-0'
+                        >
+                          <Image
+                            src={product?.parent?.image}
+                            alt={product?.name}
+                            className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                          />
+                        </Link>
+                        <div className='px-2 text-left'>
+                          <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}
+                          </Link>
+                          <div className='text-gray_r-11 mt-2'>
+                            {product?.code}{' '}
+                            {product?.attributes.length > 0
+                              ? `| ${product?.attributes.join(', ')}`
+                              : ''}
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <input
+                          className='form-input w-16 py-2 text-center bg-gray_r-1'
+                          type='number'
+                          value={product?.quantity}
+                          onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                          onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                        />
+                      </td>
+                      <td>
+                        {product?.price?.discountPercentage > 0 && (
+                          <div className='flex gap-x-1 items-center justify-center mt-3'>
+                            <div className='text-gray_r-11 line-through text-caption-1'>
+                              {currencyFormat(product?.price?.price)}
+                            </div>
+                            <div className='badge-solid-red'>
+                              {product?.price?.discountPercentage}%
+                            </div>
+                          </div>
+                        )}
+                        <div className='font-normal mt-1'>
+                          {currencyFormat(product?.price?.priceDiscount)}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='text-danger-500 font-medium'>
+                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='flex justify-center items-center h-full'>
+                          <button
+                            className='btn-red p-1 ml-1'
+                            onClick={() => setDeleteConfirmation(product)}
+                          >
+                            <TrashIcon className='w-4' />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+
+            <div className='pt-2 pb-6 flex items-center gap-x-3'>
+              <NextImage
+                src='/images/logo-question.png'
+                alt='Logo Question Indoteknik'
+                width={60}
+                height={60}
+              />
+              <div className='text-gray_r-12/90'>
+                Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
+                <span>
+                  {' '}
+                  <a href={whatsappUrl()} className='text-danger-500'>
+                    Hubungi Kami
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className='col-span-3 pl-4'>
+            <div className='sticky top-48 w-full p-4 rounded border border-gray_r-6 bg-white'>
+              <h1 className='text-title-sm font-semibold mb-6'>Ringkasan Belanja</h1>
+              <div className='flex justify-between mb-4'>
+                <div className='text-gray_r-11'>
+                  Total:
+                  <span className='text-danger-500 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'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
+                >
+                  Quotation
+                </button>
+                <button
+                  type='button'
+                  className='btn-solid-red flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className='col-span-9 pt-2 pb-6 mt-6'>
+            <h1 className='text-title-sm font-semibold mb-6'>Produk Yang Mungkin Kamu Suka</h1>
+            <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
+              {productRecomendation &&
+                productRecomendation.response.products.map((product) => (
+                  <ProductCard product={product} key={product.id} />
+                ))}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+export default Cart