Added tooltip with error messages for work period selection checkbox.

Author: MadOPcode

src/components/Tooltip/index.jsx

@@ -12,6 +12,7 @@ import compStyles from "./styles.module.scss";
  * @param {string} [props.className] class name to be added to root element
  * @param {any} props.content tooltip content
  * @param {number} [props.delay] postpone showing the tooltip after this delay
+ * @param {boolean} [props.isDisabled] whether the tooltip is disabled
  * @param {import('@popperjs/core').Placement} [props.placement] tooltip's
  * preferred placement as defined in PopperJS documentation
  * @param {'absolute'|'fixed'} [props.strategy] tooltip positioning strategy
@@ -27,6 +28,7 @@ const Tooltip = ({
   className,
   content,
   delay = 150,
+  isDisabled = false,
   placement = "top",
   strategy = "absolute",
   targetClassName,
@@ -83,16 +85,16 @@ const Tooltip = ({
     <div
       className={cn(compStyles.container, className)}
       ref={containerRef}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseEnter={isDisabled ? null : onMouseEnter}
+      onMouseLeave={isDisabled ? null : onMouseLeave}
     >
       <span
         className={cn(compStyles.target, targetClassName)}
         ref={setReferenceElement}
       >
         {children}
       </span>
-      {isTooltipShown && (
+      {!isDisabled && isTooltipShown && (
         <div
           ref={setPopperElement}
           className={cn(compStyles.tooltip, tooltipClassName)}
@@ -116,6 +118,7 @@ Tooltip.propTypes = {
   className: PT.string,
   content: PT.node,
   delay: PT.number,
+  isDisabled: PT.bool,
   placement: PT.string,
   strategy: PT.oneOf(["absolute", "fixed"]),
   targetClassName: PT.string,

src/components/Tooltip/styles.module.scss

@@ -13,6 +13,7 @@
   z-index: 8;
   border-radius: 8px;
   padding: 10px 15px;
+  line-height: 22px;
   box-shadow: 0px 5px 25px #c6c6c6;
   background: #fff;
 

src/constants/workPeriods.js

@@ -6,6 +6,7 @@ import * as API_SORT_BY from "./workPeriods/apiSortBy";
 import * as SORT_BY from "./workPeriods/sortBy";
 import * as SORT_ORDER from "./workPeriods/sortOrder";
 import * as PAYMENT_STATUS from "./workPeriods/paymentStatus";
+import * as REASON_DISABLED from "./workPeriods/reasonDisabled";
 
 export {
   API_CHALLENGE_PAYMENT_STATUS,
@@ -14,6 +15,7 @@ export {
   SORT_BY,
   SORT_ORDER,
   PAYMENT_STATUS,
+  REASON_DISABLED,
 };
 
 // resource bookings API url
@@ -135,3 +137,10 @@ export const JOB_NAME_ERROR = "<Error loading job>";
 export const BILLING_ACCOUNTS_LOADING = "Loading...";
 export const BILLING_ACCOUNTS_NONE = "<No accounts available>";
 export const BILLING_ACCOUNTS_ERROR = "<Error loading accounts>";
+
+export const REASON_DISABLED_MESSAGE_MAP = {
+  [REASON_DISABLED.NO_BILLING_ACCOUNT]:
+    "Billing Account is not set for the Resorce 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",
+};

src/constants/workPeriods/reasonDisabled.js

@@ -0,0 +1,3 @@
+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";

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

@@ -12,7 +12,10 @@ import PaymentStatus from "../PaymentStatus";
 import PaymentTotal from "../PaymentTotal";
 import PeriodWorkingDays from "../PeriodWorkingDays";
 import PeriodDetails from "../PeriodDetails";
-import { PAYMENT_STATUS } from "constants/workPeriods";
+import {
+  PAYMENT_STATUS,
+  REASON_DISABLED_MESSAGE_MAP,
+} from "constants/workPeriods";
 import {
   setWorkPeriodWorkingDays,
   toggleWorkingDaysUpdated,
@@ -37,6 +40,7 @@ import styles from "./styles.module.scss";
  * @param {Object} props.item object describing a working period
  * @param {Object} props.data changeable working period data such as working days
  * @param {Object} [props.details] object with working period details
+ * @param {Array} [props.reasonsDisabled] array of REASON_DISABLED values.
  * @returns {JSX.Element}
  */
 const PeriodItem = ({
@@ -46,6 +50,7 @@ const PeriodItem = ({
   item,
   data,
   details,
+  reasonsDisabled,
 }) => {
   const dispatch = useDispatch();
 
@@ -107,6 +112,15 @@ const PeriodItem = ({
     [item.projectId]
   );
 
+  const reasonsDisabledElement = useMemo(
+    () => (
+      <span className={styles.tooltipContent}>
+        {formatReasonsDisabled(reasonsDisabled)}
+      </span>
+    ),
+    [reasonsDisabled]
+  );
+
   return (
     <>
       <tr
@@ -117,15 +131,22 @@ const PeriodItem = ({
         onClick={onToggleItemDetails}
       >
         <td className={styles.toggle}>
-          <Checkbox
-            size="small"
-            isDisabled={isDisabled}
-            checked={isSelected}
-            name={`wp_chb_${item.id}`}
-            onChange={onToggleItem}
-            option={{ value: item.id }}
-            stopClickPropagation={true}
-          />
+          <Tooltip
+            content={reasonsDisabledElement}
+            isDisabled={!reasonsDisabled}
+            strategy="fixed"
+            targetClassName={styles.checkboxContainer}
+          >
+            <Checkbox
+              size="small"
+              isDisabled={isDisabled || !!reasonsDisabled}
+              checked={isSelected}
+              name={`wp_chb_${item.id}`}
+              onChange={onToggleItem}
+              option={{ value: item.id }}
+              stopClickPropagation={true}
+            />
+          </Tooltip>
         </td>
         <td className={styles.userHandle}>
           <Tooltip
@@ -235,6 +256,27 @@ PeriodItem.propTypes = {
     periods: PT.array.isRequired,
     periodsIsLoading: PT.bool.isRequired,
   }),
+  reasonsDisabled: PT.arrayOf(PT.string),
 };
 
 export default memo(PeriodItem);
+
+/**
+ * Returns a string produced by concatenation of all provided reasons some
+ * working period is disabled.
+ *
+ * @param {Array} reasonIds array of REASON_DISABLED values
+ * @returns {?Array}
+ */
+function formatReasonsDisabled(reasonIds) {
+  if (!reasonIds) {
+    return null;
+  }
+  const reasons = [];
+  reasons.push(REASON_DISABLED_MESSAGE_MAP[reasonIds[0]]);
+  for (let i = 1, len = reasonIds.length; i < len; i++) {
+    reasons.push(<br />);
+    reasons.push(REASON_DISABLED_MESSAGE_MAP[reasonIds[i]]);
+  }
+  return reasons;
+}

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

@@ -10,6 +10,7 @@ import {
   getWorkPeriods,
   getWorkPeriodsData,
   getWorkPeriodsDetails,
+  getWorkPeriodsDisabled,
   getWorkPeriodsFailed,
   getWorkPeriodsIsProcessingPayments,
   getWorkPeriodsSelected,
@@ -27,8 +28,9 @@ const PeriodList = ({ className }) => {
   const periods = useSelector(getWorkPeriods);
   const [periodsData] = useSelector(getWorkPeriodsData);
   const periodsDetails = useSelector(getWorkPeriodsDetails);
+  const [periodsDisabledMap] = useSelector(getWorkPeriodsDisabled);
   const periodsFailed = useSelector(getWorkPeriodsFailed);
-  const periodsSelected = useSelector(getWorkPeriodsSelected);
+  const [periodsSelectedSet] = useSelector(getWorkPeriodsSelected);
   const isProcessingPayments = useSelector(getWorkPeriodsIsProcessingPayments);
 
   return (
@@ -54,10 +56,11 @@ const PeriodList = ({ className }) => {
                   key={period.id}
                   isDisabled={isProcessingPayments}
                   isFailed={period.id in periodsFailed}
-                  isSelected={period.id in periodsSelected}
+                  isSelected={periodsSelectedSet.has(period.id)}
                   item={period}
                   data={periodsData[period.id]}
                   details={periodsDetails[period.id]}
+                  reasonsDisabled={periodsDisabledMap.get(period.id)}
                 />
               ))}
             </tbody>

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

@@ -6,6 +6,7 @@ import {
   getWorkPeriodsIsSelectedAll,
   getWorkPeriodsIsSelectedVisible,
   getWorkPeriodsPageSize,
+  getWorkPeriodsSelectedCount,
   getWorkPeriodsTotalCount,
 } from "store/selectors/workPeriods";
 import { toggleWorkingPeriodsAll } from "store/actions/workPeriods";
@@ -21,6 +22,7 @@ import styles from "./styles.module.scss";
 const PeriodsSelectionMessage = ({ className }) => {
   const isSelectedAll = useSelector(getWorkPeriodsIsSelectedAll);
   const isSelectedVisible = useSelector(getWorkPeriodsIsSelectedVisible);
+  const selectedCount = useSelector(getWorkPeriodsSelectedCount);
   const pageSize = useSelector(getWorkPeriodsPageSize);
   const totalCount = useSelector(getWorkPeriodsTotalCount);
   const dispatch = useDispatch();
@@ -35,6 +37,8 @@ const PeriodsSelectionMessage = ({ className }) => {
         <span className={styles.message}>
           {isSelectedAll
             ? `All ${totalCount} Records are selected. `
+            : selectedCount < pageSize
+            ? `${selectedCount} Records on this page are selected. `
             : `All ${pageSize} Records on this page are selected. `}
           <span
             className={styles.button}