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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Features
+
+* [CX-1171] widi fav smartbill ([#63](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/63)) ([e1cc5ce](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/e1cc5ceb238a6d5ef236fbeacd46ae2d8093e93c))
+
 # [3.12.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.11.0...v3.12.0) (2025-08-27)
 
 

package/dist/components/SmartBillSummary/components/AIPanel/index.js

@@ -18,6 +18,7 @@ const AIPanel = _ref => {
     aiQuestionsListError,
     aiQuestionsListLoading,
     answer,
+    colors = {},
     error,
     getAnswer,
     handlers = {},
@@ -92,7 +93,10 @@ const AIPanel = _ref => {
       key: id,
       onClick: () => toggleCard(id, question)
     }, renderAnswer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.answer} ${errorContent && !isLoading ? notEnoughBills ? _stylesModule.default.notEnoughBillsContainer : _stylesModule.default.errorAnswer : ''}`
+      className: `${_stylesModule.default.answer} ${errorContent && !isLoading ? notEnoughBills ? _stylesModule.default.notEnoughBillsContainer : _stylesModule.default.errorAnswer : ''}`,
+      style: {
+        background: colors?.widyAnswerColorBg
+      }
     }, isLoading ? /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       containerClassName: _stylesModule.default.skeletonContainer,
       count: 3,
@@ -135,6 +139,7 @@ AIPanel.propTypes = {
   aiQuestionsListLoading: _propTypes.bool,
   aiQuestionsListError: _propTypes.bool,
   answer: _propTypes.object,
+  colors: _propTypes.object,
   error: _propTypes.object,
   getAnswer: _propTypes.func,
   handlers: _propTypes.object,

package/dist/components/SmartBillSummary/index.js

@@ -23,8 +23,9 @@ const SmartBillSummary = _ref => {
     annex,
     assets,
     billingLayout,
-    constants,
+    colors,
     components,
+    constants,
     handlers,
     loading,
     showOnboarding = false,
@@ -60,6 +61,16 @@ const SmartBillSummary = _ref => {
     trackAIFloatingButtonClick,
     trackTabChange
   } = handlers;
+  const {
+    AIPanel: {
+      widyTooltipContent = ''
+    } = {}
+  } = translations || {};
+  const {
+    AIPanel: {
+      widyFab
+    } = {}
+  } = assets || {};
   const {
     tabs,
     onboardingSteps: filteredOnboardingSteps
@@ -130,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,
@@ -153,18 +165,25 @@ const SmartBillSummary = _ref => {
     smartBill,
     translations,
     utils
-  })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
-    className: `${_stylesModule.default.AIFloatButton} smartbill-ai-float-button`,
-    onClick: openAIPanel,
-    withRipple: true
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
-    colorTheme: "negative",
-    name: "EnergyIconChatSparkFilled"
-  })), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
+  })), aiQuestionsPanelEnabled && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {
+    arrow: false,
+    content: isDesktopSize ? widyTooltipContent : '',
+    tippyProps: {
+      placement: 'left'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.AIFloatButton} smartbill-ai-float-button`
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
+    onClick: openAIPanel
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "widy",
+    src: widyFab
+  })))), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
     aiQuestionsList: aiQuestionsList,
     aiQuestionsListError: aiQuestionsListError,
     aiQuestionsListLoading: aiQuestionsListLoading,
     answer: smartBillAIAnswer,
+    colors: colors,
     error: smartBillAIAnswerError,
     getAnswer: getSmartBillAIAnswer,
     handlers: handlers,
@@ -185,10 +204,11 @@ SmartBillSummary.propTypes = {
   annex: _propTypes.bool,
   assets: _propTypes.object,
   billingLayout: (0, _propTypes.arrayOf)(_propTypes.object),
-  constants: _propTypes.object,
+  colors: _propTypes.object,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType
   }),
+  constants: _propTypes.object,
   handlers: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.func
   }),

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

@@ -13,8 +13,8 @@ $tab-height: 48px;
 }
 
 .tabs {
-  width: 96%;
   margin: 0 auto;
+  width: 96%;
 }
 
 .contentContainer {
@@ -54,12 +54,17 @@ $tab-height: 48px;
 
 .AIFloatButton {
   align-items: center;
-  background-color: var(--actionAccent04);
-  border-radius: 100px;
-  bottom: 32px;
+  bottom: 20px;
   display: flex;
+  height: 78px;
   justify-content: center;
-  padding: 16px;
   position: fixed;
-  right: 32px;
+  right: 20px;
+  width: 78px;
+
+  img {
+    height: 78px;
+    object-fit: contain;
+    width: 78px;
+  }
 }

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.12.0",
+  "version": "3.13.1",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",