Compacted WP table, added WP data reload after payments' BA update

src/components/ActionsMenu/index.jsx

@@ -14,6 +14,7 @@ import compStyles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {'primary'|'error'|'warning'} [props.handleColor] menu handle color
  * @param {'small'|'medium'} [props.handleSize] menu handle size
+ * @param {string} [props.handleText] text to show inside menu handle
  * @param {Array} props.items menu items
  * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @param {boolean} [props.stopClickPropagation] whether to stop click event propagation
@@ -22,6 +23,7 @@ import compStyles from "./styles.module.scss";
 const ActionsMenu = ({
   handleColor = "primary",
   handleSize = "small",
+  handleText,
   items = [],
   popupStrategy = "absolute",
   stopClickPropagation = false,
@@ -89,14 +91,16 @@ const ActionsMenu = ({
       <Button
         color={handleColor}
         size={handleSize}
+        style={handleText ? "rounded" : "circle"}
         variant="contained"
         onClick={isOpen ? null : toggleMenu}
         className={cn(compStyles.handle, {
           [compStyles.handleMenuOpen]: isOpen,
         })}
         innerRef={setReferenceElement}
       >
-        Actions <IconArrowDown className={compStyles.iconArrowDown} />
+        {handleText ? <span>{handleText}&nbsp;</span> : null}
+        <IconArrowDown className={compStyles.iconArrowDown} />
       </Button>
       {isOpen && (
         <Menu
@@ -113,6 +117,7 @@ const ActionsMenu = ({
 ActionsMenu.propTypes = {
   handleColor: PT.oneOf(["primary", "error", "warning"]),
   handleSize: PT.oneOf(["small", "medium"]),
+  handleText: PT.string,
   items: PT.arrayOf(
     PT.shape({
       label: PT.string,

src/components/ActionsMenu/styles.module.scss

@@ -8,13 +8,18 @@
 .handle {
   display: inline-flex;
   align-items: center;
+
+  > span {
+    + .iconArrowDown {
+      margin-left: 8px;
+    }
+  }
 }
 
 .iconArrowDown {
   display: inline-block;
   width: 12px;
   height: 8px;
-  margin-left: 8px;
 }
 
 .handleMenuOpen {

src/components/ProjectName/index.jsx

@@ -13,11 +13,7 @@ const ProjectName = ({ className, projectId }) => {
 
   const projectName = getName(projectId) || projectId;
 
-  return (
-    <span className={cn(styles.container, className)} title={projectName}>
-      {projectName}
-    </span>
-  );
+  return <span className={cn(styles.container, className)}>{projectName}</span>;
 };
 
 ProjectName.propTypes = {

src/components/ProjectName/styles.module.scss

@@ -2,9 +2,6 @@
 
 .container {
   display: inline-block;
-  max-width: 20em;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   @include roboto-medium;
 }

src/constants/workPeriods.js

@@ -31,6 +31,7 @@ export const TAAS_TEAM_API_URL = `${API.V5}/taas-teams`;
 export const DATE_FORMAT_API = "YYYY-MM-DD";
 export const DATE_FORMAT_ISO = "YYYY-MM-DD";
 export const DATE_FORMAT_UI = "MMM DD, YYYY";
+export const DATETIME_FORMAT_UI = "MMM DD, YYYY h:mm a";
 
 // Field names that are required to be retrieved for display, filtering and sorting.
 export const API_REQUIRED_FIELDS = [

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}

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>

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

@@ -19,6 +19,7 @@ const PaymentsList = ({ className, daysPaid, daysWorked, payments }) => (
           <th>Weekly Rate</th>
           <th>Days</th>
           <th>Amount</th>
+          <th className={styles.createdAt}>Created At</th>
           <th className={styles.paymentStatus}>Status</th>
           <th></th>
         </tr>

src/routes/WorkPeriods/components/PaymentsList/styles.module.scss

@@ -25,6 +25,7 @@ table.paymentsList {
         background: #f4f4f4;
 
         &:first-child,
+        &.createdAt,
         &.paymentStatus {
           text-align: left;
         }

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

@@ -5,7 +5,11 @@ import PT from "prop-types";
 import PaymentActions from "../PaymentActions";
 import PaymentError from "../PaymentError";
 import PaymentStatus from "../PaymentStatus";
-import { currencyFormatter, formatChallengeUrl } from "utils/formatters";
+import {
+  currencyFormatter,
+  formatChallengeUrl,
+  formatDateTimeAsLocal,
+} from "utils/formatters";
 import { PAYMENT_STATUS } from "constants/workPeriods";
 import styles from "./styles.module.scss";
 
@@ -55,6 +59,9 @@ const PaymentsListItem = ({ daysPaid, daysWorked, item }) => {
       </td>
       <td className={styles.days}>{item.days}</td>
       <td className={styles.amount}>{currencyFormatter.format(item.amount)}</td>
+      <td className={styles.createdAt}>
+        {formatDateTimeAsLocal(item.createdAt)}
+      </td>
       <td className={styles.paymentStatus}>
         <div className={styles.statusWithError}>
           <PaymentStatus status={item.status} />
@@ -84,6 +91,7 @@ PaymentsListItem.propTypes = {
     id: PT.oneOfType([PT.string, PT.number]).isRequired,
     amount: PT.number.isRequired,
     challengeId: PT.oneOfType([PT.string, PT.number]),
+    createdAt: PT.number.isRequired,
     days: PT.number.isRequired,
     memberRate: PT.number.isRequired,
     status: PT.string.isRequired,

src/routes/WorkPeriods/components/PaymentsListItem/styles.module.scss

@@ -58,6 +58,10 @@
   text-align: right;
 }
 
+.createdAt {
+  text-align: left;
+}
+
 .paymentStatus {
   white-space: nowrap;
 }

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}

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

@@ -41,9 +41,7 @@ const PeriodAlerts = ({ alerts, className }) => {
       )}
       tooltipClassName={styles.tooltip}
     >
-      {alerts
-        ? alerts.map((alertId) => ALERT_MESSAGE_MAP[alertId]).join(", ")
-        : "None"}
+      {alerts ? "" : "None"}
     </Tooltip>
   );
 };

src/routes/WorkPeriods/components/PeriodAlerts/styles.module.scss

@@ -21,7 +21,6 @@
     &::before {
       content: "!";
       display: inline-block;
-      margin-right: 4px;
       border: 2px solid $text-color;
       border-radius: 7px;
       padding: 1px 0 0;

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

@@ -116,11 +116,17 @@ const PeriodItem = ({
     [item.jobId]
   );
 
-  const projectId = useMemo(
+  const projectIdAndTeamName = useMemo(
     () => (
       <span className={styles.tooltipContent}>
         <span className={styles.tooltipLabel}>Project ID:</span>&nbsp;
         {item.projectId}
+        <br />
+        <span className={styles.tooltipLabel}>Team Name:</span>&nbsp;
+        <ProjectName
+          className={styles.tooltipProjectName}
+          projectId={item.projectId}
+        />
       </span>
     ),
     [item.projectId]
@@ -184,8 +190,14 @@ const PeriodItem = ({
           </Tooltip>
         </td>
         <td className={styles.teamName}>
-          <Tooltip content={projectId}>
-            <ProjectName projectId={item.projectId} />
+          <Tooltip
+            targetClassName={styles.projectNameContainer}
+            content={projectIdAndTeamName}
+          >
+            <ProjectName
+              className={styles.projectName}
+              projectId={item.projectId}
+            />
           </Tooltip>
         </td>
         <td className={styles.startDate}>{formatDate(item.bookingStart)}</td>