118 lines
3.8 KiB
React
118 lines
3.8 KiB
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 { PriceFormatter } from "../Helpers/PriceFormatter";
|
|
|
|
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);
|
|
|
|
const handlePagination = (e) => {
|
|
handlePagingFunc(e, setCurrentPage);
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleCouponPopUp = () =>
|
|
setCouponPopup((prev) => ({ state: !prev.state }));
|
|
|
|
useEffect(() => {
|
|
if (!coupon) navigate("/my-coupon", { replace: true });
|
|
}, []);
|
|
|
|
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) => {
|
|
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">{thePrice}</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, thePrice},
|
|
}));
|
|
}}
|
|
>
|
|
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;
|