Fixed banner image

.env

@@ -90,4 +90,9 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

.env.development

@@ -58,4 +58,9 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

.env.production

@@ -64,4 +64,9 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -24,7 +24,7 @@ const ForgetPwdResponse = ({title, message, type}) => {
                 <button
                 type="button"
                 onClick={() => navigate("/login")}
-                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                 >
                     <span>Home</span>
                 </button>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -176,14 +176,14 @@ export default function ForgotPassword() {
                     <button
                         type="button"
                         onClick={() => navigate("/login")}
-                        className={`rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                       >
                         Cancel
                       </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        className={`rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                       >
                         {resetLoading ? (
                           <div className="signup btn-loader"></div>

src/components/AuthPages/Login/index.jsx

@@ -14,10 +14,14 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function Login() {
   const dispatch = useDispatch();
   const { state } = useLocation();
 
+  const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA
+
   let [loginType, setLoginType] = useState("");
 
   const [loginLoading, setLoginLoading] = useState(false);
@@ -107,6 +111,14 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
+    if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+      setMsgError("Please Verify Captcha");
+      setLoginLoading(false);
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
     userApi
       .logInUser(postData)
       .then((res) => {
@@ -120,6 +132,7 @@ export default function Login() {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
+          setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
           return;
         }
         localStorage.setItem("member_id", `${res.data.member_id}`);
@@ -135,6 +148,7 @@ export default function Login() {
       .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
+        setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
       })
       .finally(() => {
         setTimeout(() => {
@@ -145,6 +159,14 @@ export default function Login() {
       });
   };
 
+  function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA
+    if(value){
+      setValidCaptcha({show: true, valid:value})
+    }else{
+      setValidCaptcha({show: true, valid:''})
+    }
+  }
+
   const googleLogin = useGoogleLogin({
     flow: "auth-code",
     ux_mode: "redirect",
@@ -296,6 +318,17 @@ export default function Login() {
                         forgotPassword
                       />
                     </div>
+
+                    {/* hCaptha clone for the time being */}
+                    {validCaptcha.show &&
+                    <div className="mb-5 flex justify-center w-full">
+                      <ReCAPTCHA
+                        sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                        onChange={captchaChecker}
+                        />
+                    </div>
+                    }
+
                     {loginError && (
                       <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
                         Invalid username or password- Please{" "}

src/components/Cards/AvailableJobsCard.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import dataImage2 from "../../assets/images/taskbanners/default.jpg";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 

src/components/FamilyAcc/FamilyManageTabs.jsx

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

src/components/FamilyAcc/FamilyTable.jsx

@@ -139,8 +139,8 @@ export default function FamilyTable({
                   </tr>
                 </thead>
                 <tbody className="h-full">
-                  {currentFamilyList?.map((familyMember) => {
-                    return <FamilyRow {...familyMember} />;
+                  {currentFamilyList?.map((familyMember, index) => {
+                    return <FamilyRow key={index} {...familyMember} />;
                   })}
                 </tbody>
               </table>

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -1,11 +1,221 @@
-export default function FamilyProfile({ className }) {
+import { useState } from "react";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";
+
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+
+export default function FamilyProfile({familyData, className }) {
+
+  const validationSchema = Yup.object().shape({
+    firstname: Yup.string()
+      .required("Firstname is required"),
+    lastname: Yup.string()
+      // .min(3, "Minimum 3 characters")
+      // .max(25, "Maximum 25 characters")
+      .required("Lastname is required"),
+    year: Yup.number()
+      .required("Year is required")
+      .min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
+      .max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
+    month: Yup.number()
+      .required("Month is required")
+      .min(1, "Month is required"),
+  });
+
+  const navigate = useNavigate()
+  const api = new usersService()
+
+  let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
+
+  // let [updateDetails, setUpdateDetails] = useState({
+  //   family_uid: familyData.uid,
+  //   firstname: familyData.firstname,
+  //   lastname: familyData.lastname,
+  //   year: familyData.year,
+  //   month: familyData.month,
+  //   action: 22020
+  // })
+
+  // initial values for formik
+  let initialValues = {
+    family_uid: familyData.uid,
+    firstname: familyData.firstname,
+    lastname: familyData.lastname,
+    year: familyData.year,
+    month: familyData.month,
+    action: 22020
+  };
+  
+  const handleChange = ({target:{name, value}})=>{
+    setUpdateDetails(prev => ({...prev, [name]:value}))
+  }
+
+  const updateFamily = (values, helpers) => {
+    setRequestStatus({loading:true, status:false, message: ''})
+    // let {firstname, lastname, year, month} = updateDetails
+    // if(!firstname || !lastname || year == 0 || month == 0) {
+    //   setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
+    //   return setTimeout(()=>{
+    //     setRequestStatus({loading:false, status:false, message: ''})
+    //   }, 5000)
+    // }
+    api.getFamilyUpdate(values).then(res=>{
+      if(res.data.internal_return < 0){
+        return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
+      }
+      setRequestStatus({loading:false, status:true, message: 'Family account updated'})
+      setTimeout(()=>{
+        navigate('/acc-family', {replace:true})
+      }, 5000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message: ''})
+      }, 5000)
+    })
+  }
+
   return (
     <div
-      className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
+      className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
         className || ""
       }`}
     >
-      <h1>Profile</h1>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={updateFamily}
+      >
+        {(props) => {
+          return (
+          <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
+            <InputCom
+              placeholder="Firstname"
+              label="First Name:"
+              name="firstname"
+              type="text"
+              parentClass="flex items-center gap-1 w-full"
+              labelClass="flex-[0.2] mb-0"
+              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
+              fieldClass="px-2"
+              value={props.values.firstname}
+              inputHandler={props.handleChange}
+            />
+            <InputCom
+              placeholder="Lastname"
+              label="Last Name:"
+              name="lastname"
+              type="text"
+              parentClass="flex items-center gap-1 w-full"
+              labelClass="flex-[0.2] mb-0"
+              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
+              fieldClass="px-2"
+              value={props.values?.lastname}
+              inputHandler={props.handleChange}
+            />
+            <div className="input-com mb-7 flex flex-col gap-1 w-full">
+              {/* Age dropdown */}
+              <div className="">
+                <label
+                  className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                  htmlFor="age-selection"
+                >
+                  Birthday: (Year/Month)
+                </label>
+                {((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
+                  <span className="text-[12px] text-red-500">
+                    {' '}{props.errors.year || props.errors.month}
+                  </span>
+                )}
+              </div>
+              <div className="flex max-w-[330px] w-full self-end gap-4">
+                <select
+                  name='year'
+                  id="yearDropdown"
+                  value={props.values.year}
+                  onChange={props.handleChange}
+                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
+                >
+                  <option value="">Select a Year</option>
+                  {years.map((year) => (
+                    <option key={year} value={year}>
+                      {year}
+                    </option>
+                  ))}
+                </select>
+
+                <select
+                  name='month'
+                  id="monthDropdown"
+                  // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
+                  value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
+                  onChange={props.handleChange}
+                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
+                >
+                  <option value="">Select a Month</option>
+                  {months.map(({id, name}) => (
+                    <option key={id} value={id}>
+                      {name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            {requestStatus.message && (
+              <div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
+                {requestStatus.message}
+              </div>
+            )}
+            <div className="flex justify-end w-full">
+              {requestStatus.loading ?
+                <>
+                <div className="signup btn-loader"></div>
+                <LoadingSpinner size='4' />
+                </>
+                :
+                <button
+                type="submit"
+                // onClick={updateFamily}
+                // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+                >
+                Update
+                </button>
+              }
+            </div>
+          </Form>
+          );
+        }}
+      </Formik>
     </div>
   );
 }
+
+  // Get the current year
+  // const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
+  const currentYear = new Date().getFullYear();
+
+  // Generate an array of years from the current year to (currentYear - 19)
+  const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
+
+  const months = [
+    {id:'1', name:"January"},
+    {id:'2', name:"February"},
+    {id:'3', name:"March"},
+    {id:'4', name:"April"},
+    {id:'5', name:"May"},
+    {id:'6', name:"June"},
+    {id:'7', name:"July"},
+    {id:'8', name:"August"},
+    {id:'9', name:"September"},
+    {id:'10', name:"October"},
+    {id:'11', name:"November"},
+    {id:'12', name:"December"},
+  ];
+
+

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -197,11 +197,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             <hr />
             <div className="my-3 w-full flex flex-col gap-3">
               <div className="w-full">
-                <label className="w-full text-slate-900 dark:text-white tracking-wide">
+                <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 border-slate-300 rounded-md`}
+                  className={`p-1 w-full text-lg text-slate-900 dark:text-white bg-transparent outline-none border-2 border-slate-900 rounded-md`}
                   rows="5"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
@@ -210,7 +210,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 />
               </div>
               <button
-                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
+                className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
                 name="market-message"
                 onClick={MarketDetail}
               >
@@ -225,10 +225,10 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-[23%] h-full ">
+          <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-[498px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
-                <p className="w-full text-slate-900 tracking-wide my-1">
+                <p className="w-full text-slate-900 tracking-wide my-1 font-semibold">
                   Interested in the task?
                 </p>
                 <hr />
@@ -270,7 +270,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               </div>
             </div>
             <button
-              className="self-end w-[150px] mt-2 h-[52px] rounded-md text-base bg-transparent border border-red-500 text-red-500 mx-auto"
+              className="self-center w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500 mx-auto"
               name="cancel"
               onClick={onClose}
             >

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -118,7 +118,11 @@ function PastDueJobAction({jobDetails}) {
             <tr>
                 <td>
                     <div className="flex justify-center items-center">
-                        <button type="button" onClick={popUpHandler} className="w-[180px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button 
+                            type="button" 
+                            onClick={popUpHandler} 
+                            className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        >
                             Cancel or Extend Timeline
                         </button>
                     </div>
@@ -230,8 +234,12 @@ function PastDueJobAction({jobDetails}) {
                         
                         {/* cancel btn */}
                         <div className='flex justify-end items-center'>
-                            <button onClick={popUpHandler} type="button" className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
-                                <span className='text-gradient'>Cancel</span>
+                            <button onClick={popUpHandler} type="button" 
+                                // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                                className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
+                            >
+                                Cancel
+                                {/* <span className='text-gradient'>Cancel</span> */}
                             </button>
                         </div>
                     </div> 

src/services/UsersService.js

@@ -578,13 +578,14 @@ class usersService {
     return this.postAuxEnd("/familyadd", postData);
   }
 
-  getFamilyUpdate() {
+  getFamilyUpdate(reqdata) {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
+      ...reqdata
     };
     return this.postAuxEnd("/familyupdate", postData);
   }