Add switch case for green card types

Author: Crecket

src/react/Components/FilterComponents/CardSelection.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import Chip from "@material-ui/core/Chip";
-import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
@@ -87,7 +86,7 @@ class CardSelection extends React.Component {
             // ensure card exists
             if (!card) return null;
             card = card;
-            const { cardImage, cardType } = getCardTypeImage(card.type, card.cardType);
+            const { cardImage, cardType } = getCardTypeImage(card);
 
             // display big chip or smaller icon
             return (
@@ -120,7 +119,7 @@ class CardSelection extends React.Component {
                 }
 
                 const cardDescription = getCardDescription(card);
-                const { cardImage, cardType } = getCardTypeImage(card.type, card.cardType);
+                const { cardImage, cardType } = getCardTypeImage(card);
 
                 return (
                     <MenuItem key={key} onClick={this.addCardId(card.id)}>

src/react/Pages/Cards/CardListItem.jsx

@@ -9,15 +9,29 @@ const styles = {
     cardImage: {}
 };
 
-export const getCardTypeImage = (type, apiType = "CardDebit") => {
+export const getCardTypeImage = (card) => {
+    const type = card.type;
+    const productType = card.product_type;
+    let cardType = card.cardType;
+
     let cardImage = null;
-    let cardType = null;
     switch (type) {
         case "MASTERCARD": {
-            switch (apiType) {
+            // check the different physical mastercard types
+            switch (cardType) {
                 case "CardCredit":
-                    cardType = "MasterCard Credit";
-                    cardImage = "images/bunq-mastercard-credit.png";
+                    // check the different credit card types
+                    switch (productType) {
+                        case "MASTERCARD_GREEN":
+                            cardType = "MasterCard Green";
+                            cardImage = "images/bunq-mastercard-metal.png";
+                            break;
+                        default:
+                        case "MASTERCARD_TRAVEL":
+                            cardType = "MasterCard Credit";
+                            cardImage = "images/bunq-mastercard-credit.png";
+                            break;
+                    }
                     break;
                 default:
                 case "CardDebit":
@@ -55,7 +69,7 @@ class CardListItem extends React.Component {
 
     render() {
         const card = this.props.card;
-        const { cardImage } = getCardTypeImage(card.type, card.cardType);
+        const { cardImage } = getCardTypeImage(card);
 
         return [
             <div className="single-card" style={styles.cardWrapper} onClick={this.props.onClick}>