@widergy/utilitygo-smart-bill-web 3.10.0 → 3.12.0

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

@@ -0,0 +1,32 @@
+.titularCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 24px;
+}
+
+.titularDataContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.titularData {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 12px 0;
+}
+
+.titularDataTitle {
+  padding: 4px 0;
+}
+
+.titularFooter {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TotalCard = _ref => {
+  let {
+    totalAmountLabel,
+    formatAmount,
+    totalAmount,
+    firstExpiration,
+    firstExpirationDate,
+    secondExpiration,
+    secondExpirationDate
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.totalCard
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.total
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, totalAmountLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "accent",
+    variant: "title2",
+    weight: "medium"
+  }, formatAmount?.(totalAmount))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, firstExpiration?.(firstExpirationDate)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, secondExpiration?.(secondExpirationDate))));
+};
+TotalCard.propTypes = {
+  totalAmountLabel: _propTypes.string,
+  formatAmount: _propTypes.func,
+  totalAmount: _propTypes.string,
+  firstExpiration: _propTypes.func,
+  firstExpirationDate: _propTypes.string,
+  secondExpiration: _propTypes.func,
+  secondExpirationDate: _propTypes.string
+};
+var _default = exports.default = TotalCard;

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

@@ -0,0 +1,15 @@
+.totalCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 16px;
+}
+
+.total {
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+}

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

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
 var _billDataTypes = require("../../../../shared/types/billDataTypes");
-var _DebtStatusLabel = _interopRequireDefault(require("./components/DebtStatusLabel"));
 var _utils = require("./utils");
-var _RateCard = _interopRequireDefault(require("./components/RateCard"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _ColumnRenderer = _interopRequireDefault(require("./components/ColumnRenderer"));
 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 Billing = _ref => {
   let {
-    assets,
+    billingLayout,
     constants = {},
     consumptionLevels = [],
     components,
@@ -38,9 +36,6 @@ const Billing = _ref => {
     adherenceStatus,
     subsidyLevels
   } = constants;
-  const {
-    UtilityLogo
-  } = assets;
   const {
     handleAutomaticDebitAdherence = () => {},
     handleDownloadBill = () => {},
@@ -52,7 +47,6 @@ const Billing = _ref => {
     automaticDebit = {},
     digitalBill = {},
     downloadBill = {},
-    header = {},
     notAdhered,
     rateCard: rateCardTranslations,
     ratesTableLink,
@@ -60,10 +54,6 @@ const Billing = _ref => {
     totalAmountLabel,
     totalCard = {}
   } = translations;
-  const {
-    billIssueDate,
-    billTypeHelpText
-  } = header;
   const {
     title: digitalBillTitle
   } = digitalBill;
@@ -81,18 +71,15 @@ const Billing = _ref => {
     ivaConditionHelpText
   } = titularCard;
   const {
-    firstExpiration
+    firstExpiration,
+    secondExpiration
   } = totalCard;
   const {
-    bill_number: billNumber,
     client,
-    debt_status_label: debtStatusLabel,
     detail,
     expirations
   } = smartBill;
-  const debtStatusValidation = debtStatusLabel !== null;
   const currentPeriod = (0, _utils.getCurrentPeriod)(smartBill);
-  const issuedOnDate = (0, _utils.getFormattedDate)(currentPeriod?.settlements?.current?.issued_on);
   const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
   const {
     account_address: accountAddress,
@@ -102,6 +89,7 @@ const Billing = _ref => {
     iva_condition: ivaCondition
   } = client || {};
   const firstExpirationDate = (0, _utils.getFormattedDate)(expirations?.[0]?.date);
+  const secondExpirationDate = (0, _utils.getFormattedDate)(expirations?.[1]?.date);
   const {
     total_amount: totalAmount
   } = detail || {};
@@ -130,127 +118,32 @@ const Billing = _ref => {
     rightIcon: 'IconDownload',
     title: downloadBillTitle
   }];
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.generalContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billHeader
-  }, UtilityLogo && /*#__PURE__*/_react.default.createElement(UtilityLogo, {
-    className: _stylesModule.default.logo
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billHeaderLabels
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.valueAndHelpText
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "small"
-  }, billNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, billTypeHelpText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.valueAndHelpText
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "small"
-  }, issuedOnDate), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, billIssueDate)), debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
-    debtStatusLabel: debtStatusLabel,
-    isWarning: smartBill?.warning
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.detailColumns
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.leftColumn
-  }, actionCards?.map(_ref2 => {
-    let {
-      isAdhered,
-      leftIcon,
-      leftIconProps = {},
-      onClick,
-      rightIcon,
-      showStatus,
-      title
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
-      className: `${_stylesModule.default.cardContainer} ${!onClick && _stylesModule.default.unclickableCardContainer}`,
-      disabled: !onClick,
-      key: title,
-      onClick: onClick,
-      withRipple: true
-    }, isDesktopSize && /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, _extends({
-      colorTheme: "gray",
-      name: leftIcon
-    }, leftIconProps)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-      className: _stylesModule.default.cardTitle,
-      variant: "subtitle1",
-      weight: "medium"
-    }, title), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
-      type: "light",
-      variant: isAdhered ? 'success' : 'unassigned',
-      withoutIcon: !isAdhered
-    }, isAdhered ? adhered : notAdhered), onClick && /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.cardIconContainer
-    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
-      colorTheme: "accent",
-      name: rightIcon || 'IconChevronRight'
-    })));
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularCard
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "title2",
-    weight: "medium"
-  }, titularCardTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularDataContainer
-  }, accountAddress && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, accountAddress), accountAddress !== postalAddress && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, postalAddress), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, addressHelpText)), titularName && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, titularName), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, titularHelpText)), renderTitularFooter && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularFooter
-  }, clientNumber && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, clientNumberFormatter?.(clientNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, clientNumberHelpText)), ivaCondition && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titularData
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    className: _stylesModule.default.titularDataTitle,
-    weight: "bold"
-  }, ivaCondition), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray"
-  }, ivaConditionHelpText)))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.rightColumn
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.totalCard
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.total
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "subtitle1",
-    weight: "medium"
-  }, totalAmountLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "accent",
-    variant: "title2",
-    weight: "medium"
-  }, formatAmount?.(totalAmount))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    variant: "small",
-    weight: "medium"
-  }, firstExpiration?.(firstExpirationDate))), /*#__PURE__*/_react.default.createElement(_RateCard.default, {
+  const props = {
+    actionCards,
+    adhered,
+    notAdhered,
+    isDesktopSize,
+    titularCardTitle,
+    accountAddress,
+    postalAddress,
+    addressHelpText,
+    titularName,
+    titularHelpText,
+    clientNumberFormatter,
+    clientNumber,
+    clientNumberHelpText,
+    ivaCondition,
+    ivaConditionHelpText,
+    totalAmountLabel,
+    formatAmount,
+    totalAmount,
+    firstExpiration,
+    firstExpirationDate,
+    secondExpiration,
+    secondExpirationDate,
     consumptionLevels,
     components,
     currentPeriod,
-    formatAmount,
     normalizedRate,
     rateCardTranslations,
     ratesTableLink,
@@ -258,12 +151,25 @@ const Billing = _ref => {
     subsidy,
     subsidyLevels,
     trackRedirectionToExternalLink,
-    translations
-  }))));
+    translations,
+    renderTitularFooter
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.generalContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.cardsContainer
+  }, billingLayout.map(layoutArray => {
+    const filteredLayout = layoutArray.filter(item => item.enabled);
+    const layoutKey = `layout-${layoutArray.map(item => item.name).join('-')}`;
+    return /*#__PURE__*/_react.default.createElement(_ColumnRenderer.default, _extends({
+      column: filteredLayout,
+      key: layoutKey
+    }, props));
+  })));
 };
 Billing.propTypes = {
-  assets: _propTypes.object,
   constants: _propTypes.object,
+  billingLayout: _propTypes.array,
   consumptionLevels: _propTypes.array,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType

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

@@ -12,146 +12,16 @@
   }
 }
 
-.billHeader {
-  align-items: center;
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
+.cardsContainer {
+  align-items: flex-start;
   display: flex;
-  flex-wrap: wrap;
-  grid-gap: 16px;
-  justify-content: space-between;
-  padding: 12px 16px;
-}
-
-.logo {
-  height: 35px;
-  object-fit: contain;
-  width: auto;
-}
-
-.billHeaderLabels {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  grid-gap: 32px;
-  justify-content: space-between;
-  padding: 16px 0;
+  width: 100%;
 
-  @media #{$mobile} {
-    grid-gap: 16px;
-    padding: 0;
+  @media #{$tablet-mobile} {
+    flex-direction: column;
   }
-}
 
-.valueAndHelpText {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 4px;
-}
-
-.detailColumns {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  grid-gap: 32px;
-
-  @media #{$mobile} {
-    grid-gap: 24px;
+  > :last-child {
+    margin-right: 0;
   }
 }
-
-%column {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  grid-gap: 24px;
-}
-
-.leftColumn {
-  @extend %column;
-
-  @media #{$mobile} {
-    order: 2;
-  }
-}
-
-.rightColumn {
-  @extend %column;
-}
-
-.cardContainer {
-  align-items: center;
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  grid-gap: 16px;
-  justify-content: space-between;
-  padding: 16px;
-  transition: all 0.2s;
-}
-
-.unclickableCardContainer {
-  cursor: default;
-}
-
-.cardTitle {
-  flex: 1;
-}
-
-.cardIconContainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-}
-
-.titularCard {
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  flex-direction: column;
-  grid-gap: 24px;
-  padding: 24px;
-}
-
-.titularDataContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.titularData {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  grid-gap: 8px;
-  padding: 12px 0;
-}
-
-.titularDataTitle {
-  padding: 4px 0;
-}
-
-.titularFooter {
-  display: flex;
-  grid-gap: 16px;
-  justify-content: space-between;
-}
-
-.totalCard {
-  background-color: var(--light01);
-  border-radius: 8px;
-  box-shadow: var(--shadowGrayBottom1);
-  display: flex;
-  flex-direction: column;
-  grid-gap: 24px;
-  padding: 16px;
-}
-
-.total {
-  display: flex;
-  grid-gap: 8px;
-  justify-content: space-between;
-}

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

@@ -26,7 +26,7 @@ const Billing = _ref => {
     clarification,
     periodDetail
   } = texts?.billing || {};
-  const currentPeriod = smartBill?.periods.find(period => period.current);
+  const currentPeriod = smartBill?.periods?.find(period => period.current);
   const billingsToShow = (0, _utils.getBillingsToShow)(currentPeriod?.settlements);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container

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

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CONSUMPTION_CARDS = void 0;
+exports.START = exports.END = exports.DAY = exports.DATE_FORMAT_WITH_YEAR = exports.DATE_FORMAT = exports.CONSUMPTION_CARDS = void 0;
 const CONSUMPTION_CARDS = exports.CONSUMPTION_CARDS = [{
   icon: 'EnergyIconConsumptionBoxFilled',
   key: 'consumptionCalculationCard'
 }, {
   icon: 'IconReceipt2',
   key: 'billingCard'
-}];
+}];
+const START = exports.START = 'inicio';
+const END = exports.END = 'fin';
+const DATE_FORMAT = exports.DATE_FORMAT = 'D [de] MMMM';
+const DATE_FORMAT_WITH_YEAR = exports.DATE_FORMAT_WITH_YEAR = 'D [de] MMMM [de] YYYY';
+const DAY = exports.DAY = 'day';

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

@@ -7,12 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BimestralConsumption = _ref => {
   let {
     assets,
+    smartBill,
     texts
   } = _ref;
   const bimestralConsumptionTexts = texts?.bimestralConsumption;
@@ -23,6 +25,24 @@ const BimestralConsumption = _ref => {
   const {
     BackgroundVector
   } = assets?.bimestral || {};
+  const readingPeriods = smartBill?.reading_periods || [];
+  const startDate = readingPeriods.find(period => period.moment === _constants.START)?.date;
+  const endDate = readingPeriods.find(period => period.moment === _constants.END)?.date;
+  const formatDate = function (dateString) {
+    let includeYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!dateString) return '';
+    const format = includeYear ? _constants.DATE_FORMAT_WITH_YEAR : _constants.DATE_FORMAT;
+    return (0, _dayjs.default)(dateString).locale('es').format(format);
+  };
+  const calculateTotalDays = (start, end) => {
+    if (!start || !end) return 0;
+    const startMoment = (0, _dayjs.default)(start);
+    const endMoment = (0, _dayjs.default)(end);
+    return endMoment.diff(startMoment, _constants.DAY);
+  };
+  const formattedStartDate = formatDate(startDate, false);
+  const formattedEndDate = formatDate(endDate, true);
+  const totalDays = calculateTotalDays(startDate, endDate);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.bimestralConsumption
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -37,8 +57,14 @@ const BimestralConsumption = _ref => {
       icon,
       key
     } = _ref2;
-    const title = bimestralConsumptionTexts?.[key]?.title;
-    const description = bimestralConsumptionTexts?.[key]?.description;
+    const {
+      title,
+      description
+    } = bimestralConsumptionTexts?.[key]?.({
+      formattedStartDate,
+      formattedEndDate,
+      totalDays
+    });
     return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
       adornment: {
         position: 'left',
@@ -73,6 +99,7 @@ const BimestralConsumption = _ref => {
 };
 BimestralConsumption.propTypes = {
   assets: _propTypes.object,
+  smartBill: _propTypes.object,
   texts: _propTypes.object
 };
 var _default = exports.default = BimestralConsumption;

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

@@ -16,6 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Consumptions = _ref => {
   let {
     assets,
+    reverseRow = {},
     smartBill,
     translations
   } = _ref;
@@ -27,6 +28,7 @@ const Consumptions = _ref => {
     className: _stylesModule.default.generalContainer
   }, /*#__PURE__*/_react.default.createElement(_BimestralConsumption.default, {
     assets: assets,
+    smartBill: smartBill,
     texts: translations
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.consumptionDetail
@@ -36,7 +38,7 @@ const Consumptions = _ref => {
     variant: "title3",
     weight: "medium"
   }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, description)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.consumptionDetailColumns
+    className: `${_stylesModule.default.consumptionDetailColumns} ${reverseRow}`
   }, /*#__PURE__*/_react.default.createElement(_CurrentConsumption.default, {
     assets: assets,
     smartBill: smartBill,
@@ -48,6 +50,7 @@ const Consumptions = _ref => {
 };
 Consumptions.propTypes = {
   assets: _propTypes.object,
+  reverseRow: _propTypes.object,
   smartBill: _billDataTypes.billDataTypes,
   translations: _propTypes.object
 };

package/dist/components/SmartBillSummary/utils.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTabOptions = exports.getDefaultCurrentTab = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
-var _lodash = require("lodash");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _tabs = require("../../shared/constants/tabs");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getTabOptions = (isDesktopSize, tabOptions, smartBill) => {
+const getTabOptions = (isDesktopSize, onboardingSteps, tabOptions, smartBill) => {
   const hasBimestralPeriodicity = smartBill?.periods?.some(period => period.settlements?.periodicity === _constants.BIMESTRAL_PERIODICITY);
-  return tabOptions.map(tab => ({
+  const filteredTabs = tabOptions.map(tab => ({
     ...tab,
     icon: isDesktopSize ? /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       name: tab.icon
@@ -24,7 +24,33 @@ const getTabOptions = (isDesktopSize, tabOptions, smartBill) => {
     } = _ref;
     return enabled && (value !== _tabs.SMARTBILL_TABS.CONSUMPTIONS || hasBimestralPeriodicity);
   });
+  if (!(0, _isEmpty.default)(onboardingSteps)) {
+    const tabPositions = {};
+    filteredTabs.forEach((tab, index) => {
+      tabPositions[tab.value] = index + 1;
+    });
+    const filteredOnboardingSteps = [...onboardingSteps].reduce((acc, step) => {
+      if (step.element && step.element.includes(_constants.TAB_SELECTOR)) {
+        const match = step.element.match(_constants.TAB_VALUE_REGEX);
+        if (match && tabPositions[match[_constants.CAPTURED_VALUE_REGEX]]) {
+          return [...acc, {
+            ...step,
+            element: `.smartbill-tab:nth-child(${tabPositions[match[_constants.CAPTURED_VALUE_REGEX]]})`
+          }];
+        }
+      }
+      return [...acc, step];
+    }, []);
+    return {
+      tabs: filteredTabs,
+      onboardingSteps: filteredOnboardingSteps
+    };
+  }
+  return {
+    tabs: filteredTabs,
+    onboardingSteps
+  };
 };
 exports.getTabOptions = getTabOptions;
-const getDefaultCurrentTab = tabOptions => !(0, _lodash.isEmpty)(tabOptions) && (tabOptions.find(tab => tab?.defaultSelected) || tabOptions?.[0])?.value;
+const getDefaultCurrentTab = tabOptions => !(0, _isEmpty.default)(tabOptions) && (tabOptions.find(tab => tab?.defaultSelected) || tabOptions?.[0])?.value;
 exports.getDefaultCurrentTab = getDefaultCurrentTab;