auth layout page changed

src/Routers.jsx

@@ -24,6 +24,7 @@ import JobGroupsPage from "./views/JobGroupsPage";
 import LndPage from "./views/LndPage";
 import LoginPage from "./views/LoginPage";
 import LoginPageTwo from "./views/LoginPageTwo";
+import LoginLandingPage from './views/LoginLandingPage'
 import ManageActiveJobs from "./views/ManageActiveJobs";
 import ManageInterestOfferPage from "./views/ManageInterestOfferPage";
 import MarketPlacePage from "./views/MarketPlacePage";
@@ -78,7 +79,8 @@ export default function Routers() {
         {/* guest routes */}
         {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
           <>
-            <Route exact path="/login" element={<LoginPageTwo />} />
+            <Route exact path="/login" element={<LoginLandingPage />} />
+            <Route exact path="/login/:type" element={<LoginPageTwo />} />
             <Route exact path="/signup" element={<SignupPageTwo />} />
             <Route
               exact
@@ -144,6 +146,7 @@ export default function Routers() {
           <Route exact path="/market" element={<MarketPlacePage />} />
           <Route exact path="/familymarket" element={<FamilyMarketPage />} />
           <Route exact path="/suggested" element={<ParentWaitingPage />} />
+          <Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
           <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
           <Route exact path="/fam-blog" element={<FamBlogPage />} />
           <Route exact path="/ai-question" element={<FamAIQuestionPage />} />

src/components/AuthPages/AuthLayout2.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { localImgLoad } from "../../lib";
+import WrenchBoard from "../../assets/images/wrenchboard-logo-text.png";
 
 import DarkModeContext from "../Contexts/DarkModeContext";
 
@@ -18,15 +19,23 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      
-      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
+      <div className="my-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+      <div className={`h-full w-full grid grid-cols-1 place-content-center`}>
         {/* <div 
             className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
-        <div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="pt-8 pb-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -89,15 +89,6 @@ export default function ForgotPassword() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
             {msgSuccess == null ?

src/components/AuthPages/Login/LoginLanding.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import KidIcon from '../../../assets/images/auth/children.png'
+import ParentIcon from '../../../assets/images/auth/adult.png'
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+import { useDispatch } from "react-redux";
+// import { updateUserDetails } from "../../../store/UserDetails";
+
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
+
+export default function LoginLanding() {
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          {/* <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div> */}
+          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
+          <div className="flex place-content-center">
+            <div className="w-10/12">
+              <div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
+                {/* APP DOWNLOAD STORE */}
+                <div className="col-span-1 order-2 sm:col-span-1 sm:order-1 w-full">
+                  <div className="sm:border-r-2 border-slate-400 w-full h-full flex sm:flex-col justify-center gap-4">
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_APPLE_APP}
+                      >
+                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                      >
+                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-span-1 order-1 sm:col-span-2 sm:order-2 title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
+                  <h1 className="text-[#181c32] font-medium dark:text-white leading-6 text-2xl tracking-wide">
+                    <span className='font-semibold'>Log in</span> as a:
+                  </h1>
+
+                  <div className='w-full flex flex-col gap-4'>
+                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Adult or Parent</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+
+                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={KidIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Kids or Teens</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+                  </div>
+
+                  <div className="text-gray-400 font-medium text-xl leading-[24.375px]">
+                    Don't have an account?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-emerald-800 hover:text-emerald-600 transition"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index2.jsx

@@ -33,7 +33,7 @@ export default function Login() {
 
   const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
-  let [loginType, setLoginType] = useState("");
+  let [loginType, setLoginType] = useState('');
 
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -199,43 +199,43 @@ export default function Login() {
   // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   // }, []);
 
-  useLayoutEffect(() => {
-    // checks the cookie in order to set the login type before components mounts
-    // if(document.cookie.includes("loginType=family")){
-    //   setLoginType('family')
-    // }else if(document.cookie.includes("loginType=full")){
-    //   setLoginType('full')
-    // }else{
-    //   setLoginType('full')
-    // }
-    function readCookie(cname) {
-      // checks the cookie in order to set the login type before components mounts
-      let name = cname + "=";
-      let decoded_cookie = decodeURIComponent(document.cookie);
-      let carr = decoded_cookie.split(";");
-      for (let i = 0; i < carr.length; i++) {
-        let c = carr[i];
-        while (c.charAt(0) == " ") {
-          c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-          return c.substring(name.length, c.length);
-        }
-      }
-      return "full";
+  useEffect(()=>{
+    if(state && state.loginType){
+      setLoginType(state.loginType)
+    }else{
+      navigate('/login', {replace: true})
     }
-    let loginValue = readCookie("loginType");
-    setLoginType(loginValue);
+  },[])
 
-    if (state?.error) {
-      //check if the login path has an error state indicating any social handle login with error
-      setMsgError("Unexpected Error, Please try again soon.");
-      setTimeout(() => {
-        setMsgError("");
-        navigate("/login", { replace: true });
-      }, 4000);
-    }
-  }, []);
+  // useLayoutEffect(() => {
+  //   function readCookie(cname) {
+  //     // checks the cookie in order to set the login type before components mounts
+  //     let name = cname + "=";
+  //     let decoded_cookie = decodeURIComponent(document.cookie);
+  //     let carr = decoded_cookie.split(";");
+  //     for (let i = 0; i < carr.length; i++) {
+  //       let c = carr[i];
+  //       while (c.charAt(0) == " ") {
+  //         c = c.substring(1);
+  //       }
+  //       if (c.indexOf(name) == 0) {
+  //         return c.substring(name.length, c.length);
+  //       }
+  //     }
+  //     return "full";
+  //   }
+  //   let loginValue = readCookie("loginType");
+  //   setLoginType(loginValue);
+
+  //   if (state?.error) {
+  //     //check if the login path has an error state indicating any social handle login with error
+  //     setMsgError("Unexpected Error, Please try again soon.");
+  //     setTimeout(() => {
+  //       setMsgError("");
+  //       navigate("/login", { replace: true });
+  //     }, 4000);
+  //   }
+  // }, []);
 
   useEffect(() => {
     setMail("");
@@ -259,7 +259,7 @@ export default function Login() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
+          {/* <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -267,13 +267,13 @@ export default function Login() {
                 className="h-10 mx-auto"
               />
             </Link>
-          </div>
+          </div> */}
           {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
           <div className="flex place-content-center">
             <div className="w-10/12">
               {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
               {sessionExpired != "true" && (
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <div className="hidden title-area --flex-- flex-col justify-center items-center relative text-center mb-7">
                   {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1> */}
@@ -299,7 +299,7 @@ export default function Login() {
               )}
 
               {/* switch login component */}
-              <div className="ml-7 flex justify-start items-center gap-3">
+              <div className="hidden --flex-- ml-7 justify-start items-center gap-3">
                 <button
                   name="full"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
@@ -390,7 +390,7 @@ export default function Login() {
                         {msgError}
                       </div>
                     )}
-                    <div className="signin-area mb-3.5">
+                    <div className="signin-area">
                       <div className="flex justify-center">
                         <button
                           name="full"
@@ -524,10 +524,13 @@ export default function Login() {
                 )
                 // END of family login compoenent
               }
+              <div className='w-full text-center'>
+                <Link className='text-center block font-semibold text-lg pt-3 tracking-wide' to='/login'>Return</Link>
+              </div>
               {/* END of login component */}
 
               {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
+              <div className="hidden w-full mt-4">
                 <div className="w-full flex justify-center items-center gap-4">
                   <div className="w-32 lg:w-48">
                     <a
@@ -568,7 +571,7 @@ export default function Login() {
 
               {loginType == "full" && (
                 <>
-                  <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  <div className="hidden pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                     This site is protected by a Captcha. <br />Our Privacy Policy and
                     Terms of Service apply.
                   </div>

src/components/AuthPages/Promo/Promo.jsx

@@ -107,15 +107,6 @@ export default function Promo() {
   return (
     <PromoPageLayout>
       <div className="w-full">
-        <div className="mb-5">
-          <Link to="#">
-            <img
-              src={WrenchBoard}
-              alt="wrenchboard"
-              className="h-10 mx-auto"
-            />
-          </Link>
-        </div>
         {requestStatus.loading ?
           <div className='flex flex-col justify-center items-center'>
             <LoadingSpinner height='h-40' size='8' />
@@ -178,47 +169,7 @@ export default function Promo() {
                     </button>
                   </div>
                 </div>
-
-              {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
-                <div className="w-full flex justify-center items-center gap-4">
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_APPLE_APP}
-                    >
-                      {/* <i className="fa-brands fa-apple text-3xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          App Store
-                        </span>
-                      </div> */}
-                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_ANDROID_APP}
-                    >
-                      {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          Google Play
-                        </span>
-                      </div> */}
-                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                </div>
-              </div>
-              </div>
+            </div>
           </div>
           :
           <ErrorComponent onClick={() => navigate("/login")} />

src/components/AuthPages/SignUp/index2.jsx

@@ -157,15 +157,6 @@ export default function SignUp() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
-            <Link to={currentPath}>
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
@@ -346,46 +337,6 @@ export default function SignUp() {
                     </button>
                   </div>
                 </div>
-
-                {/* APP DOWNLOAD STORE */}
-                <div className="w-full mt-4">
-                  <div className="w-full flex justify-center items-center gap-4">
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_APPLE_APP}
-                      >
-                        {/* <i className="fa-brands fa-apple text-3xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            App Store
-                          </span>
-                        </div> */}
-                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_ANDROID_APP}
-                      >
-                        {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            Google Play
-                          </span>
-                        </div> */}
-                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>

src/components/AuthPages/VerifyLink/index2.jsx

@@ -137,15 +137,6 @@ export default function VerifyLink() {
           </div>
         ) : (
           <div className="w-full">
-            <div className="mb-12">
-              <Link to="#">
-                <img
-                  src={WrenchBoard}
-                  alt="wrenchboard"
-                  className="h-10 mx-auto"
-                />
-              </Link>
-            </div>
             <div className="flex place-content-center">
               <div className="w-10/12">
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -139,15 +139,6 @@ const VerifyPassword = () => {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             {requestStatus.loading ? (
               <LoadingSpinner color="sky-blue" size="16" height="h-300px" />

src/components/AuthPages/VerifyYou/index2.jsx

@@ -8,15 +8,6 @@ export default function VerifyYou() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/Cards/ResourceBlogCard.jsx

@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
   
   return (
     <div
-      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
         className || ""
       }`}
     >
       <div className="flex flex-col justify-between w-full h-full">
         <div className="thumbnail-area w-full">
           <div
-            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            className="w-full h-[140px] p-6  rounded-lg overflow-hidden"
             style={{
               // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
+              backgroundSize: '100%',
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 mb-2.5" rel="noreferrer">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               {datas.post_title || "dummy title..."}
             </h1>

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

@@ -0,0 +1,600 @@
+import { useEffect, useState } from "react";
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useSelector } from "react-redux";
+import ModalCom from "../../../Helpers/ModalCom";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import CustomTimer from "../../../countdown/CustomTimer";
+import InputCom from '../../../Helpers/Inputs/InputCom'
+import usersService from "../../../../services/UsersService";
+
+
+const validationSchema = Yup.object().shape({
+
+  country: Yup.string()
+    .required("Required"),
+  phone_number: Yup.string()
+    .min(9, "Invalid")
+    .max(11, "Invalid")
+    .required("Required"),
+  // birthYear: Yup.string()
+  //   .required("Required"),
+  // birthMonth: Yup.string()
+  //   .required("Required"),
+  // birthDay: Yup.string()
+  //   .required("Required"),
+  address: Yup.string()
+    .min(5, "Min 3 characters")
+    .max(50, "Max 25 characters")
+    .required("Required"),
+  city: Yup.string()
+    .min(2, "Min 3 characters")
+    .max(25, "Max 25 characters")
+    .required("Required"),
+  state: Yup.string()
+    .required("Required"),
+  zipCode: Yup.string()
+    .min(1, "Min 3 characters")
+    .max(8, "Max 8 characters")
+    .required("Required"),
+  dob: Yup.string()
+    .required("Required"),
+checked: Yup.bool() // use bool instead of boolean
+    .oneOf([true], "You must accept the terms and conditions")
+});
+
+const VirtualAddCardFamilyPopout = ({ details, onClose, situation, walletItem, familyData }) => {
+    // console.log('PROPS', 'DETAILS', details, 'WALLET', walletItem, 'FAMILYDATA', familyData)
+
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const countryCode = walletItem?.country
+
+  const userApi = new usersService()
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''})
+
+  const [allCountries, setAllCountries] = useState({loading: true, data: []}) // VARIABLE TO HOLD COUNTRY LIST
+
+  const [state, setState] = useState({loading: true, data: {}}) // VARIABLE TO HOLD STATE LIST
+
+  
+  let initialValues = {
+    // initial values for formik
+    country: countryCode ? countryCode : '',
+    phone_number: '',
+    email: userDetails?.email,
+    firstname: familyData?.firstname,
+    lastname: familyData?.lastname,
+    family_uid: familyData?.uid,    
+    birthYear: '',
+    birthMonth: '',
+    birthDay: '',
+    address: '',
+    city: '',
+    // city: userDetails?.city ? userDetails.city : '',
+    state: '',
+    zipCode: '',
+    dob: '',
+    checked: false
+  };
+
+  
+  const handleSubmit = (values) => {
+    let date = new Date(values.dob)
+    const reqData = {
+      request_type: '100',
+      address: values.address,
+      city: values.city,
+      state: values.state,
+      country: values.country,
+      postal_code: values.zipCode,
+      phone_number: values.phone_number,
+      family_uid: values.family_uid,
+      // dob_day: values.birthDay,
+      // dob_month: values.birthMonth,
+      // dob_year: values.birthYear,
+      dob_day: Number(date.getDate()),
+      dob_month: Number(date.getMonth()) + 1,
+      dob_year: Number(date.getFullYear()),
+      dob: values.dob
+    }
+    // console.log('Values', reqData)
+    setRequestStatus({loading: true, status:false, message: ''})
+    userApi.walletCardFamilyRequest(reqData).then(res => {
+      if(res?.data?.internal_return < 0){
+        setRequestStatus({loading: false, status:false, message: 'Failed, try again'})
+        setTimeout(()=>{
+          setRequestStatus({loading: false, status:true, message: ''})
+        },4000)
+        return 
+      }
+      setRequestStatus({loading: false, status:true, message: 'Successful'})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status:true, message: ''})
+        onClose()
+      },4000)
+    }).catch(err => {
+      console.log('ERR', err)
+      setRequestStatus({loading: false, status:false, message: 'Unable to complete'})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status:false, message: ''})
+      },4000)
+    })
+  }
+
+  useEffect(()=>{
+      // Get Country Api
+    userApi.getSignupCountryData().then(res =>{
+    if(!res?.data?.result_list){
+      return setAllCountries({ loading: false, data: [] });
+    }
+    // if(countryCode){
+    //   return setAllCountries({ loading: false, data: res?.data?.result_list?.filter(item => item?.code == countryCode) });
+    // }
+    setAllCountries({ loading: false, data: res?.data?.result_list });
+    }).catch(err => {
+      setAllCountries({ loading: false, data: [] });
+      console.log('err', err)
+    })
+  },[])
+
+  useEffect(()=>{
+    // GET STATE API
+    setState({loading: true, data: {}})
+  userApi.getStateFromCountry({country: countryCode}).then(res =>{
+  if(!res?.data?.country_state){
+    return setState({ loading: false, data: {} });
+  }
+  setState({ loading: false, data: res?.data?.country_state});
+  }).catch(err => {
+    setState({ loading: false, data: {} });
+    console.log('err', err)
+  })
+},[initialValues.country])
+
+  return (
+    <ModalCom
+      action={onClose}
+      situation={situation}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        {(props) => (
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+            <Form className="w-full">
+              <div className="modal-header-con">
+                <h1 className="modal-title">
+                  {walletItem?.description}
+                </h1>
+                <button
+                  type="button"
+                  className="modal-close-btn"
+                  onClick={onClose}
+                >
+                  <svg
+                    width="36"
+                    height="36"
+                    viewBox="0 0 36 36"
+                    fill="none"
+                    className="fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                      fill=""
+                      fillOpacity="0.6"
+                    />
+                    <path
+                      d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                      fill="#"
+                      fillOpacity="0.6"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
+                <div className='pb-4'>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{familyData.lastname} {familyData.firstname}</h1>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
+                  {/* left part */}
+                  <div className='w-full flex flex-col gap-4'>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
+                        <div className="md:col-span-2 field w-full">
+                          <label
+                            htmlFor="country"
+                            className="job-label job-label-flex"
+                          >
+                            <span>Country</span>
+                            {props.errors.country && props.touched.country && (
+                              <span className="text-[12px] text-red-500">
+                                {props.errors.country}
+                              </span>
+                            )}
+                          </label>
+                          <select
+                            id="country"
+                            name="country"
+                            value={props.values.country}
+                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                            onChange={props.handleChange}
+                            disabled={countryCode ? true : false}
+                          >
+                            {allCountries.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : allCountries.data?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select Country
+                              </option>
+                              {allCountries.data?.map(item => (
+                                <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
+                                  {item.country}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                          </select>
+                        </div>
+                        <div className='md:col-span-3'>
+                          <InputCom
+                          fieldClass="px-6"
+                          label="Phone Number"
+                          labelClass="tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="w-full input-curve lg border border-light-purple"
+                          type="text"
+                          name="phone_number"
+                          value={props.values.phone_number}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                          />
+                        </div>
+                    </div>
+                    <InputCom
+                      disable={true}
+                      fieldClass="px-6"
+                      label="Email"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="email"
+                      value={props.values.email}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.email && props.touched.email) && props.errors.email}
+                    />
+                    <div className="hidden field w-full md:grid-cols-2 gap-4">
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Firstname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="firstname"
+                        value={props.values.firstname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
+                      />
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Lastname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="lastname"
+                        value={props.values.lastname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
+                      />
+                    </div>
+
+                    {/* hidden section */}
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthDay"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Day</span>
+                              {props.errors.birthDay && props.touched.birthDay && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthDay}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthDay"
+                              name="birthDay"
+                              value={props.values.birthDay}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {day.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthMonth"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Month</span>
+                              {props.errors.birthMonth && props.touched.birthMonth && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthMonth}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthMonth"
+                              name="birthMonth"
+                              value={props.values.birthMonth}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {month.map(item => (
+                                <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
+                                  {item.name}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthYear"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Year</span>
+                              {props.errors.birthYear && props.touched.birthYear && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthYear}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthYear"
+                              name="birthYear"
+                              value={props.values.birthYear}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {year.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                        </div>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Date of Birth"
+                          labelClass="md:hidden tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="input-curve lg border border-light-purple"
+                          type="date"
+                          name="dob"
+                          value={props.values.dob}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.dob && props.touched.dob) && props.errors.dob}
+                          maxDate={year[0] + '-12-31'}
+                          minDate={year[year?.length - 1] + '-01-01'}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* right part */}
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Address"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="address"
+                      value={props.values.address}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.address && props.touched.address) && props.errors.address}
+                    />
+                    <InputCom
+                      fieldClass="px-6"
+                      label="City"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="city"
+                      value={props.values.city}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.city && props.touched.city) && props.errors.city}
+                    />
+                    {/* <InputCom
+                      fieldClass="px-6"
+                      label="State/Province"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="state"
+                      value={props.values.state}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.state && props.touched.state) && props.errors.state}
+                    /> */}
+
+                    <div className="field w-full grid md:grid-cols-2 gap-4">
+                      <div className="field w-full">
+                        <label
+                          htmlFor="state"
+                          className="job-label job-label-flex"
+                        >
+                          <span>State/Province</span>
+                          {props.errors.state && props.touched.state && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.state}
+                            </span>
+                          )}
+                        </label>
+                        <select
+                          id="state"
+                          name="state"
+                          value={props.values.state}
+                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                          onChange={props.handleChange}
+                        >
+                          {state.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : Object.keys(state.data)?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select State
+                              </option>
+                              {Object.keys(state.data)?.map((item, index) => (
+                                <option key={index} className="text-slate-500 text-lg" value={item}>
+                                  {state?.data[item]}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                        </select>
+                      </div>
+                  
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Zip Code"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="zipCode"
+                        value={props.values.zipCode}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='p-4 w-full job-label'>
+                <div className='flex gap-4 items-center'>
+                    <input 
+                    type='checkbox' 
+                    name="checked"
+                    className='accent-purple w-4 h-4 p-2 text-purple bg-gray-100 border-gray-300 rounded focus:ring-purple' 
+                    onChange={props.handleChange}
+                    />
+                    <p className='text-[14px] text-justify'>
+                        I agree with the <span className='text-bue-600'>cardholder </span> 
+                        terms & conditions {props.errors.checked && props.touched.checked && <span className='text-[12px] text-red-500'>{props.errors.checked}</span>}
+                    </p>
+                </div>
+              </div>
+              {requestStatus.message &&
+              <div className='px-4 my-1'>
+                <p className={`text-center text-base py-1 font-bold ${requestStatus.status ? 'bg-emerald-600 text-white' : 'bg-red-100 text-red-600'}`}>{requestStatus.message}</p>
+              </div>
+              }
+              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                  <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+                      <button
+                      type="button"
+                      onClick={onClose}
+                      className="custom-btn bg-[#f5a430] text-black text-base"
+                      >
+                      Cancel
+                      </button>
+
+                      <>
+                      {requestStatus.loading ?
+                      <LoadingSpinner size="6" color="sky-blue" />
+                      :
+                      <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-base text-white"
+                      disabled={requestStatus.loading || requestStatus.status}
+                      >
+                      Continue
+                      </button>
+                      }
+                      </>
+                  </div>
+              </div>
+            </Form>
+          </div>
+        )}
+      </Formik>
+    </ModalCom>
+  );
+};
+
+export default VirtualAddCardFamilyPopout;
+
+
+
+const day = new Array(31).fill(0).map((_,i) => i+1 )
+
+const month = [
+  {value: 1, name: 'January'},
+  {value: 2, name: 'February'},
+  {value: 3, name: 'March'},
+  {value: 4, name: 'April'},
+  {value: 5, name: 'May'},
+  {value: 6, name: 'June'},
+  {value: 7, name: 'July'},
+  {value: 8, name: 'August'},
+  {value: 9, name: 'September'},
+  {value: 10, name: 'October'},
+  {value: 11, name: 'November'},
+  {value: 12, name: 'December'},
+]
+
+const date = new Date().getFullYear()
+
+const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )

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

@@ -2,9 +2,31 @@ import React, { useState } from 'react'
 import { localImgLoad } from '../../../../lib'
 import { PriceFormatter } from '../../../Helpers/PriceFormatter'
 import FamilyAddFundPopout from './FamilyAddFundPopout'
+import VirtualAddCardFamilyPopout from './VirtualAddCardFamilyPopout'
 
 function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
+    console.log('WALLET', wallet.brand)
+
+    // virtual add card popout
+    const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); 
+
+    /*OPENS the virtual add card popout*/
+    const openVirtualPopUp = (value) => {
+      setVirtualPopup({
+        show: true,
+        data: { ...value },
+      });
+    };
+
+    /*Closes the virtual add card popout*/
+    const closeVirtualPopUp = () => {
+      setVirtualPopup({ show: false, data: {} });
+      // dispatch(tableReload({ type: "WALLETTABLE" }));
+    };
+
+  // console.log('Extra Actions', Object.keys(wallet.extra_actions))
+  let extraActions = Object.keys(wallet.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES
 
   return (
     <div className='w-full p-4 bg-[aliceblue] rounded-lg'
@@ -21,22 +43,33 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
         />
       </div>
       <div className="w-full flex flex-col">
-        <div className="w-full flex gap-2">
-          <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
-            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>
+        {wallet?.brand && wallet?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+          <div className="w-full flex flex-col gap-2">
+            {/* <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
+              Balance:
+            </p> */}
+            <p className="text-base md:text-lg font-bold text-purple leading-10">
+              {wallet.brand} <span> **** **** ***** </span> {wallet?.card_last4}
+            </p>
+          </div>
+          :
+          <div className="w-full flex gap-2">
+            <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
+              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>
+        }
         {/* BTN */}
         <div className='mt-1 flex justify-end items-center gap-2'>
             <button
@@ -48,13 +81,28 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
             >
                 Add Money
             </button>
-            <button
-                className="w-[150px] h-[48px] rounded-full text-base text-white bg-[#4687ba] hover:bg-[#009ef7]"
-                name="plan"
-                // onClick={onClose}
-            >
-                Add Card
-            </button>
+            
+            {/* EXTRA ACTIONS BTN */}
+            {(extraActions && extraActions?.length > 0) &&
+              extraActions.map((action, index) => (
+                <div key={index}>
+                  <button
+                    onClick={() => { 
+                      action == 'ADD_VIRTUAL_CARD' ? 
+                      openVirtualPopUp({wallet})
+                      :
+                      null
+                    }}
+                    className={`w-[150px] h-[48px] rounded-full text-base text-white bg-[#4687ba] hover:bg-[#009ef7]`}
+                  >
+                    {/* Add Card */}
+                    {wallet?.extra_actions?.[action][0]?.text}
+                  </button>
+                  {/* <WalletExtraFamilyActionBtn /> // TO BE USED lATER IF NEED BE */}
+                </div>
+              ))
+            }
+
         </div>
       </div>
     </div>
@@ -71,6 +119,17 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
             familyData={familyData}
         />
     }
+
+    {/* VIRTUAL CARD POPOUT */}
+    {virtualPopup.show && (
+      <VirtualAddCardFamilyPopout
+        details={virtualPopup.data}
+        walletItem={wallet}
+        onClose={closeVirtualPopUp}
+        situation={virtualPopup.show}
+        familyData={familyData}
+      />
+    )}
 </div>
   )
 }

src/components/FamilyPopup/SuggestTask.jsx

@@ -19,7 +19,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     setSuggestedNextStep(value);
   };
 
-  const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
+  // const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
+  const selectedImage = require(`../../assets/images/family/${details ? details.banner : 'default.jpg'}`);
   const initialValues = {
     title: details?.title || "",
     description: details?.description || "",

src/components/Home/index.jsx

@@ -61,7 +61,7 @@ export default function Home(props) {
 
   return (
     <Layout>
-      {Object.keys(commonHeadBanner).length < 1 ?
+      {/* {Object.keys(commonHeadBanner).length < 1 ?
       <LoadingSpinner height='h-48' size='16' />
       :
       <div className="w-full">
@@ -88,7 +88,38 @@ export default function Home(props) {
           </div>
         )}
       </div>
-      }
+      } */}
+
+        <div className="w-full">
+          {userDetails && userDetails?.account_type == "FAMILY" ? (
+            <FamilyDash
+              account={userDetails}
+              commonHeadData={props.bannerList}
+              // familyOffers={MyOffersList?.data}
+              serverImg = {userDetails?.session_image_server}
+              // MyActiveJobList={MyActiveJobList?.data}
+            />
+          ) : userDetails && userDetails?.account_type == "FULL" ? (
+            <>
+              {Object.keys(commonHeadBanner).length < 1 ?
+              <LoadingSpinner height='h-48' size='16' />
+              :
+              <FullAccountDash
+                bannerList={props.bannerList}
+                dashTypes={props.dashTypes}
+                // offersList={MyOffersList}
+                // MyActiveJobList={MyActiveJobList}
+                offersList={props.offersList}
+                imageServer={props.imageServer}
+              />
+              }
+            </>
+          ) : (
+            <div>
+              You are not logged in or your account type is not supported.
+            </div>
+          )}
+        </div>
     </Layout>
   );
 }

src/components/MarketPlace/index.jsx

@@ -1,15 +1,27 @@
-import { useSelector } from "react-redux";
+import {useEffect} from 'react'
+import { useSelector,  useDispatch} from "react-redux";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MainSection from "./MainSection";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { tableReload } from '../../store/TableReloads';
 
 export default function MarketPlace({ commonHeadData }) {
+
+  const dispatch = useDispatch()
+
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   const categories = jobLists?.categories;
   const image_server = jobLists?.session_image_server;
+  console.log('Lenth', marketData?.length )
+
+  useEffect(()=>{
+    if(!jobLists.loading && (marketData?.length < 1 || !marketData)){
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
+    }
+  },[])
 
   return (
     <>

src/components/MyWallet/FamilyWalletCon.jsx

@@ -50,7 +50,7 @@ const FamilyWalletCon = () => {
   };
 
   useEffect(() => {
-    getPaymentHistory();
+    // getPaymentHistory();
     getFamilyWalletBal()
   }, [walletTable]);
 
@@ -74,7 +74,7 @@ const FamilyWalletCon = () => {
       }>
         <FamilyWalletBox
           wallet={familyWalletBal}
-          payment={paymentHistory}
+          // payment={paymentHistory}
         />
       </Suspense>
     </Layout>

src/components/MyWallet/Wallet.jsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletBox from "./WalletBox";
+import { tableReload } from '../../store/TableReloads';
 
 const WalletRoutes = () => {
+  const dispatch = useDispatch()
+
   const apiCall = new usersService();
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
@@ -60,6 +63,12 @@ const WalletRoutes = () => {
     getPaymentHistory();
   }, [walletTable]);
 
+  useEffect(()=>{
+    if(!walletDetails.loading && walletDetails?.data?.length < 1){
+      dispatch(tableReload({ type: "WALLETTABLE" })); // reloads wallet page
+    }
+  },[])
+
   return (
     <Layout>
         <WalletBox

src/components/MyWallet/WalletAction.jsx

@@ -2,8 +2,28 @@ import React, { useEffect, useState } from "react";
 import usersService from "../../services/UsersService";
 import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
 import NairaWithdraw from "./Popup/NairaWithdraw";
+import VirtualAddCardPopout from "./walletvirtual/VirtualAddCardPopout";
+import WalletExtraActionBtn from "./WalletExtraActionBtn";
 
 function WalletAction({ walletItem, payment, openPopUp }) {
+
+  // virtual add card popout
+  const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); 
+
+    /*OPENS the virtual add card popout*/
+  const openVirtualPopUp = (value) => {
+    setVirtualPopup({
+      show: true,
+      data: { ...value },
+    });
+  };
+
+  /*Closes the virtual add card popout*/
+  const closeVirtualPopUp = () => {
+    setVirtualPopup({ show: false, data: {} });
+    // dispatch(tableReload({ type: "WALLETTABLE" }));
+  };
+
   const [showNairaWithdraw, setShowNairaWithdraw] = useState({
     show: false,
     state: {},
@@ -14,20 +34,39 @@ function WalletAction({ walletItem, payment, openPopUp }) {
     state: {},
   }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
 
+  // console.log('Extra Actions', Object.keys(walletItem.extra_actions))
+  let extraActions = Object.keys(walletItem.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES
+
   return (
     <div className="counters w-full flex justify-between gap-2">
+
+      {/* EXTRA ACTIONS BTN */}
       <div className="w-1/2 flex justify-start items-center">
-        <button
-          onClick={() => {
-            setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
-          }}
-          className={`${
-            walletItem.code != "NAIRA" && "invisible"
-          } logout-btn btn-gradient text-white`}
-        >
-          Spend
-        </button>
+      {(extraActions && extraActions?.length > 0) &&
+        extraActions.map((action, index) => (
+          <div key={index}>
+          <button
+            onClick={() => {
+              action == 'SPEND_FROM_BALANCE' ? 
+              setShowNairaWithdraw((prev) => ({ ...prev, show: true })) 
+              : action == 'ADD_VIRTUAL_CARD' ? 
+              openVirtualPopUp({walletItem})
+              :
+              null
+            }}
+            className={`${
+              walletItem?.code != "NAIRA" && ""
+            } logout-btn btn-gradient text-white`}
+          >
+            {/* Spend */}
+            {walletItem?.extra_actions?.[action][0]?.text}
+          </button>
+          {/* <WalletExtraActionBtn /> // TO BE USED lATER */}
+          </div>
+        ))
+      }
       </div>
+
       <div className="w-1/2 flex justify-end items-center">
         <button
           className="logout-btn btn-gradient text-white"
@@ -71,6 +110,17 @@ function WalletAction({ walletItem, payment, openPopUp }) {
           situation={showConfirmNairaWithdraw.show}
         />
       )}
+
+      {/* VIRTUAL CARD POPOUT */}
+      {virtualPopup.show && (
+        <VirtualAddCardPopout
+          details={virtualPopup.data}
+          walletItem={walletItem}
+          onClose={closeVirtualPopUp}
+          situation={virtualPopup.show}
+        />
+      )}
+
     </div>
   );
 }

src/components/MyWallet/WalletBox.jsx

@@ -9,11 +9,11 @@ import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual'
 export default function WalletBox({ wallet, payment, countries }) {
   const { loading, data } = wallet;
 
+  // console.log('LOG', data[0]?.extra_actions?.SPEND_FROM_BALANCE[0])
+
   // const { userDetails } = useSelector((state) => state.userDetails);
   // const accountType = userDetails?.account_type === "FAMILY";
 
-  // console.log('mumu', data)
-
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">

src/components/MyWallet/WalletExtraActionBtn.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function WalletExtraActionBtn() {
+  return (
+    <>
+      {/* <button
+        onClick={() => {
+          walletItem?.code == 'NAIRA' ? setShowNairaWithdraw((prev) => ({ ...prev, show: true })) : openVirtualPopUp({walletItem})
+        }}
+        className={`${
+          walletItem?.code != "NAIRA" && ""
+        } logout-btn btn-gradient text-white`}
+      >
+        {walletItem?.code == 'NAIRA' ? walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text : walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text}
+      </button> */}
+    </>
+  )
+}

src/components/MyWallet/WalletHeader.jsx

@@ -58,12 +58,27 @@ export default function WalletHeader(props) {
                   props.myWalletList.map((value, index) => 
                   {
                     let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+
                     return(
                       <li
-                        key={index}
+                        key={value?.wallet_uid || index}
                         className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
                         onClick={onWalletClick}
                       >
+                        {value?.brand && value?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+                        <div className="w-full">
+                          <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                            <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                              <img src={value.icon} className="w-14 h-14" alt="currency icon" />
+                            </div>
+                            <div className="name">
+                              <p className="text-2xl font-bold text-dark-gray dark:text-white">
+                                {value.brand} <span> **** **** ***** </span> {value?.card_last4}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                        :
                         <div className="sm:flex justify-between items-center">
                           <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                             <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
@@ -81,6 +96,7 @@ export default function WalletHeader(props) {
                             </p>
                           </div>
                         </div>
+                        }
                       </li>
                     )
                   }

src/components/MyWallet/WalletItemCard.jsx

@@ -62,6 +62,11 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
               <p className="text-base sm:text-lg text-white tracking-wide mb-2 sm:mb-6">
                 Current Balance
               </p>
+              {walletItem?.brand && walletItem?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+              <p className="text-2xl font-bold text-white dark:text-white leading-10">
+                {walletItem.brand} <span> **** **** ***** </span> {walletItem?.card_last4}
+              </p>
+              :
               <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
                 {PriceFormatter(
                   walletItem.amount * 0.01,
@@ -70,6 +75,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
                   "text-[2rem]"
                 )}
               </p>
+              }
             </div>
           </div>
         </div>

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -14,8 +14,8 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .required("Required"),
   phone_number: Yup.string()
-    .min(9, "Min 9 characters")
-    .max(11, "Max 11 characters")
+    .min(9, "Invalid")
+    .max(11, "Invalid")
     .required("Required"),
   // birthYear: Yup.string()
   //   .required("Required"),
@@ -39,13 +39,15 @@ const validationSchema = Yup.object().shape({
     .required("Required"),
   dob: Yup.string()
     .required("Required"),
+  checked: Yup.bool() // use bool instead of boolean
+    .oneOf([true], "You must accept the terms and conditions")
 });
 
 const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
 
   const { userDetails } = useSelector((state) => state.userDetails);
 
-  const countryCode = userDetails?.country
+  const countryCode = walletItem?.country
 
   const userApi = new usersService()
 
@@ -70,7 +72,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     city: userDetails?.city ? userDetails.city : '',
     state: '',
     zipCode: '',
-    dob: ''
+    dob: '',
+    checked: false
   };
 
   
@@ -96,6 +99,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     //     }
     //   }
     // }
+    let date = new Date(values.dob)
     const reqData = {
       request_type: '100',
       address: values.address,
@@ -107,9 +111,9 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
       // dob_day: values.birthDay,
       // dob_month: values.birthMonth,
       // dob_year: values.birthYear,
-      dob_day: Number(new Date(values.dob).getDate()),
-      dob_month: Number(new Date(values.dob).getMonth()) + 1,
-      dob_year: Number(new Date(values.dob).getFullYear()),
+      dob_day: Number(date.getDate()),
+      dob_month: Number(date.getMonth()) + 1,
+      dob_year: Number(date.getFullYear()),
       dob: values.dob
     }
     // console.log('Values', reqData)
@@ -177,8 +181,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
         onSubmit={handleSubmit}
       >
         {(props) => (
-          <Form className="w-full overflow-y-auto">
-            <div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+            <Form className="w-full">
               <div className="modal-header-con">
                 <h1 className="modal-title">
                   {walletItem?.description}
@@ -209,321 +213,344 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </svg>
                 </button>
               </div>
-              <div className="p-4 w-full grid lg:grid-cols-2 gap-4">
-                {/* left part */}
-                <div className='w-full flex flex-col gap-4'>
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
+                <div className='pb-4'>
                   <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
-                  <div className="field w-full grid md:grid-cols-3 gap-4">
-                      <div className="md:col-span-1 field w-full">
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
+                  {/* left part */}
+                  <div className='w-full flex flex-col gap-4'>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
+                        <div className="md:col-span-2 field w-full">
+                          <label
+                            htmlFor="country"
+                            className="job-label job-label-flex"
+                          >
+                            <span>Country</span>
+                            {props.errors.country && props.touched.country && (
+                              <span className="text-[12px] text-red-500">
+                                {props.errors.country}
+                              </span>
+                            )}
+                          </label>
+                          <select
+                            id="country"
+                            name="country"
+                            value={props.values.country}
+                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                            onChange={props.handleChange}
+                            disabled={countryCode ? true : false}
+                          >
+                            {allCountries.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : allCountries.data?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select Country
+                              </option>
+                              {allCountries.data?.map(item => (
+                                <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
+                                  {item.country}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                          </select>
+                        </div>
+                        <div className='md:col-span-3'>
+                          <InputCom
+                          fieldClass="px-6"
+                          label="Phone Number"
+                          labelClass="tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="w-full input-curve lg border border-light-purple"
+                          type="text"
+                          name="phone_number"
+                          value={props.values.phone_number}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                          />
+                        </div>
+                    </div>
+                    <InputCom
+                      disable={true}
+                      fieldClass="px-6"
+                      label="Email"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="email"
+                      value={props.values.email}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.email && props.touched.email) && props.errors.email}
+                    />
+                    <div className="hidden field w-full md:grid-cols-2 gap-4">
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Firstname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="firstname"
+                        value={props.values.firstname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
+                      />
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Lastname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="lastname"
+                        value={props.values.lastname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
+                      />
+                    </div>
+
+                    {/* hidden section */}
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthDay"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Day</span>
+                              {props.errors.birthDay && props.touched.birthDay && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthDay}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthDay"
+                              name="birthDay"
+                              value={props.values.birthDay}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {day.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthMonth"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Month</span>
+                              {props.errors.birthMonth && props.touched.birthMonth && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthMonth}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthMonth"
+                              name="birthMonth"
+                              value={props.values.birthMonth}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {month.map(item => (
+                                <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
+                                  {item.name}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthYear"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Year</span>
+                              {props.errors.birthYear && props.touched.birthYear && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthYear}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthYear"
+                              name="birthYear"
+                              value={props.values.birthYear}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {year.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                        </div>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Date of Birth"
+                          labelClass="md:hidden tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="input-curve lg border border-light-purple"
+                          type="date"
+                          name="dob"
+                          value={props.values.dob}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.dob && props.touched.dob) && props.errors.dob}
+                          maxDate={year[0] + '-12-31'}
+                          minDate={year[year?.length - 1] + '-01-01'}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* right part */}
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Address"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="address"
+                      value={props.values.address}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.address && props.touched.address) && props.errors.address}
+                    />
+                    <InputCom
+                      fieldClass="px-6"
+                      label="City"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="city"
+                      value={props.values.city}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.city && props.touched.city) && props.errors.city}
+                    />
+                    {/* <InputCom
+                      fieldClass="px-6"
+                      label="State/Province"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="state"
+                      value={props.values.state}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.state && props.touched.state) && props.errors.state}
+                    /> */}
+
+                    <div className="field w-full grid md:grid-cols-2 gap-4">
+                      <div className="field w-full">
                         <label
-                          htmlFor="country"
+                          htmlFor="state"
                           className="job-label job-label-flex"
                         >
-                          <span>Country</span>
-                          {props.errors.country && props.touched.country && (
+                          <span>State/Province</span>
+                          {props.errors.state && props.touched.state && (
                             <span className="text-[12px] text-red-500">
-                              {props.errors.country}
+                              {props.errors.state}
                             </span>
                           )}
                         </label>
                         <select
-                          id="country"
-                          name="country"
-                          value={props.values.country}
+                          id="state"
+                          name="state"
+                          value={props.values.state}
                           className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
-                          disabled={countryCode ? true : false}
                         >
-                          {allCountries.loading ?
-                            <option className="text-slate-500 text-lg" value="">
-                              Loading...
-                            </option>
-                          : allCountries.data?.length > 0 ?
-                          <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select Country
-                            </option>
-                            {allCountries.data?.map(item => (
-                              <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
-                                {item.country}
+                          {state.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
                               </option>
-                            ))}
-                          </>
-                          :
-                            <option className="text-slate-500 text-lg" value="">
-                              Not Found
-                            </option>
-                          }
+                            : Object.keys(state.data)?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select State
+                              </option>
+                              {Object.keys(state.data)?.map((item, index) => (
+                                <option key={index} className="text-slate-500 text-lg" value={item}>
+                                  {state?.data[item]}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
                         </select>
                       </div>
-                      <div className='md:col-span-2'>
-                        <InputCom
-                        fieldClass="px-6"
-                        label="Phone Number"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass="w-full input-curve lg border border-light-purple"
-                        type="text"
-                        name="phone_number"
-                        value={props.values.phone_number}
-                        inputHandler={props.handleChange}
-                        error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
-                        />
-                      </div>
-                  </div>
-                  <InputCom
-                    disable={true}
-                    fieldClass="px-6"
-                    label="Email"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="email"
-                    value={props.values.email}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.email && props.touched.email) && props.errors.email}
-                  />
-                  <div className="hidden field w-full md:grid-cols-2 gap-4">
-                    <InputCom
-                      disable={true}
-                      fieldClass="px-6"
-                      label="Firstname"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="firstname"
-                      value={props.values.firstname}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
-                    />
-                    <InputCom
-                      disable={true}
-                      fieldClass="px-6"
-                      label="Lastname"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="lastname"
-                      value={props.values.lastname}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
-                    />
-                  </div>
-                  <div className="field w-full flex flex-col gap-4">
-                      <p className='hidden job-label'>Date of Birth</p>
-                      <div className='hidden xxs:grid-cols-3 gap-4'>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthDay"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Day</span>
-                            {props.errors.birthDay && props.touched.birthDay && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthDay}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthDay"
-                            name="birthDay"
-                            value={props.values.birthDay}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {day.map(item => (
-                              <option key={item} className="text-slate-500 text-lg" value={item}>
-                                {item}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthMonth"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Month</span>
-                            {props.errors.birthMonth && props.touched.birthMonth && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthMonth}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthMonth"
-                            name="birthMonth"
-                            value={props.values.birthMonth}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {month.map(item => (
-                              <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
-                                {item.name}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthYear"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Year</span>
-                            {props.errors.birthYear && props.touched.birthYear && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthYear}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthYear"
-                            name="birthYear"
-                            value={props.values.birthYear}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {year.map(item => (
-                              <option key={item} className="text-slate-500 text-lg" value={item}>
-                                {item}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                      </div>
-                      <div className=''>
+                  
                       <InputCom
                         fieldClass="px-6"
-                        label="Date of Birth"
+                        label="Zip Code"
                         labelClass="tracking-wide"
                         inputBg="bg-slate-100"
                         inputClass="input-curve lg border border-light-purple"
-                        type="date"
-                        name="dob"
-                        value={props.values.dob}
+                        type="text"
+                        name="zipCode"
+                        value={props.values.zipCode}
                         inputHandler={props.handleChange}
-                        error={(props.errors.dob && props.touched.dob) && props.errors.dob}
-                        maxDate={year[0] + '-12-31'}
-                        minDate={year[year?.length - 1] + '-01-01'}
+                        error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
                       />
-                      </div>
-
+                    </div>
                   </div>
                 </div>
-
-                {/* right part */}
-                <div className='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Address"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="address"
-                    value={props.values.address}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.address && props.touched.address) && props.errors.address}
-                  />
-                  <InputCom
-                    fieldClass="px-6"
-                    label="City"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="city"
-                    value={props.values.city}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.city && props.touched.city) && props.errors.city}
-                  />
-                  {/* <InputCom
-                    fieldClass="px-6"
-                    label="State/Province"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="state"
-                    value={props.values.state}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.state && props.touched.state) && props.errors.state}
-                  /> */}
-
-                  <div className="field w-full grid md:grid-cols-2 gap-4">
-                    <div className="field w-full">
-                      <label
-                        htmlFor="state"
-                        className="job-label job-label-flex"
-                      >
-                        <span>State/Province</span>
-                        {props.errors.state && props.touched.state && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.state}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="state"
-                        name="state"
-                        value={props.values.state}
-                        className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                        onChange={props.handleChange}
-                      >
-                        {state.loading ?
-                            <option className="text-slate-500 text-lg" value="">
-                              Loading...
-                            </option>
-                          : Object.keys(state.data)?.length > 0 ?
-                          <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select State
-                            </option>
-                            {Object.keys(state.data)?.map((item, index) => (
-                              <option key={index} className="text-slate-500 text-lg" value={item}>
-                                {state?.data[item]}
-                              </option>
-                            ))}
-                          </>
-                          :
-                            <option className="text-slate-500 text-lg" value="">
-                              Not Found
-                            </option>
-                          }
-                      </select>
-                    </div>
-                
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Zip Code"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="zipCode"
-                      value={props.values.zipCode}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
+              </div>
+              <div className='p-4 w-full job-label'>
+                <div className='flex gap-4 items-center'>
+                    <input 
+                    type='checkbox' 
+                    name="checked"
+                    className='accent-purple w-4 h-4 p-2 text-purple bg-gray-100 border-gray-300 rounded focus:ring-purple' 
+                    onChange={props.handleChange}
                     />
-                  </div>
+                    <p className='text-[14px] text-justify'>
+                        I agree with the <span className='text-bue-600'>cardholder </span> 
+                        terms & conditions {props.errors.checked && props.touched.checked && <span className='text-[12px] text-red-500'>{props.errors.checked}</span>}
+                    </p>
                 </div>
               </div>
               {requestStatus.message &&
@@ -556,8 +583,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
-          </Form>
+            </Form>
+          </div>
         )}
       </Formik>
     </ModalCom>

src/components/Partials/Layout.jsx

@@ -11,7 +11,7 @@ import Sidebar from "./Sidebar";
 
 export default function Layout({ children }) {
   const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS FOR USER Details
-
+ 
   const { drawer } = useSelector((state) => state.drawer);
   const { userJobList } = useSelector((state) => state.userJobList);
   const dispatch = useDispatch();
@@ -22,13 +22,14 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
+    let loginType = userDetails?.account_type == 'FULL' ? 'parent' : 'kid'
     sessionStorage.clear();
     localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });
 
-    navigate("/login", { replace: true });
+    navigate(`/login/${loginType}`, {state:{loginType:userDetails?.account_type.toLowerCase()}, replace:true});
   };
 
   return (

src/components/Resources/index.jsx

@@ -24,10 +24,12 @@ export default function Resources(props) {
   const ownProducts = products.datas;
   // Resource Props
   const __resources = props.MyResourceData;
+
   //debugger;
   // Collection Items
   const CreatedSell = __resources?.marketdata?.data;
-  const tab_categories = __resources?.tab_categories?.data;
+  // const tab_categories = __resources?.tab_categories?.data?.sort((a, b) => b.name.localeCompare(a.name)) // SORT REMOVED
+  const tab_categories = __resources?.tab_categories?.data
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
   const CreatedBits = __resources?.productdata?.datas;
@@ -77,23 +79,22 @@ export default function Resources(props) {
     }
   };
 
-  useEffect(() => {
-    getUploadedFiles();
-  }, [uploadsTable]);
-
   // const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
   const [tab, setTab] = useState(
     props.activeTab
       ? props.activeTab
-      : tab_categories
-      ? tab_categories[0]?.name
-      : ""
+      : "onsale"
   );
 
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  useEffect(() => {
+    getUploadedFiles();
+  }, [uploadsTable]);
+
+
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,

src/lib/apiConst.js

@@ -80,6 +80,7 @@ export const apiConst = {
 
     WRENCHBOARD_COUNTRY_STATE: 649,
     WRENCHBOARD_WALLET_CARD_REQUEST: 11080,
+    WRENCHBOARD_WALLET_CARD_FAMILY_REQUEST: 11082,
 
     WRENCHBOARD_SEND_CONTACTUS:      11030,
     WRENCHBOARD_ACCOUNT_SENDREFER:   11032,

src/middleware/AuthRoute.jsx

@@ -211,6 +211,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMyJobList();
   }, [jobListTable, isLogin.status]);
 
+  //FUNCTION TO GET FULL USER WALLETS
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
       return
@@ -231,6 +232,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMyWalletList();
   }, [walletTable, isLogin.status]);
 
+
+  // FUNCTION TO GET MARKET JOB LIST
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
       return

src/services/UsersService.js

@@ -1548,7 +1548,7 @@ class usersService {
     return this.postAuxEnd("/countrystate", postData);
   }
 
-  //API TO GET STATES FROM COUNTRY
+  //API TO REQUEST FOR VIRTUAL CARD
   walletCardRequest(reqData){
     var postData = {
       uid: localStorage.getItem("uid"),
@@ -1561,6 +1561,18 @@ class usersService {
     return this.postAuxEnd("/wallets/card/request", postData);
   }
 
+  //API TO REQUEST FOR FAMILY VIRTUAL CARD
+  walletCardFamilyRequest(reqData){
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_WALLET_CARD_FAMILY_REQUEST,
+      ...reqData
+    };
+    return this.postAuxEnd("/wallets/card/familyrequest", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/LoginLandingPage.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import LoginLanding from "../components/AuthPages/Login/LoginLanding";
+
+function LoginLandingPage() {
+  return (
+    <>
+      <LoginLanding />
+    </>
+  );
+}
+
+export default LoginLandingPage;