formattter function add

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

@@ -53,7 +53,7 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
                 name="plan"
                 // onClick={onClose}
             >
-                Plan Wallet
+                Add Card
             </button>
         </div>
       </div>

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/WalletBox.jsx

@@ -24,7 +24,7 @@ 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, index) => (
+            { data?.length > 0 && data.map((item, index) => (
                 <div key={item.wallet_uid+index} className="w-full h-full">
                   {item.country ?
                   <WalletItemCard walletItem={item} payment={payment} countries={countries} />

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, "Minimum 9 characters")
+    .min(9, "Min 9 characters")
-    .max(20, "Maximum 25 characters")
+    .max(11, "Max 11 characters")
     .required("Required"),
   birthYear: Yup.string()
     .required("Required"),
@@ -24,20 +24,18 @@ const validationSchema = Yup.object().shape({
   birthDay: Yup.string()
     .required("Required"),
   address: Yup.string()
-    .min(5, "Minimum 3 characters")
+    .min(5, "Min 3 characters")
-    .max(50, "Maximum 25 characters")
+    .max(50, "Max 25 characters")
     .required("Required"),
   city: Yup.string()
-    .min(2, "Minimum 3 characters")
+    .min(2, "Min 3 characters")
-    .max(25, "Maximum 25 characters")
+    .max(25, "Max 25 characters")
     .required("Required"),
   state: Yup.string()
-    .min(2, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
     .required("Required"),
   zipCode: Yup.string()
-    .min(1, "Minimum 3 characters")
+    .min(1, "Min 3 characters")
-    .max(10, "Maximum 25 characters")
+    .max(8, "Max 8 characters")
     .required("Required"),
 });
 
@@ -45,15 +43,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, 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: '',
+    country: countryCode ? countryCode : '',
     phone_number: '',
     email: userDetails?.email,
     firstname: userDetails?.firstname,
@@ -62,13 +65,14 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     birthMonth: '',
     birthDay: '',
     address: '',
-    city: '',
+    city: userDetails?.city ? userDetails.city : '',
     state: '',
     zipCode: ''
   };
 
+  
   const handleSubmit = (values) => {
-    const reqData = {
+    const reqData1 = {
       name: values.firstname + ' ' + values.firstname,
       email: values.email,
       phone_number: values.phone_number,
@@ -89,7 +93,40 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
         }
       }
     }
-    console.log('Values', reqData)
+    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,
+    }
+    // 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(()=>{
@@ -98,6 +135,9 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     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: [] });
@@ -105,6 +145,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     })
   },[])
 
+  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}
@@ -149,11 +203,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                 </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="field w-full grid md:grid-cols-2 gap-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">
+                  <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <div className="md:col-span-1 field w-full">
                         <label
                           htmlFor="country"
                           className="job-label job-label-flex"
@@ -171,6 +225,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           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="">
@@ -194,18 +249,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           }
                         </select>
                       </div>
-                      <InputCom
+                      <div className='md:col-span-2'>
-                      fieldClass="px-6"
+                        <InputCom
-                      label="Phone Number"
+                        fieldClass="px-6"
-                      labelClass="tracking-wide"
+                        label="Phone Number"
-                      inputBg="bg-slate-100"
+                        labelClass="tracking-wide"
-                      inputClass="w-full input-curve lg border border-light-purple"
+                        inputBg="bg-slate-100"
-                      type="text"
+                        inputClass="w-full input-curve lg border border-light-purple"
-                      name="phone_number"
+                        type="text"
-                      value={props.values.phone_number}
+                        name="phone_number"
-                      inputHandler={props.handleChange}
+                        value={props.values.phone_number}
-                      error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                        inputHandler={props.handleChange}
-                      />
+                        error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                        />
+                      </div>
                   </div>
                   <InputCom
                     disable={true}
@@ -220,7 +277,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     inputHandler={props.handleChange}
                     error={(props.errors.email && props.touched.email) && props.errors.email}
                   />
-                  <div className="field w-full grid md:grid-cols-2 gap-4">
+                  <div className="hidden field w-full md:grid-cols-2 gap-4">
                     <InputCom
                       disable={true}
                       fieldClass="px-6"
@@ -386,52 +443,70 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     inputHandler={props.handleChange}
                     error={(props.errors.state && props.touched.state) && props.errors.state}
                   /> */}
-                  <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}
-                    >
-                      <>
-                      <option className="text-slate-500 text-lg" value=''>
-                          select
-                      </option>
-                      {state.map(item => (
-                        <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
-                          {item.name}
-                        </option>
-                      ))}
-                      </>
-                    </select>
-                  </div>
 
-                  <InputCom
+                  <div className="field w-full grid md:grid-cols-2 gap-4">
-                    fieldClass="px-6"
+                    <div className="field w-full">
-                    label="Zip Code"
+                      <label
-                    labelClass="tracking-wide"
+                        htmlFor="state"
-                    inputBg="bg-slate-100"
+                        className="job-label job-label-flex"
-                    inputClass="input-curve lg border border-light-purple"
+                      >
-                    type="text"
+                        <span>State/Province</span>
-                    name="zipCode"
+                        {props.errors.state && props.touched.state && (
-                    value={props.values.zipCode}
+                          <span className="text-[12px] text-red-500">
-                    inputHandler={props.handleChange}
+                            {props.errors.state}
-                    error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
+                          </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
@@ -449,6 +524,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       <button
                       type="submit"
                       className="custom-btn btn-gradient text-base text-white"
+                      disabled={requestStatus.loading || requestStatus.status}
                       >
                       Continue
                       </button>
@@ -488,8 +564,8 @@ const date = new Date().getFullYear()
 
 const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )
 
-const state = [
+// const state = [
-  {value: 'abia', name: 'Abia'},
+//   {value: 'abia', name: 'Abia'},
-  {value: 'imo', name: 'Imo'},
+//   {value: 'imo', name: 'Imo'},
-  {value: 'anambra', name: 'Anambra'},
+//   {value: 'anambra', name: 'Anambra'},
-]
+// ]

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)