From f3b81904186ab0de341337e82c846eac8f876a23 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 10 Jul 2024 18:42:33 +0100
Subject: [PATCH] offer interest page update

---
 .../OffersInterest/ManageInterestOffer.jsx    | 51 ++++++++++++++++---
 .../OffersInterest/OffersInterestTable.jsx    | 16 +++++-
 .../OffersInterest/OthersInterestedTable.jsx  | 17 ++++++-
 3 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/components/OffersInterest/ManageInterestOffer.jsx b/src/components/OffersInterest/ManageInterestOffer.jsx
index 375af91..b18a593 100644
--- a/src/components/OffersInterest/ManageInterestOffer.jsx
+++ b/src/components/OffersInterest/ManageInterestOffer.jsx
@@ -6,10 +6,18 @@ import CommonHead from "../UserHeader/CommonHead";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function ManageInterestOffer(props) {
+
+    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+    
+    let walletBal = walletDetails?.data?.filter(wallet => wallet.code == props?.offerDetails?.currency_code) // USER WALLET BALANCE FOR CORRESPONDING TASK CURRENCY
+
+    let clientAdded = new Date(props.offerDetails?.client_added)
+
     const dispatch = useDispatch()
     const navigate = useNavigate()
     const apiCall = new usersService()
@@ -183,12 +191,21 @@ export default function ManageInterestOffer(props) {
                                         <button
                                         name="message"
                                         onClick={(e) => setTab(e.target.name)}
-                                        className={`px-4 py-1 rounded-t-2xl ${
+                                        className={`px-4 py-1 rounded-t-2xl flex gap-2 ${
                                             tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
                                           }`}
                                         >
                                         Messages ({messageList.data.length})
                                         </button>
+                                        <button
+                                        name="details"
+                                        onClick={(e) => setTab(e.target.name)}
+                                        className={`px-4 py-1 rounded-t-2xl ${
+                                            tab == "details" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                                          }`}
+                                        >
+                                        Delivery Details
+                                        </button>
                                     </div>
                                     {/* END OF switch button */}
 
@@ -202,7 +219,10 @@ export default function ManageInterestOffer(props) {
                                             </div>
                                             <div className="my-3 md:my-0 flex items-center gap-1">
                                                 <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">
+                                                    {clientAdded.getFullYear()}{" - "}
+                                                    {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                </span>
                                             </div>
                                         </div>
                                         <div className="my-3 flex items-center gap-1">
@@ -230,7 +250,7 @@ export default function ManageInterestOffer(props) {
                                             </div>
                                         </div>
                                     </div>
-                                    :
+                                    : tab == 'message' ?
                                     <div className="message-details w-full border-t">
                                         <p className="my-1 text-base text-dark-gray dark:text-white tracking-wide">To: <span className="font-bold">{props.offerDetails?.client_name}</span></p>
                                         <div className="w-full flex items-center gap-5">
@@ -294,14 +314,31 @@ export default function ManageInterestOffer(props) {
                                         }
                                         </div>
                                     </div>
+                                    : tab == 'details' ?
+                                    <div className="info-details w-full border-t">
+                                        <h1 className="my-3 text-base font-medium text-dark-gray dark:text-white tracking-wide">{props?.offerDetails?.description}</h1>
+                                    </div>
+                                    :
+                                    null
                                     }
                                 </div>
                             </div>
                             {/* END OF Detail section */}
 
-                            {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
-                                <div className="w-full h-full">
+                                {/* Wallet balance and reward */}
+                                <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Reward:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(props?.offerDetails?.price * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                </div>
+                                {/* BUTTON section */}
+                                <div className="w-full">
                                     <div className="h-full flex sm:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
@@ -333,6 +370,7 @@ export default function ManageInterestOffer(props) {
                                             </button>
                                         }
                                     </div>
+                                    {/* END of BUTTON section */}
 
                                     {/* ERROR DISPLAY */}
                                     <div className="w-full">
@@ -357,7 +395,6 @@ export default function ManageInterestOffer(props) {
                                     {/* End of error or success display */}
                                 </div>
                             </div>
-                            {/* END of BUTTON section */}
                         </div>
                     </div>
                     {/* END OF manage offer section */}
diff --git a/src/components/OffersInterest/OffersInterestTable.jsx b/src/components/OffersInterest/OffersInterestTable.jsx
index 649dcf4..b87342a 100644
--- a/src/components/OffersInterest/OffersInterestTable.jsx
+++ b/src/components/OffersInterest/OffersInterestTable.jsx
@@ -100,9 +100,21 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className='w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                                         >
-                                            View
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>
diff --git a/src/components/OffersInterest/OthersInterestedTable.jsx b/src/components/OffersInterest/OthersInterestedTable.jsx
index aa2ced7..dcc0e2a 100644
--- a/src/components/OffersInterest/OthersInterestedTable.jsx
+++ b/src/components/OffersInterest/OthersInterestedTable.jsx
@@ -101,9 +101,22 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                         >
-                                            View
+                                            {/* View */}
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>
-- 
2.34.1