♻ Move AddressAutocompleteField as Gurb's component

- Adapt component to gurb's design - Remove component from contract form
Som-Energia · Nov 13, 2024 · af13fa4 · af13fa4
1 parent ac3b572
commit af13fa4
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 87 deletions.
diff --git a/src/containers/Contract/SupplyPoint.jsx b/src/containers/Contract/SupplyPoint.jsx
@@ -19,7 +19,6 @@ import CnaeField from '../../components/CnaeField'
 import { CNAE_HOUSING } from '../../services/utils'
 import { getMunicipisByPostalCode } from '../../services/api'
 import CadastralReferenceField from '../../components/CadastralReferenceField'
-import LocationInput from '../../components/AddressAutocompletedField'
 
 const CadastralReferenceHelperText = () => {
   const { t } = useTranslation()
@@ -37,8 +36,6 @@ const CadastralReferenceHelperText = () => {
 const SupplyPoint = (props) => {
   const { t } = useTranslation()
 
-  const SHOW_STATE_CITY = props.isGurbEnabled ? false : true
-
   const [addressValue, setAddressValue] = useState('')
 
   const {
@@ -146,35 +143,23 @@ const SupplyPoint = (props) => {
       <Box mt={3} mb={1}>
         <Grid container spacing={3}>
           <Grid item xs={12} sm={12}>
-            {props.isGurbEnabled ? (
-              <LocationInput
-                id="supply_point_address"
-                name="supply_point.address"
-                value={addressValue}
-                onChange={handleAddressChange}
-                onLocationSelected={handleLocationSelected}
-              />
-            ) : (
-              <TextField
-                id="supply_point_address"
-                name="supply_point.address"
-                label={t('HOLDER_ADDRESS')}
-                required
-                variant="outlined"
-                fullWidth
-                value={values?.supply_point?.address}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                error={
-                  errors?.supply_point?.address &&
-                  touched?.supply_point?.address
-                }
-                helperText={
-                  touched?.supply_point?.address &&
-                  errors?.supply_point?.address
-                }
-              />
-            )}
+            <TextField
+              id="supply_point_address"
+              name="supply_point.address"
+              label={t('HOLDER_ADDRESS')}
+              required
+              variant="outlined"
+              fullWidth
+              value={values?.supply_point?.address}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              error={
+                errors?.supply_point?.address && touched?.supply_point?.address
+              }
+              helperText={
+                touched?.supply_point?.address && errors?.supply_point?.address
+              }
+            />
           </Grid>
           <Grid item xs={4} sm={2}>
             <TextField
@@ -234,7 +219,6 @@ const SupplyPoint = (props) => {
 
           <Grid item xs={12} sm={6}>
             <TextField
-              disabled={props.isGurbEnabled ? true : false}
               id="supply_point_postal_code"
               name="supply_point.postal_code"
               label={t('HOLDER_POSTALCODE')}
@@ -255,23 +239,21 @@ const SupplyPoint = (props) => {
             />
           </Grid>
 
-          {SHOW_STATE_CITY ? (
-            <StateCity
-              stateId="supply_point_state"
-              stateName="supply_point.state"
-              stateInitial={values?.supply_point?.state}
-              stateError={
-                errors?.supply_point?.state && touched?.supply_point?.state
-              }
-              cityId="supply_point_city"
-              cityName="supply_point.city"
-              cityInitial={values?.supply_point?.city}
-              cityError={
-                errors?.supply_point?.city && touched?.supply_point?.city
-              }
-              onChange={onChangeStateCity}
-            />
-          ) : null}
+          <StateCity
+            stateId="supply_point_state"
+            stateName="supply_point.state"
+            stateInitial={values?.supply_point?.state}
+            stateError={
+              errors?.supply_point?.state && touched?.supply_point?.state
+            }
+            cityId="supply_point_city"
+            cityName="supply_point.city"
+            cityInitial={values?.supply_point?.city}
+            cityError={
+              errors?.supply_point?.city && touched?.supply_point?.city
+            }
+            onChange={onChangeStateCity}
+          />
 
           <Grid item xs={12} sm={6}>
             <TextField
@@ -336,7 +318,7 @@ const SupplyPoint = (props) => {
                 }
                 helperText={
                   values?.supply_point?.cadastral_reference &&
-                    errors?.supply_point?.cadastral_reference ? (
+                  errors?.supply_point?.cadastral_reference ? (
                     errors?.supply_point?.cadastral_reference
                   ) : (
                     <CadastralReferenceHelperText />

diff --git a/src/components/AddressAutocompletedField.jsx → .../components/AddressAutocompletedField.jsx b/src/components/AddressAutocompletedField.jsx → .../components/AddressAutocompletedField.jsx
@@ -1,10 +1,21 @@
 import React, { useRef, useState } from 'react'
-import getGoogleMapsPlacesApiClient from '../services/googleApiClient'
+import getGoogleMapsPlacesApiClient from '../../../services/googleApiClient'
 import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
 import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { textHeader4 } from '../gurbTheme'
+import { HelperText } from './InputField'
 
-export default function LocationInput({ value, onChange, onLocationSelected }) {
+export default function LocationInput({
+  textFieldLabel,
+  textFieldName,
+  textFieldHelper,
+  value,
+  onChange,
+  onLocationSelected
+}) {
   const { t } = useTranslation()
   const timeoutRef = useRef()
   const sessionTokenRef = useRef()
@@ -122,20 +133,29 @@ export default function LocationInput({ value, onChange, onLocationSelected }) {
         noOptionsText="No locations"
         onChange={handleSuggestionSelected}
         renderInput={(params) => (
-          <TextField
-            sx={{'input' : {padding:0}}}
-            {...params}
-            label={t('HOLDER_ADDRESS')}
-            onChange={(event) => {
-              const newValue = event.target.value
-              // update controlled input value
-              onChange(newValue)
-              // clear any previously loaded place details
-              setPlaceDetail(undefined)
-              // trigger the load of suggestions
-              loadSuggestions(newValue)
-            }}
-          />
+          <Box>
+            <Typography sx={textHeader4}>{textFieldName}</Typography>
+            <TextField
+              sx={{
+                '& .MuiFormHelperText-root': { color: '#B3B3B3' },
+                '& .MuiInputLabel-root': { color: '#B3B3B3' },
+                '& .MuiOutlinedInput-root': { borderRadius: '8px' },
+                marginTop: '0.5rem'
+              }}
+              {...params}
+              label={textFieldLabel}
+              helperText={textFieldHelper}
+              onChange={(event) => {
+                const newValue = event.target.value
+                // update controlled input value
+                onChange(newValue)
+                // clear any previously loaded place details
+                setPlaceDetail(undefined)
+                // trigger the load of suggestions
+                loadSuggestions(newValue)
+              }}
+            />
+          </Box>
         )}
       />
       <div id="googlemaps-attribution-container"></div>

diff --git a/src/containers/Gurb/pages/Requirements/Address.jsx b/src/containers/Gurb/pages/Requirements/Address.jsx
@@ -2,8 +2,7 @@ import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import TextRecomendation from '../../components/TextRecomendation'
-import InputField from '../../components/InputField'
-import LocationInput from '../../../../components/AddressAutocompletedField'
+import LocationInput from '../../components/AddressAutocompletedField'
 import { setMunicipisWithPostalCode } from '../../../../services/utils'
 import { checkGurbDistance } from '../../../../services/apiGurb'
 import GurbErrorContext from '../../../../context/GurbErrorContext'
@@ -35,20 +34,20 @@ const Address = (props) => {
   }, [values.address.postal_code])
 
   const handleCheckGurbDistance = async () => {
-    // TODO: gurb id from where?
+    // TODO: waiting to know where gurb id comes from
     const gurbId = 3
     await checkGurbDistance(gurbId, values.address.lat, values.address.long)
       .then(({ data }) => {
         // data is false when address is outside gurb's 2km limit
         if (data === false) {
           setError(true)
           setErrorInfo({
-              main_text: t('GURB_ADDRESS_ERROR_MAIN_TEXT'),
-              seconday_text: t('GURB_ADDRESS_ERROR_SECONDARY_TEXT'),
-              link_text: t('GURB_ADDRESS_ERROR_LINK_TEXT'),
-              test: () => {
-                initializeAddress()
-              }
+            main_text: t('GURB_ADDRESS_ERROR_MAIN_TEXT'),
+            seconday_text: t('GURB_ADDRESS_ERROR_SECONDARY_TEXT'),
+            link_text: t('GURB_ADDRESS_ERROR_LINK_TEXT'),
+            clean_address: () => {
+              initializeAddress()
+            }
           })
         }
       })
@@ -105,23 +104,15 @@ const Address = (props) => {
       />
       &nbsp;
       <LocationInput
+        textFieldLabel={t('GURB_ADDRESS_LABEL')}
+        textFieldName={t('GURB_ADDRESS_FIELD')}
+        textFieldHelper={t('GURB_ADDRESS_HELPER')}
         id="address-street"
         name="address.street"
         value={addressValue}
         onChange={handleAddressChange}
         onLocationSelected={handleLocationSelected}
       />
-      <InputField
-        textFieldLabel={t('GURB_ADDRESS_LABEL')}
-        textFieldName={t('GURB_ADDRESS_FIELD')}
-        textFieldHelper={t('GURB_ADDRESS_HELPER')}
-        iconHelper={false}
-        handleChange={handleInputAddress}
-        handleBlur={handleInputAddressBlur}
-        touched={touched?.address?.street}
-        value={values.address.street}
-        error={errors?.address?.street}
-      />
     </>
   )
 }