added the popup component

2024-01-26 01:07:20 +01:00
parent 06c1e339b1
commit 5928ddb3c1
3 changed files with 191 additions and 95 deletions
@@ -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,6 @@ function JobListPopout({ details, onClose, situation }) {
      });
  }, []);

-  console.log("wallet >> ", walletDetails, details, taskWalletSelector);
  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">
@@ -496,7 +507,10 @@ function JobListPopout({ details, onClose, situation }) {
                </div>
              </div>
            ) : (
-              <ZeroBalanceChecker {...taskWalletSelector} />
+              <ZeroBalanceChecker
+                {...taskWalletSelector}
+                openCreditPopup={openCreditPopup}
+              />
            )}

            {/* END OF ACTION SECTION */}
@@ -653,16 +667,19 @@ 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.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>