Display inactive accounts, show updated card descriptions in filters

Author: Crecket

src/react/Components/FilterComponents/CardSelection.jsx

@@ -17,6 +17,7 @@ import FilterListIcon from "@material-ui/icons/FilterList";
 import { cardsUpdate } from "../../Actions/cards";
 import { addCardIdFilter, removeCardIdFilter, toggleCardIdFilter } from "../../Actions/filters";
 import { getCardTypeImage } from "../../Pages/Cards/CardListItem";
+import { getCardDescription } from "../../Functions/Utils";
 
 const styles = {
     listItem: {
@@ -100,12 +101,15 @@ class CardSelection extends React.Component {
         });
 
         const cardMenuItems = Object.keys(cards)
-            .filter(cardIndex => {
-                const card = cards[cardIndex];
-                if (card && card.status !== "ACTIVE") {
-                    return false;
-                }
-                return true;
+            // put inactive cards at the bottom
+            .sort((index1, index2) => {
+                const card1 = cards[index1];
+                const card2 = cards[index2];
+
+                if (card1.status !== "ACTIVE" && card2.status === "ACTIVE") return 1;
+                if (card1.status === "ACTIVE" && card2.status !== "ACTIVE") return -1;
+
+                return 0;
             })
             .map((cardIndex, key) => {
                 const card = cards[cardIndex];
@@ -114,14 +118,16 @@ class CardSelection extends React.Component {
                 if (selectedCardIds.includes(card.id)) {
                     return null;
                 }
+
+                const cardDescription = getCardDescription(card);
                 const { cardImage, cardType } = getCardTypeImage(card.type, card.cardType);
 
                 return (
                     <MenuItem key={key} onClick={this.addCardId(card.id)}>
                         <ListItemIcon style={styles.listItemIcon}>
                             <img style={styles.listItemImg} src={cardImage} />
                         </ListItemIcon>
-                        {card.second_line || cardType}
+                        {cardDescription || cardType}
                     </MenuItem>
                 );
             });

src/react/Functions/Utils.js

@@ -246,6 +246,30 @@ export const humanReadableDate = (date, displayHoursMins = true, localization =
     return `${createDate.getDate()} ${month} ${hoursMinutes}`;
 };
 
+export const getCardDescription = card => {
+    let second_line = card.second_line;
+    console.log(card, second_line);
+    const primaryNumbers = card.primary_account_numbers;
+    if (primaryNumbers && primaryNumbers.length > 0) {
+        // if no status is set or status is ACTIVE use alternative second line
+        const firstActivePrimaryNumber = primaryNumbers.find(primaryNumber => {
+            if (!primaryNumber.status) return true;
+            return primaryNumber.status === "ACTIVE";
+        });
+
+        if (firstActivePrimaryNumber) {
+            second_line = firstActivePrimaryNumber.description;
+        }
+    } else if (second_line.length === 0 && card.type === "MAESTRO_MOBILE_NFC") {
+        second_line = "Apple Pay";
+    }
+
+    console.log(card, second_line);
+    console.log("");
+
+    return second_line || card.type;
+};
+
 /**
  * Adds space every fourth character for IBAN numbers
  * @param iban

src/react/Pages/Cards/Cards.jsx

@@ -23,6 +23,7 @@ import VirtualAccountNumbersDialog from "./VirtualAccountNumbersDialog";
 import TranslateTypography from "../../Components/TranslationHelpers/Typography";
 import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
 
+import { getCardDescription } from "../../Functions/Utils";
 import { cardStatus, cardOrderStatus } from "../../Functions/EventStatusTexts";
 import { cardsUpdate, cardsSetCardOrder, cardsAssignAccounts } from "../../Actions/cards";
 
@@ -290,21 +291,7 @@ class Cards extends React.Component {
         const translateOffset = selectedCardIndex * 410;
         const carouselTranslate = "translateY(-" + translateOffset + "px)";
 
-        let second_line = cardInfo.second_line;
-        const primaryNumbers = cardInfo.primary_account_numbers;
-        if (primaryNumbers && primaryNumbers.length > 0) {
-            // if no status is set or status is ACTIVE use alternative second line
-            const firstActivePrimaryNumber = primaryNumbers.find(primaryNumber => {
-                if (!primaryNumber.status) return true;
-                return primaryNumber.status === "ACTIVE";
-            });
-
-            if (firstActivePrimaryNumber) {
-                second_line = firstActivePrimaryNumber.description;
-            }
-        } else if (second_line.length === 0 && cardInfo.type === "MAESTRO_MOBILE_NFC") {
-            second_line = "Apple Pay";
-        }
+        const cardDescription = getCardDescription(cardInfo);
 
         const primaryAssignment = cardInfo.pin_code_assignment.find(assignment => {
             return assignment.type === "PRIMARY";
@@ -382,7 +369,7 @@ class Cards extends React.Component {
                                 <Grid container spacing={16}>
                                     <Grid item xs={12} sm={6}>
                                         <Typography variant="h6">{cardInfo.name_on_card}</Typography>
-                                        <Typography variant="subtitle1">{second_line}</Typography>
+                                        <Typography variant="subtitle1">{cardDescription}</Typography>
                                     </Grid>
                                     <Grid item xs={12} sm={6}>
                                         <Typography variant="body1" style={{ textAlign: "right" }}>