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

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -0,0 +1,620 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../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'
+  }
+});
+
+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
+      } = this.props;
+      let 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);
+      }
+
+      let color1 = colorPrimary;
+      let color2 = colorSecondary;
+
+      if (!color1) {
+        color1 = theme.palette.primary.main;
+        color2 = theme.palette.primary.dark;
+      }
+
+      let brandLogo = logo;
+
+      if (!brandLogo) {
+        brandLogo = `${svgPath}sans_logo_full.svg`;
+      }
+
+      let username = cardUser;
+
+      if (cardUserGender === 'F') {
+        username = `${translations.gender_female} ${cardUser}`;
+      } else if (cardUserGender === 'M') {
+        username = `${translations.gender_male} ${cardUser}`;
+      }
+
+      let cardLayout;
+
+      switch (type) {
+        case 'ewallet':
+          cardLayout = React.createElement("div", {
+            style: {
+              backgroundImage: `url("${svgPath}Wallet_shape.svg")`
+            },
+            className: classes.walletShadow
+          }, React.createElement("div", {
+            style: {
+              background: `linear-gradient(${color1}, ${color2 || color1})`,
+              WebkitMask: `url("${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)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoLeft)
+          })), React.createElement("span", {
+            className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
+          })));
+          break;
+
+        case 'credit-card':
+        case 'debit-card':
+          cardLayout = React.createElement("div", {
+            className: classNames(classes.bankCard, classes.shadow),
+            style: {
+              background: `linear-gradient(${color1}, ${color2 || color1})`
+            }
+          }, React.createElement("span", {
+            className: classNames(classes.stripe, classes.stripeTopRight)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoRight)
+          })), 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", {
+            className: classes.dateValid
+          }, cardValidity), cardValidity && React.createElement("div", {
+            className: classes.validThru
+          }, "Valid Thru"));
+          break;
+
+        case 'corporate':
+          cardLayout = React.createElement("div", {
+            className: classNames(classes.bankCard, classes.shadow),
+            style: {
+              background: `linear-gradient(${color1}, ${color2 || color1})`
+            }
+          }, React.createElement("span", {
+            className: classNames(classes.stripe, classes.stripeTopRight)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoRight)
+          })), React.createElement("span", {
+            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }, React.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", {
+            className: classes.memberSince
+          }, "Member Since"), React.createElement("div", {
+            className: classes.yearMember
+          }, yearMember), React.createElement("div", {
+            className: classes.dateValid
+          }, cardValidity), cardValidity && React.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)
+          }, businessName));
+          break;
+
+        case 'open-invoice':
+        case 'payment-reference':
+        case 'credit-consumption':
+        case 'realtime-banking':
+          cardLayout = React.createElement("div", {
+            className: classNames(classes.sepa, classes.shadow),
+            style: {
+              background: `linear-gradient(${color1}, ${color2 || color1})`
+            }
+          }, React.createElement("span", {
+            className: classNames(classes.stripe, classes.stripeTopLeft)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoLeft)
+          })), 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)
+          }, (credit ? translations.credit : translations.debit).toUpperCase()));
+          break;
+
+        case 'prepaid-card':
+          cardLayout = React.createElement("div", {
+            className: classNames(classes.bankCard, classes.shadow),
+            style: {
+              background: `url("${svgPath}Gift_shape.svg"), linear-gradient(${color1},
+                         ${color2 || color1})`
+            }
+          }, React.createElement("span", {
+            className: classNames(classes.stripe, classes.stripeTopRight)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoRight)
+          })), React.createElement("span", {
+            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }, React.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)
+          }, translations.gift_card));
+          break;
+
+        default:
+          cardLayout = React.createElement("div", {
+            className: classNames(classes.bankCard, classes.shadow),
+            style: {
+              background: `linear-gradient(${color1}, ${color2 || color1})`
+            }
+          }, React.createElement("span", {
+            className: classNames(classes.stripe, classes.stripeTopRight)
+          }, React.createElement("img", {
+            src: brandLogo,
+            alt: '',
+            className: classNames(classes.logo, classes.logoRight)
+          })), 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", {
+            className: classes.dateValid
+          }, cardValidity), cardValidity && React.createElement("div", {
+            className: classes.validThru
+          }, "Valid Thru"));
+      }
+
+      return cardLayout;
+    };
+
+    this.formatCardNumber = 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)}`;
+      }
+
+      return cardNumber;
+    };
+
+    this.formatIBANNumber = 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)}`;
+      }
+
+      return cardNumber;
+    };
+  }
+
+  render() {
+    return this.buildPaymentLayoutByType();
+  }
+
+}
+
+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.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,
+
+  /**
+   * 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, {
+  hiComponent: true,
+  name: 'HmuiHiPaymentMean',
+  withTheme: true
+})(HiPaymentMeans);

package/es/HiPaymentMeans/index.js

@@ -0,0 +1 @@
+export { default } from './HiPaymentMeans';

package/es/HiRadio/HiRadio.js

@@ -9,6 +9,10 @@ export const styles = theme => ({
   },
   disabled: {
     color: theme.palette.action.disabled
+  },
+  root: {
+    height: 40,
+    width: 40
   }
 });
 
@@ -26,6 +30,7 @@ const HiRadio = ({
   return React.createElement(Radio, {
     className: className,
     classes: {
+      root: classes.root,
       checked: classes.checked,
       disabled: classes.disabled
     },

package/es/HiSelect/HiSelect.js

@@ -149,7 +149,7 @@ class HiSelect extends React.PureComponent {
         } else if (type === 'image' || item.type === 'image') {
           inputValue = React.createElement("span", {
             className: classes.selectIconLabel
-          }, React.createElement("img", {
+          }, item.img && React.createElement("img", {
             className: classes.labelImg,
             src: item.img,
             alt: item.label,

package/es/HiSelect/HiSelectField.js

@@ -30,9 +30,10 @@ class HiSelectField extends React.PureComponent {
       checkbox,
       searchable,
       translations,
-      className
+      className,
+      HiInputLabelProps
     } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className"]);
+          others = _objectWithoutProperties(_this$props, ["label", "required", "disabled", "error", "errorText", "helperText", "helperIcon", "id", "name", "value", "options", "type", "multiple", "iconAll", "checkbox", "searchable", "translations", "className", "HiInputLabelProps"]);
 
     return React.createElement(HiFormControl, {
       id: id,
@@ -43,7 +44,8 @@ class HiSelectField extends React.PureComponent {
       errorText: errorText,
       helperText: helperText,
       helperIcon: helperIcon,
-      className: className
+      className: className,
+      InputLabelProps: HiInputLabelProps
     }, React.createElement(HiSelect, _extends({
       id: id,
       name: name,
@@ -106,6 +108,11 @@ HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * true si champs obligatoire
    */
-  required: PropTypes.bool
+  required: PropTypes.bool,
+
+  /**
+   * Propriétés appliquées au composant HiFormLabel
+   */
+  HiInputLabelProps: PropTypes.object
 } : {};
 export default HiSelectField;

package/es/HiTable/HiCellBuilder.js

@@ -177,7 +177,7 @@ HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Override TableCell style
    */
-  className: PropTypes.object,
+  className: PropTypes.string,
 
   /**
    * Propriétés de la colonne