sign up issue and status added in giftcard

components/signup/Signup.js

@@ -197,7 +197,7 @@ const Signup = props => {
                               onChange={handleChange}
                               onBlur={e => {
                                 handleBlur(e);
-                                setCountryCode(e.target.value);
+                                // setCountryCode(e.target.value);
                               }}
                               style={{ width: "80px" }}
                             >

components/user/MyGiftCard.js

@@ -4,6 +4,7 @@ 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();
@@ -17,7 +18,27 @@ const MyGiftCard = () => {
 
   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">
@@ -26,38 +47,46 @@ const MyGiftCard = () => {
             <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 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 align-items-start justify-content-between">
-                          <div className="details-div">
-                            <p>Sender’s Email Id</p>
-                            <p>{data.attributes.senderEmail}</p>
+                <>
+                  {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">
-                            <p>Receiver’s Email Id</p>
-                            <p>{data.attributes.receiverEmail}</p>
+                          <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>
+                                {getStatus(data?.attributes?.status)}
+                              </div>
+                            }
                           </div>
                         </div>
-                        <div className="details-div">
-                          <p>Gift Amount</p>
-                          <p>${data.attributes.amount}</p>
-                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}</>
+                  ))}</>
                 :
                 <>
-                <p className="mb-5">No Item Found</p>
+                  <p className="mb-5">No Item Found</p>
                 </>}
             </div>
           </div>