Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -97,7 +97,7 @@ export default function InputCom({
|
|||||||
dir={direction}
|
dir={direction}
|
||||||
/>
|
/>
|
||||||
{iconName && (
|
{iconName && (
|
||||||
<div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
|
<div className="absolute right-6 bottom-3 z-10 flex gap-2">
|
||||||
{iconName.split(" ").map((item, index) => (
|
{iconName.split(" ").map((item, index) => (
|
||||||
<Icons key={index} name={item} />
|
<Icons key={index} name={item} />
|
||||||
))}
|
))}
|
||||||
@@ -105,7 +105,7 @@ export default function InputCom({
|
|||||||
)}
|
)}
|
||||||
{passIcon && (
|
{passIcon && (
|
||||||
<div
|
<div
|
||||||
className="absolute right-6 bottom-[10px] z-10"
|
className="absolute right-6 bottom-3 z-10"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<Icons name={passIcon} />
|
<Icons name={passIcon} />
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|||||||
import { Form, Formik } from "formik";
|
import { Form, Formik } from "formik";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
|
import Icons from "../Helpers/Icons";
|
||||||
|
|
||||||
const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
name: Yup.string()
|
name: Yup.string()
|
||||||
@@ -222,25 +223,8 @@ function AddFundDollars(props) {
|
|||||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
Bank **************{item.digits}
|
Bank **************{item.digits}
|
||||||
</p>
|
</p>
|
||||||
{/* <div className="w-full sm:flex items-center gap-5">
|
|
||||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
|
||||||
{item.added}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
|
|
||||||
Verified
|
|
||||||
</p>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <td>
|
|
||||||
<button
|
|
||||||
// onClick={handleSubmit}
|
|
||||||
type="button"
|
|
||||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
>
|
|
||||||
<span className="text-white">Manage</span>
|
|
||||||
</button>
|
|
||||||
</td> */}
|
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -275,13 +259,14 @@ function AddFundDollars(props) {
|
|||||||
<div className="fields w-full">
|
<div className="fields w-full">
|
||||||
{/* inputs starts here */}
|
{/* inputs starts here */}
|
||||||
{/* Name */}
|
{/* Name */}
|
||||||
<div className="flex items-center field w-full my-6 gap-3">
|
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||||
Name:
|
Name:
|
||||||
</label>
|
</label>
|
||||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="field w-full my-6">
|
|
||||||
|
{/* <div className="field w-full my-2 flex-[0.4]">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
spanTag="*"
|
spanTag="*"
|
||||||
@@ -298,119 +283,130 @@ function AddFundDollars(props) {
|
|||||||
{props.errors.name}
|
{props.errors.name}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<div className="flex items-center flex-1 gap-3 my-3">
|
||||||
|
{/* CARD NUMBER */}
|
||||||
|
<div className="field w-full flex-[0.6]">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
spanTag="*"
|
||||||
|
iconName="master-card visa-card atm-card"
|
||||||
|
label="Card Number"
|
||||||
|
type="text"
|
||||||
|
name="cardNum"
|
||||||
|
placeholder="Enter Card Number"
|
||||||
|
value={props.values.cardNum}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
{props.errors.cardNum &&
|
||||||
|
props.touched.cardNum && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.cardNum}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* EXPIRE YEAR, YEAR */}
|
||||||
|
<div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
|
||||||
|
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||||
|
<div className="select-option">
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-between mb-2.5`}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||||
|
htmlFor="expiration"
|
||||||
|
>
|
||||||
|
Exp Month{" "}
|
||||||
|
<span className="text-red-700 text-sm tracking-wide">
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||||
|
value={props.values.expirationMonth}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
name="expirationMonth"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value=""
|
||||||
|
className="text-dark-gray"
|
||||||
|
>
|
||||||
|
Month
|
||||||
|
</option>
|
||||||
|
{expireMonth?.length &&
|
||||||
|
expireMonth.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
value={item.value}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{props.errors.expirationMonth &&
|
||||||
|
props.touched.expirationMonth && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.expirationMonth}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||||
|
<div className="select-option">
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-between mb-2.5`}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||||
|
htmlFor="expiration"
|
||||||
|
>
|
||||||
|
Exp Year{" "}
|
||||||
|
<span className="text-red-700 text-sm tracking-wide">
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||||
|
value={props.values.expirationYear}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
name="expirationYear"
|
||||||
|
>
|
||||||
|
<option value="" className="text-dark-gray">Year</option>
|
||||||
|
{expireYear?.length &&
|
||||||
|
expireYear.map((item, index) => (
|
||||||
|
<option key={index} value={item}>
|
||||||
|
{item}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{props.errors.expirationYear &&
|
||||||
|
props.touched.expirationYear && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.expirationYear}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CARD NUMBER */}
|
<div className="flex items-center flex-1 gap-3 my-3">
|
||||||
<div className="field w-full mb-6">
|
{/* Address AND CVV */}
|
||||||
<InputCom
|
<div className="field w-full col-span-1 flex-[0.4]">
|
||||||
fieldClass="px-6"
|
|
||||||
spanTag="*"
|
|
||||||
iconName="master-card visa-card atm-card"
|
|
||||||
label="Card Number"
|
|
||||||
type="text"
|
|
||||||
name="cardNum"
|
|
||||||
placeholder="Enter Card Number"
|
|
||||||
value={props.values.cardNum}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
{props.errors.cardNum &&
|
|
||||||
props.touched.cardNum && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.cardNum}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* EXPIRE YEAR, YEAR AND CVV */}
|
|
||||||
<div className="sm:grid gap-5 grid-cols-3 mb-6">
|
|
||||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
|
||||||
<div className="select-option">
|
|
||||||
<div
|
|
||||||
className={`flex items-center justify-between mb-2.5`}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
|
||||||
htmlFor="expiration"
|
|
||||||
>
|
|
||||||
Expiration Month{" "}
|
|
||||||
<span className="text-red-700 text-sm tracking-wide">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
|
|
||||||
value={props.values.expirationMonth}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
name="expirationMonth"
|
|
||||||
>
|
|
||||||
<option value="">Select...</option>
|
|
||||||
{expireMonth?.length &&
|
|
||||||
expireMonth.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
value={item.value}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{props.errors.expirationMonth &&
|
|
||||||
props.touched.expirationMonth && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.expirationMonth}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
|
||||||
<div className="select-option">
|
|
||||||
<div
|
|
||||||
className={`flex items-center justify-between mb-2.5`}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
|
||||||
htmlFor="expiration"
|
|
||||||
>
|
|
||||||
Expiration Year{" "}
|
|
||||||
<span className="text-red-700 text-sm tracking-wide">
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
|
|
||||||
value={props.values.expirationYear}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
name="expirationYear"
|
|
||||||
>
|
|
||||||
<option value="">Select...</option>
|
|
||||||
{expireYear?.length &&
|
|
||||||
expireYear.map((item, index) => (
|
|
||||||
<option key={index} value={item}>
|
|
||||||
{item}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{props.errors.expirationYear &&
|
|
||||||
props.touched.expirationYear && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.expirationYear}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="field w-full col-span-1">
|
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
spanTag="*"
|
spanTag="*"
|
||||||
@@ -429,29 +425,28 @@ function AddFundDollars(props) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="field w-full flex-[0.6]">
|
||||||
{/* Address */}
|
<InputCom
|
||||||
<div className="field w-full my-6">
|
fieldClass="px-6"
|
||||||
<InputCom
|
spanTag="*"
|
||||||
fieldClass="px-6"
|
label="Billing Address"
|
||||||
spanTag="*"
|
type="text"
|
||||||
label="Billing Address"
|
name="address"
|
||||||
type="text"
|
placeholder="Billing Address"
|
||||||
name="address"
|
value={props.values.Address}
|
||||||
placeholder="Billing Address"
|
inputHandler={props.handleChange}
|
||||||
value={props.values.Address}
|
blurHandler={props.handleBlur}
|
||||||
inputHandler={props.handleChange}
|
/>
|
||||||
blurHandler={props.handleBlur}
|
{props.errors.address &&
|
||||||
/>
|
props.touched.address && (
|
||||||
{props.errors.address &&
|
<p className="text-sm text-red-500">
|
||||||
props.touched.address && (
|
{props.errors.address}
|
||||||
<p className="text-sm text-red-500">
|
</p>
|
||||||
{props.errors.address}
|
)}
|
||||||
</p>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{/* postal code and state */}
|
{/* postal code and state */}
|
||||||
<div className="sm:grid gap-5 grid-cols-3 mb-6">
|
<div className="sm:grid gap-5 grid-cols-3 my-3">
|
||||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
@@ -528,12 +523,13 @@ function AddFundDollars(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
|
<div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center">
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white gap-1"
|
||||||
>
|
>
|
||||||
<span className="text-white">Continue</span>
|
<span className="text-white">Continue</span>{" "}
|
||||||
|
<Icons name="chevron-right" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
Reference in New Issue
Block a user