@widergy/utilitygo-smart-bill-web 3.22.0 → 3.24.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [3.24.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.23.0...v3.24.0) (2026-03-11)
+
+
+### Features
+
+* [EVEP-29] delinquency attachment ([#82](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/82)) ([164a7a0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/164a7a0535089f8c246aecad9f0a4a2d6d66d591))
+* [EVEP-422] change in footer ([#81](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/81)) ([61194aa](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/61194aabebd0d2d357ea942f228c7204d7209559))
+* [EVEP-430] change periods ([#84](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/84)) ([afd95a2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/afd95a26d54e4800c99a2211499614925dc822dc))
+
+# [3.23.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.22.0...v3.23.0) (2026-02-10)
+
+
+### Features
+
+* [DEV-766] mvp widergy/eslint-config package ([#76](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/76)) ([da619f9](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/da619f9457b2ac69edfd58996e2583239fb05a8a))
+
 # [3.22.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.21.0...v3.22.0) (2026-01-30)
 
 

package/dist/components/SmartBillSummary/index.js

@@ -21,7 +21,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SmartBillSummary = _ref => {
   let {
-    annex,
     assets,
     billingLayout,
     consumptionLayout,
@@ -90,6 +89,7 @@ const SmartBillSummary = _ref => {
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
   const [stableLoading, setStableLoading] = (0, _react.useState)(true);
+  const [attachmentOpen, setAttachmentOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     if (loading) {
       setStableLoading(true);
@@ -146,20 +146,24 @@ const SmartBillSummary = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.contentContainer
   }, tabs.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
-    annex,
+    attachment: smartBill?.attachment,
+    attachmentOpen,
+    attachmentText: translations.billingTab.header.attachmentText,
     UtilityLogo: assets.billingTab.UtilityLogo,
     billNumber: smartBill.bill_number,
     billType: smartBill.bill_type,
     billTypeHelpText: translations.billingTab.header.billTypeHelpText,
+    delinquency: smartBill?.client?.delinquency,
     issuedOnDate: (0, _utils2.getFormattedDate)((0, _utils2.getCurrentPeriod)(smartBill)?.settlements?.current?.issued_on),
     billIssueDate: translations.billingTab.header.billIssueDate,
-    debtStatusValidation: smartBill.debt_status_label !== null,
+    debtStatusValidation: !!smartBill.debt_status_label,
     debtStatusLabel: smartBill.debt_status_label,
     downloadSmartbillEnabled,
     downloadSmartBillLoading,
     handleDownloadSmartBill,
+    setAttachmentOpen,
     smartBill
-  }), tabs.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_SecondHeader.default, {
+  }), tabs.find(tab => tab.value === currentTab)?.secondHeader && /*#__PURE__*/_react.default.createElement(_SecondHeader.default, {
     accountNumber: smartBill.client?.client_number,
     accountNumberHelpText: translations.billingTab.secondHeader?.accountNumberHelpText,
     supplyAddress: smartBill.client?.account_address,
@@ -187,7 +191,7 @@ const SmartBillSummary = _ref => {
     utils,
     periodSpan,
     progressBarConcept
-  })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+  })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
     arrow: false,
     content: isDesktopSize ? widyTooltipContent : '',
     tippyProps: {
@@ -229,7 +233,6 @@ const SmartBillSummary = _ref => {
   }));
 };
 SmartBillSummary.propTypes = {
-  annex: _propTypes.bool,
   assets: _propTypes.object,
   billingLayout: (0, _propTypes.arrayOf)(_propTypes.object),
   consumptionLayout: (0, _propTypes.arrayOf)(_propTypes.object),

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

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
-var _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
 var _propTypes = require("prop-types");
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
 var _utils = require("./utils");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,12 +23,7 @@ const ConsumptionComparison = _ref => {
   const maxValue = (0, _utils.getMaxValue)(allPeriods);
   const title = texts?.consumptions?.comparisonTitle;
   const showComparison = allPeriods?.length > 1;
-  const sortedCurrentPeriods = [...currentPeriods].sort((a, b) => {
-    const dateA = (0, _dayjs.default)(a.settlements?.start_date);
-    const dateB = (0, _dayjs.default)(b.settlements?.start_date);
-    return dateB.diff(dateA);
-  });
-  const currentPeriodsList = sortedCurrentPeriods.map(period => ({
+  const currentPeriodsList = currentPeriods.map(period => ({
     ...period,
     isCurrent: true
   }));
@@ -74,7 +68,7 @@ const ConsumptionComparison = _ref => {
   };
   const currentCount = currentPeriodsList.length || 1;
   const referenceCount = referencePeriodsList.length || 1;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
     className: showComparison ? _stylesModule.default.consumptionComparisonLabel : _stylesModule.default.consumptionComparisonLabelNoData,
     variant: "small"

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

@@ -14,21 +14,35 @@ const getConsumptionPeriodsToCompare = function () {
   let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   if (!(0, _lodash.isEmpty)(periods)) {
     const currentPeriod = periods.find(period => period.current);
-    const previousYearPeriod = periods.find(period => period.number === currentPeriod.number && parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1);
+    const previousYearPeriod = periods.find(period => period.reference_period === true) || periods.find(period => period.number === currentPeriod.number && parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1);
     return [currentPeriod, previousYearPeriod].filter(Boolean);
   }
+  return [];
 };
 exports.getConsumptionPeriodsToCompare = getConsumptionPeriodsToCompare;
 const getPeriodsGroupedByReference = function () {
   let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   if (!(0, _lodash.isEmpty)(periods)) {
-    const currentPeriods = periods.filter(period => period.reference_period === false);
-    const referencePeriods = periods.filter(period => period.reference_period === true);
-    return {
-      currentPeriods,
-      referencePeriods
-    };
+    const currentPeriod = periods.find(period => period.current);
+    const hasReferencePeriod = periods.some(period => period.reference_period === true);
+    if (hasReferencePeriod) {
+      const [referencePeriods, currentPeriods] = (0, _lodash.partition)(periods, period => period.reference_period === true);
+      return {
+        currentPeriods,
+        referencePeriods
+      };
+    } else if (currentPeriod) {
+      const previousYearPeriod = periods.find(period => period.number === currentPeriod.number && parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1);
+      return {
+        currentPeriods: [currentPeriod],
+        referencePeriods: previousYearPeriod ? [previousYearPeriod] : []
+      };
+    }
   }
+  return {
+    currentPeriods: [],
+    referencePeriods: []
+  };
 };
 exports.getPeriodsGroupedByReference = getPeriodsGroupedByReference;
 const formatDate = date => {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getInfo = void 0;
 const getValue = (smartBill, magnitudeName) => {
-  const item = smartBill.periods[0].consumptions.find(c => c.magnitude === magnitudeName);
+  const item = smartBill.periods.find(period => period.current).consumptions.find(c => c.magnitude === magnitudeName);
   if (!item) return null;
   return {
     value: item.value,

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

@@ -13,27 +13,33 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BillHeader = _ref => {
   let {
-    annex,
+    attachment,
+    attachmentOpen,
+    attachmentText,
     billIssueDate,
     billNumber,
     billType,
     billTypeHelpText,
     debtStatusLabel,
     debtStatusValidation,
+    delinquency,
     downloadSmartbillEnabled,
     downloadSmartBillLoading,
     handleDownloadSmartBill,
     issuedOnDate,
+    setAttachmentOpen,
     smartBill,
     UtilityLogo
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billHeader
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billHeaderLabels
   }, UtilityLogo && /*#__PURE__*/_react.default.createElement(UtilityLogo, {
     className: _stylesModule.default.logo
   }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeaderTopRow
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.valueAndHelpText
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billTypeAndNumberContainer
@@ -52,31 +58,50 @@ const BillHeader = _ref => {
   }, issuedOnDate), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
     variant: "small"
-  }, billIssueDate)), debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
+  }, billIssueDate))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeaderStatusRow
+  }, debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
     debtStatusLabel: debtStatusLabel,
     isWarning: smartBill?.warning
-  })), /*#__PURE__*/_react.default.createElement("div", null, annex && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+  }), !!delinquency && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+    type: "light",
+    variant: "error"
+  }, delinquency?.title))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.buttons
+  }, !!attachment && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
     variant: "text",
-    disabled: true
-  }, "Anexos"), downloadSmartbillEnabled && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    onClick: () => setAttachmentOpen(true)
+  }, attachmentText), downloadSmartbillEnabled && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
     loading: downloadSmartBillLoading,
     onClick: handleDownloadSmartBill,
     Icon: "IconDownload",
     variant: "text"
-  })));
+  }))), /*#__PURE__*/_react.default.createElement(_energyUi.UTPanel, {
+    hideMainButton: true,
+    open: attachmentOpen,
+    onClose: () => setAttachmentOpen(false),
+    panelSide: "right",
+    subtitle: attachment?.subtitle,
+    title: attachment?.title,
+    version: "V1"
+  }));
 };
 BillHeader.propTypes = {
-  annex: _propTypes.bool,
+  attachment: _propTypes.object,
+  attachmentOpen: _propTypes.bool,
+  attachmentText: _propTypes.string,
   billIssueDate: _propTypes.string,
   billNumber: _propTypes.string,
   billType: _propTypes.string,
   billTypeHelpText: _propTypes.string,
   debtStatusLabel: _propTypes.string,
   debtStatusValidation: _propTypes.bool,
+  delinquency: _propTypes.object,
   downloadSmartbillEnabled: _propTypes.bool,
   downloadSmartBillLoading: _propTypes.bool,
   handleDownloadSmartBill: _propTypes.func,
   issuedOnDate: _propTypes.string,
+  setAttachmentOpen: _propTypes.func,
   smartBill: _propTypes.object,
   UtilityLogo: _propTypes.elementType
 };

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

@@ -11,8 +11,23 @@
   justify-content: space-between;
   padding: 12px 16px;
   margin: 24px 32px 0 32px;
+
   @media #{$mobile} {
+    flex-direction: column;
+    align-items: flex-start;
     margin: 24px 16px 0 16px;
+    padding: 16px;
+    grid-gap: 16px;
+  }
+}
+
+.buttons {
+  display: flex;
+  grid-gap: 8px;
+
+  @media #{$mobile} {
+    width: 100%;
+    justify-content: flex-start;
   }
 }
 
@@ -20,6 +35,10 @@
   height: 30px;
   object-fit: contain;
   width: auto;
+
+  @media #{$mobile} {
+    margin-bottom: 8px;
+  }
 }
 
 .billHeaderLabels {
@@ -31,11 +50,36 @@
   padding: 16px 0;
 
   @media #{$mobile} {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
     grid-gap: 16px;
     padding: 0;
   }
 }
 
+.billHeaderTopRow {
+  display: contents;
+
+  @media #{$mobile} {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.billHeaderStatusRow {
+  display: contents;
+
+  @media #{$mobile} {
+    display: flex;
+    width: 100%;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+}
+
 .valueAndHelpText {
   display: flex;
   flex-direction: column;

package/dist/components/SmartBillSummary/tabs/components/RateCard/components/Header/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Header = _ref => {
+  let {
+    concept,
+    index,
+    formatAmount,
+    smartBillTestIds
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    dataTestId: `${smartBillTestIds.rateCard.detailLabel}.${index}`,
+    weight: "medium"
+  }, (0, _upperFirst.default)(concept.concept)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    dataTestId: `${smartBillTestIds.rateCard.detailAmount}.${index}`,
+    variant: "subtitle1",
+    weight: "medium"
+  }, formatAmount?.(concept.amount)));
+};
+Header.propTypes = {
+  concept: _propTypes.object,
+  index: _propTypes.number,
+  formatAmount: _propTypes.func,
+  smartBillTestIds: _propTypes.object
+};
+var _default = exports.default = Header;

package/dist/components/SmartBillSummary/tabs/components/RateCard/components/Header/styles.module.scss

@@ -0,0 +1,5 @@
+.container {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}

package/dist/components/SmartBillSummary/tabs/components/RateCard/components/Subconcept/index.js

@@ -0,0 +1,35 @@
+"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 _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Subconcept = _ref => {
+  let {
+    subconcept,
+    formatAmount
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.line
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, (0, _upperFirst.default)(subconcept.title))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium"
+  }, formatAmount?.(subconcept.amount)));
+};
+Subconcept.propTypes = {
+  subconcept: (0, _propTypes.shape)({
+    title: _propTypes.string,
+    amount: _propTypes.number
+  }),
+  formatAmount: _propTypes.func
+};
+var _default = exports.default = Subconcept;

package/dist/components/SmartBillSummary/tabs/components/RateCard/components/Subconcept/styles.module.scss

@@ -0,0 +1,22 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.line {
+  align-items: center;
+  border-bottom: 1px solid var(--light04);
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+
+  &:first-child {
+    border-top: 1px solid var(--light04);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    padding: 16px 16px 0;
+  }
+}

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

@@ -10,12 +10,13 @@ var _propTypes = require("prop-types");
 var _numeral = _interopRequireDefault(require("numeral"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
 var _isNaN = _interopRequireDefault(require("lodash/isNaN"));
 var _utils = require("../../Consumptions/components/CurrentConsumption/utils");
 var _testIds = require("../../../../../constants/testIds");
 var _utils2 = require("./utils");
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+var _Subconcept = _interopRequireDefault(require("./components/Subconcept"));
+var _Header = _interopRequireDefault(require("./components/Header"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -108,6 +109,8 @@ const RateCard = _ref => {
     debouncedTrackRedirection(link);
     if (link) window.open(link, '_blank');
   };
+  const [expandedConcept, setExpandedConcept] = (0, _react.useState)();
+  const handleConceptClick = concept => setExpandedConcept(concept !== expandedConcept && concept);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -182,23 +185,38 @@ const RateCard = _ref => {
     name: "IconHelp"
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.footer
-  }, seeFooter && charges.map((_ref5, i) => {
-    let {
-      concept,
-      amount
-    } = _ref5;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.detail,
-      "data-testid": `${smartBillTestIds.rateCard.detail}.${i}`,
-      key: concept
-    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-      dataTestId: `${smartBillTestIds.rateCard.detailLabel}.${i}`,
-      weight: "medium"
-    }, (0, _upperFirst.default)(concept)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-      dataTestId: `${smartBillTestIds.rateCard.detailAmount}.${i}`,
-      variant: "subtitle1",
-      weight: "medium"
-    }, formatAmount?.(amount)));
+  }, seeFooter && [...(charges || [])].sort((a, b) => {
+    const aHasSubconcepts = !(0, _isEmpty.default)(a.lines);
+    const bHasSubconcepts = !(0, _isEmpty.default)(b.lines);
+    if (aHasSubconcepts === bHasSubconcepts) return 0;
+    return aHasSubconcepts ? 1 : -1;
+  }).map((concept, index) => {
+    const handleClick = () => handleConceptClick(index);
+    const hasEmptySubconcepts = (0, _isEmpty.default)(concept.lines);
+    const isExpanded = expandedConcept === index;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTCard, {
+      classNames: {
+        base: `${_stylesModule.default.cardContainer} ${hasEmptySubconcepts && _stylesModule.default.nonExpandibleCard} `,
+        expandButton: _stylesModule.default.expandIcon,
+        expandableContent: _stylesModule.default.expandableContent,
+        header: `${isExpanded && _stylesModule.default.cardHeader}`
+      },
+      header: /*#__PURE__*/_react.default.createElement(_Header.default, {
+        concept: concept,
+        index: index,
+        formatAmount: formatAmount,
+        smartBillTestIds: smartBillTestIds
+      }),
+      horizontal: true,
+      isCollapsible: !hasEmptySubconcepts,
+      isOpen: isExpanded,
+      key: `${concept.concept}-${concept.amount}`,
+      onClick: handleClick
+    }, !hasEmptySubconcepts && concept.lines.map(subconcept => /*#__PURE__*/_react.default.createElement(_Subconcept.default, {
+      key: `${subconcept.title}-${subconcept.amount}`,
+      subconcept: subconcept,
+      formatAmount: formatAmount
+    })));
   }), /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
     classNames: {
       childrenContainer: _stylesModule.default.footerActionChildren,

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

@@ -42,10 +42,6 @@
   flex: 1;
 }
 
-.footer {
-  width: 100%;
-}
-
 .footerAction {
   align-items: center;
   background-color: transparent;
@@ -65,15 +61,6 @@
   justify-content: space-between;
 }
 
-.detail {
-  align-items: center;
-  border-top: 1px solid var(--light04);
-  display: flex;
-  grid-gap: 16px;
-  justify-content: space-between;
-  padding: 16px;
-}
-
 .bannerDetail {
   align-items: flex-start;
   background-color: var(--semanticError01);
@@ -100,3 +87,41 @@
   margin: 0 16px;
   padding: 24px;
 }
+
+.footer {
+  background-color: var(--light01);
+  display: flex;
+  flex-flow: column;
+}
+
+.cardContainer {
+  background-color: var(--light01);
+  border: 0;
+  border-top: 1px solid var(--light04);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.expandableContent {
+  padding: 0;
+}
+
+.nonExpandibleCard {
+  padding-right: 24px;
+}
+
+.expandIcon {
+  color: var(--actionNeutral05);
+  height: 6px;
+  margin-left: 12px;
+  width: 24px;
+}
+
+.cardHeader {
+  padding-bottom: 16px;
+}
+
+.lines {
+  transform: translateX(-16px);
+  width: calc(100% + 32px);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.22.0",
+  "version": "3.24.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,34 +9,46 @@
     "dist"
   ],
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start ",
+    "start": "SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true react-scripts --openssl-legacy-provider start ",
     "build-example": "react-scripts --openssl-legacy-provider build",
-    "lint": "./node_modules/eslint/bin/eslint.js src && npm run sass-lint",
-    "test": "react-scripts test --env=jsdom",
+    "lint": "./node_modules/eslint/bin/eslint.js src --cache --prune-suppressions",
+    "lint-suppress": "./node_modules/eslint/bin/eslint.js src --cache --suppress-all",
+    "test": "SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "prebuild": "rimraf dist",
     "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
-    "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+    "build": "SKIP_PREFLIGHT_CHECK=true DISABLE_ESLINT_PLUGIN=true NODE_ENV=production babel src/lib --out-dir dist --copy-files",
     "prepare": "husky install && npm run build"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.3.4",
+    "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@eslint/compat": "^1.4.0",
+    "@widergy/eslint-config": "^1.0.0",
     "@widergy/energy-ui": "^3.0.0",
     "@widergy/semantic-release-package-config": "^1.0.0",
     "babel-preset-react-app": "^10.0.1",
+    "babel-plugin-import-glob": "^2.0.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
     "husky": "^8.0.0",
     "prettier": "^3.0.3",
     "prettier-eslint": "^15.0.1",
@@ -45,7 +57,9 @@
     "react-scripts": "^4.0.3",
     "rimraf": "^2.6.3",
     "sass-lint": "^1.12.1",
-    "semantic-release": "^15.13.31"
+    "semantic-release": "^15.13.31",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.46.4"
   },
   "browserslist": [
     ">0.2%",
@@ -57,14 +71,13 @@
     "@widergy/energy-hooks": "^2.0.0",
     "@widergy/web-utils": "^2.0.0",
     "dayjs": "^1.10.7",
-    "eslint-plugin-react": "^7.33.2",
     "lodash": ">=4.17.4",
-    "sass": "^1.80.4",
     "numeral": ">=2.0.6",
     "react-jss": "^8.6.1",
     "react-loading-skeleton": "^3.3.1",
     "react-perfect-scrollbar": "^1.5.3",
     "react-responsive": "^4.1.0",
+    "sass": "^1.80.4",
     "sass-loader": "^10.0.5",
     "seamless-immutable": "^7.1.4",
     "yarn": "^1.22.10"