Skip to content

Commit

Permalink
🚧 check gurb's 2km limit
Browse files Browse the repository at this point in the history 
* ask backend 2km validation
* ask google api address coordinates
* use of location input component

Co-authored-by: Joana Figueira <[email protected]>
  • Loading branch information
@marta197 @JoanaFigueira
marta197 and JoanaFigueira committed Oct 31, 2024
1 parent 509e3fa commit b26495f
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 69 deletions.
4 changes: 3 additions & 1 deletion src/containers/Gurb.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ const Gurb = (props) => {
number: undefined,
postal_code: undefined,
state: undefined,
city: undefined
city: undefined,
lat: undefined,
long: undefined
},
has_selfconsumption: undefined,
has_member: undefined
Expand Down
4 changes: 2 additions & 2 deletions src/containers/Gurb/SupplyPoint.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ const SupplyPoint = (props) => {

const handleGurbData = async () => {
// TODO: gurb id from where?
const gurbId = 1
const gurbId = 3
await getGurbData(gurbId)
.then(({ data }) => {
setGurbData({
name: data?.name,
state: data?.state,
completedPercentage: data?.assigned_betas_percentage
completedPercentage: data?.completed_percentage
})
})
.catch((error) => {
Expand Down
137 changes: 80 additions & 57 deletions src/containers/Gurb/pages/Requirements/Address.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
// import { useEffect, useState } from 'react'
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 { getMunicipisByPostalCode } from '../../../../services/api'
import LocationInput from '../../../../components/AddressAutocompletedField'
import { setMunicipisWithPostalCode } from '../../../../services/utils'
import { checkGurbDistance } from '../../../../services/apiGurb'
import GurbErrorContext from '../../../../context/GurbErrorContext'

const Address = (props) => {
const { t } = useTranslation()
const { values, errors, touched, setFieldValue, setFieldTouched } = props
// const [addressValue, setAddressValue] = useState(undefined)
const { setError, setErrorInfo } = useContext(GurbErrorContext)
const [addressValue, setAddressValue] = useState('')

const handleInputAddress = (event) => {
setFieldValue('address.street', event.target.value)
Expand All @@ -20,74 +22,95 @@ const Address = (props) => {
setFieldTouched('address.street', true)
}

// useEffect(() => {
// const setMunicipisWithPostalCode = async (postalCode) => {
// const municipis = await getMunicipisByPostalCode(postalCode)
// if (municipis?.length > 0) {
// setFieldValue('address.state', municipis[0][0]?.provincia)
// setFieldValue('address.city', municipis[0][0]?.municipi)
// }
// }
useEffect(() => {
const postalCode = values.address.postal_code
if (postalCode?.length > 4) {
setMunicipisWithPostalCode(
postalCode,
'address.state',
'address.city',
setFieldValue
)
}
}, [values.address.postal_code])

// const postalCode = values.address.postal_code
// if (postalCode?.length > 4 && values?.supply_point?.city?.id === '') {
// setMunicipisWithPostalCode(postalCode)
// }
// }, [values.address.postal_code])
const handleCheckGurbDistance = async () => {
// TODO: gurb id from where?
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()
}
})
}
})
.catch((error) => {
// TODO: handle errors
console.log('ERROR:', error)
})
}

// const handleAddressChange = (value) => {
// setAddressValue(value)
// }
useEffect(() => {
if (values.address.lat !== undefined && values.address.long !== undefined) {
handleCheckGurbDistance()
}
}, [values.address.lat, values.address.long])

// const handleLocationSelected = (selection) => {
// if (selection === null) {
// setFieldValue('address.address', '')
// setFieldValue('address.postal_code', '')
// setFieldValue('address.number', '')
// setFieldValue('address.lat', '')
// setFieldValue('address.long', '')
// setFieldValue('address.state', { id: '', name: '' })
// setFieldValue('address.city', { id: '', name: '' })
// } else {
// const address = Object.assign(
// {},
// ...selection.address_components.map((x) => ({
// [x.types[0]]: x.long_name
// }))
// )
// setFieldValue('address', {
// street: address?.route,
// number: address?.street_number,
// lat: selection?.geometry?.location?.lat(),
// lng: selection?.geometry?.location?.lng(),
// postal_code: address?.postal_code
// // state: undefined,
// // city: undefined
// })
// setFieldValue('supply_point.address', address?.route)
// setFieldValue('supply_point.postal_code', address?.postal_code)
// setFieldValue('supply_point.number', address?.street_number || '')
// if (address?.street_number) {
// setFieldValue('supply_point.lat', selection?.geometry?.location?.lat())
// setFieldValue('supply_point.long', selection?.geometry?.location?.lng())
// }
// }
// }
const handleAddressChange = (value) => {
setAddressValue(value)
}

const initializeAddress = () => {
setFieldValue('address.street', '')
setFieldValue('address.number', '')
setFieldValue('address.lat', '')
setFieldValue('address.long', '')
setFieldValue('address.postal_code', '')
setFieldValue('address.state', { id: '', name: '' })
setFieldValue('address.city', { id: '', name: '' })
}

const handleLocationSelected = (selection) => {
if (selection === null) {
initializeAddress()
} else {
const address = Object.assign(
{},
...selection.address_components.map((x) => ({
[x.types[0]]: x.long_name
}))
)
setFieldValue('address', {
street: address?.route,
number: address?.street_number || '',
lat: selection?.geometry?.location?.lat(),
long: selection?.geometry?.location?.lng(),
postal_code: address?.postal_code
})
}
}
return (
<>
<TextRecomendation
title={t('GURB_ADDRESS_TITLE')}
text={t('GURB_ADDRESS_TITLE_HELPER')}
/>
&nbsp;
{/* <LocationInput
<LocationInput
id="address-street"
name="address.street"
value={addressValue}
onChange={handleAddressChange}
onLocationSelected={handleLocationSelected}
/> */}
/>
<InputField
textFieldLabel={t('GURB_ADDRESS_LABEL')}
textFieldName={t('GURB_ADDRESS_FIELD')}
Expand Down
16 changes: 8 additions & 8 deletions src/services/apiGurb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@ export const getGurbData = async (gurbId) => {
// })
// }

// export const checkGurbDistance = async (gurbId, localization) => {
// return axios({
// method: 'GET',
// url: `${WEBFORMS_API_URL}/gurb/${gurbId}?localization=${localization}`,
// }).then((response) => {
// return response?.data
// })
// }
export const checkGurbDistance = async (gurbId, lat, long) => {
return axios({
method: 'GET',
url: `${WEBFORMS_API_URL}/check/gurb/${gurbId}?lat=${lat}&long=${long}`,
}).then((response) => {
return response?.data
})
}

// // CUPS from Som?
// export const checkGurbCups = async (data, token) => {
Expand Down
9 changes: 8 additions & 1 deletion src/services/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getRates } from '../services/api'
import { getMunicipisByPostalCode, getRates } from '../services/api'
import dayjs from 'dayjs'
import isoWeek from "dayjs/plugin/isoWeek";

Expand Down Expand Up @@ -592,3 +592,10 @@ export const checkCAUWhileTyping = (value, t, matchingCups) => {
return {value, valid: true}
}

export const setMunicipisWithPostalCode = async (postalCode, stateName, cityName, setFieldValue) => {
const municipis = await getMunicipisByPostalCode(postalCode)
if (municipis?.length > 0) {
setFieldValue(stateName, municipis[0][0]?.provincia)
setFieldValue(cityName, municipis[0][0]?.municipi)
}
}

0 comments on commit b26495f

Please sign in to comment.