@widergy/utilitygo-smart-bill-web 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.3.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.2.0...v3.3.0) (2025-03-19)
+
+
+### Features
+
+* [CX-201] billing tab smartbill ([#44](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/44)) ([d4175c3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/d4175c3fd8a6e773b750bfe9d0c525c35689e8ef))
+
+# [3.2.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.1.0...v3.2.0) (2025-03-12)
+
+
+### Features
+
+* [CX-199] smartbill new experience consumption tab ([#41](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/41)) ([ac3a0ef](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/ac3a0efc5fa2c9b2c2deca2f9aa9dedbdfd38e42))
+
 # [3.1.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.0.4...v3.1.0) (2025-03-07)
 
 

package/dist/components/SmartBillSummary/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAB_COMPONENT_MAPPER = exports.BIMESTRAL_PERIODICITY = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tabs = require("../../shared/constants/tabs");
+var _Consumptions = _interopRequireDefault(require("./tabs/Consumptions"));
+var _Billing = _interopRequireDefault(require("./tabs/Billing"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); } /* eslint-disable react/prop-types */
+const BIMESTRAL_PERIODICITY = exports.BIMESTRAL_PERIODICITY = 'BIMESTRAL';
+const renderComponentWithProps = (Component, tab) => props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+  assets: props?.assets?.[tab] || {},
+  translations: props?.translations?.[tab] || {}
+}));
+const TAB_COMPONENT_MAPPER = exports.TAB_COMPONENT_MAPPER = {
+  [_tabs.SMARTBILL_TABS.CONSUMPTIONS]: renderComponentWithProps(_Consumptions.default, _tabs.SMARTBILL_TABS.CONSUMPTIONS),
+  [_tabs.SMARTBILL_TABS.BILLING]: renderComponentWithProps(_Billing.default, _tabs.SMARTBILL_TABS.BILLING),
+  [_tabs.SMARTBILL_TABS.GLOSSARY]: renderComponentWithProps(() => /*#__PURE__*/_react.default.createElement("div", null, "Glosario: CX-243"),
+  // TODO
+  _tabs.SMARTBILL_TABS.GLOSSARY)
+};

package/dist/components/SmartBillSummary/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _billDataTypes = require("../../shared/types/billDataTypes");
+var _constants = require("./constants");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SmartBillSummary = _ref => {
+  let {
+    assets,
+    constants,
+    consumptionLevels,
+    components,
+    currentAccount,
+    handlers,
+    isDesktopSize,
+    loading,
+    smartBill,
+    tabOptions,
+    translations,
+    utils
+  } = _ref;
+  const filteredTabOptions = (0, _utils.getTabOptions)(tabOptions, smartBill) || [];
+  const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
+  const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
+  const changeCurrentTab = newTab => setCurrentTab(newTab);
+  (0, _react.useEffect)(() => {
+    if (defaultCurrentTab) changeCurrentTab(defaultCurrentTab);
+  }, [defaultCurrentTab]);
+  return /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
+    className: _stylesModule.default.loadingContainer,
+    loading: loading
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTTabs, {
+    classNames: {
+      baseLabel: _stylesModule.default.tabLabel,
+      baseSelected: _stylesModule.default.baseSelected,
+      flexContainer: _stylesModule.default.tabsContainer
+    },
+    onChange: changeCurrentTab,
+    options: filteredTabOptions,
+    tabsProps: {
+      orientation: 'horizontal',
+      variant: 'fullWidth'
+    },
+    value: currentTab
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.contentContainer
+  }, _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
+    assets,
+    constants,
+    consumptionLevels,
+    components,
+    currentAccount,
+    handlers,
+    isDesktopSize,
+    loading,
+    smartBill,
+    translations,
+    utils
+  })));
+};
+SmartBillSummary.propTypes = {
+  assets: _propTypes.object,
+  constants: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentAccount: _propTypes.array,
+  handlers: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.func
+  }),
+  isDesktopSize: _propTypes.bool,
+  loading: _propTypes.bool,
+  smartBill: _billDataTypes.billDataTypes,
+  tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    defaultSelected: _propTypes.bool,
+    enabled: _propTypes.bool,
+    icon: _propTypes.string,
+    label: _propTypes.string,
+    value: _propTypes.string
+  })),
+  translations: _propTypes.object,
+  utils: _propTypes.object
+};
+var _default = exports.default = SmartBillSummary;

package/dist/components/SmartBillSummary/styles.module.scss

@@ -0,0 +1,48 @@
+@import '../../scss/variables/sizes.module.scss';
+
+$max-content-width: 1264px;
+$tab-height: 48px;
+
+.tabsContainer {
+  > button {
+    border-bottom: 1px solid var(--light04);
+    height: $tab-height;
+    max-width: unset;
+    min-height: $tab-height;
+  }
+}
+
+.contentContainer {
+  flex: 1;
+  margin: 0 auto;
+  max-height: calc(100vh - var(--workflowTopbarHeight) - #{$tab-height});
+  max-width: $max-content-width;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.tabLabel {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+
+  svg {
+    margin-bottom: 0 !important;
+  }
+}
+
+.baseSelected {
+  svg {
+    stroke: var(--actionAccent04);
+  }
+}
+
+.loadingContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/DebtStatusLabel/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_WARNING_ICON = exports.DEFAULT_SUCCESS_ICON = exports.DEFAULT_ICON_SIZE = void 0;
+const DEFAULT_WARNING_ICON = exports.DEFAULT_WARNING_ICON = 'IconAlertTriangle';
+const DEFAULT_SUCCESS_ICON = exports.DEFAULT_SUCCESS_ICON = 'IconCheck';
+const DEFAULT_ICON_SIZE = exports.DEFAULT_ICON_SIZE = 16;

package/dist/components/SmartBillSummary/tabs/Billing/components/DebtStatusLabel/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DebtStatusLabel = _ref => {
+  let {
+    debtStatusLabel,
+    isWarning
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.container} ${isWarning ? _stylesModule.default.withDebtsContainer : _stylesModule.default.adheredToAutomaticDebit} `
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: isWarning ? 'warning' : 'success',
+    name: isWarning ? _constants.DEFAULT_WARNING_ICON : _constants.DEFAULT_SUCCESS_ICON,
+    size: _constants.DEFAULT_ICON_SIZE
+  }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: isWarning ? 'warning' : 'success',
+    variant: "small",
+    weight: "medium"
+  }, debtStatusLabel));
+};
+DebtStatusLabel.propTypes = {
+  debtStatusLabel: _propTypes.string,
+  isWarning: _propTypes.bool
+};
+var _default = exports.default = DebtStatusLabel;

package/dist/components/SmartBillSummary/tabs/Billing/components/DebtStatusLabel/styles.module.scss

@@ -0,0 +1,16 @@
+.container {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+  padding: 4px 8px;
+}
+
+.withDebtsContainer {
+  background-color: var(--semanticWarning01);
+}
+
+.adheredToAutomaticDebit {
+  background-color: var(--semanticSuccess01);
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MIN_VALUE_PROGRESS = exports.MAX_VALUE_PROGRESS = void 0;
+const MIN_VALUE_PROGRESS = exports.MIN_VALUE_PROGRESS = 0;
+const MAX_VALUE_PROGRESS = exports.MAX_VALUE_PROGRESS = 100;

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _energyUi = require("@widergy/energy-ui");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ProgressBar = _ref => {
+  let {
+    components = {},
+    currentPeriod,
+    data,
+    isT1,
+    limitValue,
+    specificRate,
+    tooltipContent,
+    translations,
+    value
+  } = _ref;
+  const {
+    LinearProgress
+  } = components;
+  const lastRange = data[data.length - 1]?.range[1];
+  const totalRange = lastRange === 'Infinity' ? data[data.length - 2]?.range[1] * 1.5 : lastRange;
+  const progressOverlayValue = (0, _utils.getProgressOverlayValue)(specificRate, totalRange, value);
+  const isOverLimit = value > limitValue;
+  const {
+    initialLabel,
+    dynamicLabel,
+    finalLabel,
+    currentValueLabel,
+    contrastValueLabel
+  } = (0, _utils.formatLabels)({
+    currentPeriod,
+    isOverLimit,
+    limitValue,
+    translations,
+    value
+  }) || {};
+  const consumptionPercentage = (0, _utils.getConsumptionPercentage)(value, limitValue, isOverLimit) || _constants.MAX_VALUE_PROGRESS;
+  const shouldRenderDynamicLabel = value > 0 && limitValue > 0;
+  const [limitLabelWidth, setLimitLabelWidth] = (0, _react.useState)(0);
+  const limitLabelRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (limitLabelRef.current) {
+      setLimitLabelWidth(limitLabelRef.current.offsetWidth);
+    }
+  }, [dynamicLabel, finalLabel]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isT1 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressBar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressBackground
+  }, data.map(_ref2 => {
+    let {
+      range,
+      name
+    } = _ref2;
+    const isLast = range[1] === 'Infinity';
+    const width = isLast ? '20%' : `${range[1] / totalRange * 100}%`;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: name,
+      className: _stylesModule.default.progressSegment,
+      style: {
+        width,
+        flexGrow: isLast ? 1 : 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.segmentName,
+      colorTheme: "gray",
+      variant: "xsmall"
+    }, name));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressOverlay,
+    style: {
+      left: `${progressOverlayValue}%`,
+      width: `calc(100% - ${progressOverlayValue - 0.5}%)`
+    }
+  })) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `
+          ${_stylesModule.default.powerAndDatesContainer}
+          ${isOverLimit && _stylesModule.default.overHiredContainer}
+        `
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDetailsContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionComparison
+  }, value >= 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1"
+  }, currentValueLabel), value >= 0 && limitValue > 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, contrastValueLabel)), tooltipContent && /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+    content: tooltipContent
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "neutral",
+    name: "EnergyIconQuestionFilled",
+    size: 20
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressContainer
+  }, /*#__PURE__*/_react.default.createElement(LinearProgress, {
+    classes: (0, _utils.getProgressBarClasses)({
+      consumptionPercentage,
+      limitValue,
+      value,
+      hiredValue: limitValue,
+      isOverLimit,
+      styles: _stylesModule.default
+    }),
+    value: consumptionPercentage,
+    variant: "determinate"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.progressLabels
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "xsmall"
+  }, initialLabel), shouldRenderDynamicLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.dinamicLabel,
+    style: {
+      left: (0, _utils.getDynamicPosition)(consumptionPercentage, limitLabelWidth)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "xsmall"
+  }, dynamicLabel)), /*#__PURE__*/_react.default.createElement("span", {
+    className: _stylesModule.default.smallGrayLabel,
+    ref: limitLabelRef
+  }, finalLabel)))));
+};
+ProgressBar.propTypes = {
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentPeriod: _propTypes.object,
+  data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string,
+    color: _propTypes.string,
+    range: (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]))
+  })),
+  isT1: _propTypes.bool,
+  limitValue: _propTypes.number,
+  specificRate: _propTypes.string,
+  tooltipContent: _propTypes.string,
+  translations: _propTypes.object,
+  value: _propTypes.number
+};
+var _default = exports.default = ProgressBar;

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/styles.module.scss

@@ -0,0 +1,174 @@
+@import '../../../../../../../../scss/variables/fontSizes.module.scss';
+
+$default-border-radius: 100px;
+$default-progress-bar-background: linear-gradient(88.75deg, #30e3a2 1.07%, #efc73c 50.13%, #ec574d 98.93%);
+$default-information-color: #21c7e4;
+
+.progressBar {
+  height: 9px;
+  margin: 0 24px;
+  position: relative;
+}
+
+.progressBackground {
+  background: $default-progress-bar-background;
+  border-radius: $default-border-radius;
+  display: flex;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.progressSegment {
+  flex-grow: 1;
+  height: 100%;
+  position: relative;
+
+  &:last-child {
+    border-bottom-right-radius: $default-border-radius;
+    border-top-right-radius: $default-border-radius;
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.progressSegment::after {
+  background-color: var(--light01);
+  content: '';
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 2px;
+  z-index: 3;
+}
+
+.segmentName {
+  position: absolute;
+  top: 18px;
+}
+
+.progressOverlay {
+  background-color: var(--light04);
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+
+  &:last-child {
+    border-bottom-right-radius: $default-border-radius;
+    border-top-right-radius: $default-border-radius;
+  }
+}
+
+.backgroundBar {
+  background: var(--light02);
+  border-radius: $default-border-radius;
+  height: 9px;
+}
+
+.foregroundBar {
+  background: $default-information-color;
+  border-radius: $default-border-radius;
+}
+
+.overHiredBackgroundBar {
+  background: var(--semanticWarning04);
+  border-radius: $default-border-radius;
+}
+
+.overHiredForegroundBar {
+  background: var(--chartGradientHorizontal1);
+  border-radius: $default-border-radius;
+}
+
+.powerAndDatesContainer {
+  display: flex;
+  height: unset !important;
+  justify-content: space-between;
+  margin: 0 24px;
+  position: relative;
+}
+
+.highestConsumptionContainer {
+  display: flex;
+  flex-direction: column;
+  place-items: flex-start;
+}
+
+.hiredPowerContainer {
+  display: flex;
+  flex-direction: column;
+  place-items: flex-end;
+}
+
+.powerAmount {
+  align-items: baseline;
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.overHiredContainer {
+  flex-direction: row-reverse;
+  margin-bottom: 8px;
+
+  .highestConsumptionContainer {
+    place-items: flex-end;
+  }
+
+  .hiredPowerContainer {
+    place-items: flex-start;
+  }
+}
+
+.hiredLabel {
+  color: var(--actionNeutral04);
+}
+
+.progressContainer {
+  margin: 0 24px;
+  position: relative;
+}
+
+.progressLabels {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0 -24px;
+  position: relative;
+}
+
+.dinamicLabel {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.consumptionDetailsContainer {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  grid-gap: 4px;
+  justify-content: space-between;
+}
+
+.consumptionComparison {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+  margin-bottom: 8px;
+}
+
+.smallGrayLabel {
+  color: var(--gray04);
+  font-size: $small;
+  line-height: 1.125rem;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/utils.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProgressOverlayValue = exports.getProgressBarClasses = exports.getDynamicPosition = exports.getConsumptionPercentage = exports.formatMaxPowerRegisteredDate = exports.formatLabels = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _numeral = _interopRequireDefault(require("numeral"));
+var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getConsumptionPercentage = (currentValue, contrastValue, isOverLimit) => (currentValue > contrastValue ? isOverLimit ? contrastValue / currentValue : 1 : currentValue / contrastValue) * 100;
+exports.getConsumptionPercentage = getConsumptionPercentage;
+const formatMaxPowerRegisteredDate = maxConsumptionDay => (0, _dayjs.default)(maxConsumptionDay).tz().format('D MMM');
+exports.formatMaxPowerRegisteredDate = formatMaxPowerRegisteredDate;
+const getDynamicPosition = (percentage, labelWidth) => `clamp(50px, calc(${percentage}% - 10px), calc(100% - ${labelWidth + 28}px))`;
+exports.getDynamicPosition = getDynamicPosition;
+_dayjs.default.extend(_isBetween.default);
+const formatLabels = _ref => {
+  let {
+    currentPeriod,
+    isOverLimit,
+    limitValue,
+    translations = {},
+    value
+  } = _ref;
+  const currentValueFormatted = (0, _numeral.default)(value).format('0,0.[00]');
+  const contrastValueFormatted = (0, _numeral.default)(limitValue).format('0,0.[00]') || 0;
+  const maxConsumptionDay = (0, _dayjs.default)(`${currentPeriod?.year}-${currentPeriod?.number}-01`);
+  const {
+    currentValueWithUnitLabel,
+    maxValueWithUnitLabel
+  } = translations;
+  return {
+    initialLabel: _constants.MIN_VALUE_PROGRESS,
+    dynamicLabel: isOverLimit ? contrastValueFormatted : currentValueFormatted,
+    finalLabel: isOverLimit || !limitValue ? currentValueFormatted : contrastValueFormatted,
+    currentValueLabel: currentValueWithUnitLabel?.({
+      value: currentValueFormatted,
+      day: formatMaxPowerRegisteredDate(maxConsumptionDay)
+    }),
+    contrastValueLabel: maxValueWithUnitLabel?.({
+      detailLabel: 'contratada',
+      value: contrastValueFormatted
+    })
+  };
+};
+exports.formatLabels = formatLabels;
+const getProgressBarClasses = _ref2 => {
+  let {
+    consumptionPercentage,
+    contrastValue,
+    currentValue,
+    hiredValue,
+    isOverLimit,
+    styles
+  } = _ref2;
+  return {
+    root: `${isOverLimit && styles.overHiredBackgroundBar} ${styles.backgroundBar}`,
+    bar: `
+    ${!isOverLimit ? styles.foregroundBar : styles.overHiredForegroundBar}
+    ${currentValue > hiredValue && !contrastValue && styles.overHiredBackgroundBar}
+    ${!consumptionPercentage && styles.hidden}
+  `
+  };
+};
+exports.getProgressBarClasses = getProgressBarClasses;
+const getProgressOverlayValue = (rate, totalRange, value) => {
+  const rateName = rate?.name;
+  const defaultProgress = value / totalRange * 100;
+  switch (rateName) {
+    case 'R1':
+      return defaultProgress * 0.4;
+    case 'R2':
+      return defaultProgress * 0.55;
+    case 'R3':
+      return defaultProgress * 0.85;
+    case 'R4':
+      return defaultProgress * 1.13;
+    case 'R5':
+      return defaultProgress * 1.368;
+    case 'R6':
+      return defaultProgress * 1.37;
+    default:
+      return defaultProgress;
+  }
+};
+exports.getProgressOverlayValue = getProgressOverlayValue;