import Image from "next/image"; import React, { Fragment, useEffect } from "react"; import { Button } from "react-bootstrap"; import { cleanImage, renderImage } from "../../services/imageHandling"; import { useDispatch, useSelector } from "react-redux"; import { getGiftCard } from "../../redux/actions/giftCardAction"; import { Tag } from "antd"; const MyGiftCard = () => { const dispatch = useDispatch(); const { giftCard } = useSelector(state => state.giftCard); const { endUser } = useSelector(state => state.endUser); useEffect(() => { if (endUser) { dispatch(getGiftCard(endUser.id)); } }, [endUser]); console.log("endUser", endUser); console.log("giftCard", giftCard); const getStatus = status => { let text; let color; switch (status) { case "new": text = "PENDING"; color = "warning"; break; case "fulfilled": text = "APPROVED"; color = "success"; break; case "rejected": text = "REJECTED"; color = "error"; break; default: break; } return <Tag color={color}>{text.toUpperCase()}</Tag>; }; return ( <Fragment> <div className="container min-height-40 "> <div className="row"> <div className="col-12 col-lg-12 form-container content-wraaper"> <h2 className="px-2 px-lg-0">My Gift Card</h2> <div className="row"> {giftCard?.length > 0 ? ( <> {giftCard.map((data, index) => ( <div className="col-12 col-lg-4 col-md-6 px-4 px-lg-3" key={`1${index}`}> <div className="card-booking"> <div className="card-booking-img bgGrey"> <span className="image-container"> <Image src="/images/zango-logo.svg" layout="fill" className="image" /> </span> </div> <div className="card-booking-content details-wrapper"> <p className="details">Details</p> <div className="d-flex flex-column flex-md-row flex-sm-row flex-lg-row align-items-start justify-content-between"> <div className="details-div"> <p>Sender’s Email Id</p> <p>{data.attributes.senderEmail}</p> </div> <div className="details-div"> <p>Receiver’s Email Id</p> <p>{data.attributes.receiverEmail}</p> </div> </div> <div className="details-div d-flex align-items-end justify-content-between"> <div> <p>Gift Amount</p> <p className="m-0">${data.attributes.amount}</p> </div> {data.attributes.status !== null && <div><Tag color={"warning"}>{"ENQUIRED"}</Tag></div>} </div> </div> </div> </div> ))} </> ) : ( <> <p className="mb-5">No Item Found</p> </> )} </div> </div> </div> </div> </Fragment> ); }; export default MyGiftCard;