dob field added

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

@@ -5,6 +5,7 @@ import FamilyAddFundPopout from './FamilyAddFundPopout'
 
 function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
+
   return (
     <div className='w-full p-4 bg-[aliceblue] rounded-lg'
     // style={{
@@ -14,7 +15,7 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
     <div className="w-full flex justify-start items-center gap-3">
       <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
         <img
-          src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
+          src={wallet.icon}
           className="w-full h-full"
           alt="currency-icon"
         />
@@ -52,7 +53,7 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
                 name="plan"
                 // onClick={onClose}
             >
-                Plan Wallet
+                Add Card
             </button>
         </div>
       </div>

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -28,7 +28,9 @@ export default function InputCom({
   direction,
   tabIndex,
   error,
-  autoComplete="on"
+  autoComplete="on",
+  minDate='1900-01-01',
+  maxDate='2099-09-13'
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -90,6 +92,29 @@ export default function InputCom({
             : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa]  border"
         }`}
       >
+        <>
+          {type == 'date' ?
+          <input
+            placeholder={placeholder}
+            value={value}
+            onChange={inputHandler}
+            className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
+              inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
+            type={type}
+            id={name}
+            name={name}
+            onInput={onInput}
+            min={minDate}
+            max={maxDate}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          :
           <input
             placeholder={placeholder}
             value={value}
@@ -110,6 +135,8 @@ export default function InputCom({
             dir={direction}
             autoComplete={autoComplete}
           />
+          }
+        </>
         {iconName && (
           <div className="absolute right-6 bottom-3 z-10 flex gap-2">
             {iconName.split(" ").map((item, index) => (

src/components/MarketPlace/PopUp/LockJob.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import {PriceFormatter} from '../../Helpers/PriceFormatter'
 
 export default function LockJob({
   details,

src/components/MyWallet/FamilyWalletBox.jsx

@@ -3,6 +3,7 @@ import background from "../../assets/images/bg-sky-blue.jpg";
 import { localImgLoad } from "../../lib";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
+import {PriceFormatter} from '../Helpers/PriceFormatter'
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -20,7 +21,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
   const handleChangeWallet = ({ target: { name } }) => {
     // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
     const currentWalletSelected = wallet?.data?.filter(
-      (item) => item.code == name
+      (item) => item.description == name
     );
     setSelectedWallet(currentWalletSelected[0]);
     setActiveWalletBtn(name);
@@ -33,7 +34,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
 
   useEffect(() => {
     setSelectedWallet(wallet.data[0]);
-    setActiveWalletBtn(wallet?.data[0]?.code);
+    setActiveWalletBtn(wallet?.data[0]?.description);
   }, [wallet]);
 
   return (
@@ -54,13 +55,13 @@ export default function FamilyWalletBox({ wallet, payment }) {
                 <>
                   {wallet?.data?.length > 1 && (
                     <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
-                      {wallet?.data?.map((item) => (
+                      {wallet?.data?.map((item, index) => (
                         <button
                           className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${
-                            activeWalletBtn == item?.code && "bg-orange-500"
+                            activeWalletBtn == item?.description && "bg-orange-500"
                           }`}
-                          key={item?.wallet_uid}
+                          key={item?.wallet_uid+index}
-                          name={item?.code}
+                          name={item?.description}
                           onClick={handleChangeWallet}
                         >
                           {item?.description}
@@ -69,24 +70,25 @@ export default function FamilyWalletBox({ wallet, payment }) {
                     </div>
                   )}
                   <div
-                    className="p-5 bg-white-opacity min-h-[240px]"
+                    className="p-5 bg-white-opacity min-h-[240px] flex justify-end items-center"
                     style={{
-                      background: `url(${background}) 0% 0% / cover no-repeat`,
+                      background: `url(${selectedWallet?.banner}) 0% 0% / cover no-repeat`,
                     }}
                   >
                     {/* image */}
-                    <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                    {/* <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
                       <img
                         src={localImgLoad(`images/currency/${image}`)}
                         className="w-full h-full"
                         alt="currency-icon"
                       />
-                    </div>
+                    </div> */}
-                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">
+                    <div className='flex flex-col justify-center'>
+                      <p className="text-base sm:text-lg text-white tracking-wide my-3 text-center">
                         Current Balance
                       </p>
                       <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
-                      {Formatter(
+                        {PriceFormatter(
                           selectedWallet?.amount / 100,
                           selectedWallet?.code,
                           undefined,
@@ -94,6 +96,7 @@ export default function FamilyWalletBox({ wallet, payment }) {
                         )}
                       </p>
                     </div>
+                  </div>
                 </>
               ) : (
                 <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">

src/components/MyWallet/WalletBox.jsx

@@ -24,8 +24,8 @@ export default function WalletBox({ wallet, payment, countries }) {
             </div>
           ) : (
             <div className="w-auto grid md:grid-cols-2 xxl:grid-cols-3 gap-4 md:gap-10">
-            { data.length > 0 && data.map((item) => (
+            { data?.length > 0 && data.map((item, index) => (
-                <div key={item.wallet_uid} className="w-full h-full">
+                <div key={item.wallet_uid+index} className="w-full h-full">
                   {item.country ?
                   <WalletItemCard walletItem={item} payment={payment} countries={countries} />
                   :

src/components/MyWallet/WalletHeader.jsx

@@ -67,7 +67,7 @@ export default function WalletHeader(props) {
                         <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 ">
-                              <img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
+                              <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">

src/components/MyWallet/WalletItemCard.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
+// import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
 import { tableReload } from "../../store/TableReloads";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
@@ -44,25 +44,25 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full min-h-[250px] rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
+        className="current-balance-widget w-full h-full min-h-[250px] rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between bg-[#498FC3]"
         style={{
-          background: `url(${background}) 0% 0% / cover no-repeat`,
+          background: `url(${walletItem?.banner}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet w-full flex justify-between items-start gap-3">
+        <div className="wallet w-full">
-          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          {/* <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
               alt="currency-icon"
             />
-          </div>
+          </div> */}
-          <div className="balance w-full mt-2 flex justify-center">
+          <div className="balance w-full mt-2 flex justify-end">
-            <div className="">
+            <div className="flex flex-col items-center">
-              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
+              <p className="text-base sm:text-lg text-white tracking-wide mb-2 sm:mb-6">
                 Current Balance
               </p>
-              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
+              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
                 {PriceFormatter(
                   walletItem.amount * 0.01,
                   walletItem.code,
@@ -75,9 +75,10 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
         </div>
         
         {walletItem.escrow > 0 ? 
+        <div className='w-full flex justify-end'>
           <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
             HOLDINGS :{" "}
-            <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
+            <span className="">
               {PriceFormatter(
                 walletItem.escrow * 0.01,
                 walletItem.code,
@@ -86,6 +87,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
               )}
             </span>
           </p>
+        </div>
         :
         null
         }

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -1,17 +1,184 @@
-import { useState } from "react";
+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, "Min 9 characters")
+    .max(11, "Max 11 characters")
+    .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"),
+});
 
 const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
-  const [input, setInput] = useState("");
+
-console.log(walletItem)
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const countryCode = userDetails?.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: userDetails?.firstname,
+    lastname: userDetails?.lastname,
+    birthYear: '',
+    birthMonth: '',
+    birthDay: '',
+    address: '',
+    city: userDetails?.city ? userDetails.city : '',
+    state: '',
+    zipCode: '',
+    dob: ''
+  };
+
+  
+  const handleSubmit = (values) => {
+    // const reqData1 = {
+    //   name: values.firstname + ' ' + values.firstname,
+    //   email: values.email,
+    //   phone_number: values.phone_number,
+    //   status: 'active',
+    //   type: 'individual',
+    //   individual: {
+    //     first_name: values.firstname,
+    //     last_name: values.lastname,
+    //     dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear}
+    //   },
+    //   billing:{
+    //     address : {
+    //       line1: values.address,
+    //       city: values.city,
+    //       state: values.state,
+    //       postal_code: values.zipCode,
+    //       country: values.country
+    //     }
+    //   }
+    // }
+    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,
+      // 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: values.dob
+    }
+    // console.log('Values', reqData)
+    setRequestStatus({loading: true, status:false, message: ''})
+    userApi.walletCardRequest(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}
     >
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        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="modal-header-con">
                 <h1 className="modal-title">
                   {walletItem?.description}
@@ -42,16 +209,328 @@ console.log(walletItem)
                   </svg>
                 </button>
               </div>
-        <div className="w-full h-[32rem]">
+              <div className="p-4 w-full grid lg:grid-cols-2 gap-4">
-            {/* <div className="h-[32rem] flex items-center justify-center">
+                {/* left part */}
-              <div className="h-[32rem] flex flex-col items-center justify-center gap-4">
+                <div className='w-full flex flex-col gap-4'>
-                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
-                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
+                  <div className="field w-full grid md:grid-cols-3 gap-4">
-                <LoadingSpinner size="6" color="sky-blue" height='h-20' />
+                      <div className="md:col-span-1 field w-full">
-                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
+                        <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> */}
+                      <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"
+                        labelClass="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='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>
+              </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
@@ -62,27 +541,50 @@ console.log(walletItem)
                       Cancel
                       </button>
 
-
+                      <>
-                <button
+                      {requestStatus.loading ?
-                onClick={()=>{}}
-                className="custom-btn btn-gradient text-base text-white"
-                >
-                {/* {requestStatus.loading ? (
                       <LoadingSpinner size="6" color="sky-blue" />
-                ) : completeNairaWithdraw.show ? (
+                      :
-                    "Okay"
+                      <button
-                ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      type="submit"
-                    "Cancel"
+                      className="custom-btn btn-gradient text-base text-white"
-                ) : (
+                      disabled={requestStatus.loading || requestStatus.status}
-                    "Transfer"
+                      >
-                )} */}
                       Continue
                       </button>
+                      }
+                      </>
                   </div>
               </div>
             </div>
+          </Form>
+        )}
+      </Formik>
     </ModalCom>
   );
 };
 
 export default VirtualAddCardPopout;
+
+
+
+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/MyWallet/walletvirtual/WalletItemCardVirtual.jsx

@@ -45,12 +45,12 @@ export default function WalletItemCardVirtual({ walletItem, payment, countries }
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full min-h-[250px] rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
+        className="current-balance-widget w-full h-full min-h-[250px] rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between bg-[#498FC3]"
         style={{
           background: `url(${walletItem?.banner}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet w-full flex justify-center gap-3">
+        <div className="wallet w-full">
           {/* <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
@@ -58,9 +58,9 @@ export default function WalletItemCardVirtual({ walletItem, payment, countries }
               alt="currency-icon"
             />
           </div> */}
-          <div className="balance w-full mt-2 flex justify-center">
+          <div className="balance w-full mt-2 flex justify-end">
             <div className="">
-              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
+              <p className="text-lg sm:text-2xl font-bold text-white tracking-wide mb-2 sm:mb-6">
                 {walletItem?.description}
               </p>
               {/* <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
@@ -100,7 +100,7 @@ export default function WalletItemCardVirtual({ walletItem, payment, countries }
         </div>
       </div>
 
-      {virtualPopup.name == 'add virtual visa' && (
+      {virtualPopup.name == 'add virtual debit card' && (
         <VirtualAddCardPopout
           details={virtualPopup.data}
           walletItem={walletItem}

src/lib/apiConst.js

@@ -78,6 +78,9 @@ export const apiConst = {
     WRENCHBOARD_START_JOBLIST:      11028,
     WRENCHBOARD_ACCOUNT_DASHDATA:   11029,
 
+    WRENCHBOARD_COUNTRY_STATE: 649,
+    WRENCHBOARD_WALLET_CARD_REQUEST: 11080,
+
     WRENCHBOARD_SEND_CONTACTUS:      11030,
     WRENCHBOARD_ACCOUNT_SENDREFER:   11032,
     WRENCHBOARD_ACCOUNT_REFERLINK:   11033,

src/services/UsersService.js

@@ -1536,6 +1536,31 @@ class usersService {
     return this.postAuxEnd("/recentpastdue", postData);
   }
 
+  //API TO GET STATES FROM COUNTRY
+  getStateFromCountry(reqData){
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_COUNTRY_STATE,
+      ...reqData
+    };
+    return this.postAuxEnd("/countrystate", postData);
+  }
+
+  //API TO GET STATES FROM COUNTRY
+  walletCardRequest(reqData){
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      target_uid: localStorage.getItem("uid"),
+      action: apiConst.WRENCHBOARD_WALLET_CARD_REQUEST,
+      ...reqData
+    };
+    return this.postAuxEnd("/wallets/card/request", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)