From e5162a2aafea11c69d37790b1eaaaaea07cfc7f8 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Fri, 26 Jan 2024 01:46:56 +0100
Subject: [PATCH] refactored some things

---
 src/components/jobPopout/JobListPopout.jsx | 377 ++++++++++-----------
 1 file changed, 181 insertions(+), 196 deletions(-)

diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 5c3d5da..f805719 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -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 (
     <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">
@@ -283,47 +424,9 @@ function JobListPopout({
             </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 */}
@@ -335,165 +438,25 @@ function JobListPopout({
                 <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
@@ -671,7 +634,7 @@ 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).toFixed(2)}`}
+        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
@@ -685,3 +648,25 @@ const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
     </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>
+);