Merge pull request #78 from topcoder-platform/dev

[PROD] Release 1.0.3

Author: nkumar-topcoder

src/components/SidebarSectionLabel/styles.module.scss

@@ -1,4 +1,5 @@
 .container {
   margin-bottom: 7px;
   line-height: 17px;
+  font-weight: bold;
 }

src/constants/workPeriods.js

@@ -42,6 +42,7 @@ export const API_REQUIRED_FIELDS = [
   "endDate",
   "memberRate",
   "status",
+  "billingAccountId",
   "workPeriods.id",
   "workPeriods.projectId",
   "workPeriods.userHandle",
@@ -128,6 +129,7 @@ export const API_CHALLENGE_PAYMENT_STATUS_MAP = {
 export const URL_QUERY_PARAM_MAP = new Map([
   ["startDate", "startDate"],
   ["paymentStatuses", "status"],
+  ["alertOptions", "alert"],
   ["onlyFailedPayments", "onlyFailed"],
   ["userHandle", "user"],
   ["criteria", "by"],
@@ -149,6 +151,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 allowed processing payments for the future weeks",
 };
 
 export const ALERT_MESSAGE_MAP = {

src/constants/workPeriods/alerts.js

@@ -1,2 +1,3 @@
 export const BA_NOT_ASSIGNED = "BA_NOT_ASSIGNED";
+export const ONBOARDING_WEEK = "ONBOARDING_WEEK";
 export const LAST_BOOKING_WEEK = "LAST_BOOKING_WEEK";

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/PeriodFilters/index.jsx

@@ -8,11 +8,12 @@ import CheckboxList from "components/CheckboxList";
 import SearchHandleField from "components/SearchHandleField";
 import SidebarSection from "components/SidebarSection";
 import Toggle from "components/Toggle";
-import { PAYMENT_STATUS } from "constants/workPeriods";
+import { PAYMENT_STATUS, ALERT } from "constants/workPeriods";
 import { getWorkPeriodsFilters } from "store/selectors/workPeriods";
 import {
   resetWorkPeriodsFilters,
   setWorkPeriodsPaymentStatuses,
+  setAlertOption,
   setWorkPeriodsUserHandle,
   toggleShowFailedPaymentsOnly,
 } from "store/actions/workPeriods";
@@ -35,7 +36,8 @@ import styles from "./styles.module.scss";
 const PeriodFilters = ({ className }) => {
   const dispatch = useDispatch();
   const filters = useSelector(getWorkPeriodsFilters);
-  const { onlyFailedPayments, paymentStatuses, userHandle } = filters;
+  const { onlyFailedPayments, paymentStatuses, alertOptions, userHandle } =
+    filters;
 
   const onToggleFailedPayments = useCallback(
     (on) => {
@@ -61,6 +63,14 @@ const PeriodFilters = ({ className }) => {
     [dispatch]
   );
 
+  const onAlertOptionsChange = useCallback(
+    (option) => {
+      dispatch(setAlertOption(option));
+      dispatch(updateQueryFromState());
+    },
+    [dispatch]
+  );
+
   const onClearFilter = useCallback(() => {
     dispatch(resetWorkPeriodsFilters());
     dispatch(updateQueryFromState());
@@ -113,6 +123,14 @@ const PeriodFilters = ({ className }) => {
           onChange={onToggleFailedPayments}
         />
       </div>
+      <SidebarSection label="Misc Filters">
+        <CheckboxList
+          name="alert_option[]"
+          onChange={onAlertOptionsChange}
+          options={ALERT_OPTIONS}
+          value={alertOptions}
+        />
+      </SidebarSection>
       <div className={styles.buttons}>
         <Button className={styles.button} size="small" onClick={onClearFilter}>
           Clear Filter
@@ -134,4 +152,10 @@ const PAYMENT_STATUS_OPTIONS = [
   { value: PAYMENT_STATUS.NO_DAYS, label: "No Days" },
 ];
 
+const ALERT_OPTIONS = [
+  { value: ALERT.BA_NOT_ASSIGNED, label: "No BA Assigned" },
+  { value: ALERT.ONBOARDING_WEEK, label: "Onboarding Week" },
+  { value: ALERT.LAST_BOOKING_WEEK, label: "Last Booking Week" },
+];
+
 export default memo(PeriodFilters);

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

@@ -9,6 +9,7 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 6px;
+  margin-bottom: 26px;
 }
 
 .buttons {

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 {
+  SORT_BY,
+  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/services/workPeriods.js

@@ -1,7 +1,6 @@
 import axios, { CancelToken } from "./axios";
 import {
   API_CHALLENGE_PAYMENT_STATUS,
-  API_QUERY_PARAM_NAMES,
   JOBS_API_URL,
   PAYMENTS_API_URL,
   PROJECTS_API_URL,
@@ -100,10 +99,9 @@ export const fetchWorkPeriods = (rbId, source) => {
 export const fetchResourceBookings = (params) => {
   const source = CancelToken.source();
   return [
-    axios.get(
-      `${RB_API_URL}?${buildRequestQuery(params, API_QUERY_PARAM_NAMES)}`,
-      { cancelToken: source.token }
-    ),
+    axios.get(`${RB_API_URL}?${buildRequestQuery(params)}`, {
+      cancelToken: source.token,
+    }),
     source,
   ];
 };

src/store/actionTypes/workPeriods.js

@@ -20,6 +20,7 @@ export const WP_SET_PAGE_SIZE = "WP_SET_PAGE_SIZE";
 export const WP_SET_DATE_RANGE = "WP_SET_DATE_RANGE";
 export const WP_SET_PAYMENT_DATA = "WP_SET_PAYMENT_DATA";
 export const WP_SET_PAYMENT_STATUSES = "WP_SET_PAYMENT_STATUSES";
+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";

src/store/actions/workPeriods.js

@@ -265,6 +265,17 @@ export const setWorkPeriodsPaymentStatuses = (paymentStatuses) => ({
   payload: paymentStatuses,
 });
 
+/**
+ * Creates an action denoting the changing of alert option
+ *
+ * @param {Object} paymentStatuses object with working periods' payment statuses
+ * @returns {Object}
+ */
+export const setAlertOption = (option) => ({
+  type: ACTION_TYPE.WP_SET_ALERT_OPTION,
+  payload: option,
+});
+
 /**
  * Creates an action denoting the changing of working periods' topcoder handle.
  *

src/store/reducers/workPeriods.js

@@ -42,6 +42,7 @@ const initFilters = () => ({
   dateRange: getWeekByDate(moment()),
   onlyFailedPayments: false,
   paymentStatuses: {}, // all disabled by default
+  alertOptions: {},
   userHandle: "",
 });
 
@@ -141,7 +142,7 @@ const actionHandlers = {
         periodEnd
       );
       periodsData[period.id] = periodData;
-      let reasonsDisabled = findReasonsDisabled(period);
+      let reasonsDisabled = findReasonsDisabled(period, dateRange);
       if (reasonsDisabled) {
         periodsDisabledMap.set(period.id, reasonsDisabled);
       }
@@ -556,6 +557,17 @@ const actionHandlers = {
       pageNumber: 1,
     },
   }),
+  [ACTION_TYPE.WP_SET_ALERT_OPTION]: (state, alertOptions) => ({
+    ...state,
+    filters: {
+      ...state.filters,
+      alertOptions: updateOptionMap(state.filters.alertOptions, alertOptions),
+    },
+    pagination: {
+      ...state.pagination,
+      pageNumber: 1,
+    },
+  }),
   [ACTION_TYPE.WP_SET_USER_HANDLE]: (state, userHandle) => {
     if (userHandle === state.filters.userHandle) {
       return state;
@@ -944,6 +956,34 @@ function updateStateFromQuery(queryStr, state) {
     filters.paymentStatuses = queryPaymentStatuses;
     updateFilters = true;
   }
+
+  // checking alert option
+  let hasSameOption = true;
+  const filtersAlertOptions = filters.alertOptions;
+  const queryAlertOptions = {};
+  const alertOptionsStr = params.alertOptions;
+  if (alertOptionsStr) {
+    for (let option of alertOptionsStr.split(",")) {
+      option = option.toUpperCase();
+      if (option in ALERT) {
+        queryAlertOptions[option] = true;
+        if (!filtersAlertOptions[option]) {
+          hasSameOption = false;
+        }
+      }
+    }
+  }
+  for (let option in filtersAlertOptions) {
+    if (!filtersAlertOptions[option]) {
+      hasSameOption = false;
+      break;
+    }
+  }
+  if (!hasSameOption) {
+    filters.alertOptions = queryAlertOptions;
+    updateFilters = true;
+  }
+
   // chacking only failed payments flag
   const onlyFailedFlag = params.onlyFailedPayments?.slice(0, 1);
   const onlyFailedPayments = onlyFailedFlag === "y";

src/store/thunks/workPeriods.js

@@ -113,6 +113,13 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
     ["workPeriods.userHandle"]: userHandle,
     ["workPeriods.startDate"]: startDate.format(DATE_FORMAT_API),
     ["workPeriods.paymentStatus"]: paymentStatuses,
+    ["billingAccountId"]: filters.alertOptions.BA_NOT_ASSIGNED ? 0 : null,
+    ["workPeriods.isFirstWeek"]: filters.alertOptions.ONBOARDING_WEEK
+      ? true
+      : null,
+    ["workPeriods.isLastWeek"]: filters.alertOptions.LAST_BOOKING_WEEK
+      ? true
+      : null,
     ["workPeriods.payments.status"]: onlyFailedPayments
       ? API_CHALLENGE_PAYMENT_STATUS.FAILED
       : null,

src/utils/misc.js

@@ -116,12 +116,11 @@ export function updateOptionMap(oldOptions, newOptions) {
  * that are not numbers and are falsy are ignored.
  *
  * @param {Object} params query parameters object
- * @param {string[]} paramNames array of valid query parameter names
  * @returns {string} query string
  */
-export const buildRequestQuery = (params, paramNames) => {
+export const buildRequestQuery = (params) => {
   const queryParams = [];
-  for (const paramName of paramNames) {
+  for (const paramName in params) {
     const paramValue = params[paramName];
     if (
       !(paramName in params) ||

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);
   }
@@ -111,13 +117,19 @@ export function removeValueImmutable(items, value) {
  */
 export function makeUrlQuery(state) {
   const { filters, pagination, sorting } = state;
-  const { dateRange, onlyFailedPayments, paymentStatuses, userHandle } =
-    filters;
+  const {
+    dateRange,
+    onlyFailedPayments,
+    paymentStatuses,
+    alertOptions,
+    userHandle,
+  } = filters;
   const { pageNumber, pageSize } = pagination;
   const { criteria, order } = sorting;
   const params = {
     startDate: dateRange[0].format(DATE_FORMAT_API),
     paymentStatuses: Object.keys(paymentStatuses).join(",").toLowerCase(),
+    alertOptions: Object.keys(alertOptions).join(",").toLowerCase(),
     onlyFailedPayments: onlyFailedPayments ? "y" : "",
     userHandle: encodeURIComponent(userHandle),
     criteria: criteria.toLowerCase(),