fix:issue #73

Author: yoution

src/constants/workPeriods.js

@@ -149,6 +149,8 @@ export const REASON_DISABLED_MESSAGE_MAP = {
     "Billing Account is not set for the Resource Booking",
   [REASON_DISABLED.NO_DAYS_TO_PAY_FOR]: "There are no days to pay for",
   [REASON_DISABLED.NO_MEMBER_RATE]: "Member Rate should be greater than 0",
+  [REASON_DISABLED.NOT_ALLOW_FUTURE_WEEK]:
+    "Not allow processing payments for the future weeks",
 };
 
 export const ALERT_MESSAGE_MAP = {

src/constants/workPeriods/reasonDisabled.js

@@ -1,3 +1,4 @@
 export const NO_BILLING_ACCOUNT = "NO_BILLING_ACCOUNT";
 export const NO_DAYS_TO_PAY_FOR = "NO_DAYS_TO_PAY_FOR";
 export const NO_MEMBER_RATE = "NO_MEMBER_RATE";
+export const NOT_ALLOW_FUTURE_WEEK = "NOT_ALLOW_FUTURE_WEEK";

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

@@ -1,10 +1,17 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import Tooltip from "components/Tooltip";
 import cn from "classnames";
+import moment from "moment";
 import Checkbox from "components/Checkbox";
 import SortingControl from "components/SortingControl";
 import { SORT_BY } from "constants/workPeriods";
 import {
+  REASON_DISABLED,
+  REASON_DISABLED_MESSAGE_MAP,
+} from "constants/workPeriods"
+import {
+  getWorkPeriodsDateRange,
   getWorkPeriodsIsSelectedVisible,
   getWorkPeriodsSorting,
 } from "store/selectors/workPeriods";
@@ -24,6 +31,7 @@ import styles from "./styles.module.scss";
 const PeriodListHead = () => {
   const sorting = useSelector(getWorkPeriodsSorting);
   const isSelectedVisible = useSelector(getWorkPeriodsIsSelectedVisible);
+  const periodsDateRange = useSelector(getWorkPeriodsDateRange);
   const dispatch = useDispatch();
   const { criteria, order } = sorting;
 
@@ -39,16 +47,40 @@ const PeriodListHead = () => {
     dispatch(toggleWorkingPeriodsVisible());
   }, [dispatch]);
 
+  const reasonsDisabled = useMemo(()=> {
+    if (periodsDateRange[0].isAfter(moment())) {
+      return REASON_DISABLED.NOT_ALLOW_FUTURE_WEEK;
+    }
+    return null
+  }, [periodsDateRange])
+
+  const reasonsDisabledElement = useMemo(
+    () => (
+      <div className={styles.tooltipContent}>
+        {reasonsDisabled && REASON_DISABLED_MESSAGE_MAP[reasonsDisabled]}
+      </div>
+    ),
+    [reasonsDisabled]
+  );
+
   return (
     <tr className={styles.container}>
       <th>
         <div className={styles.colHead}>
-          <Checkbox
-            size="small"
-            name={"visible_periods_selected"}
-            onChange={onToggleVisible}
-            checked={isSelectedVisible}
-          />
+          <Tooltip
+            content={reasonsDisabledElement}
+            isDisabled={!reasonsDisabled}
+            strategy="fixed"
+            targetClassName={styles.checkboxContainer}
+          >
+            <Checkbox
+              size="small"
+              isDisabled={!!reasonsDisabled}
+              name={"visible_periods_selected"}
+              onChange={onToggleVisible}
+              checked={isSelectedVisible}
+            />
+          </Tooltip>
         </div>
       </th>
       {HEAD_CELLS.map(({ id, className, label, disableSort }) => (

src/store/reducers/workPeriods.js

@@ -141,7 +141,7 @@ const actionHandlers = {
         periodEnd
       );
       periodsData[period.id] = periodData;
-      let reasonsDisabled = findReasonsDisabled(period);
+      let reasonsDisabled = findReasonsDisabled(period, dateRange);
       if (reasonsDisabled) {
         periodsDisabledMap.set(period.id, reasonsDisabled);
       }

src/utils/workPeriods.js

@@ -63,10 +63,16 @@ export function createPeriodAlerts(period, periodEnd) {
  * payment processing.
  *
  * @param {Object} period working period object
+ * @param {Array}  dateRange date range array
  * @returns {?string[]}
  */
-export function findReasonsDisabled(period) {
+export function findReasonsDisabled(period, dateRange) {
   const reasons = [];
+  if (dateRange && dateRange.length > 0) {
+    if (dateRange[0].isAfter(moment())) {
+      reasons.push(REASON_DISABLED.NOT_ALLOW_FUTURE_WEEK);
+    }
+  }
   if (!period.billingAccountId) {
     reasons.push(REASON_DISABLED.NO_BILLING_ACCOUNT);
   }