Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
d51c9dc55d | ||
 ameye
|
c7985e6b48 | ||
|
Ebube
|
985dc58f37 | ||
|
Ebube
|
d3a19d0a31 | ||
 tokslaw
|
e1a7b8647b |
@@ -13,7 +13,7 @@ const validationSchema = Yup.object().shape({
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("Country is required"),
|
||||
price: Yup.number()
|
||||
.typeError("you must specify a number")
|
||||
.typeError("you must specify a number")
|
||||
.min(1, "Price must be greater than 0")
|
||||
.required("Price is required"),
|
||||
title: Yup.string()
|
||||
@@ -36,7 +36,7 @@ const validationSchema = Yup.object().shape({
|
||||
|
||||
let initialValues = { // initial values for formik
|
||||
country: '',
|
||||
price: '',
|
||||
price: 0,
|
||||
title: '',
|
||||
description: '',
|
||||
job_detail: '',
|
||||
@@ -137,8 +137,10 @@ function AddJob() {
|
||||
<select
|
||||
id='country'
|
||||
name='country'
|
||||
value={props.values.country}
|
||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{country.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
@@ -179,11 +181,13 @@ function AddJob() {
|
||||
label="Price"
|
||||
labelClass='tracking-wide'
|
||||
inputBg = 'bg-slate-100'
|
||||
type="text"
|
||||
type="number"
|
||||
name="price"
|
||||
fieldClass='text-right'
|
||||
// placeholder="Please Enter Amount"
|
||||
value={props.values.price}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.price && props.touched.price && (
|
||||
<p className="text-sm text-red-500">
|
||||
@@ -206,6 +210,7 @@ function AddJob() {
|
||||
// placeholder="Enter Job Title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.title && props.touched.title && (
|
||||
<p className="text-sm text-red-500">
|
||||
@@ -226,6 +231,7 @@ function AddJob() {
|
||||
// placeholder="Enter a description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.description && props.touched.description && (
|
||||
<p className="text-sm text-red-500">
|
||||
@@ -258,6 +264,7 @@ function AddJob() {
|
||||
name='job_detail'
|
||||
value={props.values.job_detail}
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
{props.errors.job_detail && props.touched.job_detail && (
|
||||
<p className="text-sm text-red-500">
|
||||
@@ -278,6 +285,7 @@ function AddJob() {
|
||||
// placeholder="Please Enter Detail Description of Job"
|
||||
value={props.values.timeline_days}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.timeline_days && props.touched.timeline_days && (
|
||||
<p className="text-sm text-red-500">
|
||||
|
||||
@@ -20,119 +20,28 @@ export default function InputCom({
|
||||
disable,
|
||||
blurHandler,
|
||||
spanTag,
|
||||
inputBg
|
||||
inputBg,
|
||||
direction
|
||||
}) {
|
||||
const inputRef = useRef(null);
|
||||
// Entry Validation
|
||||
// for Min Length:
|
||||
const minLengthValidation = () => {
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
|
||||
return 7;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "first_name"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "last_name"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "address"
|
||||
) {
|
||||
return 5;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "password"
|
||||
) {
|
||||
return 8;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "state"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "province"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "city"
|
||||
) {
|
||||
return 3;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "amount"
|
||||
) {
|
||||
return 1;
|
||||
}
|
||||
const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
|
||||
return inputConfig || 0;
|
||||
};
|
||||
|
||||
// for MaxLength
|
||||
const maxLengthValidation = () => {
|
||||
if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
|
||||
return 35;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "first_name"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "last_name"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "address"
|
||||
) {
|
||||
return 49;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "password"
|
||||
) {
|
||||
return 15;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "state"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "province"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "city"
|
||||
) {
|
||||
return 25;
|
||||
} else if (
|
||||
inputRef &&
|
||||
inputRef?.current &&
|
||||
inputRef?.current?.name === "amount"
|
||||
) {
|
||||
return 9;
|
||||
}
|
||||
const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
|
||||
return inputConfig || 30;
|
||||
};
|
||||
|
||||
// for Patterns
|
||||
const inputPatterns = () => {
|
||||
const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
|
||||
return inputConfig || ""
|
||||
}
|
||||
return (
|
||||
<div className={`input-com ${parentClass}`}>
|
||||
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
||||
@@ -140,9 +49,13 @@ export default function InputCom({
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
htmlFor={name}
|
||||
>
|
||||
>
|
||||
{label}
|
||||
{spanTag && <span className="text-green-700 text-sm tracking-wide">{spanTag}</span>}
|
||||
{spanTag && (
|
||||
<span className="text-green-700 text-sm tracking-wide">
|
||||
{spanTag}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
{forgotPassword && (
|
||||
@@ -161,15 +74,19 @@ export default function InputCom({
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={inputHandler}
|
||||
className={`input-field placeholder:text-base text-bese px-12 text-dark-gray w-full h-full ${inputBg ? inputBg: 'bg-[#FAFAFA]'} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
|
||||
inputBg ? inputBg : "bg-[#FAFAFA]"
|
||||
} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
minLength={minLengthValidation()}
|
||||
maxLength={maxLengthValidation()}
|
||||
pattern={() => inputPatterns}
|
||||
ref={inputRef}
|
||||
readOnly={disable}
|
||||
onBlur={blurHandler}
|
||||
dir={direction}
|
||||
/>
|
||||
{iconName && (
|
||||
<div className="absolute right-6 bottom-[10px] z-10">
|
||||
@@ -188,3 +105,21 @@ export default function InputCom({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputConfigs = {
|
||||
email: { minLength: 7, maxLength: 30 },
|
||||
first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
||||
last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
||||
address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
|
||||
password: { minLength: 8, maxLength: 15, pattern: ".{8,}" },
|
||||
state: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
||||
province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
||||
city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
|
||||
amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
|
||||
};
|
||||
|
||||
/* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
|
||||
Alphabets Only: <input type="text" pattern="[a-zA-Z]+" /> strictly alphabets
|
||||
Alphanumeric: <input type="text" pattern="[a-zA-Z0-9]+" /> mix
|
||||
Password: <input type="text" pattern=".{8,}" /> a minimum of 8 characters
|
||||
*/
|
||||
|
||||
@@ -136,21 +136,25 @@ function TransferFund({ payment, wallet }) {
|
||||
</h2>
|
||||
) : wallet.error ? (
|
||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
Opps! An Error Occured
|
||||
Opps! An Error Occurred
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
No Wallet Information Found!
|
||||
</h2>
|
||||
)}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<div className=" mb-6 gap-4 flex flex-col">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Amount"
|
||||
type="text"
|
||||
fieldClass="px-4"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] max-w-[12rem]"
|
||||
label="Amount:"
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
direction="rtl"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={(e) => {
|
||||
@@ -160,7 +164,7 @@ function TransferFund({ payment, wallet }) {
|
||||
// onMouseLeave={(e)=>{getSendMoneyFee(e)}}
|
||||
/>
|
||||
{props.errors.amount && props.touched.amount && (
|
||||
<p className="text-sm text-red-500">
|
||||
<p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
|
||||
{props.errors.amount}
|
||||
</p>
|
||||
)}
|
||||
@@ -168,25 +172,31 @@ function TransferFund({ payment, wallet }) {
|
||||
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Fee"
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
label="Fee:"
|
||||
type="text"
|
||||
name="fee"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
|
||||
}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:flex items-center justify-end">
|
||||
<div className="field w-full lg:w-1/2 mb-6">
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Total"
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
label="Total:"
|
||||
type="text"
|
||||
name="total"
|
||||
direction="rtl"
|
||||
value={
|
||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.total
|
||||
}
|
||||
@@ -197,87 +207,85 @@ function TransferFund({ payment, wallet }) {
|
||||
|
||||
<div className="w-full">
|
||||
<div className="relative my-3 md:flex items-center">
|
||||
<div className="transfer-input w-full">
|
||||
<div className="flex items-center justify-start py-2">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
||||
Recipient
|
||||
<span className="text-red-500 mx-2">*</span>
|
||||
<span
|
||||
title="Transfer Recipient"
|
||||
className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}
|
||||
>
|
||||
!
|
||||
</span>
|
||||
</label>
|
||||
<Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80"
|
||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
|
||||
Recipient:
|
||||
</label>
|
||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
||||
<select
|
||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
Add New
|
||||
</Link>
|
||||
</div>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0"
|
||||
value={props.values.recipientID}
|
||||
name="recipientID"
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
>
|
||||
{recipients.loading ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
{recipients.loading ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
Loading...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
{item.recipient}
|
||||
Select...
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Could'nt Load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
No Recipient Found! Click Add to Add
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{recipients.data.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_id}
|
||||
className="text-slate-500 text-lg"
|
||||
>
|
||||
{item.recipient}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
) : recipients.error ? (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Could'nt load, try again!
|
||||
</option>
|
||||
) : (
|
||||
<option
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
No Recipient Found!
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className="flex justify-end relative w-full">
|
||||
{props.errors.recipientID &&
|
||||
props.touched.recipientID && (
|
||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
to="add-recipient"
|
||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
||||
>
|
||||
Add New
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{props.errors.recipientID && props.touched.recipientID && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.recipientID}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6">
|
||||
{/* <InputCom fieldClass="px-6"
|
||||
label="Comment"
|
||||
type="text"
|
||||
name="comment"
|
||||
value={inputs.comment}
|
||||
inputHandler={handleChange}
|
||||
/> */}
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block mb-2.5">
|
||||
Comment
|
||||
<div className="field w-full mb-6 flex gap-1 justify-between">
|
||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
||||
Comment:
|
||||
</label>
|
||||
<textarea
|
||||
style={{ resize: "none" }}
|
||||
className="text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
||||
className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
name="comment"
|
||||
value={props.values.comment}
|
||||
onChange={props.handleChange}
|
||||
|
||||
@@ -10,14 +10,15 @@ function DeleteJobPopout({details, onClose, situation}) {
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({laoding: false, status:false, message: ''}) // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
|
||||
|
||||
// FUNCTION CALLED ONCE USER CONFIRM DELETE JOB
|
||||
const deleteJob = (details) => {
|
||||
setRequestStatus({laoding: true, status:false, message: ''})
|
||||
const {job_id} = details
|
||||
let reqData = {
|
||||
job_id: details.job_id
|
||||
job_id: details.job_id,
|
||||
job_uid: details.job_uid
|
||||
} // DATA NEEDED BY THE API
|
||||
console.log(reqData)
|
||||
|
||||
|
||||
// API CALL TO DELETE A JOB
|
||||
ApiCall.deleteJob(reqData).then(res => {
|
||||
if(res.data.internal_return < 0){
|
||||
setRequestStatus({laoding: false, status:false, message: 'Could not perform the request, try again!'})
|
||||
@@ -26,6 +27,8 @@ function DeleteJobPopout({details, onClose, situation}) {
|
||||
setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'})
|
||||
setTimeout(()=>{
|
||||
navigate('/myjobs', {replace: true})
|
||||
onClose()
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
}).catch(error => {
|
||||
setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'})
|
||||
|
||||
@@ -105,6 +105,11 @@ input::-webkit-inner-spin-button {
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="text"][dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.default-border-bottom {
|
||||
border-bottom: 1px solid #d3d2fe;
|
||||
}
|
||||
@@ -364,6 +369,13 @@ input[type="number"] {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.transfer-field, .transfer-field:focus, .transfer-field:focus-within{
|
||||
background: #FFF !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* the parent */
|
||||
.trending-products .slick-list {
|
||||
margin: 0 -16px;
|
||||
|
||||
Reference in New Issue
Block a user