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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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,25 @@
+"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"));
+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(() => /*#__PURE__*/_react.default.createElement("div", null, "Facturaci\xF3n: CX-201"),
+  // TODO
+  _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,70 @@
+"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,
+    loading,
+    smartBill,
+    tabOptions,
+    translations
+  } = _ref;
+  const filteredTabOptions = loading ? [] : (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,
+    loading,
+    smartBill,
+    translations
+  })));
+};
+SmartBillSummary.propTypes = {
+  assets: _propTypes.object,
+  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
+};
+var _default = exports.default = SmartBillSummary;

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

@@ -0,0 +1,48 @@
+@import '_sizes.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/Consumptions/components/Billing/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAG_ICON_SIZE = exports.DEFAULT_TAG_ICON = exports.DEFAULT_TAG_COLOR_THEME = void 0;
+const DEFAULT_TAG_ICON = exports.DEFAULT_TAG_ICON = 'IconCalendarEvent';
+const TAG_ICON_SIZE = exports.TAG_ICON_SIZE = 14;
+const DEFAULT_TAG_COLOR_THEME = exports.DEFAULT_TAG_COLOR_THEME = 'gray';

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _energyUi = require("@widergy/energy-ui");
+var _lodash = require("lodash");
+var _billDataTypes = require("../../../../../../shared/types/billDataTypes");
+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 }; }
+const Billing = _ref => {
+  let {
+    smartBill,
+    texts
+  } = _ref;
+  const {
+    title,
+    tagLabel,
+    clarification,
+    periodDetail
+  } = texts?.billing || {};
+  const currentPeriod = smartBill?.periods.find(period => period.current);
+  const billingsToShow = (0, _utils.getBillingsToShow)(currentPeriod?.settlements);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.details
+  }, billingsToShow.map(_ref2 => {
+    let {
+      colorTheme,
+      consumptions,
+      current,
+      icon,
+      issued_on: issuedOn,
+      number
+    } = _ref2;
+    const monthName = (0, _utils.getMonthName)(issuedOn);
+    const consumptionValue = consumptions?.[0].value;
+    const consumptionUnit = consumptions?.[0].unit;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: issuedOn,
+      className: `${_stylesModule.default.billing} ${current ? _stylesModule.default.currentBilling : ''}`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.consumptionDetail
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.consumption
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      variant: "title3",
+      weight: "medium"
+    }, consumptionValue), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      variant: "subtitle1",
+      weight: "medium"
+    }, consumptionUnit)), /*#__PURE__*/_react.default.createElement("div", {
+      className: `${_stylesModule.default.tag} ${current ? _stylesModule.default.billedTag : ''}`
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+      colorTheme: colorTheme || _constants.DEFAULT_TAG_COLOR_THEME,
+      name: icon || _constants.DEFAULT_TAG_ICON,
+      size: _constants.TAG_ICON_SIZE
+    }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      colorTheme: current ? 'success' : 'gray',
+      variant: "xsmall",
+      weight: "medium",
+      withMarkdown: true
+    }, tagLabel(current)))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      colorTheme: "gray"
+    }, periodDetail({
+      monthName,
+      number
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.clarifications,
+    withMarkdown: true
+  }, clarification({
+    firstMonth: (0, _lodash.capitalize)((0, _utils.getMonthName)(billingsToShow?.[1]?.issued_on)),
+    secondMonth: (0, _lodash.capitalize)((0, _utils.getMonthName)(billingsToShow?.[0]?.issued_on))
+  })));
+};
+Billing.propTypes = {
+  smartBill: _billDataTypes.billDataTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = Billing;

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

@@ -0,0 +1,55 @@
+.container {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  flex: 1;
+  height: fit-content;
+  padding: 24px;
+}
+
+.details {
+  margin: 24px -24px 0;
+}
+
+.billing {
+  border-bottom: 1px solid var(--light04);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+  padding: 16px 24px;
+}
+
+.currentBilling {
+  background-color: var(--semanticSuccess01);
+}
+
+.consumption {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.consumptionDetail {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  justify-content: space-between;
+}
+
+.tag {
+  align-items: center;
+  background-color: var(--light04);
+  border-radius: 4px;
+  display: flex;
+  grid-gap: 4px;
+  justify-content: space-between;
+  padding: 4px 8px;
+}
+
+.billedTag {
+  background-color: var(--semanticSuccess02);
+}
+
+.clarifications {
+  padding: 16px 0;
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/Billing/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMonthName = exports.getConsumptionLabel = exports.getBillingsToShow = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_dayjs.default.locale('es');
+const getBillingsToShow = settlements => {
+  const currentBilling = {
+    ...settlements?.current,
+    colorTheme: 'success',
+    current: true,
+    icon: 'IconCheck'
+  };
+  const remainingBillings = settlements?.remaining || [];
+  return [currentBilling, ...remainingBillings];
+};
+exports.getBillingsToShow = getBillingsToShow;
+const getMonthName = date => (0, _dayjs.default)(date).format('MMMM');
+exports.getMonthName = getMonthName;
+const getConsumptionLabel = consumptions => {
+  const consumption = consumptions?.[0];
+  const {
+    value,
+    unit
+  } = consumption || {};
+  return `${value} ${unit}`;
+};
+exports.getConsumptionLabel = getConsumptionLabel;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CONSUMPTION_CARDS = void 0;
+const CONSUMPTION_CARDS = exports.CONSUMPTION_CARDS = [{
+  icon: 'EnergyIconConsumptionBoxFilled',
+  key: 'consumptionCalculationCard'
+}, {
+  icon: 'IconReceipt2',
+  key: 'billingCard'
+}];

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/index.js

@@ -0,0 +1,78 @@
+"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 BimestralConsumption = _ref => {
+  let {
+    assets,
+    texts
+  } = _ref;
+  const bimestralConsumptionTexts = texts?.bimestralConsumption;
+  const {
+    title: bimestralTitle,
+    description: bimestralDescription
+  } = bimestralConsumptionTexts || {};
+  const {
+    BackgroundVector
+  } = assets?.bimestral || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumption
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumptionTitles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, bimestralTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, bimestralDescription)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumptionCards
+  }, _constants.CONSUMPTION_CARDS.map(_ref2 => {
+    let {
+      icon,
+      key
+    } = _ref2;
+    const title = bimestralConsumptionTexts?.[key]?.title;
+    const description = bimestralConsumptionTexts?.[key]?.description;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
+      adornment: {
+        position: 'left',
+        type: 'icon',
+        props: {
+          colorTheme: 'accent',
+          name: icon,
+          shade: '04',
+          size: 100
+        }
+      },
+      BackgroundImage: BackgroundVector,
+      classNames: {
+        backgroundImage: _stylesModule.default.backgroundImage,
+        container: _stylesModule.default.bimestralConsumptionCardContainer,
+        header: _stylesModule.default.bimestralConsumptionCardHeader
+      },
+      description: description,
+      descriptionProps: {
+        className: _stylesModule.default.bimestralConsumptionCardDescription,
+        withMarkdown: true
+      },
+      key: key,
+      size: "small",
+      title: title,
+      titleProps: {
+        variant: 'subtitle2',
+        weight: 'medium'
+      }
+    });
+  })));
+};
+BimestralConsumption.propTypes = {
+  assets: _propTypes.object,
+  texts: _propTypes.object
+};
+var _default = exports.default = BimestralConsumption;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/styles.module.scss

@@ -0,0 +1,43 @@
+$bimestral-consumption-card-min-width: 328px;
+
+.bimestralConsumption {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.bimestralConsumptionTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.bimestralConsumptionCards {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+  justify-content: space-between;
+}
+
+.bimestralConsumptionCardHeader {
+  align-items: center;
+  grid-gap: 12px;
+}
+
+.bimestralConsumptionCardContainer {
+  flex: 1;
+  min-width: $bimestral-consumption-card-min-width;
+}
+
+.bimestralConsumptionCardDescription {
+  strong {
+    color: var(--actionAccent05);
+  }
+}
+
+.backgroundImage {
+  height: 120%;
+  object-fit: cover;
+  right: -20%;
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCALE_FACTOR = exports.MIN_HEIGHT = exports.MAX_HEIGHT = void 0;
+const MIN_HEIGHT = exports.MIN_HEIGHT = 8;
+const MAX_HEIGHT = exports.MAX_HEIGHT = 160;
+const SCALE_FACTOR = exports.SCALE_FACTOR = 6;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
+var _propTypes = require("prop-types");
+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 ConsumptionComparison = _ref => {
+  let {
+    periodsToCompare = [],
+    texts
+  } = _ref;
+  const maxValue = (0, _utils.getMaxValue)(periodsToCompare);
+  const title = texts?.consumptions?.comparisonTitle;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.consumptionComparisonLabel,
+    colorTheme: "gray",
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, periodsToCompare.map(_ref2 => {
+    let {
+      consumptions,
+      current,
+      number,
+      settlements,
+      year
+    } = _ref2;
+    const {
+      value,
+      unit
+    } = consumptions?.[0] || {};
+    const barHeight = (0, _utils.getBarHeight)(maxValue, value);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: number + year,
+      className: _stylesModule.default.barContainer
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.value,
+      variant: "small"
+    }, (0, _utils.getFormattedValue)(value, unit)), /*#__PURE__*/_react.default.createElement("div", {
+      className: `${_stylesModule.default.bar} ${current ? _stylesModule.default.currentBar : ''}`,
+      style: {
+        height: `${barHeight}px`
+      }
+    }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.year,
+      variant: "small",
+      weight: "medium"
+    }, year), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.period,
+      colorTheme: "gray",
+      variant: "small"
+    }, (0, _utils.getPeriod)(settlements)));
+  })));
+};
+ConsumptionComparison.propTypes = {
+  periodsToCompare: _billDataTypes.periodsTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = ConsumptionComparison;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/styles.module.scss

@@ -0,0 +1,43 @@
+.consumptionComparisonLabel {
+  margin: 12px 0;
+}
+
+.container {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 16px;
+  height: 240px;
+  justify-content: center;
+}
+
+.barContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.bar {
+  background: var(--chartGradientVertical2);
+  border-radius: 6px 6px 0 0;
+  transition: height 0.3s ease;
+  width: 100%;
+}
+
+.currentBar {
+  background: var(--chartGradientVertical1);
+}
+
+.value {
+  margin: 12px 0 4px;
+}
+
+.year {
+  margin-top: 12px;
+}
+
+.period {
+  color: var(--gray02);
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPeriod = exports.getMaxValue = exports.getFormattedValue = exports.getBarHeight = void 0;
+var _lodash = require("lodash");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _numeral = _interopRequireDefault(require("numeral"));
+require("dayjs/locale/es");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_dayjs.default.locale('es');
+const getMaxValue = consumptionData => Math.max(...consumptionData.map(d => d.consumptions?.[0]?.value || 0));
+exports.getMaxValue = getMaxValue;
+const getBarHeight = (maxValue, value) => {
+  const adjustedValue = value ** _constants.SCALE_FACTOR;
+  const adjustedMax = maxValue ** _constants.SCALE_FACTOR;
+  return _constants.MIN_HEIGHT + adjustedValue / adjustedMax * (_constants.MAX_HEIGHT - _constants.MIN_HEIGHT);
+};
+exports.getBarHeight = getBarHeight;
+const getPeriod = function () {
+  let settlements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    end_date: endDate,
+    start_date: startDate
+  } = settlements;
+  const previousMonth = (0, _dayjs.default)(startDate);
+  const currentMonth = (0, _dayjs.default)(endDate);
+  const formattedPeriod = `${(0, _lodash.capitalize)(previousMonth.format('MMM'))} - ${(0, _lodash.capitalize)(currentMonth.format('MMM'))}`;
+  return formattedPeriod;
+};
+exports.getPeriod = getPeriod;
+const getFormattedValue = (value, unit) => value ? `${(0, _numeral.default)(value).format('0,0.[00]')} ${unit || ''}` : '-';
+exports.getFormattedValue = getFormattedValue;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionEvolution/index.js

@@ -0,0 +1,72 @@
+"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 _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ConsumptionEvolution = _ref => {
+  let {
+    assets,
+    periods,
+    texts
+  } = _ref;
+  const {
+    consumptionEvolution: backgroundImages
+  } = assets || {};
+  const {
+    consumptionEvolution: consumptionEvolutionLabels
+  } = texts || {};
+  const {
+    title
+  } = consumptionEvolutionLabels || {};
+  const {
+    colorTheme,
+    description,
+    icon,
+    Image,
+    percentage,
+    period
+  } = (0, _utils.getConsumptionComparison)(backgroundImages, consumptionEvolutionLabels, periods);
+  return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
+    BackgroundImage: Image,
+    classNames: {
+      container: _stylesModule.default.container,
+      backgroundImage: _stylesModule.default.backgroundImage
+    },
+    description: description,
+    title: title,
+    titleProps: {
+      variant: 'subtitle1',
+      weight: 'medium'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.childrenContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.chipContainer
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    area: true,
+    colorTheme: colorTheme,
+    name: icon,
+    shade: "04",
+    size: 24
+  }), percentage && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: colorTheme,
+    variant: "title2",
+    weight: "medium"
+  }, percentage)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: colorTheme
+  }, period)));
+};
+ConsumptionEvolution.propTypes = {
+  assets: _propTypes.object,
+  periods: _billDataTypes.periodsTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = ConsumptionEvolution;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionEvolution/styles.module.scss

@@ -0,0 +1,29 @@
+.container {
+  background-color: var(--light02);
+  box-shadow: none;
+  margin-top: 32px;
+}
+
+.backgroundImage {
+  right: 0;
+  width: auto;
+}
+
+.chipContainer {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 100px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  justify-content: center;
+  padding: 4px 8px;
+  width: fit-content;
+}
+
+.childrenContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionEvolution/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConsumptionComparison = void 0;
+var _lodash = require("lodash");
+const getConsumptionComparison = (backgroundImages, labels, periods) => {
+  const {
+    noData,
+    description,
+    successDescription,
+    warningDescription,
+    bimester
+  } = labels || {};
+  const {
+    LightEvolutionImage,
+    WarningEvolutionImage,
+    SuccessEvolutionImage
+  } = backgroundImages || {};
+  const {
+    current,
+    previous
+  } = periods?.reduce((acc, period) => {
+    if (period?.current && !acc.current) {
+      acc.current = period;
+    } else if (!period?.current && !acc.previous) {
+      acc.previous = period;
+    }
+    return acc;
+  }, {
+    current: null,
+    previous: null
+  }) || {};
+  const currentConsumption = current?.consumptions?.[0]?.value;
+  const previousConsumption = previous?.consumptions?.[0]?.value;
+  const period = current?.number;
+  if (!periods || (0, _lodash.isEmpty)(periods) || !currentConsumption || !previousConsumption) {
+    return {
+      colorTheme: 'gray',
+      description,
+      icon: 'IconEyeOff',
+      Image: LightEvolutionImage,
+      percentage: null,
+      period: noData
+    };
+  }
+  const percentageChange = previousConsumption === 0 && currentConsumption === 0 ? 0 : previousConsumption !== 0 ? (currentConsumption - previousConsumption) / previousConsumption * 100 : 100;
+  const formattedPercentage = `${Math.abs(Math.round(percentageChange))}%`;
+  if (currentConsumption > previousConsumption) {
+    return {
+      colorTheme: 'warning',
+      description: warningDescription(formattedPercentage),
+      icon: 'IconArrowUpRight',
+      Image: WarningEvolutionImage,
+      percentage: formattedPercentage,
+      period: bimester(period)
+    };
+  }
+  if (currentConsumption <= previousConsumption) {
+    return {
+      colorTheme: 'success',
+      description: successDescription(formattedPercentage),
+      icon: 'IconArrowDownRight',
+      Image: SuccessEvolutionImage,
+      percentage: formattedPercentage,
+      period: bimester(period)
+    };
+  }
+};
+exports.getConsumptionComparison = getConsumptionComparison;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/index.js

@@ -0,0 +1,64 @@
+"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 _billDataTypes = require("../../../../../../shared/types/billDataTypes");
+var _ConsumptionComparison = _interopRequireDefault(require("./components/ConsumptionComparison"));
+var _ConsumptionEvolution = _interopRequireDefault(require("./components/ConsumptionEvolution"));
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CurrentConsumption = _ref => {
+  let {
+    assets,
+    smartBill,
+    texts
+  } = _ref;
+  const {
+    periods
+  } = smartBill || {};
+  const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
+  const {
+    totalConsumption,
+    unit,
+    description
+  } = (0, _utils.getConsumptionLabels)(periodsToCompare, texts) || {};
+  const title = texts?.consumptions?.youConsumedTitle;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.details
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumption
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title1",
+    weight: "medium"
+  }, totalConsumption), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, unit)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    withMarkdown: true
+  }, description)), /*#__PURE__*/_react.default.createElement(_ConsumptionComparison.default, {
+    periodsToCompare: periodsToCompare,
+    texts: texts
+  }), /*#__PURE__*/_react.default.createElement(_ConsumptionEvolution.default, {
+    assets: assets,
+    periods: periodsToCompare,
+    texts: texts
+  }));
+};
+CurrentConsumption.propTypes = {
+  assets: _propTypes.object,
+  smartBill: _billDataTypes.billDataTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = CurrentConsumption;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/styles.module.scss

@@ -0,0 +1,22 @@
+.container {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  flex: 1;
+  padding: 24px;
+}
+
+.details {
+  border-bottom: 1px solid var(--light04);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+  margin: 0 -24px;
+  padding: 24px 24px 12px;
+}
+
+.consumption {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 8px;
+}

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/utils.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConsumptionPeriodsToCompare = exports.getConsumptionLabels = void 0;
+var _lodash = require("lodash");
+var _numeral = _interopRequireDefault(require("numeral"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_dayjs.default.locale('es');
+const getConsumptionPeriodsToCompare = function () {
+  let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (!(0, _lodash.isEmpty)(periods)) {
+    const currentPeriod = periods.find(period => period.current);
+    const previousYearPeriod = periods.find(period => period.number === currentPeriod.number && parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1);
+    return [currentPeriod, previousYearPeriod];
+  }
+};
+exports.getConsumptionPeriodsToCompare = getConsumptionPeriodsToCompare;
+const formatDate = date => {
+  if (!date) return '';
+  const day = (0, _dayjs.default)(date).format('D');
+  const month = (0, _lodash.capitalize)((0, _dayjs.default)(date).format('MMM'));
+  return `${day} de ${month}`;
+};
+const getConsumptionLabels = function () {
+  let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let texts = arguments.length > 1 ? arguments[1] : undefined;
+  const currentPeriod = periods?.find(period => period?.current);
+  const totalConsumption = currentPeriod?.consumptions?.[0];
+  const dailyConsumption = currentPeriod?.consumptions?.[1];
+  const {
+    value: totalConsumptionValue,
+    unit: totalConsumptionUnit
+  } = totalConsumption || {};
+  const {
+    value: dailyConsumptionValue,
+    unit: dailyConsumptionUnit
+  } = dailyConsumption || {};
+  const startDate = currentPeriod?.settlements?.start_date;
+  const endDate = currentPeriod?.settlements?.end_date;
+  const description = texts.consumptions.youConsumedDescription({
+    dailyConsumptionUnit,
+    dailyConsumptionValue: (0, _numeral.default)(dailyConsumptionValue).format('0,0.[00]'),
+    endDate: formatDate(endDate),
+    startDate: formatDate(startDate)
+  });
+  return {
+    description,
+    totalConsumption: (0, _numeral.default)(totalConsumptionValue).format('0,0.[00]'),
+    unit: totalConsumptionUnit
+  };
+};
+exports.getConsumptionLabels = getConsumptionLabels;

package/dist/components/SmartBillSummary/tabs/Consumptions/index.js

@@ -0,0 +1,54 @@
+"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 _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _BimestralConsumption = _interopRequireDefault(require("./components/BimestralConsumption"));
+var _CurrentConsumption = _interopRequireDefault(require("./components/CurrentConsumption"));
+var _Billing = _interopRequireDefault(require("./components/Billing"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Consumptions = _ref => {
+  let {
+    assets,
+    smartBill,
+    translations
+  } = _ref;
+  const {
+    title,
+    description
+  } = translations?.consumptions || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.generalContainer
+  }, /*#__PURE__*/_react.default.createElement(_BimestralConsumption.default, {
+    assets: assets,
+    texts: translations
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDetail
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDetailTitles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, description)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDetailColumns
+  }, /*#__PURE__*/_react.default.createElement(_CurrentConsumption.default, {
+    assets: assets,
+    smartBill: smartBill,
+    texts: translations
+  }), /*#__PURE__*/_react.default.createElement(_Billing.default, {
+    smartBill: smartBill,
+    texts: translations
+  }))));
+};
+Consumptions.propTypes = {
+  assets: _propTypes.object,
+  smartBill: _billDataTypes.billDataTypes,
+  translations: _propTypes.object
+};
+var _default = exports.default = Consumptions;

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

@@ -0,0 +1,31 @@
+@import '../../../../scss/variables/mediaQueries.module.scss';
+
+.generalContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 32px;
+  padding: 24px 32px;
+
+  @media #{$mobile} {
+    padding: 24px 16px;
+  }
+}
+
+.consumptionDetailTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.consumptionDetailColumns {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+}
+
+.consumptionDetail {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+}

package/dist/components/SmartBillSummary/utils.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTabOptions = exports.getDefaultCurrentTab = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _lodash = require("lodash");
+var _tabs = require("../../shared/constants/tabs");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getTabOptions = (tabOptions, smartBill) => {
+  const hasBimestralPeriodicity = smartBill?.periods?.some(period => period.settlements?.periodicity === _constants.BIMESTRAL_PERIODICITY);
+  return tabOptions.map(tab => ({
+    ...tab,
+    icon: /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+      name: tab.icon
+    })
+  })).filter(_ref => {
+    let {
+      enabled,
+      value
+    } = _ref;
+    return enabled && (value !== _tabs.SMARTBILL_TABS.CONSUMPTIONS || hasBimestralPeriodicity);
+  });
+};
+exports.getTabOptions = getTabOptions;
+const getDefaultCurrentTab = tabOptions => !(0, _lodash.isEmpty)(tabOptions) && (tabOptions.find(tab => tab?.defaultSelected) || tabOptions?.[0])?.value;
+exports.getDefaultCurrentTab = getDefaultCurrentTab;

package/dist/index.js

@@ -65,6 +65,18 @@ Object.defineProperty(exports, "SmartBillProvider", {
     return _SmartBillProvider.default;
   }
 });
+Object.defineProperty(exports, "SmartBillSummary", {
+  enumerable: true,
+  get: function () {
+    return _SmartBillSummary.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _tabs.SMARTBILL_TABS;
+  }
+});
 Object.defineProperty(exports, "billDataTypes", {
   enumerable: true,
   get: function () {
@@ -77,6 +89,7 @@ Object.defineProperty(exports, "rateStagesTypes", {
     return _rateStagesTypes.rateStagesTypes;
   }
 });
+var _SmartBillSummary = _interopRequireDefault(require("./components/SmartBillSummary"));
 var _SmartBillProvider = _interopRequireDefault(require("./components/SmartBillProvider"));
 var _MainBillData = _interopRequireDefault(require("./components/MainBillData"));
 var _ConsumptionPeriod = _interopRequireDefault(require("./components/ConsumptionPeriod"));
@@ -92,6 +105,7 @@ var Aliases = _aliases;
 exports.Aliases = _aliases;
 var _billDataTypes = require("./shared/types/billDataTypes");
 var _rateStagesTypes = require("./shared/types/rateStagesTypes");
+var _tabs = require("./shared/constants/tabs");
 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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/shared/constants/tabs.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SMARTBILL_TABS = void 0;
+const SMARTBILL_TABS = exports.SMARTBILL_TABS = {
+  CONSUMPTIONS: 'consumptionsTab',
+  BILLING: 'billingTab',
+  GLOSSARY: 'glossaryTab'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",