@hipay/hipay-material-ui 2.0.0-beta.52 → 2.0.0-beta.54

package/es/HiCell/CellSentinel.js

@@ -3,138 +3,62 @@ import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
 import withStyles from '../styles/withStyles';
 export const styles = {
-  smartDecision: {
-    marginLeft: 2,
-    display: 'inline-block',
-    minWidth: 18
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
   },
-  label: {
-    marginLeft: 2
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  }
+  label: {}
 };
-/**
- * Get Theme color from fraudResult
- * @param fraudResult
- * @returns {*}
- */
-
-function getColorFromFraudResult(fraudResult) {
-  let color;
-
-  switch (fraudResult.toUpperCase()) {
-    case 'ACCEPTED':
-      color = 'positive';
-      break;
-
-    case 'BLOCKED':
-      color = 'negative';
-      break;
-
-    case 'CHALLENGED':
-      color = 'middle';
-      break;
-
-    case 'PENDING':
-      color = 'primary';
-      break;
-
-    case 'FORCE_AUTHENTICATE':
-    case 'ASK_AUTHENTICATE':
-    default:
-      color = 'neutral';
-      break;
-  }
-
-  return color;
-}
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
 
-
 class CellSentinel extends React.PureComponent {
   render() {
     const {
+      active,
       classes,
-      score,
-      fraudResult,
-      automaticFraudReviewResult,
-      pendingManualAction,
-      smartDecision,
-      hideFraudResult
+      color,
+      label,
+      letter,
+      outlined,
+      reviewer,
+      value
     } = this.props;
-    const scoreLabel = score > 0 ? `+${score}` : `${score}`;
+
+    const _label = label ? label : value;
+
+    const _letter = letter ? letter : _label[0];
+
     return React.createElement("div", {
-      style: {
-        textAlign: 'right',
-        minWidth: '100px'
-      }
+      className: classes.flexContent,
+      title: reviewer ? `${_label}\n${reviewer}` : _label
     }, React.createElement(HiColoredLabel, {
-      label: scoreLabel,
-      color: getColorFromFraudResult(fraudResult),
-      classes: {
-        root: classes.label
-      },
-      active: pendingManualAction
-    }), !hideFraudResult && React.createElement(HiColoredLabel, {
-      label: fraudResult.toUpperCase().substr(0, 1),
-      color: getColorFromFraudResult(fraudResult),
+      active: active,
       classes: {
         root: classes.label
       },
-      active: pendingManualAction
-    }), !!smartDecision && React.createElement("div", {
-      className: classes.smartDecision
-    }, automaticFraudReviewResult && React.createElement(HiColoredLabel, {
-      label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-      color: getColorFromFraudResult(automaticFraudReviewResult),
-      active: pendingManualAction
-    })));
+      color: color,
+      label: _letter,
+      outlined: outlined
+    }));
   }
 
 }
 
 CellSentinel.defaultProps = {
-  hideFraudResult: false
+  active: false,
+  outlined: false
 };
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
-   */
-  automaticFraudReviewResult: PropTypes.string,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
   classes: PropTypes.object,
-
-  /**
-   * Résultat de la fraude
-   */
-  fraudResult: PropTypes.string.isRequired,
-
-  /**
-   * Si true le fraudResult ne sera pas affiché
-   */
-  hideFraudResult: PropTypes.bool,
-
-  /**
-   * Signal qu'il attend une réponse manuelle
-   */
-  pendingManualAction: PropTypes.bool,
-
-  /**
-   * Score de la fraude
-   */
-  score: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-
-  /**
-   * Active le SmartDecision (ajoute l'indicateur ou blanc)
-   */
-  smartDecision: PropTypes.bool
+  value: PropTypes.string,
+  color: PropTypes.string,
+  label: PropTypes.string,
+  letter: PropTypes.string,
+  active: PropTypes.bool,
+  reviewer: PropTypes.string,
+  outlined: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCellSentinel'

package/es/HiCell/CellSentinelScore.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiColoredLabel from '../HiColoredLabel';
+import withStyles from '../styles/withStyles';
+export const styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+export const sentinelColorById = {
+  NOT_LAUNCHED: '#737373',
+  ACCEPTED: '#00AF01',
+  AUTHENTICATE: '#484A4B',
+  FORCE_AUTHENTICATE: '#20272B',
+  PENDING: '#3987AD',
+  TO_BE_REVIEWED: '#FF8F01',
+  CHALLENGED: '#FF8F01',
+  BLOCKED: '#D50000',
+  ALLOWED: '#00AF01',
+  DENIED: '#D50000'
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+class CellSentinelScore extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      result,
+      value
+    } = this.props;
+    return React.createElement("div", {
+      className: classes.flexContent
+    }, React.createElement(HiColoredLabel, {
+      active: result === 'TO_BE_REVIEWED',
+      classes: {
+        root: classes.label
+      },
+      color: sentinelColorById[result],
+      label: value > 0 ? `+${value}` : `${value}`
+    }));
+  }
+
+}
+
+CellSentinelScore.defaultProps = {
+  active: false,
+  outlined: false
+};
+CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  result: PropTypes.string,
+  value: PropTypes.number
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellSentinelScore'
+})(CellSentinelScore);

package/es/HiChip/HiChip.js

@@ -52,7 +52,7 @@ export const styles = theme => ({
     position: 'relative',
     cursor: 'pointer',
     '&:hover, &:focus': {
-      color: theme.palette.primary.main
+      color: theme.palette.neutral.dark
     }
   },
   label: {
@@ -78,7 +78,8 @@ export const styles = theme => ({
     '&:hover, &:focus': {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.grey[300]
-    }
+    },
+    position: 'relative'
   },
   badge: {
     height: 16,
@@ -96,13 +97,14 @@ const handleKeyDown = (e, fn) => {
 
 function HiChip(props) {
   const {
-    label,
+    className,
     classes,
     fallbackImage,
     icon,
     iconSize = 20,
     id,
     img,
+    label,
     onPrevious,
     onNext,
     onDelete,
@@ -117,7 +119,7 @@ function HiChip(props) {
   } = props;
   return React.createElement("div", {
     id: id,
-    className: classNames(classes.root, {
+    className: classNames(classes.root, className, {
       [classes.leftNavigation]: onPrevious,
       [classes.rightNavigation]: onNext,
       [classes.deletable]: onDelete,
@@ -185,6 +187,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Surcharge les classes du composant
+   */
+  className: PropTypes.object,
+
   /**
    * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */

package/es/HiColoredLabel/HiColoredLabel.js

@@ -96,6 +96,9 @@ export const styles = theme => ({
   activeColorNeutral: {
     color: theme.palette.neutral.contrastText,
     backgroundColor: theme.palette.neutral.main
+  },
+  outlined: {
+    border: '1px solid'
   }
 });
 /**
@@ -111,11 +114,12 @@ function HiColoredLabel(props) {
     label,
     color,
     active,
+    outlined,
     fontWeight,
     style,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
+        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
 
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
@@ -123,6 +127,7 @@ function HiColoredLabel(props) {
     className: classNames(classes.root, {
       [classes.color]: !active,
       [classes.activeColor]: active,
+      [classes.outlined]: outlined,
       [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
       [classes[`color${capitalize(color)}`]]: !active && isHiColor
     }, className),
@@ -165,11 +170,17 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Label à afficher
    */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,
+
+  /**
+   * Ajoute une bordure
+   */
+  outlined: PropTypes.bool
 } : {};
 HiColoredLabel.defaultProps = {
   active: false,
-  color: 'primary'
+  color: 'primary',
+  outlined: false
 };
 export default withStyles(styles, {
   hiComponent: true,

package/es/HiDatePicker/HiDatePicker.js

@@ -213,7 +213,7 @@ class HiDatePicker extends React.Component {
       todayButton: translations.today,
       onTodayButtonClick: this.handleCurrentMonthChange,
       weekdayElement: Weekday,
-      NavBarElement: props2 => React.createElement(NavBar, _extends({
+      navbarElement: props2 => React.createElement(NavBar, _extends({
         showClockButton: enableTime,
         onClockClick: this.handleClockClick
       }, props2)),