@widergy/utilitygo-smart-bill-web 3.13.0 → 3.13.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.13.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.13.0...v3.13.1) (2025-09-30)
+
+
+### Bug Fixes
+
+* [UGDESA-2719] visual fixes ([#64](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/64)) ([2f8f778](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/2f8f7780cf474c0859dd9ff6a5c50c2ab8bb75aa))
+
 # [3.13.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.12.0...v3.13.0) (2025-09-29)
 
 

package/dist/components/SmartBillSummary/index.js

@@ -141,6 +141,7 @@ const SmartBillSummary = _ref => {
     annex,
     UtilityLogo: assets.billingTab.UtilityLogo,
     billNumber: smartBill.bill_number,
+    billType: smartBill.bill_type,
     billTypeHelpText: translations.billingTab.header.billTypeHelpText,
     issuedOnDate: (0, _utils2.getFormattedDate)((0, _utils2.getCurrentPeriod)(smartBill)?.settlements?.current?.issued_on),
     billIssueDate: translations.billingTab.header.billIssueDate,

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

@@ -0,0 +1,50 @@
+"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 AccountCard = _ref => {
+  let {
+    accountCardTitle,
+    meterNumber,
+    readingType,
+    meterNumberHelpText,
+    readingTypeHelpText
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.accountCard
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title2",
+    weight: "medium"
+  }, accountCardTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, meterNumber && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.data
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.dataTitle,
+    weight: "bold"
+  }, meterNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, meterNumberHelpText)), readingType && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.data
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.dataTitle,
+    weight: "bold"
+  }, readingType), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, readingTypeHelpText))));
+};
+AccountCard.propTypes = {
+  accountCardTitle: _propTypes.string,
+  meterNumber: _propTypes.string,
+  readingType: _propTypes.string,
+  meterNumberHelpText: _propTypes.string,
+  readingTypeHelpText: _propTypes.string
+};
+var _default = exports.default = AccountCard;

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

@@ -0,0 +1,25 @@
+.accountCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 24px;
+}
+
+.content {
+  display: flex;
+}
+
+.data {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 12px 0;
+}
+
+.dataTitle {
+  padding: 4px 0;
+}

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

@@ -27,7 +27,8 @@ const ActionCards = _ref => {
       onClick,
       rightIcon,
       showStatus,
-      title
+      title,
+      subtitle
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
       className: `${_stylesModule.default.cardContainer} ${!onClick && _stylesModule.default.unclickableCardContainer}`,
@@ -38,11 +39,14 @@ const ActionCards = _ref => {
     }, isDesktopSize && /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, _extends({
       colorTheme: "gray",
       name: leftIcon
-    }, leftIconProps)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-      className: _stylesModule.default.cardTitle,
+    }, leftIconProps)), /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.cardContent
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       variant: "subtitle1",
       weight: "medium"
-    }, title), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+    }, title), subtitle && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      colorTheme: "gray"
+    }, subtitle)), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
       type: "light",
       variant: isAdhered ? 'success' : 'unassigned',
       withoutIcon: !isAdhered

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

@@ -12,12 +12,15 @@
   transition: all 0.2s;
 }
 
-.unclickableCardContainer {
-  cursor: default;
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+  flex: 1;
 }
 
-.cardTitle {
-  flex: 1;
+.unclickableCardContainer {
+  cursor: default;
 }
 
 .cardIconContainer {

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

@@ -7,20 +7,22 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 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,
+    billIssueDate,
     billNumber,
+    billType,
     billTypeHelpText,
-    issuedOnDate,
-    billIssueDate,
-    debtStatusValidation,
     debtStatusLabel,
-    smartBill
+    debtStatusValidation,
+    issuedOnDate,
+    smartBill,
+    UtilityLogo
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billHeader
@@ -30,9 +32,14 @@ const BillHeader = _ref => {
     className: _stylesModule.default.logo
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.valueAndHelpText
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billTypeAndNumberContainer
+  }, !(0, _isEmpty.default)(billType) && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+    variant: "unassigned",
+    withoutIcon: true
+  }, billType), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "small"
-  }, billNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, billNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
     variant: "small"
   }, billTypeHelpText)), /*#__PURE__*/_react.default.createElement("div", {
@@ -52,13 +59,14 @@ const BillHeader = _ref => {
 };
 BillHeader.propTypes = {
   annex: _propTypes.bool,
-  UtilityLogo: _propTypes.elementType,
+  billIssueDate: _propTypes.string,
   billNumber: _propTypes.string,
+  billType: _propTypes.string,
   billTypeHelpText: _propTypes.string,
-  issuedOnDate: _propTypes.string,
-  billIssueDate: _propTypes.string,
-  debtStatusValidation: _propTypes.bool,
   debtStatusLabel: _propTypes.string,
-  smartBill: _propTypes.object
+  debtStatusValidation: _propTypes.bool,
+  issuedOnDate: _propTypes.string,
+  smartBill: _propTypes.object,
+  UtilityLogo: _propTypes.elementType
 };
 var _default = exports.default = BillHeader;

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

@@ -41,3 +41,9 @@
   flex-direction: column;
   grid-gap: 4px;
 }
+
+.billTypeAndNumberContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 4px;
+}

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

@@ -8,10 +8,12 @@ var _ActionCards = _interopRequireDefault(require("../ActionCards"));
 var _TitularCard = _interopRequireDefault(require("../TitularCard"));
 var _TotalCard = _interopRequireDefault(require("../TotalCard"));
 var _RateCard = _interopRequireDefault(require("../RateCard"));
+var _AccountCard = _interopRequireDefault(require("../AccountCard"));
 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
+  RateCard: _RateCard.default,
+  AccountCard: _AccountCard.default
 };

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

@@ -52,7 +52,8 @@ const Billing = _ref => {
     ratesTableLink,
     titularCard = {},
     totalAmountLabel,
-    totalCard = {}
+    totalCard = {},
+    accountCard = {}
   } = translations;
   const {
     title: digitalBillTitle
@@ -70,6 +71,11 @@ const Billing = _ref => {
     clientNumberHelpText,
     ivaConditionHelpText
   } = titularCard;
+  const {
+    title: accountCardTitle,
+    meterNumberHelpText,
+    readingTypeHelpText
+  } = accountCard;
   const {
     firstExpiration,
     secondExpiration
@@ -77,10 +83,14 @@ const Billing = _ref => {
   const {
     client,
     detail,
-    expirations
+    expirations,
+    meter_number: meterNumber,
+    reading_periods: readingPeriods
   } = smartBill;
+  const readingType = readingPeriods?.[0]?.type;
   const currentPeriod = (0, _utils.getCurrentPeriod)(smartBill);
   const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
+  const emailDigitalBill = client?.email_digital_bill;
   const {
     account_address: accountAddress,
     client_number: clientNumber = '',
@@ -105,7 +115,8 @@ const Billing = _ref => {
     leftIcon: 'IconReceipt',
     onClick: !isAdheredToDigitalBill && handleGoToDigitalBill,
     showStatus: true,
-    title: digitalBillTitle
+    title: digitalBillTitle,
+    subtitle: emailDigitalBill
   }, {
     isAdhered: isAdheredToAutomaticDebit,
     leftIcon: 'IconCreditCard',
@@ -141,6 +152,11 @@ const Billing = _ref => {
     firstExpirationDate,
     secondExpiration,
     secondExpirationDate,
+    accountCardTitle,
+    meterNumber,
+    readingType,
+    meterNumberHelpText,
+    readingTypeHelpText,
     consumptionLevels,
     components,
     currentPeriod,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.13.0",
+  "version": "3.13.1",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",