@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta5 → 2.3.1-rc1

package/old_components/HiPaymentMeans/HiPaymentMeans.js

@@ -1,576 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/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/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/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'
-    }
-  };
-};
-
-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);
-      } 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 creditDebit = null;
-
-      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 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)
-          }, 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)
-          }, 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)
-          }, 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)
-          }, 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.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)
-          }, username), _react.default.createElement("div", {
-            className: classes.dateValid
-          }, cardValidity), cardValidity && _react.default.createElement("div", {
-            className: classes.validThru
-          }, "Valid Thru"));
-      }
-
-      return cardLayout;
-    });
-    (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 = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), " ").concat(cardNumber.substring(12, 16));
-      }
-
-      return cardNumber;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
-
-(0, _defineProperty2.default)(HiPaymentMeans, "defaultProps", {
-  cardUserGender: 'U',
-  credit: true,
-  translations: {
-    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);
-
-exports.default = _default;

package/old_components/HiPaymentMeans/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@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"));