fix: various improvements

- support new list of WP paymentStatus
- change yellow color for warning Toastr
- update label colors for payment status
- fix getting all the Work Periods inside the history
- don't select any status in the filter by default

Author: maxceem

src/components/ToastrMessage/styles.module.scss

@@ -74,7 +74,7 @@
 }
 
 .warning {
-  background: #efaf47;
+  background: #efc847;
 }
 
 .error {

src/constants/workPeriods.js

@@ -62,18 +62,17 @@ export const SORT_BY_MAP = {
 };
 
 export const PAYMENT_STATUS_LABELS = {
-  [PAYMENT_STATUS.CANCELLED]: "Cancelled",
-  [PAYMENT_STATUS.FAILED]: "Failed",
-  [PAYMENT_STATUS.PAID]: "Paid",
+  [PAYMENT_STATUS.NO_DAYS]: "No Days",
+  [PAYMENT_STATUS.COMPLETED]: "Completed",
+  [PAYMENT_STATUS.PARTIALLY_COMPLETED]: "Partially Completed",
   [PAYMENT_STATUS.PENDING]: "Pending",
   [PAYMENT_STATUS.IN_PROGRESS]: "In Progress",
-  [PAYMENT_STATUS.UNDEFINED]: "NA",
 };
 
 export const PAYMENT_STATUS_MAP = {
-  [PAYMENT_STATUS.CANCELLED]: API_PAYMENT_STATUS.CANCELLED,
-  [PAYMENT_STATUS.FAILED]: API_PAYMENT_STATUS.FAILED,
-  [PAYMENT_STATUS.PAID]: API_PAYMENT_STATUS.COMPLETED,
+  [PAYMENT_STATUS.NO_DAYS]: API_PAYMENT_STATUS.NO_DAYS,
+  [PAYMENT_STATUS.COMPLETED]: API_PAYMENT_STATUS.COMPLETED,
+  [PAYMENT_STATUS.PARTIALLY_COMPLETED]: API_PAYMENT_STATUS.PARTIALLY_COMPLETED,
   [PAYMENT_STATUS.PENDING]: API_PAYMENT_STATUS.PENDING,
   [PAYMENT_STATUS.IN_PROGRESS]: API_PAYMENT_STATUS.PARTIALLY_COMPLETED,
 };

src/constants/workPeriods/apiPaymentStatus.js

@@ -1,5 +1,5 @@
 export const PENDING = "pending";
 export const PARTIALLY_COMPLETED = "partially-completed";
 export const COMPLETED = "completed";
-export const CANCELLED = "cancelled";
+export const NO_DAYS = "no-days";
 export const FAILED = "failed";

src/constants/workPeriods/paymentStatus.js

@@ -1,6 +1,5 @@
-export const PAID = "PAID";
+export const PARTIALLY_COMPLETED = "PARTIALLY_COMPLETED";
+export const COMPLETED = "COMPLETED";
 export const PENDING = "PENDING";
 export const IN_PROGRESS = "IN_PROGRESS";
-export const CANCELLED = "CANCELLED";
-export const FAILED = "FAILED";
-export const UNDEFINED = "UNDEFINED";
+export const NO_DAYS = "NO_DAYS";

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

@@ -13,21 +13,24 @@
   color: #fff;
 }
 
-.paid {
+.completed {
   background: #0ab88a;
 }
 
-.pending {
-  background: #ef476f;
+.partially_completed {
+  background: #ecef47;
 }
 
 .in_progress {
   background: #9d41c9;
 }
 
-.cancelled,
-.failed {
-  background: #da0000;
+.no_days {
+  background: #aaa;
+}
+
+.pending {
+  background: #ef476f;
 }
 
 .undefined {

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

@@ -97,9 +97,10 @@ PeriodFilters.propTypes = {
 
 const PAYMENT_STATUS_OPTIONS = [
   { value: PAYMENT_STATUS.PENDING, label: "Pending" },
-  { value: PAYMENT_STATUS.PAID, label: "Paid" },
+  { value: PAYMENT_STATUS.COMPLETED, label: "Completed" },
+  { value: PAYMENT_STATUS.PARTIALLY_COMPLETED, label: "Partially Completed" },
   { value: PAYMENT_STATUS.IN_PROGRESS, label: "In Progress" },
-  // { value: PAYMENT_STATUS.FAILED, label: "Failed" },
+  { value: PAYMENT_STATUS.NO_DAYS, label: "No Days" },
 ];
 
 export default PeriodFilters;

src/services/workPeriods.js

@@ -76,9 +76,14 @@ export const fetchWorkPeriods = (rbId, source) => {
   }
   return [
     axios
-      .get(`${WORK_PERIODS_API_URL}/?resourceBookingIds=${rbId}`, {
-        cancelToken: source.token,
-      })
+      // sort by `startDate` just for comfort - so it's easier to check request in the Dev Tools
+      // we get 10000 records to see all the records for now, but we have to improve this
+      .get(
+        `${WORK_PERIODS_API_URL}/?resourceBookingIds=${rbId}&sortBy=startDate&sortOrder=asc&perPage=10000`,
+        {
+          cancelToken: source.token,
+        }
+      )
       .then(extractResponseData),
     source,
   ];

src/store/reducers/workPeriods.js

@@ -3,7 +3,6 @@ import * as ACTION_TYPE from "store/actionTypes/workPeriods";
 import {
   SORT_BY_DEFAULT,
   SORT_ORDER_DEFAULT,
-  PAYMENT_STATUS,
   JOB_NAME_ERROR,
   BILLING_ACCOUNTS_NONE,
   JOB_NAME_LOADING,
@@ -26,11 +25,7 @@ const initPagination = () => ({
 
 const initFilters = () => ({
   dateRange: getWeekByDate(moment()),
-  paymentStatuses: {
-    [PAYMENT_STATUS.PAID]: true,
-    [PAYMENT_STATUS.PENDING]: true,
-    [PAYMENT_STATUS.IN_PROGRESS]: true,
-  },
+  paymentStatuses: {}, // all disabled by default
   userHandle: "",
 });
 

src/utils/workPeriods.js

@@ -1,9 +1,5 @@
 import moment from "moment";
-import {
-  API_PAYMENT_STATUS_MAP,
-  DATE_FORMAT_UI,
-  PAYMENT_STATUS,
-} from "constants/workPeriods";
+import { API_PAYMENT_STATUS_MAP, DATE_FORMAT_UI } from "constants/workPeriods";
 
 export function normalizePeriodItems(items) {
   const empty = {};
@@ -83,7 +79,7 @@ export function normalizeDetailsPeriodItems(items) {
 }
 
 export function normalizePaymentStatus(paymentStatus) {
-  return API_PAYMENT_STATUS_MAP[paymentStatus] || PAYMENT_STATUS.UNDEFINED;
+  return API_PAYMENT_STATUS_MAP[paymentStatus];
 }
 
 export function sortByStartDate(itemA, itemB) {