✨ validations for supply point page in gurb

Co-authored-by: Joana Figueira <[email protected]>
Som-Energia · Oct 16, 2024 · a7145e8 · a7145e8
1 parent 168808f
commit a7145e8
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 68 deletions.
diff --git 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={
                   <GurbErrorContextProvider>
-                    <Gurb {...props} />
+                    <GurbLoadingContextProvider>
+                      <Gurb {...props} />
+                    </GurbLoadingContextProvider>
                   </GurbErrorContextProvider>
                 }
               />

diff --git 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) => {
                   />
                   <NextButton
                     disabled={
-                      !formikProps.isValid || activeStep === MAX_STEP_NUMBER
+                      loading ||
+                      !formikProps.isValid ||
+                      activeStep === MAX_STEP_NUMBER
                     }
                     onClick={() => nextStep(formikProps)}
                     title={'NEXT'}

diff --git 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
@@ -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
@@ -3,12 +3,13 @@ import Typography from '@mui/material/Typography'
 import { textHeader1 } from '../gurbTheme'
 
 const Header = ({ title }) => {
-    return <Typography
+  return (
+    <Typography
       // variant="h2"
-      sx={textHeader1}
-    >
-      { title }
+      sx={textHeader1}>
+      {title}
     </Typography>
+  )
 }
 
-export default Header
+export default Header
diff --git 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 (
     <Box>
@@ -38,7 +44,12 @@ const InputField = ({
         fullWidth
         InputProps={{
           sx: { borderRadius: '8px', display: 'flex' },
-          onBlur: handleBlur
+          onBlur: handleBlur,
+          endAdornment: (
+            <InputAdornment position="end">
+              {isLoading && <CircularProgress size={24} />}
+            </InputAdornment>
+          )
         }}
         label={textFieldLabel}
         helperText={
@@ -50,7 +61,7 @@ const InputField = ({
         }
         onChange={handleChange}
         value={value}
-        error={touched && error}
+        error={touched && error !== undefined}
       />
     </Box>
   )

diff --git 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 <Box>
-        <Typography
-          // variant="h2"
-          sx={textHeader2}
-        >
-            {title}
-        </Typography>
-        <Typography
-          // variant="body1"
-          sx={textBody1}
-        >
-            {text}
-        </Typography>
+const TextRecomendation = ({ title, text }) => {
+  return (
+    <Box>
+      <Typography
+        // variant="h2"
+        sx={textHeader2}>
+        {title}
+      </Typography>
+      <Typography
+        // variant="body1"
+        sx={textBody1}>
+        {text}
+      </Typography>
     </Box>
-  }
-  export default TextRecomendation
+  )
+}
+export default TextRecomendation
diff --git 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
@@ -14,7 +14,6 @@ export const GurbErrorContextProvider = ({ children }) => {
         error: error,
         errorInfo: errorInfo
       }}>
-      <React.Fragment>{error}</React.Fragment>
       {children}
     </GurbErrorContext.Provider>
   )

diff --git a/src/context/GurbLoadingContext.jsx 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 (
+    <GurbLoadingContext.Provider
+      value={{
+        loading: loading,
+        setLoading: setLoading,
+      }}>
+      {children}
+    </GurbLoadingContext.Provider>
+  )
+}
+
+export default GurbLoadingContext
diff --git 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"
 }
diff --git 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) => {