Modal After Delete Cart

public/locales/en/deletecartmodal.json

@@ -0,0 +1,3 @@
+{
+  "info": "Your cart is empty"
+}

public/locales/pl/deletecartmodal.json

@@ -0,0 +1,3 @@
+{
+  "info": "Twój koszyk jest pusty"
+}

src/features/cartPage/Cart.tsx

@@ -1,11 +1,14 @@
-import CartTableHeading from './CartTableHeading';
 import CartDeliveries from './CartDeliveries';
-import CartTableBody from './CartTableBody';
 import CartRemoveButton from './CartRemoveButton';
-
 import CartSummaryRow from './CartTableSummaryRow';
+import CartTableBody from './CartTableBody';
+import CartTableHeading from './CartTableHeading';
+
+interface CartTypes {
+  openModalHandler: () => void;
+}
 
-const Cart = () => {
+const Cart = (prop: CartTypes) => {
   return (
     <div className="p-4">
       <table className="w-full table-auto">
@@ -14,7 +17,7 @@ const Cart = () => {
       </table>
 
       <div className="my-3 flex items-center justify-between ">
-        <CartRemoveButton />
+        <CartRemoveButton openModalHandler={prop.openModalHandler} />
         <CartDeliveries />
       </div>
 

src/features/cartPage/CartPage.tsx

@@ -1,16 +1,18 @@
 import { useDispatch, useSelector } from 'react-redux';
-import Cart from './Cart';
-import { RootState } from '../../app/store';
-
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import Cart from './Cart';
+import DeleteCartModal from '../universalModal/UniversalModal';
+import { RootState } from '../../app/store';
 import {
   fetchDeliveryId,
   fetchOrderDetails,
 } from '../../app/slices/orderSlice';
 
 const CartPage = () => {
+  const [showModal, setShowModal] = useState(false);
   const { t } = useTranslation('cart');
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -44,6 +46,14 @@ const CartPage = () => {
     }
   };
 
+  const openModalHandler = () => {
+    setShowModal(true);
+  };
+
+  const closeModalHandler = () => {
+    setShowModal(false);
+  };
+
   return (
     <div className="mx-auto mt-8 mb-16 flex w-full max-w-7xl flex-col px-3 md:px-6 lg:px-8">
       {cart.counter !== 0 ? (
@@ -52,7 +62,7 @@ const CartPage = () => {
             {t('cartOpenerText')}
           </p>
 
-          <Cart />
+          <Cart openModalHandler={openModalHandler} />
           {Object.keys(chosenDelivery).length > 0 && (
             <div className="flex justify-end">
               <button
@@ -67,6 +77,13 @@ const CartPage = () => {
       ) : (
         <div>{t('emptyCart')}</div>
       )}
+      {showModal ? (
+        <DeleteCartModal
+          closeModal={closeModalHandler}
+          languageJsonFileName={'deletecartmodal'}
+          propertyFromJson={'info'}
+        />
+      ) : null}
     </div>
   );
 };

src/features/cartPage/CartRemoveButton.tsx

@@ -1,19 +1,25 @@
+//import toast from 'react-hot-toast';
+
 import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 
 import { AppDispatch } from '../../app/store';
 import { clear } from '../../app/slices/cartSlice';
-import { useTranslation } from 'react-i18next';
-import toast from 'react-hot-toast';
 
-const CartRemoveButton = () => {
+interface CartRemoveButtonTypes {
+  openModalHandler: () => void;
+}
+
+const CartRemoveButton = (prop: CartRemoveButtonTypes) => {
   const dispatch: AppDispatch = useDispatch();
   const { t } = useTranslation('cart');
 
   return (
     <button
       className=" h-16 rounded bg-zinc-400 py-2 px-2 font-bold text-white hover:bg-red-600"
       onClick={() => {
-        toast.error(t('allProductsRemovedFromCart'));
+        //toast.error(t('allProductsRemovedFromCart'));
+        prop.openModalHandler();
         dispatch(clear());
       }}
     >

src/features/universalModal/UniversalModal.tsx

@@ -0,0 +1,44 @@
+import { AiOutlineClose } from 'react-icons/ai';
+import { useTranslation } from 'react-i18next';
+
+import logosm from '../../assets/logosmall.png';
+
+interface ModalProps {
+  closeModal: () => void;
+  languageJsonFileName: string;
+  propertyFromJson: string;
+}
+
+function DeleteCartModal(prop: ModalProps) {
+  const { t } = useTranslation(prop.languageJsonFileName);
+  return (
+    <div
+      onClick={prop.closeModal}
+      onKeyDown={prop.closeModal}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="fixed top-0 left-0  z-20 h-full w-full bg-black opacity-20" />
+      <div
+        className="bg- fixed top-1/2 left-1/2  z-30 flex h-40 w-10/12 -translate-y-1/2 -translate-x-1/2 items-center justify-center rounded-lg bg-stone-200 p-6 text-center shadow-xl hover:cursor-default sm:h-60 sm:p-8 sm:text-lg md:text-xl lg:text-2xl lg2:w-1/2 "
+        onClick={(e: any) => e.stopPropagation()}
+        onKeyDown={(e: any) => e.stopPropagation()}
+        role="button"
+        tabIndex={0}
+        style={{ backgroundImage: `url(${logosm})` }}
+      >
+        {t(prop.propertyFromJson)}
+        <button
+          onClick={prop.closeModal}
+          onKeyDown={prop.closeModal}
+          aria-label="close handler"
+          className="absolute top-4 right-4 text-xl sm:top-10 sm:right-10"
+        >
+          <AiOutlineClose />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default DeleteCartModal;