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

package/dist/components/ConsumptionPeriod/components/Reading/styles.module.scss

@@ -1,5 +1,6 @@
 @import '../../../../scss/variables/_colorsExport.scss';
 @import '../../../../scss/variables/_sizes.scss';
+@import '../../../../scss/variables/_mediaQueries';
 
 .container {
   background-color: $white;
@@ -12,25 +13,29 @@
 
 .title {
   border-bottom: 1px solid $borders-gray;
-  padding: 5px 10px;
+  padding: 16px 24px;
 }
 
 .tooltipTitle {
   border-bottom: 1px solid $borders-gray;
   display: flex;
   justify-content: space-between;
-  padding: 5px 10px;
+  padding: 16px 24px;
 }
 
 .infoIconTooltip {
-  fill: $light-primary;
+  outline: none;
   width: 18px;
 }
 
-.iconAndDetailsContainer {
-  padding: 5px 10px;
-}
+.detailsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
 
-.meterReadingContainer {
-  padding: 0 10px 5px;
+  @media #{$tablet-mobile} {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }

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

@@ -6,34 +6,35 @@
   flex-flow: column;
   justify-content: center;
   margin: 0 auto;
-  width: 70%;
-
-  @media #{$tablet-mobile} {
-    width: 100%;
-  }
+  width: 100%;
 }
 
 .readingsAndDesktopSummaryContainer {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 16px;
+  gap: 16px;
   width: 100%;
+
+  @media #{$mobile} {
+    flex-direction: column;
+  }
 }
 
 .readingContainer {
   width: 30%;
 
   @media #{$mobile} {
-    width: 50%;
+    width: 100%;
   }
 }
 
 .initialReadingContainer {
-  margin-right: 10px;
+  justify-content: flex-start;
 }
 
 .finalReadingContainer {
-  margin-left: 10px;
+  justify-content: flex-start;
 
   @media #{$mobile} {
     margin-left: 0;
@@ -49,7 +50,7 @@
 }
 
 .mobileSummary {
-  margin-bottom: 10px;
+  margin-bottom: 16px;
   width: 100%;
 
   @media #{$tablet} {

package/dist/components/Date/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("prop-types");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _smartBillTypes = require("../../shared/types/smartBillTypes");
 
@@ -33,7 +33,7 @@ var Date = function Date(_ref) {
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
     className: _stylesModule.default.valueContainer
-  }, (0, _moment.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY')), /*#__PURE__*/_react.default.createElement(Label, {
+  }, (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY')), /*#__PURE__*/_react.default.createElement(Label, {
     alias: detailAlias
   }, text));
 };

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

@@ -6,5 +6,8 @@
 }
 
 .valueContainer {
+  display: flex;
+  align-items: center;
   margin-bottom: 3px;
+  height: 25px;
 }

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

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: center;
   max-height: 27px;
-  padding: 5px 9px;
+  padding: 12px 8px;
 }
 
 .withDebtsContainer {

package/dist/components/IconAndDetails/index.js

@@ -33,6 +33,8 @@ var IconAndDetails = function IconAndDetails(_ref) {
       tooltip = _ref.tooltip,
       mainAlias = _ref.mainAlias,
       secondaryAlias = _ref.secondaryAlias,
+      _ref$tertiaryAlias = _ref.tertiaryAlias,
+      tertiaryAlias = _ref$tertiaryAlias === void 0 ? secondaryAlias : _ref$tertiaryAlias,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes;
   var Label = contextApiInfo.Label,
@@ -50,7 +52,7 @@ var IconAndDetails = function IconAndDetails(_ref) {
     alias: mainAlias,
     className: _stylesModule.default.mainText
   }, (0, _utils.stringOrDash)(mainText)), secondaryText && !repeatedData && /*#__PURE__*/_react.default.createElement(Label, {
-    alias: secondaryAlias,
+    alias: tertiaryAlias,
     className: _stylesModule.default.secondaryText
   }, secondaryText), descriptionText && /*#__PURE__*/_react.default.createElement(Label, {
     alias: secondaryAlias
@@ -66,6 +68,7 @@ IconAndDetails.propTypes = {
   tooltip: _propTypes.string,
   mainAlias: _propTypes.string,
   secondaryAlias: _propTypes.string,
+  tertiaryAlias: _propTypes.string,
   classes: (0, _propTypes.shape)({
     container: _propTypes.string
   })

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

@@ -12,11 +12,11 @@
 .labels {
   display: flex;
   flex-flow: column;
-  margin-left: 8px;
+  margin-left: 16px;
 }
 
 .mainText {
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .secondaryText {

package/dist/components/Magnitude/index.js

@@ -42,14 +42,15 @@ var Magnitude = function Magnitude(props) {
   }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
     className: "".concat(_stylesModule.default.icon, " ").concat(classes.icon)
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.numberAndUnit
+    className: "".concat(_stylesModule.default.numberAndUnit, " ").concat(classes.numberAndUnit)
   }, /*#__PURE__*/_react.default.createElement(Label, _extends({
     alias: numberAlias
-  }, variantProps.valueLabel), (0, _utils.numberOrDash)(value)), !disableUnit && /*#__PURE__*/_react.default.createElement(Label, _extends({
-    alias: unitAlias
   }, variantProps.unitLabel, {
-    className: "".concat(variantProps.unitLabelStyles, " ").concat(classes.unitLabel)
-  }), (0, _utils.stringOrDash)(unit))));
+    className: "".concat(variantProps.unitLabelStyles)
+  }), (0, _utils.numberOrDash)(value)), !disableUnit && /*#__PURE__*/_react.default.createElement(Label, {
+    alias: unitAlias,
+    className: classes.unitLabel
+  }, (0, _utils.stringOrDash)(unit))));
 };
 
 Magnitude.propTypes = {

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

@@ -8,22 +8,22 @@
 }
 
 .numberAndUnit {
-  align-items: flex-end;
+  align-items: baseline;
   display: flex;
 }
 
 .unitSmall {
-  margin: 0 0 1px 2px;
+  margin-right: 2px;
 }
 
 .unitMedium {
-  margin: 0 0 1px 2px;
+  margin-right: 4px;
 }
 
 .unitxxLarge {
-  margin: 0 0 4px 2px;
+  margin-right: 4px;
 }
 
 .unitxxxLarge {
-  margin: 0 0 4px 2px;
+  margin-right: 8px;
 }

package/dist/components/MainBillData/components/BillAlert/components/BillParticularConditions/index.js

@@ -13,6 +13,8 @@ var _smartBillTypes = require("../../../../../../shared/types/smartBillTypes");
 
 var _WithContextApi = _interopRequireDefault(require("../../../../../WithContextApi"));
 
+var _aliases = require("../../../../../../shared/constants/aliases");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,18 +33,16 @@ var BillParticularConditions = function BillParticularConditions(_ref) {
   }, /*#__PURE__*/_react.default.createElement(assets.ParticularConditionsIcon, {
     className: _stylesModule.default.marginBottom
   }), /*#__PURE__*/_react.default.createElement(Label, {
-    bold: true,
-    large: true,
+    alias: _aliases.PARTICULAR_CONDITIONS_TITLE,
     className: "".concat(_stylesModule.default.title, " ").concat(_stylesModule.default.marginBottom)
   }, texts.mainBillData.particularConditionsTitle), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.particularConditionsList
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    primary: true,
-    semibold: true,
+    alias: _aliases.PARTICULAR_CONDITIONS_LIST_TITLE,
     className: _stylesModule.default.marginBottom
   }, texts.mainBillData.particularConditionsListTitle), particularConditions.map(function (particularCondition) {
     return /*#__PURE__*/_react.default.createElement(Label, {
-      gray: true,
+      alias: _aliases.PARTICULAR_CONDITION,
       key: particularCondition,
       className: _stylesModule.default.item
     }, "* ".concat(particularCondition));

package/dist/components/MainBillData/components/BillAlert/styles.module.scss

@@ -10,12 +10,12 @@
   display: flex;
   justify-content: center;
   margin-bottom: $default-spacing;
-  padding: 10px 0;
+  padding: 16px;
   width: 100%;
 
   @media #{$tablet-mobile} {
     margin-bottom: $default-spacing;
-    padding: 10px;
+    padding: 16px;
   }
 }
 
@@ -25,15 +25,17 @@
 
   @media #{$tablet-mobile} {
     max-width: 90%;
-    padding: 10px;
+    padding: 16px;
   }
 }
 
 .iconAndLabelContainer {
   align-items: center;
+  gap: 8px;
 }
 
 .label {
   margin-left: 5px;
+  color: $primary;
   text-decoration: underline;
 }

package/dist/components/MainBillData/components/BillBody/components/ClientData/index.js

@@ -46,72 +46,72 @@ var ClientData = function ClientData(_ref) {
     mainText: client.account_address,
     secondaryText: client.postal_address,
     descriptionText: texts.mainBillData.clientDataLocation,
-    tooltip: texts.mainBillData.locationTooltip,
     classes: {
       container: _stylesModule.default.iconAndDetailsContainer
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: assets.HolderIcon,
     mainText: client.holder_name,
     descriptionText: texts.mainBillData.holderName,
-    tooltip: texts.mainBillData.holderNameTooltip,
     classes: {
       container: "".concat(_stylesModule.default.desktopMargin, " ").concat(_stylesModule.default.iconAndDetailsContainer)
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.accountAndIvaConditionContainer
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: assets.AccountIcon,
     mainText: client.client_number && formatters.clientNumberFormatter(client.client_number),
     descriptionText: texts.mainBillData.clientNumber,
-    tooltip: texts.mainBillData.clientNumberTooltip,
     classes: {
       container: _stylesModule.default.userAndAccountContainer
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: assets.AccountIcon,
     mainText: client.iva_condition,
     descriptionText: texts.mainBillData.ivaCondition,
-    tooltip: texts.mainBillData.ivaCondition,
     classes: {
       container: _stylesModule.default.userAndAccountContainer
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   })), client.adherence_to_digital_bill ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.adheredToDigitalBillContainer
   }, /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: assets.EmailIcon,
     mainText: client.email_digital_bill,
     descriptionText: texts.mainBillData.emailDigitalBill,
-    tooltip: texts.mainBillData.emailDigitalBillTooltip,
     classes: {
       container: _stylesModule.default.emailContainer
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.adheredToDigitalBillLabelContainer
   }, /*#__PURE__*/_react.default.createElement(AdheredToServiceIcon, null), /*#__PURE__*/_react.default.createElement(Label, {
-    bold: true,
+    alias: _aliases.ADHERED_DIGITAL_BILL,
     className: _stylesModule.default.label
   }, texts.mainBillData.adheredToDigitalBill))) : /*#__PURE__*/_react.default.createElement(_IconAndDetails.default, {
     Icon: assets.MailIcon,
     mainText: client.account_address,
     secondaryText: client.postal_address,
     descriptionText: texts.mainBillData.clientDataPostalAdress,
-    tooltip: texts.mainBillData.mailAddressTooltip,
     classes: {
       container: _stylesModule.default.emailContainer
     },
     mainAlias: _aliases.MAIN,
-    secondaryAlias: _aliases.DETAIL
+    secondaryAlias: _aliases.DETAIL,
+    tertiaryAlias: _aliases.MAIN_LIGHT
   }));
 };
 

package/dist/components/MainBillData/components/BillBody/components/ClientData/styles.module.scss

@@ -7,7 +7,7 @@
   height: 23px;
 }
 
-$icon-and-details-resposive-margin: 15px 0;
+$icon-and-details-resposive-margin: 16px 0;
 $icon-and-details-desktop-margin: 32px;
 $margin-bottom-size: 16px;
 
@@ -21,7 +21,7 @@ $margin-bottom-size: 16px;
 
   @media #{$tablet-mobile } {
     margin-bottom: $margin-bottom-size;
-    padding: $default-container-padding 15px;
+    padding: $default-container-padding;
   }
 }
 
@@ -110,7 +110,7 @@ $margin-bottom-size: 16px;
   justify-content: center;
   margin: 12px 25px 0;
   max-height: 27px;
-  padding: 3px 9px;
+  padding: 8px 12px;
 }
 
 .label {

package/dist/components/MainBillData/components/BillBody/components/ReadingDetails/styles.module.scss

@@ -19,7 +19,7 @@
   @media #{$tablet-mobile} {
     place-content: space-between;
     margin-bottom: $default-spacing;
-    padding: $default-container-padding 15px;
+    padding: $default-container-padding;
   }
 }
 

package/dist/components/MainBillData/components/BillBody/styles.module.scss

@@ -5,6 +5,10 @@
   flex-flow: row;
   width: 100%;
 
+  @media #{$desktop} {
+    gap: 16px;
+  }
+
   @media #{$tablet-mobile} {
     flex-flow: column;
   }
@@ -22,7 +26,6 @@
 .amountAndConsumptionLeftContainer {
   @extend %containers;
   @media #{$desktop} {
-    margin-right: 16px;
     width: 45%;
   }
 }
@@ -30,7 +33,6 @@
 .periodAndClientDataLeftContainer {
   @extend %containers;
   @media #{$desktop} {
-    margin-right: 16px;
     width: 55%;
   }
 }
@@ -38,7 +40,6 @@
 .periodAndClientDataRigthContainer {
   @extend %containers;
   @media #{$desktop} {
-    margin-left: 16px;
     width: 55%;
   }
 }

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/index.js

@@ -15,6 +15,8 @@ var _WithContextApi = _interopRequireDefault(require("../../../../../WithContext
 
 var _utils = require("../../../../../../utils");
 
+var _aliases = require("../../../../../../shared/constants/aliases");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,8 +35,7 @@ var TypeAndNumber = function TypeAndNumber(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.billTypeAndNumberContainer
   }, /*#__PURE__*/_react.default.createElement(Label, {
-    bold: true,
-    small: true,
+    alias: _aliases.TYPE_AND_NUMBER_TYPE,
     className: _stylesModule.default.billType
   }, (0, _utils.stringOrDash)(billType)), /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/styles.module.scss

@@ -5,7 +5,7 @@
   align-items: flex-start;
   display: flex;
   flex-flow: column;
-  margin-right: 24px;
+  gap: 8px;
 }
 
 .billTypeAndNumberContainer {
@@ -14,15 +14,19 @@
   margin-bottom: 3px;
 
   @media #{$tablet-mobile} {
-    margin-top: 15px;
+    margin-top: 8px;
   }
 }
 
 .billType {
+  align-items: center;
+  display: flex;
   background-color: $backgrounds-gray;
   border: 1px solid $borders-dark-gray;
   border-radius: 3px;
-  padding: 1px 5px;
+  height: 25px;
+  justify-content: center;
+  width: 25px;
 }
 
 .billNumber {

package/dist/components/MainBillData/components/BillHeader/index.js

@@ -53,7 +53,7 @@ var BillHeader = function BillHeader(_ref) {
   var debtStatusValidation = debtStatusLabel !== null;
   var multipleSettlements = totalSettlements > 1;
   var aliases = {
-    mainAlias: _aliases.HEADER_MAIN,
+    mainAlias: _aliases.MAIN_LIGHT,
     detailAlias: _aliases.DETAIL
   };
 
@@ -81,7 +81,7 @@ var BillHeader = function BillHeader(_ref) {
     date: issuedOnDate,
     text: texts.commons.issuedOnDate,
     classes: {
-      container: _stylesModule.default.rightAlingnMobile
+      container: _stylesModule.default.date
     }
   })), isDesktopSize && debtStatusValidation && /*#__PURE__*/_react.default.createElement(DebtStatusLabel, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.debtStatusLabelMobile

package/dist/components/MainBillData/components/BillHeader/styles.module.scss

@@ -11,7 +11,7 @@
   width: 100%;
 
   @media #{$desktop} {
-    padding: 10px 24px;
+    padding: 16px 24px;
   }
 
   @media #{$tablet-mobile} {
@@ -20,6 +20,10 @@
   }
 }
 
+.date {
+  gap: 8px;
+}
+
 .headerRow {
   @media #{$desktop} {
     display: flex;
@@ -30,8 +34,10 @@
     border: 1px solid $borders-dark-gray;
     border-top-left-radius: $default-container-border-radius;
     border-top-right-radius: $default-container-border-radius;
-    display: block;
-    padding: 10px 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
     width: 100%;
   }
 }
@@ -52,6 +58,7 @@
   align-items: center;
   display: flex;
   width: 68%;
+  gap: 24px;
 
   @media #{$desktop} {
     justify-content: flex-end;
@@ -73,22 +80,16 @@
 }
 
 .pendingDebtLabelContainer {
-  margin-left: 20px;
-
   @media #{$tablet-mobile} {
     display: flex;
     justify-content: flex-start;
-    margin: 15px 0 0;
   }
 }
 
 .adheredToAutomaticDebtContainer {
-  margin-left: 10px;
-
   @media #{$tablet-mobile} {
     display: flex;
     justify-content: flex-start;
-    margin: 15px 0 0;
   }
 }
 

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

@@ -9,7 +9,6 @@
   flex-flow: column;
   justify-content: space-between;
 
-  padding: 10px;
   width: 100%;
 
   @media #{$tablet-mobile} {