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">
@@ -28,7 +49,7 @@ const MyGiftCard = () => {
               {giftCard?.length > 0 ?
                 <>
                   {giftCard.map((data, index) => (
-                  <div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${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">
@@ -37,7 +58,7 @@ const MyGiftCard = () => {
                         </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="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>
@@ -47,9 +68,17 @@ const MyGiftCard = () => {
                               <p>{data.attributes.receiverEmail}</p>
                             </div>
                           </div>
-                        <div className="details-div">
+                          <div className="details-div d-flex align-items-end justify-content-between">
+                            <div>
                               <p>Gift Amount</p>
-                          <p>${data.attributes.amount}</p>
+                              <p className="m-0">${data.attributes.amount}</p>
+                            </div>
+
+                            {data.attributes.status !== null &&
+                              <div>
+                                {getStatus(data?.attributes?.status)}
+                              </div>
+                            }
                           </div>
                         </div>
                       </div>