From f45dee703450c42521884f8e0da8ae49f652b8c6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Fri, 16 Dec 2022 11:22:45 +0700
Subject: item cart delete confirmation

---
 src/pages/_app.js                | 15 +++++-------
 src/pages/shop/brands.js         |  2 +-
 src/pages/shop/cart.js           | 53 ++++++++++++++++++++++++++++++++--------
 src/pages/shop/product/[slug].js |  4 ++-
 4 files changed, 53 insertions(+), 21 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 23172bfd..41d6c2f6 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,22 +1,19 @@
 import '../styles/globals.css';
 import NextProgress from 'next-progress';
-import { ToastContainer, Slide } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import { useRouter } from 'next/router';
 import { AnimatePresence } from 'framer-motion';
+import { Toaster } from "react-hot-toast";
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
 
   return (
     <>
-      <ToastContainer 
-        position='top-center'
-        autoClose={5000}
-        theme='light'
-        closeOnClick={false}
-        transition={Slide}
-        limit={1}
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          duration: 3000,
+        }}
       />
       <NextProgress color="#D7A30A" options={{ showSpinner: false }} />
       <AnimatePresence 
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 6c1f1816..af9ab59c 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -47,7 +47,7 @@ export default function Brands({ initialManufactures }) {
           <h1>Semua Brand di Indoteknik</h1>
           <div className="flex overflow-x-auto gap-x-2 py-2">
             {alphabets.map((alphabet, index) => (
-              <button key={index} className={"p-2 py-1 border bg-white border-gray-300 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+              <button key={index} className={"p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow_r-9 border-yellow_r-9 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
                 {alphabet}
               </button>
             ))}
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"/>
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 9bb76fb6..de52eb72 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -10,6 +10,7 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 import ProductSlider from "../../../components/product/ProductSlider";
 import Layout from "../../../components/Layout";
 import { createOrUpdateItemCart } from "../../../helpers/cart";
+import toast from "react-hot-toast";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -83,6 +84,7 @@ export default function ProductDetail({ product }) {
 
   let addItemToCart = () => {
     if (quantity > 0) {
+      toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 });
       createOrUpdateItemCart(activeVariant.id, parseInt(quantity));
     }
     return true;
@@ -143,7 +145,7 @@ export default function ProductDetail({ product }) {
             <button 
               className="btn-yellow w-full" 
               onClick={addItemToCart} 
-              disabled={(product.lowest_price.price == 0 ? true : false)}
+              disabled={(product.lowest_price.price == 0 ? true : false) || (product.variant_total > 1 && !selectedVariant)}
             >
               + Keranjang
             </button>
-- 
cgit v1.2.3