@widergy/utilitygo-smart-bill-web 3.0.4 → 3.2.0

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

@@ -0,0 +1,48 @@
+@import '_sizes.scss';
+
+$max-content-width: 1264px;
+$tab-height: 48px;
+
+.tabsContainer {
+  > button {
+    border-bottom: 1px solid var(--light04);
+    height: $tab-height;
+    max-width: unset;
+    min-height: $tab-height;
+  }
+}
+
+.contentContainer {
+  flex: 1;
+  margin: 0 auto;
+  max-height: calc(100vh - var(--workflowTopbarHeight) - #{$tab-height});
+  max-width: $max-content-width;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.tabLabel {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+
+  svg {
+    margin-bottom: 0 !important;
+  }
+}
+
+.baseSelected {
+  svg {
+    stroke: var(--actionAccent04);
+  }
+}
+
+.loadingContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAG_ICON_SIZE = exports.DEFAULT_TAG_ICON = exports.DEFAULT_TAG_COLOR_THEME = void 0;
+const DEFAULT_TAG_ICON = exports.DEFAULT_TAG_ICON = 'IconCalendarEvent';
+const TAG_ICON_SIZE = exports.TAG_ICON_SIZE = 14;
+const DEFAULT_TAG_COLOR_THEME = exports.DEFAULT_TAG_COLOR_THEME = 'gray';

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _energyUi = require("@widergy/energy-ui");
+var _lodash = require("lodash");
+var _billDataTypes = require("../../../../../../shared/types/billDataTypes");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Billing = _ref => {
+  let {
+    smartBill,
+    texts
+  } = _ref;
+  const {
+    title,
+    tagLabel,
+    clarification,
+    periodDetail
+  } = texts?.billing || {};
+  const currentPeriod = smartBill?.periods.find(period => period.current);
+  const billingsToShow = (0, _utils.getBillingsToShow)(currentPeriod?.settlements);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.details
+  }, billingsToShow.map(_ref2 => {
+    let {
+      colorTheme,
+      consumptions,
+      current,
+      icon,
+      issued_on: issuedOn,
+      number
+    } = _ref2;
+    const monthName = (0, _utils.getMonthName)(issuedOn);
+    const consumptionValue = consumptions?.[0].value;
+    const consumptionUnit = consumptions?.[0].unit;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: issuedOn,
+      className: `${_stylesModule.default.billing} ${current ? _stylesModule.default.currentBilling : ''}`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.consumptionDetail
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.consumption
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      variant: "title3",
+      weight: "medium"
+    }, consumptionValue), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      variant: "subtitle1",
+      weight: "medium"
+    }, consumptionUnit)), /*#__PURE__*/_react.default.createElement("div", {
+      className: `${_stylesModule.default.tag} ${current ? _stylesModule.default.billedTag : ''}`
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+      colorTheme: colorTheme || _constants.DEFAULT_TAG_COLOR_THEME,
+      name: icon || _constants.DEFAULT_TAG_ICON,
+      size: _constants.TAG_ICON_SIZE
+    }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      colorTheme: current ? 'success' : 'gray',
+      variant: "xsmall",
+      weight: "medium",
+      withMarkdown: true
+    }, tagLabel(current)))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      colorTheme: "gray"
+    }, periodDetail({
+      monthName,
+      number
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.clarifications,
+    withMarkdown: true
+  }, clarification({
+    firstMonth: (0, _lodash.capitalize)((0, _utils.getMonthName)(billingsToShow?.[1]?.issued_on)),
+    secondMonth: (0, _lodash.capitalize)((0, _utils.getMonthName)(billingsToShow?.[0]?.issued_on))
+  })));
+};
+Billing.propTypes = {
+  smartBill: _billDataTypes.billDataTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = Billing;

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

@@ -0,0 +1,55 @@
+.container {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  flex: 1;
+  height: fit-content;
+  padding: 24px;
+}
+
+.details {
+  margin: 24px -24px 0;
+}
+
+.billing {
+  border-bottom: 1px solid var(--light04);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+  padding: 16px 24px;
+}
+
+.currentBilling {
+  background-color: var(--semanticSuccess01);
+}
+
+.consumption {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.consumptionDetail {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  justify-content: space-between;
+}
+
+.tag {
+  align-items: center;
+  background-color: var(--light04);
+  border-radius: 4px;
+  display: flex;
+  grid-gap: 4px;
+  justify-content: space-between;
+  padding: 4px 8px;
+}
+
+.billedTag {
+  background-color: var(--semanticSuccess02);
+}
+
+.clarifications {
+  padding: 16px 0;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMonthName = exports.getConsumptionLabel = exports.getBillingsToShow = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_dayjs.default.locale('es');
+const getBillingsToShow = settlements => {
+  const currentBilling = {
+    ...settlements?.current,
+    colorTheme: 'success',
+    current: true,
+    icon: 'IconCheck'
+  };
+  const remainingBillings = settlements?.remaining || [];
+  return [currentBilling, ...remainingBillings];
+};
+exports.getBillingsToShow = getBillingsToShow;
+const getMonthName = date => (0, _dayjs.default)(date).format('MMMM');
+exports.getMonthName = getMonthName;
+const getConsumptionLabel = consumptions => {
+  const consumption = consumptions?.[0];
+  const {
+    value,
+    unit
+  } = consumption || {};
+  return `${value} ${unit}`;
+};
+exports.getConsumptionLabel = getConsumptionLabel;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/BimestralConsumption/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CONSUMPTION_CARDS = void 0;
+const CONSUMPTION_CARDS = exports.CONSUMPTION_CARDS = [{
+  icon: 'EnergyIconConsumptionBoxFilled',
+  key: 'consumptionCalculationCard'
+}, {
+  icon: 'IconReceipt2',
+  key: 'billingCard'
+}];

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

@@ -0,0 +1,78 @@
+"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 _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BimestralConsumption = _ref => {
+  let {
+    assets,
+    texts
+  } = _ref;
+  const bimestralConsumptionTexts = texts?.bimestralConsumption;
+  const {
+    title: bimestralTitle,
+    description: bimestralDescription
+  } = bimestralConsumptionTexts || {};
+  const {
+    BackgroundVector
+  } = assets?.bimestral || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumption
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumptionTitles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, bimestralTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, bimestralDescription)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bimestralConsumptionCards
+  }, _constants.CONSUMPTION_CARDS.map(_ref2 => {
+    let {
+      icon,
+      key
+    } = _ref2;
+    const title = bimestralConsumptionTexts?.[key]?.title;
+    const description = bimestralConsumptionTexts?.[key]?.description;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
+      adornment: {
+        position: 'left',
+        type: 'icon',
+        props: {
+          colorTheme: 'accent',
+          name: icon,
+          shade: '04',
+          size: 100
+        }
+      },
+      BackgroundImage: BackgroundVector,
+      classNames: {
+        backgroundImage: _stylesModule.default.backgroundImage,
+        container: _stylesModule.default.bimestralConsumptionCardContainer,
+        header: _stylesModule.default.bimestralConsumptionCardHeader
+      },
+      description: description,
+      descriptionProps: {
+        className: _stylesModule.default.bimestralConsumptionCardDescription,
+        withMarkdown: true
+      },
+      key: key,
+      size: "small",
+      title: title,
+      titleProps: {
+        variant: 'subtitle2',
+        weight: 'medium'
+      }
+    });
+  })));
+};
+BimestralConsumption.propTypes = {
+  assets: _propTypes.object,
+  texts: _propTypes.object
+};
+var _default = exports.default = BimestralConsumption;

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

@@ -0,0 +1,43 @@
+$bimestral-consumption-card-min-width: 328px;
+
+.bimestralConsumption {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.bimestralConsumptionTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.bimestralConsumptionCards {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+  justify-content: space-between;
+}
+
+.bimestralConsumptionCardHeader {
+  align-items: center;
+  grid-gap: 12px;
+}
+
+.bimestralConsumptionCardContainer {
+  flex: 1;
+  min-width: $bimestral-consumption-card-min-width;
+}
+
+.bimestralConsumptionCardDescription {
+  strong {
+    color: var(--actionAccent05);
+  }
+}
+
+.backgroundImage {
+  height: 120%;
+  object-fit: cover;
+  right: -20%;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCALE_FACTOR = exports.MIN_HEIGHT = exports.MAX_HEIGHT = void 0;
+const MIN_HEIGHT = exports.MIN_HEIGHT = 8;
+const MAX_HEIGHT = exports.MAX_HEIGHT = 160;
+const SCALE_FACTOR = exports.SCALE_FACTOR = 6;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
+var _propTypes = require("prop-types");
+var _utils = require("./utils");
+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 ConsumptionComparison = _ref => {
+  let {
+    periodsToCompare = [],
+    texts
+  } = _ref;
+  const maxValue = (0, _utils.getMaxValue)(periodsToCompare);
+  const title = texts?.consumptions?.comparisonTitle;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.consumptionComparisonLabel,
+    colorTheme: "gray",
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, periodsToCompare.map(_ref2 => {
+    let {
+      consumptions,
+      current,
+      number,
+      settlements,
+      year
+    } = _ref2;
+    const {
+      value,
+      unit
+    } = consumptions?.[0] || {};
+    const barHeight = (0, _utils.getBarHeight)(maxValue, value);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: number + year,
+      className: _stylesModule.default.barContainer
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.value,
+      variant: "small"
+    }, (0, _utils.getFormattedValue)(value, unit)), /*#__PURE__*/_react.default.createElement("div", {
+      className: `${_stylesModule.default.bar} ${current ? _stylesModule.default.currentBar : ''}`,
+      style: {
+        height: `${barHeight}px`
+      }
+    }), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.year,
+      variant: "small",
+      weight: "medium"
+    }, year), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.period,
+      colorTheme: "gray",
+      variant: "small"
+    }, (0, _utils.getPeriod)(settlements)));
+  })));
+};
+ConsumptionComparison.propTypes = {
+  periodsToCompare: _billDataTypes.periodsTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = ConsumptionComparison;

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

@@ -0,0 +1,43 @@
+.consumptionComparisonLabel {
+  margin: 12px 0;
+}
+
+.container {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 16px;
+  height: 240px;
+  justify-content: center;
+}
+
+.barContainer {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.bar {
+  background: var(--chartGradientVertical2);
+  border-radius: 6px 6px 0 0;
+  transition: height 0.3s ease;
+  width: 100%;
+}
+
+.currentBar {
+  background: var(--chartGradientVertical1);
+}
+
+.value {
+  margin: 12px 0 4px;
+}
+
+.year {
+  margin-top: 12px;
+}
+
+.period {
+  color: var(--gray02);
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPeriod = exports.getMaxValue = exports.getFormattedValue = exports.getBarHeight = void 0;
+var _lodash = require("lodash");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _numeral = _interopRequireDefault(require("numeral"));
+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));
+exports.getMaxValue = getMaxValue;
+const getBarHeight = (maxValue, value) => {
+  const adjustedValue = value ** _constants.SCALE_FACTOR;
+  const adjustedMax = maxValue ** _constants.SCALE_FACTOR;
+  return _constants.MIN_HEIGHT + adjustedValue / adjustedMax * (_constants.MAX_HEIGHT - _constants.MIN_HEIGHT);
+};
+exports.getBarHeight = getBarHeight;
+const getPeriod = function () {
+  let settlements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    end_date: endDate,
+    start_date: startDate
+  } = settlements;
+  const previousMonth = (0, _dayjs.default)(startDate);
+  const currentMonth = (0, _dayjs.default)(endDate);
+  const formattedPeriod = `${(0, _lodash.capitalize)(previousMonth.format('MMM'))} - ${(0, _lodash.capitalize)(currentMonth.format('MMM'))}`;
+  return formattedPeriod;
+};
+exports.getPeriod = getPeriod;
+const getFormattedValue = (value, unit) => value ? `${(0, _numeral.default)(value).format('0,0.[00]')} ${unit || ''}` : '-';
+exports.getFormattedValue = getFormattedValue;

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

@@ -0,0 +1,72 @@
+"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 _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ConsumptionEvolution = _ref => {
+  let {
+    assets,
+    periods,
+    texts
+  } = _ref;
+  const {
+    consumptionEvolution: backgroundImages
+  } = assets || {};
+  const {
+    consumptionEvolution: consumptionEvolutionLabels
+  } = texts || {};
+  const {
+    title
+  } = consumptionEvolutionLabels || {};
+  const {
+    colorTheme,
+    description,
+    icon,
+    Image,
+    percentage,
+    period
+  } = (0, _utils.getConsumptionComparison)(backgroundImages, consumptionEvolutionLabels, periods);
+  return /*#__PURE__*/_react.default.createElement(_energyUi.UTActionCard, {
+    BackgroundImage: Image,
+    classNames: {
+      container: _stylesModule.default.container,
+      backgroundImage: _stylesModule.default.backgroundImage
+    },
+    description: description,
+    title: title,
+    titleProps: {
+      variant: 'subtitle1',
+      weight: 'medium'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.childrenContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.chipContainer
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    area: true,
+    colorTheme: colorTheme,
+    name: icon,
+    shade: "04",
+    size: 24
+  }), percentage && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: colorTheme,
+    variant: "title2",
+    weight: "medium"
+  }, percentage)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: colorTheme
+  }, period)));
+};
+ConsumptionEvolution.propTypes = {
+  assets: _propTypes.object,
+  periods: _billDataTypes.periodsTypes,
+  texts: _propTypes.object
+};
+var _default = exports.default = ConsumptionEvolution;

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

@@ -0,0 +1,29 @@
+.container {
+  background-color: var(--light02);
+  box-shadow: none;
+  margin-top: 32px;
+}
+
+.backgroundImage {
+  right: 0;
+  width: auto;
+}
+
+.chipContainer {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 100px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  justify-content: center;
+  padding: 4px 8px;
+  width: fit-content;
+}
+
+.childrenContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+}