Make authorizations more obvious (#503)

Author: Crecket

src/react/Components/MoneyAmountLabel.jsx

@@ -116,6 +116,7 @@ class MoneyAmountLabel extends React.Component {
                     color: theme.palette.masterCardAction.authorized,
                     ...style
                 };
+            case "REVERSED":
             case "BLOCKED":
                 return {
                     color: theme.palette.masterCardAction.blocked,

src/react/Functions/EventStatusTexts.js

@@ -92,6 +92,8 @@ export const paymentTypeParser = (paymentType, t) => {
 };
 
 export const masterCardActionText = (masterCardAction, t) => {
+    const reversedText = t("The payment was reversed");
+
     switch (masterCardAction.authorisation_status) {
         case "AUTHORISED":
             return `${t("Sent payment with ")}${masterCardActionParser(masterCardAction, t)}`;
@@ -103,23 +105,50 @@ export const masterCardActionText = (masterCardAction, t) => {
             }
             return t("Payment was refunded");
         case "REVERSED":
-            return t("The payment was reversed");
+            const authorisationTypeText = masterCardActionAuthorisationType(masterCardAction.authorisation_type, t);
+            if (authorisationTypeText) {
+                return `${reversedText}: ${authorisationTypeText}`;
+            }
+            return reversedText;
         default:
             return `${t("The payment currently has the status ")}${masterCardAction.authorisation_status} - ${
                 masterCardAction.authorisation_type
             }`;
     }
 };
 
+export const masterCardActionAuthorisationType = (authorisationType, t) => {
+    const authorisationPayment = t("Authorisation payment");
+
+    switch (authorisationType) {
+        case "ACCOUNT_STATUS":
+        case "NORMAL_AUTHORISATION":
+            return authorisationPayment;
+        default:
+            return "";
+    }
+};
+
 export const masterCardActionParser = (masterCardAction, t) => {
     const defaultMessage = t("Card payment");
     const paymentText = t("Payment");
     const refundText = t("Refund");
+    const reversedText = t("Reversed");
+    const authorisationPayment = t("Authorisation");
     const atmText = t("ATM Withdrawal");
 
     let secondaryText = paymentText;
     if (masterCardAction.authorisation_status === "CLEARING_REFUND") {
         secondaryText = refundText;
+    } else if (masterCardAction.authorisation_status === "REVERSED") {
+        if (
+            masterCardAction.authorisation_type === "NORMAL_AUTHORISATION" ||
+            masterCardAction.authorisation_type === "ACCOUNT_STATUS"
+        ) {
+            secondaryText = authorisationPayment;
+        } else {
+            secondaryText = reversedText;
+        }
     }
 
     if (masterCardAction.pan_entry_mode_user === "ATM") {

src/react/Locales/en.json

@@ -43,8 +43,10 @@
 	"Attempting to load your API key": "Attempting to load your API key",
 	"Attention!": "Attention!",
 	"Authenticate": "Authenticate",
+	"Authorisation": "Authorisation",
 	"Authorisation Status": "Authorisation Status",
 	"Authorisation Type": "Authorisation Type",
+	"Authorisation payment": "Authorisation payment",
 	"Automatically switch theme based on the time": "Automatically switch theme based on the time",
 	"Available": "Available",
 	"Available merchants": "Available merchants",
@@ -433,6 +435,7 @@
 	"Restart the application to start without Google Analytics!": "Restart the application to start without Google Analytics!",
 	"Restart the application to view these changes!": "Restart the application to view these changes!",
 	"Return to dashboard": "Return to dashboard",
+	"Reversed": "Reversed",
 	"Rule Dashboard": "Rule Dashboard",
 	"Rule Editor": "Rule Editor",
 	"Rules": "Rules",
@@ -694,4 +697,4 @@
 	"weeks": "weeks",
 	"year": "year",
 	"years": "years"
-}
+}