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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.7.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.6.2...v3.7.0) (2025-05-28)
+
+
+### Features
+
+* [CX-746] smartbill ai question list new services ([#52](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/52)) ([ba403da](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/ba403da3cef06f935d585e282355d641ae4b79e9))
+
+## [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

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
-var _i18next = _interopRequireDefault(require("i18next"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,15 +14,22 @@ 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 AIPanel = _ref => {
   let {
-    aiQuestionsList,
+    aiQuestionsList = [],
+    aiQuestionsListError,
+    aiQuestionsListLoading,
     answer,
     error,
     getAnswer,
     isOpen,
     loading,
     notEnoughBillsErrorType,
-    onClose
+    onClose,
+    translations
   } = _ref;
+  const {
+    generatedByLabel,
+    title: panelTitle
+  } = translations?.AIPanel || {};
   const [openCards, setOpenCards] = (0, _react.useState)([]);
   const toggleCard = id => {
     if (!answer?.[id] && !openCards.includes(id)) {
@@ -35,6 +41,9 @@ const AIPanel = _ref => {
     onClose?.();
     setOpenCards([]);
   };
+  (0, _react.useEffect)(() => {
+    if (aiQuestionsListError && !aiQuestionsListLoading) handleClose();
+  }, [isOpen, aiQuestionsListError, aiQuestionsListLoading]);
   return /*#__PURE__*/_react.default.createElement(_energyUi.UTPanel, {
     classes: {
       paper: _stylesModule.default.paper,
@@ -48,12 +57,14 @@ const AIPanel = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
     weight: "medium",
     variant: "title2"
-  }, _i18next.default.t('IAPanel:title')), /*#__PURE__*/_react.default.createElement("div", {
+  }, panelTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLoading, {
+    loading: aiQuestionsListLoading
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.questionsContainer
   }, aiQuestionsList.map(_ref2 => {
     let {
       id,
-      title
+      question
     } = _ref2;
     const isLoading = loading?.[id];
     const errorContent = error?.[id];
@@ -67,14 +78,14 @@ const AIPanel = _ref => {
         expandableContent: _stylesModule.default.expandableContent,
         expandableContentActive: _stylesModule.default.activeCard
       },
-      header: title,
+      header: question,
       isCollapsible: true,
       isOpen: openCards.includes(id),
       key: id,
       onClick: () => toggleCard(id)
     }, renderAnswer ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${_stylesModule.default.answer} ${errorContent && !isLoading ? notEnoughBills ? _stylesModule.default.notEnoughBillsContainer : _stylesModule.default.errorAnswer : ''}`
-    }, isLoading ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    }, isLoading ? /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       containerClassName: _stylesModule.default.skeletonContainer,
       count: 3,
       height: 22
@@ -83,41 +94,45 @@ const AIPanel = _ref => {
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       colorTheme: "gray",
       variant: "small"
-    }, "Generado con AI"), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    }, generatedByLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       colorTheme: "neutral",
       name: "IconSparkles",
       size: 18
-    }))) : errorContent ? /*#__PURE__*/_react.default.createElement("div", {
+    }))) : errorContent ? /*#__PURE__*/_react.default.createElement("section", {
       className: _stylesModule.default.errorCard
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       colorTheme: notEnoughBills ? 'gray' : 'error',
       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, {
+    }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, notEnoughBills ? notEnoughBillsContent : errorContent)) : answerContent ? /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.answerContent,
       withMarkdown: true
     }, answerContent), /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.generatedByLabel
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       colorTheme: "gray",
       variant: "small"
-    }, "Generado con AI"), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    }, generatedByLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
       colorTheme: "neutral",
       name: "IconSparkles",
       size: 18
     }))) : null) : null);
-  }))));
+  })))));
 };
 AIPanel.propTypes = {
   aiQuestionsList: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    id: _propTypes.string,
-    title: _propTypes.string
+    id: _propTypes.number,
+    question: _propTypes.string
   })),
+  aiQuestionsListLoading: _propTypes.bool,
+  aiQuestionsListError: _propTypes.bool,
   answer: _propTypes.object,
   error: _propTypes.object,
   getAnswer: _propTypes.func,
   isOpen: _propTypes.bool,
   loading: _propTypes.object,
   notEnoughBillsErrorType: _propTypes.string,
-  onClose: _propTypes.func
+  onClose: _propTypes.func,
+  translations: _propTypes.object
 };
 var _default = exports.default = AIPanel;

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

@@ -24,6 +24,10 @@ $ia-panel-width: 600px;
   display: flex;
   flex-direction: column;
   grid-gap: 12px;
+
+  &:last-child {
+    padding-bottom: 24px;
+  }
 }
 
 .card {
@@ -80,3 +84,7 @@ $ia-panel-width: 600px;
   display: flex;
   grid-gap: 8px;
 }
+
+.answerContent {
+  padding-bottom: 12px;
+}

package/dist/components/SmartBillSummary/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _billDataTypes = require("../../shared/types/billDataTypes");
 var _constants = require("./constants");
 var _utils = require("./utils");
@@ -19,14 +20,8 @@ const SmartBillSummary = _ref => {
   let {
     assets,
     constants,
-    consumptionLevels,
     components,
-    currentAccount,
-    getGlossaryData,
-    glossaryData,
-    glossaryLoading,
     handlers,
-    isDesktopSize,
     loading,
     smartBill,
     tabOptions,
@@ -35,22 +30,35 @@ const SmartBillSummary = _ref => {
   } = _ref;
   const {
     aiQuestionsList,
+    aiQuestionsListError,
+    aiQuestionsListLoading,
     aiQuestionsPanelEnabled,
+    consumptionLevels,
+    currentAccount,
+    glossaryData,
+    glossaryError,
+    glossaryLoading,
+    isDesktopSize,
     notEnoughBillsErrorType,
     smartBillAIAnswer = {},
     smartBillAIAnswerError,
     smartBillAIAnswerLoading
   } = constants;
   const {
+    getGlossaryData,
     getSmartBillAIAnswer,
+    getSmartBillAIQuestions,
     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);
   const changeCurrentTab = newTab => setCurrentTab(newTab);
-  const openAIPanel = () => setAiPanelIsOpen(true);
+  const openAIPanel = () => {
+    if ((0, _isEmpty.default)(aiQuestionsList)) getSmartBillAIQuestions();
+    setAiPanelIsOpen(true);
+  };
   const closeAIPanel = () => {
     setAiPanelIsOpen(false);
     resetSmartBillAIAnswers();
@@ -58,6 +66,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
@@ -100,30 +113,27 @@ const SmartBillSummary = _ref => {
     name: "EnergyIconChatSparkFilled"
   })), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
     aiQuestionsList: aiQuestionsList,
+    aiQuestionsListError: aiQuestionsListError,
+    aiQuestionsListLoading: aiQuestionsListLoading,
     answer: smartBillAIAnswer,
     error: smartBillAIAnswerError,
     getAnswer: getSmartBillAIAnswer,
     isOpen: aiPanelIsOpen,
     loading: smartBillAIAnswerLoading,
     notEnoughBillsErrorType: notEnoughBillsErrorType,
-    onClose: closeAIPanel
+    onClose: closeAIPanel,
+    translations: translations
   })));
 };
 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.7.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",