@widergy/utilitygo-smart-bill-web 1.10.0 → 1.12.0

package/dist/shared/utils/stagesGraph.js

@@ -7,26 +7,28 @@ exports.getSubStageWidth = exports.getSubStageRangeWidth = exports.getStageRange
 
 var _stagesGraph = require("../constants/stagesGraph");
 
-const getCurrentStage = (value, rateStages) => rateStages.find(stage => stage.range[_stagesGraph.MIN_VALUE] <= value && (value <= stage.range[_stagesGraph.MAX_VALUE] || stage.range[_stagesGraph.MAX_VALUE] === _stagesGraph.INFINITE));
+var getCurrentStage = function getCurrentStage(value, rateStages) {
+  return rateStages.find(function (stage) {
+    return stage.range[_stagesGraph.MIN_VALUE] <= value && (value <= stage.range[_stagesGraph.MAX_VALUE] || stage.range[_stagesGraph.MAX_VALUE] === _stagesGraph.INFINITE);
+  });
+};
 
 exports.getCurrentStage = getCurrentStage;
 
-const getSubStageRangeWidth = subStage => {
-  const {
-    range
-  } = subStage;
+var getSubStageRangeWidth = function getSubStageRangeWidth(subStage) {
+  var range = subStage.range;
   return range[_stagesGraph.MAX_VALUE] === _stagesGraph.INFINITE || !range[_stagesGraph.MAX_VALUE] ? _stagesGraph.DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH : range[_stagesGraph.MAX_VALUE] - range[_stagesGraph.MIN_VALUE];
 };
 
 exports.getSubStageRangeWidth = getSubStageRangeWidth;
 
-const getStageRangeWidth = stage => {
-  const {
-    range
-  } = stage;
+var getStageRangeWidth = function getStageRangeWidth(stage) {
+  var range = stage.range;
 
   if (range[_stagesGraph.MAX_VALUE] === _stagesGraph.INFINITE || !range[_stagesGraph.MAX_VALUE]) {
-    return stage.sub_rate_stages.reduce((totalWidth, subStage) => totalWidth + getSubStageRangeWidth(subStage), 0);
+    return stage.sub_rate_stages.reduce(function (totalWidth, subStage) {
+      return totalWidth + getSubStageRangeWidth(subStage);
+    }, 0);
   }
 
   return range[_stagesGraph.MAX_VALUE] - range[_stagesGraph.MIN_VALUE];
@@ -34,6 +36,8 @@ const getStageRangeWidth = stage => {
 
 exports.getStageRangeWidth = getStageRangeWidth;
 
-const getSubStageWidth = (stage, subStage) => getSubStageRangeWidth(subStage) / getStageRangeWidth(stage) * 100;
+var getSubStageWidth = function getSubStageWidth(stage, subStage) {
+  return getSubStageRangeWidth(subStage) / getStageRangeWidth(stage) * 100;
+};
 
 exports.getSubStageWidth = getSubStageWidth;

package/dist/utils/hooks.js

@@ -5,42 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScreenSize = void 0;
 
-var _react = require("react");
-
-var _browser = require("@widergy/web-utils/lib/browser");
-
-var _function = require("@widergy/web-utils/lib/function");
-
-const useScreenSize = function () {
-  let sizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const mobileBP = sizes.mobileBreakpoint || 767;
-  const tabletBP = sizes.tabletBreakpoint || 1023;
-  const [screenWidth, setScreenWidth] = (0, _react.useState)(_browser.retrieveWidth);
-  const [isMobileSize, setIsMobileSize] = (0, _react.useState)((0, _browser.isMobile)(mobileBP));
-  const [isTabletSize, setIsTabletSize] = (0, _react.useState)((0, _browser.isTablet)(mobileBP, tabletBP));
-  const [isDesktopSize, setIsDesktopSize] = (0, _react.useState)((0, _browser.isDesktop)(tabletBP));
-  const [isMobileOrTablet, setIsMobileOrTablet] = (0, _react.useState)((0, _browser.isMobile)(mobileBP) || (0, _browser.isTablet)(mobileBP, tabletBP));
-  const [isTabletOrDesktop, setIsTabletOrDesktop] = (0, _react.useState)((0, _browser.isTablet)(mobileBP, tabletBP) || (0, _browser.isDesktop)(tabletBP));
-  const handleUpdateScreen = (0, _react.useCallback)(() => {
-    setScreenWidth(_browser.retrieveWidth);
-    setIsMobileSize((0, _browser.isMobile)(mobileBP));
-    setIsTabletSize((0, _browser.isTablet)(mobileBP, tabletBP));
-    setIsDesktopSize((0, _browser.isDesktop)(tabletBP));
-    setIsMobileOrTablet((0, _browser.isMobile)(mobileBP) || (0, _browser.isTablet)(mobileBP, tabletBP));
-    setIsTabletOrDesktop((0, _browser.isTablet)(mobileBP, tabletBP) || (0, _browser.isDesktop)(tabletBP));
-  }, [mobileBP, tabletBP]);
-  (0, _react.useEffect)(() => {
-    window.addEventListener(_browser.RESIZE_EVENT, (0, _function.debounce)(handleUpdateScreen));
-    return () => window.removeEventListener(_browser.RESIZE_EVENT, (0, _function.debounce)(handleUpdateScreen));
-  }, [handleUpdateScreen]);
-  return {
-    isMobileSize,
-    isTabletSize,
-    isDesktopSize,
-    isMobileOrTablet,
-    isTabletOrDesktop,
-    screenWidth
-  };
-};
+var _energyHooks = require("@widergy/energy-hooks");
 
+var useScreenSize = (0, _energyHooks.createUseScreenSize)({
+  mobileBP: 767,
+  tabletBP: 1024
+});
 exports.useScreenSize = useScreenSize;

package/dist/utils.js

@@ -9,17 +9,21 @@ var _numeral = _interopRequireDefault(require("config/numeral"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const stringOrDash = str => str || '-';
+var stringOrDash = function stringOrDash(str) {
+  return str || '-';
+};
 
 exports.stringOrDash = stringOrDash;
 
-const numberOrDash = function (number) {
-  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0,0';
+var numberOrDash = function numberOrDash(number) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0,0';
   return number !== undefined && number !== null ? (0, _numeral.default)(number).format(format) : '-';
 };
 
 exports.numberOrDash = numberOrDash;
 
-const formatNumber = value => (0, _numeral.default)(value).format('0.[00]');
+var formatNumber = function formatNumber(value) {
+  return (0, _numeral.default)(value).format('0.[00]');
+};
 
 exports.formatNumber = formatNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",
@@ -51,6 +51,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@widergy/energy-hooks": "^1.0.0",
     "@widergy/web-utils": ">=0.4.1",
     "dayjs": "^1.10.7",
     "lodash": ">=4.17.4",
@@ -59,7 +60,6 @@
     "react-jss": "^8.6.1",
     "react-perfect-scrollbar": "^1.5.3",
     "react-responsive": "^4.1.0",
-    "recharts": "github:widergy/recharts#master",
     "sass-loader": "^7.1.0",
     "seamless-immutable": "^7.1.4",
     "yarn": "^1.22.10"

package/dist/components/BillSummary/components/BilledConcepts/components/PieChartContainer/utils.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.renderCustomizedLabel = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _constants = require("./constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const renderCustomizedLabel = (cx, cy, midAngle, innerRadius, outerRadius, percent) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + radius * Math.cos(-midAngle * _constants.RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * _constants.RADIAN);
-  return /*#__PURE__*/_react.default.createElement("text", {
-    x: x,
-    y: y,
-    fill: "white",
-    textAnchor: x > cx ? 'start' : 'end',
-    dominantBaseline: "central"
-  }, "".concat((percent * 100).toFixed(0), "%"));
-};
-
-exports.renderCustomizedLabel = renderCustomizedLabel;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/LimitsLine/index.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const LimitsLine = () => /*#__PURE__*/_react.default.createElement("div", {
-  className: _stylesModule.default.lateralLines
-}, /*#__PURE__*/_react.default.createElement("div", {
-  className: _stylesModule.default.middleLine
-}));
-
-var _default = LimitsLine;
-exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/LimitsLine/styles.module.scss

@@ -1,15 +0,0 @@
-@import '../../../../../../../../../../../../scss/variables/_colorsExport.scss';
-
-$lines-color: $black;
-
-.lateralLines {
-  border-left: 1px solid $lines-color;
-  border-right: 1px solid $lines-color;
-  min-height: 8px;
-  width: 100%;
-}
-
-.middleLine {
-  border-bottom: 1px solid $lines-color;
-  height: 50%;
-}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/index.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _smartBillTypes = require("../../../../../../../../../../../../shared/types/smartBillTypes");
-
-var _rateStagesTypes = require("../../../../../../../../../../../../shared/types/rateStagesTypes");
-
-var _WithContextApi = _interopRequireDefault(require("../../../../../../../../../../../WithContextApi"));
-
-var _constants = require("../../../../../../constants");
-
-var _aliases = require("../../../../../../../../../../../../shared/constants/aliases");
-
-var _utils = require("./utils");
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const SubStage = _ref => {
-  let {
-    contextApiInfo,
-    stage,
-    subStage,
-    isLast,
-    isDesktop,
-    index,
-    totalSubStages
-  } = _ref;
-  const {
-    Label
-  } = contextApiInfo;
-  const {
-    getStageColor
-  } = contextApiInfo.config;
-  const width = isDesktop ? "calc(".concat((0, _utils.getSubStageWidth)(stage, subStage), "%)") : "calc(100% / ".concat(stage.sub_rate_stages.length || 1, ")");
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginRight: isLast ? _constants.LAST_SUB_STAGE_MARGIN : isDesktop ? _constants.SUB_STAGE_MARGIN_DESKTOP : _constants.SUB_STAGE_MARGIN_MOBILE,
-      backgroundColor: getStageColor ? getStageColor(index, totalSubStages) : subStage.color,
-      width
-    },
-    className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.SUBSTAGE
-  }, subStage.name));
-};
-
-SubStage.propTypes = {
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  stage: _rateStagesTypes.stageType,
-  totalSubStages: _propTypes.number,
-  index: _propTypes.number,
-  subStage: _rateStagesTypes.subStageType,
-  isLast: _propTypes.bool,
-  isDesktop: _propTypes.bool
-};
-
-var _default = (0, _WithContextApi.default)()(SubStage);
-
-exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/styles.module.scss

@@ -1,5 +0,0 @@
-.container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/utils.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSubStageWidth = void 0;
-
-var _utils = require("../../../../../../utils");
-
-const getSubStageWidth = (stage, subStage) => (0, _utils.getSubStageRangeWidth)(subStage) / (0, _utils.getStageRangeWidth)(stage) * 100;
-
-exports.getSubStageWidth = getSubStageWidth;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/index.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _rateStagesTypes = require("../../../../../../../../../../shared/types/rateStagesTypes");
-
-var _constants = require("../../../../constants");
-
-var _LegendItem = _interopRequireDefault(require("../../../LegendItem"));
-
-var _LimitsLine = _interopRequireDefault(require("./components/LimitsLine"));
-
-var _SubStage = _interopRequireDefault(require("./components/SubStage"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Stage = _ref => {
-  let {
-    stage,
-    isLast,
-    totalStages,
-    totalSubStages,
-    legendNumber,
-    isDesktop
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginRight: isLast ? _constants.LAST_STAGE_MARGIN : isDesktop ? _constants.STAGE_MARGIN_DESKTOP : _constants.STAGE_MARGIN_MOBILE,
-      width: "calc(".concat(100 / totalStages, "%)")
-    },
-    className: _stylesModule.default.container
-  }, totalStages !== 1 && /*#__PURE__*/_react.default.createElement(_LegendItem.default, {
-    stage: isDesktop && stage,
-    stagesLength: totalStages,
-    legendNumber: legendNumber,
-    showNumber: !isDesktop
-  }), /*#__PURE__*/_react.default.createElement(_LimitsLine.default, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.bars
-  }, stage.sub_rate_stages.map((subStage, index) => /*#__PURE__*/_react.default.createElement(_SubStage.default, {
-    key: subStage.category,
-    index: subStage.category,
-    stage: stage,
-    totalSubStages: totalSubStages,
-    subStage: subStage,
-    isLast: index === stage.sub_rate_stages.length - 1,
-    isDesktop: isDesktop
-  }))));
-};
-
-Stage.propTypes = {
-  stage: _rateStagesTypes.stageType,
-  legendNumber: _propTypes.number,
-  isLast: _propTypes.bool,
-  totalStages: _propTypes.number,
-  totalSubStages: _propTypes.number,
-  isDesktop: _propTypes.bool
-};
-var _default = Stage;
-exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/styles.module.scss

@@ -1,32 +0,0 @@
-@import '../../../../../../../../../../scss/variables/_mediaQueries';
-@import '../../../../../../../../../../scss/variables/_colors';
-
-$icon-size: 21px;
-
-.container {
-  align-items: center;
-  display: flex;
-  flex-flow: column;
-  width: 100%;
-}
-
-.header {
-  display: flex;
-  white-space: nowrap;
-}
-
-.bars {
-  display: flex;
-  margin: 24px 0;
-  min-height: 33px;
-  width: 100%;
-}
-
-.icon {
-  height: $icon-size;
-  width: $icon-size;
-
-  > g {
-    fill: $black;
-  }
-}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/index.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _rateStagesTypes = require("../../../../../../../../shared/types/rateStagesTypes");
-
-var _constants = require("../../constants");
-
-var _Stage = _interopRequireDefault(require("./components/Stage"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Bars = _ref => {
-  let {
-    rateStages,
-    isDesktop
-  } = _ref;
-  const barsMargin = isDesktop ? _constants.BARS_MARGIN_DESKTOP : _constants.BARS_MARGIN_MOBILE;
-
-  const accumSubStages = (count, currStage) => {
-    var _currStage$sub_rate_s;
-
-    return count + ((_currStage$sub_rate_s = currStage.sub_rate_stages) === null || _currStage$sub_rate_s === void 0 ? void 0 : _currStage$sub_rate_s.length) || 1;
-  };
-
-  const totalSubStages = rateStages.reduce(accumSubStages, 0);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      margin: "0 ".concat(barsMargin),
-      width: "calc(100% - 2 * ".concat(barsMargin, ")")
-    },
-    className: _stylesModule.default.container
-  }, rateStages.map((stage, index) => /*#__PURE__*/_react.default.createElement(_Stage.default, {
-    key: stage.group,
-    stage: stage,
-    isFirst: index === 0,
-    legendNumber: index + 1,
-    isLast: index === rateStages.length - 1,
-    totalStages: rateStages.length,
-    totalSubStages: totalSubStages,
-    isDesktop: isDesktop
-  })));
-};
-
-Bars.propTypes = {
-  rateStages: _rateStagesTypes.rateStagesTypes,
-  isDesktop: _propTypes.bool
-};
-var _default = Bars;
-exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/styles.module.scss

@@ -1,3 +0,0 @@
-.container {
-  display: flex;
-}

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/LegendItem/index.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _WithContextApi = _interopRequireDefault(require("../../../../../../../WithContextApi"));
-
-var _smartBillTypes = require("../../../../../../../../shared/types/smartBillTypes");
-
-var _Magnitude = _interopRequireDefault(require("../../../../../../../Magnitude"));
-
-var _aliases = require("../../../../../../../../shared/constants/aliases");
-
-var _rateStagesTypes = require("../../../../../../../../shared/types/rateStagesTypes");
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const LegendItem = _ref => {
-  let {
-    contextApiInfo,
-    legendNumber,
-    stage,
-    showNumber,
-    stagesLength
-  } = _ref;
-  const {
-    Label,
-    config,
-    assets
-  } = contextApiInfo;
-  const {
-    texts
-  } = config;
-  const {
-    consumptionUpToDesktop,
-    consumptionMoreThanDesktop,
-    consumptionStartingFormDesktop
-  } = texts.ratesDefinition;
-
-  const format = text => text.toUpperCase();
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: stage ? _stylesModule.default.legendItemContainer : _stylesModule.default.numberItemContainer
-  }, showNumber && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.stageNumber
-  }, /*#__PURE__*/_react.default.createElement(Label, null, legendNumber)), stage && /*#__PURE__*/_react.default.createElement("div", {
-    className: showNumber ? _stylesModule.default.stageDataContainer : _stylesModule.default.noNumberStageDataContainer
-  }, /*#__PURE__*/_react.default.createElement(Label, {
-    alias: _aliases.STAGE_DETAIL,
-    className: _stylesModule.default.header
-  }, format(legendNumber === 1 ? consumptionUpToDesktop : legendNumber === stagesLength ? consumptionMoreThanDesktop : consumptionStartingFormDesktop)), /*#__PURE__*/_react.default.createElement(_Magnitude.default, {
-    numberAlias: _aliases.RATE_STAGE_MAGNITUDE,
-    unitAlias: _aliases.RATE_STAGE_MAGNITUDE,
-    value: legendNumber === 1 ? stage.range.at(-1) : stage.range.at(0),
-    unit: stage.unit,
-    Icon: () => /*#__PURE__*/_react.default.createElement(assets.EnergyIcon, {
-      className: _stylesModule.default.rateStagesEnergyIcon
-    }),
-    classes: {
-      container: _stylesModule.default.magnitudeContainer
-    }
-  })));
-};
-
-LegendItem.propTypes = {
-  stage: _rateStagesTypes.stageType,
-  showNumber: true,
-  stagesLength: _propTypes.number,
-  contextApiInfo: _smartBillTypes.contextApiInfoTypes,
-  legendNumber: _propTypes.number
-};
-
-var _default = (0, _WithContextApi.default)()(LegendItem);
-
-exports.default = _default;

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/LegendItem/styles.module.scss

@@ -1,57 +0,0 @@
-@import '../../../../../../../../scss/variables/_colors';
-
-$bubble-number-size: 24px;
-
-.legendItemContainer {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.numberItemContainer {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 8px;
-}
-
-.stageDataContainer {
-  align-items: center;
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.noNumberStageDataContainer {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding-bottom: 16px;
-  width: 100%;
-}
-
-.magnitudeContainer {
-  gap: 8px;
-}
-
-.stageNumber {
-  align-items: center;
-  background-color: $black;
-  border-radius: 500px;
-  display: flex;
-  justify-content: center;
-  min-width: $bubble-number-size;
-  height: $bubble-number-size;
-  width: $bubble-number-size;
-
-  * {
-    color: $white;
-  }
-}
-
-.rateStagesEnergyIcon {
-  height: 18px;
-}