Implemented reloading of working period data after BA update.

MadOPcode · MadOPcode · commit ff9e07da5722 · 2021-08-10T23:58:33.000+03:00
diff --git a/src/routes/WorkPeriods/components/PaymentModalCancel/index.jsx b/src/routes/WorkPeriods/components/PaymentModalCancel/index.jsx
@@ -83,6 +83,7 @@ const PaymentModalCancel = ({ payment, removeModal, timeout = 3000 }) => {
       approveText="Mark as cancelled"
       dismissText="Cancel cancelling"
       title={title}
+      isDisabled={isCancelPending}
       isOpen={isModalOpen}
       controls={controls}
       onApprove={onApprove}
diff --git a/src/routes/WorkPeriods/components/PaymentModalUpdateBA/index.jsx b/src/routes/WorkPeriods/components/PaymentModalUpdateBA/index.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import PT from "prop-types";
 import cn from "classnames";
 import moment from "moment";
@@ -7,11 +8,8 @@ import Modal from "components/Modal";
 import ProjectName from "components/ProjectName";
 import Spinner from "components/Spinner";
 import SelectField from "components/SelectField";
-import { makeToast } from "components/ToastrMessage";
-import {
-  fetchBillingAccounts,
-  patchWorkPeriodPayments,
-} from "services/workPeriods";
+import { fetchBillingAccounts } from "services/workPeriods";
+import { updatePaymentsBillingAccount } from "store/thunks/workPeriods";
 import {
   createAssignedBillingAccountOption,
   normalizeBillingAccounts,
@@ -42,6 +40,21 @@ const PaymentModalUpdateBA = ({ payments = [], period, removeModal }) => {
   const [billingAccountsDisabled, setBillingAccountsDisabled] = useState(true);
   const [billingAccountsError, setBillingAccountsError] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
+  const dispatch = useDispatch();
+
+  const accountIdMap = {};
+  for (let payment of payments) {
+    accountIdMap[payment.billingAccountId] = true;
+  }
+  const accountIds = Object.keys(accountIdMap);
+
+  const onApprove = useCallback(() => {
+    setIsProcessing(true);
+  }, []);
+
+  const onDismiss = useCallback(() => {
+    setIsModalOpen(false);
+  }, []);
 
   useEffect(() => {
     const [bilAccsPromise] = fetchBillingAccounts(period.projectId);
@@ -93,38 +106,14 @@ const PaymentModalUpdateBA = ({ payments = [], period, removeModal }) => {
     if (!isProcessing) {
       return;
     }
-    const paymentsUpdated = [];
-    for (let { id } of payments) {
-      paymentsUpdated.push({ id, billingAccountId });
-    }
-    patchWorkPeriodPayments(paymentsUpdated)
-      .then(() => {
-        makeToast(
-          "Billing account was successfully updated for all the payments",
-          "success"
-        );
-        setIsModalOpen(false);
-      })
-      .catch((error) => {
-        makeToast(error.toString());
-      })
-      .finally(() => {
-        setIsProcessing(false);
-      });
-  }, [billingAccountId, isProcessing, payments, period.id]);
-
-  const onApprove = useCallback(() => {
-    setIsProcessing(true);
-  }, []);
-
-  const onDismiss = useCallback(() => {
-    setIsModalOpen(false);
-  }, []);
-
-  const accountIdsHash = {};
-  for (let payment of payments) {
-    accountIdsHash[payment.billingAccountId] = true;
-  }
+    (async function () {
+      let ok = await dispatch(
+        updatePaymentsBillingAccount(period.id, billingAccountId, 5000)
+      );
+      setIsModalOpen(!ok);
+      setIsProcessing(false);
+    })();
+  }, [billingAccountId, isProcessing, period.id, dispatch]);
 
   return (
     <Modal
@@ -181,7 +170,7 @@ const PaymentModalUpdateBA = ({ payments = [], period, removeModal }) => {
                 <tr>
                   <th>Current BA(s) used:</th>
                   <td className={styles.accountIds}>
-                    {Object.keys(accountIdsHash).join(", ") || "-"}
+                    {accountIds.join(", ") || "-"}
                   </td>
                 </tr>
               </tbody>
diff --git a/src/routes/WorkPeriods/components/PeriodActions/index.jsx b/src/routes/WorkPeriods/components/PeriodActions/index.jsx
@@ -13,38 +13,37 @@ import styles from "./styles.module.scss";
  * @returns {JSX.Element}
  */
 const PeriodActions = ({ className, period, periodData }) => {
-  const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false);
-  const [isUpdateBAModalOpen, setIsUpdateBAModalOpen] = useState(false);
+  const [isOpenAddPaymentModal, setIsOpenAddPaymentModal] = useState(false);
+  const [isOpenUpdateBAModal, setIsOpenUpdateBAModal] = useState(false);
   const payments = periodData.payments;
 
-  const openAddPaymentModal = useCallback(() => {
-    setIsAddPaymentModalOpen(true);
-  }, []);
-
   const closeAddPaymentModal = useCallback(() => {
-    setIsAddPaymentModalOpen(false);
-  }, []);
-
-  const openUpdateBAModal = useCallback(() => {
-    setIsUpdateBAModalOpen(true);
+    setIsOpenAddPaymentModal(false);
   }, []);
 
   const closeUpdateBAModal = useCallback(() => {
-    setIsUpdateBAModalOpen(false);
+    setIsOpenUpdateBAModal(false);
   }, []);
 
   const actions = useMemo(() => {
     let actions = [
-      { label: "Additional Payment", action: openAddPaymentModal },
+      {
+        label: "Additional Payment",
+        action() {
+          setIsOpenAddPaymentModal(true);
+        },
+      },
     ];
     if (payments?.length) {
       actions.push({
         label: "Update BA for payments",
-        action: openUpdateBAModal,
+        action() {
+          setIsOpenUpdateBAModal(true);
+        },
       });
     }
     return actions;
-  }, [payments, openAddPaymentModal, openUpdateBAModal]);
+  }, [payments]);
 
   return (
     <div className={cn(styles.container, className)}>
@@ -53,13 +52,13 @@ const PeriodActions = ({ className, period, periodData }) => {
         popupStrategy="fixed"
         stopClickPropagation={true}
       />
-      {isAddPaymentModalOpen && (
+      {isOpenAddPaymentModal && (
         <PaymentModalAdditional
           period={period}
           removeModal={closeAddPaymentModal}
         />
       )}
-      {isUpdateBAModalOpen && (
+      {isOpenUpdateBAModal && (
         <PaymentModalUpdateBA
           payments={payments}
           period={period}
diff --git a/src/store/thunks/workPeriods.js b/src/store/thunks/workPeriods.js
@@ -12,6 +12,7 @@ import {
   API_CHALLENGE_PAYMENT_STATUS,
 } from "constants/workPeriods";
 import {
+  delay,
   extractResponseData,
   extractResponsePagination,
   replaceItems,
@@ -33,42 +34,51 @@ import {
 import { RESOURCE_BOOKING_STATUS, WORK_PERIODS_PATH } from "constants/index.js";
 import { currencyFormatter } from "utils/formatters";
 
-export const loadWorkPeriodAfterPaymentCancel =
-  (periodId, paymentId) => async (dispatch, getState) => {
-    let [periodsData] = selectors.getWorkPeriodsData(getState());
-    periodsData[periodId]?.cancelSource?.cancel();
-    const [promise, source] = services.fetchWorkPeriod(periodId);
-    dispatch(actions.setWorkPeriodDataPending(periodId, source));
-    let periodData = null;
-    let userHandle = null;
-    let errorMessage = null;
-    try {
-      const data = await promise;
-      periodData = normalizePeriodData(data);
-      userHandle = data.userHandle;
-    } catch (error) {
-      if (!axios.isCancel(error)) {
-        errorMessage = error.toString();
-      }
+export const loadWorkPeriodData = (periodId) => async (dispatch, getState) => {
+  let [periodsData] = selectors.getWorkPeriodsData(getState());
+  periodsData[periodId]?.cancelSource?.cancel();
+  const [promise, source] = services.fetchWorkPeriod(periodId);
+  dispatch(actions.setWorkPeriodDataPending(periodId, source));
+  let userHandle = null;
+  let periodData = null;
+  let errorMessage = null;
+  try {
+    const data = await promise;
+    userHandle = data.userHandle;
+    periodData = normalizePeriodData(data);
+  } catch (error) {
+    if (!axios.isCancel(error)) {
+      errorMessage = error.toString();
     }
+  }
+  if (periodData) {
+    dispatch(actions.setWorkPeriodDataSuccess(periodId, periodData));
+    return [{ ...periodData, userHandle }, null];
+  } else if (errorMessage) {
+    dispatch(actions.setWorkPeriodDataError(periodId, errorMessage));
+    return [null, errorMessage];
+  }
+  return [null, null];
+};
+
+export const loadWorkPeriodAfterPaymentCancel =
+  (periodId, paymentId) => async (dispatch) => {
+    let [periodData, error] = await dispatch(loadWorkPeriodData(periodId));
     if (periodData) {
+      let userHandle = periodData.userHandle;
       let amount = null;
       for (let payment of periodData.payments) {
         if (payment.id === paymentId) {
           amount = currencyFormatter.format(payment.amount);
           break;
         }
       }
-      dispatch(actions.setWorkPeriodDataSuccess(periodId, periodData));
       makeToast(
         `Payment ${amount} for ${userHandle} was marked as "cancelled"`,
         "success"
       );
-    } else if (errorMessage) {
-      dispatch(actions.setWorkPeriodDataError(periodId, errorMessage));
-      makeToast(
-        `Failed to load data for working period ${periodId}.\n` + errorMessage
-      );
+    } else if (error) {
+      makeToast("Failed to reload working period data. " + error);
     }
   };
 
@@ -238,6 +248,72 @@ export const toggleWorkPeriodDetails =
     }
   };
 
+/**
+ * A thunk that updates the billing accounts for all the payments from the
+ * specific working period.
+ *
+ * @param {string} periodId working period id
+ * @param {number} billingAccountId desired billing account id
+ * @param {number} [periodDataDelay] timeout after which the period data gets
+ * reloaded
+ * @returns {function}
+ */
+export const updatePaymentsBillingAccount =
+  (periodId, billingAccountId, periodDataDelay = 3000) =>
+  async (dispatch, getState) => {
+    let [periodsData] = selectors.getWorkPeriodsData(getState());
+    let periodData = periodsData[periodId];
+    if (!periodData) {
+      return;
+    }
+    let paymentsToUpdate = [];
+    for (let payment of periodData.payments) {
+      if (payment.billingAccountId !== billingAccountId) {
+        paymentsToUpdate.push({ id: payment.id, billingAccountId });
+      }
+    }
+    if (!paymentsToUpdate.length) {
+      makeToast(
+        "All payments have desired billing account. Nothing to update.",
+        "success"
+      );
+      return true;
+    }
+    let paymentsData = null;
+    let errorMessage = null;
+    try {
+      paymentsData = await services.patchWorkPeriodPayments(paymentsToUpdate);
+    } catch (error) {
+      errorMessage = error.toString();
+    }
+    if (errorMessage) {
+      makeToast(errorMessage);
+      return false;
+    }
+    await delay(periodDataDelay);
+    [periodData, errorMessage] = await dispatch(loadWorkPeriodData(periodId));
+    if (errorMessage) {
+      makeToast("Failed to reload payments' data. " + errorMessage);
+    } else if (periodData) {
+      paymentsData = periodData.payments;
+    }
+    let paymentsNotUpdated = [];
+    for (let payment of paymentsData) {
+      if (payment.billingAccountId !== billingAccountId) {
+        paymentsNotUpdated.push(payment);
+      }
+    }
+    if (paymentsNotUpdated.length) {
+      makeToast("Could not update billing account for some payments.");
+      return false;
+    }
+    makeToast(
+      "Billing account was successfully updated for all the payments.",
+      "success"
+    );
+    return true;
+  };
+
 /**
  *
  * @param {string} rbId
diff --git a/src/utils/misc.js b/src/utils/misc.js
@@ -139,6 +139,17 @@ export const buildRequestQuery = (params) => {
   return queryParams.join("&");
 };
 
+/**
+ * Function that returns a promise which resolves after the provided delay.
+ *
+ * @param {number} ms number of milliseconds
+ * @returns {Promise}
+ */
+export const delay = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
 export const extractResponsePagination = ({ headers }) => ({
   totalCount: +headers["x-total"] || 0,
   pageCount: +headers["x-total-pages"] || 0,
diff --git a/src/utils/workPeriods.js b/src/utils/workPeriods.js
