diff --git a/components/bank/apply/address-input.js b/components/bank/apply/address-input.js index 5834e7c0..dbc68f97 100644 --- a/components/bank/apply/address-input.js +++ b/components/bank/apply/address-input.js @@ -2,10 +2,33 @@ import { useEffect, useRef, useState } from 'react' import { Box, Flex, Input, Text } from 'theme-ui' import FlexCol from '../../flex-col' import AutofillColourFix from './autofill-colour-fix' -import { geocode } from '../../../lib/bank/apply/address-validation' +import { geocode, search } from '../../../lib/bank/apply/address-validation' import Icon from '../../icon' -const approvedCountries = ['US', 'CA', 'MX'] +const approvedCountries = [ + "AT", + "FI", + "FR", + "DE", + "GR", + "ES", + "IT", + "SE", + "TR", + "GB", + "NO", + "UA", + "BR", + "CO", + "US", + "CA", + "MX", + "JP", + "PH", + "MY", + "SG", +]; + export default function AutoComplete({ name, isPersonalAddressInput }) { const input = useRef() @@ -13,25 +36,10 @@ export default function AutoComplete({ name, isPersonalAddressInput }) { const [predictions, setPredictions] = useState(null) const [countryCode, setCountryCode] = useState(null) - const performGeocode = async address => { - if (isPersonalAddressInput) return - geocode(address) - .then(res => { - const country = res?.results[0]?.country - const countryCode = res?.results[0]?.countryCode - - setCountryCode(countryCode) - - sessionStorage.setItem('bank-signup-eventCountry', country) - sessionStorage.setItem('bank-signup-eventCountryCode', countryCode) - }) - .catch(err => console.error(err)) - } - const optionClicked = async prediction => { - input.current.value = prediction.description - performGeocode(prediction.description) - setPredictions(null) + input.current.value = prediction.name + await onInput(prediction.name) + setPredictions(null) } const clickOutside = e => { if (input.current && !input.current.contains(e.target)) { @@ -39,41 +47,42 @@ export default function AutoComplete({ name, isPersonalAddressInput }) { } } + const onInput = async value => { + setPredictions(value ? (await search(value)).results : null); + + if (isPersonalAddressInput) return + geocode(value) + .then(res => { + const country = res?.results[0]?.country + const countryCode = res?.results[0]?.countryCode + + setCountryCode(countryCode) + + sessionStorage.setItem('bank-signup-eventCountry', country) + sessionStorage.setItem('bank-signup-eventCountryCode', countryCode) + }) + .catch(err => console.error(err)); + } + + const onInputWrapper = async e => { + if (e.target.value) await onInput(e.target.value) + } + //TODO: Close suggestions view when focus is lost via tabbing. //TODO: Navigate suggestions with arrow keys. useEffect(() => { const inputEl = input.current - - if (!window.google || !inputEl) return - - const service = new window.google.maps.places.AutocompleteService() - - const onInput = async e => { - if (!e.target.value) { - setPredictions(null) - } else { - service.getPlacePredictions( - { input: e.target.value }, - (predictions, status) => { - setPredictions(predictions) - if (status !== window.google.maps.places.PlacesServiceStatus.OK) { - //DEBUG - setPredictions([]) - } - } - ) - } - } + if (!inputEl) return document.addEventListener('click', clickOutside) - inputEl.addEventListener('input', onInput) - inputEl.addEventListener('focus', onInput) + inputEl.addEventListener('input', onInputWrapper) + inputEl.addEventListener('focus', onInputWrapper) return () => { document.removeEventListener('click', clickOutside) - inputEl.removeEventListener('input', onInput) - inputEl.removeEventListener('focus', onInput) + inputEl.removeEventListener('input', onInputWrapper) + inputEl.removeEventListener('focus', onInputWrapper) } }, []) @@ -87,7 +96,6 @@ export default function AutoComplete({ name, isPersonalAddressInput }) { placeholder="Shelburne, VT" autoComplete="off" sx={{ ...AutofillColourFix }} - onInput={async e => performGeocode(e.target.value)} /> {/* {String(countryCode)} */} @@ -117,7 +125,7 @@ export default function AutoComplete({ name, isPersonalAddressInput }) { )} - {predictions && ( + {predictions && predictions.length > 0 && ( - {prediction.description} + {prediction.name} {idx < predictions.length - 1 && ( diff --git a/lib/bank/apply/address-validation.js b/lib/bank/apply/address-validation.js index 6166f7b3..7ef7027e 100644 --- a/lib/bank/apply/address-validation.js +++ b/lib/bank/apply/address-validation.js @@ -31,7 +31,7 @@ async function getOrRefreshToken() { //TODO: Limit the number of retries export async function search(query) { - if (!query.trim()) return + if (!query || !query.trim()) return const token = await getOrRefreshToken() @@ -57,7 +57,7 @@ export async function search(query) { } export async function geocode(query) { - if (!query.trim()) return + if (!query || !query.trim()) return const token = await getOrRefreshToken()