✨ Add CAUField

- Use new component in test and contract - Modify ApiValidateField to allow return specific errors - IBANField and CadastralRefernceField to specific errors Co-authored-by: David García Garzón <[email protected]>
Som-Energia · Jan 10, 2024 · d92f503 · d92f503
1 parent 5182d63
commit d92f503
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 29 deletions.
diff --git a/src/components/ApiValidatedField.example.js b/src/components/ApiValidatedField.example.js
@@ -7,20 +7,25 @@ import CAUField from './CAUField'
 function ExampleWrap({ component, ...props }) {
   const [value, setValue] = React.useState()
   const [valid, setValid] = React.useState()
+  const [extra, setExtra] = React.useState()
   const Component = component
   return (
     <>
       <Component
         {...props}
         value={value}
+        error={value && !valid}
         onChange={(newValue) => {
-          setValue(newValue.value)
-          setValid(newValue.valid)
+          const {value, valid, ...extra} = newValue
+          setValue(value)
+          setValid(valid)
+          setExtra(extra)
         }}
-        helperText={valid?'Text d\'ajuda':'Formato invalido'}
+        helperText={(!value || valid)?'Text d\'ajuda':extra?.error??'Formato invalido'}
       />
       <div>Value: {value}</div>
       <div>Valid: {'' + valid}</div>
+      <div>Extra: {JSON.stringify(extra)}</div>
     </>
   )
 }

diff --git a/src/components/ApiValidatedField.js b/src/components/ApiValidatedField.js
@@ -41,10 +41,10 @@ export function ApiValidatedField({
 
   function checkValue(value) {
     setFormerValue(value)
-    onChange({ value, valid: false })
-    if (!localCheck(value)) {
-      return
-    }
+    const result = localCheck(value)
+    const needsRemote = result.valid
+    onChange({...result, valid: false})
+    if (!needsRemote) return
     setIsLoading(true)
     remoteCheck(value).then((result) => {
       setIsLoading(false)

diff --git a/src/components/CAUField.js b/src/components/CAUField.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { checkCups } from '../services/api'
-import MapIcon from '@material-ui/icons/Map'
+import SolarPowerIcon from '@material-ui/icons/WbSunny'
 import { useTranslation } from 'react-i18next'
 import ApiValidatedField from './ApiValidatedField'
 
@@ -14,32 +14,43 @@ export function CAUField(props) {
     value = [
       value.slice(0, 2), // ES
       value.slice(2, 6), // Supplier
-      value.slice(6, 18), // Supply point
+      value.slice(6, 10), // Supply point
+      value.slice(10, 14), // Supply point
+      value.slice(14, 18), // Supply point
       value.slice(18, 20), // Control
       value.slice(20, 22), // Border point
       value.slice(22, 26), // CAU
     ].join(' ').trim()
     return value
   }
+
   function localCheck(value) {
-    return value.replaceAll(' ', '').length === 26
+    const compact = value.replaceAll(' ', '')
+    const borderPoint = compact.slice(20,22)
+    const installation = compact.slice(22,26)
+    if (!compact) return {value, valid: false}
+    if (compact.slice(0,2) !== "ES".slice(0,compact.length)) return {value, valid: false, error:t("CAU_INVALID_PREFIX")}
+    if (borderPoint.length === 2 && !/^\d[A-Z]$/.test(borderPoint)) return {value, valid: false, error:t("CAU_INVALID_BORDER_POINT")}
+    if (installation.length === 4 && !/^A\d{1,3}$/.test(installation)) return {value, valid: false, error:t("CAU_INVALID_INSTALLATION")}
+    if (compact.length !== 26) return {value, valid: false, error:t("CAU_INVALID_LENGTH")}
+    return {value, valid: true}
   }
   function remoteCheck(value) {
     return checkCups(value.replace(/ /g, '').slice(0,20))
       .then((response) => {
         const valid = response?.state === true
-        return { value, valid }
+        return { value, valid, error: !valid && t("CAU_INVALID_CONTROL_DIGIT") }
       })
       .catch((error) => {
         const valid = !!error?.response?.data?.state
-        return { value, valid }
+        return { value, valid, error: !valid && t("CAU_INVALID_CONTROL_DIGIT")  }
       })
   }
 
   return (
     <ApiValidatedField
       {...props}
-      leadingIcon={MapIcon}
+      leadingIcon={SolarPowerIcon}
       inputFilter={inputFilter}
       localCheck={localCheck}
       remoteCheck={remoteCheck}

diff --git a/src/components/CadastralReferenceField.js b/src/components/CadastralReferenceField.js
@@ -20,7 +20,7 @@ export function CadastralReferenceField(props) {
     return value
   }
   function localCheck(value) {
-    return value.replaceAll(' ', '').length === 20
+    return {value, valid: value.replaceAll(' ', '').length === 20 }
   }
   function remoteCheck(value) {
     return checkCadastralReference(value)

diff --git a/src/components/IBANField.js b/src/components/IBANField.js
@@ -17,7 +17,7 @@ export function IBANField(props) {
     return value
   }
   function localCheck(value) {
-    return value.replaceAll(' ', '').length === 24
+    return { value, valid: value.replaceAll(' ', '').length === 24 }
   }
   function remoteCheck(value) {
     return checkIban(value)

diff --git a/src/containers/Contract.js b/src/containers/Contract.js
@@ -421,10 +421,11 @@ const Contract = (props) => {
     Yup.object().shape({
       self_consumption: Yup.object().shape({
         cau: Yup.string()
-          .required(t('FILL_SELFCONSUMPTION_CAU'))
-          .min(22, t('CAU_INVALID'))
-          .max(31, t('CAU_INVALID'))
-          .matches(/A\d{1,3}$/, t('CAU_INVALID_FORMAT')),
+          .when('cau_error', (cau_error)=>{
+            if (cau_error) return Yup.mixed().test({name: 'cau_error', test: ()=>false, message: cau_error})
+            return Yup.string().required(t('FILL_SELFCONSUMPTION_CAU'))
+          }),
+        cau_error: Yup.mixed().oneOf([Yup.bool(), Yup.string()]),
         collective_installation: Yup.bool().required(
           t('FILL_SELFCONSUMPTION_COLLECTIVE_INSTALLATION')
         ),

diff --git a/src/containers/Contract/SelfConsumptionDetails.js b/src/containers/Contract/SelfConsumptionDetails.js
@@ -3,17 +3,18 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/core/styles'
 
-import Chooser from '../../components/Chooser'
-import StepHeader from '../../components/StepHeader'
-import Uploader from '../../components/Uploader'
-
 import InputAdornment from '@material-ui/core/InputAdornment'
 import Grid from '@material-ui/core/Grid'
 import MenuItem from '@material-ui/core/MenuItem'
 import TextField from '@material-ui/core/TextField'
 import Typography from '@material-ui/core/Typography'
 import FormHelperText from '@material-ui/core/FormHelperText'
 
+import Chooser from '../../components/Chooser'
+import StepHeader from '../../components/StepHeader'
+import Uploader from '../../components/Uploader'
+import CAUField from '../../components/CAUField'
+
 import {
   getSelfConsumptionSituations,
   getSelfConsumptionTechnologies
@@ -52,6 +53,11 @@ const SelfConsumptionDetails = (props) => {
     setFieldValue(event.target.name, result)
   }
 
+  const handleChangeCAU = (data) => {
+    setFieldValue('self_consumption.cau', data.value)
+    setFieldValue('self_consumption.cau_error', data.error || false)
+  }
+
   const [situations, setSituations] = useState([])
   const [isLoadingSituations, setLoadingSituations] = useState(false)
 
@@ -94,22 +100,21 @@ const SelfConsumptionDetails = (props) => {
             dangerouslySetInnerHTML={{ __html: t('SELFCONSUMPTION_CAU_CODE') }}
             className={classes.fieldTitle}
           />
-          <TextField
+          <CAUField
             required
             id="self_consumption_cau"
             name="self_consumption.cau"
             label={t('CAU')}
             variant="outlined"
             fullWidth
             value={values.self_consumption.cau}
-            onChange={handleChange}
+            onChange={handleChangeCAU}
             onBlur={handleBlur}
             error={
-              errors?.self_consumption?.cau && touched?.self_consumption?.cau
+               values?.self_consumption?.cau && !!errors?.self_consumption?.cau
             }
             helperText={
-              (touched?.self_consumption?.cau &&
-                errors?.self_consumption?.cau) || (
+              errors?.self_consumption?.cau || (
                 <a
                   href={t('SELFCONSUMPTION_CAU_HELP_URL')}
                   target="_blank"

diff --git a/src/services/utils.js b/src/services/utils.js
@@ -359,7 +359,7 @@ export const normalizeContract = (contract) => {
 
   if (contract?.self_consumption?.have_installation) {
     finalContract.self_consumption = {}
-    finalContract.self_consumption.cau = contract?.self_consumption?.cau
+    finalContract.self_consumption.cau = contract?.self_consumption?.cau.replace(/ /g, '')
     finalContract.self_consumption.collective_installation =
       contract?.self_consumption?.collective_installation