@widergy/utilitygo-smart-bill-web 3.6.1 → 3.6.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.6.2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.6.1...v3.6.2) (2025-05-26)
+
+
+### Bug Fixes
+
+* [CX-689] smartbill visual fixes ([#51](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/51)) ([1f9a1b9](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/1f9a1b9cce714a9ada91faee97c47b33b0b787df))
+
 ## [3.6.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.6.0...v3.6.1) (2025-05-16)
 
 

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

@@ -94,6 +94,7 @@ const AIPanel = _ref => {
       name: notEnoughBills ? 'IconFileX' : 'IconCircleX',
       shade: "04"
     }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, notEnoughBills ? notEnoughBillsContent : errorContent)) : answerContent ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.answerContent,
       withMarkdown: true
     }, answerContent), /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.generatedByLabel

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

@@ -80,3 +80,7 @@ $ia-panel-width: 600px;
   display: flex;
   grid-gap: 8px;
 }
+
+.answerContent {
+  padding-bottom: 12px;
+}

package/dist/components/SmartBillSummary/index.js

@@ -19,14 +19,8 @@ const SmartBillSummary = _ref => {
   let {
     assets,
     constants,
-    consumptionLevels,
     components,
-    currentAccount,
-    getGlossaryData,
-    glossaryData,
-    glossaryLoading,
     handlers,
-    isDesktopSize,
     loading,
     smartBill,
     tabOptions,
@@ -36,16 +30,23 @@ const SmartBillSummary = _ref => {
   const {
     aiQuestionsList,
     aiQuestionsPanelEnabled,
+    consumptionLevels,
+    currentAccount,
+    glossaryData,
+    glossaryError,
+    glossaryLoading,
+    isDesktopSize,
     notEnoughBillsErrorType,
     smartBillAIAnswer = {},
     smartBillAIAnswerError,
     smartBillAIAnswerLoading
   } = constants;
   const {
+    getGlossaryData,
     getSmartBillAIAnswer,
     resetSmartBillAIAnswers
   } = handlers;
-  const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(tabOptions, smartBill);
+  const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(isDesktopSize, tabOptions, smartBill);
   const defaultCurrentTab = (0, _utils.getDefaultCurrentTab)(filteredTabOptions);
   const [currentTab, setCurrentTab] = (0, _react.useState)(defaultCurrentTab);
   const [aiPanelIsOpen, setAiPanelIsOpen] = (0, _react.useState)(false);
@@ -58,6 +59,11 @@ const SmartBillSummary = _ref => {
   (0, _react.useEffect)(() => {
     if (defaultCurrentTab) changeCurrentTab(defaultCurrentTab);
   }, [defaultCurrentTab]);
+  (0, _react.useEffect)(() => {
+    if (glossaryError && !glossaryLoading && defaultCurrentTab) {
+      changeCurrentTab(defaultCurrentTab);
+    }
+  }, [defaultCurrentTab, glossaryError, glossaryLoading]);
   return /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
     className: _stylesModule.default.loadingContainer,
     loading: loading
@@ -112,18 +118,12 @@ const SmartBillSummary = _ref => {
 SmartBillSummary.propTypes = {
   assets: _propTypes.object,
   constants: _propTypes.object,
-  consumptionLevels: _propTypes.array,
   components: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.elementType
   }),
-  currentAccount: _propTypes.array,
-  getGlossaryData: undefined || _propTypes.object,
-  glossaryData: undefined || _propTypes.object,
-  glossaryLoading: _propTypes.bool,
   handlers: (0, _propTypes.shape)({
     [_propTypes.string]: _propTypes.func
   }),
-  isDesktopSize: _propTypes.bool,
   loading: _propTypes.bool,
   smartBill: _billDataTypes.billDataTypes,
   tabOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({

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

@@ -46,7 +46,7 @@ const ProgressBar = _ref => {
     value
   }) || {};
   const consumptionPercentage = (0, _utils.getConsumptionPercentage)(value, limitValue, isOverLimit) || _constants.MAX_VALUE_PROGRESS;
-  const shouldRenderDynamicLabel = value > 0 && limitValue > 0;
+  const shouldRenderDynamicLabel = value > 0 && limitValue > 0 && limitValue !== 'Infinity';
   const [limitLabelWidth, setLimitLabelWidth] = (0, _react.useState)(0);
   const limitLabelRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
@@ -94,7 +94,7 @@ const ProgressBar = _ref => {
     className: _stylesModule.default.consumptionComparison
   }, value >= 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "subtitle1"
-  }, currentValueLabel), value >= 0 && limitValue > 0 && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, currentValueLabel), value >= 0 && limitValue > 0 && limitValue !== 'Infinity' && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
     variant: "small"
   }, contrastValueLabel)), tooltipContent && /*#__PURE__*/_react.default.createElement(_energyUi.UTTooltip, {

package/dist/components/SmartBillSummary/tabs/Billing/components/RateCard/components/ProgressBar/utils.js

@@ -34,7 +34,7 @@ const formatLabels = _ref => {
   return {
     initialLabel: _constants.MIN_VALUE_PROGRESS,
     dynamicLabel: isOverLimit ? contrastValueFormatted : currentValueFormatted,
-    finalLabel: isOverLimit || !limitValue ? currentValueFormatted : contrastValueFormatted,
+    finalLabel: isOverLimit || !limitValue || limitValue === 'Infinity' ? currentValueFormatted : contrastValueFormatted,
     currentValueLabel: currentValueWithUnitLabel?.({
       value: currentValueFormatted,
       day: formatMaxPowerRegisteredDate(maxConsumptionDay)

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

@@ -38,13 +38,13 @@ const RateCard = _ref => {
   } = rateCardTranslations;
   const {
     client,
-    detail,
     periods
   } = smartBill;
   const purchasedRate = client?.rate?.purchased || '';
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
   const {
-    totalConsumption
+    totalConsumption,
+    totalConsumptionFormatted
   } = (0, _utils.getConsumptionLabels)(periodsToCompare) || {};
   const {
     levels = []
@@ -71,17 +71,7 @@ const RateCard = _ref => {
   const currentRate = rates[currentIndex] ?? {};
   const startRateValue = Array.isArray(currentRate?.range) && currentRate.range[0];
   const limitRateValue = Array.isArray(currentRate?.range) && currentRate.range.length > 0 && currentRate.range[currentRate.range.length - 1];
-  const concepts = detail?.concepts?.[0]?.lines;
-  const fixedCharges = concepts?.[0];
-  const variableCharges = concepts?.[1];
-  const {
-    title: fixedChargeTitle,
-    amount: fixedChargeValue
-  } = fixedCharges || {};
-  const {
-    title: variableChargeTitle,
-    amount: variableChargeValue
-  } = variableCharges || {};
+  const charges = client?.rate?.charges || [];
   const isT1 = purchasedRate.includes('T1');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
@@ -117,26 +107,26 @@ const RateCard = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "title3",
     weight: "medium"
-  }, totalConsumption, " ", unit), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, totalConsumptionFormatted, " ", unit), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     colorTheme: "gray",
     variant: "small"
   }, yourConsumption))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.footer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.detail
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    weight: "medium"
-  }, fixedChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "subtitle1",
-    weight: "medium"
-  }, formatAmount?.(fixedChargeValue))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.detail
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    weight: "medium"
-  }, variableChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    variant: "subtitle1",
-    weight: "medium"
-  }, formatAmount?.(variableChargeValue))), /*#__PURE__*/_react.default.createElement("a", {
+  }, charges.map(_ref5 => {
+    let {
+      concept,
+      amount
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.detail,
+      key: concept
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      weight: "medium"
+    }, concept), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      variant: "subtitle1",
+      weight: "medium"
+    }, formatAmount?.(amount)));
+  }), /*#__PURE__*/_react.default.createElement("a", {
     className: _stylesModule.default.footerAction,
     href: ratesTableLink,
     rel: "noopener noreferrer",

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

@@ -128,10 +128,6 @@ const Billing = _ref => {
     title: automaticDebitTitle
   }, {
     leftIcon: 'IconReceipt2',
-    leftIconProps: {
-      area: true,
-      size: 28
-    },
     onClick: handleDownloadBill,
     rightIcon: 'IconDownload',
     title: downloadBillTitle

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

@@ -7,6 +7,7 @@
   padding: 24px 32px;
 
   @media #{$mobile} {
+    grid-gap: 24px;
     padding: 24px 16px;
   }
 }
@@ -14,8 +15,10 @@
 .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;
@@ -30,9 +33,15 @@
 .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 {
@@ -46,6 +55,10 @@
   flex: 1;
   flex-wrap: wrap;
   grid-gap: 32px;
+
+  @media #{$mobile} {
+    grid-gap: 24px;
+  }
 }
 
 .column {
@@ -117,7 +130,7 @@
 
 .totalCard {
   background-color: var(--light01);
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: var(--shadowGrayBottom1);
   display: flex;
   flex-direction: column;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../../../scss/variables/mediaQueries.module.scss';
+
 $bimestral-consumption-card-min-width: 328px;
 
 .bimestralConsumption {
@@ -18,6 +20,10 @@ $bimestral-consumption-card-min-width: 328px;
   flex-wrap: wrap;
   grid-gap: 32px;
   justify-content: space-between;
+
+  @media #{$mobile} {
+    grid-gap: 24px;
+  }
 }
 
 .bimestralConsumptionCardHeader {

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

@@ -24,7 +24,7 @@ const CurrentConsumption = _ref => {
   } = smartBill || {};
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
   const {
-    totalConsumption,
+    totalConsumptionFormatted,
     unit,
     description
   } = (0, _utils.getConsumptionLabels)(periodsToCompare, texts) || {};
@@ -41,7 +41,7 @@ const CurrentConsumption = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "title1",
     weight: "medium"
-  }, totalConsumption), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, totalConsumptionFormatted), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     variant: "subtitle1",
     weight: "medium"
   }, unit)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {

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

@@ -49,7 +49,8 @@ const getConsumptionLabels = function () {
   });
   return {
     description,
-    totalConsumption: (0, _numeral.default)(totalConsumptionValue).format('0,0.[00]'),
+    totalConsumption: Number(totalConsumptionValue),
+    totalConsumptionFormatted: (0, _numeral.default)(totalConsumptionValue).format('0,0.[00]'),
     unit: totalConsumptionUnit
   };
 };

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

@@ -7,6 +7,7 @@
   padding: 24px 32px;
 
   @media #{$mobile} {
+    grid-gap: 24px;
     padding: 24px 16px;
   }
 }
@@ -22,6 +23,10 @@
   flex: 1;
   flex-wrap: wrap;
   grid-gap: 32px;
+
+  @media #{$mobile} {
+    grid-gap: 24px;
+  }
 }
 
 .consumptionDetail {

package/dist/components/SmartBillSummary/utils.js

@@ -10,13 +10,13 @@ var _lodash = require("lodash");
 var _tabs = require("../../shared/constants/tabs");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getTabOptions = (tabOptions, smartBill) => {
+const getTabOptions = (isDesktopSize, tabOptions, smartBill) => {
   const hasBimestralPeriodicity = smartBill?.periods?.some(period => period.settlements?.periodicity === _constants.BIMESTRAL_PERIODICITY);
   return tabOptions.map(tab => ({
     ...tab,
-    icon: /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    icon: isDesktopSize ? /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       name: tab.icon
-    })
+    }) : null
   })).filter(_ref => {
     let {
       enabled,

package/package.json

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