@widergy/utilitygo-smart-bill-web 3.4.0 → 3.5.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.5.1](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.5.0...v3.5.1) (2025-04-30)
+
+
+### Bug Fixes
+
+* download bill icon smartbill ([#47](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/47)) ([d10ec3c](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/d10ec3cb2930dafe5df11361158eb78fc4ffc505))
+
+# [3.5.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.4.0...v3.5.0) (2025-04-21)
+
+
+### Features
+
+* [CX-245] smartbill ai panel ([#45](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/45)) ([e321c69](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/e321c694ba59000740a049325f59661f46510e22))
+
 # [3.4.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.3.0...v3.4.0) (2025-03-25)
 
 

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

@@ -0,0 +1,123 @@
+"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 _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 }; }
+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 AIPanel = _ref => {
+  let {
+    aiQuestionsList,
+    answer,
+    error,
+    getAnswer,
+    isOpen,
+    loading,
+    notEnoughBillsErrorType,
+    onClose
+  } = _ref;
+  const [openCards, setOpenCards] = (0, _react.useState)([]);
+  const toggleCard = id => {
+    if (!answer?.[id] && !openCards.includes(id)) {
+      getAnswer(id);
+    }
+    setOpenCards(prevOpenCards => prevOpenCards.includes(id) ? prevOpenCards.filter(openId => openId !== id) : [...prevOpenCards, id]);
+  };
+  const handleClose = () => {
+    onClose?.();
+    setOpenCards([]);
+  };
+  return /*#__PURE__*/_react.default.createElement(_energyUi.UTPanel, {
+    classes: {
+      paper: _stylesModule.default.paper,
+      perfectScrollbar: _stylesModule.default.panelScrollbar
+    },
+    onClose: handleClose,
+    open: isOpen,
+    panelSide: "right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium",
+    variant: "title2"
+  }, _i18next.default.t('IAPanel:title')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.questionsContainer
+  }, aiQuestionsList.map(_ref2 => {
+    let {
+      id,
+      title
+    } = _ref2;
+    const isLoading = loading?.[id];
+    const errorContent = error?.[id];
+    const answerContent = answer?.[id];
+    const renderAnswer = isLoading || errorContent || answerContent;
+    const notEnoughBills = errorContent?.errorType === notEnoughBillsErrorType;
+    const notEnoughBillsContent = errorContent?.error;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTCard, {
+      classNames: {
+        base: _stylesModule.default.card,
+        expandableContent: _stylesModule.default.expandableContent,
+        expandableContentActive: _stylesModule.default.activeCard
+      },
+      header: title,
+      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, {
+      containerClassName: _stylesModule.default.skeletonContainer,
+      count: 3,
+      height: 22
+    }), /*#__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, {
+      colorTheme: "neutral",
+      name: "IconSparkles",
+      size: 18
+    }))) : errorContent ? /*#__PURE__*/_react.default.createElement("div", {
+      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, {
+      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, {
+      colorTheme: "neutral",
+      name: "IconSparkles",
+      size: 18
+    }))) : null) : null);
+  }))));
+};
+AIPanel.propTypes = {
+  aiQuestionsList: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.string,
+    title: _propTypes.string
+  })),
+  answer: _propTypes.object,
+  error: _propTypes.object,
+  getAnswer: _propTypes.func,
+  isOpen: _propTypes.bool,
+  loading: _propTypes.object,
+  notEnoughBillsErrorType: _propTypes.string,
+  onClose: _propTypes.func
+};
+var _default = exports.default = AIPanel;

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

@@ -0,0 +1,82 @@
+$ia-panel-width: 600px;
+
+.paper {
+  height: 100%;
+  max-width: 100%;
+  padding: 0;
+  width: $ia-panel-width;
+}
+
+.panelScrollbar {
+  display: contents;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  height: 100%;
+  padding: 8px 24px;
+}
+
+.questionsContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+}
+
+.card {
+  background-color: var(--light01);
+  border: none;
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  padding: 12px 16px;
+}
+
+.expandableContent {
+  margin: 0 -16px 0;
+}
+
+.activeCard {
+  border-top: 1px solid var(--light04);
+  margin: 12px -16px 0 !important;
+  padding: 24px 0 12px;
+}
+
+.answer {
+  background-color: var(--semanticInformation01);
+  border-radius: 8px;
+  margin: 0 16px;
+  padding: 8px 12px;
+}
+
+.errorAnswer {
+  background-color: var(--semanticError01);
+}
+
+.notEnoughBillsContainer {
+  background-color: var(--light02);
+}
+
+.skeletonContainer {
+  span {
+    margin: 4px 0;
+  }
+
+  span:nth-child(5) {
+    width: 50%;
+  }
+}
+
+.generatedByLabel {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  margin-top: 4px;
+}
+
+.errorCard {
+  display: flex;
+  grid-gap: 8px;
+}

package/dist/components/SmartBillSummary/index.js

@@ -10,6 +10,7 @@ var _propTypes = require("prop-types");
 var _billDataTypes = require("../../shared/types/billDataTypes");
 var _constants = require("./constants");
 var _utils = require("./utils");
+var _AIPanel = _interopRequireDefault(require("./components/AIPanel"));
 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); }
@@ -32,10 +33,27 @@ const SmartBillSummary = _ref => {
     translations,
     utils
   } = _ref;
+  const {
+    aiQuestionsList,
+    notEnoughBillsErrorType,
+    smartBillAIAnswer = {},
+    smartBillAIAnswerError,
+    smartBillAIAnswerLoading
+  } = constants;
+  const {
+    getSmartBillAIAnswer,
+    resetSmartBillAIAnswers
+  } = handlers;
   const filteredTabOptions = loading ? [] : (0, _utils.getTabOptions)(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 closeAIPanel = () => {
+    setAiPanelIsOpen(false);
+    resetSmartBillAIAnswers();
+  };
   (0, _react.useEffect)(() => {
     if (defaultCurrentTab) changeCurrentTab(defaultCurrentTab);
   }, [defaultCurrentTab]);
@@ -72,7 +90,23 @@ const SmartBillSummary = _ref => {
     smartBill,
     translations,
     utils
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
+    className: _stylesModule.default.AIFloatButton,
+    onClick: openAIPanel,
+    withRipple: true
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "negative",
+    name: "EnergyIconChatSparkFilled"
+  })), /*#__PURE__*/_react.default.createElement(_AIPanel.default, {
+    aiQuestionsList: aiQuestionsList,
+    answer: smartBillAIAnswer,
+    error: smartBillAIAnswerError,
+    getAnswer: getSmartBillAIAnswer,
+    isOpen: aiPanelIsOpen,
+    loading: smartBillAIAnswerLoading,
+    notEnoughBillsErrorType: notEnoughBillsErrorType,
+    onClose: closeAIPanel
+  }));
 };
 SmartBillSummary.propTypes = {
   assets: _propTypes.object,

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

@@ -46,3 +46,15 @@ $tab-height: 48px;
   justify-content: center;
   width: 100%;
 }
+
+.AIFloatButton {
+  align-items: center;
+  background-color: var(--actionAccent04);
+  border-radius: 100px;
+  bottom: 32px;
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  position: fixed;
+  right: 32px;
+}

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

@@ -127,7 +127,7 @@ const Billing = _ref => {
     showStatus: true,
     title: automaticDebitTitle
   }, {
-    leftIcon: 'IconInfoCircle',
+    leftIcon: 'IconReceipt2',
     leftIconProps: {
       area: true,
       size: 28

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

@@ -11,7 +11,7 @@ require("dayjs/locale/es");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 _dayjs.default.locale('es');
-const getMaxValue = consumptionData => Math.max(...consumptionData.map(d => d.consumptions?.[0]?.value || 0));
+const getMaxValue = consumptionData => Math.max(...consumptionData.map(d => d?.consumptions?.[0]?.value || 0));
 exports.getMaxValue = getMaxValue;
 const getBarHeight = (maxValue, value) => {
   const adjustedValue = value ** _constants.SCALE_FACTOR;

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

@@ -15,7 +15,7 @@ const getConsumptionPeriodsToCompare = function () {
   if (!(0, _lodash.isEmpty)(periods)) {
     const currentPeriod = periods.find(period => period.current);
     const previousYearPeriod = periods.find(period => period.number === currentPeriod.number && parseInt(period.year, 10) === parseInt(currentPeriod.year, 10) - 1);
-    return [currentPeriod, previousYearPeriod];
+    return [currentPeriod, previousYearPeriod].filter(Boolean);
   }
 };
 exports.getConsumptionPeriodsToCompare = getConsumptionPeriodsToCompare;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",
@@ -62,6 +62,7 @@
     "node-sass": "^8.0.0",
     "numeral": ">=2.0.6",
     "react-jss": "^8.6.1",
+    "react-loading-skeleton": "^3.3.1",
     "react-perfect-scrollbar": "^1.5.3",
     "react-responsive": "^4.1.0",
     "sass-loader": "^10.0.5",