@hipay/hipay-material-ui 2.0.0-beta.72 → 2.0.0-beta.74

package/HiPaymentMeans/HiPaymentMeans.js

@@ -0,0 +1,666 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../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'
+    }
+  };
+};
+
+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)));
+
+    _this.buildPaymentLayoutByType = function () {
+      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;
+      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 (!color1) {
+        color1 = theme.palette.primary.main;
+        color2 = theme.palette.primary.dark;
+      }
+
+      var brandLogo = logo;
+
+      if (!brandLogo) {
+        brandLogo = "".concat(svgPath, "sans_logo_full.svg");
+      }
+
+      var username = cardUser;
+
+      if (cardUserGender === 'F') {
+        username = "".concat(translations.gender_female, " ").concat(cardUser);
+      } else if (cardUserGender === 'M') {
+        username = "".concat(translations.gender_male, " ").concat(cardUser);
+      }
+
+      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)
+          }, username), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
+          })), _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)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoRight)
+          })), _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.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)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoRight)
+          })), _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)
+          }, cardUser), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.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)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
+          })), _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)
+          }, (credit ? translations.credit : translations.debit).toUpperCase()));
+          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)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoRight)
+          })), _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)
+          }, _react.default.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: (0, _classnames.default)(classes.logo, classes.logoRight)
+          })), _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.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 (cardNumber) {
+      if (cardNumber.search(' ') < 0) {
+        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;
+  }
+
+  (0, _createClass2.default)(HiPaymentMeans, [{
+    key: "render",
+    value: function render() {
+      return this.buildPaymentLayoutByType();
+    }
+  }]);
+  return HiPaymentMeans;
+}(_react.default.Component);
+
+HiPaymentMeans.defaultProps = {
+  cardUserGender: 'U',
+  credit: true,
+  translations: {
+    credit: 'credit',
+    debit: 'debit',
+    gift_card: 'GIFT CARD',
+    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.default.string,
+
+  /**
+   * Numéro du moyen de paiement (CB, SEPA, etc)
+   */
+  cardNumber: _propTypes.default.string,
+
+  /**
+   * Utilisateur du moyen de paiement
+   */
+  cardUser: _propTypes.default.string,
+
+  /**
+   * Genre du card user
+   * F: female
+   * M: male
+   * U: unknown
+   */
+  cardUserGender: _propTypes.default.oneOf(['F', 'M', 'U']),
+
+  /**
+   * Validité du moyen de paiement
+   */
+  cardValidity: _propTypes.default.string,
+
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Couleur principal du moyen de paiement
+   */
+  colorPrimary: _propTypes.default.string,
+
+  /**
+   * Couleur secondaire du moyen de paiement (si dégradé)
+   */
+  colorSecondary: _propTypes.default.string,
+
+  /**
+   * Dans le cas d'un virement
+   * if TRUE, c'est un crédit (default)
+   * else FALSE, c'est un débit
+   */
+  credit: _propTypes.default.bool,
+
+  /**
+   * Logo du moyen de paiement
+   */
+  logo: _propTypes.default.string,
+
+  /**
+   * Logo du marchand dans le cas d'une carte cadeau
+   */
+  logoMerchant: _propTypes.default.string,
+
+  /**
+   * Chemin des svg du composant
+   */
+  svgPath: _propTypes.default.string,
+
+  /**
+   * Objet themes du composant
+   */
+  theme: _propTypes.default.object,
+
+  /**
+   * Objet de traductions du composant
+   */
+  translations: _propTypes.default.object,
+
+  /**
+   * Propriété utilisée pour discriminer les templates
+   */
+  type: _propTypes.default.string,
+
+  /**
+   * Année depuis laquelle l'utilisateur est membre dans le cas d'une carte CORPORATE
+   */
+  yearMember: _propTypes.default.string
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiPaymentMean',
+  withTheme: true
+})(HiPaymentMeans);
+
+exports.default = _default;

package/HiPaymentMeans/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiPaymentMeans.default;
+  }
+});
+
+var _HiPaymentMeans = _interopRequireDefault(require("./HiPaymentMeans"));

package/HiRadio/HiRadio.js

@@ -23,6 +23,10 @@ var styles = function styles(theme) {
     },
     disabled: {
       color: theme.palette.action.disabled
+    },
+    root: {
+      height: 40,
+      width: 40
     }
   };
 };
@@ -42,6 +46,7 @@ var HiRadio = function HiRadio(_ref) {
   return _react.default.createElement(_Radio.default, {
     className: className,
     classes: {
+      root: classes.root,
       checked: classes.checked,
       disabled: classes.disabled
     },

package/HiSelect/HiSelect.js

@@ -207,7 +207,7 @@ function (_React$PureComponent) {
         } else if (type === 'image' || item.type === 'image') {
           inputValue = _react.default.createElement("span", {
             className: classes.selectIconLabel
-          }, _react.default.createElement("img", {
+          }, item.img && _react.default.createElement("img", {
             className: classes.labelImg,
             src: item.img,
             alt: item.label,