Merge branch 'Jobs-Manager-Side' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import usersService from "../../services/UsersService";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
@@ -11,9 +11,13 @@ import EditJobPopOut from "../jobPopout/EditJobPopout";
|
||||
|
||||
import DeleteIcon from "../../assets/images/icon-delete.svg";
|
||||
import EditIcon from "../../assets/images/icon-edit.svg";
|
||||
import { tableReload } from "../AddJob/settings";
|
||||
import CreditPopup from "../MyWallet/Popup/CreditPopup";
|
||||
import JobListPopout from "../jobPopout/JobListPopout";
|
||||
|
||||
export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Getting the categories
|
||||
const currentJobCart = MyJobList?.data?.categories;
|
||||
// DropDown Box
|
||||
@@ -23,21 +27,44 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
Object.keys(filterCategories)[0]
|
||||
);
|
||||
|
||||
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
||||
const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
|
||||
|
||||
let [deleteJobPopout, setDeleteJobPopout] = useState({
|
||||
const [deleteJobPopout, setDeleteJobPopout] = useState({
|
||||
show: false,
|
||||
data: {},
|
||||
}); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
|
||||
});
|
||||
const [editJob, setEditJob] = useState({ show: false, data: {} });
|
||||
|
||||
const [myCountry, setCountries] = useState("");
|
||||
|
||||
const {
|
||||
userDetails: { country },
|
||||
} = useSelector((state) => state?.userDetails);
|
||||
|
||||
const userApi = useMemo(() => new usersService(), []);
|
||||
|
||||
const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
|
||||
const [walletItem, setWalletItem] = useState(null);
|
||||
|
||||
/**
|
||||
* Opens the credit popup.
|
||||
* @param {Object} value - The value object.
|
||||
*/
|
||||
const openPopUp = (value) => {
|
||||
setCreditPopup({
|
||||
show: true,
|
||||
data: { ...value },
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Closes the credit popup and dispatches a table reload action.
|
||||
*/
|
||||
const closePopUp = () => {
|
||||
setCreditPopup({ show: false, data: {} });
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
};
|
||||
|
||||
// Get Country Api
|
||||
const getCountryList = useCallback(async () => {
|
||||
try {
|
||||
@@ -98,6 +125,121 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
}
|
||||
};
|
||||
|
||||
const { MyJobListHeader, MyJobListTable } = myJobTableFeatures(
|
||||
filterCategories,
|
||||
selectedCategory,
|
||||
handleSetCategory,
|
||||
setDeleteJobPopout,
|
||||
setEditJob,
|
||||
setJobPopout,
|
||||
MyJobList,
|
||||
filteredCurrentJobList,
|
||||
handlePagination,
|
||||
currentPage,
|
||||
currentJobList,
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<MyJobListHeader />
|
||||
{MyJobList?.loading ? (
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
) : (
|
||||
<MyJobListTable />
|
||||
)}
|
||||
|
||||
{/* Job List Popout */}
|
||||
{jobPopout.show && (
|
||||
<JobListPopout
|
||||
details={jobPopout.data}
|
||||
onClose={() => {
|
||||
setJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
setWalletItem={setWalletItem}
|
||||
openWallet={openPopUp}
|
||||
situation={jobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* End of Job List Popout */}
|
||||
|
||||
{/* Delete Job Popout */}
|
||||
{deleteJobPopout.show && (
|
||||
<DeleteJobPopout
|
||||
details={deleteJobPopout.data}
|
||||
onClose={() => {
|
||||
setDeleteJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
reloadJobList={reloadJobList}
|
||||
situation={deleteJobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* END of Delete Job Popout */}
|
||||
|
||||
{editJob.show && (
|
||||
<EditJobPopOut
|
||||
details={editJob.data}
|
||||
onClose={() => {
|
||||
setEditJob({
|
||||
show: false,
|
||||
data: {},
|
||||
});
|
||||
}}
|
||||
situation={editJob.show}
|
||||
country={myCountry}
|
||||
categories={currentJobCart}
|
||||
/>
|
||||
)}
|
||||
|
||||
{creditPopup.show && (
|
||||
<CreditPopup
|
||||
details={creditPopup.data}
|
||||
walletItem={walletItem}
|
||||
onClose={closePopUp}
|
||||
situation={openPopUp}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function myJobTableFeatures(
|
||||
filterCategories,
|
||||
selectedCategory,
|
||||
handleSetCategory,
|
||||
setDeleteJobPopout,
|
||||
setEditJob,
|
||||
setJobPopout,
|
||||
MyJobList,
|
||||
filteredCurrentJobList,
|
||||
handlePagination,
|
||||
currentPage,
|
||||
currentJobList,
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
) {
|
||||
// List of job table features
|
||||
const MyJobListHeader = () => (
|
||||
<div className="header w-full flex justify-between items-center mb-5">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{filterCategories[selectedCategory]} Jobs
|
||||
</h1>
|
||||
</div>
|
||||
<SelectBox
|
||||
action={handleSetCategory}
|
||||
datas={Object.values(filterCategories)}
|
||||
className="Update-table-dropdown"
|
||||
contentBodyClasses="w-auto min-w-max"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const JobListItem = ({ value, index, image_server }) => {
|
||||
let thePrice = PriceFormatter(
|
||||
value?.price * 0.01,
|
||||
@@ -187,7 +329,10 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setJobPopout({ show: true, data: { thePrice, ...value } });
|
||||
setJobPopout({
|
||||
show: true,
|
||||
data: { thePrice, ...value },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
@@ -198,32 +343,32 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
);
|
||||
};
|
||||
|
||||
const NoJobsRow = ({ text }) => (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">{text}</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const MyJobListTable = () => (
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
|
||||
<table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
<>
|
||||
{MyJobList &&
|
||||
MyJobList?.data?.result_list &&
|
||||
MyJobList.data?.result_list.length > 0 ? (
|
||||
filteredCurrentJobList?.length ? (
|
||||
{MyJobList?.data?.result_list?.length > 0 ? (
|
||||
filteredCurrentJobList.length > 0 ? (
|
||||
filteredCurrentJobList.map((value, index) => (
|
||||
<JobListItem
|
||||
index={index}
|
||||
key={index}
|
||||
index={index}
|
||||
value={value}
|
||||
image_server={MyJobList?.data.session_image_server}
|
||||
image_server={MyJobList.data.session_image_server}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">No Jobs Available In This Category!</td>
|
||||
</tr>
|
||||
<NoJobsRow text="No Jobs Available In This Category!" />
|
||||
)
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">No Jobs Available!</td>
|
||||
</tr>
|
||||
<NoJobsRow text="No Jobs Available!" />
|
||||
)}
|
||||
</>
|
||||
</tbody>
|
||||
@@ -246,71 +391,5 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="header w-full flex justify-between items-center mb-5">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{filterCategories[selectedCategory]} Jobs
|
||||
</h1>
|
||||
</div>
|
||||
<SelectBox
|
||||
action={handleSetCategory}
|
||||
datas={Object.values(filterCategories)}
|
||||
className="Update-table-dropdown"
|
||||
contentBodyClasses="w-auto min-w-max"
|
||||
/>
|
||||
</div>
|
||||
{MyJobList?.loading ? (
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
) : (
|
||||
<MyJobListTable />
|
||||
)}
|
||||
|
||||
{/* Job List Popout */}
|
||||
{jobPopout.show && (
|
||||
<JobListPopout
|
||||
details={jobPopout.data}
|
||||
onClose={() => {
|
||||
setJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={jobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* End of Job List Popout */}
|
||||
|
||||
{/* Delete Job Popout */}
|
||||
{deleteJobPopout.show && (
|
||||
<DeleteJobPopout
|
||||
details={deleteJobPopout.data}
|
||||
onClose={() => {
|
||||
setDeleteJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
reloadJobList={reloadJobList}
|
||||
situation={deleteJobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* END of Delete Job Popout */}
|
||||
|
||||
{editJob.show && (
|
||||
<EditJobPopOut
|
||||
details={editJob.data}
|
||||
onClose={() => {
|
||||
setEditJob({
|
||||
show: false,
|
||||
data: {},
|
||||
});
|
||||
}}
|
||||
situation={editJob.show}
|
||||
country={myCountry}
|
||||
categories={currentJobCart}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return { MyJobListHeader, MyJobListTable };
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
<ConfirmAddFund
|
||||
confirmCredit={confirmCredit}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
walletItem={walletItem}
|
||||
walletItem={walletItem || details}
|
||||
onClose={onClose}
|
||||
/>
|
||||
) : confirmCredit?.show?.acceptConfirm?.state ? (
|
||||
|
||||
@@ -6,7 +6,6 @@ import usersService from "../../services/UsersService";
|
||||
import { tableReload } from "../../store/TableReloads";
|
||||
import InputCom from "../Helpers/Inputs/InputCom/index";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import Detail from "./popoutcomponent/Detail";
|
||||
|
||||
@@ -23,7 +22,13 @@ const validationSchema = Yup.object().shape({
|
||||
group: Yup.string(),
|
||||
});
|
||||
|
||||
function JobListPopout({ details, onClose, situation }) {
|
||||
function JobListPopout({
|
||||
details,
|
||||
onClose,
|
||||
situation,
|
||||
openWallet,
|
||||
setWalletItem,
|
||||
}) {
|
||||
const [selectedTab, setSelectedTab] = useState("public");
|
||||
const tabs = ["public", "individual", "group"];
|
||||
|
||||
@@ -65,6 +70,12 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
|
||||
const taskWalletSelector = getWalletDetail(details?.currency);
|
||||
|
||||
const openCreditPopup = () => {
|
||||
onClose();
|
||||
setWalletItem(taskWalletSelector);
|
||||
openWallet();
|
||||
};
|
||||
|
||||
// member listing
|
||||
const memberList = useCallback(async () => {
|
||||
setLoader({ member: true, jobFields: false });
|
||||
@@ -138,6 +149,7 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
job_uid,
|
||||
job_description: textArea,
|
||||
};
|
||||
|
||||
let reqData;
|
||||
|
||||
// for family input
|
||||
@@ -238,7 +250,147 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
});
|
||||
}, []);
|
||||
|
||||
console.log("wallet >> ", walletDetails, details, taskWalletSelector);
|
||||
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 (
|
||||
<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">
|
||||
@@ -272,47 +424,9 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{/* <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>
|
||||
<DetailsComponent />
|
||||
|
||||
<>
|
||||
{/* ACTION SECTION */}
|
||||
@@ -324,165 +438,25 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
<div className="flex flex-col grow">
|
||||
<div className="grid grid-cols-3 mt-4">
|
||||
{tabs.map((item) => (
|
||||
<button
|
||||
// className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
|
||||
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>
|
||||
<TabButton
|
||||
key={item}
|
||||
item={item}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
|
||||
{selectedTab == "family" && (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema.fields.family}
|
||||
onSubmit={jobFieldHandler}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<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>
|
||||
)}
|
||||
<FormSection
|
||||
selectedTab={selectedTab}
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema.fields[selectedTab]}
|
||||
jobFieldHandler={jobFieldHandler}
|
||||
loader={loader}
|
||||
errorHandler={errorHandler}
|
||||
errMsg={errMsg}
|
||||
/>
|
||||
|
||||
{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
|
||||
className={`text-center w-full text-lg ${
|
||||
requestStatus.status
|
||||
@@ -496,7 +470,10 @@ function JobListPopout({ details, onClose, situation }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ZeroBalanceChecker {...taskWalletSelector} />
|
||||
<ZeroBalanceChecker
|
||||
{...taskWalletSelector}
|
||||
openCreditPopup={openCreditPopup}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* END OF ACTION SECTION */}
|
||||
@@ -653,18 +630,43 @@ const publicArray = [
|
||||
{ duration: 28, name: "4 weeks" },
|
||||
];
|
||||
|
||||
const ZeroBalanceChecker = ({ amount, code, country }) => {
|
||||
let thePrice = PriceFormatter(amount * 0.01, code, country);
|
||||
|
||||
const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
|
||||
return (
|
||||
<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">
|
||||
Wallet Balance:{` ${code} ${amount}`}
|
||||
Wallet Balance:{` ${code} ${(+amount * 0.01).toFixed(2)}`}
|
||||
</h1>
|
||||
<p className="font-semibold text-center text-red-500 text-lg">You do not have sufficient balance to assign this task</p>
|
||||
<button className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">
|
||||
<p className="font-semibold text-center text-red-500 text-lg">
|
||||
You do not have sufficient balance to assign this task
|
||||
</p>
|
||||
<button
|
||||
onClick={openCreditPopup}
|
||||
className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
|
||||
>
|
||||
Add Credit to Wallet
|
||||
</button>
|
||||
</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