@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta5

package/old_components/HiPaymentMeans/HiPaymentMeans.js

@@ -0,0 +1,576 @@
+"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

@@ -0,0 +1,15 @@
+"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"));