.

2023-06-12 22:20:41 +01:00
parent bbbfe799a3
commit 7666d78c0b
6 changed files with 321 additions and 173 deletions
@@ -1,67 +1,110 @@
-import React, {useState} from 'react'
+import React, { useEffect, useState } from "react";
+import PaginatedList from "../Pagination/PaginatedList";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import ModalCom from "../Helpers/ModalCom";
+import CouponPopup from "./CouponPopup";
+import { useNavigate } from "react-router-dom";

-//import PaginatedList from '../../Pagination/PaginatedList'
-import PaginatedList from '../Pagination/PaginatedList';
-import { handlePagingFunc } from '../Pagination/HandlePagination';
+function CouponTable({ coupon }) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [couponPopup, setCouponPopup] = useState({ state: false, data: null });
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);

-function CouponTable({coupon}) {
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };

-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  const navigate = useNavigate();

-    const handlePagination = (e) => {
-        handlePagingFunc(e,setCurrentPage)
-    }
+  const handleCouponPopUp = () =>
+    setCouponPopup((prev) => ({ state: !prev.state }));

-    return (
-        <div className='flex flex-col justify-between h-full'>
-            <table className="wallet-activity w-full table-auto border-collapse text-left">
-                <thead className='border-b-2'>
-                <tr className='text-slate-600'>
-                    <th className="p-2">Coupon</th>
-                    {/*<th className="p-2">Description</th>*/}
-                    {/*<th className="p-2">Amount</th>*/}
-                    <th className="p-2">Status</th>
-                </tr>
-                </thead>
-                {coupon.data.length ?
-                    (
-                        <tbody>
-                        {currentCoupon.map((item, index) => (
-                            <tr key={index} className='text-slate-500'>
-                                <td className="p-2">{item.added} <br /> {item.code} <br />{item.amount}</td>
-                                {/*<td className="p-2"></td>*/}
-                                {/*<td className="p-2"></td>*/}
-                                <td className="p-2">{item.status}</td>
-                            </tr>
-                        ))}
-                        </tbody>
-                    )
-                    :
-                    coupon.error ?
-                        (
-                            <tbody>
-                            <tr className='text-slate-500'>
-                                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
-                            </tr>
-                            </tbody>
-                        )
-                        :
-                        <tbody>
-                        <tr className='text-slate-500'>
-                            <td className="p-2" colSpan={4}>No Purchase History Found!</td>
-                        </tr>
-                        </tbody>
-                }
-            </table>
+  useEffect(() => {
+    if (!coupon) navigate("/my-coupon", { replace: true });
+  }, []);

-            {/* PAGINATION BUTTON */}
-            <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
-            {/* END OF PAGINATION BUTTON */}
-        </div>
-    )
+  return (
+    <div className="flex flex-col justify-between h-full">
+      <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className="border-b-2">
+          <tr className="text-slate-600">
+            <th className="p-2">Coupon</th>
+            <th className="p-2 text-center">Amount</th>
+            <th className="p-2"></th>
+          </tr>
+        </thead>
+        {coupon.data.length ? (
+          <tbody>
+            {currentCoupon.map((item, index) => (
+              <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 h-20 flex items-center justify-end">
+                  <button
+                    type="button"
+                    className="btn-gradient w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+                    onClick={() => {
+                      setCouponPopup((prev) => ({
+                        state: !prev.state,
+                        data: item,
+                      }));
+                    }}
+                  >
+                    Redeem
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        ) : coupon.error ? (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                Opps! an error occurred. Please try again!
+              </td>
+            </tr>
+          </tbody>
+        ) : (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                No Purchase History Found!
+              </td>
+            </tr>
+          </tbody>
+        )}
+      </table>
+
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage === 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          coupon?.data?.length
+            ? true
+            : false
+        }
+        data={coupon?.data}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
+
+      {couponPopup.state && (
+        <ModalCom action={handleCouponPopUp} situation={couponPopup.state}>
+          <CouponPopup
+            data={couponPopup.data}
+            popUpHandler={handleCouponPopUp}
+          />
+        </ModalCom>
+      )}
+    </div>
+  );
 }
-
-export default CouponTable
+export default CouponTable;