added image to assign task popout

src/components/Contexts/SocketIOContext.js

@@ -65,9 +65,6 @@ export default function SocketIOContextProvider({children}) {
             if(message.action == "REFRESH_TASK" && message.audience == "PARENT"){  // for refreshing parent account when child accepts or rejects a job
                 dispatch(tableReload({type:'PARENTFAMILYTASKLIST'})) // dispatches to update parent family task list on parent side
             }
-            if(message.action == "REFRESH_WALLET" && message.family_uid == user_uid && message.audience == "MEMBER"){  // for refreshing child wallet account when parent sends money to kid
-                dispatch(tableReload({type:'WALLETTABLE'})) // dispatches to update wallet balance on family side
-            }
             // console.log('DATA', data)
         });
     }, [socket]);

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -23,7 +23,9 @@ const AssignTaskPopout = ({
   
 }) => {
   const {parentAssignJobToKid} = SocketValues()
+
   const apiCall = new usersService();
+
   let { pathname, state } = useLocation();
 
   const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
@@ -219,7 +221,10 @@ const AssignTaskPopout = ({
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
-  };
+    };
+
+  let imageSrc = (localStorage.getItem("session_token")
+  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
 
   useEffect(()=>{ // effect to update family UID when components mounts
     if(familyDetailsData?.uid){
@@ -231,6 +236,7 @@ const AssignTaskPopout = ({
     }
   },[])
 
+
   return (
     <>
       <ModalCom action={action} situation={situation}>
@@ -382,25 +388,37 @@ const AssignTaskPopout = ({
                               value={activeTask?.data?.description}
                             />
                           </div>
-                          <div className="flex items-center">
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="job-label">
-                                Price
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                {PriceFormatter(
-                                  activeTask?.data?.price * 0.01,
-                                  activeTask?.data?.currency,
-                                  activeTask?.data?.curreny_code
-                                )}
-                              </p>
-                            </div>
+                          <div className="grid grid-cols-2">
+                            <div className="w-full">
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="job-label">
+                                  Price
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                  {PriceFormatter(
+                                    activeTask?.data?.price * 0.01,
+                                    activeTask?.data?.currency,
+                                    activeTask?.data?.curreny_code
+                                  )}
+                                </p>
+                              </div>
 
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="job-label">
-                                Timeline
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="job-label">
+                                  Timeline
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              </div>
+                            </div>
+                            <div className="w-full flex items-center justify-center">
+                              <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                                  <img 
+                                    className="w-full h-auto"
+                                    loading="lazy"
+                                    src={imageSrc} 
+                                    alt='job image' 
+                                  />
+                              </div>
                             </div>
                           </div>
                           

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -15,10 +15,8 @@ function FamilyWallet({familyData}) {
 
   useEffect(()=>{
     setFamilyWallet({loading:true, data: []})
-    apiUrl.getKidWallets({family_uid:familyData?.uid}).then(res => {
+    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
-      console.log('familyData', familyData, res?.data?.result_list)
-
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})
     })

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -9,9 +9,8 @@ import usersService from "../../../../services/UsersService";
 import LoadingSpinner from "../../../Spinners/LoadingSpinner";
 import { PriceFormatter } from "../../../Helpers/PriceFormatter";
 import { tableReload } from "../../../../store/TableReloads";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { apiConst } from "../../../../lib/apiConst";
-import { SocketValues } from "../../../Contexts/SocketIOContext";
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -31,11 +30,6 @@ const validationSchema = Yup.object().shape({
 });
 
 function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
-
-  const {userDetails} = useSelector((state) => state?.userDetails); // Gets User Detail
-
-  const { parentAssignJobToKid } = SocketValues() // socket emit event from FULL account
-
   const dispatch = useDispatch();
 
   const apiUrl = new usersService();
@@ -60,7 +54,6 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
   };
   // FUNCTION TO PERFORM FAMILY TRANSFER
   const handleAddFund = (values) => {
-
     setRequestStatus({ loading: true, status: false, message: "" });
 
     let senderBal = startTransfer?.data?.origing_current_balance || ""; // SENDER'S ACCOUNT BALANCE
@@ -139,17 +132,6 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
           status: true,
           message: "Transfer Successful",
         });
-
-        //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
-        // message, room
-        let socketMsg = {
-          "audience": "MEMBER",
-          "action": "REFRESH_WALLET",
-          "family_uid": reqData.family_uid,
-        }
-        let socketRoom = `FAMILY-${userDetails.uid}`
-        parentAssignJobToKid(socketMsg, socketRoom) //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
-
         setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
           dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
@@ -188,13 +170,13 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
   return (
     <ModalCom action={action} situation={situation}>
       <div className="relative logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="modal-header-con">
-          <h1 className="modal-title">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Add Fund
           </h1>
           <button
             type="button"
-            className="modal-close-btn"
+            className="text-[#374557] dark:text-red-500"
             onClick={action}
           >
             <svg
@@ -289,7 +271,7 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
                       <div className="field w-full mb-[0.5rem]">
                         <div className="w-full">
                           <label
-                            htmlFor="job-label"
+                            htmlFor="Job Delivery Details"
                             className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
                           >
                             Comment

src/components/FamilyAcc/index.jsx

@@ -248,13 +248,13 @@ const FamilyForm = ({
 }) => {
   return (
     <div className="logout-modal-wrapper w-11/12 lg:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-      <div className="modal-header-con">
-        <h1 className="modal-title">
+      <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
+        <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
           Add Members
         </h1>
         <button
           type="button"
-          className="modal-close-btn"
+          className="text-[#374557] dark:text-red-500"
           onClick={popUpHandler}
         >
           <CloseIcon />
@@ -267,8 +267,8 @@ const FamilyForm = ({
           name="first_name"
           type="text"
           parentClass="flex items-center gap-1 w-full"
-          labelClass="flex-[0.4] mb-0"
-          inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
+          labelClass="flex-[0.2] mb-0"
+          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
           fieldClass="px-2"
           value={first_name}
           inputHandler={inputHandler}
@@ -279,8 +279,8 @@ const FamilyForm = ({
           name="last_name"
           type="text"
           parentClass="flex items-center gap-1 w-full"
-          labelClass="flex-[0.4] mb-0"
-          inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
+          labelClass="flex-[0.2] mb-0"
+          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
           fieldClass="px-2"
           value={last_name}
           inputHandler={inputHandler}
@@ -289,7 +289,7 @@ const FamilyForm = ({
           {/* Age dropdown */}
           <div className="">
             <label
-              className="job-label"
+              className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
               htmlFor="age-selection"
             >
               Birthday: (Year/Month)

src/components/MyWallet/FamilyWalletCon.jsx

@@ -9,9 +9,6 @@ const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
 const FamilyWalletCon = () => {
   const apiCall = new usersService();
   // const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
-
-  const {userDetails} = useSelector((state) => state?.userDetails); // GETS USER INFO
-
   const { walletTable } = useSelector((state) => state.tableReload);
 
   const [paymentHistory, setPaymentHistory] = useState({
@@ -26,7 +23,7 @@ const FamilyWalletCon = () => {
 
   const getFamilyWalletBal = () => {
     setFamilyWalletBal({loading:true, data: []})
-    apiCall.getFamilyWallet({family_uid: userDetails.uid}).then(res => {
+    apiCall.getFamilyWallet({family_uid: localStorage.getItem("uid")}).then(res => {
       setFamilyWalletBal({loading:false, data: res?.data?.result_list})
     }).catch(error => {
       setFamilyWalletBal({loading:false, data: []})

src/services/UsersService.js

@@ -1174,7 +1174,7 @@ class usersService {
     return this.postAuxEnd("/suggeststatus", postData);
   }
 
-  // FUNCTION TO GET FAMILY WALLET AS A KID
+  // FUNCTION TO GET FAMILY WALLET
   getFamilyWallet(reqData) {
     var postData = {
       uid: localStorage.getItem("uid"),
@@ -1186,18 +1186,6 @@ class usersService {
     return this.postAuxEnd("/familywallet", postData);
   }
 
-  // FUNCTION TO GET FAMILY WALLET AS A PARENT
-  getKidWallets(reqData) {
-    var postData = {
-      uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
-      action: apiConst.WRENCHBOARD_FAMILY_WALLET,
-      ...reqData,
-    };
-    return this.postAuxEnd("/kidwallets", postData);
-  }
-
   // FUNCTION TO START FAMILY TRANSFER
   familyTransferStart(reqData) {
     var postData = {