Merge pull request #84 from Som-Energia/IMP_form_generationkwh

♻️ Improve the contribution to make it more understandable

src/containers/Generation/GenerationForm/GenerationContributionForm.js

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/core/styles'
 
-import StepHeader from '../../../components/StepHeader'
 import IBANField from '../../../components/IBANField'
+import AlertBox from 'components/AlertBox'
 
 import AddIcon from '@material-ui/icons/AddBox'
 import RemoveIcon from '@material-ui/icons/IndeterminateCheckBox'
@@ -98,29 +98,33 @@ const GenerationContributionForm = (props) => {
       isNaN(values.percent_over_annual_use) ||
       !isFinite(values.percent_over_annual_use)
     ) {
-      percentProd = 'n/s %'
+      percentProd = undefined
     }
 
     return (
       <Box id="box_percent_use">
-        <Grid
-          container
-          style={{
-            border: '0.5px lightgrey solid'
-          }}>
+        {percentProd ? (
           <Grid
-            item
+            container
             style={{
-              padding: '10px 2px 10px 2px',
-              width: percentProd,
-              height: '100%',
-              backgroundColor: '#96b633'
+              border: '0.5px lightgrey solid'
             }}>
-            <Typography id="percent_value" style={{ margin: '0px 10px' }}>
-              {percentProd}
-            </Typography>
+            <Grid
+              item
+              style={{
+                padding: '10px 2px 10px 2px',
+                width: percentProd,
+                height: '100%',
+                backgroundColor: '#96b633'
+              }}>
+              <Typography id="percent_value" style={{ margin: '0px 10px' }}>
+                {percentProd}
+              </Typography>
+            </Grid>
           </Grid>
-        </Grid>
+        ) : (
+          <AlertBox id='percent_value_error' description={t('GENERATION_PERCENT_ERROR_DESC')} severity={'warning'} variant={'body2'}/>
+        )}
       </Box>
     )
   }, [values.percent_over_annual_use])

src/containers/Generation/GenerationForm/GenerationContributionForm.test.js

@@ -190,22 +190,6 @@ describe('Generation Form Contribution', () => {
     expect(mockSetFieldValue).toHaveBeenCalledWith('payment.iban', IBAN, false)
   })
 
-  test('Should show error when percent use has erroneous value', () => {
-    const mockPercentValues = JSON.parse(JSON.stringify(mockValues))
-    mockPercentValues.percent_over_annual_use = Infinity
-
-    const dom = render(
-      <GenerationContributionForm
-        values={mockPercentValues}
-        errors={errors}
-        setFieldValue={mockSetFieldValue}
-      />
-    )
-
-    const percentValue = getById(dom.container, 'percent_value')
-    expect(getByText(percentValue, 'n/s %')).toBeInTheDocument()
-  })
-
   test('Should show IBAN helper text', () => {
 
     const dom = render(

src/containers/Generation/GenerationForm/GenerationForm.js

@@ -82,7 +82,7 @@ const GenerationContribution = (props) => {
       sepa_accepted: true
     },
     number_of_actions: 0,
-    annual_use: 0,
+    annual_use: 5000,
     privacy_policy_accepted: false,
     privacy_policy_accepted_responsible_declaration: false,
     percent_over_annual_use: 0,

src/i18n/locale-ca.json

@@ -684,6 +684,7 @@
     "GENERATION_FORM_PERSONAL_DATA_TITLE":"Formulari per fer-se soci/sòcia",
     "GENERATION_FORM_ANNUAL_CONSUMPTION_URL":"https://ca.support.somenergia.coop/article/945-com-puc-saber-el-meu-us-anual-delectricitat",
     "GENERATION_FORM_POSTAL_CODE":"Introdueix el codi postal",
+    "GENERATION_PERCENT_ERROR_DESC":"Per poder veure aquest percentatge, has d'emplenar el camp d'ús anual",
     "TAR_20TD_SOM": "2.0TD Períodes Península",
     "TAR_20TD_SOM_INSULAR": "2.0TD Períodes Insular",
     "TAR_30TD_SOM": "3.0TD Períodes Península",

src/i18n/locale-es.json

@@ -683,6 +683,7 @@
     "GENERATION_FORM_PERSONAL_DATA_TITLE":"Formulario para hacerse socio/socia",
     "GENERATION_FORM_ANNUAL_CONSUMPTION_URL":"https://es.support.somenergia.coop/article/946-como-puedo-saber-mi-uso-anual-de-electricidad?utm_source=linkidiomes&utm_medium=cda&utm_campaign=castellano",
     "GENERATION_FORM_POSTAL_CODE":"Introduce el código postal",
+    "GENERATION_PERCENT_ERROR_DESC":"Para poder ver este porcentaje, debes rellenar el campo de uso anual",
     "TAR_20TD_SOM": "2.0TD Periodos Península",
     "TAR_20TD_SOM_INSULAR": "2.0TD Periodos Insular",
     "TAR_30TD_SOM": "3.0TD Periodos Península",

src/i18n/locale-eu.json

@@ -681,6 +681,7 @@
     "GENERATION_FORM_IN_PROCESS":"Eskaera prozesatzen ari da...",
     "GENERATION_FORM_PERSONAL_DATA_TITLE":"Bazkide izateko formularioa",
     "GENERATION_FORM_ANNUAL_CONSUMPTION_URL":"https://eu.support.somenergia.coop/article/947-nola-jakin-dezaket-urtean-zenbat-elektrizitate-erabiltzen-dudan?utm_source=linkidiomes&utm_medium=cda&utm_campaign=euskara",
+    "GENERATION_PERCENT_ERROR_DESC":"Ehuneko hori ikusteko, urteko erabilera eremua bete behar duzu",
     "TAR_20TD_SOM": "2.0TD Periodos Península",
     "TAR_20TD_SOM_INSULAR": "2.0TD Periodos Insular",
     "TAR_30TD_SOM": "3.0TD Periodos Península",

src/i18n/locale-gl.json

@@ -675,6 +675,7 @@
     "GENERATION_FORM_IN_PROCESS":"A solicitude estase a procesar...",
     "GENERATION_FORM_PERSONAL_DATA_TITLE":"Formulario para facerte socio/socia",
     "GENERATION_FORM_ANNUAL_CONSUMPTION_URL":"https://gl.support.somenergia.coop/article/948-como-podo-saber-o-meu-uso-anual-de-electricidade?utm_source=linkidiomes&utm_medium=cda&utm_campaign=galego",
+    "GENERATION_PERCENT_ERROR_DESC":"Para ver esta porcentaxe, debes cubrir o campo de uso anual",
     "TAR_20TD_SOM": "2.0TD Periodos Península",
     "TAR_20TD_SOM_INSULAR": "2.0TD Periodos Insular",
     "TAR_30TD_SOM": "3.0TD Periodos Península",