fix: issue #72

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"],

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/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,7 @@ 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 +62,14 @@ const PeriodFilters = ({ className }) => {
     [dispatch]
   );
 
+  const onAlertOptionsChange = useCallback(
+    (option) => {
+      dispatch(setAlertOption(option));
+      dispatch(updateQueryFromState());
+    },
+    [dispatch]
+  );
+
   const onClearFilter = useCallback(() => {
     dispatch(resetWorkPeriodsFilters());
     dispatch(updateQueryFromState());
@@ -113,6 +122,14 @@ const PeriodFilters = ({ className }) => {
           onChange={onToggleFailedPayments}
         />
       </div>
+      <SidebarSection label="Alerts">
+        <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 +151,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: 6px;
 }
 
 .buttons {

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,
@@ -101,7 +100,7 @@ export const fetchResourceBookings = (params) => {
   const source = CancelToken.source();
   return [
     axios.get(
-      `${RB_API_URL}?${buildRequestQuery(params, API_QUERY_PARAM_NAMES)}`,
+      `${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: "",
 });
 
@@ -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,9 @@ 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

@@ -111,13 +111,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(),