@widergy/utilitygo-smart-bill-web 1.7.3 → 1.10.1

package/dist/components/RatesDefinition/components/PurchasedRate/styles.module.scss

@@ -4,67 +4,37 @@
 @import '../../../../scss/variables/_fontSizes.scss';
 
 .container {
-  background-color: $white;
-  border: 1px solid $borders-gray;
-  border-radius: $default-container-border-radius;
+  align-items: center;
+  border-right: 1px solid $borders-gray;
   display: flex;
   flex-flow: column;
-  min-width: 180px;
-  padding: $default-container-padding;
-
-  @media #{$desktop} {
-    margin-right: 10px;
-  }
+  gap: 16px;
+  padding: 16px;
+  justify-content: center;
+  min-width: 50%;
 
   @media #{$tablet-mobile} {
+    border-bottom: 1px solid $borders-gray;
+    border-right: none;
     margin-bottom: 10px;
+    min-width: auto;
   }
 }
 
-.title {
-  margin-bottom: 15px;
+.rateAndCategoryContainer {
+  flex-direction: column-reverse;
 }
 
 .data {
   align-items: center;
   display: flex;
   flex-flow: column;
+  gap: 24px;
   height: 100%;
-  justify-content: flex-end;
-
-  @media #{$tablet-mobile} {
-    flex-flow: row;
-    position: relative;
-  }
-}
-
-.rateAndDescription {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto 24px;
-
-  @media #{$tablet-mobile} {
-    margin: 0 auto;
-  }
-}
-
-.purchasedRate {
-  font-size: $purchased-rate-font-size;
-}
-
-.description {
-  @media #{$tablet-mobile} {
-    display: none;
-  }
+  justify-content: space-between;
 }
 
 .link {
+  color: $primary;
   text-decoration: underline;
-
-  @media #{$tablet-mobile} {
-    bottom: 8px;
-    position: absolute;
-    right: 0;
-  }
 }

package/dist/components/RatesDefinition/index.js

@@ -27,6 +27,8 @@ var _WithContextApi = _interopRequireDefault(require("../WithContextApi"));
 
 var _Advice = _interopRequireDefault(require("../Advice"));
 
+var _aliases = require("../../shared/constants/aliases");
+
 var _CategoryByConsumption = _interopRequireDefault(require("./components/CategoryByConsumption"));
 
 var _PurchasedRate = _interopRequireDefault(require("./components/PurchasedRate"));
@@ -45,38 +47,40 @@ var RatesDefinition = function RatesDefinition(_ref) {
   var description = (0, _seamlessImmutable.getIn)(billData, ['client', 'rate', 'description']);
   var fixedCharge = (0, _rates.getCharge)(billData, _rates2.CHARGE_TYPES.FIXED).amount;
   var variableCharge = (0, _rates.getCharge)(billData, _rates2.CHARGE_TYPES.VARIABLE).amount;
+  var Label = contextApiInfo.Label;
   var currentPeriod = (0, _periods.getCurrentPeriod)(billData);
   var currentConsumption = (0, _consumptions.getCurrentConsumption)(currentPeriod, _consumptions2.ENERGY_TYPES.ACTIVE);
   var _contextApiInfo$confi = contextApiInfo.config.texts.ratesDefinition,
       adviceTitle = _contextApiInfo$confi.adviceTitle,
-      adviceText = _contextApiInfo$confi.adviceText;
+      adviceText = _contextApiInfo$confi.adviceText,
+      rateDataTitle = _contextApiInfo$confi.rateDataTitle;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(_PurchasedRate.default, {
-    rate: rate,
-    classes: {
-      container: _stylesModule.default.hiddenDesktop
-    },
-    billData: billData
-  }), /*#__PURE__*/_react.default.createElement(_CategoryByConsumption.default, {
+  }, /*#__PURE__*/_react.default.createElement(_CategoryByConsumption.default, {
     value: currentConsumption.value,
     unit: currentConsumption.unit,
     category: category
   }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.bottomData
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rateDataContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rateDataTitle
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    alias: _aliases.TITLE
+  }, rateDataTitle)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.rateData
   }, /*#__PURE__*/_react.default.createElement(_PurchasedRate.default, {
     rate: rate,
+    category: category,
     description: description,
-    classes: {
-      container: _stylesModule.default.hiddenMobile
-    },
     billData: billData
   }), /*#__PURE__*/_react.default.createElement(_BillRate.default, {
     rate: rate,
     category: category,
     fixedCharge: fixedCharge,
     variableCharge: variableCharge
-  }), adviceTitle && adviceText && /*#__PURE__*/_react.default.createElement(_Advice.default, {
+  }))), adviceTitle && adviceText && /*#__PURE__*/_react.default.createElement(_Advice.default, {
     title: adviceTitle,
     contentText: adviceText
   })));

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

@@ -7,28 +7,56 @@
   flex-flow: column;
 }
 
-.rateData {
+.bottomData {
   display: flex;
-  justify-content: center;
-  width: 100%;
+  height: 260px;
 
-  @media #{$desktop} {
-    max-height: 200px;
+  @media #{$tablet-mobile} {
+    flex-direction: column;
+    height: auto;
   }
+}
+
+.rateDataTitle {
+  align-items: center;
+  display: flex;
+  height: min-content;
+  border-bottom: 1px solid $borders-gray;
+  padding: 16px;
 
   @media #{$tablet-mobile} {
-    flex-flow: column;
+    justify-content: center;
   }
 }
 
-.hiddenDesktop {
+.rateDataContainer {
+  background-color: $white;
+  border: 1px solid $borders-gray;
+  border-radius: $default-container-border-radius;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 546px;
+
   @media #{$desktop} {
-    display: none;
+    margin-right: 16px;
+  }
+
+  @media #{$tablet-mobile} {
+    flex-flow: column;
+    margin-bottom: 16px;
+    min-width: auto;
+    width: 100%;
   }
 }
 
-.hiddenMobile {
+.rateData {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+
   @media #{$tablet-mobile} {
-    display: none;
+    flex-direction: column;
   }
 }

package/dist/components/StyledAmount/constants.js

@@ -11,67 +11,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var VARIANTS = {
   small: {
-    currencyLabel: {
-      small: true
-    },
-    integerLabel: {
-      small: true
-    },
-    decimalLabel: {
-      xsmall: true
-    },
     currencyLabelStyle: _stylesModule.default.smallCurrency,
     decimalLabelStyle: _stylesModule.default.smallDecimalPart
   },
   medium: {
-    currencyLabel: {
-      medium: true
-    },
-    integerLabel: {
-      medium: true
-    },
-    decimalLabel: {
-      xsmall: true
-    },
     currencyLabelStyle: _stylesModule.default.mediumCurrency,
     decimalLabelStyle: _stylesModule.default.mediumDecimalPart
   },
   large: {
-    currencyLabel: {
-      large: true
-    },
-    integerLabel: {
-      large: true
-    },
-    decimalLabel: {
-      xxsmall: true
-    },
     currencyLabelStyle: _stylesModule.default.largeCurrency,
     decimalLabelStyle: _stylesModule.default.largeDecimalPart
   },
   xlarge: {
-    currencyLabel: {
-      xlarge: true
-    },
-    integerLabel: {
-      xlarge: true
-    },
-    decimalLabel: {
-      xsmall: true
-    },
     currencyLabelStyle: _stylesModule.default.mediumCurrency,
     decimalLabelStyle: _stylesModule.default.mediumDecimalPart
   },
   title: {
-    currencyLabel: {
-      title: true
-    },
-    integerLabel: {
-      title: true
-    },
-    decimalLabel: {
-      medium: true
-    },
     currencyLabelStyle: _stylesModule.default.titleCurrency,
     decimalLabelStyle: _stylesModule.default.titleDecimalPart
   }

package/dist/components/StyledAmount/index.js

@@ -21,8 +21,6 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -51,10 +49,7 @@ var StyledAmount = function StyledAmount(_ref) {
   var Label = contextApiInfo.Label;
   var _VARIANTS$variant = _constants.VARIANTS[variant],
       currencyLabelStyle = _VARIANTS$variant.currencyLabelStyle,
-      decimalLabelStyle = _VARIANTS$variant.decimalLabelStyle,
-      currencyLabel = _VARIANTS$variant.currencyLabel,
-      integerLabel = _VARIANTS$variant.integerLabel,
-      decimalLabel = _VARIANTS$variant.decimalLabel;
+      decimalLabelStyle = _VARIANTS$variant.decimalLabelStyle;
 
   var _ref2 = amount !== null && amount !== undefined && (0, _numeral.default)(amount).format(amountFormat).split(splitChar) || ['-', '-'],
       _ref3 = _slicedToArray(_ref2, 2),
@@ -63,15 +58,15 @@ var StyledAmount = function StyledAmount(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(Label, _extends({
+  }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: alias,
     className: currencyLabelStyle
-  }, currencyLabel), currency), /*#__PURE__*/_react.default.createElement(Label, _extends({
+  }, currency), /*#__PURE__*/_react.default.createElement(Label, {
     alias: alias
-  }, integerLabel), integerPart), /*#__PURE__*/_react.default.createElement(Label, _extends({
+  }, integerPart), /*#__PURE__*/_react.default.createElement(Label, {
     alias: aliasDecimal,
     className: decimalLabelStyle
-  }, decimalLabel), decimalPart));
+  }, decimalPart));
 };
 
 StyledAmount.propTypes = {
@@ -80,10 +75,6 @@ StyledAmount.propTypes = {
   amount: _propTypes.number,
   amountFormat: _propTypes.string,
   splitChar: _propTypes.string,
-  primary: _propTypes.bool,
-  white: _propTypes.bool,
-  bold: _propTypes.bool,
-  semibold: _propTypes.bool,
   alias: _propTypes.string,
   aliasDecimal: _propTypes.string,
   variant: _propTypes.string

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

@@ -1,36 +1,42 @@
+$title-gap: 4px;
+
 .container {
   align-items: flex-start;
   display: flex;
 }
 
 .smallCurrency {
-  margin-right: 2px;
+  margin-right: 4px;
 }
 
 .smallDecimalPart {
-  margin-left: 2px;
+  margin-left: 4px;
+  margin-top: -6px;
 }
 
 .mediumCurrency {
-  margin-right: 5px;
+  margin-right: 4px;
 }
 
 .mediumDecimalPart {
-  margin-left: 1px;
+  margin-top: -4px;
+  margin-left: 4px;
 }
 
 .largeCurrency {
-  margin-right: 5px;
+  margin-right: 4px;
 }
 
 .largeDecimalPart {
-  margin-left: 1px;
+  margin-top: -4px;
+  margin-left: 4px;
 }
 
 .titleCurrency {
-  margin-right: 10px;
+  margin-right: $title-gap;
 }
 
 .titleDecimalPart {
-  margin-top: 4px;
+  margin-top: 5px;
+  margin-left: $title-gap;
 }

package/dist/components/WithContextApi/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _aliases = require("../../shared/constants/aliases");
+
 var _Context = require("../../shared/Context");
 
 var _context = require("../../shared/utils/context");
@@ -29,10 +31,16 @@ var withContextApi = function withContextApi(retrieveStyle) {
       return /*#__PURE__*/_react.default.createElement(_Context.SmartBillConsumer, null, function (contextApiInfo) {
         var infoWithUnpackedComponents = _objectSpread(_objectSpread({}, contextApiInfo), (0, _context.unpackComponents)(contextApiInfo));
 
+        var infoWithDefaultColors = _objectSpread(_objectSpread({}, infoWithUnpackedComponents), {}, {
+          config: _objectSpread({
+            colors: contextApiInfo.colors || _aliases.DEFAULT_COLORS
+          }, contextApiInfo.config)
+        });
+
         delete infoWithUnpackedComponents.components;
         return /*#__PURE__*/_react.default.createElement(_layout.default, _extends({}, props, {
           Component: Component,
-          contextApiInfo: infoWithUnpackedComponents,
+          contextApiInfo: infoWithDefaultColors,
           retrieveStyle: retrieveStyle
         }));
       });

package/dist/constants/deviceSizes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabletMobileViewport = exports.DefaultViewport = exports.MobileViewport = exports.TabletViewport = exports.DesktopViewport = exports.TABLET = exports.MOBILE = exports.DESKTOP = exports.HDBreakpoint = exports.FullHDBreakpoint = exports.MobileBreakpoint = exports.TabletBreakpoint = void 0;
+exports.TabletViewport = exports.TabletMobileViewport = exports.TabletBreakpoint = exports.TABLET = exports.MobileViewport = exports.MobileBreakpoint = exports.MOBILE = exports.HDBreakpoint = exports.FullHDBreakpoint = exports.DesktopViewport = exports.DefaultViewport = exports.DESKTOP = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/index.js

@@ -5,30 +5,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SmartBillProvider", {
-  enumerable: true,
-  get: function get() {
-    return _SmartBillProvider.default;
-  }
-});
-Object.defineProperty(exports, "MainBillData", {
+exports.Aliases = void 0;
+Object.defineProperty(exports, "BillCalculation", {
   enumerable: true,
   get: function get() {
-    return _MainBillData.default;
+    return _BillCalculation.default;
   }
 });
-Object.defineProperty(exports, "ConsumptionPeriod", {
+Object.defineProperty(exports, "BillSummary", {
   enumerable: true,
   get: function get() {
-    return _ConsumptionPeriod.default;
+    return _BillSummary.default;
   }
 });
-Object.defineProperty(exports, "BillCalculation", {
+Object.defineProperty(exports, "ColorAliases", {
   enumerable: true,
   get: function get() {
-    return _BillCalculation.default;
+    return Aliases.COLORS;
   }
 });
+exports.ComponentNames = void 0;
 Object.defineProperty(exports, "ConsumptionComparison", {
   enumerable: true,
   get: function get() {
@@ -41,16 +37,34 @@ Object.defineProperty(exports, "ConsumptionIncluded", {
     return _ConsumptionIncluded.default;
   }
 });
+Object.defineProperty(exports, "ConsumptionPeriod", {
+  enumerable: true,
+  get: function get() {
+    return _ConsumptionPeriod.default;
+  }
+});
+Object.defineProperty(exports, "DefaultLabelProps", {
+  enumerable: true,
+  get: function get() {
+    return Aliases.DEFAULT_PROPS;
+  }
+});
+Object.defineProperty(exports, "MainBillData", {
+  enumerable: true,
+  get: function get() {
+    return _MainBillData.default;
+  }
+});
 Object.defineProperty(exports, "RatesDefinition", {
   enumerable: true,
   get: function get() {
     return _RatesDefinition.default;
   }
 });
-Object.defineProperty(exports, "BillSummary", {
+Object.defineProperty(exports, "SmartBillProvider", {
   enumerable: true,
   get: function get() {
-    return _BillSummary.default;
+    return _SmartBillProvider.default;
   }
 });
 Object.defineProperty(exports, "billDataTypes", {
@@ -65,7 +79,6 @@ Object.defineProperty(exports, "rateStagesTypes", {
     return _rateStagesTypes.rateStagesTypes;
   }
 });
-exports.Aliases = exports.ComponentNames = void 0;
 
 var _SmartBillProvider = _interopRequireDefault(require("./components/SmartBillProvider"));
 

package/dist/shared/Context/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartBillConsumer = exports.SmartBillProvider = void 0;
+exports.SmartBillProvider = exports.SmartBillConsumer = void 0;
 
 var _react = _interopRequireDefault(require("react"));