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

package/dist/components/MainBillData/components/BillBody/components/ClientData/index.js

@@ -7,13 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _seamlessImmutable = require("seamless-immutable");
 var _propTypes = require("prop-types");
+var _IconAndDetails = _interopRequireDefault(require("../../../../../IconAndDetails"));
+var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 var _aliases = require("../../../../../../shared/constants/aliases");
-var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
 var _billDataTypes = require("../../../../../../shared/types/billDataTypes");
-var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
-var _IconAndDetails = _interopRequireDefault(require("../../../../../IconAndDetails"));
+var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
+var _testsIds = require("../../../../../../constants/testsIds");
 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 ClientData = _ref => {
   let {
     contextApiInfo,
@@ -34,86 +35,94 @@ const ClientData = _ref => {
   } = assets;
   const client = (0, _seamlessImmutable.getIn)(billData, ['client'], {});
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(multipleSettlements ? _stylesModule.default.withOutAlertContainer : _stylesModule.default.withAlertContainer)
+    className: `${_stylesModule.default.container} ${multipleSettlements ? _stylesModule.default.withOutAlertContainer : _stylesModule.default.withAlertContainer}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TITLE,
-    className: _stylesModule.default.title
+    className: _stylesModule.default.title,
+    dataTestId: _testsIds.smartBill
   }, texts.mainBillData.clientDataTitle), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.LocationIcon,
-    mainText: client.account_address,
-    secondaryText: client.postal_address,
-    descriptionText: texts.mainBillData.clientDataLocation,
     classes: {
       container: _stylesModule.default.iconAndDetailsContainer
     },
+    dataTestId: _testsIds.smartBill.clientData.clientDataLocation,
+    descriptionText: texts.mainBillData.clientDataLocation,
+    Icon: assets.LocationIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.account_address,
     secondaryAlias: _aliases.DETAIL,
+    secondaryText: client.postal_address,
     tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.HolderIcon,
-    mainText: client.holder_name,
-    descriptionText: texts.mainBillData.holderName,
     classes: {
-      container: "".concat(_stylesModule.default.desktopMargin, " ").concat(_stylesModule.default.iconAndDetailsContainer)
+      container: `${_stylesModule.default.desktopMargin} ${_stylesModule.default.iconAndDetailsContainer}`
     },
+    dataTestId: _testsIds.smartBill.clientData.holderName,
+    descriptionText: texts.mainBillData.holderName,
+    Icon: assets.HolderIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.holder_name,
     secondaryAlias: _aliases.DETAIL,
     tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.accountAndIvaConditionContainer
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.AccountIcon,
-    mainText: client.client_number && formatters.clientNumberFormatter(client.client_number),
-    descriptionText: texts.mainBillData.clientNumber,
     classes: {
       container: _stylesModule.default.userAndAccountContainer
     },
+    dataTestId: _testsIds.smartBill.clientData.clientNumber,
+    descriptionText: texts.mainBillData.clientNumber,
+    Icon: assets.AccountIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.client_number && formatters.clientNumberFormatter(client.client_number),
     secondaryAlias: _aliases.DETAIL,
     tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.AccountIcon,
-    mainText: client.iva_condition,
-    descriptionText: texts.mainBillData.ivaCondition,
     classes: {
       container: _stylesModule.default.userAndAccountContainer
     },
+    dataTestId: _testsIds.smartBill.clientData.ivaCondition,
+    descriptionText: texts.mainBillData.ivaCondition,
+    Icon: assets.AccountIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.iva_condition,
     secondaryAlias: _aliases.DETAIL,
     tertiaryAlias: _aliases.MAIN_LIGHT
   })), client.adherence_to_digital_bill ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.adheredToDigitalBillContainer
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.EmailIcon,
-    mainText: client.email_digital_bill,
-    descriptionText: texts.mainBillData.emailDigitalBill,
     classes: {
       container: _stylesModule.default.emailContainer
     },
+    dataTestId: _testsIds.smartBill.clientData.emailDigitalBill,
+    descriptionText: texts.mainBillData.emailDigitalBill,
+    Icon: assets.EmailIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.email_digital_bill,
     secondaryAlias: _aliases.DETAIL,
     tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.adheredToDigitalBillLabelContainer
+    className: _stylesModule.default.adheredToDigitalBillLabelContainer,
+    "data-testid": _testsIds.smartBill.clientData.adheredToDigitalBill
   }, /*#__PURE__*/_react.default.createElement(AdheredToServiceIcon, null), /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.ADHERED_DIGITAL_BILL,
     className: _stylesModule.default.label
   }, texts.mainBillData.adheredToDigitalBill))) : /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.MailIcon,
-    mainText: client.account_address,
-    secondaryText: client.postal_address,
-    descriptionText: texts.mainBillData.clientDataPostalAdress,
     classes: {
       container: _stylesModule.default.emailContainer
     },
+    dataTestId: _testsIds.smartBill.clientData.clientDataPostalAdress,
+    descriptionText: texts.mainBillData.clientDataPostalAdress,
+    Icon: assets.MailIcon,
     mainAlias: _aliases.MAIN,
+    mainText: client.account_address,
     secondaryAlias: _aliases.DETAIL,
+    secondaryText: client.postal_address,
     tertiaryAlias: _aliases.MAIN_LIGHT
   }));
 };
 ClientData.propTypes = {
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   billData: _billDataTypes.billDataTypes,
+  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
   multipleSettlements: _propTypes.bool
 };
 var _default = exports.default = (0, _WithContextApi.default)()(ClientData);

package/dist/components/MainBillData/components/BillBody/components/Consumption/index.js

@@ -15,7 +15,7 @@ var _WithContextApi = _interopRequireDefault(require("../../../../../WithContext
 var _PowerProgresBar = _interopRequireDefault(require("../../../../../PowerProgresBar"));
 var _ConsumptionEnergyDetails = _interopRequireDefault(require("../../../../../ConsumptionEnergyDetails"));
 var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Consumption = _ref => {
   let {
     billData,
@@ -35,7 +35,7 @@ const Consumption = _ref => {
     multipleSettlements: multipleSettlements,
     billData: billData,
     consumptionComparison: showActiveReactiveComparison(billData)
-  }), showPower(billData) && (0, _utils.validateConsumptions)(hiredPowerConsumption === null || hiredPowerConsumption === void 0 ? void 0 : hiredPowerConsumption.value, registeredPowerConsumption === null || registeredPowerConsumption === void 0 ? void 0 : registeredPowerConsumption.value) && /*#__PURE__*/_react.default.createElement(_PowerProgresBar.default, {
+  }), showPower(billData) && (0, _utils.validateConsumptions)(hiredPowerConsumption?.value, registeredPowerConsumption?.value) && /*#__PURE__*/_react.default.createElement(_PowerProgresBar.default, {
     hiredPowerConsumption: hiredPowerConsumption,
     registeredPowerConsumption: registeredPowerConsumption,
     exceededPower: exceededPower

package/dist/components/MainBillData/components/BillBody/components/ReadingDetails/index.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _aliases = require("../../../../../../shared/constants/aliases");
-var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
-var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 var _IconAndDetails = _interopRequireDefault(require("../../../../../IconAndDetails"));
+var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
+var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
 var _billDataTypes = require("../../../../../../shared/types/billDataTypes");
+var _aliases = require("../../../../../../shared/constants/aliases");
+var _testsIds = require("../../../../../../constants/testsIds");
 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 ReadingDetails = _ref => {
   let {
     contextApiInfo,
@@ -36,56 +37,61 @@ const ReadingDetails = _ref => {
   const {
     showFeederLine
   } = validations;
-  const longMeterNumber = (meterNumber === null || meterNumber === void 0 ? void 0 : meterNumber.length) > 6;
+  const longMeterNumber = meterNumber?.length > 6;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(withParticularConditions && _stylesModule.default.withParticularConditions)
+    className: `${_stylesModule.default.container} ${withParticularConditions && _stylesModule.default.withParticularConditions}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TITLE,
-    className: _stylesModule.default.title
+    className: _stylesModule.default.title,
+    dataTestId: _testsIds.smartBill.mainBillData.billBody.readingDetails.readingTitle
   }, texts.mainBillData.readingTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.infoRow, " ").concat(longMeterNumber && _stylesModule.default.infoColumn)
+    className: `${_stylesModule.default.infoRow} ${longMeterNumber && _stylesModule.default.infoColumn}`
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.MeterIcon,
-    mainText: meterNumber,
-    descriptionText: texts.mainBillData.meterNumber,
-    tooltip: texts.mainBillData.meterNumberTooltip,
     classes: {
       container: longMeterNumber ? _stylesModule.default.leftItems : _stylesModule.default.desktopMeterMargin
     },
+    dataTestId: _testsIds.smartBill.mainBillData.billBody.readingDetails.iconAndDetails.meterNumber,
+    descriptionText: texts.mainBillData.meterNumber,
+    Icon: assets.MeterIcon,
     mainAlias: _aliases.MAIN_LIGHT,
-    secondaryAlias: _aliases.DETAIL
+    mainText: meterNumber,
+    secondaryAlias: _aliases.DETAIL,
+    tooltip: texts.mainBillData.meterNumberTooltip
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.ReadingTypeGenericIcon,
-    mainText: (0, _utils.mainText)(readingType, texts),
-    descriptionText: texts.mainBillData.readingType,
-    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip,
     classes: {
       container: _stylesModule.default.iconDetail
     },
+    dataTestId: _testsIds.smartBill.mainBillData.billBody.readingDetails.iconAndDetails.meterNumber,
+    descriptionText: texts.mainBillData.readingType,
+    Icon: assets.ReadingTypeGenericIcon,
     mainAlias: _aliases.MAIN_LIGHT,
-    secondaryAlias: _aliases.DETAIL
+    mainText: (0, _utils.mainText)(readingType, texts),
+    secondaryAlias: _aliases.DETAIL,
+    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip
   })), showFeederLine(billData) && transformationCenter && feederLine && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.transformationAndFeedingContainer
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.TransformationAndFeederCenterIcon,
-    mainText: transformationCenter,
-    descriptionText: texts.mainBillData.transformationCenter,
-    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip,
     classes: {
       container: _stylesModule.default.leftItems
     },
+    dataTestId: _testsIds.smartBill.mainBillData.billBody.readingDetails.iconAndDetails.meterNumber,
+    descriptionText: texts.mainBillData.transformationCenter,
+    Icon: assets.TransformationAndFeederCenterIcon,
     mainAlias: _aliases.MAIN_LIGHT,
-    secondaryAlias: _aliases.DETAIL
+    mainText: transformationCenter,
+    secondaryAlias: _aliases.DETAIL,
+    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
-    Icon: assets.TransformationAndFeederCenterIcon,
-    mainText: feederLine,
-    descriptionText: texts.mainBillData.feederCenter,
-    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip,
     classes: {
       container: _stylesModule.default.iconDetail
     },
+    dataTestId: _testsIds.smartBill.mainBillData.billBody.readingDetails.iconAndDetails.meterNumber,
+    descriptionText: texts.mainBillData.feederCenter,
+    Icon: assets.TransformationAndFeederCenterIcon,
     mainAlias: _aliases.MAIN_LIGHT,
-    secondaryAlias: _aliases.DETAIL
+    mainText: feederLine,
+    secondaryAlias: _aliases.DETAIL,
+    tooltip: texts.mainBillData.faceToFaceReadingTypeTooltip
   })));
 };
 ReadingDetails.propTypes = {

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

@@ -7,25 +7,25 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _array = require("@widergy/web-utils/lib/array");
 var _propTypes = require("prop-types");
-var _periods = require("../../../../shared/utils/periods");
-var _billDataTypes = require("../../../../shared/types/billDataTypes");
-var _readings = require("../../../../shared/utils/readings");
-var _readings2 = require("../../../../shared/constants/readings");
 var _Amount = _interopRequireDefault(require("../../../Amount"));
-var _hooks = require("../../../../utils/hooks");
 var _BillAlert = _interopRequireDefault(require("../BillAlert"));
 var _Period = _interopRequireDefault(require("../../../Period"));
 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 _testsIds = require("../../../../constants/testsIds");
+var _hooks = require("../../../../utils/hooks");
 var _ReadingDetails = _interopRequireDefault(require("./components/ReadingDetails"));
 var _Consumption = _interopRequireDefault(require("./components/Consumption"));
 var _ClientData = _interopRequireDefault(require("./components/ClientData"));
 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 BillBody = _ref => {
-  var _billData$client, _billData$client2;
   let {
     billData,
     multipleSettlements,
@@ -40,8 +40,8 @@ const BillBody = _ref => {
   } = contextApiInfo.config.validations;
   const withParticularConditions = !(0, _array.isEmpty)(billData.particular_conditions);
   const showAlternativeLayout = showAlternativeMainBillDataLayout(billData);
-  const transformationCenter = (_billData$client = billData.client) === null || _billData$client === void 0 ? void 0 : _billData$client.transformation_center;
-  const feederLine = (_billData$client2 = billData.client) === null || _billData$client2 === void 0 ? void 0 : _billData$client2.feeder_line;
+  const transformationCenter = billData.client?.transformation_center;
+  const feederLine = billData.client?.feeder_line;
   const readingType = (0, _readings.getReadingPeriod)(billData, _readings2.READING_MOMENTS.FINAL);
   const RenderClientData = () => /*#__PURE__*/_react.default.createElement(_ClientData.default, {
     billData: billData,
@@ -55,9 +55,11 @@ const BillBody = _ref => {
     feederLine: feederLine,
     billData: billData
   });
-  const AmountAndonsumptionRender = () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Amount.default, {
+  const AmountAndConsumptionRender = () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Amount.default, {
+    amountDataTestId: _testsIds.smartBill.mainBillData.billBody.amount.amount,
     billData: billData,
-    containerClassName: _stylesModule.default.amount
+    containerClassName: _stylesModule.default.amount,
+    expirationDataTestId: _testsIds.smartBill.mainBillData.billBody.amount.expiration
   }), withParticularConditions && /*#__PURE__*/_react.default.createElement(_BillAlert.default, {
     particularConditions: billData.particular_conditions,
     isDesktopSize: isDesktopSize
@@ -69,7 +71,7 @@ const BillBody = _ref => {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: showAlternativeLayout ? _stylesModule.default.amountAndConsumptionLeftContainer : _stylesModule.default.periodAndClientDataLeftContainer
-  }, showAlternativeLayout ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(AmountAndonsumptionRender, null)) : isDesktopSize && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Period.default, {
+  }, showAlternativeLayout ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(AmountAndConsumptionRender, null)) : isDesktopSize && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Period.default, {
     currentPeriod: currentPeriod,
     multipleSettlements: multipleSettlements
   }), /*#__PURE__*/_react.default.createElement(RenderClientData, null)), isDesktopSize && /*#__PURE__*/_react.default.createElement(RenderReadingDetails, null)), /*#__PURE__*/_react.default.createElement("div", {
@@ -77,7 +79,7 @@ const BillBody = _ref => {
   }, showAlternativeLayout ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isDesktopSize && /*#__PURE__*/_react.default.createElement(_Period.default, {
     currentPeriod: currentPeriod,
     multipleSettlements: multipleSettlements
-  }), !isDesktopSize && /*#__PURE__*/_react.default.createElement(RenderReadingDetails, null), /*#__PURE__*/_react.default.createElement(RenderClientData, null)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(AmountAndonsumptionRender, null), !isDesktopSize && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(RenderReadingDetails, null), /*#__PURE__*/_react.default.createElement(RenderClientData, null)))));
+  }), !isDesktopSize && /*#__PURE__*/_react.default.createElement(RenderReadingDetails, null), /*#__PURE__*/_react.default.createElement(RenderClientData, null)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(AmountAndConsumptionRender, null), !isDesktopSize && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(RenderReadingDetails, null), /*#__PURE__*/_react.default.createElement(RenderClientData, null)))));
 };
 BillBody.propTypes = {
   billData: _billDataTypes.billDataTypes,

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/index.js

@@ -6,12 +6,13 @@ 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"));
+var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
+var _testsIds = require("../../../../../../constants/testsIds");
 var _utils = require("../../../../../../utils");
 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 TypeAndNumber = _ref => {
   let {
     contextApiInfo,
@@ -29,17 +30,20 @@ const TypeAndNumber = _ref => {
     texts
   } = config;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.billTypeAndNumberContainer, " ").concat(classes.value)
+    className: `${_stylesModule.default.billTypeAndNumberContainer} ${classes.value}`
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TYPE_AND_NUMBER_TYPE,
-    className: _stylesModule.default.billType
+    className: _stylesModule.default.billType,
+    dataTestId: _testsIds.smartBill.mainBillData.billHeader.typeAndNumber.billType
   }, (0, _utils.stringOrDash)(billType)), /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
-    className: _stylesModule.default.billNumber
+    className: _stylesModule.default.billNumber,
+    dataTestId: _testsIds.smartBill.mainBillData.billHeader.typeAndNumber.billNumber
   }, (0, _utils.stringOrDash)(billNumber))), /*#__PURE__*/_react.default.createElement(Label, {
-    alias: detailAlias
+    alias: detailAlias,
+    dataTestId: _testsIds.smartBill.mainBillData.billHeader.typeAndNumber.billTypeAndNumber
   }, texts.mainBillData.billTypeAndNumber));
 };
 TypeAndNumber.propTypes = {

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

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _periods = require("../../../../shared/utils/periods");
-var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
-var _billDataTypes = require("../../../../shared/types/billDataTypes");
-var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
 var _Date = _interopRequireDefault(require("../../../Date"));
 var _DebtState = _interopRequireDefault(require("../../../DebtState"));
 var _Period = _interopRequireDefault(require("../../../Period"));
-var _hooks = require("../../../../utils/hooks");
+var _WithContextApi = _interopRequireDefault(require("../../../WithContextApi"));
+var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _smartBillTypes = require("../../../../shared/types/smartBillTypes");
 var _aliases = require("../../../../shared/constants/aliases");
+var _periods = require("../../../../shared/utils/periods");
+var _testsIds = require("../../../../constants/testsIds");
+var _hooks = require("../../../../utils/hooks");
 var _TypeAndNumber = _interopRequireDefault(require("./components/TypeAndNumber"));
 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 BillHeader = _ref => {
-  var _currentPeriod$settle, _currentPeriod$settle2;
   let {
     contextApiInfo,
     billData
@@ -36,8 +36,8 @@ const BillHeader = _ref => {
     isMobileOrTablet
   } = (0, _hooks.useScreenSize)();
   const currentPeriod = (0, _periods.getCurrentPeriod)(billData);
-  const issuedOnDate = currentPeriod === null || currentPeriod === void 0 || (_currentPeriod$settle = currentPeriod.settlements) === null || _currentPeriod$settle === void 0 || (_currentPeriod$settle = _currentPeriod$settle.current) === null || _currentPeriod$settle === void 0 ? void 0 : _currentPeriod$settle.issued_on;
-  const totalSettlements = currentPeriod === null || currentPeriod === void 0 || (_currentPeriod$settle2 = currentPeriod.settlements) === null || _currentPeriod$settle2 === void 0 ? void 0 : _currentPeriod$settle2.total_settlements;
+  const issuedOnDate = currentPeriod?.settlements?.current?.issued_on;
+  const totalSettlements = currentPeriod?.settlements?.total_settlements;
   const debtStatusLabel = billData.debt_status_label;
   const debtStatusValidation = debtStatusLabel !== null;
   const multipleSettlements = totalSettlements > 1;
@@ -46,8 +46,9 @@ const BillHeader = _ref => {
     detailAlias: _aliases.DETAIL
   };
   const DebtStatusLabel = () => /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(billData.warning ? _stylesModule.default.pendingDebtLabelContainer : _stylesModule.default.adheredToAutomaticDebtContainer)
+    className: `${billData.warning ? _stylesModule.default.pendingDebtLabelContainer : _stylesModule.default.adheredToAutomaticDebtContainer}`
   }, /*#__PURE__*/_react.default.createElement(_DebtState.default, {
+    dataTestId: _testsIds.smartBill.mainBillData.billHeader.debtState,
     debtStatusLabel: debtStatusLabel,
     isWarning: billData.warning
   }));
@@ -57,7 +58,9 @@ const BillHeader = _ref => {
     className: _stylesModule.default.headerRow
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.logoContainer
-  }, /*#__PURE__*/_react.default.createElement(assets.UtilityLogo, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(assets.UtilityLogo, {
+    "data-testid": _testsIds.smartBill.mainBillData.billHeader.utilityLogo
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billDataAndDebtStateContainer
   }, /*#__PURE__*/_react.default.createElement(_TypeAndNumber.default, _extends({}, aliases, {
     billType: billData.bill_type,
@@ -67,12 +70,13 @@ const BillHeader = _ref => {
       container: _stylesModule.default.typeAndNumberContainer
     }
   })), issuedOnDate && /*#__PURE__*/_react.default.createElement(_Date.default, _extends({}, aliases, {
-    date: issuedOnDate,
-    text: texts.Base.issuedOnDate,
     classes: {
       value: _stylesModule.default.date,
       container: isDesktopSize && debtStatusValidation && _stylesModule.default.dateContainer
-    }
+    },
+    dataTestId: _testsIds.smartBill.mainBillData.billHeader.issuedOnDate,
+    date: issuedOnDate,
+    text: texts.Base.issuedOnDate
   })), isDesktopSize && debtStatusValidation && /*#__PURE__*/_react.default.createElement(DebtStatusLabel, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.debtStatusLabelMobile
   }, isMobileOrTablet && debtStatusValidation && /*#__PURE__*/_react.default.createElement(DebtStatusLabel, null))), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/MainBillData/index.js

@@ -13,17 +13,16 @@ var _theme = require("./theme");
 var _BillHeader = _interopRequireDefault(require("./components/BillHeader"));
 var _BillBody = _interopRequireDefault(require("./components/BillBody"));
 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 MainBillData = _ref => {
-  var _currentPeriod$settle;
   let {
     billData,
     classes
   } = _ref;
   const currentPeriod = (0, _periods.getCurrentPeriod)(billData);
-  const multipleSettlements = (currentPeriod === null || currentPeriod === void 0 || (_currentPeriod$settle = currentPeriod.settlements) === null || _currentPeriod$settle === void 0 ? void 0 : _currentPeriod$settle.total_settlements) > 1;
+  const multipleSettlements = currentPeriod?.settlements?.total_settlements > 1;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+    className: `${_stylesModule.default.container} ${classes.container}`
   }, /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
     billData: billData
   }), /*#__PURE__*/_react.default.createElement(_BillBody.default, {