item cart delete confirmation

1 files changed, 43 insertions, 10 deletions

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 06ac94b4..0baaccd1 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -10,15 +10,21 @@ import TrashIcon from "../../icons/trash.svg";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import apiOdoo from "../../helpers/apiOdoo";
 import currencyFormat from "../../helpers/currencyFormat";
+import { createSlug } from "../../helpers/slug";
+import ConfirmAlert from "../../components/ConfirmAlert";
+import { toast } from "react-hot-toast";
 
 import 'react-lazy-load-image-component/src/effects/blur.css';
-import { createSlug } from "../../helpers/slug";
 
 export default function Cart() {
   const [products, setProducts] = useState([]);
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
   const [totalTaxAmount, setTotalTaxAmount] = useState(0);
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
+  const [deleteConfirmation, setDeleteConfirmation] = useState({
+    productId: null,
+    show: false
+  });
 
   const getProducts = async () => {
     let cart = getCart();
@@ -91,12 +97,29 @@ export default function Cart() {
     updateCart(productId, quantity);
   }
 
-  const deleteItem = (productId) => {
+  const showDeleteConfirmation = (productId) => {
+    setDeleteConfirmation({
+      productId: productId,
+      show: true
+    });
+  }
+
+  const hideDeleteConfirmation = () => {
+    setDeleteConfirmation({
+      productId: null,
+      show: false
+    });
+  }
+
+  const deleteItem = () => {
+    const productId = deleteConfirmation.productId;
     let productIndexToUpdate = products.findIndex((product) => product.id == productId);
     let productsToUpdate = products;
     productsToUpdate.splice(productIndexToUpdate, 1);
     setProducts([...productsToUpdate]);
     deleteItemCart(productId);
+    hideDeleteConfirmation();
+    toast.success('Berhasil menghapus 1 item dari keranjang', { duration: 1500 });
   }
 
   const toggleProductToProcess = (productId) => {
@@ -108,8 +131,15 @@ export default function Cart() {
 
   return (
     <>
+      <ConfirmAlert 
+        title="Apakah anda yakin menghapus item dari keranjang?"
+        show={deleteConfirmation.show}
+        onClose={hideDeleteConfirmation}
+        onSubmit={deleteItem}
+      />
       <Header title={`Keranjang Belanja - Indoteknik`}/>
       <Layout>
+
         {/* jsx-start: Progress Bar */}
         <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md">
           <div className="flex gap-x-2 items-center">
@@ -154,9 +184,12 @@ export default function Cart() {
               </div>
               <div className="w-8/12 flex flex-col">
                 <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
-                  {product.parent.name} {product.attributes.length > 0 ? `- ${product.attributes.join(', ')}` : ''}
+                  {product.parent.name}
                 </Link>
-                <p className="text-caption-1 text-gray_r-11 mt-1">{product.code ? product.code : '-'}</p>
+                <p className="text-caption-1 text-gray_r-11 mt-1">
+                  {product.code || '-'}
+                  {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
+                </p>
                 <div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
                   <p className="text-caption-1 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
                   {product.price.discount_percentage > 0 ? (
@@ -169,15 +202,15 @@ export default function Cart() {
                 </div>
                 <div className="flex items-center">
                   <p className="mr-auto text-caption-1 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
-                  <div className="flex gap-x-2">
+                  <div className="flex gap-x-2 items-center">
                     <button 
-                      className="btn-red p-1 rounded"
-                      onClick={() => deleteItem(product.id)}
+                      className="btn-red p-2 rounded"
+                      onClick={() => showDeleteConfirmation(product.id)}
                     >
                       <TrashIcon className="stroke-red_r-12 w-3"/>
                     </button>
                     <button 
-                      className="btn-light p-1 rounded" 
+                      className="btn-light p-2 rounded" 
                       disabled={product.quantity == 1} 
                       onClick={() => minusQuantity(product.id)}
                     >
@@ -190,7 +223,7 @@ export default function Cart() {
                       onChange={(e) => updateQuantity(product.id, e.target.value)} 
                       value={product.quantity} 
                     />
-                    <button className="btn-light p-1 rounded" onClick={() => plusQuantity(product.id)}>
+                    <button className="btn-light p-2 rounded" onClick={() => plusQuantity(product.id)}>
                       <PlusIcon className="stroke-gray_r-12 w-3"/>
                     </button>
                   </div>
@@ -207,7 +240,7 @@ export default function Cart() {
               <div className="flex justify-between items-center">
                 <h2>Ringkasan Pesanan</h2>
                 {getProductsToProcess().length > 0 ? (
-                  <p className="text-gray_r-11">{getProductsToProcess().length} Barang</p>
+                  <p className="text-gray_r-11 text-caption-1">{getProductsToProcess().length} Barang</p>
                 ) : ''}
               </div>
               <hr className="my-4 border-gray_r-6"/>