virtual card display and banner and popout fixed

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -39,6 +39,8 @@ 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 }) => {
@@ -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)
@@ -535,6 +539,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </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>