From eacfae19f0566a8c9d9a440a97f8bd70a1560971 Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 28 Nov 2023 07:26:34 -0800
Subject: [PATCH] Currency Bug Fix

---
 src/components/AddJob/AddJob.jsx | 141 ++++++++++++++++---------------
 1 file changed, 74 insertions(+), 67 deletions(-)

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index 0bfb873..6aaa71b 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
     .typeError("you must specify a number")
     .min(1, "Price must be greater than 0")
     .required("Timeline is required"),
-  category: Yup.string().min(1, "Select at least one checkbox"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
 });
 
 function AddJob({ popUpHandler, categories }) {
@@ -48,24 +48,30 @@ function AddJob({ popUpHandler, categories }) {
 
   let dispatch = useDispatch();
 
-   const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+  const getWalletDetail = (countryParams) => {
+    // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
     const walletChecker = walletDetails?.data.find(
-      (item) => item.country === country
+      (item) => item.country === countryParams
     );
-    return walletChecker ? walletChecker.code : "";
+    return walletChecker
+      ? {
+          description: walletChecker.description,
+          country: walletChecker.country,
+        }
+      : "";
   };
 
-    const walletAmount = getWalletDetail(userDetails.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
+  const walletAmount = getWalletDetail(userDetails.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
 
   let initialValues = {
     // initial values for formik
-    country: walletAmount,
+    country: walletAmount?.description,
     price: "",
     title: "",
     description: "",
     job_detail: "",
     timeline_days: "",
-    category: "",
+    category: [],
   };
 
   let [requestStatus, setRequestStatus] = useState({
@@ -74,18 +80,25 @@ function AddJob({ popUpHandler, categories }) {
     message: "",
   }); // Holds state when submit button is pressed
 
+  // const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+  //   const walletChecker = walletDetails?.data.find(
+  //     (item) => item.country === country
+  //   );
+  //   return walletChecker ? walletChecker.amount : 0;
+  // };
 
   const handleAddJob = async (values, helpers) => {
     const reqData = {
-      country: values?.country,
+      country: walletAmount?.country,
       price: Number(values.price) * 100,
       title: values?.title,
       description: values?.description,
       job_detail: values?.job_detail,
       timeline_days: values?.timeline_days,
-      category: values.category,
+      category: values.category?.join("@"),
     };
 
+    // const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
 
     // if (reqData.price > walletAmount) {
     //   setRequestStatus({
@@ -138,7 +151,7 @@ function AddJob({ popUpHandler, categories }) {
   };
 
   return (
-    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col sm:overflow-auto justify-between">
+    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -152,24 +165,24 @@ function AddJob({ popUpHandler, categories }) {
                   {/* inputs starts here */}
                   <div className="xl:flex xl:space-x-7 mb-[5px]">
                     <div className="field w-full mb-6 xl:mb-0">
-                       <InputCom
-                          fieldClass="px-6 cursor-default"
-                          label="Currency"
-                          labelClass="tracking-wide"
-                          // inputBg="bg-slate-100"
-                          // inputClass="input-curve border border-light-purple"
-                          type="text"
-                          name="country"
-                          value={props.values.country}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          disable={true}
-                          error={
-                            props.errors.country &&
-                            props.touched.country &&
-                            props.errors.country
-                          }
-                          />
+                      <InputCom
+                        fieldClass="px-6 cursor-default"
+                        label="currency"
+                        labelClass="tracking-wide"
+                        // inputBg="bg-slate-100"
+                        // inputClass="input-curve border border-light-purple"
+                        type="text"
+                        name="country"
+                        value={props.values.country}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        disable={true}
+                        error={
+                          props.errors.country &&
+                          props.touched.country &&
+                          props.errors.country
+                        }
+                      />
                     </div>
 
                     {/* Price */}
@@ -233,7 +246,7 @@ function AddJob({ popUpHandler, categories }) {
 
                   {/* Details */}
                   <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                    <div className="w-full">
+                    <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
                         className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
@@ -249,7 +262,7 @@ function AddJob({ popUpHandler, categories }) {
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[64px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}
@@ -257,56 +270,50 @@ function AddJob({ popUpHandler, categories }) {
                         onBlur={props.handleBlur}
                       />
                     </div>
-                  </div>
-                  
-                  <div className="w-full mb-5">
-                   <label
+
+                    <div className="sm:w-[35%] w-full">
+                      <div
                         htmlFor="Job Categories"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        id="checked-group"
                       >
                         Categories
-                        {props.errors.category && props.touched.category && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.category}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="category"
-                        name="category"
-                        value={props.values.category}
-                        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 border`}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
+                      </div>
+                      <div
+                        className="sm:flex-col flex flex-wrap px-3 mt-3"
+                        role="group"
+                        aria-labelledby="checked-group"
                       >
-                        {walletDetails?.loading ? (
-                          <option className="text-slate-500 text-lg" value="">
-                            Loading...
-                          </option>
-                        ) : walletDetails.data.length ? (
+                        {categories ? (
                           <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select a Category
-                            </option>
                             {Object?.entries(categories).map(([key, value]) => (
-                              <option
+                              <label
                                 key={key}
-                                className="text-slate-500 text-lg"
-                                value={key}
+                                className="flex gap-1 w-full items-center"
                               >
-                                {value}
-                              </option>
+                                <Field
+                                  type="checkbox"
+                                  name="category"
+                                  value={key}
+                                />
+                                <span className="text-[13.975px]">{value}</span>
+                              </label>
                             ))}
                           </>
                         ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
+                          <label className="flex gap-1 w-full items-center">
+                            <Field type="checkbox" name="category" />
+                            <span className="text-[13.975px]">null</span>
+                          </label>
                         )}
-                      </select>
+                        <span className="h-5 text-sm italic text-[#cf3917]">
+                          {props.errors.category &&
+                            props.touched.category &&
+                            "please select a category"}
+                        </span>
                       </div>
-                  
-                  
+                    </div>
+                  </div>
 
                   <div className="field w-full mb-[5px]">
                     <div className={`flex items-center justify-between mb-2.5`}>