manage offer reformatted

src/components/AuthPages/Login/index.jsx

@@ -18,6 +18,9 @@ export default function Login() {
   const dispatch = useDispatch();
 
   let [loginType, setLoginType] = useState({ full: true, family: false });
+  const [selectedLoginType, setSelectedLoginType] = useState(
+    document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
+  );
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -77,6 +80,10 @@ export default function Login() {
         login_mode: 1100,
         action: 11025,
       };
+
+      // Clear the loginType cookie if the user switches to loginfull
+      document.cookie =
+        "loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
     } else if (name == "loginfamily") {
       // Post Data Info for family Login
       postData = {
@@ -86,6 +93,8 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
+      // Set the loginType cookie to remember the user's selection
+      document.cookie = "loginType=family; path=/;";
     } else {
       setLoginLoading(false);
       setMsgError("Invalid Login Type. Consider refreshing the page");
@@ -127,15 +136,24 @@ export default function Login() {
   };
 
   const googleLogin = useGoogleLogin({
-    flow: 'auth-code',
-    ux_mode:'redirect',
+    flow: "auth-code",
+    ux_mode: "redirect",
     redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
     onSuccess: async (codeResponse) => {
-      console.log("GOOGLE LOGIN GOOD --- ",codeResponse);
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
     },
     onError: (errorResponse) => console.log(errorResponse),
   });
 
+  // In order to update the selected login type whenever the component renders
+  useEffect(() => {
+    setSelectedLoginType(
+      document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
+    );
+  }, []);
+
+  console.log("Looking for the cookies >>", selectedLoginType)
+
   useEffect(() => {
     setMail("");
     setPassword("");

src/components/Cards/AvailableJobsCard.jsx

@@ -187,7 +187,7 @@ export default function AvailableJobsCard({
               </div>
             </div> */}
             <div className="block sm:flex flex-wrap gap-4">
-              <p className="text-sm text-thin-light-gray">
+              <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                 Price: <span className="text-purple">{thePrice}</span>
               </p>
               <p className="text-sm text-thin-light-gray">

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -72,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {value.title}
                                     </h1>
                                     <div className="flex gap-4 items-center">
-                                      <span className="text-sm text-thin-light-gray">
+                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">
                                           {thePrice}

src/components/Helpers/PriceFormatter.jsx

@@ -1,16 +1,48 @@
-export const PriceFormatter = (price, currency, currencyName) => {
-  const supportedCurrencies = ["USD", "EUR", "GBP"];
-  const symbolFormatter = supportedCurrencies.includes(currency)
-    ? currency
-    : undefined;
+import React from 'react'
 
-  const formatter = new Intl.NumberFormat("en", {
-    style: symbolFormatter,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-  });
+// export const PriceFormatter = (price, currency, currencyName) => {
+//   const supportedCurrencies = ["USD", "EUR", "GBP"];
+//   const symbolFormatter = supportedCurrencies.includes(currency)
+//     ? currency
+//     : undefined;
 
-  const displayCurrencyName = symbolFormatter ? "" : currencyName;
+//   const formatter = new Intl.NumberFormat("en", {
+//     style: symbolFormatter,
+//     currencyDisplay: "symbol",
+//     minimumFractionDigits: 2,
+//   });
 
-  return `${formatter.format(price)} ${displayCurrencyName}`;
-};
+//   const displayCurrencyName = symbolFormatter ? "" : currencyName;
+
+//   return `${formatter.format(price)} ${displayCurrencyName}`;
+// };
+
+
+export const PriceFormatter = (price='00', currency='', currencyName='') => {
+  // Convert the number to a string
+let numStr = String(price);
+
+// Split the string into integer and decimal parts
+let parts = numStr.split('.');
+let integerPart = parts[0];
+let decimalPart = parts[1] || '';
+
+// Add thousands separators to the integer part
+// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+let formattedInteger = integerPart;
+
+// Truncate or pad the decimal part to two decimal points
+let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+
+// Combine the formatted integer and decimal parts
+// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+// return formattedNumber;
+  return (
+    <span className='text-sm flex items-center'>
+      <sup>{currency || currencyName || ''}</sup>
+      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
+      <sup>{formattedDecimal}</sup>
+    </span>
+  )
+}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -170,7 +170,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                                 <hr className="mb-1" />
                                 <span className="flex items-center gap-2">
                                   {content?.text}
-                                  <strong>{content?.bold}</strong>
+                                  <strong>{thePrice}</strong>
                                 </span>
                                 <hr className="mt-1" />
                               </>

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyJobs/MyJobTable.jsx

@@ -119,7 +119,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   {value.title}
                 </h1>
                 <div>{value.description}</div>
-                <span className="text-sm text-thin-light-gray">
+                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                   Price: <span className="text-purple">{thePrice}</span>
                 </span>
                 <span className="text-sm text-thin-light-gray">

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -67,7 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyTasks/MyJobTable.jsx

@@ -86,7 +86,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                         <span className="text-base text-gray-600">
                           {task?.description}
                         </span>
-                        <span className="text-sm text-thin-light-gray">
+                        <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>

src/components/MyWallet/Balance.jsx

@@ -4,6 +4,7 @@ import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import PurchasesTable from './WalletComponent/PurchasesTable'
 import CouponTable from './WalletComponent/CouponTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import { PriceFormatter } from '../Helpers/PriceFormatter'
 
 function Balance({wallet, coupon}) {
     return (
@@ -42,11 +43,11 @@ function Balance({wallet, coupon}) {
                                     </div>
                                     <div className='balance-info'>
                                         <p className='py-2'>Balance</p>
-                                        <span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
+                                        <span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.amount * 0.01, item.code)}</span>
                                     </div>
                                     <div className='balance-info'>
                                         <p className='py-2'>Escrow</p>
-                                        <span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
+                                        <span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.escrow * 0.01, item.code)}</span>
                                     </div>
                                 </div>
 

src/components/MyWallet/WalletHeader.jsx

@@ -5,6 +5,7 @@ import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
 import Accordion from "../Helpers/Accordion";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function WalletHeader(props) {
   //  debugger;
@@ -58,10 +59,7 @@ export default function WalletHeader(props) {
                       </div>
                       <div>
                         <p className="eth text-xl font-bold text-purple">
-                          {(value.amount * 0.01).toFixed(2)} {value.code}
-                        </p>
-                        <p className="usd text-base text-thin-light-gray text-right">
-                          {/*(773.69 USD)*/}
+                          {PriceFormatter(value.amount * 0.01, value.code)}
                         </p>
                       </div>
                     </div>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -4,8 +4,8 @@ import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 
 import usersService from "../../services/UsersService";
-import { handlePagingFunc } from "../Pagination/HandlePagination";
-import PaginatedList from "../Pagination/PaginatedList";
+// import { handlePagingFunc } from "../Pagination/HandlePagination";
+// import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
 
@@ -15,25 +15,50 @@ export default function ManageInterestOffer(props) {
 
     let [redirectTime, setRedirectTime] = useState(5)
 
+    let [messageToSend, setMessageToSend] = useState('')
+
     let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
 
     let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
 
-    const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const messageList = {data: [1,2,3,4,5,6,7,8,95,6,7,8,9]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    // const [currentPage, setCurrentPage] = useState(0);
+    // const indexOfFirstItem = Number(currentPage);
+    // const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
 
-    const handlePagination = (e) => {
-        handlePagingFunc(e, setCurrentPage);
-    };
+    // const handlePagination = (e) => {
+    //     handlePagingFunc(e, setCurrentPage);
+    // };
 
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
     };
 
+    //FUNCTION TO HANDLE ON CHANGE MESSAGE IN TEXTAREA
+    const onMessageChange = ({target:{value}}) => {
+        if(messageToSend.length > 149){
+            setRequestStatus({loading: false, status: false, message: 'max of 150 characters', processType: 'sendmessage'})
+        }else{
+            setRequestStatus({loading: false, status: false, message: '', processType: 'sendmessage'})
+        }
+        setMessageToSend(value)
+    }
+
+    //FUNCTION TO SEND MESSAGE TO CLIENT
+    const sendMessage = () => {
+        setRequestStatus(prev => ({...prev, loading: true, processType: 'sendmessage'}))
+        if(!messageToSend){
+            setRequestStatus({loading: false, status: false, message: 'Please enter message to send', processType: 'sendmessage'})
+            return
+        }
+        if(messageToSend.length > 149){
+            return
+        }
+        console.log('GOOD TO GO')
+    }
+
     //FUNCTION TO ACCEPT/REJECT OFFER INTEREST
     const interestOfferProcess = ({target:{name}}) => {
         setRequestStatus(prev => ({...prev, loading: true, processType: name}))
@@ -180,23 +205,53 @@ export default function ManageInterestOffer(props) {
                                     </div>
                                     :
                                     <div className="message-details w-full border-t">
-                                        <div className="my-0 w-full flex items-center gap-5">
-                                            <div className="w-3/4">
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
-                                                <textarea rows={2} autoFocus={true} className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" />
+                                        <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">
+                                            <div className="w-full">
+                                                <textarea 
+                                                    value={messageToSend}
+                                                    onChange={onMessageChange} 
+                                                    rows={2} autoFocus={true} 
+                                                    className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" 
+                                                />
                                             </div>
-                                            <div className="w-1/4 flex flex-col justify-center items-center">
+                                            <div className="flex justify-end items-center">
                                                 <button
                                                     type="button"
-                                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                    onClick={sendMessage}
+                                                    // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                    className="w-[100px] h-[50px] bg-sky-blue text-center text-lg font-semibold text-white rounded-md shadow-md flex justify-center items-center"
                                                 >
-                                                    <span className="text-white">Send</span>
+                                                Send
                                                 </button>
                                             </div>
                                         </div>
+
+                                        {/* ERROR DISPLAY FOR MESSAGE SENDING */}
+                                        <div className="w-full">
+                                        {/* error or success display */}
+                                        {requestStatus.message != "" && requestStatus.processType == 'sendmessage' &&
+                                            (!requestStatus.status ? (
+                                            <div
+                                                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                            >
+                                                {requestStatus.message}
+                                            </div>
+                                            ) : (
+                                            requestStatus.status && (
+                                                <div
+                                                className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                                >
+                                                {`${requestStatus.message} redirecting.... ${redirectTime}sec`}
+                                                </div>
+                                            )
+                                            ))}
+                                        </div>
+                                        {/* END OF ERROR DISPLAY FOR MESSAGE SENDING */}
+
                                         {/* message list */}
-                                        <div className="min-h-[100px] max-h-[200px] overflow-y-auto">
-                                        {currentMessageList.map((item, index)=>(
+                                        <div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
+                                        {messageList.data.map((item, index)=>(
                                             <div key={index} className="my-2 w-full flex items-center gap-1">
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
@@ -205,7 +260,7 @@ export default function ManageInterestOffer(props) {
                                         </div>
 
                                         {/* PAGINATION BUTTON */}
-                                        <PaginatedList
+                                        {/* <PaginatedList
                                             onClick={handlePagination}
                                             prev={currentPage == 0 ? true : false}
                                             next={
@@ -217,7 +272,7 @@ export default function ManageInterestOffer(props) {
                                             data={messageList?.data}
                                             start={indexOfFirstItem}
                                             stop={indexOfLastItem}
-                                        />
+                                        /> */}
                                         {/* END OF PAGINATION BUTTON */}
                                     </div>
                                     }
@@ -263,7 +318,7 @@ export default function ManageInterestOffer(props) {
                                     {/* ERROR DISPLAY */}
                                     <div className="w-full">
                                     {/* error or success display */}
-                                    {requestStatus.message != "" && requestStatus.processType != 'sendmeassge' &&
+                                    {requestStatus.message != "" && requestStatus.processType != 'sendmessage' &&
                                         (!requestStatus.status ? (
                                         <div
                                             className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}

src/components/jobPopout/DeleteJobPopout.jsx

@@ -118,7 +118,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
             <p className="text-xl tracking-wide text-dark-gray dark:text-white">
               {details.title}
             </p>
-            <p className="text-lg tracking-wide text-dark-gray dark:text-white">
+            <p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
               Price: {details.thePrice}
             </p>
             <p className="text-lg tracking-wide text-dark-gray dark:text-white">

src/components/jobPopout/PendingJobsPopout.jsx

@@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
 import { toast } from "react-toastify";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 const showSuccessToast = (message) => {
   toast.success(message, {
@@ -133,7 +134,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
             <div className="my-2 md:flex">
               <Detail
                 label="Price"
-                value={`${details.price * 0.01} ${details.currency}`}
+                // value={`${details.price * 0.01} ${details.currency}`}
+                value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
               />
             </div>