refactored some things
This commit was merged in pull request #559.
This commit is contained in:
@@ -250,6 +250,147 @@ function JobListPopout({
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const DetailsSection = ({ label, value }) => (
|
||||||
|
<div className="my-3 md:flex">
|
||||||
|
<Detail label={label} value={value} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const DetailsComponent = () => {
|
||||||
|
const detailsArray = [
|
||||||
|
{ label: "Description", value: details.description },
|
||||||
|
{ label: "Price", value: details.thePrice },
|
||||||
|
{ label: "Timeline", value: `${details.timeline_days} day(s)` },
|
||||||
|
{ label: "Created", value: new Date(details?.created).toDateString() },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="px-4 pb-3 w-full md:border-r-2">
|
||||||
|
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
|
||||||
|
|
||||||
|
{/* INPUT SECTION */}
|
||||||
|
{detailsArray.map((detail, index) => (
|
||||||
|
<DetailsSection
|
||||||
|
key={index}
|
||||||
|
label={detail.label}
|
||||||
|
value={detail.value}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
|
||||||
|
Delivery Detail
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
||||||
|
rows="7"
|
||||||
|
style={{ resize: "none" }}
|
||||||
|
value={textArea}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
<p>{errMsg.deliveryDetail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormSection = ({
|
||||||
|
selectedTab,
|
||||||
|
initialValues,
|
||||||
|
validationSchema,
|
||||||
|
jobFieldHandler,
|
||||||
|
loader,
|
||||||
|
errorHandler,
|
||||||
|
errMsg,
|
||||||
|
}) => {
|
||||||
|
const renderForm = (props) => {
|
||||||
|
// Render the appropriate form based on the selected tab
|
||||||
|
switch (selectedTab) {
|
||||||
|
case "family":
|
||||||
|
return (
|
||||||
|
<JobFieldInput
|
||||||
|
label="Assign to family"
|
||||||
|
select={true}
|
||||||
|
inputName="family"
|
||||||
|
value={props?.values.family}
|
||||||
|
data={familyList}
|
||||||
|
btnText="Assign to family"
|
||||||
|
optionText="Select Family"
|
||||||
|
loader={loader?.jobFields?.family}
|
||||||
|
errorHandler={errorHandler}
|
||||||
|
parentClass="w-full flex flex-col gap-4"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "public":
|
||||||
|
return (
|
||||||
|
<JobFieldInput
|
||||||
|
label="Offer this job to public"
|
||||||
|
select={true}
|
||||||
|
inputName="public"
|
||||||
|
value={props?.values.public}
|
||||||
|
data={publicArray}
|
||||||
|
btnText="Show Task to Public"
|
||||||
|
optionText="Select Duration"
|
||||||
|
loader={loader?.jobFields?.public}
|
||||||
|
errorHandler={errorHandler}
|
||||||
|
parentClass="w-full flex flex-col gap-4"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "individual":
|
||||||
|
return (
|
||||||
|
<JobFieldInput
|
||||||
|
label="Offer this job to individual"
|
||||||
|
input={true}
|
||||||
|
inputName="individual"
|
||||||
|
value={props?.values.individual}
|
||||||
|
placeholder="Enter email of individual"
|
||||||
|
inputHandler={props?.handleChange}
|
||||||
|
btnText="Send Offer to Individual"
|
||||||
|
loader={loader?.jobFields?.individual}
|
||||||
|
errorHandler={errorHandler}
|
||||||
|
parentClass="w-full flex flex-col gap-4"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "group":
|
||||||
|
return (
|
||||||
|
<JobFieldInput
|
||||||
|
label="Offer this job to your Group"
|
||||||
|
select={true}
|
||||||
|
inputName="group"
|
||||||
|
value={props?.values.group}
|
||||||
|
btnText="Send Order to Group"
|
||||||
|
optionText="Select Group"
|
||||||
|
loader={loader?.jobFields?.group}
|
||||||
|
errorHandler={errorHandler}
|
||||||
|
data={groupList}
|
||||||
|
parentClass="w-full flex flex-col gap-4"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Formik
|
||||||
|
initialValues={initialValues}
|
||||||
|
validationSchema={validationSchema}
|
||||||
|
onSubmit={jobFieldHandler}
|
||||||
|
>
|
||||||
|
{(props) => (
|
||||||
|
<Form className="">
|
||||||
|
{renderForm(props)}
|
||||||
|
<p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
|
||||||
|
{props?.values[selectedTab] === "" && (
|
||||||
|
<span>{errMsg?.jobFields[selectedTab]}</span>
|
||||||
|
)}
|
||||||
|
</p>{" "}
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={onClose} situation={situation} className="">
|
<ModalCom action={onClose} situation={situation} className="">
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
@@ -283,47 +424,9 @@ function JobListPopout({
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
|
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
|
||||||
<div className="px-4 pb-3 w-full md:border-r-2">
|
<DetailsComponent />
|
||||||
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
|
|
||||||
|
|
||||||
{/* INPUT SECTION */}
|
|
||||||
<div className="my-3 md:flex">
|
|
||||||
<Detail label="Description" value={details.description} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 md:flex">
|
|
||||||
<Detail label="Price" value={details.thePrice} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Timeline"
|
|
||||||
value={`${details.timeline_days} day(s)`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Created"
|
|
||||||
value={new Date(details?.created).toDateString()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="">
|
|
||||||
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
|
|
||||||
Delivery Detail
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
|
||||||
rows="7"
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
value={textArea}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
<p>{errMsg.deliveryDetail}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<>
|
<>
|
||||||
{/* ACTION SECTION */}
|
{/* ACTION SECTION */}
|
||||||
@@ -335,165 +438,25 @@ function JobListPopout({
|
|||||||
<div className="flex flex-col grow">
|
<div className="flex flex-col grow">
|
||||||
<div className="grid grid-cols-3 mt-4">
|
<div className="grid grid-cols-3 mt-4">
|
||||||
{tabs.map((item) => (
|
{tabs.map((item) => (
|
||||||
<button
|
<TabButton
|
||||||
// className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
|
key={item}
|
||||||
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
|
item={item}
|
||||||
selectedTab == item
|
selectedTab={selectedTab}
|
||||||
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
|
setSelectedTab={setSelectedTab}
|
||||||
: "bg-white text-[#000]"
|
/>
|
||||||
}`}
|
|
||||||
value={item}
|
|
||||||
name={item}
|
|
||||||
onClick={() => setSelectedTab(item)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
|
|
||||||
selectedTab == item
|
|
||||||
? "border-white bg-emerald-500"
|
|
||||||
: "border-red-50 dark:border-[#D85A5A] bg-white"
|
|
||||||
}`}
|
|
||||||
></div>
|
|
||||||
{item[0].toUpperCase() + item.slice(1)}
|
|
||||||
</button>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
|
<div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
|
||||||
{selectedTab == "family" && (
|
<FormSection
|
||||||
<Formik
|
selectedTab={selectedTab}
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
validationSchema={validationSchema.fields.family}
|
validationSchema={validationSchema.fields[selectedTab]}
|
||||||
onSubmit={jobFieldHandler}
|
jobFieldHandler={jobFieldHandler}
|
||||||
>
|
loader={loader}
|
||||||
{(props) => {
|
errorHandler={errorHandler}
|
||||||
return (
|
errMsg={errMsg}
|
||||||
<Form className="hidden">
|
/>
|
||||||
{/* Assign to Family */}
|
|
||||||
<JobFieldInput
|
|
||||||
label="Assign to family"
|
|
||||||
select={true}
|
|
||||||
inputName="family"
|
|
||||||
value={props?.values.family}
|
|
||||||
data={familyList}
|
|
||||||
btnText="Assign to family"
|
|
||||||
optionText="Select Family"
|
|
||||||
loader={loader?.jobFields?.family}
|
|
||||||
errorHandler={errorHandler}
|
|
||||||
parentClass="w-full flex flex-col gap-4"
|
|
||||||
/>
|
|
||||||
<p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
|
|
||||||
{" "}
|
|
||||||
{props?.values?.family === "" && (
|
|
||||||
<span>{errMsg?.jobFields?.family}</span>
|
|
||||||
)}
|
|
||||||
</p>{" "}
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedTab == "public" && (
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema.fields.public}
|
|
||||||
onSubmit={jobFieldHandler}
|
|
||||||
>
|
|
||||||
{(props) => {
|
|
||||||
return (
|
|
||||||
<Form className="">
|
|
||||||
{/* Offer this job to public input */}
|
|
||||||
<JobFieldInput
|
|
||||||
label="Offer this job to public"
|
|
||||||
select={true}
|
|
||||||
inputName="public"
|
|
||||||
value={props?.values.public}
|
|
||||||
data={publicArray}
|
|
||||||
btnText="Show Task to Public"
|
|
||||||
optionText="Select Duration"
|
|
||||||
loader={loader?.jobFields?.public}
|
|
||||||
errorHandler={errorHandler}
|
|
||||||
parentClass="w-full flex flex-col gap-4"
|
|
||||||
/>
|
|
||||||
<p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
|
|
||||||
{" "}
|
|
||||||
{props?.values.public === "" && (
|
|
||||||
<span>{errMsg?.jobFields?.public}</span>
|
|
||||||
)}
|
|
||||||
</p>{" "}
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedTab == "individual" && (
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema.fields.individual}
|
|
||||||
onSubmit={jobFieldHandler}
|
|
||||||
>
|
|
||||||
{(props) => {
|
|
||||||
return (
|
|
||||||
<Form className="">
|
|
||||||
{/* Offer this job to individual input */}
|
|
||||||
<JobFieldInput
|
|
||||||
label="Offer this job to individual"
|
|
||||||
input={true}
|
|
||||||
inputName="individual"
|
|
||||||
value={props?.values.individual}
|
|
||||||
placeholder="Enter email of individual"
|
|
||||||
inputHandler={props?.handleChange}
|
|
||||||
btnText="Send Offer to Individual"
|
|
||||||
loader={loader?.jobFields?.individual}
|
|
||||||
errorHandler={errorHandler}
|
|
||||||
parentClass="w-full flex flex-col gap-4"
|
|
||||||
/>
|
|
||||||
<p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
|
|
||||||
{" "}
|
|
||||||
{props?.values.individual === "" && (
|
|
||||||
<span>{errMsg?.jobFields?.individual}</span>
|
|
||||||
)}
|
|
||||||
</p>{" "}
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
|
|
||||||
{selectedTab == "group" && (
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema.fields.group}
|
|
||||||
onSubmit={jobFieldHandler}
|
|
||||||
>
|
|
||||||
{(props) => {
|
|
||||||
return (
|
|
||||||
<Form className="">
|
|
||||||
{/* Offer this job to your group input */}
|
|
||||||
<JobFieldInput
|
|
||||||
label="Offer this job to your Group"
|
|
||||||
select={true}
|
|
||||||
inputName="group"
|
|
||||||
value={props?.values.group}
|
|
||||||
btnText="Send Order to Group"
|
|
||||||
optionText="Select Group"
|
|
||||||
loader={loader?.jobFields?.group}
|
|
||||||
errorHandler={errorHandler}
|
|
||||||
data={groupList}
|
|
||||||
parentClass="w-full flex flex-col gap-4"
|
|
||||||
/>
|
|
||||||
<p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
|
|
||||||
{" "}
|
|
||||||
{props?.values.group === "" && (
|
|
||||||
<span>{errMsg?.jobFields?.group}</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
)}
|
|
||||||
<p
|
<p
|
||||||
className={`text-center w-full text-lg ${
|
className={`text-center w-full text-lg ${
|
||||||
requestStatus.status
|
requestStatus.status
|
||||||
@@ -671,7 +634,7 @@ const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
|
<div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
|
||||||
<h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
|
<h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
|
||||||
Wallet Balance:{` ${code} ${(+amount).toFixed(2)}`}
|
Wallet Balance:{` ${code} ${(+amount * 0.01).toFixed(2)}`}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="font-semibold text-center text-red-500 text-lg">
|
<p className="font-semibold text-center text-red-500 text-lg">
|
||||||
You do not have sufficient balance to assign this task
|
You do not have sufficient balance to assign this task
|
||||||
@@ -685,3 +648,25 @@ const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const TabButton = ({ item, selectedTab, setSelectedTab }) => (
|
||||||
|
<button
|
||||||
|
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
|
||||||
|
selectedTab === item
|
||||||
|
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
|
||||||
|
: "bg-white text-[#000]"
|
||||||
|
}`}
|
||||||
|
value={item}
|
||||||
|
name={item}
|
||||||
|
onClick={() => setSelectedTab(item)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
|
||||||
|
selectedTab === item
|
||||||
|
? "border-white bg-emerald-500"
|
||||||
|
: "border-red-50 dark:border-[#D85A5A] bg-white"
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
{item[0].toUpperCase() + item.slice(1)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user