From a7145e89aa38a7eee9beaca1f25942276a50b112 Mon Sep 17 00:00:00 2001 From: marta197 Date: Wed, 16 Oct 2024 12:15:37 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20validations=20for=20supply=20point?= =?UTF-8?q?=20page=20in=20gurb?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joana Figueira --- src/App.jsx | 5 +-- src/containers/Gurb.jsx | 8 +++-- src/containers/Gurb/SupplyPoint.jsx | 8 +++-- src/containers/Gurb/components/CUPS.jsx | 30 ++++++++++++----- src/containers/Gurb/components/Header.jsx | 11 ++++--- src/containers/Gurb/components/InputField.jsx | 19 ++++++++--- .../Gurb/components/TextRecomendation.jsx | 33 +++++++++---------- src/containers/Gurb/supplyPointValidations.js | 4 +-- src/context/GurbErrorContext.jsx | 1 - src/context/GurbLoadingContext.jsx | 19 +++++++++++ src/i18n/locale-ca.json | 3 +- src/services/apiGurb.js | 24 +------------- 12 files changed, 97 insertions(+), 68 deletions(-) create mode 100644 src/context/GurbLoadingContext.jsx diff --git a/src/App.jsx b/src/App.jsx index 84e64fa8..9a7f0e90 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -50,7 +50,6 @@ const App = (props) => { ) const Gurb = lazy(() => import('./containers/Gurb')) - const loadContractData = () => { const contractData = typeof props.contract === 'string' && props.contract !== '' @@ -424,7 +423,9 @@ const App = (props) => { path="/:language/gurb/validations/" element={ - + + + } /> diff --git a/src/containers/Gurb.jsx b/src/containers/Gurb.jsx index 63e733b8..43a2535d 100644 --- a/src/containers/Gurb.jsx +++ b/src/containers/Gurb.jsx @@ -19,6 +19,7 @@ import { selfConsumptionValidations } from './Gurb/requirementsValidations' import GurbErrorContext from '../context/GurbErrorContext' +import GurbLoadingContext from '../context/GurbLoadingContext' const MAX_STEP_NUMBER = 6 const REQUIREMENTS_STEPS = [1, 2, 3, 4] @@ -27,6 +28,7 @@ const Gurb = (props) => { const { i18n } = useTranslation() const { language } = useParams() const { error } = useContext(GurbErrorContext) + const { loading } = useContext(GurbLoadingContext) const [activeStep, setActiveStep] = useState(0) useEffect(() => { @@ -35,7 +37,7 @@ const Gurb = (props) => { const initialValues = { is_client: undefined, - cups: undefined, + cups: '', has_light: undefined, address: { street: undefined, @@ -116,7 +118,9 @@ const Gurb = (props) => { /> nextStep(formikProps)} title={'NEXT'} diff --git a/src/containers/Gurb/SupplyPoint.jsx b/src/containers/Gurb/SupplyPoint.jsx index 5f46f826..a52f4ec7 100644 --- a/src/containers/Gurb/SupplyPoint.jsx +++ b/src/containers/Gurb/SupplyPoint.jsx @@ -15,8 +15,12 @@ const SupplyPoint = (props) => { // TODO: gurb id from where? const gurbId = 1 await getGurbData(gurbId) - .then((data) => { - setGurbData(data) + .then(({ data }) => { + setGurbData({ + name: data?.name, + state: data?.state, + completedPercentage: data?.assigned_betas_percentage + }) }) .catch((error) => { // TODO: handle errors diff --git a/src/containers/Gurb/components/CUPS.jsx b/src/containers/Gurb/components/CUPS.jsx index b141c504..299ee1aa 100644 --- a/src/containers/Gurb/components/CUPS.jsx +++ b/src/containers/Gurb/components/CUPS.jsx @@ -1,19 +1,27 @@ -import { useEffect } from 'react' +import { useContext, useEffect } from 'react' import { useTranslation } from 'react-i18next' import InputField from './InputField' import { checkCups } from '../../../services/api' +import GurbLoadingContext from '../../../context/GurbLoadingContext' const CUPS = (props) => { - const { values, errors, touched, setFieldValue, setFieldTouched } = props + const { + values, + errors, + touched, + setFieldValue, + setFieldError, + setFieldTouched + } = props const { t } = useTranslation() - // const [isLoading, setIsLoading] = useState(false) + const { loading, setLoading } = useContext(GurbLoadingContext) useEffect(() => { const cups = values.cups - if (cups?.length > 18) { - // setIsLoading(true) + if (cups?.length >= 20) { + setLoading(true) checkCups(cups) .then((response) => { const status = response?.data?.status @@ -22,11 +30,14 @@ const CUPS = (props) => { } else { setFieldValue('is_client', true) } - // setIsLoading(false) + setFieldTouched('cups', true) + setLoading(false) }) - .catch((error) => { - console.error(error.response) - // setIsLoading(false) + .catch(({ response }) => { + const { error } = response.data + setFieldError('cups', t(`GURB_ERROR_${error.code}`)) + setFieldTouched('cups', true) + setLoading(false) }) } }, [values.cups]) @@ -52,6 +63,7 @@ const CUPS = (props) => { touched={touched?.cups} value={values.cups} error={errors?.cups} + isLoading={loading} /> ) } diff --git a/src/containers/Gurb/components/Header.jsx b/src/containers/Gurb/components/Header.jsx index d8278483..c233dafb 100644 --- a/src/containers/Gurb/components/Header.jsx +++ b/src/containers/Gurb/components/Header.jsx @@ -3,12 +3,13 @@ import Typography from '@mui/material/Typography' import { textHeader1 } from '../gurbTheme' const Header = ({ title }) => { - return - { title } + sx={textHeader1}> + {title} + ) } -export default Header \ No newline at end of file +export default Header diff --git a/src/containers/Gurb/components/InputField.jsx b/src/containers/Gurb/components/InputField.jsx index 509c23e3..89768209 100644 --- a/src/containers/Gurb/components/InputField.jsx +++ b/src/containers/Gurb/components/InputField.jsx @@ -1,8 +1,13 @@ import Typography from '@mui/material/Typography' import Box from '@mui/material/Box' import TextField from '@mui/material/TextField' -import { textHeader4, textHelper1 } from '../gurbTheme' +import InputAdornment from '@mui/material/InputAdornment' + import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined' +import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined' +import CircularProgress from '@mui/material/CircularProgress' + +import { textHeader4, textHelper1 } from '../gurbTheme' export const HelperText = ({ helperText, iconHelper }) => { return ( @@ -24,7 +29,8 @@ const InputField = ({ handleBlur, touched, value, - error + error, + isLoading = false }) => { return ( @@ -38,7 +44,12 @@ const InputField = ({ fullWidth InputProps={{ sx: { borderRadius: '8px', display: 'flex' }, - onBlur: handleBlur + onBlur: handleBlur, + endAdornment: ( + + {isLoading && } + + ) }} label={textFieldLabel} helperText={ @@ -50,7 +61,7 @@ const InputField = ({ } onChange={handleChange} value={value} - error={touched && error} + error={touched && error !== undefined} /> ) diff --git a/src/containers/Gurb/components/TextRecomendation.jsx b/src/containers/Gurb/components/TextRecomendation.jsx index 1f8bc5fc..6ced38bf 100644 --- a/src/containers/Gurb/components/TextRecomendation.jsx +++ b/src/containers/Gurb/components/TextRecomendation.jsx @@ -3,21 +3,20 @@ import Typography from '@mui/material/Typography' import { textHeader2, textBody1 } from '../gurbTheme' - -const TextRecomendation = ({title, text}) => { - return - - {title} - - - {text} - +const TextRecomendation = ({ title, text }) => { + return ( + + + {title} + + + {text} + - } - export default TextRecomendation \ No newline at end of file + ) +} +export default TextRecomendation diff --git a/src/containers/Gurb/supplyPointValidations.js b/src/containers/Gurb/supplyPointValidations.js index b3588755..30f9972d 100644 --- a/src/containers/Gurb/supplyPointValidations.js +++ b/src/containers/Gurb/supplyPointValidations.js @@ -3,8 +3,8 @@ import * as Yup from 'yup' const supplyPointValidations = Yup.object().shape({ cups: Yup.string() // .matches(/^ES[0-9]{15}\d*$/, 'INVALID_FIELD') - .min(18, 'TOO_SHORT') - .max(20, 'TOO_LONG') + .min(20, 'TOO_SHORT') + .max(22, 'TOO_LONG') .required('REQUIRED_FIELD') }) diff --git a/src/context/GurbErrorContext.jsx b/src/context/GurbErrorContext.jsx index 27d4011a..db28faf5 100644 --- a/src/context/GurbErrorContext.jsx +++ b/src/context/GurbErrorContext.jsx @@ -14,7 +14,6 @@ export const GurbErrorContextProvider = ({ children }) => { error: error, errorInfo: errorInfo }}> - {error} {children} ) diff --git a/src/context/GurbLoadingContext.jsx b/src/context/GurbLoadingContext.jsx new file mode 100644 index 00000000..03a76043 --- /dev/null +++ b/src/context/GurbLoadingContext.jsx @@ -0,0 +1,19 @@ +import React, { useState, createContext } from 'react' + +const GurbLoadingContext = createContext() + +export const GurbLoadingContextProvider = ({ children }) => { + const [loading, setLoading] = useState(undefined) + + return ( + + {children} + + ) +} + +export default GurbLoadingContext \ No newline at end of file diff --git a/src/i18n/locale-ca.json b/src/i18n/locale-ca.json index 541d6a7d..1a1ddeb0 100644 --- a/src/i18n/locale-ca.json +++ b/src/i18n/locale-ca.json @@ -752,5 +752,6 @@ "GURB_CONTRACT_STEP": "Contractació", "GURB_FINAL_STEP": "GURB", "GURB_NEXT": "Següent", - "GURB_PREV": "Anterior" + "GURB_PREV": "Anterior", + "GURB_ERROR_INVALID_FIELD": "Camp incorrecte" } \ No newline at end of file diff --git a/src/services/apiGurb.js b/src/services/apiGurb.js index da2e38ca..22ac1282 100644 --- a/src/services/apiGurb.js +++ b/src/services/apiGurb.js @@ -7,34 +7,12 @@ const WEBFORMS_API_URL = document.getElementById('root')?.dataset?.webformsApiUr // TODO: change this name !!! export const getGurbData = async (gurbId) => { - console.log('gurgId', gurbId) return axios({ method: 'GET', url: `${WEBFORMS_API_URL}/data/gurb/${gurbId}` }).then((response) => { - return { - name: response.data.name, - state: response.data.state, - completedPercentage: response.data.assigned_betas_percentage - } + return response?.data }) - // const data = { - // id: 1, - // name: 'GURB Mataró', - // state: 'open', - // assigned_betas_kw: 200, - // assigned_betas_percentage: 30, - // available_betas_kw: 400, - // available_betas_percentage: 70, - // generation_power: 200, - // min_power: 3, - // max_power: 20 - // } - // return { - // name: data.name, - // state: data.state, - // completedPercentage: data.assigned_betas_percentage, - // } } // export const checkGurbPercentage = async (gurbId) => {