Fixes and improvements

src/constants/workPeriods.js

@@ -34,7 +34,9 @@ export const REQUIRED_FIELDS = [
   "workPeriods.startDate",
   "workPeriods.endDate",
   "workPeriods.paymentStatus",
+  "workPeriods.paymentTotal",
   "workPeriods.daysWorked",
+  "workPeriods.daysPaid",
 ];
 
 // Valid parameter names for requests.
@@ -58,6 +60,7 @@ export const SORT_BY_MAP = {
   [SORT_BY.END_DATE]: API_SORT_BY.END_DATE,
   [SORT_BY.WEEKLY_RATE]: API_SORT_BY.WEEKLY_RATE,
   [SORT_BY.PAYMENT_STATUS]: API_SORT_BY.PAYMENT_STATUS,
+  [SORT_BY.PAYMENT_TOTAL]: API_SORT_BY.PAYMENT_TOTAL,
   [SORT_BY.WORKING_DAYS]: API_SORT_BY.WORKING_DAYS,
 };
 

src/constants/workPeriods/apiSortBy.js

@@ -3,4 +3,5 @@ export const START_DATE = "startDate";
 export const END_DATE = "endDate";
 export const WEEKLY_RATE = "memberRate";
 export const PAYMENT_STATUS = "workPeriods.paymentStatus";
+export const PAYMENT_TOTAL = "workPeriods.paymentTotal";
 export const WORKING_DAYS = "workPeriods.daysWorked";

src/constants/workPeriods/sortBy.js

@@ -5,4 +5,5 @@ export const END_DATE = "END_DATE";
 export const ALERT = "ALERT";
 export const WEEKLY_RATE = "WEEKLY_RATE";
 export const PAYMENT_STATUS = "STATUS";
+export const PAYMENT_TOTAL = "TOTAL_PAYMENT";
 export const WORKING_DAYS = "WORKING_DAYS";

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

@@ -1,4 +1,5 @@
 @import "styles/mixins";
+@import "styles/variables";
 
 .container {
   display: inline-block;
@@ -25,7 +26,10 @@
   background: #9d41c9;
 }
 
-.cancelled,
+.cancelled {
+  background: #999;
+}
+
 .failed {
   background: #da0000;
 }
@@ -37,4 +41,5 @@
   line-height: 20px;
   letter-spacing: normal;
   background: transparent;
+  color: $text-color;
 }

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

@@ -124,7 +124,7 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
               </Button>
             </div>
           </td>
-          <td colSpan={5} className={styles.periodHistory}>
+          <td colSpan={6} className={styles.periodHistory}>
             <div className={styles.periodsContainer}>
               <div className={styles.periodsHeader}>
                 <span className={styles.periodsHeaderTitle}>History</span>
@@ -146,7 +146,6 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
               </div>
               <PeriodsHistory
                 isDisabled={isDisabled}
-                periodId={periodId}
                 periods={periodsVisible}
               />
             </div>

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

@@ -17,7 +17,11 @@ import {
   updateWorkPeriodWorkingDays,
 } from "store/thunks/workPeriods";
 import { useUpdateEffect } from "utils/hooks";
-import { formatUserHandleLink, formatWeeklyRate } from "utils/formatters";
+import {
+  currencyFormatter,
+  formatUserHandleLink,
+  formatWeeklyRate,
+} from "utils/formatters";
 import { stopPropagation } from "utils/misc";
 import styles from "./styles.module.scss";
 
@@ -29,6 +33,7 @@ import styles from "./styles.module.scss";
  * @param {boolean} [props.isFailed] whether the item should be highlighted as failed
  * @param {boolean} props.isSelected whether the item is selected
  * @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
  * @returns {JSX.Element}
  */
@@ -37,6 +42,7 @@ const PeriodItem = ({
   isFailed = false,
   isSelected,
   item,
+  data,
   details,
 }) => {
   const dispatch = useDispatch();
@@ -53,16 +59,16 @@ const PeriodItem = ({
   }, [dispatch, item]);
 
   const onWorkingDaysChange = useCallback(
-    (workingDays) => {
-      dispatch(setWorkPeriodWorkingDays({ periodId: item.id, workingDays }));
+    (daysWorked) => {
+      dispatch(setWorkPeriodWorkingDays(item.id, daysWorked));
     },
     [dispatch, item.id]
   );
 
   const updateWorkingDays = useCallback(
     debounce(
-      (workingDays) => {
-        dispatch(updateWorkPeriodWorkingDays(item.id, workingDays));
+      (daysWorked) => {
+        dispatch(updateWorkPeriodWorkingDays(item.id, daysWorked));
       },
       300,
       { leading: false }
@@ -72,8 +78,8 @@ const PeriodItem = ({
 
   // Update working days on server if working days change.
   useUpdateEffect(() => {
-    updateWorkingDays(item.workingDays);
-  }, [item.workingDays]);
+    updateWorkingDays(data.daysWorked);
+  }, [data.daysWorked]);
 
   return (
     <>
@@ -115,18 +121,24 @@ const PeriodItem = ({
         <td className={styles.weeklyRate}>
           <span>{formatWeeklyRate(item.weeklyRate)}</span>
         </td>
+        <td className={styles.paymentTotal}>
+          <span className={styles.paymentTotalSum}>
+            {currencyFormatter.format(data.paymentTotal)}
+          </span>
+          <span className={styles.daysPaid}> ({data.daysPaid})</span>
+        </td>
         <td>
-          <PaymentStatus status={item.paymentStatus} />
+          <PaymentStatus status={data.paymentStatus} />
         </td>
-        <td className={styles.workingDays}>
+        <td className={styles.daysWorked}>
           <IntegerField
-            className={styles.workingDaysControl}
+            className={styles.daysWorkedControl}
             isDisabled={isDisabled}
             name={`wp_wrk_days_${item.id}`}
             onChange={onWorkingDaysChange}
             maxValue={5}
-            minValue={0}
-            value={item.workingDays}
+            minValue={data.daysPaid}
+            value={data.daysWorked}
           />
         </td>
       </tr>
@@ -155,9 +167,13 @@ PeriodItem.propTypes = {
     startDate: PT.string.isRequired,
     endDate: PT.string.isRequired,
     weeklyRate: PT.number,
+  }).isRequired,
+  data: PT.shape({
+    daysWorked: PT.number.isRequired,
+    daysPaid: PT.number.isRequired,
     paymentStatus: PT.string.isRequired,
-    workingDays: PT.number.isRequired,
-  }),
+    paymentTotal: PT.number.isRequired,
+  }).isRequired,
   details: PT.shape({
     periodId: PT.string.isRequired,
     rbId: PT.string.isRequired,

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

@@ -25,7 +25,7 @@
         padding-left: 14px;
       }
 
-      &.workingDays {
+      &.daysWorked {
         border-right: 1px solid #d6d6d6;
         padding-top: 4px;
         padding-right: 9px;
@@ -77,10 +77,24 @@ td.weeklyRate {
   }
 }
 
-td.workingDays {
+td.paymentTotal {
+  white-space: nowrap;
+}
+
+.paymentTotalSum {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+}
+
+.daysPaid {
+  color: #aaa;
+}
+
+td.daysWorked {
   padding: 5px 10px;
 }
 
-.workingDaysControl {
+.daysWorkedControl {
   width: 100px;
 }

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

@@ -7,6 +7,7 @@ import PeriodItem from "../PeriodItem";
 import PeriodListHead from "../PeriodListHead";
 import {
   getWorkPeriods,
+  getWorkPeriodsData,
   getWorkPeriodsDetails,
   getWorkPeriodsFailed,
   getWorkPeriodsIsProcessingPayments,
@@ -23,6 +24,7 @@ import styles from "./styles.module.scss";
  */
 const PeriodList = ({ className }) => {
   const periods = useSelector(getWorkPeriods);
+  const [periodsData] = useSelector(getWorkPeriodsData);
   const periodsDetails = useSelector(getWorkPeriodsDetails);
   const periodsFailed = useSelector(getWorkPeriodsFailed);
   const periodsSelected = useSelector(getWorkPeriodsSelected);
@@ -37,7 +39,7 @@ const PeriodList = ({ className }) => {
           </thead>
           <tbody>
             <tr>
-              <td colSpan={8} className={styles.listTopMargin}></td>
+              <td colSpan={9} className={styles.listTopMargin}></td>
             </tr>
             {periods.map((period) => (
               <PeriodItem
@@ -46,6 +48,7 @@ const PeriodList = ({ className }) => {
                 isFailed={period.id in periodsFailed}
                 isSelected={period.id in periodsSelected}
                 item={period}
+                data={periodsData[period.id]}
                 details={periodsDetails[period.id]}
               />
             ))}

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

@@ -74,6 +74,7 @@ const HEAD_CELLS = [
   { label: "Start Date", id: SORT_BY.START_DATE },
   { label: "End Date", id: SORT_BY.END_DATE },
   { label: "Weekly Rate", id: SORT_BY.WEEKLY_RATE },
+  { label: "Total Paid", id: SORT_BY.PAYMENT_TOTAL },
   { label: "Status", id: SORT_BY.PAYMENT_STATUS },
   { label: "Working Days", id: SORT_BY.WORKING_DAYS },
 ];

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

@@ -1,10 +1,12 @@
 import React, { useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import PT from "prop-types";
+import cn from "classnames";
 import moment from "moment";
 import WeekPicker from "components/WeekPicker";
 import { getWorkPeriodsDateRange } from "store/selectors/workPeriods";
 import { setWorkPeriodsDateRange } from "store/actions/workPeriods";
+import styles from "./styles.module.scss";
 
 /**
  * Displays working periods' week picker.
@@ -34,7 +36,7 @@ const PeriodWeekPicker = ({ className }) => {
 
   return (
     <WeekPicker
-      className={className}
+      className={cn(styles.container, className)}
       startDate={startDate}
       endDate={endDate}
       onWeekSelect={onWeekSelect}

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

@@ -1,3 +1,4 @@
 .container {
+  z-index: 4;
   position: relative;
 }

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

@@ -3,7 +3,10 @@ import { useSelector } from "react-redux";
 import PT from "prop-types";
 import cn from "classnames";
 import PeriodHistoryItem from "../PeriodsHistoryItem";
-import { getWorkPeriodsDateRange } from "store/selectors/workPeriods";
+import {
+  getWorkPeriodsData,
+  getWorkPeriodsDateRange,
+} from "store/selectors/workPeriods";
 import styles from "./styles.module.scss";
 
 /**
@@ -12,7 +15,8 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @returns {JSX.Element}
  */
-const PeriodsHistory = ({ className, isDisabled, periodId, periods }) => {
+const PeriodsHistory = ({ className, isDisabled, periods }) => {
+  const [periodsData] = useSelector(getWorkPeriodsData);
   const [startDate] = useSelector(getWorkPeriodsDateRange);
   return (
     <div className={cn(styles.container, className)}>
@@ -21,9 +25,9 @@ const PeriodsHistory = ({ className, isDisabled, periodId, periods }) => {
           {periods.map((period) => (
             <PeriodHistoryItem
               key={period.id}
-              periodId={periodId}
               isDisabled={isDisabled}
               item={period}
+              data={periodsData[period.id]}
               currentStartDate={startDate}
             />
           ))}
@@ -36,7 +40,6 @@ const PeriodsHistory = ({ className, isDisabled, periodId, periods }) => {
 PeriodsHistory.propTypes = {
   className: PT.string,
   isDisabled: PT.bool.isRequired,
-  periodId: PT.string.isRequired,
   periods: PT.arrayOf(PT.object),
 };