Follow up fixes for #99

- Fixed tooltip font for actions' menu
- Changed condition for disabling "Update" button for edit-payment modals
- Changed how ActionsMenu handles "disabled" property of its items.

Author: MadOPcode

src/components/ActionsMenu/index.jsx

@@ -163,8 +163,10 @@ const Menu = ({ close, items, referenceElement, strategy }) => {
       } else if (item.separator) {
         return <div key={index} className={compStyles.separator} />;
       } else {
-        let reasonsDisabled = item.checkDisabled?.();
-        let disabled = !!item.disabled || !!reasonsDisabled;
+        let disabled = !!item.disabled;
+        let reasonsDisabled = Array.isArray(item.disabled)
+          ? item.disabled
+          : null;
         let attrs = {
           key: index,
           "data-action-index": index,

src/components/Tooltip/styles.module.scss

@@ -1,4 +1,5 @@
 @import "styles/variables";
+@import "styles/mixins";
 
 .container {
   position: relative;
@@ -17,7 +18,9 @@
   padding: 10px 15px;
   line-height: 22px;
   font-size: $font-size-px;
+  @include roboto-regular;
   font-weight: normal;
+  letter-spacing: normal;
   text-transform: none;
   color: $text-color;
   background: #fff;

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

@@ -21,10 +21,10 @@ import styles from "./styles.module.scss";
 const PaymentModalEdit = ({ daysPaid, daysWorked, payment, removeModal }) => {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [isTouched, setIsTouched] = useState(false);
   const [days, setDays] = useState(payment.days);
   const dispatch = useDispatch();
 
+  const isChanged = days !== payment.days;
   const { id: paymentId, workPeriodId: periodId } = payment;
 
   const maxDays =
@@ -46,7 +46,6 @@ const PaymentModalEdit = ({ daysPaid, daysWorked, payment, removeModal }) => {
   }, []);
 
   const onChangeDays = useCallback((days) => {
-    setIsTouched(true);
     setDays(days);
   }, []);
 
@@ -66,7 +65,7 @@ const PaymentModalEdit = ({ daysPaid, daysWorked, payment, removeModal }) => {
   return (
     <Modal
       approveColor="primary"
-      approveDisabled={!isTouched || isProcessing}
+      approveDisabled={!isChanged || isProcessing}
       approveText="Update"
       title="Edit Payment"
       controls={isProcessing ? null : undefined}

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

@@ -18,13 +18,14 @@ import styles from "./styles.module.scss";
  * @returns {JSX.Element}
  */
 const PaymentModalEditAdditional = ({ payment, removeModal }) => {
+  const paymentAmount = payment.amount + "";
   const [isModalOpen, setIsModalOpen] = useState(true);
-  const [amount, setAmount] = useState(payment.amount);
+  const [amount, setAmount] = useState(paymentAmount);
   const [isAmountValid, setIsAmountValid] = useState(true);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [isTouched, setIsTouched] = useState(false);
   const dispatch = useDispatch();
 
+  const isChanged = amount !== paymentAmount;
   const { id: paymentId, workPeriodId: periodId } = payment;
   const amountControlId = `edit_pmt_amt_${paymentId}`;
 
@@ -41,7 +42,6 @@ const PaymentModalEditAdditional = ({ payment, removeModal }) => {
   }, []);
 
   const onChangeAmount = useCallback((amount) => {
-    setIsTouched(true);
     setAmount(amount);
   }, []);
 
@@ -77,7 +77,7 @@ const PaymentModalEditAdditional = ({ payment, removeModal }) => {
   return (
     <Modal
       approveColor="primary"
-      approveDisabled={!isTouched || !isAmountValid || isProcessing}
+      approveDisabled={!isChanged || !isAmountValid || isProcessing}
       approveText="Update"
       title="Edit Additional Payment"
       controls={isProcessing ? null : undefined}
@@ -102,7 +102,7 @@ const PaymentModalEditAdditional = ({ payment, removeModal }) => {
                     isAmountValid ? null : ERROR_MESSAGE.AMOUNT_OUT_OF_BOUNDS
                   }
                   id={amountControlId}
-                  isTouched={isTouched}
+                  isTouched={isChanged}
                   name="edit_payment_amount"
                   onChange={onChangeAmount}
                   value={amount}

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

@@ -37,33 +37,20 @@ const PeriodActions = ({ className, period, periodData }) => {
         action() {
           setIsOpenAddPaymentModal(true);
         },
-        checkDisabled() {
-          let reasonsDisabled = [];
-          if (moment(period.start).isAfter(Date.now())) {
-            reasonsDisabled.push(
-              REASON_DISABLED_MESSAGE_MAP[REASON_DISABLED.NOT_ALLOW_FUTURE_WEEK]
-            );
-          }
-          if (!period.billingAccountId) {
-            reasonsDisabled.push(
-              REASON_DISABLED_MESSAGE_MAP[REASON_DISABLED.NO_BILLING_ACCOUNT]
-            );
-          }
-          return reasonsDisabled.length ? reasonsDisabled : null;
-        },
+        disabled: checkDisabled(period),
       },
     ];
     if (payments?.length) {
-      // @ts-ignore
       actions.push({
         label: "Update BA for payments",
         action() {
           setIsOpenUpdateBAModal(true);
         },
+        disabled: false,
       });
     }
     return actions;
-  }, [period.billingAccountId, period.start, payments]);
+  }, [period, payments]);
 
   return (
     <div className={cn(styles.container, className)}>
@@ -103,3 +90,18 @@ PeriodActions.propTypes = {
 };
 
 export default PeriodActions;
+
+function checkDisabled(period) {
+  let reasonsDisabled = [];
+  if (moment(period.start).isAfter(Date.now())) {
+    reasonsDisabled.push(
+      REASON_DISABLED_MESSAGE_MAP[REASON_DISABLED.NOT_ALLOW_FUTURE_WEEK]
+    );
+  }
+  if (!period.billingAccountId) {
+    reasonsDisabled.push(
+      REASON_DISABLED_MESSAGE_MAP[REASON_DISABLED.NO_BILLING_ACCOUNT]
+    );
+  }
+  return reasonsDisabled.length ? reasonsDisabled : false;
+}