@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTPhoneInput/versions/V1/index.js

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { arrayOf, bool, func, number, shape, string } from 'prop-types';
+import UTBaseInputField from '../../../UTBaseInputField';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTValidation, { validationDataProptypes } from '../../../UTValidation';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTSelect from '../../../UTSelect';
+import countries from '../../../../constants/countries';
+import { AREA_CODES } from './constants';
+import styles from './styles.module.scss';
+const UTPhoneInput = _ref => {
+  var _countries$find;
+  let {
+    actions,
+    areaCodeDataTestId,
+    areaCodePlaceholder,
+    disabled,
+    editablePrefix = false,
+    error,
+    helpText,
+    inputSize,
+    maxLength = 10,
+    onChange,
+    prefix,
+    prefixDataTestId,
+    phoneNumberDataTestId,
+    placeholder,
+    readOnly,
+    required,
+    title,
+    titleVariant,
+    translations = {
+      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 dígitos.',
+      areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.',
+      invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.'
+    },
+    validationDataTestId,
+    validations,
+    value,
+    withAreaCode = true
+  } = _ref;
+  const [areaCodeState, setAreaCodeState] = useState({
+    code: '',
+    error: ''
+  });
+  const [blurWithError, setBlurWithError] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [prefixState, setPrefixState] = useState((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
+  const {
+    areaCodeWithoutZeroError,
+    invalidAreaCodeError,
+    areaCodeMinLenghtError
+  } = translations;
+  useEffect(() => {
+    const {
+      number: valueNumber
+    } = typeof value === 'string' ? {
+      number: value
+    } : value;
+    if (prefix) {
+      if (valueNumber && valueNumber !== phoneNumber) setPhoneNumber(valueNumber);
+    } else if (valueNumber && withAreaCode) {
+      const [code, phone] = valueNumber.split('-');
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        code: code || ''
+      }));
+      setPhoneNumber(phone || '');
+    } else if (valueNumber && !withAreaCode) {
+      setPhoneNumber(valueNumber);
+    }
+  }, [value, withAreaCode]);
+  const validateAreaCode = code => {
+    if (!code) return '';
+    if (code.length === 1) return areaCodeMinLenghtError;
+    if (code.startsWith('0')) return areaCodeWithoutZeroError;
+    const isValidCode = AREA_CODES.find(element => element.code === code);
+    return !isValidCode ? invalidAreaCodeError : '';
+  };
+  const handleOnBlur = () => {
+    const validationError = validateAreaCode(areaCodeState.code);
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      error: validationError
+    }));
+    setBlurWithError(!!validationError);
+  };
+  useEffect(() => {
+    if (blurWithError) {
+      const validationError = validateAreaCode(areaCodeState.code);
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        error: validationError
+      }));
+    }
+  }, [areaCodeState.code, blurWithError]);
+  const handleChangeAreaCode = areaCodeValue => {
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      code: areaCodeValue
+    }));
+  };
+  const handleChangePhoneNumber = useCallback(phoneNumberValue => {
+    setPhoneNumber(phoneNumberValue);
+  }, []);
+  useEffect(() => {
+    if (prefix) {
+      if (phoneNumber && (phoneNumber !== (value === null || value === void 0 ? void 0 : value.number) || prefixState !== (value === null || value === void 0 ? void 0 : value.prefix))) onChange({
+        number: phoneNumber,
+        prefix: prefixState
+      });
+    } else if (areaCodeState.code !== '' || phoneNumber !== '') {
+      const newValue = withAreaCode ? "".concat(areaCodeState.code, "-").concat(phoneNumber) : phoneNumber;
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    } else {
+      onChange('');
+    }
+  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value, prefixState, prefix]);
+  const validationData = validations || areaCodeState.error && formatErrorToValidation(areaCodeState.error) || error && formatErrorToValidation(error);
+  const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
+  const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
+  const getPhoneNumberMaxLength = () => withAreaCode ? Math.min(maxLength - areaCodeState.code.length, maxLength - 2) : maxLength;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    readOnly: readOnly,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: styles.inputsContainer
+  }, prefix && /*#__PURE__*/React.createElement(UTSelect, {
+    autocompleteProps: {
+      classes: {
+        popper: styles.popper
+      }
+    },
+    className: styles.countryCodeSelect,
+    classNames: {
+      container: styles.countryCodeContainer
+    },
+    clearable: false,
+    dataTestId: prefixDataTestId,
+    disabled: disabled || !editablePrefix,
+    icon: (_countries$find = countries.find(_ref2 => {
+      let {
+        prefix: prefixValue
+      } = _ref2;
+      return prefixValue === prefixState;
+    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
+    inputSize: inputSize,
+    onChange: setPrefixState,
+    options: countries.map(_ref3 => {
+      let {
+        code,
+        prefix: prefixValue
+      } = _ref3;
+      return {
+        name: "".concat(prefixValue, " (").concat(code, ")"),
+        value: prefixValue,
+        icon: code
+      };
+    }),
+    value: prefixState,
+    version: "V1"
+  }), !prefix && withAreaCode && /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: styles.areaCodeContainer
+    },
+    dataTestId: areaCodeDataTestId,
+    disabled: disabled,
+    error: hasError,
+    inputSize: inputSize,
+    maxLength: getAreaCodeMaxLength(),
+    onBlur: handleOnBlur,
+    onChange: handleChangeAreaCode,
+    placeholder: areaCodePlaceholder,
+    readOnly: readOnly,
+    rightAdornments: [{
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: areaCodeState.code
+  }), /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: styles.phoneContainer,
+      root: styles.phoneContainerRoot
+    },
+    dataTestId: phoneNumberDataTestId,
+    disabled: disabled,
+    error: hasError && !areaCodeState.error,
+    inputSize: inputSize,
+    maxLength: getPhoneNumberMaxLength(),
+    onChange: handleChangePhoneNumber,
+    placeholder: placeholder,
+    rightAdornments: [{
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: phoneNumber
+  })), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: validationDataTestId,
+    validationData: validationData
+  }));
+};
+UTPhoneInput.propTypes = {
+  actions: arrayOf(buttonTypes),
+  areaCodeDataTestId: string,
+  areaCodePlaceholder: string,
+  prefix: string,
+  disabled: bool,
+  editablePrefix: bool,
+  error: string,
+  helpText: string,
+  inputSize: string,
+  prefixDataTestId: string,
+  maxLength: number,
+  onChange: func,
+  phoneNumberDataTestId: string,
+  placeholder: string,
+  readOnly: bool,
+  required: bool,
+  title: string,
+  titleVariant: string,
+  translations: shape({
+    areaCodeWithoutZeroError: string,
+    invalidAreaCodeError: string
+  }),
+  validationDataTestId: string,
+  validations: validationDataProptypes,
+  value: string,
+  withAreaCode: bool
+};
+export default UTPhoneInput;

package/dist/esm/components/UTPhoneInput/versions/V1/styles.module.scss

@@ -0,0 +1,36 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+}
+
+.inputsContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  grid-gap: 8px;
+}
+
+.areaCodeContainer {
+  flex: 0 1 auto;
+  max-width: 110px;
+  min-width: 85px;
+}
+
+.phoneContainer {
+  flex: 1 1 auto;
+  min-width: 120px;
+  height: 100%;
+}
+
+.countryCodeSelect {
+  width: 180px;
+}
+
+.phoneContainerRoot {
+  height: 100%;
+}
+
+.popper {
+  width: unset !important;
+}

package/dist/esm/components/UTPopUp/README.md

@@ -0,0 +1,50 @@
+# UTPopUp
+
+## Description
+
+`UTPopUp` is a configurable floating component with actions.
+
+## Props
+
+| Name                   | Type      | Default            | Description                                                                                             |
+| ---------------------- | --------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
+| `checkBox`             | string    |                    | Title for the checkbox input.                                                                           |
+| `children`             | element   |                    | The content to be rendered inside the component.                                                        |
+| `dataTestId`           | string    |                    | Unique identifier for testing purposes.                                                                 |
+| `enabled`              | bool      | `true`             | Indicates whether the component is enabled or not.                                                      |
+| `onClose`              | func      |                    | Callback for the close button.                                                                          |
+| `position`             | string    | `bottomRight`      | Defines the position of the component.                                                                  |
+| `primaryAction`        | func      |                    | Callback function for the primary action.                                                               |
+| `primaryActionProps`   | object    |                    | Props to be applied to the primary action button.                                                       |
+| `primaryActionText`    | string    |                    | Text for the primary action button.                                                                     |
+| `progress`             | number    |                    | Width of the progress bar                                                                               |
+| `secondaryAction`      | func      |                    | Callback function for the secondary action .                                                            |
+| `secondaryActionProps` | object    |                    | Props to be applied to the secondary action button.                                                     |
+| `secondaryActionText`  | string    |                    | Text for the secondary action button.                                                                   |
+| `size`                 | string    | `medium`           | Defines the size of the component.                                                                      |
+| `withBodyPadding`      | bool      | `false`            | Indicates whether the body of the component should have horizontal padding around its content.          |
+
+
+### checkBox
+
+`checkBox` is the title and enabler for the UTCheckBox. Its value is passed as a parameter to `onClose`, `primaryAction`, and `secondaryAction`
+
+### progress
+
+Enables the progress bar. The value of `progress` must be between 0 and 1.
+
+### position 
+
+The value of `position` must be one of the following:
+
+- "bottomLeft"
+- "bottomRight"
+- "topLeft"
+- "topRight"
+
+### size
+
+The value of `size` must be one of the following:
+
+- "medium"
+- "large"

package/dist/esm/components/UTPopUp/constants.js

@@ -0,0 +1,10 @@
+export const SIZES = {
+  LARGE: 'large',
+  MEDIUM: 'medium'
+};
+export const POSITIONS = {
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight'
+};

package/dist/esm/components/UTPopUp/index.js

@@ -0,0 +1,82 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { func, string, bool, object, element, number } from 'prop-types';
+import React, { useState } from 'react';
+import UTButton from '../UTButton';
+import UTCheckbox from '../UTCheckbox';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTPopUp = _ref => {
+  let {
+    checkBox,
+    children,
+    classes: theme,
+    dataTestId,
+    enabled = true,
+    onClose,
+    primaryAction,
+    primaryActionProps,
+    primaryActionText,
+    progress,
+    secondaryAction,
+    secondaryActionProps,
+    secondaryActionText,
+    withBodyPadding
+  } = _ref;
+  const [checked, setChecked] = useState(false);
+  const hasProgress = typeof progress === 'number';
+  return enabled ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(theme.container, " ").concat(styles.container),
+    "data-testid": dataTestId
+  }, (onClose || hasProgress) && /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, hasProgress && /*#__PURE__*/React.createElement("div", {
+    className: theme.progressBar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: theme.progress,
+    style: {
+      width: "".concat(progress * 101, "%")
+    }
+  })), onClose && /*#__PURE__*/React.createElement(UTButton, {
+    Icon: "IconX",
+    onClick: () => onClose(checked),
+    variant: "text"
+  })), children && /*#__PURE__*/React.createElement("div", {
+    className: withBodyPadding ? styles.withBodyPadding : styles.body
+  }, children), (checkBox || primaryAction || secondaryAction) && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, checkBox && /*#__PURE__*/React.createElement(UTCheckbox, {
+    version: "V1",
+    title: checkBox,
+    spacing: "small",
+    value: checked,
+    onChange: setChecked,
+    classNames: {
+      container: styles.checkBox
+    }
+  }), secondaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: () => secondaryAction(checked),
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText), primaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: () => primaryAction(checked)
+  }, primaryActionProps), primaryActionText))) : null;
+};
+UTPopUp.propTypes = {
+  checkBox: string,
+  children: element,
+  classes: object,
+  dataTestId: string,
+  enabled: bool,
+  onClose: func,
+  position: string,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
+  progress: number,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  size: string,
+  withBodyPadding: bool
+};
+export default WithTheme(retrieveStyle)(UTPopUp);

package/dist/esm/components/UTPopUp/styles.module.scss

@@ -0,0 +1,38 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+.header {
+  align-content: center;
+  align-items: center;
+  display: flex;
+  grid-gap: 20px;
+  height: 32px;
+  justify-content: flex-end;
+  padding: 12px 16px;
+}
+
+.footer {
+  display: flex;
+  grid-gap: 8px;
+  justify-content: flex-end;
+  padding: 0 16px 16px;
+}
+
+.checkBox {
+  flex-grow: 1;
+}
+
+.withBodyPadding {
+  padding: 0 16px 16px;
+}
+
+.body {
+  padding: 0 0 16px;
+}
+
+.container {
+  @media #{$mobile} {
+    left: 16px;
+    right: 16px;
+    width: auto;
+  }
+}

package/dist/esm/components/UTPopUp/theme.js

@@ -0,0 +1,56 @@
+import { getShadow } from '../../utils/shadowUtils';
+import { POSITIONS, SIZES } from './constants';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow, _theme$Palette;
+  let {
+    theme,
+    position = POSITIONS.BOTTOM_RIGHT,
+    size = SIZES.MEDIUM
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '4px',
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      position: 'absolute',
+      width: {
+        [SIZES.MEDIUM]: '381px',
+        [SIZES.LARGE]: '600px'
+      }[size],
+      zIndex: 1000,
+      ...{
+        [POSITIONS.BOTTOM_LEFT]: {
+          bottom: '30px',
+          left: '30px'
+        },
+        [POSITIONS.BOTTOM_RIGHT]: {
+          bottom: '30px',
+          right: '30px'
+        },
+        [POSITIONS.TOP_LEFT]: {
+          left: '30px',
+          top: '30px'
+        },
+        [POSITIONS.TOP_RIGHT]: {
+          right: '30px',
+          top: '30px'
+        }
+      }[position]
+    },
+    progressBar: {
+      backgroundColor: theme.Palette.light['04'],
+      height: '8px',
+      overflow: 'hidden',
+      width: '100%'
+    },
+    progress: {
+      background: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.identityGradient) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.horizontal,
+      borderRadius: '0 4px 4px 0',
+      height: '100%',
+      transition: 'width 1s ease-in-out'
+    }
+  };
+};

package/dist/esm/components/UTPopper/README.md

@@ -0,0 +1,17 @@
+# UTPopper
+
+## Description
+
+Component meant to be used as a PopUp anchored to other elements
+
+## Props
+
+| Name                    | Type                               | Default | Description                                       |
+| ----------------------- | ---------------------------------- | ------- | ------------------------------------------------- |
+| anchor                  | oneOfType([refType, elementType]), |         | Element to which the popper is anchored           |
+| children,               | object                             |         | Elements to render within the popper              |
+| classes,                | objectOf( string)                  |         | CSS classes                                       |
+| clickAwayListenerProps, | object                             |         | Props handed over to ClickawayListener            |
+| onClose,                | func                               |         | Close function                                    |
+| paperProps,             | object                             |         | Props to hand over to the UTPapper                |
+| ...popperProps          | object                             |         | Spread of props compatible with materialUIs props |

package/dist/esm/components/UTPopper/index.js

@@ -0,0 +1,41 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useState } from 'react';
+import { ClickAwayListener, Paper, Popper } from '@material-ui/core';
+import { elementType, func, object, objectOf, oneOfType, string } from 'prop-types';
+import { refType } from '../../types/commonTypes';
+const UTPopper = _ref => {
+  let {
+    anchor,
+    children,
+    classes,
+    clickAwayListenerProps,
+    onClose,
+    paperProps,
+    ...popperProps
+  } = _ref;
+  const [open, handleOpenState] = useState(false);
+  useEffect(() => {
+    const shouldOpen = !!anchor && !isEmpty(children);
+    handleOpenState(shouldOpen);
+  }, [anchor, children]);
+  return anchor ? /*#__PURE__*/React.createElement(ClickAwayListener, _extends({
+    onClickAway: onClose
+  }, clickAwayListenerProps), /*#__PURE__*/React.createElement(Popper, _extends({
+    anchorEl: anchor,
+    open: open,
+    transition: true
+  }, popperProps), /*#__PURE__*/React.createElement(Paper, _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.paper
+  }, paperProps), children))) : null;
+};
+UTPopper.propTypes = {
+  anchor: oneOfType([refType, elementType]),
+  children: object,
+  classes: objectOf(string),
+  clickAwayListenerProps: object,
+  onClose: func,
+  paperProps: object,
+  popperProps: object
+};
+export default UTPopper;

package/dist/esm/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+Product item component.
+
+### Action
+This action object will wait for a function and a type to apply a determinate style to the action button:
+Available types:
+- `add`
+- `modify`
+- `detail`
+- `modifyDetail`
+
+Also, you can pass a CustomIcon if you want to.
+
+### Props
+
+| Name                 | Type                                                                                                            | Default   |Description                      |
+|----------------------|-----------------------------------------------------------------------------------------------------------------|-----------|---------------------------------|
+| action               | object: {CustomIcon: ReactComponent, type: 'add' \| 'modify' \| 'detail' \| 'modifyDetail', onClick: () => () } |           | The action definition.          |
+| additionalInfo       | string                                                                                                          |           | The additional info to detail.  |
+| amount               |                                                                                                                 |           | The current amount.             |
+| discount             | number                                                                                                          |           | Current discount.               |
+| discountSize         | 'small' \| 'medium'                                                                                             | medium    | UTLabel component variant.      | 
+| Image                | asset                                                                                                           |           | Image of the product.           |
+| previousAmount       | number                                                                                                          |           | Amount without discount applied.|
+| selectedQuantity     | number                                                                                                          |           | Selected item product quantity. |
+| title                | string                                                                                                          |           | Product name.                   |

package/dist/esm/components/UTProductItem/constants.js

@@ -0,0 +1,28 @@
+const ADD = 'add';
+const MODIFY = 'modify';
+const DETAIL = 'detail';
+const MODIFY_DETAIL = 'modifyDetail';
+export const actionMapper = {
+  [ADD]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPlus',
+    size: 'medium',
+    variant: 'semitransparent'
+  },
+  [MODIFY]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPencil',
+    size: 'medium',
+    variant: 'text'
+  },
+  [DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconChevronRight',
+    size: 'medium'
+  },
+  [MODIFY_DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconPencil',
+    size: 'medium'
+  }
+};