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

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/index.js

@@ -12,20 +12,21 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 var _ReadingRow = _interopRequireDefault(require("./components/ReadingRow"));
 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 ConsumptionSummary = _ref => {
   let {
+    classes = {},
     contextApiInfo,
-    periodNumber,
-    year,
-    initialReadingDate,
+    dataTestId,
     finalReadingDate,
-    totalSettlementsDays,
-    initialReadingValue,
     finalReadingValue,
-    totalConsumptionValue,
+    initialReadingDate,
+    initialReadingValue,
+    periodNumber,
     totalConsumptionUnit,
-    classes = {}
+    totalConsumptionValue,
+    totalSettlementsDays,
+    year
   } = _ref;
   const {
     config,
@@ -35,57 +36,63 @@ const ConsumptionSummary = _ref => {
     texts
   } = config;
   const formatDate = date => (0, _dayjs.default)(date).format('DD/MM/YYYY');
-  const daysLabel = totalSettlementsDays ? "(".concat(totalSettlementsDays, " ").concat(texts.consumptionPeriod.days, ")") : '';
+  const daysLabel = totalSettlementsDays ? `(${totalSettlementsDays} ${texts.consumptionPeriod.days})` : '';
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, periodNumber && year && /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUMMARY_TITLE,
-    className: _stylesModule.default.summaryTitle
-  }, "".concat(texts.Base.bimester, " ").concat(periodNumber, "/").concat((0, _dayjs.default)(year, 'YYYY').format('YY'))), initialReadingDate && finalReadingDate && /*#__PURE__*/_react.default.createElement(Label, {
+    className: _stylesModule.default.summaryTitle,
+    dataTestId: dataTestId ? `${dataTestId}summaryTitle` : ''
+  }, `${texts.Base.bimester} ${periodNumber}/${(0, _dayjs.default)(year, 'YYYY').format('YY')}`), initialReadingDate && finalReadingDate && /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUMMARY_SUBTITLE,
-    className: _stylesModule.default.daysLabel
-  }, "".concat(formatDate(initialReadingDate), " - ").concat(formatDate(finalReadingDate), " ").concat(daysLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.daysLabel,
+    dataTestId: dataTestId ? `${dataTestId}summarySubtitle` : ''
+  }, `${formatDate(initialReadingDate)} - ${formatDate(finalReadingDate)} ${daysLabel}`), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.substractionContainer
   }, /*#__PURE__*/_react.default.createElement(_ReadingRow.default, {
     alias: _aliases.SUMMARY_ROW,
+    dataTestId: dataTestId ? `${dataTestId}summaryRow.finalReading` : '',
+    disableUnit: true,
     numberAlias: _aliases.SUMMARY_ROW_NUMBER,
     text: texts.consumptionPeriod.finalReading,
-    value: finalReadingValue,
-    disableUnit: true
+    value: finalReadingValue
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.substraction
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.SUMMARY_ROW_FOCUSED
   }, "-")), /*#__PURE__*/_react.default.createElement(_ReadingRow.default, {
     alias: _aliases.SUMMARY_ROW,
+    dataTestId: dataTestId ? `${dataTestId}summaryRow.initialReading` : '',
+    disableUnit: true,
     numberAlias: _aliases.SUMMARY_ROW_NUMBER,
     text: texts.consumptionPeriod.initialReading,
-    value: initialReadingValue,
-    disableUnit: true
+    value: initialReadingValue
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.dash
   }), /*#__PURE__*/_react.default.createElement(_ReadingRow.default, {
     alias: _aliases.SUMMARY_RESULT,
+    dataTestId: dataTestId ? `${dataTestId}summaryRow.currentPeriodConsumption` : '',
     numberAlias: _aliases.SUMMARY_RESULT_NUMBER,
-    unitAlias: _aliases.SUMMARY_RESULT_UNIT,
     text: texts.consumptionPeriod.currentPeriodConsumption,
-    value: totalConsumptionValue,
-    unit: totalConsumptionUnit
+    unit: totalConsumptionUnit,
+    unitAlias: _aliases.SUMMARY_RESULT_UNIT,
+    value: totalConsumptionValue
   })));
 };
 ConsumptionSummary.propTypes = {
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string
+  }),
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  periodNumber: _propTypes.string,
-  year: _propTypes.string,
-  initialReadingDate: _propTypes.string,
+  dataTestId: _propTypes.string,
   finalReadingDate: _propTypes.string,
-  totalSettlementsDays: _propTypes.number,
-  initialReadingValue: _propTypes.number,
   finalReadingValue: _propTypes.number,
-  totalConsumptionValue: _propTypes.number,
+  initialReadingDate: _propTypes.string,
+  initialReadingValue: _propTypes.number,
+  periodNumber: _propTypes.string,
   totalConsumptionUnit: _propTypes.string,
-  classes: (0, _propTypes.shape)({
-    container: _propTypes.string
-  })
+  totalConsumptionValue: _propTypes.number,
+  totalSettlementsDays: _propTypes.number,
+  year: _propTypes.string
 };
 var _default = exports.default = (0, _WithContextApi.default)()(ConsumptionSummary);

package/dist/components/ConsumptionPeriod/components/HistoryGraph/index.js

@@ -13,7 +13,7 @@ var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 var _deviceSizes = require("../../../../constants/deviceSizes");
 var _BarChart = _interopRequireDefault(require("../../../BarChart"));
 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 HistoryGraph = _ref => {

package/dist/components/ConsumptionPeriod/components/Reading/index.js

@@ -14,16 +14,17 @@ var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"))
 var _IconAndDetails = _interopRequireDefault(require("../../../IconAndDetails"));
 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 Reading = _ref => {
   let {
+    classes = {},
     contextApiInfo,
-    title,
+    dataTestId,
     date,
     readingType,
     readingValue,
-    tooltip,
-    classes = {}
+    title,
+    tooltip
   } = _ref;
   const {
     assets,
@@ -43,7 +44,8 @@ const Reading = _ref => {
   } = assets;
   const TitleLabel = () => /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.READING_TITLE,
-    className: "".concat(!tooltip && _stylesModule.default.title)
+    className: `${!tooltip && _stylesModule.default.title}`,
+    dataTestId: dataTestId
   }, title);
   const EnergyIconStyled = () => /*#__PURE__*/_react.default.createElement(EnergyIcon, {
     style: {
@@ -51,57 +53,64 @@ const Reading = _ref => {
     }
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, tooltip ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.tooltipTitle
   }, /*#__PURE__*/_react.default.createElement(TitleLabel, null), /*#__PURE__*/_react.default.createElement(Tooltip, {
-    content: readingType === _readings.READING_TYPES.ESTIMATED ? texts.consumptionPeriod.estimatedReadingTooltip : texts.consumptionPeriod.faceToFaceReadingTooltip
+    content: readingType === _readings.READING_TYPES.ESTIMATED ? texts.consumptionPeriod.estimatedReadingTooltip : texts.consumptionPeriod.faceToFaceReadingTooltip,
+    dataTestId: dataTestId ? `${dataTestId}.faceToFaceReadingTooltip` : ''
   }, /*#__PURE__*/_react.default.createElement(InfoIcon, {
+    className: _stylesModule.default.infoIconTooltip,
+    "data-testid": dataTestId ? `${dataTestId}.tooltipIcon` : '',
     style: {
       fill: colors.tooltipIcon
-    },
-    className: _stylesModule.default.infoIconTooltip
+    }
   }))) : /*#__PURE__*/_react.default.createElement(TitleLabel, null), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.detailsContainer
   }, date && /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
+    classes: {
+      container: _stylesModule.default.iconAndDetailsContainer
+    },
+    dataTestId: dataTestId ? `${dataTestId}.iconAndDetails.readingDate.` : '',
     Icon: ReadingDateIcon,
     mainAlias: _aliases.READING_MAIN,
-    secondaryAlias: _aliases.READING_DETAIL,
     mainText: (0, _dayjs.default)(date).format('DD/MM/YYYY'),
-    secondaryText: texts.consumptionPeriod.readingDate,
+    secondaryAlias: _aliases.READING_DETAIL,
+    secondaryText: texts.consumptionPeriod.readingDate
+  }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     classes: {
       container: _stylesModule.default.iconAndDetailsContainer
-    }
-  }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
+    },
+    dataTestId: dataTestId ? `${dataTestId}.iconAndDetails.readingType.` : '',
     Icon: ReadingTypeIcon,
     mainAlias: _aliases.READING_MAIN,
     secondaryAlias: _aliases.READING_DETAIL,
     mainText: readingType === _readings.READING_TYPES.FACE_TO_FACE ? texts.Base.faceToFaceReading : readingType === _readings.READING_TYPES.ESTIMATED ? texts.Base.estimatedReading : '-',
-    secondaryText: texts.consumptionPeriod.readingType,
-    classes: {
-      container: _stylesModule.default.iconAndDetailsContainer
-    }
+    secondaryText: texts.consumptionPeriod.readingType
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: EnergyIconStyled,
-    mainAlias: _aliases.READING_STATE,
-    secondaryAlias: _aliases.READING_STATE_DETAIL,
-    secondaryText: texts.consumptionPeriod.meterReading,
     classes: {
       container: _stylesModule.default.meterReadingContainer
-    }
+    },
+    dataTestId: dataTestId ? `${dataTestId}.iconAndDetails.meterReading.` : '',
+    mainAlias: _aliases.READING_STATE,
+    secondaryAlias: _aliases.READING_STATE_DETAIL,
+    secondaryText: texts.consumptionPeriod.meterReading
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.READING_STATE
+    alias: _aliases.READING_STATE,
+    dataTestId: dataTestId ? `${dataTestId}.iconAndDetails.meterReading.value` : ''
   }, (0, _numeral.default)(readingValue).format('0,0')))));
 };
 Reading.propTypes = {
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string
+  }),
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  title: _propTypes.string,
+  dataTestId: _propTypes.string,
   date: _propTypes.string,
   readingType: _propTypes.string,
   readingValue: _propTypes.number,
-  classes: (0, _propTypes.shape)({
-    container: _propTypes.string
-  }),
+  title: _propTypes.string,
   tooltip: _propTypes.bool
 };
 var _default = exports.default = (0, _WithContextApi.default)()(Reading);

package/dist/components/ConsumptionPeriod/index.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
+var _billDataTypes = require("../../shared/types/billDataTypes");
+var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _periods = require("../../shared/utils/periods");
 var _readings = require("../../shared/utils/readings");
 var _readings2 = require("../../shared/constants/readings");
-var _smartBillTypes = require("../../shared/types/smartBillTypes");
-var _billDataTypes = require("../../shared/types/billDataTypes");
-var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
+var _testsIds = require("../../constants/testsIds");
 var _Reading = _interopRequireDefault(require("./components/Reading"));
 var _ConsumptionSummary = _interopRequireDefault(require("./components/ConsumptionSummary"));
 var _HistoryGraph = _interopRequireDefault(require("./components/HistoryGraph"));
 var _utils = require("./utils");
 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 ConsumptionPeriod = _ref => {
-  var _currentPeriod$settle, _currentPeriod$settle2;
   let {
     contextApiInfo,
     billData
@@ -36,27 +36,33 @@ const ConsumptionPeriod = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.readingsAndDesktopSummaryContainer
   }, /*#__PURE__*/_react.default.createElement(_Reading.default, {
-    title: texts.consumptionPeriod.initialReading,
-    date: currentPeriod === null || currentPeriod === void 0 || (_currentPeriod$settle = currentPeriod.settlements) === null || _currentPeriod$settle === void 0 ? void 0 : _currentPeriod$settle.start_date,
+    classes: {
+      container: `${_stylesModule.default.readingContainer} ${_stylesModule.default.initialReadingContainer}`
+    },
+    dataTestId: _testsIds.smartBill.consumptionPeriod.reading.initialReading,
+    date: currentPeriod?.settlements?.start_date,
     readingType: initialReading.type,
     readingValue: (0, _readings.getActiveEnergyRecord)(initialReading).value,
-    classes: {
-      container: "".concat(_stylesModule.default.readingContainer, " ").concat(_stylesModule.default.initialReadingContainer)
-    }
-  }), /*#__PURE__*/_react.default.createElement(_ConsumptionSummary.default, _extends({}, consumptionSummaryProps, {
+    title: texts.consumptionPeriod.initialReading
+  }), /*#__PURE__*/_react.default.createElement(_ConsumptionSummary.default, _extends({
+    dataTestId: _testsIds.smartBill.consumptionPeriod.consumptionSummary.desktop
+  }, consumptionSummaryProps, {
     classes: {
       container: _stylesModule.default.desktopSummary
     }
   })), /*#__PURE__*/_react.default.createElement(_Reading.default, {
-    title: texts.consumptionPeriod.finalReading,
-    date: currentPeriod === null || currentPeriod === void 0 || (_currentPeriod$settle2 = currentPeriod.settlements) === null || _currentPeriod$settle2 === void 0 ? void 0 : _currentPeriod$settle2.end_date,
-    readingType: finalReading.type,
-    readingValue: (0, _readings.getActiveEnergyRecord)(finalReading).value,
     classes: {
-      container: "".concat(_stylesModule.default.readingContainer, " ").concat(_stylesModule.default.finalReadingContainer)
+      container: `${_stylesModule.default.readingContainer} ${_stylesModule.default.finalReadingContainer}`
     },
+    dataTestId: _testsIds.smartBill.consumptionPeriod.reading.finalReading,
+    date: currentPeriod?.settlements?.end_date,
+    readingType: finalReading.type,
+    readingValue: (0, _readings.getActiveEnergyRecord)(finalReading).value,
+    title: texts.consumptionPeriod.finalReading,
     tooltip: true
-  })), /*#__PURE__*/_react.default.createElement(_ConsumptionSummary.default, _extends({}, consumptionSummaryProps, {
+  })), /*#__PURE__*/_react.default.createElement(_ConsumptionSummary.default, _extends({
+    dataTestId: _testsIds.smartBill.consumptionPeriod.consumptionSummary.mobile
+  }, consumptionSummaryProps, {
     classes: {
       container: _stylesModule.default.mobileSummary
     }

package/dist/components/Date/index.js

@@ -10,37 +10,41 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 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 Date = _ref => {
   let {
+    classes = {},
     contextApiInfo,
+    dataTestId,
     date,
-    text,
-    classes = {},
+    detailAlias,
     mainAlias,
-    detailAlias
+    text
   } = _ref;
   const {
     Label
   } = contextApiInfo;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
-    className: "".concat(_stylesModule.default.valueContainer, " ").concat(classes.value)
+    className: `${_stylesModule.default.valueContainer} ${classes.value}`,
+    dataTestId: dataTestId ? `${dataTestId}value` : ''
   }, (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY')), /*#__PURE__*/_react.default.createElement(Label, {
-    alias: detailAlias
+    alias: detailAlias,
+    dataTestId: dataTestId ? `${dataTestId}label` : ''
   }, text));
 };
 Date.propTypes = {
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  date: _propTypes.string,
-  text: _propTypes.string,
-  mainAlias: _propTypes.string,
-  detailAlias: _propTypes.string,
   classes: (0, _propTypes.shape)({
     container: _propTypes.string,
     value: _propTypes.string
-  })
+  }),
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  dataTestId: _propTypes.string,
+  date: _propTypes.string,
+  detailAlias: _propTypes.string,
+  mainAlias: _propTypes.string,
+  text: _propTypes.string
 };
 var _default = exports.default = (0, _WithContextApi.default)()(Date);

package/dist/components/DebtState/index.js

@@ -10,12 +10,13 @@ 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 DebtState = _ref => {
   let {
-    contextApiInfo,
+    isWarning,
     debtStatusLabel,
-    isWarning
+    dataTestId,
+    contextApiInfo
   } = _ref;
   const {
     assets,
@@ -26,7 +27,8 @@ const DebtState = _ref => {
     AdheredToServiceIcon
   } = assets;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(isWarning ? _stylesModule.default.withDebtsContainer : _stylesModule.default.adheredToAutomaticDebt, " ")
+    className: `${_stylesModule.default.container} ${isWarning ? _stylesModule.default.withDebtsContainer : _stylesModule.default.adheredToAutomaticDebt} `,
+    "data-testid": dataTestId
   }, isWarning ? /*#__PURE__*/_react.default.createElement(PendingDebtIcon, null) : /*#__PURE__*/_react.default.createElement(AdheredToServiceIcon, null), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.CATEGORY,
     className: _stylesModule.default.label,
@@ -35,7 +37,8 @@ const DebtState = _ref => {
 };
 DebtState.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  isWarning: _propTypes.bool,
-  debtStatusLabel: _propTypes.string
+  dataTestId: _propTypes.string,
+  debtStatusLabel: _propTypes.string,
+  isWarning: _propTypes.bool
 };
 var _default = exports.default = (0, _WithContextApi.default)()(DebtState);

package/dist/components/IconAndDetails/index.js

@@ -12,20 +12,21 @@ var _smartBillTypes = require("../../shared/types/smartBillTypes");
 var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 var _utils = require("../../utils");
 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 IconAndDetails = _ref => {
   let {
     children,
+    classes = {},
     contextApiInfo,
-    Icon,
-    mainText,
-    secondaryText,
+    dataTestId,
     descriptionText,
-    tooltip,
+    Icon,
     mainAlias,
+    mainText,
     secondaryAlias,
+    secondaryText,
     tertiaryAlias = secondaryAlias,
-    classes = {}
+    tooltip
   } = _ref;
   const {
     Label,
@@ -33,7 +34,7 @@ const IconAndDetails = _ref => {
   } = contextApiInfo;
   const repeatedData = mainText && secondaryText && (0, _string.stringCompare)(mainText, secondaryText);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, /*#__PURE__*/_react.default.createElement(Tooltip, {
     content: tooltip
   }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
@@ -42,26 +43,30 @@ const IconAndDetails = _ref => {
     className: _stylesModule.default.labels
   }, children || /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
-    className: _stylesModule.default.mainText
+    className: _stylesModule.default.mainText,
+    dataTestId: dataTestId ? `${dataTestId}mainText` : ''
   }, (0, _utils.stringOrDash)(mainText)), secondaryText && !repeatedData && /*#__PURE__*/_react.default.createElement(Label, {
     alias: tertiaryAlias,
-    className: _stylesModule.default.secondaryText
+    className: _stylesModule.default.secondaryText,
+    dataTestId: dataTestId ? `${dataTestId}secondaryText` : ''
   }, secondaryText), descriptionText && /*#__PURE__*/_react.default.createElement(Label, {
-    alias: secondaryAlias
+    alias: secondaryAlias,
+    dataTestId: dataTestId ? `${dataTestId}descriptionText` : ''
   }, descriptionText)));
 };
 IconAndDetails.propTypes = {
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string
+  }),
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  Icon: _componentsTypes.componentTypes,
-  mainText: _propTypes.string,
-  secondaryText: _propTypes.string,
+  dataTestId: _propTypes.string,
   descriptionText: _propTypes.string,
-  tooltip: _propTypes.string,
+  Icon: _componentsTypes.componentTypes,
   mainAlias: _propTypes.string,
+  mainText: _propTypes.string,
   secondaryAlias: _propTypes.string,
+  secondaryText: _propTypes.string,
   tertiaryAlias: _propTypes.string,
-  classes: (0, _propTypes.shape)({
-    container: _propTypes.string
-  })
+  tooltip: _propTypes.string
 };
 var _default = exports.default = (0, _WithContextApi.default)()(IconAndDetails);

package/dist/components/Magnitude/index.js

@@ -12,11 +12,12 @@ var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 var _utils = require("../../utils");
 var _utils2 = require("./utils");
 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 Magnitude = props => {
   const {
     classes = {},
     contextApiInfo,
+    dataTestId,
     disableUnit,
     Icon,
     numberAlias,
@@ -34,19 +35,22 @@ const Magnitude = props => {
   } = config.texts.Base;
   const variantProps = (0, _utils2.getVariantProps)(props);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(_stylesModule.default.icon, " ").concat(classes.icon)
-  }), (value !== null && value !== void 0 ? value : value === 0) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.numberAndUnit, " ").concat(classes.numberAndUnit)
+    className: `${_stylesModule.default.icon} ${classes.icon}`
+  }), value ?? value === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.numberAndUnit} ${classes.numberAndUnit}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: numberAlias,
-    className: variantProps.unitLabelStyles
+    className: variantProps.unitLabelStyles,
+    dataTestId: dataTestId ? `${dataTestId}.number` : ''
   }, (0, _utils.numberOrDash)(value)), !disableUnit && /*#__PURE__*/_react.default.createElement(Label, {
     alias: unitAlias,
-    className: classes.unitLabel
+    className: classes.unitLabel,
+    dataTestId: dataTestId ? `${dataTestId}.unit` : ''
   }, (0, _utils.stringOrDash)(unit))) : /*#__PURE__*/_react.default.createElement(Label, {
-    alias: textAlias
+    alias: textAlias,
+    dataTestId: dataTestId ? `${dataTestId}.noData` : ''
   }, noData));
 };
 Magnitude.propTypes = {
@@ -55,9 +59,11 @@ Magnitude.propTypes = {
     icon: _propTypes.string
   }),
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,
+  dataTestId: _propTypes.string,
   disableUnit: _propTypes.bool,
   Icon: _componentsTypes.componentTypes,
   numberAlias: _propTypes.string,
+  textAlias: _propTypes.string,
   unit: _propTypes.string,
   unitAlias: _propTypes.string,
   value: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string])

package/dist/components/Magnitude/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVariantProps = void 0;
 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 variants = [{
   id: 'small',
   unitLabelStyles: _stylesModule.default.unitSmall

package/dist/components/MainBillData/components/BillAlert/components/BillParticularConditions/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 BillParticularConditions = _ref => {
   let {
     contextApiInfo,
@@ -30,7 +30,7 @@ const BillParticularConditions = _ref => {
     className: _stylesModule.default.marginBottom
   }), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.PARTICULAR_CONDITIONS_TITLE,
-    className: "".concat(_stylesModule.default.title, " ").concat(_stylesModule.default.marginBottom)
+    className: `${_stylesModule.default.title} ${_stylesModule.default.marginBottom}`
   }, texts.mainBillData.particularConditionsTitle), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.particularConditionsList
   }, /*#__PURE__*/_react.default.createElement(Label, {
@@ -40,7 +40,7 @@ const BillParticularConditions = _ref => {
     alias: _aliases.PARTICULAR_CONDITION,
     key: particularCondition,
     className: _stylesModule.default.item
-  }, "* ".concat(particularCondition)))));
+  }, `* ${particularCondition}`))));
 };
 BillParticularConditions.propTypes = {
   contextApiInfo: _smartBillTypes.contextApiInfoTypes,

package/dist/components/MainBillData/components/BillAlert/index.js

@@ -6,12 +6,13 @@ 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 _aliases = require("../../../../shared/constants/aliases");
+var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
+var _testsIds = require("../../../../constants/testsIds");
 var _BillParticularConditions = _interopRequireDefault(require("./components/BillParticularConditions"));
 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 BillAlert = _ref => {
@@ -29,7 +30,7 @@ const BillAlert = _ref => {
   } = contextApiInfo;
   const {
     billAlertContainer
-  } = (config === null || config === void 0 ? void 0 : config.stylesConfig) || {};
+  } = config?.stylesConfig || {};
   const {
     texts
   } = config;
@@ -37,7 +38,7 @@ const BillAlert = _ref => {
   const handleAlertClick = () => setDialogOpened(true);
   const handleCloseDialog = () => setDialogOpened(false);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(billAlertContainer)
+    className: `${_stylesModule.default.container} ${billAlertContainer}`
   }, /*#__PURE__*/_react.default.createElement(Dialog, {
     acceptButton: {
       onClick: handleCloseDialog,
@@ -54,8 +55,9 @@ const BillAlert = _ref => {
     particularConditions: particularConditions,
     onAcceptPress: handleCloseDialog
   })), /*#__PURE__*/_react.default.createElement(Touchable, {
-    onClick: handleAlertClick,
-    className: _stylesModule.default.iconAndLabelContainer
+    className: _stylesModule.default.iconAndLabelContainer,
+    dataTestId: _testsIds.smartBill.mainBillData.billAlert.particularConditionsAlert,
+    onClick: handleAlertClick
   }, /*#__PURE__*/_react.default.createElement(assets.AlertIcon, null), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.BILL_ALERT,
     className: _stylesModule.default.label,