dob field added

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,26 +92,51 @@ export default function InputCom({
             : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa]  border"
         }`}
       >
-        <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}
-          minLength={minLengthValidation()}
-          maxLength={maxLengthValidation()}
-          tabIndex={tabIndex}
-          // pattern={inputPatterns()}
-          ref={inputRef}
-          readOnly={disable}
-          onBlur={blurHandler}
-          dir={direction}
-          autoComplete={autoComplete}
-        />
+        <>
+          {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}
+            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}
+            minLength={minLengthValidation()}
+            maxLength={maxLengthValidation()}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            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/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,15 +14,15 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .required("Required"),
   phone_number: Yup.string()
-    .min(9, "Minimum 9 characters")
-    .max(20, "Maximum 25 characters")
-    .required("Required"),
-  birthYear: Yup.string()
-    .required("Required"),
-  birthMonth: Yup.string()
-    .required("Required"),
-  birthDay: 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")
@@ -37,6 +37,8 @@ const validationSchema = Yup.object().shape({
     .min(1, "Min 3 characters")
     .max(8, "Max 8 characters")
     .required("Required"),
+  dob: Yup.string()
+    .required("Required"),
 });
 
 const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
@@ -65,35 +67,73 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     birthMonth: '',
     birthDay: '',
     address: '',
-    city: '',
+    city: userDetails?.city ? userDetails.city : '',
     state: '',
-    zipCode: ''
+    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 = {
-      name: values.firstname + ' ' + values.firstname,
-      email: values.email,
+      request_type: '100',
+      address: values.address,
+      city: values.city,
+      state: values.state,
+      country: values.country,
+      postal_code: values.zipCode,
       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
-        }
-      }
+      // 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)
+    // 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(()=>{
@@ -170,11 +210,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">
-                      <div className="field w-full">
+                  <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">
                         <label
                           htmlFor="country"
                           className="job-label job-label-flex"
@@ -216,18 +256,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           }
                         </select>
                       </div>
-                      <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 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}
@@ -242,7 +284,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"
@@ -271,8 +313,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     />
                   </div>
                   <div className="field w-full flex flex-col gap-4">
-                      <p className='job-label'>Date of Birth</p>
-                      <div className='grid xxs:grid-cols-3 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"
@@ -367,6 +409,23 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           </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>
 
@@ -467,6 +526,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </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
@@ -484,6 +548,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>
@@ -502,29 +567,24 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
 export default VirtualAddCardPopout;
 
 
+
 const day = new Array(31).fill(0).map((_,i) => i+1 )
 
 const month = [
-  {value: 0, name: 'January'},
-  {value: 1, name: 'February'},
-  {value: 2, name: 'March'},
-  {value: 3, name: 'April'},
-  {value: 4, name: 'May'},
-  {value: 5, name: 'June'},
-  {value: 6, name: 'July'},
-  {value: 7, name: 'August'},
-  {value: 8, name: 'September'},
-  {value: 9, name: 'October'},
-  {value: 10, name: 'November'},
-  {value: 11, name: 'December'},
+  {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 )
-
-// const state = [
-//   {value: 'abia', name: 'Abia'},
-//   {value: 'imo', name: 'Imo'},
-//   {value: 'anambra', name: 'Anambra'},
-// ]
+const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )

src/lib/apiConst.js

@@ -79,6 +79,7 @@ export const apiConst = {
     WRENCHBOARD_ACCOUNT_DASHDATA:   11029,
 
     WRENCHBOARD_COUNTRY_STATE: 649,
+    WRENCHBOARD_WALLET_CARD_REQUEST: 11080,
 
     WRENCHBOARD_SEND_CONTACTUS:      11030,
     WRENCHBOARD_ACCOUNT_SENDREFER:   11032,

src/services/UsersService.js

@@ -1548,6 +1548,19 @@ class usersService {
     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)