diff --git a/src/assets/images/qr-sample.png b/src/assets/images/qr-sample.png new file mode 100644 index 0000000..e39f3ca Binary files /dev/null and b/src/assets/images/qr-sample.png differ diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index bac4931..7bda2ad 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -36,16 +36,6 @@ const validationSchema = Yup.object().shape({ .required("Timeline is required"), }); -// let initialValues = { -// // initial values for formik -// country: "NG", -// price: 0, -// title: "", -// description: "", -// job_detail: "", -// timeline_days: "", -// }; - function AddJob() { const ApiCall = new usersService(); const navigate = useNavigate(); diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index c17f860..fc32640 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -7,6 +7,7 @@ import React, { } from "react"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import profile from "../../assets/images/profile-info-profile.png"; +import qrSample from "../../assets/images/qr-sample.png"; import usersService from "../../services/UsersService"; import FamilyTasks from "./FamilyTasks"; @@ -99,7 +100,7 @@ export default function FamilyManageTabs({ accountDetails={accountDetails} /> -
+
    {tabs.map(({ name, id }) => ( @@ -130,7 +131,12 @@ export default function FamilyManageTabs({ ) : ( <> - {name === "Tasks" && } + {name === "Tasks" && ( + + )} {name === "Account" && ( )} @@ -212,15 +218,71 @@ function ProfileInfo({ } function Account({ familyDetails }) { + const handlePrint = () => { + const printableContent = ` + + + + + +
    +

    Family member details

    +

    Username: ${familyDetails?.username}

    +

    Password: ${familyDetails?.pin}

    + QR Code + + + `; + + const printWindow = window.open('', '', 'width=800,height=700'); + printWindow.document.open(); + printWindow.document.write(printableContent); + printWindow.document.close(); + + printWindow.onload = () => { + printWindow.print(); + }; + }; + return ( -
    -
    -

    - Username: {familyDetails?.username} -

    -

    - Pin: {familyDetails?.pin} -

    +
    +
    +
    +
    +

    + Username:{" "} + + {familyDetails?.username} + +

    +

    + Pin:{" "} + {familyDetails?.pin} +

    +
    + + + or + + +
    +

    + Scan the code from mobile app +

    + qr-sample +
    +
    +
    + +
    ); diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index a65e54f..8801227 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/src/components/jobPopout/EditJobPopout.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import ModalCom from "../Helpers/ModalCom"; -import { Form, Formik } from "formik"; +import { Field, Form, Formik } from "formik"; import * as Yup from "yup"; import InputCom from "../Helpers/Inputs/InputCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; @@ -245,20 +245,34 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
    - +
    + +
    + + + + {publicArray.map(({ name, duration }, idx) => ( + + ))} + {props.errors.timeline_days && props.touched.timeline_days && (

    @@ -316,3 +330,16 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => { }; export default EditJobPopOut; + +const publicArray = [ + { duration: 1, name: "1 day" }, + { duration: 2, name: "2 days" }, + { duration: 3, name: "3 days" }, + { duration: 4, name: "4 days" }, + { duration: 5, name: "5 days" }, + { duration: 6, name: "6 days" }, + { duration: 7, name: "1 week" }, + { duration: 14, name: "2 weeks" }, + { duration: 21, name: "3 weeks" }, + { duration: 28, name: "4 weeks" }, +]; diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx index cdb37da..caedf82 100644 --- a/src/components/jobPopout/JobListPopout.jsx +++ b/src/components/jobPopout/JobListPopout.jsx @@ -69,28 +69,49 @@ function JobListPopout({ details, onClose, situation }) { }; let [textArea, setTextArea] = useState(details?.job_detail); - const [errMsg, setErrMsg] = useState("") + const [errMsg, setErrMsg] = useState({ + deliveryDetail: "", + jobFields: { + family: "", + public: "", + individual: "", + group: "", + }, + }); const handleInputChange = ({ target: { value } }) => { setTextArea(value); }; - const errorHandler = ({target: {name}}) => { - - } + const errorHandler = ({ target: { name } }) => { + try { + if (name === "family") + setErrMsg({ jobFields: { family: "please select a family member" } }); + else if (name === "public") + setErrMsg({ jobFields: { public: "please select duration" } }); + else if (name === "individual") + setErrMsg({ jobFields: { individual: "please enter email" } }); + else if (name === "group") + setErrMsg({ jobFields: { group: "please select a family member" } }); + } finally { + setTimeout(() => { + setErrMsg({ jobFields: "" }); + }, 3000); + } + }; const jobFieldHandler = async (values, helpers) => { let { job_id, job_uid } = details; - if(!textArea) { - setErrMsg("delivery detail is required!") - return + if (!textArea) { + setErrMsg({ deliveryDetail: "delivery detail is required!" }); + return; } let jobReq = { job_id, job_uid, - job_description: textArea + job_description: textArea, }; let reqData; @@ -131,8 +152,7 @@ function JobListPopout({ details, onClose, situation }) { }; setLoader({ jobFields: { group: true } }); } else { - setErrMsg("err herre") - return + return; } try { @@ -148,7 +168,7 @@ function JobListPopout({ details, onClose, situation }) { }; return ( - +

    @@ -218,7 +238,7 @@ function JobListPopout({ details, onClose, situation }) { value={textArea} onChange={handleInputChange} /> - {/*

    {errMsg}

    */} +

    {errMsg.deliveryDetail}

    @@ -231,7 +251,7 @@ function JobListPopout({ details, onClose, situation }) { > {(props) => { return ( -
    + {/* Assign to Family */} - {/*

    {errMsg}

    */} +

    + {" "} + {props?.values.family === "" && ( + {errMsg.jobFields.family} + )} +

    {" "} ); }} @@ -256,7 +282,7 @@ function JobListPopout({ details, onClose, situation }) { > {(props) => { return ( -
    + {/* Offer this job to public input */} - {/*

    {errMsg}

    */} +

    + {" "} + {props?.values.public === "" && ( + {errMsg.jobFields.public} + )} +

    {" "} ); }} @@ -281,7 +313,7 @@ function JobListPopout({ details, onClose, situation }) { > {(props) => { return ( -
    + {/* Offer this job to individual input */} - {/*

    {errMsg}

    */} +

    + {" "} + {props?.values.individual === "" && ( + {errMsg.jobFields.individual} + )} +

    {" "} ); }} @@ -306,7 +344,7 @@ function JobListPopout({ details, onClose, situation }) { > {(props) => { return ( -
    + {/* Offer this job to your group input */} - {/*

    {errMsg}

    */} +

    + {" "} + {props?.values.group === "" && ( + {errMsg.jobFields.group} + )} +

    ); }} -
    {/* END OF ACTION SECTION */}
    @@ -346,11 +389,12 @@ const JobFieldInput = ({ btnText, parentClass, optionText, + errorHandler, loader, data, }) => { return ( -
    +
    {select && ( <>
    @@ -407,7 +451,7 @@ const JobFieldInput = ({ fieldClass="px-6" label={label} labelClass="tracking-wide" - type="text" + type="email" name={inputName} placeholder={placeholder} value={value} @@ -421,6 +465,7 @@ const JobFieldInput = ({