@widergy/utilitygo-smart-bill-mobile 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-mobile",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "UtilityGO SmartBill Mobile",
   "license": "MIT",
   "main": "src/lib/index.js",

package/src/lib/components/BillCalculation/components/DetailModalContent/index.js

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import Collapsible from 'react-native-collapsible';
+import { View } from 'react-native';
+import { shape, number, string, arrayOf, func } from 'prop-types';
+
+import getStyles, { ICON_SIZE } from './styles';
+
+const DetailModalContent = ({ onCloseModal, concepts, context }) => {
+  const {
+    Touchable,
+    Label,
+    assets: { ArrowDown, ArrowUp },
+    config: {
+      texts: {
+        mainBillData: { conceptsDetailsModalHeader },
+        commons: { close },
+      },
+    },
+  } = context;
+  const [openedItem, setOpenedItem] = useState();
+
+  const styles = getStyles(context.theme, context.theme.colors);
+  return (
+    <View style={styles.upperContainer}>
+      <View style={styles.header}>
+        <Label center white h5>
+          {conceptsDetailsModalHeader}
+        </Label>
+      </View>
+      {concepts.map(concept => (
+        <Touchable
+          onPress={() => {
+            setOpenedItem(concept.title === openedItem ? '' : concept.title);
+          }}
+          borderless>
+          <View style={styles.container}>
+            <View style={styles.conceptContainer}>
+              <Label h5 semibold style={styles.conceptTitleLabel}>
+                {`${concept?.title}`}
+              </Label>
+              <View style={styles.totalContainer}>
+                <View style={styles.iconContainer}>
+                  {openedItem !== concept.title ? (
+                    <ArrowDown height={ICON_SIZE} width={ICON_SIZE} style={styles.icon} />
+                  ) : (
+                    <ArrowUp height={ICON_SIZE} width={ICON_SIZE} style={styles.icon} />
+                  )}
+                </View>
+              </View>
+            </View>
+            <Collapsible collapsed={openedItem !== concept.title}>
+              <View style={styles.linesContainer}>
+                <Label>{concept.description}</Label>
+              </View>
+            </Collapsible>
+          </View>
+        </Touchable>
+      ))}
+      <Touchable onPress={onCloseModal} borderless style={styles.closeButton}>
+        <Label semibold white center h5 style={styles.buttonLabel}>
+          {close}
+        </Label>
+      </Touchable>
+    </View>
+  );
+};
+
+DetailModalContent.propTypes = {
+  concepts: arrayOf(
+    shape({
+      title: string,
+      total: number,
+      lines: arrayOf(
+        shape({
+          title: string,
+          description: string,
+          amount: number,
+        }),
+      ),
+    }),
+  ),
+  onCloseModal: func,
+};
+
+export default DetailModalContent;

package/src/lib/components/BillCalculation/components/DetailModalContent/styles.js

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+
+export const ICON_SIZE = 10;
+const ICON_MARGIN = 5;
+export default theme =>
+  StyleSheet.create({
+    upperContainer: {},
+    icon: {
+      top: 1,
+    },
+    header: {
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      backgroundColor: theme.BillCalculation?.detailModal?.header,
+      width: '100%',
+    },
+    conceptContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      width: '100%',
+      borderBottomColor: theme.BillCalculation?.detailModal?.border,
+      borderBottomWidth: 1,
+      paddingHorizontal: 18,
+      paddingVertical: 18,
+    },
+    totalContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      flex: 1,
+      justifyContent: 'flex-end',
+    },
+    collapsable: {
+      paddingRight: ICON_SIZE + ICON_MARGIN,
+    },
+    decimal: {
+      marginTop: 0,
+    },
+    linesContainer: {
+      flexDirection: 'row',
+      flex: 1,
+      justifyContent: 'space-between',
+      paddingHorizontal: 15,
+    },
+    conceptTitleLabel: {
+      width: '90%',
+      textAlign: 'left',
+    },
+    iconContainer: {
+      marginLeft: 5,
+    },
+    linesConcept: {
+      flex: 1,
+    },
+    lineTitle: { flex: 1 },
+    closeButton: {
+      paddingVertical: 12,
+      paddingHorizontal: 28,
+      backgroundColor: theme.BillCalculation?.detailModal?.closeButton,
+      borderRadius: 4,
+      marginTop: 20,
+      alignSelf: 'center',
+    },
+  });

package/src/lib/components/BillCalculation/index.js

@@ -1,43 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View, FlatList } from 'react-native';
-import { SeparatorBar } from '@widergy/mobile-ui';
-import { string, shape } from 'prop-types';
+import { Modal, SeparatorBar } from '@widergy/mobile-ui';
 
 import { billDataTypes } from '../../types/billDataTypes';
 import { titleMapper } from '../../utils/billCalculation';
 import NumberWithSuperIndex from '../NumberWithSuperIndex';
 import withContext from '../../hocs/withContext';
 import { formatInterval } from '../ConsumptionComparison/components/ComparisonTable/utils';
-import { useSmartBill } from '../../Context';
+import { useSmartBill, useThemedStyle } from '../../Context';
 
 import ConceptCard from './components/ConceptCard';
 import getStyles from './styles';
+import DetailModalContent from './components/DetailModalContent';
 
-const BillCalculation = ({ bill, context, colors }) => {
+const BillCalculation = ({ bill, context }) => {
+  const [detailModalMopen, setDetailModalOpen] = useState(false);
   const { config } = useSmartBill();
   const {
     Label,
-    config: { texts, showZeroConcepts },
+    Touchable,
+    config: { texts },
   } = context;
   const {
     texts: {
-      mainBillData: { billedPeriod },
+      mainBillData: { billedPeriod, conceptsDetailsButton },
     },
     validators: { showPeriodWithMonth },
   } = config;
-  const styles = getStyles(colors);
+  const styles = useThemedStyle(getStyles);
   const { periodicity, periodNumber, currentSettlement, totalSettlements, periodYear } = titleMapper(
     bill,
     texts,
   );
   const { periods } = bill;
   const currentPeriod = periods.find(period => period.current);
-  const conceptToRender = showZeroConcepts
-    ? bill?.detail
-    : bill?.detail?.concepts?.filter(concept => concept.total);
+  const conceptsToRender = bill?.detail?.concepts?.filter(concept => concept.total);
   const totalSettlementsIsOne = totalSettlements === 1;
   const { number, year } = currentPeriod || {};
   const showPeriodWithMonthLabel = showPeriodWithMonth(bill);
+  const conceptsToRenderOnModal = bill?.detail?.concepts?.filter(concept => concept?.description);
+
+  const openDetailModal = () => setDetailModalOpen(true);
+  const closeDetailModal = () => setDetailModalOpen(false);
+
   return (
     <View styles={styles.container}>
       <View style={styles.upperContainer}>
@@ -64,7 +69,7 @@ const BillCalculation = ({ bill, context, colors }) => {
         </View>
         <FlatList
           renderItem={({ item }) => <ConceptCard concept={item} />}
-          data={conceptToRender}
+          data={conceptsToRender}
           scrollEnabled={false}
           keyExtractor={item => item.title}
           showsVerticalScrollIndicator={false}
@@ -84,11 +89,24 @@ const BillCalculation = ({ bill, context, colors }) => {
           {bill?.detail?.total_amount}
         </NumberWithSuperIndex>
       </View>
+      {conceptsToRenderOnModal.length >= 1 && (
+        <Touchable onPress={openDetailModal} borderless style={styles.openButton}>
+          <Label semibold white center h5 style={styles.buttonLabel}>
+            {conceptsDetailsButton}
+          </Label>
+        </Touchable>
+      )}
+      <Modal visible={detailModalMopen} style={styles.modal}>
+        <DetailModalContent
+          concepts={conceptsToRenderOnModal}
+          onCloseModal={closeDetailModal}
+          context={context}
+        />
+      </Modal>
     </View>
   );
 };
 BillCalculation.propTypes = {
   bill: billDataTypes,
-  colors: shape(string),
 };
 export default withContext()(BillCalculation);

package/src/lib/components/BillCalculation/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export default colors =>
+export default (theme, colors) =>
   StyleSheet.create({
     container: {
       width: '100%',
@@ -13,6 +13,10 @@ export default colors =>
     decimal: {
       marginTop: 0,
     },
+    modal: {
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+    },
     upperContainer: {
       marginTop: 10,
       borderWidth: 1,
@@ -55,4 +59,12 @@ export default colors =>
     headerTitle: {
       fontWeight: '600',
     },
+    openButton: {
+      padding: 12,
+      backgroundColor: theme.BillCalculation?.detailModal?.closeButton,
+      width: '100%',
+      borderRadius: 4,
+      marginTop: 20,
+      alignSelf: 'center',
+    },
   });

package/src/lib/components/MainBillData/components/MeasurementInfo/index.js

@@ -20,7 +20,8 @@ const MeasurementInfo = ({ bill }) => {
   const {
     config: {
       texts: { mainBillData },
-      validators: { showTransformationCenter, showFeederLine, showSupplyTitle },
+
+      validators: { showTransformationCenter, showFeederLine, showSupplyTitle, showNisNumber },
     },
     assets,
   } = useSmartBill();
@@ -34,6 +35,7 @@ const MeasurementInfo = ({ bill }) => {
     readinType,
     showTransformationCenter(bill),
     showFeederLine(bill),
+    showNisNumber(bill),
   );
 
   return (

package/src/lib/components/MainBillData/components/MeasurementInfo/utils.js

@@ -6,6 +6,7 @@ export const measurementInfoMapper = (
   readinType,
   showTransformationCenter,
   showFeederLine,
+  showNisNumber,
 ) =>
   [
     {
@@ -20,6 +21,12 @@ export const measurementInfoMapper = (
       secondaryText: texts.readingType,
       show: true,
     },
+    {
+      Icon: assets.AccountIcon,
+      mainText: client.client_number,
+      secondaryText: texts.clientNumber,
+      show: showNisNumber,
+    },
     {
       Icon: assets.FeederLineIcon,
       mainText: client?.transformation_center,

package/src/lib/components/MainBillData/components/OwnerData/index.js

@@ -16,17 +16,16 @@ const OwnerData = ({ context, bill, theme }) => {
     config: {
       texts: { mainBillData },
       formatters,
+      validators: { showNisNumber },
     },
   } = context;
 
   const { client } = bill;
 
-  const ownerDataToRender = useMemo(() => ownerDataToShow(client, assets, mainBillData, formatters), [
-    client,
-    assets,
-    mainBillData,
-    formatters,
-  ]);
+  const ownerDataToRender = useMemo(
+    () => ownerDataToShow(client, assets, mainBillData, formatters, showNisNumber(bill)),
+    [client, assets, mainBillData, formatters, showNisNumber, bill],
+  );
   return (
     <View style={[styles.root, theme.root]}>
       <Label bold style={styles.clientDataTitle} useMarkdown={false}>

package/src/lib/components/MainBillData/components/OwnerData/utils.js

@@ -1,4 +1,4 @@
-export const ownerDataToShow = (client, assets, texts, formatters) =>
+export const ownerDataToShow = (client, assets, texts, formatters, showNisNumber) =>
   [
     {
       Icon: assets.LocationIcon,
@@ -22,6 +22,7 @@ export const ownerDataToShow = (client, assets, texts, formatters) =>
       secondaryText: texts.clientNumber,
       tooltipMessage: texts.clientNumberTooltip,
       mainTextProps: { semibold: false, bold: true },
+      show: () => !showNisNumber,
     },
     {
       Icon: assets.AccountIcon,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, string } from 'prop-types';
+import { bool, string, number, func } from 'prop-types';
 import { View } from 'react-native';
 import { Label } from '@widergy/mobile-ui';
 
@@ -8,26 +8,33 @@ import { SUB_STAGE_MARGIN, LAST_SUB_STAGE_MARGIN } from '../../../../../../const
 
 import styles from './styles';
 
-const SubStage = ({ subStage, isLast, label }) => (
-  <View
-    style={[
-      {
-        backgroundColor: subStage.color,
-        width: `${100 / 3}%`,
-        marginRight: isLast ? LAST_SUB_STAGE_MARGIN : SUB_STAGE_MARGIN,
-      },
-      styles.container,
-    ]}>
-    <Label h6 semibold>
-      {label}
-    </Label>
-  </View>
-);
+const SubStage = ({ subStage, isLast, label, index, getStageColor, totalSubStages, subStages }) => {
+  const margin = isLast ? LAST_SUB_STAGE_MARGIN : SUB_STAGE_MARGIN;
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: subStage.color ?? getStageColor(index, totalSubStages),
+          width: `${100 / subStages - margin}%`,
+          marginRight: `${margin}%`,
+        },
+        styles.container,
+      ]}>
+      <Label h6 semibold>
+        {label}
+      </Label>
+    </View>
+  );
+};
 
 SubStage.propTypes = {
   subStage: subStageType,
   isLast: bool,
   label: string,
+  index: number,
+  getStageColor: func,
+  totalSubStages: number,
+  subStages: number,
 };
 
 export default SubStage;

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/index.js

@@ -1,39 +1,79 @@
 import React from 'react';
-import { number } from 'prop-types';
+import { number, arrayOf } from 'prop-types';
 import { View } from 'react-native';
+import _ from 'lodash';
 
 import { contextApiInfoTypes } from '../../../../../../../../../../types/smartBillTypes';
 import { stageType } from '../../../../../../../../../../types/rateStagesTypes';
 import withContext from '../../../../../../../../../../hocs/withContext';
 import { useThemedStyle } from '../../../../../../../../../../Context';
 
-import LimitsLine from './components/LimitsLine';
 import SubStage from './components/SubStage';
-import getStyles from './styles';
+import getStyles, { MIN_STAGE_WIDTH } from './styles';
 
-const Stage = ({ context, stage, totalStages, subStageIndex }) => {
-  const { Label } = context;
+const Stage = ({ context, stage, rateStages, totalSubStages }) => {
+  const {
+    Label,
+    config: { getStageColor },
+  } = context;
+  const totalStages = rateStages.length;
 
-  const stageWidth = 100 / totalStages;
+  const getStageWidth = () => {
+    let totalWidth = 100;
+
+    // if we have only one rate, then return max width.
+    if (rateStages.length === 1) {
+      return totalWidth;
+    }
+    // We sort the stages based in sub stages in cases that former stages are larger than later ones.
+    const sortedRateStages = _.sortBy(rateStages, _stage => _stage.sub_rate_stages.length);
+
+    // Iterate over the sorted array until finished.
+    for (let index = 0; index < sortedRateStages.length; index += 1) {
+      // If we reached our stage then we break, we need to know the space former ones ocuppy and not the laters.
+      if (sortedRateStages[index].group === stage.group) {
+        break;
+      }
+      const currentSubStages = sortedRateStages[index].sub_rate_stages.length;
+
+      // Maximum a stage can ocuppy (since minimum is MIN_STAGE_WIDTH), is MIN_STAGE_WIDTH times the other stages.
+      const width = Math.min(
+        Math.max((100 * currentSubStages) / totalSubStages, MIN_STAGE_WIDTH),
+        MIN_STAGE_WIDTH * rateStages.length,
+      );
+
+      totalWidth -= width;
+    }
+
+    // Final width will be the minimum value between the calculated width and the total width left.
+    return Math.min(
+      Math.max((100 * stage.sub_rate_stages.length) / totalSubStages, MIN_STAGE_WIDTH),
+      totalWidth,
+    );
+  };
+
+  const subStages = stage.sub_rate_stages.length;
+  const stageWidth = getStageWidth();
 
   const styles = useThemedStyle(getStyles);
   return (
-    <View style={[{ marginRight: totalStages, width: `${stageWidth}%` }, styles.container]}>
+    <View style={[{ width: `${stageWidth}%` }, styles.container]}>
       {totalStages !== 1 && (
         <View style={styles.label}>
           <View style={styles.rateLabelContainer}>
-            <Label h6 white>
-              {subStageIndex}
-            </Label>
+            <Label small>{stage.group}</Label>
           </View>
         </View>
       )}
-      <LimitsLine />
       <View style={styles.bars}>
         {stage.sub_rate_stages.map((subStage, index) => (
           <SubStage
             key={subStage.category}
+            totalSubStages={totalSubStages}
+            getStageColor={getStageColor}
             stage={stage}
+            subStages={subStages}
+            index={index}
             subStage={subStage}
             isLast={index === stage.sub_rate_stages.length - 1}
             label={subStage.name}
@@ -47,8 +87,8 @@ const Stage = ({ context, stage, totalStages, subStageIndex }) => {
 Stage.propTypes = {
   context: contextApiInfoTypes,
   stage: stageType,
-  totalStages: number,
-  subStageIndex: number,
+  totalSubStages: number,
+  rateStages: arrayOf(stageType),
 };
 
 export default withContext()(Stage);

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/components/Stage/styles.js

@@ -1,14 +1,13 @@
 import { StyleSheet } from 'react-native';
 
+export const MIN_STAGE_WIDTH = 20;
+
 export default theme =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-    },
     bars: {
       flexDirection: 'row',
       flex: 1,
-      marginTop: 12,
+      marginTop: 6,
     },
     label: {
       alignItems: 'center',
@@ -16,10 +15,13 @@ export default theme =>
     },
     rateLabelContainer: {
       backgroundColor: theme.RateAndCategory.rateLabelBackground,
-      borderRadius: 50,
       paddingHorizontal: 9,
-      paddingVertical: 3,
+      paddingVertical: 8,
+      width: '100%',
+      alignItems: 'center',
       alignContent: 'center',
-      marginBottom: 10,
+    },
+    container: {
+      marginRight: 2,
     },
   });

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/index.js

@@ -6,13 +6,26 @@ import { rateStagesTypes } from '../../../../../../../../types/rateStagesTypes';
 import Stage from './components/Stage';
 import styles from './styles';
 
-const Bars = ({ rateStages }) => (
-  <View style={styles.container}>
-    {rateStages.map((stage, index) => (
-      <Stage key={stage.group} stage={stage} totalStages={rateStages.length} subStageIndex={index + 1} />
-    ))}
-  </View>
-);
+const Bars = ({ rateStages }) => {
+  const totalSubStages = rateStages.reduce(
+    (previous, current) => previous + current.sub_rate_stages.length,
+    0,
+  );
+
+  return (
+    <View style={styles.container}>
+      {rateStages.map((stage, index) => (
+        <Stage
+          key={stage.group}
+          stage={stage}
+          rateStages={rateStages}
+          totalSubStages={totalSubStages}
+          subStageIndex={index}
+        />
+      ))}
+    </View>
+  );
+};
 
 Bars.propTypes = {
   rateStages: rateStagesTypes,

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/components/Bars/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: { width: `100%`, flexDirection: 'row' },
+  container: { width: '100%', flexDirection: 'row' },
 });

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/constants.js

@@ -8,5 +8,5 @@ export const INITIAL_INDICATOR_POSITION = -5;
 export const BARS_MARGIN = 0;
 export const LAST_STAGE_MARGIN = 0;
 export const STAGE_MARGIN = 1;
-export const SUB_STAGE_MARGIN = 1;
+export const SUB_STAGE_MARGIN = 0.5;
 export const LAST_SUB_STAGE_MARGIN = 0;

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/components/RateStagesGraph/styles.js

@@ -3,5 +3,6 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     marginVertical: 10,
+    width: '100%',
   },
 });

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/index.js

@@ -5,56 +5,46 @@ import { View } from 'react-native';
 import { contextApiInfoTypes } from '../../../../types/smartBillTypes';
 import withContext from '../../../../hocs/withContext';
 import CategoryLabel from '../../../CategoryLabel';
-import Magnitude from '../../../Magnitude';
-import { MAX_VALUE, MIN_VALUE } from '../../../../constants/stagesGraph';
 import { useThemedStyle } from '../../../../Context';
+import Magnitude from '../../../Magnitude';
 
 import RateStagesGraph from './components/RateStagesGraph';
 import getStyles from './styles';
-import { formatRateStages } from './utils';
+import { MAX_VALUE, MIN_VALUE } from './components/RateStagesGraph/constants';
+import { getSubRateStages } from './utils';
 
-const CategoryBrConsumption = ({ context, value, unit, category, rate }) => {
-  const { config, Label, assets } = context;
-  const { rateStages, texts, getStageColor } = config;
-  const { consumptionUpTo, consumptionStartingForm, consumptionMoreThan } = config.texts.ratesDefinition;
+const CategoryByConsumption = ({ context, value, unit, category, rate }) => {
+  const { config, Label } = context;
+  const { rateStages, texts } = config;
+  const { consumptionUpTo, consumptionMoreThan } = config.texts.ratesDefinition;
 
   const valueCorrected = value < 0 ? 0 : value && Math.round(value);
 
-  const formattedRateStages = getStageColor ? formatRateStages(rateStages, getStageColor) : rateStages;
-
   const styles = useThemedStyle(getStyles);
 
-  const categoryDescriptions = [consumptionUpTo, consumptionStartingForm, consumptionMoreThan].map(
-    (description, index) => (
-      <View style={styles.categoryDescriptionContainer}>
-        <View style={styles.descriptionLabel}>
-          <View style={styles.rateLabelContainer}>
-            <Label h6 white>
-              {index + 1}
-            </Label>
-          </View>
-          <Label h6>{description}</Label>
-        </View>
-        <View style={styles.magnitude}>
-          <Magnitude
-            semibold
-            medium
-            unitProps={{ xsmall: false, h6: true }}
-            valueProps={{ h4: true }}
-            value={
-              index === 0
-                ? formattedRateStages[index].range[MAX_VALUE]
-                : formattedRateStages[index].range[MIN_VALUE]
-            }
-            unity={unit}
-            Icon={assets.EnergyIconBlack}
-            iconProps={{ color: 'red', fill: 'red' }}
-            style={{ icon: styles.icon }}
-          />
-        </View>
+  const subRateStages = getSubRateStages(rateStages);
+  const categoryDescriptions = subRateStages.map((subStage, index) => (
+    <View style={styles.categoryDescriptionContainer}>
+      <View style={styles.descriptionLabel}>
+        <Label bold h6 style={styles.scale}>
+          {index + 1}
+        </Label>
+        <Label h6>{index === 0 ? consumptionUpTo : consumptionMoreThan}</Label>
       </View>
-    ),
-  );
+      <View style={styles.magnitude}>
+        <Magnitude
+          semibold
+          medium
+          unitProps={{ xsmall: false, h6: true }}
+          valueProps={{ h4: true }}
+          value={index === 0 ? subStage.range[MAX_VALUE] : subStage.range[MIN_VALUE]}
+          unity={unit}
+          iconProps={{ color: 'red', fill: 'red' }}
+          style={{ icon: styles.icon }}
+        />
+      </View>
+    </View>
+  ));
 
   return (
     <View style={styles.container}>
@@ -69,7 +59,7 @@ const CategoryBrConsumption = ({ context, value, unit, category, rate }) => {
         </Label>
         <CategoryLabel rate={rate} category={category} style={styles.categoryLabel} />
         {(valueCorrected === 0 || valueCorrected) && (
-          <RateStagesGraph value={valueCorrected} unit={unit} rateStages={formattedRateStages} />
+          <RateStagesGraph value={valueCorrected} unit={unit} rateStages={rateStages} />
         )}
       </View>
       <View style={styles.descriptionsContainer}>
@@ -79,7 +69,7 @@ const CategoryBrConsumption = ({ context, value, unit, category, rate }) => {
   );
 };
 
-CategoryBrConsumption.propTypes = {
+CategoryByConsumption.propTypes = {
   context: contextApiInfoTypes,
   value: number,
   unit: string,
@@ -87,4 +77,4 @@ CategoryBrConsumption.propTypes = {
   rate: string,
 };
 
-export default withContext()(CategoryBrConsumption);
+export default withContext()(CategoryByConsumption);

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/styles.js

@@ -7,7 +7,7 @@ export default theme =>
       borderColor: '#DFDFDF',
       borderWidth: 1,
       borderRadius: 5,
-      flex: 1,
+      width: '100%',
       marginBottom: 16,
     },
     rateLabelContainer: {
@@ -48,6 +48,7 @@ export default theme =>
       justifyContent: 'center',
       paddingVertical: 24,
       alignItems: 'center',
+      width: '100%',
     },
     descriptionsContainer: {
       borderTopWidth: 1,
@@ -57,4 +58,7 @@ export default theme =>
     descriptionsInnerContainer: {
       paddingHorizontal: 15,
     },
+    scale: {
+      marginRight: 10,
+    },
   });

package/src/lib/components/RatesDefinition/components/CategoryByConsumption/utils.js

@@ -1,21 +1,11 @@
-import _ from 'lodash';
-
-export const formatRateStages = (rateStages, getColor) => {
-  const newRateStages = _.cloneDeep(rateStages);
-
+export const getSubRateStages = rateStages => {
   const plainSubRateStages = [];
 
-  newRateStages.forEach((rateStage, i) => {
-    rateStage.sub_rate_stages.forEach((subRateStage, j) => {
-      plainSubRateStages.push({ ...subRateStage, groupIndex: i, ownIndex: j });
+  rateStages.forEach(rateStage => {
+    rateStage.sub_rate_stages.forEach(subRateStage => {
+      plainSubRateStages.push(subRateStage);
     });
   });
 
-  plainSubRateStages.forEach((subRateStage, i) => {
-    const color = getColor(i, plainSubRateStages.length);
-
-    newRateStages[subRateStage.groupIndex].sub_rate_stages[subRateStage.ownIndex].color = color;
-  });
-
-  return newRateStages;
+  return plainSubRateStages;
 };