@widergy/utilitygo-smart-bill-web 3.1.0 → 3.3.0

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

@@ -0,0 +1,165 @@
+"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 _utils = require("../../../Consumptions/components/CurrentConsumption/utils");
+var _utils2 = require("./utils");
+var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RateCard = _ref => {
+  let {
+    components,
+    consumptionLevels,
+    currentPeriod,
+    formatAmount,
+    normalizedRate = '',
+    rateCardTranslations = {},
+    ratesTableLink,
+    smartBill = {},
+    subsidy = '',
+    subsidyLevels
+  } = _ref;
+  const {
+    helpText,
+    limitRateValueLabel,
+    seeRatesTable,
+    startRateValueLabel,
+    title,
+    tooltipContent,
+    unit,
+    yourConsumption,
+    yourRate
+  } = rateCardTranslations;
+  const {
+    client,
+    detail,
+    periods
+  } = smartBill;
+  const purchasedRate = client?.rate?.purchased || '';
+  const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
+  const {
+    totalConsumption
+  } = (0, _utils.getConsumptionLabels)(periodsToCompare) || {};
+  const {
+    levels = []
+  } = consumptionLevels.find(_ref2 => {
+    let {
+      rate
+    } = _ref2;
+    return rate === normalizedRate;
+  }) || consumptionLevels[0] || {};
+  const {
+    rates = []
+  } = levels.find(_ref3 => {
+    let {
+      name
+    } = _ref3;
+    return name && name === subsidyLevels[subsidy];
+  }) || levels[0] || {};
+  const currentIndex = rates.findIndex(_ref4 => {
+    let {
+      range
+    } = _ref4;
+    return range[1] >= totalConsumption;
+  });
+  const currentRate = rates[currentIndex] ?? {};
+  const startRateValue = Array.isArray(currentRate?.range) && currentRate.range[0];
+  const limitRateValue = Array.isArray(currentRate?.range) && currentRate.range.length > 0 && currentRate.range[currentRate.range.length - 1];
+  const concepts = detail?.concepts?.[0]?.lines;
+  const fixedCharges = concepts?.[0];
+  const variableCharges = concepts?.[1];
+  const {
+    title: fixedChargeTitle,
+    amount: fixedChargeValue
+  } = fixedCharges || {};
+  const {
+    title: variableChargeTitle,
+    amount: variableChargeValue
+  } = variableCharges || {};
+  const isT1 = purchasedRate.includes('T1');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.headerTitles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title2",
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, helpText)), /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+    components: components,
+    currentPeriod: currentPeriod,
+    data: rates,
+    isT1: isT1,
+    limitValue: limitRateValue,
+    specificRate: currentRate,
+    tooltipContent: tooltipContent,
+    translations: rateCardTranslations,
+    value: totalConsumption
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionDataContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionContent
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, (0, _utils2.getCurrentRate)(purchasedRate, currentRate)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, !isT1 ? yourRate : limitRateValue === 'Infinity' ? startRateValueLabel?.(startRateValue) : limitRateValueLabel?.(limitRateValue))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.consumptionContent
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, totalConsumption, " ", unit), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, yourConsumption))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detail
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium"
+  }, fixedChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, formatAmount?.(fixedChargeValue))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detail
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    weight: "medium"
+  }, variableChargeTitle), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, formatAmount?.(variableChargeValue))), /*#__PURE__*/_react.default.createElement("a", {
+    className: _stylesModule.default.footerAction,
+    href: ratesTableLink,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "neutral",
+    weight: "medium"
+  }, seeRatesTable), /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+    colorTheme: "neutral",
+    name: "IconChevronRight",
+    size: 20
+  }))));
+};
+RateCard.propTypes = {
+  components: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  currentPeriod: _propTypes.object,
+  formatAmount: _propTypes.func,
+  normalizedRate: _propTypes.string,
+  rateCardTranslations: _propTypes.object,
+  ratesTableLink: _propTypes.string,
+  smartBill: _propTypes.object,
+  subsidy: _propTypes.string,
+  subsidyLevels: (0, _propTypes.objectOf)(_propTypes.string)
+};
+var _default = exports.default = RateCard;

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

@@ -0,0 +1,60 @@
+.container {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.headerTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 24px 24px 0;
+}
+
+.consumptionDataContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 24px;
+  justify-content: space-between;
+  padding: 24px 24px 0;
+}
+
+.consumptionContent {
+  flex: 1;
+}
+
+.footer {
+  width: 100%;
+}
+
+.footerAction {
+  align-items: center;
+  background-color: transparent;
+  border-top: 1px solid var(--light04);
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+  padding: 16px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--light03);
+  }
+
+  &:active {
+    background-color: var(--light04);
+  }
+}
+
+.detail {
+  align-items: center;
+  border-top: 1px solid var(--light04);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrentRate = void 0;
+const getCurrentRate = function () {
+  let baseRate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let specificRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const isT1 = baseRate.includes('T1');
+  const baseRateParts = baseRate.split('-');
+  return isT1 ? `${baseRateParts[0]}-${specificRate?.name || baseRateParts[1]}` : baseRate;
+};
+exports.getCurrentRate = getCurrentRate;

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

@@ -0,0 +1,288 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _energyUi = require("@widergy/energy-ui");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _propTypes = require("prop-types");
+var _billDataTypes = require("../../../../shared/types/billDataTypes");
+var _DebtStatusLabel = _interopRequireDefault(require("./components/DebtStatusLabel"));
+var _utils = require("./utils");
+var _RateCard = _interopRequireDefault(require("./components/RateCard"));
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Billing = _ref => {
+  let {
+    assets,
+    constants = {},
+    consumptionLevels = [],
+    components,
+    currentAccount = {},
+    handlers = {},
+    isDesktopSize,
+    smartBill = {},
+    translations,
+    utils = {}
+  } = _ref;
+  const {
+    formatters = {}
+  } = utils;
+  const {
+    clientNumberFormatter,
+    formatAmount
+  } = formatters;
+  const {
+    adherenceStatus,
+    subsidyLevels
+  } = constants;
+  const {
+    UtilityLogo
+  } = assets;
+  const {
+    handleAutomaticDebitAdherence = () => {},
+    handleDownloadBill = () => {},
+    handleGoToDigitalBill = () => {},
+    getConsumptionLevels = () => {}
+  } = handlers;
+  const {
+    adhered,
+    automaticDebit = {},
+    digitalBill = {},
+    downloadBill = {},
+    header = {},
+    notAdhered,
+    rateCard: rateCardTranslations,
+    ratesTableLink,
+    titularCard = {},
+    totalAmountLabel,
+    totalCard = {}
+  } = translations;
+  const {
+    billIssueDate,
+    billTypeHelpText
+  } = header;
+  const {
+    title: digitalBillTitle
+  } = digitalBill;
+  const {
+    title: downloadBillTitle
+  } = downloadBill;
+  const {
+    title: automaticDebitTitle
+  } = automaticDebit;
+  const {
+    title: titularCardTitle,
+    addressHelpText,
+    titularHelpText,
+    clientNumberHelpText,
+    ivaConditionHelpText
+  } = titularCard;
+  const {
+    firstExpiration
+  } = totalCard;
+  const {
+    bill_number: billNumber,
+    client,
+    debt_status_label: debtStatusLabel,
+    detail,
+    expirations
+  } = smartBill;
+  const debtStatusValidation = debtStatusLabel !== null;
+  const currentPeriod = (0, _utils.getCurrentPeriod)(smartBill);
+  const issuedOnDate = (0, _utils.getFormattedDate)(currentPeriod?.settlements?.current?.issued_on);
+  const isAdheredToDigitalBill = client?.adherence_to_digital_bill;
+  const {
+    account_address: accountAddress,
+    client_number: clientNumber = '',
+    holder_name: titularName,
+    postal_address: postalAddress,
+    iva_condition: ivaCondition
+  } = client || {};
+  const firstExpirationDate = (0, _utils.getFormattedDate)(expirations?.[0]?.date);
+  const {
+    total_amount: totalAmount
+  } = detail || {};
+  const {
+    adherence_to_automatic_debit: adherenceToAutomaticDebit,
+    normalized_rate: normalizedRate,
+    subsidy_level: subsidy
+  } = currentAccount;
+  const isAdheredToAutomaticDebit = adherenceToAutomaticDebit === adherenceStatus?.subscribed;
+  const actionCards = [{
+    isAdhered: isAdheredToDigitalBill,
+    leftIcon: 'IconReceipt',
+    onClick: !isAdheredToDigitalBill && handleGoToDigitalBill,
+    showStatus: true,
+    title: digitalBillTitle
+  }, {
+    isAdhered: isAdheredToAutomaticDebit,
+    leftIcon: 'IconCreditCard',
+    onClick: !isAdheredToAutomaticDebit && handleAutomaticDebitAdherence,
+    showStatus: true,
+    title: automaticDebitTitle
+  }, {
+    leftIcon: 'IconInfoCircle',
+    leftIconProps: {
+      area: true,
+      size: 28
+    },
+    onClick: handleDownloadBill,
+    rightIcon: 'IconDownload',
+    title: downloadBillTitle
+  }];
+  (0, _react.useEffect)(() => {
+    if ((0, _isEmpty.default)(consumptionLevels)) getConsumptionLevels();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.generalContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeader
+  }, UtilityLogo && /*#__PURE__*/_react.default.createElement(UtilityLogo, {
+    className: _stylesModule.default.logo
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.billHeaderLabels
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueAndHelpText
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, billNumber), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, billTypeHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.valueAndHelpText
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, issuedOnDate), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, billIssueDate)), debtStatusValidation && /*#__PURE__*/_react.default.createElement(_DebtStatusLabel.default, {
+    debtStatusLabel: debtStatusLabel,
+    isWarning: smartBill?.warning
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.detailColumns
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.column
+  }, actionCards?.map(_ref2 => {
+    let {
+      isAdhered,
+      leftIcon,
+      leftIconProps = {},
+      onClick,
+      rightIcon,
+      showStatus,
+      title
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_energyUi.UTTouchableWithoutFeedback, {
+      className: `${_stylesModule.default.cardContainer} ${!onClick && _stylesModule.default.unclickableCardContainer}`,
+      disabled: !onClick,
+      key: title,
+      onClick: onClick,
+      withRipple: true
+    }, isDesktopSize && /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, _extends({
+      colorTheme: "gray",
+      name: leftIcon
+    }, leftIconProps)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: _stylesModule.default.cardTitle,
+      variant: "subtitle1",
+      weight: "medium"
+    }, title), showStatus && /*#__PURE__*/_react.default.createElement(_energyUi.UTStatus, {
+      type: "light",
+      variant: isAdhered ? 'success' : 'unassigned',
+      withoutIcon: !isAdhered
+    }, isAdhered ? adhered : notAdhered), onClick && /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.cardIconContainer
+    }, /*#__PURE__*/_react.default.createElement(_energyUi.UTIcon, {
+      colorTheme: "accent",
+      name: rightIcon || 'IconChevronRight'
+    })));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularCard
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "title2",
+    weight: "medium"
+  }, titularCardTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularDataContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, accountAddress), accountAddress !== postalAddress && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, postalAddress), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, addressHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, titularName), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, titularHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularFooter
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, clientNumberFormatter?.(clientNumber)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, clientNumberHelpText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titularData
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    className: _stylesModule.default.titularDataTitle,
+    weight: "bold"
+  }, ivaCondition), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray"
+  }, ivaConditionHelpText)))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.column
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.totalCard
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.total
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "subtitle1",
+    weight: "medium"
+  }, totalAmountLabel), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "accent",
+    variant: "title2",
+    weight: "medium"
+  }, formatAmount?.(totalAmount))), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, firstExpiration?.(firstExpirationDate))), /*#__PURE__*/_react.default.createElement(_RateCard.default, {
+    consumptionLevels,
+    components,
+    currentPeriod,
+    formatAmount,
+    normalizedRate,
+    rateCardTranslations,
+    ratesTableLink,
+    smartBill,
+    subsidy,
+    subsidyLevels,
+    translations
+  }))));
+};
+Billing.propTypes = {
+  assets: _propTypes.object,
+  constants: _propTypes.object,
+  consumptionLevels: _propTypes.array,
+  components: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.elementType
+  }),
+  currentAccount: _propTypes.object,
+  handlers: (0, _propTypes.shape)({
+    [_propTypes.string]: _propTypes.func
+  }),
+  isDesktopSize: _propTypes.bool,
+  smartBill: _billDataTypes.billDataTypes,
+  translations: _propTypes.object,
+  utils: _propTypes.object
+};
+var _default = exports.default = Billing;

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

@@ -0,0 +1,132 @@
+@import '../../../../scss/variables/mediaQueries.module.scss';
+
+.generalContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 32px;
+  padding: 24px 32px;
+
+  @media #{$mobile} {
+    padding: 24px 16px;
+  }
+}
+
+.billHeader {
+  align-items: center;
+  background-color: var(--light01);
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+
+.logo {
+  height: 35px;
+  object-fit: contain;
+  width: auto;
+}
+
+.billHeaderLabels {
+  align-items: center;
+  display: flex;
+  grid-gap: 32px;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+
+.valueAndHelpText {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}
+
+.detailColumns {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  grid-gap: 32px;
+}
+
+.column {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 24px;
+}
+
+.cardContainer {
+  align-items: center;
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  padding: 16px;
+  transition: all 0.2s;
+}
+
+.unclickableCardContainer {
+  cursor: default;
+}
+
+.cardTitle {
+  flex: 1;
+}
+
+.cardIconContainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}
+
+.titularCard {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 24px;
+}
+
+.titularDataContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.titularData {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  grid-gap: 8px;
+  padding: 12px 0;
+}
+
+.titularDataTitle {
+  padding: 4px 0;
+}
+
+.titularFooter {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}
+
+.totalCard {
+  background-color: var(--light01);
+  border-radius: 4px;
+  box-shadow: var(--shadowGrayBottom1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  padding: 16px;
+}
+
+.total {
+  display: flex;
+  grid-gap: 8px;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormattedDate = exports.getCurrentPeriod = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _seamlessImmutable = require("seamless-immutable");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getCurrentPeriod = billData => (0, _seamlessImmutable.getIn)(billData, ['periods'], []).find(period => period.current) || {};
+exports.getCurrentPeriod = getCurrentPeriod;
+const getFormattedDate = date => (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
+exports.getFormattedDate = getFormattedDate;

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';