@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -1,414 +1,455 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-export const styles = theme => ({
-  bankCard: {
-    position: 'relative',
-    width: 256,
-    height: 160,
-    borderRadius: 13
-  },
-  wallet: {
-    position: 'relative',
-    width: 256,
-    height: 160,
-    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)'
-  },
-  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))'
-  },
-  sepa: {
-    position: 'relative',
-    width: 256,
-    height: 160,
-    borderRadius: 3
-  },
-  logo: {
-    height: 36,
-    marginTop: 2
-  },
-  logoRight: {
-    float: 'right',
-    marginRight: 18
-  },
-  logoLeft: {
-    marginLeft: 18
-  },
-  logoMerchant: {
-    marginLeft: '-31px'
-  },
-  stripe: {
-    width: 96,
-    height: 40,
-    background: '#FFFFFF'
-  },
-  stripeTopRight: {
-    display: 'inline-block',
-    float: 'right',
-    marginTop: 11
-  },
-  stripeTopLeft: {
-    display: 'inline-block',
-    float: 'left',
-    marginTop: 11
-  },
-  stripeBottomLeft: {
-    display: 'inline-block',
-    float: 'left',
-    marginTop: 38
-  },
-  stripeGradient: {
-    width: 111,
-    height: 40
-  },
-  stripeGradientTopRight: {
-    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)',
-    marginTop: 11
-  },
-  stripeGradientBottomLeft: {
-    background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
-    marginTop: 38
-  },
-  labelMedium: {
-    display: 'block',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 10,
-    color: '#FFFFFF'
-  },
-  corporateNumberLabel: {
-    float: 'left',
-    marginTop: 5,
-    paddingLeft: 22,
-    height: 10,
-    width: 234
-  },
-  cardNumberLabel: {
-    float: 'left',
-    paddingLeft: 22,
-    height: 10,
-    width: 234,
-    marginBottom: 18
-  },
-  giftCardNumberLabel: {
-    float: 'left',
-    paddingLeft: 21,
-    height: 10,
-    width: 234,
-    marginTop: 25
-  },
-  ibanLabel: {
-    float: 'left',
-    marginTop: 23,
-    paddingLeft: 12,
-    height: 10,
-    width: 234
-  },
-  number: {
-    display: 'block',
-    float: 'left',
-    fontFamily: theme.typography.fontFamily,
-    color: '#FFFFFF'
-  },
-  cardNumber: {
-    fontSize: 18,
-    width: 235,
-    paddingLeft: 21,
-    marginTop: 16
-  },
-  giftCardNumber: {
-    fontSize: 18,
-    width: 235,
-    paddingLeft: 21,
-    marginBottom: 28
-  },
-  corporateNumber: {
-    fontSize: 18,
-    height: 25,
-    width: 234,
-    paddingLeft: 22,
-    marginBottom: 4
-  },
-  ibanNumber: {
-    fontSize: 14,
-    height: 16,
-    width: 256,
-    paddingLeft: 12,
-    marginBottom: 11
-  },
-  memberSince: {
-    display: 'block',
-    float: 'left',
-    paddingLeft: 22,
-    maxHeight: 19,
-    maxWidth: 52,
-    lineHeight: '9px',
-    textAlign: 'right',
-    verticalAlign: 'middle',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 8,
-    color: '#FFFFFF'
-  },
-  yearMember: {
-    display: 'block',
-    float: 'left',
-    marginLeft: 4,
-    marginTop: 2,
-    height: 19,
-    width: 33,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 14,
-    color: '#FFFFFF'
-  },
-  validThru: {
-    position: 'absolute',
-    right: 67,
-    bottom: 22,
-    display: 'block',
-    maxHeight: 19,
-    maxWidth: 35,
-    lineHeight: '9px',
-    textAlign: 'right',
-    verticalAlign: 'middle',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 8,
-    color: '#FFFFFF'
-  },
-  dateValid: {
-    position: 'absolute',
-    left: 192,
-    bottom: 20,
-    display: 'block',
-    height: 19,
-    width: 55,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 14,
-    color: '#FFFFFF'
-  },
-  labelLarge: {
-    display: 'block',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 13,
-    color: '#FFFFFF'
-  },
-  userNameCard: {
-    position: 'absolute',
-    left: 22,
-    bottom: 21,
-    height: 16,
-    width: 150
-  },
-  userNameSepa: {
-    position: 'absolute',
-    left: 12,
-    bottom: 21,
-    height: 16,
-    width: 150
-  },
-  userNameCorporate: {
-    float: 'left',
-    marginTop: 8,
-    paddingLeft: 22,
-    height: 16,
-    width: 234
-  },
-  userNameWallet: {
-    float: 'left',
-    marginTop: 54,
-    paddingLeft: 22,
-    height: 16,
-    width: 184
-  },
-  businessName: {
-    float: 'left',
-    paddingLeft: 22,
-    height: 16,
-    width: 234
-  },
-  labelDebitCredit: {
-    position: 'absolute',
-    right: 15,
-    bottom: 8,
-    height: 15,
-    fontWeight: '500'
-  },
-  corporateLabel: {
-    float: 'right',
-    marginRight: '-25px',
-    marginTop: 10,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 18,
-    fontWeight: '500'
-  }
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    bankCard: {
+      position: 'relative',
+      width: 256,
+      height: 160,
+      borderRadius: 13
+    },
+    wallet: {
+      position: 'relative',
+      width: 256,
+      height: 160,
+      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)'
+    },
+    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))'
+    },
+    sepa: {
+      position: 'relative',
+      width: 256,
+      height: 160,
+      borderRadius: 3
+    },
+    logo: {
+      height: 36,
+      marginTop: 2
+    },
+    logoRight: {
+      float: 'right',
+      marginRight: 18
+    },
+    logoLeft: {
+      marginLeft: 18
+    },
+    logoMerchant: {
+      marginLeft: '-31px'
+    },
+    stripe: {
+      width: 96,
+      height: 40,
+      background: '#FFFFFF'
+    },
+    stripeTopRight: {
+      display: 'inline-block',
+      float: 'right',
+      marginTop: 11
+    },
+    stripeTopLeft: {
+      display: 'inline-block',
+      float: 'left',
+      marginTop: 11
+    },
+    stripeBottomLeft: {
+      display: 'inline-block',
+      float: 'left',
+      marginTop: 38
+    },
+    stripeGradient: {
+      width: 111,
+      height: 40
+    },
+    stripeGradientTopRight: {
+      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)',
+      marginTop: 11
+    },
+    stripeGradientBottomLeft: {
+      background: 'linear-gradient(to left, rgba(0,255,0,0), #FFFFFF)',
+      marginTop: 38
+    },
+    labelMedium: {
+      display: 'block',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 10,
+      color: '#FFFFFF'
+    },
+    corporateNumberLabel: {
+      float: 'left',
+      marginTop: 5,
+      paddingLeft: 22,
+      height: 10,
+      width: 234
+    },
+    cardNumberLabel: {
+      float: 'left',
+      paddingLeft: 22,
+      height: 10,
+      width: 234,
+      marginBottom: 18
+    },
+    giftCardNumberLabel: {
+      float: 'left',
+      paddingLeft: 21,
+      height: 10,
+      width: 234,
+      marginTop: 25
+    },
+    ibanLabel: {
+      float: 'left',
+      marginTop: 23,
+      paddingLeft: 12,
+      height: 10,
+      width: 234
+    },
+    number: {
+      display: 'block',
+      float: 'left',
+      fontFamily: theme.typography.fontFamily,
+      color: '#FFFFFF'
+    },
+    cardNumber: {
+      fontSize: 18,
+      width: 235,
+      paddingLeft: 21,
+      marginTop: 16
+    },
+    giftCardNumber: {
+      fontSize: 18,
+      width: 235,
+      paddingLeft: 21,
+      marginBottom: 28
+    },
+    corporateNumber: {
+      fontSize: 18,
+      height: 25,
+      width: 234,
+      paddingLeft: 22,
+      marginBottom: 4
+    },
+    ibanNumber: {
+      fontSize: 14,
+      height: 16,
+      width: 256,
+      paddingLeft: 12,
+      marginBottom: 11
+    },
+    memberSince: {
+      display: 'block',
+      float: 'left',
+      paddingLeft: 22,
+      maxHeight: 19,
+      maxWidth: 52,
+      lineHeight: '9px',
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 8,
+      color: '#FFFFFF'
+    },
+    yearMember: {
+      display: 'block',
+      float: 'left',
+      marginLeft: 4,
+      marginTop: 2,
+      height: 19,
+      width: 33,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 14,
+      color: '#FFFFFF'
+    },
+    validThru: {
+      position: 'absolute',
+      right: 67,
+      bottom: 22,
+      display: 'block',
+      maxHeight: 19,
+      maxWidth: 35,
+      lineHeight: '9px',
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 8,
+      color: '#FFFFFF'
+    },
+    dateValid: {
+      position: 'absolute',
+      left: 192,
+      bottom: 20,
+      display: 'block',
+      height: 19,
+      width: 55,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 14,
+      color: '#FFFFFF'
+    },
+    labelLarge: {
+      display: 'block',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 13,
+      color: '#FFFFFF'
+    },
+    userNameCard: {
+      position: 'absolute',
+      left: 22,
+      bottom: 21,
+      height: 16,
+      width: 150
+    },
+    userNameSepa: {
+      position: 'absolute',
+      left: 12,
+      bottom: 21,
+      height: 16,
+      width: 150
+    },
+    userNameCorporate: {
+      float: 'left',
+      marginTop: 8,
+      paddingLeft: 22,
+      height: 16,
+      width: 234
+    },
+    userNameWallet: {
+      float: 'left',
+      marginTop: 54,
+      paddingLeft: 22,
+      height: 16,
+      width: 184
+    },
+    businessName: {
+      float: 'left',
+      paddingLeft: 22,
+      height: 16,
+      width: 234
+    },
+    labelDebitCredit: {
+      position: 'absolute',
+      right: 15,
+      bottom: 8,
+      height: 15,
+      fontWeight: '500'
+    },
+    corporateLabel: {
+      float: 'right',
+      marginRight: '-25px',
+      marginTop: 10,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 18,
+      fontWeight: '500'
+    }
+  };
+};
 
-class HiPaymentMeans extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.buildPaymentLayoutByType = () => {
-      const {
-        businessName,
-        cardNumber,
-        cardUser,
-        cardUserGender,
-        cardValidity,
-        classes,
-        colorPrimary,
-        colorSecondary,
-        credit,
-        logo,
-        logoMerchant,
-        svgPath,
-        theme,
-        translations,
-        type,
-        yearMember,
-        fallbackImage
-      } = this.props;
-      let formatNumber;
+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];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+        formatNumber = cardNumber && _this.formatCardNumber(cardNumber);
       } else if (type === 'open-invoice' || type === 'payment-reference' || type === 'credit-consumption' || type === 'realtime-banking') {
-        formatNumber = cardNumber && this.formatIBANNumber(cardNumber);
+        formatNumber = cardNumber && _this.formatIBANNumber(cardNumber);
       }
 
-      let color1 = colorPrimary;
-      let color2 = colorSecondary;
+      var color1 = colorPrimary;
+      var color2 = colorSecondary;
 
       if (!color1) {
         color1 = theme.palette.primary.main;
         color2 = theme.palette.primary.dark;
       }
 
-      let brandLogo = logo;
+      var brandLogo = logo;
 
       if (!brandLogo) {
-        brandLogo = `${svgPath}sans_logo_full.svg`;
+        brandLogo = "".concat(svgPath, "sans_logo_full.svg");
       }
 
-      let username = cardUser;
+      var username = cardUser;
 
       if (cardUserGender === 'F') {
-        username = `${translations.gender_female} ${cardUser}`;
+        username = "".concat(translations.gender_female, " ").concat(cardUser);
       } else if (cardUserGender === 'M') {
-        username = `${translations.gender_male} ${cardUser}`;
+        username = "".concat(translations.gender_male, " ").concat(cardUser);
       }
 
-      let creditDebit = null;
+      var creditDebit = null;
 
       if (translations.credit && translations.debit) {
         creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
       }
 
-      const imgComponent = React.createElement("img", {
+      var imgComponent = _react.default.createElement("img", {
         src: brandLogo,
         alt: '',
-        className: classNames(classes.logo, {
-          [classes.logoLeft]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0,
-          [classes.logoRight]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0
-        }),
-        onError: e => {
+        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 = `${fallbackImage}`;
+            e.target.src = "".concat(fallbackImage);
           } else {
             e.target.style.display = 'none';
           }
         }
       });
-      let cardLayout;
+
+      var cardLayout;
 
       switch (type) {
         case 'ewallet':
-          cardLayout = React.createElement("div", {
+          cardLayout = _react.default.createElement("div", {
             style: {
-              backgroundImage: `url("${svgPath}Wallet_shape.svg")`
+              backgroundImage: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
             },
             className: classes.walletShadow
-          }, React.createElement("div", {
+          }, _react.default.createElement("div", {
             style: {
-              background: `linear-gradient(${color1}, ${color2 || color1})`,
-              WebkitMask: `url("${svgPath}Wallet_shape.svg")`
+              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")"),
+              WebkitMask: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
             },
             className: classes.wallet
-          }, React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameWallet)
-          }, username), React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeBottomLeft)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
+          }, _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
+          }, 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.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
-              background: `linear-gradient(${color1}, ${color2 || color1})`
+              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), React.createElement("div", {
-            className: classNames(classes.number, classes.cardNumber)
-          }, formatNumber), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCard)
-          }, username), React.createElement("div", {
+          }, _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)
+          }, username), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"));
           break;
 
         case 'corporate':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
-              background: `linear-gradient(${color1}, ${color2 || color1})`
+              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, React.createElement("div", {
+          }, _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.createElement("div", {
-            className: classNames(classes.labelMedium, classes.corporateNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.number, classes.corporateNumber)
-          }, cardNumber), yearMember && React.createElement("div", {
+          }, "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.createElement("div", {
+          }, "Member Since"), _react.default.createElement("div", {
             className: classes.yearMember
-          }, yearMember), React.createElement("div", {
+          }, yearMember), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
-          }, "Valid Thru"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCorporate)
-          }, cardUser), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.businessName)
+          }, "Valid Thru"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate)
+          }, cardUser), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.businessName)
           }, businessName));
           break;
 
@@ -416,105 +457,105 @@ class HiPaymentMeans extends React.Component {
         case 'payment-reference':
         case 'credit-consumption':
         case 'realtime-banking':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.sepa, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.sepa, classes.shadow),
             style: {
-              background: `linear-gradient(${color1}, ${color2 || color1})`
+              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopLeft)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
-          }), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.ibanLabel)
-          }, "IBAN"), React.createElement("div", {
-            className: classNames(classes.number, classes.ibanNumber)
-          }, formatNumber), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameSepa)
-          }, username), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.labelDebitCredit)
+          }, _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)
+          }, username), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
           }, creditDebit));
           break;
 
         case 'prepaid-card':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
-              background: `url("${svgPath}Gift_shape.svg"), linear-gradient(${color1},
-                         ${color2 || color1})`
+              background: "url(\"".concat(svgPath, "Gift_shape.svg\"), linear-gradient(").concat(color1, ",\n                         ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, React.createElement("img", {
+          }, _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: classNames(classes.logo, classes.logoMerchant)
-          })), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.giftCardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.number, classes.giftCardNumber)
-          }, cardNumber), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.labelDebitCredit)
+            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.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
-              background: `linear-gradient(${color1}, ${color2 || color1})`
+              background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), React.createElement("div", {
-            className: classNames(classes.number, classes.cardNumber)
-          }, cardNumber), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCard)
-          }, username), React.createElement("div", {
+          }, _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)
+          }, username), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"));
       }
 
       return cardLayout;
-    };
-
-    this.formatCardNumber = cardNumber => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatCardNumber", function (cardNumber) {
       if (cardNumber.search(/X/g) >= 0) {
         cardNumber = cardNumber.replace(/X/g, '*');
       }
 
       if (cardNumber.search(' ') < 0) {
-        cardNumber = `${cardNumber.substring(0, 4)} ${cardNumber.substring(4, 8)} ${cardNumber.substring(8, 12)} ${cardNumber.substring(12, 16)}`;
+        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 = cardNumber => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatIBANNumber", function (cardNumber) {
       if (cardNumber.search(' ') < 0) {
-        cardNumber = `${cardNumber.substring(0, 4)} ${cardNumber.substring(4, 8)} ${cardNumber.substring(8, 12)}
-             ${cardNumber.substring(12, 16)} ${cardNumber.substring(16, 20)} ${cardNumber.substring(20, 26)}`;
+        cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), "\n             ").concat(cardNumber.substring(12, 16), " ").concat(cardNumber.substring(16, 20), " ").concat(cardNumber.substring(20, 26));
       }
 
       return cardNumber;
-    };
+    });
+    return _this;
   }
 
-  render() {
-    return this.buildPaymentLayoutByType();
-  }
-
-}
+  (0, _createClass2.default)(HiPaymentMeans, [{
+    key: "render",
+    value: function render() {
+      return this.buildPaymentLayoutByType();
+    }
+  }]);
+  return HiPaymentMeans;
+}(_react.default.Component);
 
-HiPaymentMeans.defaultProps = {
+(0, _defineProperty2.default)(HiPaymentMeans, "defaultProps", {
   cardUserGender: 'U',
   credit: true,
   translations: {
@@ -524,100 +565,12 @@ HiPaymentMeans.defaultProps = {
     gender_female: 'Mrs',
     gender_male: 'Mr'
   }
-};
-HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Nom de la société de l'utilisateur si affichage de type CORPORATE
-   */
-  businessName: PropTypes.string,
-
-  /**
-   * Numéro du moyen de paiement (CB, SEPA, etc)
-   */
-  cardNumber: PropTypes.string,
-
-  /**
-   * Utilisateur du moyen de paiement
-   */
-  cardUser: PropTypes.string,
-
-  /**
-   * Genre du card user
-   * F: female
-   * M: male
-   * U: unknown
-   */
-  cardUserGender: PropTypes.oneOf(['F', 'M', 'U']),
-
-  /**
-   * Validité du moyen de paiement
-   */
-  cardValidity: PropTypes.string,
-
-  /**
-   * Surcharge les classes du composant
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Couleur principal du moyen de paiement
-   */
-  colorPrimary: PropTypes.string,
-
-  /**
-   * Couleur secondaire du moyen de paiement (si dégradé)
-   */
-  colorSecondary: PropTypes.string,
-
-  /**
-   * Dans le cas d'un virement
-   * if TRUE, c'est un crédit (default)
-   * else FALSE, c'est un débit
-   */
-  credit: PropTypes.bool,
-
-  /**
-   * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
-   */
-  fallbackImage: PropTypes.string,
-
-  /**
-   * Logo du moyen de paiement
-   */
-  logo: PropTypes.string,
-
-  /**
-   * Logo du marchand dans le cas d'une carte cadeau
-   */
-  logoMerchant: PropTypes.string,
-
-  /**
-   * Chemin des svg du composant
-   */
-  svgPath: PropTypes.string,
-
-  /**
-   * Objet themes du composant
-   */
-  theme: PropTypes.object,
-
-  /**
-   * Objet de traductions du composant
-   */
-  translations: PropTypes.object,
-
-  /**
-   * Propriété utilisée pour discriminer les templates
-   */
-  type: PropTypes.string,
-
-  /**
-   * Année depuis laquelle l'utilisateur est membre dans le cas d'une carte CORPORATE
-   */
-  yearMember: PropTypes.string
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiPaymentMean',
   withTheme: true
-})(HiPaymentMeans);
+})(HiPaymentMeans);
+
+exports.default = _default;