Fixed: toastr messages for single resources were in plural form.

Author: MadOPcode

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

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import ToastMessage from "components/ToastrMessage";
+import { formatPlural } from "utils/formatters";
 
 /**
  * Displays a toastr message with info about the number of resources payments
@@ -12,7 +13,7 @@ import ToastMessage from "components/ToastrMessage";
 const ToastPaymentsError = ({ resourceCount, remove }) => {
   return (
     <ToastMessage type="error" remove={remove}>
-      Failed to schedule payments for {resourceCount} resources
+      Failed to schedule payment for {formatPlural(resourceCount, "resource")}
     </ToastMessage>
   );
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import ToastMessage from "components/ToastrMessage";
+import { formatPlural } from "utils/formatters";
 import styles from "./styles.module.scss";
 
 /**
@@ -14,7 +15,7 @@ const ToastPaymentsProcessing = ({ resourceCount, remove }) => {
   return (
     <ToastMessage className={styles.container} remove={remove}>
       <span className={styles.icon}></span>
-      Payment in progress for {resourceCount} resources
+      Payment in progress for {formatPlural(resourceCount, "resource")}
     </ToastMessage>
   );
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import ToastMessage from "components/ToastrMessage";
+import { formatPlural } from "utils/formatters";
 
 /**
  * Displays a toastr message with info about the number of resources payments
@@ -12,7 +13,7 @@ import ToastMessage from "components/ToastrMessage";
 const ToastPaymentsSuccess = ({ resourceCount, remove }) => {
   return (
     <ToastMessage type="success" remove={remove}>
-      Payment scheduled for {resourceCount} resources
+      Payment scheduled for {formatPlural(resourceCount, "resource")}
     </ToastMessage>
   );
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import ToastMessage from "components/ToastrMessage";
+import { formatPlural } from "utils/formatters";
 import styles from "./styles.module.scss";
 
 /**
@@ -28,12 +29,14 @@ const ToastPaymentsWarning = ({
     <ToastMessage type="warning" remove={remove}>
       <div className={styles.sectionSucceeded}>
         <div className={styles.sectionTitle}>
-          Payment scheduled for {resourcesSucceededCount} resources
+          Payment scheduled for{" "}
+          {formatPlural(resourcesSucceededCount, "resource")}
         </div>
       </div>
       <div className={styles.sectionFailed}>
         <div className={styles.sectionTitle}>
-          Failed to schedule payment for {resourcesFailedCount} resources
+          Failed to schedule payment for{" "}
+          {formatPlural(resourcesFailedCount, "resource")}
           {resourcesFailed && resourcesFailed.length ? ":" : ""}
         </div>
         {resourcesFailed && resourcesFailed.length && (

src/utils/formatters.js

@@ -71,6 +71,18 @@ export function formatPaymentStatus(status) {
   return paymentStatus;
 }
 
+/**
+ * Creates the string with the number of items and the word describing the item
+ * possibly in plural form.
+ *
+ * @param {number} count number of items
+ * @param {string} baseWord word describing the item
+ * @returns {string}
+ */
+export function formatPlural(count, baseWord) {
+  return `${count} ${baseWord}${count > 1 ? "s" : ""}`;
+}
+
 /**
  * Formats user handle link.
  *