.

src/components/MyCoupons/CouponPopup.jsx

@@ -1,10 +1,17 @@
 import { useMemo, useState } from "react";
-import { toast } from "react-toastify";
 import usersService from "../../services/UsersService";
+import { useDispatch } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
 
 const CouponPopup = ({ popUpHandler, data }) => {
   const [loader, setLoader] = useState(false);
   const apiCall = useMemo(() => new usersService(), []);
+  const [statusMsg, setStatusMsg] = useState({
+    success: "",
+    error: "",
+  });
+
+  const dispatch = useDispatch();
 
   const redeemCouponHandler = async () => {
     setLoader(true);
@@ -14,28 +21,34 @@ const CouponPopup = ({ popUpHandler, data }) => {
       const reqData = { code_id: Number(coupon_id), code };
 
       const res = await apiCall.getCouponRedeem(reqData);
-      if (res.statusText === "OK") {
-        toast.success("Great news! Your coupon has been redeemed.", {
-          autoClose: 3000,
-          hideProgressBar: true,
-        });
-      }
 
+      if (res.data?.internal_return < 0)
+        setStatusMsg({ error: "An error occurred" });
+      else setStatusMsg({ success: res.data?.status_text });
+
+      dispatch(tableReload({ type: "COUPONTABLE" }));
       setTimeout(() => {
         popUpHandler();
         setLoader(false);
-      }, 3000);
-      throw new Response(res);
+      }, 10000);
     } catch (error) {
-      // error &&
-      //   toast.warn("An error occurred while processing your coupon.", {
-      //     autoClose: 3000,
-      //     hideProgressBar: true,
-      //   });
       setLoader(false);
-      console.log(error);
-      return;
-      // throw new Error(error);
+      if (error?.status !== 200)
+        setStatusMsg({
+          error: {
+            status: true,
+            msg:
+              error?.statusText !== ""
+                ? error?.statusText
+                : "An error occurred",
+          },
+        });
+      throw new Error(error);
+    } finally {
+      setStatusMsg({
+        success: "",
+        error: "",
+      });
     }
   };
 
@@ -77,9 +90,8 @@ const CouponPopup = ({ popUpHandler, data }) => {
               Amount:
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">{`${data?.amount} Naira`}</div>
+          <div className=" flex-[0.7] max-w-[150px]">{data?.thePrice}</div>
         </div>
-
         <div className="signin-area w-full">
           <div className="flex justify-end">
             <button
@@ -96,6 +108,12 @@ const CouponPopup = ({ popUpHandler, data }) => {
               )}
             </button>
           </div>
+          {statusMsg.success && (
+            <p className="text-sm text-green-500 italic">{statusMsg.success}</p>
+          )}
+          {statusMsg.error && (
+            <p className="text-sm text-red-500 italic">{statusMsg.error}</p>
+          )}
         </div>
       </form>
       <div className="signin-area w-full px-5 py-4">

src/components/MyCoupons/CouponTable.jsx

@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import ModalCom from "../Helpers/ModalCom";
 import CouponPopup from "./CouponPopup";
 import { useNavigate } from "react-router-dom";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function CouponTable({ coupon }) {
   const [currentPage, setCurrentPage] = useState(0);
@@ -38,12 +39,18 @@ function CouponTable({ coupon }) {
         </thead>
         {coupon.data.length ? (
           <tbody>
-            {currentCoupon.map((item, index) => (
+            {currentCoupon.map((item, index) => {
+              let thePrice = PriceFormatter(
+                item?.amount * 0.01,
+                item?.currency_code,
+                item?.currency
+              );
+              return(
               <tr key={index} className="text-slate-500">
                 <td className="p-2 cursor-default">
                   {item.added} <br /> {item.code}
                 </td>
-                <td className="p-2 text-center cursor-default">{`${item.amount} Naira`}</td>
+                <td className="p-2 text-center cursor-default">{thePrice}</td>
                 <td className="p-2 h-20 flex items-center justify-end">
                   <button
                     type="button"
@@ -51,7 +58,7 @@ function CouponTable({ coupon }) {
                     onClick={() => {
                       setCouponPopup((prev) => ({
                         state: !prev.state,
-                        data: item,
+                        data: {...item, thePrice},
                       }));
                     }}
                   >
@@ -59,7 +66,7 @@ function CouponTable({ coupon }) {
                   </button>
                 </td>
               </tr>
-            ))}
+            )})}
           </tbody>
         ) : coupon.error ? (
           <tbody>

src/components/MyCoupons/MyCoupons.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CouponTable from "./CouponTable";
 import usersService from "../../services/UsersService";
+import { useSelector } from "react-redux";
 
 export default function MyCoupons() {
-  const apiCall = new usersService();
+  const apiCall = useMemo(() => new usersService(), []);
+  const {couponTable} = useSelector(state => state.tableReload)
   let [couponHistory, setCouponHistory] = useState({
     // FOR COUPON HISTORY
     loading: true,
@@ -14,7 +16,7 @@ export default function MyCoupons() {
   });
 
   //FUNCTION TO GET COUPON HISTORY
-  const getCouponHistory = () => {
+  const getCouponHistory = useCallback(() => {
     apiCall
       .getCouponPending()
       .then((res) => {
@@ -32,11 +34,11 @@ export default function MyCoupons() {
       .catch((error) => {
         setCouponHistory((prev) => ({ ...prev, loading: false, error: true }));
       });
-  };
+  }, [apiCall]);
 
   useEffect(() => {
     getCouponHistory();
-  }, []);
+  }, [couponTable]);
 
   return (
     <>
@@ -59,7 +61,7 @@ export default function MyCoupons() {
                     <LoadingSpinner size="16" color="sky-blue" />
                   </div>
                 ) : (
-                  <CouponTable coupon={couponHistory} />    
+                  <CouponTable coupon={couponHistory} />
                 )}
               </div>
             </div>