@hipay/hipay-material-ui 3.5.1 → 3.6.0-rc1

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -1,60 +1,99 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.useStyles = exports.formatReferenceNumber = exports.formatIBANNumber = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var formatCardNumber = function formatCardNumber(cardNumber) {
+  cardNumber = cardNumber.replace(/X/g, "*");
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+  if (cardNumber.search(" ") < 0) {
+    cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), " ").concat(cardNumber.substring(12, 16));
+  }
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+  return cardNumber;
+};
+/**
+ * Format number with group of $size char
+ * ie : ("123456789", 4) => "1234 5678 9"
+ */
 
-var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var formatNumber = function formatNumber(number) {
+  var digitGroupLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  // 1) remove spaces
+  var res = number.replace(/\s/g, ""); // 2) add space each 4 chars
 
-var _react = _interopRequireDefault(require("react"));
+  return (0, _toConsumableArray2.default)(res).map(function (char, index) {
+    return index > 0 && index % digitGroupLength === 0 ? " ".concat(char) : char;
+  }).join("");
+};
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var CREDIT_CARD = "credit-card";
+var DEBIT_CARD = "debit-card";
+var PREPAID_CARD = "prepraid-card";
+var OPEN_INVOICE = "open-invoice";
+var CREDIT_CONSUMPTION = "credit-consumption";
+var REALTIME_BANKING = "realtime-banking";
+var PAYMENT_REFERENCE = "payment-reference";
+var EWALLET = "ewallet";
+
+var formatIBANNumber = function formatIBANNumber(value) {
+  return formatNumber(value, 4);
+};
 
-var _styles = require("@material-ui/core/styles");
+exports.formatIBANNumber = formatIBANNumber;
+
+var formatReferenceNumber = function formatReferenceNumber(value) {
+  return formatNumber(value, 3);
+};
 
-var styles = function styles(theme) {
+exports.formatReferenceNumber = formatReferenceNumber;
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     bankCard: {
-      position: 'relative',
+      position: "relative",
       width: 256,
       height: 160,
       borderRadius: 13
     },
     wallet: {
-      position: 'relative',
+      position: "relative",
       width: 256,
       height: 160,
-      filter: 'drop-shadow(30px 10px 4px #4444dd)',
-      webkitFilter: 'drop-shadow(30px 10px 4px #4444dd)'
+      filter: "drop-shadow(30px 10px 4px #4444dd)",
+      webkitFilter: "drop-shadow(30px 10px 4px #4444dd)"
     },
     shadow: {
-      boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.24)'
+      boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.24)"
     },
     walletShadow: {
       width: 256,
       height: 160,
-      backgroundSize: '100%',
-      filter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))',
-      webkitFilter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))',
-      mozFilter: 'drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))'
+      backgroundSize: "100%",
+      filter: "drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))",
+      webkitFilter: "drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))",
+      mozFilter: "drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.24))"
     },
     sepa: {
-      position: 'relative',
+      position: "relative",
       width: 256,
       height: 160,
       borderRadius: 3
@@ -64,33 +103,33 @@ var styles = function styles(theme) {
       marginTop: 2
     },
     logoRight: {
-      float: 'right',
+      float: "right",
       marginRight: 18
     },
     logoLeft: {
       marginLeft: 18
     },
     logoMerchant: {
-      marginLeft: '-31px'
+      marginLeft: "-31px"
     },
     stripe: {
       width: 96,
       height: 40,
-      background: '#FFFFFF'
+      background: "#FFFFFF"
     },
     stripeTopRight: {
-      display: 'inline-block',
-      float: 'right',
+      display: "inline-block",
+      float: "right",
       marginTop: 11
     },
     stripeTopLeft: {
-      display: 'inline-block',
-      float: 'left',
+      display: "inline-block",
+      float: "left",
       marginTop: 11
     },
     stripeBottomLeft: {
-      display: 'inline-block',
-      float: 'left',
+      display: "inline-block",
+      float: "left",
       marginTop: 38
     },
     stripeGradient: {
@@ -98,74 +137,74 @@ var styles = function styles(theme) {
       height: 40
     },
     stripeGradientTopRight: {
-      background: 'linear-gradient(to right, rgba(0,255,0,0), #FFFFFF)',
+      background: "linear-gradient(to right, rgba(0,255,0,0), #FFFFFF)",
       marginTop: 11
     },
     stripeGradientTopLeft: {
-      background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
+      background: "linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)",
       marginTop: 11
     },
     stripeGradientBottomLeft: {
-      background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
+      background: "linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)",
       marginTop: 38
     },
     labelMedium: {
-      display: 'block',
+      display: "block",
       fontFamily: theme.typography.fontFamily,
       fontSize: 10,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     corporateNumberLabel: {
-      float: 'left',
+      float: "left",
       marginTop: 5,
       paddingLeft: 22,
       height: 10,
       width: 234
     },
     cardNumberLabel: {
-      float: 'left',
+      float: "left",
       paddingLeft: 22,
       height: 10,
       width: 234,
       marginBottom: 18
     },
     giftCardNumberLabel: {
-      float: 'left',
+      float: "left",
       paddingLeft: 21,
       height: 10,
       width: 234,
       marginTop: 25
     },
     ibanLabel: {
-      float: 'left',
+      float: "left",
       marginTop: 23,
       paddingLeft: 12,
       height: 10,
       width: 234
     },
     number: {
-      display: 'block',
-      float: 'left',
+      display: "block",
+      float: "left",
       fontFamily: theme.typography.fontFamily,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     cardNumber: {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
       marginTop: 16,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     giftCardNumber: {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
       marginBottom: 28,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     corporateNumber: {
       fontSize: 18,
@@ -173,9 +212,9 @@ var styles = function styles(theme) {
       width: 234,
       paddingLeft: 22,
       marginBottom: 4,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     ibanNumber: {
       fontSize: 14,
@@ -183,420 +222,353 @@ var styles = function styles(theme) {
       width: 256,
       paddingLeft: 12,
       marginBottom: 11,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     memberSince: {
-      display: 'block',
-      float: 'left',
+      display: "block",
+      float: "left",
       paddingLeft: 22,
       maxHeight: 19,
       maxWidth: 52,
-      lineHeight: '9px',
-      textAlign: 'right',
-      verticalAlign: 'middle',
+      lineHeight: "9px",
+      textAlign: "right",
+      verticalAlign: "middle",
       fontFamily: theme.typography.fontFamily,
       fontSize: 8,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     yearMember: {
-      display: 'block',
-      float: 'left',
+      display: "block",
+      float: "left",
       marginLeft: 4,
       marginTop: 2,
       height: 19,
       width: 33,
       fontFamily: theme.typography.fontFamily,
       fontSize: 14,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     validThru: {
-      position: 'absolute',
+      position: "absolute",
       right: 67,
       bottom: 22,
-      display: 'block',
+      display: "block",
       maxHeight: 19,
       maxWidth: 35,
-      lineHeight: '9px',
-      textAlign: 'right',
-      verticalAlign: 'middle',
+      lineHeight: "9px",
+      textAlign: "right",
+      verticalAlign: "middle",
       fontFamily: theme.typography.fontFamily,
       fontSize: 8,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     dateValid: {
-      position: 'absolute',
+      position: "absolute",
       left: 192,
       bottom: 20,
-      display: 'block',
+      display: "block",
       height: 19,
       width: 55,
       fontFamily: theme.typography.fontFamily,
       fontSize: 14,
-      color: '#FFFFFF'
+      color: "#FFFFFF"
     },
     labelLarge: {
-      display: 'block',
+      display: "block",
       fontFamily: theme.typography.fontFamily,
       fontSize: 13,
-      color: '#FFFFFF',
+      color: "#FFFFFF",
       overflow: "hidden",
       whiteSpace: "nowrap",
       textOverflow: "ellipsis"
     },
     userNameCard: {
-      position: 'absolute',
+      position: "absolute",
       left: 22,
       bottom: 21,
       height: 16,
       width: 150
     },
     userNameSepa: {
-      position: 'absolute',
+      position: "absolute",
       left: 12,
       bottom: 21,
       height: 16,
       width: 150
     },
     userNameCorporate: {
-      float: 'left',
+      float: "left",
       marginTop: 8,
       paddingLeft: 22,
       height: 16,
       width: 234
     },
     userNameWallet: {
-      float: 'left',
+      float: "left",
       marginTop: 54,
       paddingLeft: 22,
       height: 16,
       width: 184
     },
     businessName: {
-      float: 'left',
+      float: "left",
       paddingLeft: 22,
       height: 16,
       width: 234
     },
     labelDebitCredit: {
-      position: 'absolute',
+      position: "absolute",
       right: 15,
       bottom: 8,
       height: 15,
-      fontWeight: '500'
+      fontWeight: "500"
     },
     corporateLabel: {
-      float: 'right',
-      marginRight: '-25px',
+      float: "right",
+      marginRight: "-25px",
       marginTop: 10,
       fontFamily: theme.typography.fontFamily,
       fontSize: 18,
-      fontWeight: '500'
+      fontWeight: "500"
     }
   };
-};
-
-exports.styles = styles;
-
-var HiPaymentMeans =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(HiPaymentMeans, _React$Component);
-
-  function HiPaymentMeans() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HiPaymentMeans);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+});
+exports.useStyles = useStyles;
+
+var HiPaymentMeans = function HiPaymentMeans(props) {
+  var businessName = props.businessName,
+      cardNumber = props.cardNumber,
+      cardUser = props.cardUser,
+      cardUserGender = props.cardUserGender,
+      cardValidity = props.cardValidity,
+      colorPrimary = props.colorPrimary,
+      colorSecondary = props.colorSecondary,
+      credit = props.credit,
+      logo = props.logo,
+      logoMerchant = props.logoMerchant,
+      svgPath = props.svgPath,
+      translations = props.translations,
+      type = props.type,
+      yearMember = props.yearMember,
+      fallbackImage = props.fallbackImage;
+  var classes = useStyles(props);
+  var theme = (0, _styles.useTheme)();
+  var formatNumber = (0, _react.useMemo)(function () {
+    if ([CREDIT_CARD, DEBIT_CARD, PREPAID_CARD].includes(type)) {
+      return cardNumber && formatCardNumber(cardNumber);
     }
 
-    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.buildPaymentLayoutByType = function () {
-      var _classNames;
-
-      var _this$props = _this.props,
-          businessName = _this$props.businessName,
-          cardNumber = _this$props.cardNumber,
-          cardUser = _this$props.cardUser,
-          cardUserGender = _this$props.cardUserGender,
-          cardValidity = _this$props.cardValidity,
-          classes = _this$props.classes,
-          colorPrimary = _this$props.colorPrimary,
-          colorSecondary = _this$props.colorSecondary,
-          credit = _this$props.credit,
-          logo = _this$props.logo,
-          logoMerchant = _this$props.logoMerchant,
-          svgPath = _this$props.svgPath,
-          theme = _this$props.theme,
-          translations = _this$props.translations,
-          type = _this$props.type,
-          yearMember = _this$props.yearMember,
-          fallbackImage = _this$props.fallbackImage;
-      var formatNumber;
-
-      if (type === 'credit-card' || type === 'debit-card' || type === 'prepaid-card') {
-        formatNumber = cardNumber && _this.formatCardNumber(cardNumber);
-      } else if (type === 'open-invoice' || type === 'payment-reference' || type === 'credit-consumption' || type === 'realtime-banking') {
-        formatNumber = cardNumber && _this.formatIBANNumber(cardNumber);
-      }
-
-      var color1 = colorPrimary;
-      var color2 = colorSecondary;
+    if ([OPEN_INVOICE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type)) {
+      return cardNumber && formatIBANNumber(cardNumber);
+    }
 
-      if (!color1) {
-        color1 = theme.palette.primary.main;
-        color2 = theme.palette.primary.dark;
-      }
+    if (PAYMENT_REFERENCE === type) {
+      return cardNumber && formatReferenceNumber(cardNumber);
+    }
 
-      var brandLogo = logo;
+    return cardNumber;
+  }, [type, cardNumber]);
 
-      if (!brandLogo) {
-        brandLogo = "".concat(svgPath, "sans_logo_full.svg");
-      }
+  var _ref = colorPrimary ? [colorPrimary, colorSecondary] : [theme.palette.primary.main, theme.palette.primary.dark],
+      _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      color1 = _ref2[0],
+      color2 = _ref2[1];
 
-      var username = cardUser;
+  var username = cardUser;
 
-      if (cardUserGender === 'F') {
-        username = "".concat(translations.gender_female, " ").concat(cardUser);
-      } else if (cardUserGender === 'M') {
-        username = "".concat(translations.gender_male, " ").concat(cardUser);
-      }
+  if (cardUserGender === "F") {
+    username = "".concat(translations.gender_female, " ").concat(cardUser);
+  } else if (cardUserGender === "M") {
+    username = "".concat(translations.gender_male, " ").concat(cardUser);
+  }
 
-      var creditDebit = null;
+  var creditDebit = null;
 
-      if (translations.credit && translations.debit) {
-        creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
-      }
+  if (translations.credit && translations.debit) {
+    creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
+  }
 
-      var imgComponent = _react.default.createElement("img", {
-        src: brandLogo,
-        alt: '',
-        className: (0, _classnames.default)(classes.logo, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.logoLeft, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0), (0, _defineProperty2.default)(_classNames, classes.logoRight, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0), _classNames)),
-        onError: function onError(e) {
-          if (fallbackImage) {
-            e.target.src = "".concat(fallbackImage);
-          } else {
-            e.target.style.display = 'none';
-          }
+  var imgComponent = (0, _react.useMemo)(function () {
+    var _classNames;
+
+    return _react.default.createElement("img", {
+      src: logo || "".concat(svgPath, "sans_logo_full.svg"),
+      alt: "",
+      className: (0, _classnames.default)(classes.logo, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.logoLeft, [EWALLET, OPEN_INVOICE, PAYMENT_REFERENCE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type)), (0, _defineProperty2.default)(_classNames, classes.logoRight, ![EWALLET, OPEN_INVOICE, PAYMENT_REFERENCE, CREDIT_CONSUMPTION, REALTIME_BANKING].includes(type)), _classNames)),
+      onError: function onError(e) {
+        if (fallbackImage) {
+          e.target.src = fallbackImage;
+        } else {
+          e.target.style.display = "none";
         }
-      });
-
-      var cardLayout;
-
-      switch (type) {
-        case 'ewallet':
-          cardLayout = _react.default.createElement("div", {
-            style: {
-              backgroundImage: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
-            },
-            className: classes.walletShadow
-          }, _react.default.createElement("div", {
-            style: {
-              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")"),
-              WebkitMask: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
-            },
-            className: classes.wallet
-          }, _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet),
-            title: username
-          }, username), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
-          })));
-          break;
-
-        case 'credit-card':
-        case 'debit-card':
-          cardLayout = _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
-            style: {
-              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-            }
-          }, _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.number, classes.cardNumber)
-          }, formatNumber), cardNumber && _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
-            title: username
-          }, username), _react.default.createElement("div", {
-            className: classes.dateValid
-          }, cardValidity), cardValidity && _react.default.createElement("div", {
-            className: classes.validThru
-          }, "Valid Thru"));
-          break;
-
-        case 'corporate':
-          cardLayout = _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
-            style: {
-              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-            }
-          }, _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, _react.default.createElement("div", {
-            className: classes.corporateLabel,
-            style: {
-              color: color1
-            }
-          }, "CORPORATE")), cardNumber && _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelMedium, classes.corporateNumberLabel)
-          }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.number, classes.corporateNumber)
-          }, cardNumber), yearMember && _react.default.createElement("div", {
-            className: classes.memberSince
-          }, "Member Since"), _react.default.createElement("div", {
-            className: classes.yearMember
-          }, yearMember), _react.default.createElement("div", {
-            className: classes.dateValid
-          }, cardValidity), cardValidity && _react.default.createElement("div", {
-            className: classes.validThru
-          }, "Valid Thru"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate),
-            title: cardUser
-          }, cardUser), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.businessName),
-            title: businessName
-          }, businessName));
-          break;
-
-        case 'open-invoice':
-        case 'payment-reference':
-        case 'credit-consumption':
-        case 'realtime-banking':
-          cardLayout = _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.sepa, classes.shadow),
-            style: {
-              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-            }
-          }, _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
-          }), cardNumber && _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
-          }, "IBAN"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.number, classes.ibanNumber)
-          }, formatNumber), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
-            title: username
-          }, username), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
-          }, creditDebit));
-          break;
-
-        case 'prepaid-card':
-          cardLayout = _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
-            style: {
-              background: "url(\"".concat(svgPath, "Gift_shape.svg\"), linear-gradient(").concat(color1, ",\n                         ").concat(color2 || color1, ")")
-            }
-          }, _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, _react.default.createElement("img", {
-            src: logoMerchant,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoMerchant)
-          })), cardNumber && _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelMedium, classes.giftCardNumberLabel)
-          }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.number, classes.giftCardNumber)
-          }, cardNumber), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
-          }, translations.gift_card));
-          break;
-
-        default:
-          cardLayout = _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
-            style: {
-              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
-            }
-          }, _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), _react.default.createElement("span", {
-            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.number, classes.cardNumber)
-          }, cardNumber), cardNumber && _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
-            title: username
-          }, username), _react.default.createElement("div", {
-            className: classes.dateValid
-          }, cardValidity), cardValidity && _react.default.createElement("div", {
-            className: classes.validThru
-          }, "Valid Thru"));
-      }
-
-      return cardLayout;
-    };
-
-    _this.formatCardNumber = function (cardNumber) {
-      if (cardNumber.search(/X/g) >= 0) {
-        cardNumber = cardNumber.replace(/X/g, '*');
-      }
-
-      if (cardNumber.search(' ') < 0) {
-        cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), " ").concat(cardNumber.substring(12, 16));
       }
-
-      return cardNumber;
-    };
-
-    _this.formatIBANNumber = function (iban) {
-      // 1) remove spaces
-      var res = iban.replace(/\s/g, ''); // 2) add space each 4 chars
-
-      return (0, _toConsumableArray2.default)(res).map(function (char, index) {
-        return index > 0 && index % 4 === 0 ? ' ' + char : char;
-      }).join('');
-    };
-
-    return _this;
+    });
+  }, [classes, fallbackImage, logo, type, svgPath]); // RENDER
+
+  switch (type) {
+    case EWALLET:
+      return _react.default.createElement("div", {
+        className: classes.walletShadow,
+        style: {
+          backgroundImage: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
+        }
+      }, _react.default.createElement("div", {
+        className: classes.wallet,
+        style: {
+          background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")"),
+          WebkitMask: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
+        }
+      }, _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet),
+        title: username
+      }, username), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
+      })));
+
+    case "credit-card":
+    case "debit-card":
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.bankCard, classes.shadow),
+        style: {
+          background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
+        }
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.number, classes.cardNumber)
+      }, formatNumber), cardNumber && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
+      }, "Card number"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+        title: username
+      }, username), _react.default.createElement("div", {
+        className: classes.dateValid
+      }, cardValidity), cardValidity && _react.default.createElement("div", {
+        className: classes.validThru
+      }, "Valid Thru"));
+
+    case "corporate":
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.bankCard, classes.shadow),
+        style: {
+          background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
+        }
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+      }, _react.default.createElement("div", {
+        className: classes.corporateLabel,
+        style: {
+          color: color1
+        }
+      }, "CORPORATE")), cardNumber && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelMedium, classes.corporateNumberLabel)
+      }, "Card number"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.number, classes.corporateNumber)
+      }, cardNumber), yearMember && _react.default.createElement("div", {
+        className: classes.memberSince
+      }, "Member Since"), _react.default.createElement("div", {
+        className: classes.yearMember
+      }, yearMember), _react.default.createElement("div", {
+        className: classes.dateValid
+      }, cardValidity), cardValidity && _react.default.createElement("div", {
+        className: classes.validThru
+      }, "Valid Thru"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate),
+        title: cardUser
+      }, cardUser), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.businessName),
+        title: businessName
+      }, businessName));
+
+    case OPEN_INVOICE:
+    case PAYMENT_REFERENCE:
+    case CREDIT_CONSUMPTION:
+    case REALTIME_BANKING:
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.sepa, classes.shadow),
+        style: {
+          background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
+        }
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
+      }), cardNumber && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
+      }, PAYMENT_REFERENCE === type ? "REFERENCE" : "IBAN"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.number, classes.ibanNumber)
+      }, formatNumber), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
+        title: username
+      }, username), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
+      }, creditDebit));
+
+    case "prepaid-card":
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.bankCard, classes.shadow),
+        style: {
+          background: "url(\"".concat(svgPath, "Gift_shape.svg\"), linear-gradient(").concat(color1, ", ").concat(color2 || color1, ")")
+        }
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+      }, _react.default.createElement("img", {
+        src: logoMerchant,
+        alt: "",
+        className: (0, _classnames.default)(classes.logo, classes.logoMerchant)
+      })), cardNumber && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelMedium, classes.giftCardNumberLabel)
+      }, "Card number"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.number, classes.giftCardNumber)
+      }, cardNumber), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
+      }, translations.gift_card));
+
+    default:
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.bankCard, classes.shadow),
+        style: {
+          background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
+        }
+      }, _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+      }, imgComponent), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.number, classes.cardNumber)
+      }, cardNumber), cardNumber && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
+      }, "Card number"), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+        title: username
+      }, username), _react.default.createElement("div", {
+        className: classes.dateValid
+      }, cardValidity), cardValidity && _react.default.createElement("div", {
+        className: classes.validThru
+      }, "Valid Thru"));
   }
-
-  (0, _createClass2.default)(HiPaymentMeans, [{
-    key: "render",
-    value: function render() {
-      return this.buildPaymentLayoutByType();
-    }
-  }]);
-  return HiPaymentMeans;
-}(_react.default.Component);
+};
 
 HiPaymentMeans.defaultProps = {
-  cardUserGender: 'U',
+  cardUserGender: "U",
   credit: true,
   translations: {
-    credit: 'credit',
-    debit: 'debit',
-    gift_card: 'GIFT CARD',
-    gender_female: 'Mrs',
-    gender_male: 'Mr'
+    credit: "credit",
+    debit: "debit",
+    gift_card: "GIFT CARD",
+    gender_female: "Mrs",
+    gender_male: "Mr"
   }
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiPaymentMean',
-  withTheme: true
-})(HiPaymentMeans);
-
+var _default = HiPaymentMeans;
 exports.default = _default;