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

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [3.1.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.0.4...v3.1.0) (2025-03-07)
+
+
+### Bug Fixes
+
+* minor change ([9c6003a](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/9c6003a8d53237c56da159ccb943cf9d51998793))
+
+
+### Features
+
+* [AUT-632] library test ids ([b9c2742](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/b9c274272946e5df9d896fc5f62bd7da4fd7935d))
+
+## [3.0.4](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.0.3...v3.0.4) (2024-04-19)
+
+
+### Bug Fixes
+
+* styles fixes ([#40](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/40)) ([63d5402](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/63d5402d91f2d3974ab01566ab91a34d17ff9b18))
+
 ## [3.0.3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.0.2...v3.0.3) (2024-04-10)
 
 

package/dist/components/Advice/index.js

@@ -10,7 +10,7 @@ var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 var _aliases = require("../../shared/constants/aliases");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Advice = _ref => {
   let {
     contextApiInfo,

package/dist/components/Amount/index.js

@@ -14,13 +14,14 @@ var _billDataTypes = require("../../shared/types/billDataTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 var _StyledAmount = _interopRequireDefault(require("../StyledAmount"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Amount = _ref => {
-  var _expirations$;
   let {
-    contextApiInfo,
+    amountDataTestId,
     billData,
     containerClassName,
+    contextApiInfo,
+    expirationDataTestId,
     withBottomMargin
   } = _ref;
   const {
@@ -46,38 +47,41 @@ const Amount = _ref => {
     text: secondExpirationDateBrief,
     expiration: (0, _expirations.getExpiration)(billData, 2)
   }];
-  const getExpirationComponent = item => {
-    var _item$expiration;
-    return (item === null || item === void 0 || (_item$expiration = item.expiration) === null || _item$expiration === void 0 ? void 0 : _item$expiration.date) && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.firstExpirationDateContainer, " ").concat(withBottomMargin && _stylesModule.default.withBottomMargin),
-      key: item.text
-    }, /*#__PURE__*/_react.default.createElement(Label, {
-      alias: _aliases.DETAIL
-    }, item.text), /*#__PURE__*/_react.default.createElement(Label, {
-      alias: _aliases.EXPIRATION,
-      className: _stylesModule.default.expiration
-    }, (0, _dayjs.default)(item.expiration.date, 'YYYY-MM-DD').format('DD/MM/YYYY')));
-  };
+  const getExpirationComponent = item => item?.expiration?.date && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.firstExpirationDateContainer} ${withBottomMargin && _stylesModule.default.withBottomMargin}`,
+    key: item.text
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.DETAIL,
+    dataTestId: `${expirationDataTestId}label`
+  }, item.text), /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.EXPIRATION,
+    className: _stylesModule.default.expiration,
+    dataTestId: `${expirationDataTestId}value`
+  }, (0, _dayjs.default)(item.expiration.date, 'YYYY-MM-DD').format('DD/MM/YYYY')));
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(containerClassName)
+    className: `${_stylesModule.default.container} ${containerClassName}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.amountContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.TITLE
+    alias: _aliases.TITLE,
+    dataTestId: `${amountDataTestId}label`
   }, amountTitle), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.AMOUNT,
     aliasDecimal: _aliases.AMOUNT_DECIMAL,
-    variant: "title",
+    amount: expirations[0]?.expiration.amount,
     currency: currency,
-    amount: (_expirations$ = expirations[0]) === null || _expirations$ === void 0 ? void 0 : _expirations$.expiration.amount
+    dataTestId: amountDataTestId,
+    variant: "title"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.expirations
   }, expirations.map(exp => getExpirationComponent(exp))));
 };
 Amount.propTypes = {
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  amountDataTestId: _propTypes.string,
   billData: _billDataTypes.billDataTypes,
   containerClassName: _propTypes.string,
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  expirationDataTestId: _propTypes.string,
   withBottomMargin: _propTypes.bool
 };
 var _default = exports.default = (0, _WithContextApi.default)()(Amount);

package/dist/components/Banner/index.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _smartBillTypes = require("../../shared/types/smartBillTypes");
+var _testsIds = require("../../constants/testsIds");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Banner = _ref => {
   let {
     contextApiInfo,
@@ -20,6 +21,7 @@ const Banner = _ref => {
     ExternalLink
   } = contextApiInfo;
   return /*#__PURE__*/_react.default.createElement(ExternalLink, {
+    dataTestId: _testsIds.smartBill.banner,
     key: externalLink,
     url: externalLink
   }, /*#__PURE__*/_react.default.createElement("img", {

package/dist/components/BarChart/index.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
+var _smartBillTypes = require("../../shared/types/smartBillTypes");
+var _testsIds = require("../../constants/testsIds");
 var _aliases = require("../../shared/constants/aliases");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _utils = require("./utils");
 var _constants = require("./constants");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 const BarChartSection = _ref => {
-  var _colors$barChart;
   let {
     contextApiInfo,
     data,
@@ -42,12 +42,13 @@ const BarChartSection = _ref => {
     processedData,
     xAxisDefinition
   } = (0, _react.useMemo)(() => (0, _utils.getProcessedData)(data, colors.barChart), [data]);
-  const yAxisLabel = unit && "".concat(texts.consumptionPeriod.consumption, " (").concat(unit, ")");
+  const yAxisLabel = unit && `${texts.consumptionPeriod.consumption} (${unit})`;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.sectionContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TITLE,
-    className: _stylesModule.default.title
+    className: _stylesModule.default.title,
+    dataTestId: _testsIds.smartBill.barChart.title
   }, texts.consumptionPeriod.barChartTitle), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.barChartContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -59,10 +60,11 @@ const BarChartSection = _ref => {
     className: _stylesModule.default.energyIcon
   }), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.DETAIL,
-    className: _stylesModule.default.yAxisLabel
+    className: _stylesModule.default.yAxisLabel,
+    dataTestId: _testsIds.smartBill.barChart.yAxisLabel
   }, yAxisLabel), /*#__PURE__*/_react.default.createElement(CalendarIcon, {
     style: {
-      fill: (_colors$barChart = colors.barChart) === null || _colors$barChart === void 0 ? void 0 : _colors$barChart.calendar
+      fill: colors.barChart?.calendar
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.graphContainer

package/dist/components/BillCalculation/components/ConceptCard/index.js

@@ -9,11 +9,12 @@ var _array = require("@widergy/web-utils/lib/array");
 var _propTypes = require("prop-types");
 var _aliases = require("../../../../shared/constants/aliases");
 var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
-var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
+var _testsIds = require("../../../../constants/testsIds");
 var _StyledAmount = _interopRequireDefault(require("../../../StyledAmount"));
+var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 const ConceptCard = _ref => {
   let {
     contextApiInfo,
@@ -42,24 +43,28 @@ const ConceptCard = _ref => {
   const Header = /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.BILL_CALC_CONCEPT
+    alias: _aliases.BILL_CALC_CONCEPT,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.header}concept_${index}.label`
   }, titleHeader), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.CONCEPT_CARD_AMOUNT,
     aliasDecimal: _aliases.CONCEPT_CARD_AMOUNT_DECIMAL,
     amount: total,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.line}concept_${index}.value.`,
     variant: "xlarge"
   }));
-  const handleRenderLines = list => (list.amount !== 0 || showZeroConcepts) && /*#__PURE__*/_react.default.createElement("div", {
+  const handleRenderLines = (list, i) => (list.amount !== 0 || showZeroConcepts) && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.lineContainer,
     key: list.title
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.conceptLineContainer, " ").concat(list.description && _stylesModule.default.conceptLineContainerMarginBottom)
+    className: `${_stylesModule.default.conceptLineContainer} ${list.description && _stylesModule.default.conceptLineContainerMarginBottom}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.CONCEPT_TITLE
+    alias: _aliases.CONCEPT_TITLE,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.line}concept_${index}.line_${i}.label`
   }, list.title), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.CONCEPT_LIST_AMOUNT,
     aliasDecimal: _aliases.CONCEPT_LIST_AMOUNT_DECIMAL,
     amount: list.amount,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.line}concept_${index}.line_${i}.value.`,
     variant: "large"
   })), list.description && /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.LINE_DESCRIPTION
@@ -69,12 +74,14 @@ const ConceptCard = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(Card, {
     classNames: {
-      base: "".concat(_stylesModule.default.container, " ").concat((0, _array.isEmpty)(lines) && _stylesModule.default.containerWithoutLines),
+      base: `${_stylesModule.default.container} ${(0, _array.isEmpty)(lines) && _stylesModule.default.containerWithoutLines}`,
       expandButtonIcon: _stylesModule.default.expandIcon,
-      expandableContent: "".concat(isOpen && _stylesModule.default.expandableContent)
+      expandableContent: `${isOpen && _stylesModule.default.expandableContent}`
     },
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.card}concept_${index}`,
     expandableIconProps: {
-      size: 'small'
+      size: 'small',
+      dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.expandButton}concept_${index}`
     },
     ExpandedIcon: ArrowUpwardIcon && (_ref2 => {
       let {
@@ -94,12 +101,12 @@ const ConceptCard = _ref => {
     }),
     header: Header,
     horizontal: true,
-    style: {
-      color: 'black'
-    },
     isCollapsible: !(0, _array.isEmpty)(lines),
     isOpen: isOpen,
-    onClick: handleOnClick
+    onClick: handleOnClick,
+    style: {
+      color: 'black'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.emptySpace
   }), lines.map(handleRenderLines));

package/dist/components/BillCalculation/components/Glossary/index.js

@@ -10,7 +10,7 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 var _aliases = require("../../../../shared/constants/aliases");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 Glossary = _ref => {

package/dist/components/BillCalculation/index.js

@@ -5,17 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _smartBillTypes = require("../../shared/types/smartBillTypes");
-var _billDataTypes = require("../../shared/types/billDataTypes");
-var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 var _StyledAmount = _interopRequireDefault(require("../StyledAmount"));
+var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
+var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _aliases = require("../../shared/constants/aliases");
+var _billDataTypes = require("../../shared/types/billDataTypes");
+var _testsIds = require("../../constants/testsIds");
 var _hooks = require("../../utils/hooks");
 var _utils = require("./utils");
 var _ConceptCard = _interopRequireDefault(require("./components/ConceptCard"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _Glossary = _interopRequireDefault(require("./components/Glossary"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 BillCalculation = _ref => {
@@ -69,19 +70,22 @@ const BillCalculation = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerSection
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.BILL_CALC_CONCEPT_TITLE
+    alias: _aliases.BILL_CALC_CONCEPT_TITLE,
+    dataTestId: _testsIds.smartBill.billCalculation.title
   }, title), isDesktopSize && /*#__PURE__*/_react.default.createElement(GlossaryRenderer, null)), detail.concepts.map(handleRenderConceptCard), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.totalAmountContainer, " ").concat(stylesConfig === null || stylesConfig === void 0 ? void 0 : stylesConfig.paymentTotal),
+    className: `${_stylesModule.default.totalAmountContainer} ${stylesConfig?.paymentTotal}`,
     style: {
       backgroundColor: colors.secondary
     }
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.BILL_CALC_TOTAL
+    alias: _aliases.BILL_CALC_TOTAL,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.footer}label`
   }, texts.Base.totalAmount), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: _aliases.BILL_CALC_AMOUNT,
     aliasDecimal: _aliases.BILL_CALC_AMOUNT_DECIMAL,
-    variant: "title",
-    amount: detail.total_amount
+    amount: detail.total_amount,
+    dataTestId: `${_testsIds.smartBill.billCalculation.conceptCard.line}value.`,
+    variant: "title"
   })), !isDesktopSize && /*#__PURE__*/_react.default.createElement(GlossaryRenderer, null));
 };
 BillCalculation.propTypes = {

package/dist/components/BillCalculation/utils.js

@@ -8,31 +8,30 @@ var _string = require("@widergy/web-utils/lib/string");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _periodicities = require("../../shared/constants/periodicities");
 var _periods = require("../../shared/utils/periods");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const periodToTitleMapper = (billData, texts, periodFormatter, withBillCalcTitleDate) => {
-  var _settlements$current, _settlements$current2;
   const currentPeriod = (0, _periods.getCurrentPeriod)(billData) || {};
   const {
     settlements
   } = currentPeriod;
-  const periodicity = settlements === null || settlements === void 0 ? void 0 : settlements.periodicity;
-  const currentSettlement = (settlements === null || settlements === void 0 || (_settlements$current = settlements.current) === null || _settlements$current === void 0 ? void 0 : _settlements$current.number) || '-';
-  const totalSettlements = (settlements === null || settlements === void 0 ? void 0 : settlements.total_settlements) || '-';
-  const periodNumber = (currentPeriod === null || currentPeriod === void 0 ? void 0 : currentPeriod.number) || '-';
-  const year = (currentPeriod === null || currentPeriod === void 0 ? void 0 : currentPeriod.year) || '-';
+  const periodicity = settlements?.periodicity;
+  const currentSettlement = settlements?.current?.number || '-';
+  const totalSettlements = settlements?.total_settlements || '-';
+  const periodNumber = currentPeriod?.number || '-';
+  const year = currentPeriod?.year || '-';
   const {
     settlement,
     period,
     bimester
   } = texts.Base;
-  const issuedDate = settlements === null || settlements === void 0 || (_settlements$current2 = settlements.current) === null || _settlements$current2 === void 0 ? void 0 : _settlements$current2.issued_on;
-  const issuedDateLabel = withBillCalcTitleDate ? " (".concat((0, _dayjs.default)(issuedDate, 'YYYY-MM-DD').format('MM/YYYY'), ")") : '';
+  const issuedDate = settlements?.current?.issued_on;
+  const issuedDateLabel = withBillCalcTitleDate ? ` (${(0, _dayjs.default)(issuedDate, 'YYYY-MM-DD').format('MM/YYYY')})` : '';
   if (periodFormatter) return periodFormatter({
-    startDate: settlements === null || settlements === void 0 ? void 0 : settlements.start_date,
-    endDate: settlements === null || settlements === void 0 ? void 0 : settlements.end_date
+    startDate: settlements?.start_date,
+    endDate: settlements?.end_date
   });
-  if ((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.MONTHLY)) return "".concat(year, " - ").concat(period, " ").concat(periodNumber).concat(issuedDateLabel);
-  if ((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.BIMONTHLY)) return "".concat(settlement, " ").concat(currentSettlement, " ").concat(texts.Base.ofPreposition, " ").concat(totalSettlements, " - ").concat(bimester, " ").concat(periodNumber).concat(issuedDateLabel);
+  if ((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.MONTHLY)) return `${year} - ${period} ${periodNumber}${issuedDateLabel}`;
+  if ((0, _string.stringToCompareWithoutAccentsInclusive)(periodicity, _periodicities.PERIODICITY.BIMONTHLY)) return `${settlement} ${currentSettlement} ${texts.Base.ofPreposition} ${totalSettlements} - ${bimester} ${periodNumber}${issuedDateLabel}`;
   return '-';
 };
 exports.periodToTitleMapper = periodToTitleMapper;

package/dist/components/BillSummary/components/BilledConcepts/components/Concept/index.js

@@ -7,25 +7,27 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _numeral = _interopRequireDefault(require("config/numeral"));
-var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
-var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 var _StyledAmount = _interopRequireDefault(require("../../../../../StyledAmount"));
-var _hooks = require("../../../../../../utils/hooks");
+var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 var _aliases = require("../../../../../../shared/constants/aliases");
+var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
+var _testsIds = require("../../../../../../constants/testsIds");
+var _hooks = require("../../../../../../utils/hooks");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Concept = _ref => {
   let {
+    color,
     contextApiInfo,
+    index,
     isFirst,
-    title,
+    negativeAmmount,
     percentage,
     progressBarPercentage,
-    value,
     showPercentage,
-    negativeAmmount,
     showProgressBar,
-    color
+    title,
+    value
   } = _ref;
   const {
     Label,
@@ -37,7 +39,7 @@ const Concept = _ref => {
   const alias = isFirst ? _aliases.CONCEPT_FIRST_AMOUNT : _aliases.CONCEPT_SECONDARY_AMOUNT;
   const aliasDecimal = isFirst ? _aliases.CONCEPT_FIRST_AMOUNT_DECIMAL : _aliases.CONCEPT_SECONDARY_AMOUNT_DECIMAL;
   const aliasName = isFirst ? _aliases.CONCEPT_FIRST_NAME : _aliases.CONCEPT_SECONDARY_NAME;
-  const percentageValue = "".concat((0, _numeral.default)(percentage).format('0,0.0'), "%");
+  const percentageValue = `${(0, _numeral.default)(percentage).format('0,0.0')}%`;
   const renderPercentageValidation = withProgresBar => showPercentage && percentage && (withProgresBar ? showProgressBar : !showProgressBar);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
@@ -49,45 +51,50 @@ const Concept = _ref => {
       backgroundColor: color
     }
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    alias: aliasName
-  }, "".concat(title, " ").concat(renderPercentageValidation(false) ? "(".concat(percentageValue, ")") : '')), !isDesktopSize && /*#__PURE__*/_react.default.createElement("div", {
+    alias: aliasName,
+    dataTestId: `${_testsIds.smartBill.billedConcepts.concept.title}${index}`
+  }, `${title} ${renderPercentageValidation(false) ? `(${percentageValue})` : ''}`), !isDesktopSize && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.mobileAmount
   }, /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: alias,
     aliasDecimal: aliasDecimal,
-    variant: "xlarge",
-    amount: value
+    amount: value,
+    dataTestId: `${_testsIds.smartBill.billedConcepts.amount}${index}.`,
+    variant: "xlarge"
   }))), renderPercentageValidation(true) && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.progressBarContainer
   }, /*#__PURE__*/_react.default.createElement(ProgressBar, {
-    value: progressBarPercentage,
     classNames: {
-      root: "".concat(_stylesModule.default.progressBarRoot, " ").concat(value === 0 && _stylesModule.default.hidden),
+      root: `${_stylesModule.default.progressBarRoot} ${value === 0 && _stylesModule.default.hidden}`,
       barColorPrimary: isFirst ? _stylesModule.default.primaryProgressBar : _stylesModule.default.grayProgressBar,
       label: isFirst ? _stylesModule.default.progressBarPrimaryLabel : _stylesModule.default.progressBarGrayLabel,
       container: _stylesModule.default.progressContainer
     },
-    withLabel: value !== 0,
-    customLabel: percentageValue
+    customLabel: percentageValue,
+    dataTestId: `${_testsIds.smartBill.billedConcepts.concept.progressBar}${index}`,
+    value: progressBarPercentage,
+    withLabel: value !== 0
   })), isDesktopSize && /*#__PURE__*/_react.default.createElement("div", {
     className: showProgressBar ? _stylesModule.default.progressBarValueContainer : _stylesModule.default.graphicValueContainer
   }, /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {
     alias: alias,
     aliasDecimal: aliasDecimal,
-    variant: "xlarge",
-    amount: value
+    amount: value,
+    dataTestId: `${_testsIds.smartBill.billedConcepts.concept.amount}${index}.`,
+    variant: "xlarge"
   })));
 };
 Concept.propTypes = {
+  color: _propTypes.string,
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  index: _propTypes.number,
   isFirst: _propTypes.bool,
-  title: _propTypes.string,
-  value: _propTypes.number,
+  negativeAmmount: _propTypes.bool,
   percentage: _propTypes.number,
   progressBarPercentage: _propTypes.number,
   showPercentage: _propTypes.bool,
-  negativeAmmount: _propTypes.bool,
   showProgressBar: _propTypes.bool,
-  color: _propTypes.string
+  title: _propTypes.string,
+  value: _propTypes.number
 };
 var _default = exports.default = (0, _WithContextApi.default)()(Concept);

package/dist/components/BillSummary/components/BilledConcepts/components/PieChartContainer/index.js

@@ -11,8 +11,8 @@ var _WithContextApi = _interopRequireDefault(require("../../../../../WithContext
 var _utils = require("../../utils");
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 const PieChartContainer = _ref => {
   let {
     concepts,

package/dist/components/BillSummary/components/BilledConcepts/index.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _aliases = require("../../../../shared/constants/aliases");
-var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
-var _billDataTypes = require("../../../../shared/types/billDataTypes");
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
+var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
+var _testsIds = require("../../../../constants/testsIds");
+var _aliases = require("../../../../shared/constants/aliases");
 var _constants = require("./constants");
 var _PieChartContainer = _interopRequireDefault(require("./components/PieChartContainer"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 BilledConcepts = _ref => {
-  var _billData$detail;
   let {
     contextApiInfo,
     billData
@@ -37,11 +37,8 @@ const BilledConcepts = _ref => {
   } = config.texts.billSummary;
   const [toggleOption, setToggleOption] = (0, _react.useState)(_constants.progressBar);
   const handleChangeToggleOption = newOption => setToggleOption(newOption);
-  const totalAmount = billData === null || billData === void 0 || (_billData$detail = billData.detail) === null || _billData$detail === void 0 ? void 0 : _billData$detail.total_amount;
-  const concepts = (0, _react.useMemo)(() => {
-    var _billData$detail2;
-    return (0, _utils.getOrderedAndColoredConcepts)(billData === null || billData === void 0 || (_billData$detail2 = billData.detail) === null || _billData$detail2 === void 0 ? void 0 : _billData$detail2.concepts, totalAmount, showZeroConcepts, (0, _utils.getColorsDefinition)(colors));
-  }, []);
+  const totalAmount = billData?.detail?.total_amount;
+  const concepts = (0, _react.useMemo)(() => (0, _utils.getOrderedAndColoredConcepts)(billData?.detail?.concepts, totalAmount, showZeroConcepts, (0, _utils.getColorsDefinition)(colors)), []);
   const negativeAmmount = concepts.some(concept => concept.total < 0);
   const additionalInfo = {
     showProgressBar: toggleOption === _constants.progressBar,
@@ -53,15 +50,17 @@ const BilledConcepts = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.TITLE
+    alias: _aliases.TITLE,
+    dataTestId: _testsIds.smartBill.billedConcepts.title
   }, billedConceptsTitle), !negativeAmmount && /*#__PURE__*/_react.default.createElement(Toggle, {
-    options: (0, _constants.toggleOptions)(assets),
-    selectedOption: toggleOption,
-    onChangeOption: handleChangeToggleOption,
     className: _stylesModule.default.toggle,
+    dataTestId: _testsIds.smartBill.billedConcepts.concept.toggle,
+    onChangeOption: handleChangeToggleOption,
     optionClassName: _stylesModule.default.toggleOption,
-    orientation: "horizontal"
-  })), !negativeAmmount && toggleOption === _constants.progressBar ? concepts.map((concept, index) => (0, _utils.renderConcept)(concept, additionalInfo, index === 0)) : /*#__PURE__*/_react.default.createElement(_PieChartContainer.default, {
+    options: (0, _constants.toggleOptions)(assets),
+    orientation: "horizontal",
+    selectedOption: toggleOption
+  })), !negativeAmmount && toggleOption === _constants.progressBar ? concepts.map((concept, index) => (0, _utils.renderConcept)(concept, additionalInfo, index === 0, index)) : /*#__PURE__*/_react.default.createElement(_PieChartContainer.default, {
     concepts: concepts,
     additionalInfo: additionalInfo
   }));

package/dist/components/BillSummary/components/BilledConcepts/utils.js

@@ -7,7 +7,7 @@ exports.renderConcept = exports.getOrderedAndColoredConcepts = exports.getItemCo
 var _react = _interopRequireDefault(require("react"));
 var _constants = require("./constants");
 var _Concept = _interopRequireDefault(require("./components/Concept"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const roundPercentage = value => Math.round(value * 10) / 10;
 const calculatePercentages = (billConcepts, totalAmount) => {
   const indexToAdjust = billConcepts.findIndex(concept => concept.total !== 0);
@@ -16,7 +16,7 @@ const calculatePercentages = (billConcepts, totalAmount) => {
 };
 exports.calculatePercentages = calculatePercentages;
 const getProgressBarPercentage = (maxPercentage, percentage) => percentage / maxPercentage * 100;
-const renderConcept = (conceptData, additionalInfo, isFirst) => {
+const renderConcept = (conceptData, additionalInfo, isFirst, index) => {
   const {
     title,
     total,
@@ -31,24 +31,25 @@ const renderConcept = (conceptData, additionalInfo, isFirst) => {
   } = additionalInfo;
   const showPercentage = !(percentage === 0);
   return /*#__PURE__*/_react.default.createElement(_Concept.default, {
+    color: !showProgressBar && color,
+    index: index,
+    isFirst: isFirst,
     key: title,
-    title: title,
+    negativeAmmount: negativeAmmount,
     percentage: showPercentage && !negativeAmmount && percentage,
     progressBarPercentage: progressBarPercentage,
     showPercentage: showPercentage,
-    negativeAmmount: negativeAmmount,
-    value: total,
-    total: totalAmount,
-    isFirst: isFirst,
     showProgressBar: showProgressBar,
-    color: !showProgressBar && color
+    title: title,
+    total: totalAmount,
+    value: total
   });
 };
 exports.renderConcept = renderConcept;
 const isZeroConcept = concept => concept.total === 0;
 const getSortedData = (concepts, showZeroConcepts) => {
-  const nonZeroConcepts = concepts === null || concepts === void 0 ? void 0 : concepts.filter(concept => !isZeroConcept(concept));
-  const zeroConcepts = showZeroConcepts && (concepts === null || concepts === void 0 ? void 0 : concepts.filter(isZeroConcept)) || [];
+  const nonZeroConcepts = concepts?.filter(concept => !isZeroConcept(concept));
+  const zeroConcepts = showZeroConcepts && concepts?.filter(isZeroConcept) || [];
   return {
     sortedConcepts: [...nonZeroConcepts, ...zeroConcepts],
     nonZeroLength: nonZeroConcepts.length