fixed height issues

.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+#package-lock.json
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -167,7 +167,7 @@ export default function FamilyManageTabs({
       />
     ),
     Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-    wallet: <FamilyWallet />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
   };
 
   // Default tab component

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -1,8 +1,74 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+import usersService from '../../../services/UsersService'
+
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { localImgLoad } from '../../../lib'
+import background from '../../../assets/images/bg-sky-blue.jpg'
+
+function FamilyWallet({familyData}) {
+  const apiUrl = new usersService()
+
+  let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
+
+  useEffect(()=>{
+    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
+      setFamilyWallet({loading:false, data: res?.data?.result_list || []})
+    }).catch(error => {
+      setFamilyWallet({loading:false, data: []})
+    })
+  },[])
 
-function FamilyWallet() {
   return (
-    <div>FamilyWallet</div>
+    <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
+        {familyWallet.loading ?
+        <div className='w-full h-20 flex justify-center items-center'>
+          <LoadingSpinner size='8' color='sky-blue' />
+        </div>
+        :
+        familyWallet?.data?.length > 0 ?
+        <div className='w-full p-4 flex flex-col gap-2'>
+        {familyWallet?.data?.map((wallet, index)=>(
+            <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
+              // style={{
+              //   background: `url(${background}) 0% 0% / cover no-repeat`,
+              // }}
+            >
+              <div className="w-full flex justify-start items-center gap-3">
+                <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                  <img
+                    src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
+                    className="w-full h-full"
+                    alt="currency-icon"
+                  />
+                </div>
+                <div className="balance mt-2 flex justify-center">
+                  <div className="flex gap-2">
+                    <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
+                      Balance:
+                    </p>
+                    <p 
+                      className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
+                      // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
+                      >
+                      {PriceFormatter(
+                        Number(wallet.amount) * 0.01,
+                        wallet.code,
+                        wallet.country,
+                        ""
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        :
+        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
+        }
+    </div>
   )
 }
 

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -7,6 +7,10 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   const [textValue, setTextValue] = useState("");
+  const [errMsg, setErrMsg] = useState({
+    market: false,
+    manage: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
 
   const handleInputChange = ({ target: { value } }) => {
@@ -48,20 +52,17 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           return;
         }
 
-        toast.success("Message sent", {
-          autoClose: 2500,
-          hideProgressBar: true,
-        });
-
         setMarketMsg({ data: marketMessageRes, state: true });
-        setTimeout(() => onClose(), 2000);
       } catch (error) {
+        setErrMsg({ market: true });
+        setMarketMsg({ loading: false, state: false });
         throw new Error(error);
       } finally {
+        setTextValue("");
         setTimeout(() => {
-          setTextValue("");
+          setMarketMsg({ loading: false, state: false });
-          setMarketMsg({ loading: false });
+          setErrMsg({ market: false });
-        }, 2000);
+        }, 5000);
       }
     };
 
@@ -127,7 +128,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
         <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           <div className="p-4 w-full md:w-[75%] md:border-r-1">
-            <div className="min-h-[263px]">
+            <div className="max-h-[240px] h-full">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -158,9 +159,9 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   <div
                     className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
                       name !== "Delivery Detail"
-                        ? " h-full max-h-28 flex items-center"
+                        ? " h-full flex items-center"
-                        : " overflow-y-auto max-h-[100px]"
+                        : " overflow-y-auto max-h-[80px]"
-                    }`}
+                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
                   >
                     {danger ? (
                       <p
@@ -195,39 +196,45 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               ))}
             </div>
             <hr />
-            <div className="my-3 w-full flex flex-col gap-3">
+            <div className="w-full flex flex-col gap-3">
               <div className="w-full">
                 <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                   If you have any questions about this task:
                 </label>
                 <textarea
-                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                  className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                    marketMsg.loading && "italic text-[#9CA3AF]"
+                  } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
                   rows="3"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
-                  value={textValue}
+                  value={marketMsg.loading ? "Sending..." : textValue}
                   onChange={handleInputChange}
                 />
               </div>
-              <button
+              <div className="relative flex w-full justify-end ">
-                className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
+                <span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
-                name="market-message"
+                  {marketMsg.state && "Message Sent!"}
-                onClick={MarketDetail}
+                  {errMsg.market && "Something went wrong"}
-              >
+                </span>
-                {marketMsg.loading ? (
+                <button
-                  <LoadingSpinner size={5} color="white" />
+                  className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
-                ) : !marketMsg.state ? (
+                  name="market-message"
-                  "Send Message"
+                  onClick={MarketDetail}
-                ) : (
+                >
-                  "Message Sent"
+                  {marketMsg.loading ? (
-                )}
+                    <LoadingSpinner size={5} color="white" />
-              </button>
+                  ) : (
+                    "Send Message"
+                  )}
+                </button>
+              </div>
             </div>
           </div>
 
           <div className="w-full md:w-[23%] h-full flex flex-col">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] p-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
-              <div className="w-full flex flex-col justify-center py-4 gap-2">
+              <div className="w-full flex flex-col justify-center pb-4 gap-2">
                 <p className="w-full text-slate-900 tracking-wide my-1 font-semibold">
                   Interested in the task?
                 </p>

src/services/UsersService.js

@@ -1078,6 +1078,18 @@ class usersService {
       return this.postAuxEnd("/suggeststatus", postData);
     }
 
+    // FUNCTION TO GET FAMILY WALLET
+    getFamilyWallet(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 22012,
+        ...reqData,
+      };
+      return this.postAuxEnd("/familywallet", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)