From b2bffb3b83facfddac0c65203d9338fd8fbf700c Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 24 Oct 2024 21:07:23 +0100
Subject: [PATCH] virtual card modal height adjusted

---
 .../walletvirtual/VirtualAddCardPopout.jsx    | 603 +++++++++---------
 1 file changed, 306 insertions(+), 297 deletions(-)

diff --git a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx
index 60a86aa..5fe3660 100644
--- a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx
+++ b/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"),
@@ -177,8 +177,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,320 +209,329 @@ 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>
-
-                {/* 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>
@@ -556,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
-          </Form>
+            </Form>
+          </div>
         )}
       </Formik>
     </ModalCom>