From f45dee703450c42521884f8e0da8ae49f652b8c6 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 16 Dec 2022 11:22:45 +0700 Subject: item cart delete confirmation --- src/components/ConfirmAlert.js | 26 ++++++++++++++++++++ src/pages/_app.js | 15 +++++------- src/pages/shop/brands.js | 2 +- src/pages/shop/cart.js | 53 ++++++++++++++++++++++++++++++++-------- src/pages/shop/product/[slug].js | 4 ++- src/styles/globals.css | 10 ++++---- 6 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 src/components/ConfirmAlert.js (limited to 'src') diff --git a/src/components/ConfirmAlert.js b/src/components/ConfirmAlert.js new file mode 100644 index 00000000..3a8f796d --- /dev/null +++ b/src/components/ConfirmAlert.js @@ -0,0 +1,26 @@ +import { useState } from "react"; + +const ConfirmAlert = ({ + title, + caption, + show, + onClose, + onSubmit, +}) => { + return ( + <> + {show && ( +
+ )} +
+

{title}

+
+ + +
+
+ + ); +}; + +export default ConfirmAlert; \ No newline at end of file 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 ( <> - Semua Brand di Indoteknik
{alphabets.map((alphabet, index) => ( - ))} 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 ( <> +
+ {/* jsx-start: Progress Bar */}
@@ -154,9 +184,12 @@ export default function Cart() {
- {product.parent.name} {product.attributes.length > 0 ? `- ${product.attributes.join(', ')}` : ''} + {product.parent.name} -

{product.code ? product.code : '-'}

+

+ {product.code || '-'} + {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''} +

{currencyFormat(product.price.price_discount)}

{product.price.discount_percentage > 0 ? ( @@ -169,15 +202,15 @@ export default function Cart() {

{currencyFormat(product.quantity * product.price.price_discount)}

-
+
@@ -207,7 +240,7 @@ export default function Cart() {

Ringkasan Pesanan

{getProductsToProcess().length > 0 ? ( -

{getProductsToProcess().length} Barang

+

{getProductsToProcess().length} Barang

) : ''}
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 }) { diff --git a/src/styles/globals.css b/src/styles/globals.css index d3fb5643..b10e043a 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -65,28 +65,28 @@ html, body { .badge-red { @apply - bg-red_r-6 + bg-red_r-5 text-red_r-11 ; } .badge-gray { @apply - bg-gray_r-6 + bg-gray_r-5 text-gray_r-11 ; } .badge-yellow { @apply - bg-yellow_r-6 + bg-yellow_r-5 text-yellow_r-11 ; } .badge-green { @apply - bg-green_r-6 + bg-green_r-5 text-green_r-11 ; } @@ -261,7 +261,7 @@ html, body { w-full h-full z-[55] - bg-gray-900/60 + bg-gray_r-12/60 ; } -- cgit v1.2.3