cart refactor

2 files changed, 64 insertions, 15 deletions

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 (
     <div className="pt-6">
@@ -105,35 +117,38 @@ const Cart = () => {
         <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">
         { products?.map((product) => (
-          <div key={product.id} className="flex">
+          <div key={product?.id} className="flex">
             <button
               type="button" 
               className="flex items-center mr-2"
               onClick={() => toggleSelected(product.id)}
             >
-              { !product.selected && (
+              { !product?.selected && (
                 <div className="w-5 h-5 border border-gray_r-11 rounded" />
               ) }
-              { product.selected && (
+              { 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)} 
+              href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
               className="w-3/12 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-1">
               <Link 
-                href={createSlug('/shop/product/', product.parent.name, product.parent.id)} 
+                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 }</div>
+              <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">
@@ -149,35 +164,43 @@ const Cart = () => {
               </div>
               <div className="flex justify-between items-center mt-1">
                 <div className="text-red_r-11 font-medium">
-                  { currencyFormat(product?.price?.priceDiscount * product.quantity) }
+                  { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
                 </div>
                 <div className="flex gap-x-2">
                   <button 
                     type="button" 
                     className="btn-light px-2 py-1"
-                    onClick={() => updateQuantity(1, product.id, 'MINUS')}
+                    onClick={() => updateQuantity(1, product?.id, 'MINUS')}
                   >
                     -
                   </button>
                   <input 
                     className="form-input w-10 border-0 border-b rounded-none py-1 px-0 text-center" 
-                    value={product.quantity} 
-                    onChange={(e) => 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')}
                   />
                   <button 
                     type="button" 
                     className="btn-light px-2 py-1"
-                    onClick={() => updateQuantity(1, product.id, 'PLUS')}
+                    onClick={() => updateQuantity(1, product?.id, 'PLUS')}
                   >
                     +
                   </button>
+                  <button 
+                    className="btn-red p-1" 
+                    onClick={() => setDeleteConfirmation(product)}
+                  >
+                    <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">
@@ -203,6 +226,32 @@ const Cart = () => {
           </button>
         </div>
       </div>
+
+      <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 mb-2 gap-x-4">
+          <button 
+            className="btn-light flex-1" 
+            type="button"
+            onClick={() => setDeleteConfirmation(null)}
+          >
+            Batal
+          </button>
+          <button 
+            className="btn-solid-red flex-1" 
+            type="button"
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
+          >
+            Ya, Hapus
+          </button>
+        </div>
+      </BottomPopup>
     </div>
   )
 }
diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
index 39d29d4d..92f4e37d 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -245,7 +245,7 @@ const Product = ({ product }) => {
 }
 
 const TabButton = ({ children, active, ...props }) => {
-  const activeClassName = active ? 'text-red_r-11 border-b border-red_r-11' : 'text-gray_r-11'
+  const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11'
   return (
     <button 
       {...props}