Fixed tooltips for team names. Refactored payment cancelling. Added BA check on update.

Author: MadOPcode

src/constants/workPeriods.js

@@ -168,4 +168,6 @@ export const ALERT_MESSAGE_MAP = {
   [ALERT.LAST_BOOKING_WEEK]: "Last Booking Week",
 };
 
+export const SERVER_DATA_UPDATE_DELAY = 3000;
+
 export const DAYS_WORKED_HARD_LIMIT = 10;

src/routes/WorkPeriods/components/PaymentModalCancel/index.jsx

@@ -3,10 +3,7 @@ import { useDispatch } from "react-redux";
 import PT from "prop-types";
 import Modal from "components/Modal";
 import Spinner from "components/Spinner";
-import { makeToast } from "components/ToastrMessage";
-import { setWorkPeriodPaymentData } from "store/actions/workPeriods";
-import { loadWorkPeriodAfterPaymentCancel } from "store/thunks/workPeriods";
-import { cancelWorkPeriodPayment } from "services/workPeriods";
+import { cancelWorkPeriodPayment } from "store/thunks/workPeriods";
 
 /**
  * Displays a Cancel button. Shows a modal with payment cancelling confirmation
@@ -16,61 +13,35 @@ import { cancelWorkPeriodPayment } from "services/workPeriods";
  * @param {Object} props.payment payment object with id, workPeriodId and status
  * @param {() => void} props.removeModal function called when the closing
  * animation of the modal is finished
- * @param {number} [props.timeout] timeout the delay after cancelling payment
- * after which an attempt will be made to update working period's data from the server
  * @returns {JSX.Element}
  */
-const PaymentModalCancel = ({ payment, removeModal, timeout = 3000 }) => {
+const PaymentModalCancel = ({ payment, removeModal }) => {
   const [isModalOpen, setIsModalOpen] = useState(true);
-  const [isCancelPending, setIsCancelPending] = useState(false);
-  const [isCancelSuccess, setIsCancelSuccess] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const dispatch = useDispatch();
   const { id: paymentId, workPeriodId: periodId } = payment;
 
   const onApprove = useCallback(() => {
-    setIsCancelPending(true);
+    setIsProcessing(true);
   }, []);
 
   const onDismiss = useCallback(() => {
     setIsModalOpen(false);
   }, []);
 
   useEffect(() => {
-    if (!isCancelPending) {
+    if (!isProcessing) {
       return;
     }
-    cancelWorkPeriodPayment(paymentId)
-      .then((paymentData) => {
-        dispatch(setWorkPeriodPaymentData(paymentData));
-        setIsCancelSuccess(true);
-      })
-      .catch((error) => {
-        makeToast(error.toString());
-        setIsCancelPending(false);
-      });
-  }, [isCancelPending, paymentId, dispatch]);
-
-  useEffect(() => {
-    let timeoutId = 0;
-    if (!isCancelSuccess) {
-      return;
-    }
-    timeoutId = window.setTimeout(async () => {
-      timeoutId = 0;
-      await dispatch(loadWorkPeriodAfterPaymentCancel(periodId, paymentId));
-      setIsModalOpen(false);
-      setIsCancelSuccess(false);
-      setIsCancelPending(false);
-    }, timeout);
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [isCancelSuccess, paymentId, periodId, timeout, dispatch]);
+    (async function () {
+      let ok = await dispatch(cancelWorkPeriodPayment(periodId, paymentId));
+      setIsModalOpen(!ok);
+      setIsProcessing(false);
+    })();
+  }, [isProcessing, paymentId, periodId, dispatch]);
 
   let title, controls;
-  if (isCancelPending) {
+  if (isProcessing) {
     controls = null;
     title = "Marking as cancelled...";
   } else {
@@ -83,14 +54,14 @@ const PaymentModalCancel = ({ payment, removeModal, timeout = 3000 }) => {
       approveText="Mark as cancelled"
       dismissText="Cancel cancelling"
       title={title}
-      isDisabled={isCancelPending}
+      isDisabled={isProcessing}
       isOpen={isModalOpen}
       controls={controls}
       onApprove={onApprove}
       onClose={removeModal}
       onDismiss={onDismiss}
     >
-      {isCancelPending ? (
+      {isProcessing ? (
         <Spinner />
       ) : (
         `Cancelling payment here will only mark it as cancelled in TaaS system.
@@ -108,7 +79,6 @@ PaymentModalCancel.propTypes = {
     workPeriodId: PT.string.isRequired,
   }).isRequired,
   removeModal: PT.func.isRequired,
-  timeout: PT.number,
 };
 
 export default PaymentModalCancel;

src/routes/WorkPeriods/components/PaymentModalUpdateBA/index.jsx

@@ -108,7 +108,7 @@ const PaymentModalUpdateBA = ({ payments = [], period, removeModal }) => {
     }
     (async function () {
       let ok = await dispatch(
-        updatePaymentsBillingAccount(period.id, billingAccountId, 5000)
+        updatePaymentsBillingAccount(period.id, billingAccountId)
       );
       setIsModalOpen(!ok);
       setIsProcessing(false);

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -177,6 +177,7 @@ const PeriodItem = ({
         <td className={styles.userHandle}>
           <Tooltip
             content={jobName}
+            strategy="fixed"
             targetClassName={styles.userHandleContainer}
           >
             <a
@@ -191,8 +192,9 @@ const PeriodItem = ({
         </td>
         <td className={styles.teamName}>
           <Tooltip
-            targetClassName={styles.projectNameContainer}
             content={projectIdAndTeamName}
+            strategy="fixed"
+            targetClassName={styles.projectNameContainer}
           >
             <ProjectName
               className={styles.projectName}

src/store/actionTypes/workPeriods.js

@@ -24,6 +24,7 @@ export const WP_SET_ALERT_OPTION = "WP_SET_ALERT_OPTION";
 export const WP_SET_PERIOD_DATA_PENDING = "WP_SET_PERIOD_DATA_PENDING";
 export const WP_SET_PERIOD_DATA_SUCCESS = "WP_SET_PERIOD_DATA_SUCCESS";
 export const WP_SET_PERIOD_DATA_ERROR = "WP_SET_PERIOD_DATA_ERROR";
+export const WP_SET_PERIOD_PAYMENTS = "WP_SET_PERIOD_PAYMENTS";
 export const WP_SET_SORT_BY = "WP_SET_SORT_BY";
 export const WP_SET_SORT_ORDER = "WP_SET_SORT_ORDER";
 export const WP_SET_SORTING = "WP_SET_SORTING";

src/store/actions/workPeriods.js

@@ -315,6 +315,11 @@ export const setWorkPeriodPaymentData = (paymentData) => ({
   payload: paymentData,
 });
 
+export const setWorkPeriodPayments = (periodId, payments) => ({
+  type: ACTION_TYPE.WP_SET_PERIOD_PAYMENTS,
+  payload: { periodId, payments },
+});
+
 /**
  * Creates an action to change working days for specific working period.
  *

src/store/reducers/workPeriods.js

@@ -653,6 +653,21 @@ const actionHandlers = {
       periodsData: [periodsData],
     };
   },
+  [ACTION_TYPE.WP_SET_PERIOD_PAYMENTS]: (state, { periodId, payments }) => {
+    const periodsData = state.periodsData[0];
+    const periodData = periodsData[periodId];
+    if (!periodData) {
+      return state;
+    }
+    periodsData[periodId] = {
+      ...periodData,
+      payments,
+    };
+    return {
+      ...state,
+      periodsData: [periodsData],
+    };
+  },
   [ACTION_TYPE.WP_SET_PAYMENT_DATA]: (state, paymentData) => {
     const periodId = paymentData.workPeriodId;
     const periodsData = state.periodsData[0];

src/store/thunks/workPeriods.js

@@ -4,12 +4,13 @@ import * as actions from "store/actions/workPeriods";
 import * as selectors from "store/selectors/workPeriods";
 import * as services from "services/workPeriods";
 import {
-  SORT_BY_MAP,
+  API_CHALLENGE_PAYMENT_STATUS,
+  API_FIELDS_QUERY,
   API_SORT_BY,
   DATE_FORMAT_API,
   PAYMENT_STATUS_MAP,
-  API_FIELDS_QUERY,
-  API_CHALLENGE_PAYMENT_STATUS,
+  SERVER_DATA_UPDATE_DELAY,
+  SORT_BY_MAP,
 } from "constants/workPeriods";
 import {
   delay,
@@ -21,6 +22,7 @@ import {
   makeUrlQuery,
   normalizeBillingAccounts,
   normalizeDetailsPeriodItems,
+  normalizePaymentData,
   normalizePeriodData,
   normalizePeriodItems,
 } from "utils/workPeriods";
@@ -34,37 +36,38 @@ import {
 import { RESOURCE_BOOKING_STATUS, WORK_PERIODS_PATH } from "constants/index.js";
 import { currencyFormatter } from "utils/formatters";
 
-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)) {
+/**
+ * A thunk that cancels specific working period payment, reloads WP data
+ * and updates store's state after certain delay.
+ *
+ * @param {string} periodId working period id
+ * @param {string} paymentId working period's payment id
+ * @param {number} [periodUpdateDelay] update delay for period data
+ * @returns {function}
+ */
+export const cancelWorkPeriodPayment =
+  (periodId, paymentId, periodUpdateDelay = SERVER_DATA_UPDATE_DELAY) =>
+  async (dispatch) => {
+    let paymentData = null;
+    let errorMessage = null;
+    try {
+      paymentData = await services.cancelWorkPeriodPayment(paymentId);
+      paymentData = normalizePaymentData(paymentData);
+    } catch (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) {
+    if (errorMessage) {
+      makeToast(errorMessage);
+      return false;
+    }
+    dispatch(actions.setWorkPeriodPaymentData(paymentData));
+    let periodData;
+    [periodData, errorMessage] = await dispatch(
+      loadWorkPeriodData(periodId, periodUpdateDelay)
+    );
+    if (errorMessage) {
+      makeToast("Failed to reload working period data. " + errorMessage);
+    } else if (periodData) {
       let userHandle = periodData.userHandle;
       let amount = null;
       for (let payment of periodData.payments) {
@@ -77,9 +80,47 @@ export const loadWorkPeriodAfterPaymentCancel =
         `Payment ${amount} for ${userHandle} was marked as "cancelled"`,
         "success"
       );
-    } else if (error) {
-      makeToast("Failed to reload working period data. " + error);
     }
+    return true;
+  };
+
+/**
+ * A thunk that loads specific working period data and updates store's state.
+ *
+ * @param {string} periodId working period id
+ * @param {number} [updateDelay] update delay in milliseconds
+ * @returns {function}
+ */
+export const loadWorkPeriodData =
+  (periodId, updateDelay = 0) =>
+  async (dispatch, getState) => {
+    if (updateDelay > 0) {
+      await delay(updateDelay);
+    }
+    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];
   };
 
 /**
@@ -254,17 +295,14 @@ export const toggleWorkPeriodDetails =
  *
  * @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) => {
+  (periodId, billingAccountId) => async (dispatch, getState) => {
     let [periodsData] = selectors.getWorkPeriodsData(getState());
     let periodData = periodsData[periodId];
     if (!periodData) {
-      return;
+      return true; // no period to update
     }
     let paymentsToUpdate = [];
     for (let payment of periodData.payments) {
@@ -290,18 +328,35 @@ export const updatePaymentsBillingAccount =
       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 = [];
+    let paymentsUpdated = new Map();
     for (let payment of paymentsData) {
-      if (payment.billingAccountId !== billingAccountId) {
+      if ("error" in payment || payment.billingAccountId !== billingAccountId) {
         paymentsNotUpdated.push(payment);
+      } else {
+        paymentsUpdated.set(payment.id, payment);
+      }
+    }
+    periodData = periodsData[periodId];
+    if (!periodData) {
+      return true; // no period to update
+    }
+    if (paymentsUpdated.size) {
+      let payments = [];
+      let paymentsOld = periodData.payments;
+      for (let i = 0, len = paymentsOld.length; i < len; i++) {
+        let paymentOld = paymentsOld[i];
+        if (paymentsUpdated.has(paymentOld.id)) {
+          // We update only billingAccountId because other payment properties
+          // may have been updated on the server and as a result the UI state
+          // may become inconsistent, i.e. WP properties like status and
+          // total paid may become inconsisten with payments' properties.
+          payments.push({ ...paymentOld, billingAccountId });
+        } else {
+          payments.push(paymentOld);
+        }
       }
+      dispatch(actions.setWorkPeriodPayments(periodId, payments));
     }
     if (paymentsNotUpdated.length) {
       makeToast("Could not update billing account for some payments.");