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

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.12.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.11.0...v3.12.0) (2025-08-27)
+
+
+### Features
+
+* [EVEP-27] smartbill onboarding ([#62](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/62)) ([d7bdeac](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/d7bdeac4050d6ebf615a00a05eddae36de48fa07)), closes [#60](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/60) [#60](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/60) [#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59) [#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59)
+* updates readme ([cc9caa2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/cc9caa29601d5052e9b260e057184f6f8d39d3c8))
+
+# [3.11.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.10.0...v3.11.0) (2025-08-25)
+
+
+### Features
+
+* [EVEP2-26] billing new structure ([#59](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/59)) ([b4e199f](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/b4e199f3cbddf697fcefe211a0b971e49d3253ce))
+
 # [3.10.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.9.2...v3.10.0) (2025-08-20)
 
 

package/README.md

@@ -1,3 +1,4 @@
+
 # react-package-bootstrap ![Logo](https://funkyimg.com/i/2VY6U.png)
 
 ![WidergyWeb](https://img.shields.io/badge/WIDERGY-WEB-00d564.svg)

package/dist/components/SmartBillSummary/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TAB_COMPONENT_MAPPER = exports.BIMESTRAL_PERIODICITY = void 0;
+exports.TAB_VALUE_REGEX = exports.TAB_SELECTOR = exports.TAB_COMPONENT_MAPPER = exports.ONBOARDING_OPTIONS = exports.CAPTURED_VALUE_REGEX = exports.BIMESTRAL_PERIODICITY = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tabs = require("../../shared/constants/tabs");
 var _Consumptions = _interopRequireDefault(require("./tabs/Consumptions"));
@@ -12,6 +12,17 @@ var _Billing = _interopRequireDefault(require("./tabs/Billing"));
 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); } /* eslint-disable react/prop-types */
 const BIMESTRAL_PERIODICITY = exports.BIMESTRAL_PERIODICITY = 'BIMESTRAL';
+const TAB_SELECTOR = exports.TAB_SELECTOR = '[data-tab-value=';
+const TAB_VALUE_REGEX = exports.TAB_VALUE_REGEX = /\[data-tab-value="([^"]+)"\]/;
+const CAPTURED_VALUE_REGEX = exports.CAPTURED_VALUE_REGEX = 1;
+const ONBOARDING_OPTIONS = exports.ONBOARDING_OPTIONS = {
+  overlayOpacity: 1,
+  positionPrecedence: ['top', 'left', 'bottom', 'right'],
+  scrollPadding: 5,
+  scrollTo: 'tooltip',
+  scrollToElement: false,
+  tooltipPosition: 'top'
+};
 const renderComponentWithProps = (Component, tab) => props => /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
   assets: props?.assets?.[tab] || {},
   translations: props?.translations?.[tab] || {}

package/dist/components/SmartBillSummary/index.js

@@ -13,16 +13,24 @@ var _constants = require("./constants");
 var _utils = require("./utils");
 var _AIPanel = _interopRequireDefault(require("./components/AIPanel"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _BillHeader = _interopRequireDefault(require("./tabs/Billing/components/BillHeader"));
+var _utils2 = require("./tabs/Billing/utils");
 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 SmartBillSummary = _ref => {
   let {
+    annex,
     assets,
+    billingLayout,
     constants,
     components,
     handlers,
     loading,
+    showOnboarding = false,
+    onCloseOnboarding,
+    onboardingSteps,
+    reverseRow,
     smartBill,
     tabOptions,
     translations,
@@ -52,10 +60,27 @@ const SmartBillSummary = _ref => {
     trackAIFloatingButtonClick,
     trackTabChange
   } = handlers;
-  const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(isDesktopSize, tabOptions, smartBill);
-  const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
+  const {
+    tabs,
+    onboardingSteps: filteredOnboardingSteps
+  } = loading ? {
+    tabs: [],
+    onboardingSteps: []
+  } : (0, _utils.getTabOptions)(isDesktopSize, onboardingSteps, tabOptions, smartBill);
+  const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(tabs);
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
+  const [stableLoading, setStableLoading] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    if (loading) {
+      setStableLoading(true);
+    } else {
+      const timer = setTimeout(() => {
+        setStableLoading(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [loading]);
   const changeCurrentTab = newTab => setCurrentTab(newTab);
   const openAIPanel = () => {
     trackAIFloatingButtonClick();
@@ -77,26 +102,43 @@ const SmartBillSummary = _ref => {
   return /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
     className: _stylesModule.default.loadingContainer,
     loading: loading
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: showOnboarding ? _stylesModule.default.tabs : ''
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTTabs, {
     classNames: {
       baseLabel: _stylesModule.default.tabLabel,
       baseSelected: _stylesModule.default.baseSelected,
-      flexContainer: _stylesModule.default.tabsContainer
+      flexContainer: _stylesModule.default.tabsContainer,
+      tabRoot: 'smartbill-tab'
     },
     onChange: newTab => {
       trackTabChange(newTab);
       changeCurrentTab(newTab);
     },
-    options: filteredTabOptions,
+    options: tabs.map(tab => ({
+      ...tab,
+      'data-tab-value': tab.value
+    })),
     tabsProps: {
       orientation: 'horizontal',
       variant: 'fullWidth'
     },
     value: currentTab
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.contentContainer
-  }, _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
+  }, tabs.find(tab => tab.value === currentTab)?.header && /*#__PURE__*/_react.default.createElement(_BillHeader.default, {
+    annex,
+    UtilityLogo: assets.billingTab.UtilityLogo,
+    billNumber: smartBill.bill_number,
+    billTypeHelpText: translations.billingTab.header.billTypeHelpText,
+    issuedOnDate: (0, _utils2.getFormattedDate)((0, _utils2.getCurrentPeriod)(smartBill)?.settlements?.current?.issued_on),
+    billIssueDate: translations.billingTab.header.billIssueDate,
+    debtStatusValidation: smartBill.debt_status_label !== null,
+    debtStatusLabel: smartBill.debt_status_label,
+    smartBill
+  }), _constants.TAB_COMPONENT_MAPPER?.[currentTab]?.({
     assets,
+    billingLayout,
     constants,
     consumptionLevels,
     components,
@@ -107,11 +149,12 @@ const SmartBillSummary = _ref => {
     handlers,
     isDesktopSize,
     loading,
+    reverseRow,
     smartBill,
     translations,
     utils
   })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
-    className: _stylesModule.default.AIFloatButton,
+    className: `${_stylesModule.default.AIFloatButton} smartbill-ai-float-button`,
     onClick: openAIPanel,
     withRipple: true
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
@@ -130,10 +173,18 @@ const SmartBillSummary = _ref => {
     notEnoughBillsErrorType: notEnoughBillsErrorType,
     onClose: closeAIPanel,
     translations: translations
-  })));
+  })), !stableLoading && showOnboarding && /*#__PURE__*/_react.default.createElement(_energyUi.UTOnboarding, {
+    options: _constants.ONBOARDING_OPTIONS,
+    enabled: showOnboarding,
+    handleComplete: onCloseOnboarding,
+    handleOnClose: onCloseOnboarding,
+    steps: filteredOnboardingSteps
+  }));
 };
 SmartBillSummary.propTypes = {
+  annex: _propTypes.bool,
   assets: _propTypes.object,
+  billingLayout: (0, _propTypes.arrayOf)(_propTypes.object),
   constants: _propTypes.object,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType
@@ -142,6 +193,10 @@ SmartBillSummary.propTypes = {
     [_propTypes.string]: _propTypes.func
   }),
   loading: _propTypes.bool,
+  showOnboarding: _propTypes.bool,
+  onCloseOnboarding: _propTypes.func,
+  onboardingSteps: (0, _propTypes.arrayOf)(_propTypes.object),
+  reverseRow: _propTypes.object,
   smartBill: _billDataTypes.billDataTypes,
   tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     defaultSelected: _propTypes.bool,

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

@@ -12,6 +12,11 @@ $tab-height: 48px;
   }
 }
 
+.tabs {
+  width: 96%;
+  margin: 0 auto;
+}
+
 .contentContainer {
   flex: 1;
   margin: 0 auto;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(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 }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { 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 ActionCards = _ref => {
+  let {
+    actionCards,
+    adhered,
+    notAdhered,
+    isDesktopSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, 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'
+    })));
+  }));
+};
+ActionCards.propTypes = {
+  actionCards: _propTypes.array,
+  adhered: _propTypes.string,
+  notAdhered: _propTypes.string,
+  isDesktopSize: _propTypes.bool
+};
+var _default = exports.default = ActionCards;

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

@@ -0,0 +1,28 @@
+@import '../../../../../../scss/variables/colorsExport.module.scss';
+
+.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;
+}

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

@@ -0,0 +1,64 @@
+"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 _DebtStatusLabel = _interopRequireDefault(require("../DebtStatusLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BillHeader = _ref => {
+  let {
+    annex,
+    UtilityLogo,
+    billNumber,
+    billTypeHelpText,
+    issuedOnDate,
+    billIssueDate,
+    debtStatusValidation,
+    debtStatusLabel,
+    smartBill
+  } = _ref;
+  return /*#__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.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
+  })), annex && /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    variant: "text",
+    disabled: true
+  }, "Anexos"));
+};
+BillHeader.propTypes = {
+  annex: _propTypes.bool,
+  UtilityLogo: _propTypes.elementType,
+  billNumber: _propTypes.string,
+  billTypeHelpText: _propTypes.string,
+  issuedOnDate: _propTypes.string,
+  billIssueDate: _propTypes.string,
+  debtStatusValidation: _propTypes.bool,
+  debtStatusLabel: _propTypes.string,
+  smartBill: _propTypes.object
+};
+var _default = exports.default = BillHeader;

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

@@ -0,0 +1,43 @@
+@import '../../../../../../scss/variables/mediaQueries.module.scss';
+
+.billHeader {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin: 24px 32px 0 32px;
+  @media #{$mobile} {
+    margin: 24px 16px 0 16px;
+  }
+}
+
+.logo {
+  height: 30px;
+  object-fit: contain;
+  width: auto;
+}
+
+.billHeaderLabels {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+  justify-content: space-between;
+  padding: 16px 0;
+
+  @media #{$mobile} {
+    grid-gap: 16px;
+    padding: 0;
+  }
+}
+
+.valueAndHelpText {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}

package/dist/components/SmartBillSummary/tabs/Billing/components/ColumnRenderer/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENTS = void 0;
+var _ActionCards = _interopRequireDefault(require("../ActionCards"));
+var _TitularCard = _interopRequireDefault(require("../TitularCard"));
+var _TotalCard = _interopRequireDefault(require("../TotalCard"));
+var _RateCard = _interopRequireDefault(require("../RateCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMPONENTS = exports.COMPONENTS = {
+  ActionCards: _ActionCards.default,
+  TitularCard: _TitularCard.default,
+  TotalCard: _TotalCard.default,
+  RateCard: _RateCard.default
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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 ColumnRenderer = _ref => {
+  let {
+    column,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.column
+  }, column.map(_ref2 => {
+    let {
+      name,
+      enabled
+    } = _ref2;
+    const Component = _constants.COMPONENTS[name];
+    return enabled && Component && /*#__PURE__*/_react.default.createElement(Component, _extends({
+      key: name
+    }, props));
+  }));
+};
+ColumnRenderer.propTypes = {
+  column: (0, _propTypes.arrayOf)(_propTypes.object),
+  props: _propTypes.object
+};
+var _default = exports.default = ColumnRenderer;

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

@@ -0,0 +1,23 @@
+@import '_mediaQueries.scss';
+
+$columns-gap: 32px;
+$columns-gap-mobile: 24px;
+
+.column {
+  display: flex;
+  flex-direction: column;
+  margin-right: $columns-gap;
+  width: calc(50% - #{$columns-gap} / 2);
+
+  @media #{$tablet-mobile} {
+    width: 100%;
+  }
+
+  > * {
+    margin-bottom: 24px;
+
+    @media #{$tablet-mobile} {
+      margin-bottom: $columns-gap-mobile;
+    }
+  }
+}

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

@@ -11,6 +11,7 @@ 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");
@@ -56,7 +57,8 @@ const RateCard = _ref => {
     client,
     periods,
     levelValue: limitSubsidyValue = 0,
-    levelNumber
+    levelNumber,
+    rate: rateValue
   } = smartBill;
   const purchasedRate = client?.rate?.purchased || '';
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
@@ -108,6 +110,8 @@ const RateCard = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerTitles
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
@@ -127,7 +131,13 @@ const RateCard = _ref => {
     className: _stylesModule.default.bannerDetailText
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     dataTestId: smartBillTestIds.rateCard.bannerLabel
-  }, banner.label?.(limitSubsidyValue, diff))))), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+  }, banner.label?.(limitSubsidyValue, diff))))), rateValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rateValue
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+    type: "light",
+    variant: "information",
+    withoutIcon: true
+  }, rateValue))), !noLevels && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     components: components,
     currentPeriod: currentPeriod,
     data: rates,
@@ -159,7 +169,7 @@ const RateCard = _ref => {
     colorTheme: "gray",
     dataTestId: smartBillTestIds.rateCard.yourConsumption,
     variant: "small"
-  }, yourConsumption))), levelNumber && /*#__PURE__*/_react.default.createElement("div", {
+  }, yourConsumption))), !(0, _isNaN.default)(levelNumber) && levelNumber && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.levelNumber,
     "data-testid": smartBillTestIds.rateCard.level
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {

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

@@ -7,11 +7,23 @@
   grid-gap: 24px;
 }
 
+.header {
+  display: flex;
+  padding: 24px 24px 0;
+}
+
+.rateValue {
+  align-self: flex-start;
+  display: flex;
+  justify-content: flex-end;
+  margin-left: 16px;
+  width: 30%;
+}
+
 .headerTitles {
   display: flex;
   flex-direction: column;
   grid-gap: 8px;
-  padding: 24px 24px 0;
 }
 
 .consumptionDataContainer {
@@ -85,6 +97,6 @@
   display: flex;
   grid-gap: 8px;
   justify-content: space-between;
-  margin: 0px 16px;
+  margin: 0 16px;
   padding: 24px;
 }

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

@@ -0,0 +1,80 @@
+"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 TitularCard = _ref => {
+  let {
+    titularCardTitle,
+    accountAddress,
+    postalAddress,
+    addressHelpText,
+    titularName,
+    titularHelpText,
+    clientNumberFormatter,
+    clientNumber,
+    clientNumberHelpText,
+    ivaCondition,
+    ivaConditionHelpText,
+    renderTitularFooter
+  } = _ref;
+  return /*#__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)))));
+};
+TitularCard.propTypes = {
+  titularCardTitle: _propTypes.string,
+  accountAddress: _propTypes.string,
+  postalAddress: _propTypes.string,
+  addressHelpText: _propTypes.string,
+  titularName: _propTypes.string,
+  titularHelpText: _propTypes.string,
+  clientNumberFormatter: _propTypes.func,
+  clientNumber: _propTypes.string,
+  clientNumberHelpText: _propTypes.string,
+  ivaCondition: _propTypes.string,
+  ivaConditionHelpText: _propTypes.string,
+  renderTitularFooter: _propTypes.bool
+};
+var _default = exports.default = TitularCard;