Fixes for popups and pagination

src/components/Popup/index.jsx

@@ -4,11 +4,27 @@ import PT from "prop-types";
 import cn from "classnames";
 import compStyles from "./styles.module.scss";
 
-const Popup = ({ children, className, referenceElement }) => {
+/**
+ * Displays a popup near the reference element.
+ *
+ * @param {Object} props component properties
+ * @param {any} [props.children] child nodes
+ * @param {string} [props.className] class name to be added to root element
+ * @param {Object} props.referenceElement reference element
+ * @param {'absolute'|'fixed'} [props.strategy] positioning strategy
+ * @returns {JSX.Element}
+ */
+const Popup = ({
+  children,
+  className,
+  referenceElement,
+  strategy = "absolute",
+}) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom",
+    strategy,
     modifiers: [
       { name: "arrow", options: { element: arrowElement, padding: 10 } },
       { name: "offset", options: { offset: [0, 5] } },
@@ -33,6 +49,7 @@ Popup.propTypes = {
   children: PT.node,
   className: PT.string,
   referenceElement: PT.object.isRequired,
+  strategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default Popup;

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

@@ -14,9 +14,15 @@ import styles from "./styles.module.scss";
  * @param {string} [props.className] class name to be added to root element
  * @param {Object} [props.errorDetails] error details object
  * @param {boolean} [props.isImportant] whether the error deemed important
+ * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @returns {JSX.Element}
  */
-const PaymentError = ({ className, errorDetails, isImportant = true }) => {
+const PaymentError = ({
+  className,
+  errorDetails,
+  isImportant = true,
+  popupStrategy = "absolute",
+}) => {
   const [isShowPopup, setIsShowPopup] = useState(false);
   const [refElem, setRefElem] = useState(null);
   const containerRef = useRef(null);
@@ -42,7 +48,7 @@ const PaymentError = ({ className, errorDetails, isImportant = true }) => {
         tabIndex={0}
       />
       {isShowPopup && errorDetails && (
-        <Popup referenceElement={refElem}>
+        <Popup referenceElement={refElem} strategy={popupStrategy}>
           <PaymentErrorDetails details={errorDetails} />
         </Popup>
       )}
@@ -54,6 +60,7 @@ PaymentError.propTypes = {
   className: PT.string,
   errorDetails: PT.object,
   isImportant: PT.bool,
+  popupStrategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default PaymentError;

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

@@ -17,9 +17,16 @@ import styles from "./styles.module.scss";
  * @param {Array} [props.payments] an array with payments information
  * @param {number} props.paymentTotal total paid sum
  * @param {number} props.daysPaid number of paid days
+ * @param {'absolute'|'fixed'} [props.popupStrategy] popup positioning strategy
  * @returns {JSX.Element}
  */
-const PaymentTotal = ({ className, payments, paymentTotal, daysPaid }) => {
+const PaymentTotal = ({
+  className,
+  payments,
+  paymentTotal,
+  daysPaid,
+  popupStrategy = "absolute",
+}) => {
   const [isShowPopup, setIsShowPopup] = useState(false);
   const [refElem, setRefElem] = useState(null);
   const containerRef = useRef(null);
@@ -56,7 +63,7 @@ const PaymentTotal = ({ className, payments, paymentTotal, daysPaid }) => {
         <span className={styles.daysPaid}>({daysPaid})</span>
       </span>
       {hasPayments && isShowPopup && (
-        <Popup referenceElement={refElem}>
+        <Popup referenceElement={refElem} strategy={popupStrategy}>
           <PaymentsList payments={payments} />
         </Popup>
       )}
@@ -69,6 +76,7 @@ PaymentTotal.propTypes = {
   payments: PT.array,
   paymentTotal: PT.number.isRequired,
   daysPaid: PT.number.isRequired,
+  popupStrategy: PT.oneOf(["absolute", "fixed"]),
 };
 
 export default PaymentTotal;

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

@@ -126,13 +126,15 @@ const PeriodItem = ({
               className={styles.paymentError}
               errorDetails={data.paymentErrorLast}
               isImportant={data.paymentStatus !== PAYMENT_STATUS.COMPLETED}
+              popupStrategy="fixed"
             />
           )}
           <PaymentTotal
             className={styles.paymentTotalContainer}
             daysPaid={data.daysPaid}
             payments={data.payments}
             paymentTotal={data.paymentTotal}
+            popupStrategy="fixed"
           />
         </td>
         <td>

src/store/actions/workPeriods.js

@@ -4,7 +4,7 @@ import * as ACTION_TYPE from "store/actionTypes/workPeriods";
 let nextErrorId = 1;
 
 /**
- * Creates an action denoting the start of loading specific challenge page.
+ * Creates an action denoting the start of loading specific working period page.
  *
  * @param {Object} cancelSource object that can be used to cancel network request
  * @returns {Object}
@@ -17,14 +17,15 @@ export const loadWorkPeriodsPagePending = (cancelSource) => ({
 /**
  * Creates an action denoting the saving of fetched working periods' page.
  *
- * @param {Array} periods array of challenge objects
- * @param {number} totalCount total number of periods for current filters' state
- * @param {number} pageCount total number of pages
+ * @param {Object} payload action payload
+ * @param {Array} payload.periods array of working period objects
+ * @param {number} payload.totalCount total number of periods for current filters' state
+ * @param {number} payload.pageCount total number of pages
  * @returns {Object}
  */
-export const loadWorkPeriodsPageSuccess = (periods, totalCount, pageCount) => ({
+export const loadWorkPeriodsPageSuccess = (payload) => ({
   type: ACTION_TYPE.WP_LOAD_PAGE_SUCCESS,
-  payload: { periods, totalCount, pageCount },
+  payload,
 });
 
 /**

src/store/reducers/workPeriods.js

@@ -610,6 +610,10 @@ const actionHandlers = {
         ...filters,
         onlyFailedPayments: on,
       },
+      pagination: {
+        ...state.pagination,
+        pageNumber: 1,
+      },
     };
   },
   [ACTION_TYPE.WP_TOGGLE_PERIOD]: (state, periodId) => {

src/store/thunks/workPeriods.js

@@ -64,7 +64,7 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
 
   // For parameter description see:
   // https://topcoder-platform.github.io/taas-apis/#/ResourceBookings/get_resourceBookings
-  const params = {
+  const [promise, cancelSource] = services.fetchResourceBookings({
     fields: API_FIELDS_QUERY,
     page: pagination.pageNumber,
     perPage: pagination.pageSize,
@@ -75,11 +75,10 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
     ["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);
+    ["workPeriods.payments.status"]: onlyFailedPayments
+      ? API_CHALLENGE_PAYMENT_STATUS.FAILED
+      : null,
+  });
   dispatch(actions.loadWorkPeriodsPagePending(cancelSource));
   let totalCount, periods, pageCount;
   try {
@@ -95,7 +94,13 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
     }
     return;
   }
-  dispatch(actions.loadWorkPeriodsPageSuccess(periods, totalCount, pageCount));
+  dispatch(
+    actions.loadWorkPeriodsPageSuccess({
+      periods,
+      totalCount,
+      pageCount,
+    })
+  );
 };
 
 /**

src/styles/mixins/_screenSizes.scss

@@ -1,4 +1,4 @@
-@import 'variables/screenSizes';
+@import "variables/screenSizes";
 
 // There's no need for phone() mixin for phone and larger screens to exist
 // because styles for these screens are simply added without media queries.

src/styles/variables/_screenSizes.scss

@@ -2,9 +2,9 @@ $screen-codes: phone tablet desktop desktop-lg;
 
 // This map defines minimum screen widths for different devices.
 $screen-sizes: (
-  'phone': 320px,
-  'tablet': 768px,
-  'desktop': 1280px,
+  "phone": 320px,
+  "tablet": 768px,
+  "desktop": 1280px,
 );
 
 // Media queries' mixins will use minimum screen widths from this map.
@@ -20,7 +20,7 @@ $screen-min-px: ();
 $screen-min-px: map-merge(
   $screen-min-px,
   (
-    'desktop-lg': 1920px,
+    "desktop-lg": 1920px,
   )
 );