Added filtering by failed payments.

Author: MadOPcode

src/components/Popup/styles.module.scss

@@ -1,7 +1,7 @@
 @import "styles/variables";
 
 .container {
-  z-index: 1;
+  z-index: 10;
   border-radius: 8px;
   padding: $popover-padding;
   background: #fff;

src/constants/workPeriods.js

@@ -120,6 +120,7 @@ export const API_CHALLENGE_PAYMENT_STATUS_MAP = {
 export const URL_QUERY_PARAM_MAP = new Map([
   ["startDate", "startDate"],
   ["paymentStatuses", "status"],
+  ["onlyFailedPayments", "onlyFailed"],
   ["userHandle", "user"],
   ["criteria", "by"],
   ["order", "order"],

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

@@ -3,16 +3,18 @@ import { useDispatch, useSelector } from "react-redux";
 import debounce from "lodash/debounce";
 import PT from "prop-types";
 import cn from "classnames";
-import SidebarSection from "components/SidebarSection";
 import Button from "components/Button";
-import SearchHandleField from "components/SearchHandleField";
 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 { getWorkPeriodsFilters } from "store/selectors/workPeriods";
 import {
   resetWorkPeriodsFilters,
   setWorkPeriodsPaymentStatuses,
   setWorkPeriodsUserHandle,
+  toggleShowFailedPaymentsOnly,
 } from "store/actions/workPeriods";
 import {
   loadWorkPeriodsPage,
@@ -33,7 +35,15 @@ import styles from "./styles.module.scss";
 const PeriodFilters = ({ className }) => {
   const dispatch = useDispatch();
   const filters = useSelector(getWorkPeriodsFilters);
-  const { paymentStatuses, userHandle } = filters;
+  const { onlyFailedPayments, paymentStatuses, userHandle } = filters;
+
+  const onToggleFailedPayments = useCallback(
+    (on) => {
+      dispatch(toggleShowFailedPaymentsOnly(on));
+      dispatch(updateQueryFromState());
+    },
+    [dispatch]
+  );
 
   const onUserHandleChange = useCallback(
     (value) => {
@@ -93,6 +103,16 @@ const PeriodFilters = ({ className }) => {
           value={paymentStatuses}
         />
       </SidebarSection>
+      <div className={styles.onlyFailedPayments}>
+        <label htmlFor="only-failed-payments">With Failed Payments</label>
+        <Toggle
+          id="only-failed-payments"
+          name="tgl_only_failed_payments"
+          size="small"
+          isOn={onlyFailedPayments}
+          onChange={onToggleFailedPayments}
+        />
+      </div>
       <div className={styles.buttons}>
         <Button className={styles.button} size="small" onClick={onClearFilter}>
           Clear Filter

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

@@ -4,6 +4,13 @@
   margin: 0 0 26px;
 }
 
+.onlyFailedPayments {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 6px;
+}
+
 .buttons {
   display: flex;
   justify-content: space-between;

src/store/actionTypes/workPeriods.js

@@ -29,6 +29,7 @@ export const WP_SET_SORT_ORDER = "WP_SET_SORT_ORDER";
 export const WP_SET_SORTING = "WP_SET_SORTING";
 export const WP_SET_USER_HANDLE = "WP_SET_USER_HANDLE";
 export const WP_SET_WORKING_DAYS = "WP_SET_WORKING_DAYS";
+export const WP_TOGGLE_ONLY_FAILED_PAYMENTS = "WP_TOGGLE_ONLY_FAILED_PAYMENTS";
 export const WP_TOGGLE_PERIOD = "WP_TOGGLE_PERIOD";
 export const WP_TOGGLE_PERIODS_ALL = "WP_TOGGLE_PERIODS_ALL";
 export const WP_TOGGLE_PERIODS_VISIBLE = "WP_TOGGLE_PERIODS_VISIBLE";

src/store/actions/workPeriods.js

@@ -339,6 +339,11 @@ export const setWorkPeriodDataError = (periodId, message) => ({
   payload: { periodId, message },
 });
 
+export const toggleShowFailedPaymentsOnly = (on = null) => ({
+  type: ACTION_TYPE.WP_TOGGLE_ONLY_FAILED_PAYMENTS,
+  payload: on,
+});
+
 /**
  * Creates an action to toggle certain working period by its id.
  *

src/store/reducers/workPeriods.js

@@ -33,6 +33,7 @@ const initPagination = () => ({
 
 const initFilters = () => ({
   dateRange: getWeekByDate(moment()),
+  onlyFailedPayments: false,
   paymentStatuses: {}, // all disabled by default
   userHandle: "",
 });
@@ -597,6 +598,20 @@ const actionHandlers = {
       periodsData: [periodsData],
     };
   },
+  [ACTION_TYPE.WP_TOGGLE_ONLY_FAILED_PAYMENTS]: (state, on) => {
+    const filters = state.filters;
+    on = on === null ? !filters.onlyFailedPayments : on;
+    if (on === filters.onlyFailedPayments) {
+      return state;
+    }
+    return {
+      ...state,
+      filters: {
+        ...filters,
+        onlyFailedPayments: on,
+      },
+    };
+  },
   [ACTION_TYPE.WP_TOGGLE_PERIOD]: (state, periodId) => {
     let isSelectedPeriodsAll = state.isSelectedPeriodsAll;
     let isSelectedPeriodsVisible = state.isSelectedPeriodsVisible;
@@ -697,13 +712,14 @@ function updateStateFromQuery(queryStr, state) {
   let updatePagination = false;
   let updateSorting = false;
   const { filters, pagination, sorting } = state;
-  // checking payment statuses
   const { dateRange } = filters;
+  // checking start date
   let range = getWeekByDate(moment(params.startDate));
   if (!range[0].isSame(dateRange[0])) {
     filters.dateRange = range;
     updateFilters = true;
   }
+  // checking payment statuses
   let hasSameStatuses = true;
   const filtersPaymentStatuses = filters.paymentStatuses;
   const queryPaymentStatuses = {};
@@ -729,10 +745,17 @@ function updateStateFromQuery(queryStr, state) {
     filters.paymentStatuses = queryPaymentStatuses;
     updateFilters = true;
   }
+  // chacking only failed payments flag
+  const onlyFailedFlag = params.onlyFailedPayments?.slice(0, 1);
+  const onlyFailedPayments = onlyFailedFlag === "y";
+  if (onlyFailedPayments !== filters.onlyFailedPayments) {
+    filters.onlyFailedPayments = onlyFailedPayments;
+    updateFilters = true;
+  }
   // checking user handle
-  params.userHandle = params.userHandle || "";
-  if (params.userHandle !== filters.userHandle) {
-    filters.userHandle = params.userHandle.slice(0, 256);
+  const userHandle = params.userHandle?.slice(0, 256) || "";
+  if (userHandle !== filters.userHandle) {
+    filters.userHandle = userHandle;
     updateFilters = true;
   }
   // checking sorting criteria

src/store/thunks/workPeriods.js

@@ -10,6 +10,7 @@ import {
   PAYMENT_STATUS_MAP,
   API_FIELDS_QUERY,
   JOB_NAME_NONE,
+  API_CHALLENGE_PAYMENT_STATUS,
 } from "constants/workPeriods";
 import {
   extractJobName,
@@ -54,6 +55,7 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
   const sortOrder = sorting.order;
   const sortBy = SORT_BY_MAP[sorting.criteria] || API_SORT_BY.USER_HANDLE;
 
+  const { onlyFailedPayments, userHandle } = filters;
   const [startDate] = filters.dateRange;
   const paymentStatuses = replaceItems(
     Object.keys(filters.paymentStatuses),
@@ -62,18 +64,22 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
 
   // For parameter description see:
   // https://topcoder-platform.github.io/taas-apis/#/ResourceBookings/get_resourceBookings
-  const [promise, cancelSource] = services.fetchResourceBookings({
+  const params = {
     fields: API_FIELDS_QUERY,
     page: pagination.pageNumber,
     perPage: pagination.pageSize,
     sortBy,
     sortOrder,
     // we only want to show Resource Bookings with status "placed"
     status: RESOURCE_BOOKING_STATUS.PLACED,
-    ["workPeriods.userHandle"]: filters.userHandle,
+    ["workPeriods.userHandle"]: userHandle,
     ["workPeriods.startDate"]: startDate.format(DATE_FORMAT_API),
     ["workPeriods.paymentStatus"]: paymentStatuses,
-  });
+  };
+  if (onlyFailedPayments) {
+    params["workPeriods.payments.status"] = API_CHALLENGE_PAYMENT_STATUS.FAILED;
+  }
+  const [promise, cancelSource] = services.fetchResourceBookings(params);
   dispatch(actions.loadWorkPeriodsPagePending(cancelSource));
   let totalCount, periods, pageCount;
   try {

src/utils/workPeriods.js

@@ -16,12 +16,14 @@ import {
  */
 export function makeUrlQuery(state) {
   const { filters, pagination, sorting } = state;
-  const { dateRange, paymentStatuses, userHandle } = filters;
+  const { dateRange, onlyFailedPayments, paymentStatuses, 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(),
+    onlyFailedPayments: onlyFailedPayments ? "y" : "",
     userHandle: encodeURIComponent(userHandle),
     criteria: criteria.toLowerCase(),
     order,