Ott 1633 add address (#541)
* feat: 🎸 ott-1633-add-address address added, fix * feat: 🎸 ott-1633-add-address fields removed * feat: 🎸 ott-1633-add-address home removed * feat: 🎸 ott-1633-add-address fix * feat: 🎸 ott-1633-address fix pr * feat: 🎸 ott-1633-add-address fix prkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
parent
c42818cc63
commit
90fc409557
|
After Width: | Height: | Size: 331 B |
@ -1,7 +1,16 @@ |
||||
export const paymentLexics = { |
||||
add_card: 8313, |
||||
address: 15203, |
||||
billing_address: 15489, |
||||
card_holder_name: 2021, |
||||
city: 15206, |
||||
country: 835, |
||||
error_address_latin_letters: 15758, |
||||
error_can_not_add_card: 14447, |
||||
error_city_latin_letters: 15759, |
||||
error_empty_address: 15755, |
||||
error_empty_city: 15754, |
||||
error_empty_country: 15753, |
||||
error_empty_name: 15290, |
||||
error_payment_unsuccessful: 14446, |
||||
} |
||||
|
||||
@ -0,0 +1,46 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
useMemo, |
||||
} from 'react' |
||||
|
||||
import orderBy from 'lodash/orderBy' |
||||
import map from 'lodash/map' |
||||
|
||||
import type { Countries, Country } from 'requests' |
||||
import { getCountries } from 'requests' |
||||
|
||||
export type SelectedCountry = (Country & { |
||||
name: string, |
||||
}) | null |
||||
|
||||
const useCountriesList = () => { |
||||
const [countries, setCountries] = useState<Countries>([]) |
||||
|
||||
useEffect(() => { |
||||
getCountries().then(setCountries) |
||||
}, []) |
||||
|
||||
return countries |
||||
} |
||||
|
||||
export const useCountries = () => { |
||||
const countries = useCountriesList() |
||||
const [selectedCountry, setSelectedCountry] = useState<SelectedCountry>(null) |
||||
const transformedCountries = useMemo( |
||||
() => orderBy( |
||||
map(countries, (country) => ({ |
||||
...country, |
||||
name: country.name_eng, |
||||
})), |
||||
({ name }) => name, |
||||
), |
||||
[countries], |
||||
) |
||||
|
||||
return { |
||||
countries: transformedCountries, |
||||
selectedCountry, |
||||
setSelectedCountry, |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import size from 'lodash/size' |
||||
|
||||
export const isValidName = (value: string) => (/^[A-Za-z .,'-]{0,500}$/.test(value)) |
||||
|
||||
export const isValidAddress = (value: string) => (/^[A-Za-z0-9 #!.,'-_]{0,500}$/.test(value)) |
||||
|
||||
type fieldsType = { |
||||
address: string, |
||||
city: string, |
||||
country: string, |
||||
name: string, |
||||
} |
||||
|
||||
export const validateFields = (fields: fieldsType) => { |
||||
if (!fields.name) return 'error_empty_name' |
||||
if (!fields.country) return 'error_empty_country' |
||||
if (size(fields.city) < 3) return 'error_empty_city' |
||||
if (size(fields.address) < 10) return 'error_empty_address' |
||||
return false |
||||
} |
||||
@ -1,70 +0,0 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
useMemo, |
||||
} from 'react' |
||||
|
||||
import orderBy from 'lodash/orderBy' |
||||
import find from 'lodash/find' |
||||
import map from 'lodash/map' |
||||
|
||||
import type { Countries, Country } from 'requests' |
||||
import { getCountries } from 'requests' |
||||
|
||||
import { formIds } from 'config/form' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useForm } from 'features/FormStore' |
||||
|
||||
export type SelectedCountry = (Country & { |
||||
name: string, |
||||
}) | null |
||||
|
||||
type Names = 'name_eng' | 'name_rus' |
||||
|
||||
const useCountriesList = () => { |
||||
const [countries, setCountries] = useState<Countries>([]) |
||||
|
||||
useEffect(() => { |
||||
getCountries().then(setCountries) |
||||
}, []) |
||||
|
||||
return countries |
||||
} |
||||
|
||||
export const useCountries = () => { |
||||
const { readFormValue, updateFormValue } = useForm() |
||||
const countries = useCountriesList() |
||||
const { suffix } = useLexicsStore() |
||||
const [selectedCountry, setSelectedCountry] = useState<SelectedCountry>(null) |
||||
const transformedCountries = useMemo( |
||||
() => orderBy( |
||||
map(countries, (country) => { |
||||
const nameField = `name_${suffix}` as Names |
||||
return { |
||||
...country, |
||||
name: country[nameField], |
||||
} |
||||
}), |
||||
({ name }) => name, |
||||
), |
||||
[countries, suffix], |
||||
) |
||||
|
||||
const onCountryBlur = () => { |
||||
updateFormValue(formIds.country)('') |
||||
} |
||||
|
||||
const countryId = readFormValue(formIds.initialCountryId) |
||||
useEffect(() => { |
||||
const initialCountry = find(transformedCountries, { id: Number(countryId) }) |
||||
setSelectedCountry(initialCountry || null) |
||||
}, [transformedCountries, countryId]) |
||||
|
||||
return { |
||||
countries: transformedCountries, |
||||
onCountryBlur, |
||||
selectedCountry, |
||||
setSelectedCountry, |
||||
} |
||||
} |
||||
Loading…
Reference in new issue