Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add autocomplete props to address fields in onboarding and adjust country/state matching (https://github.com/woocommerce/woocommerce-admin/pull/3338) 

* Add autocomplete props to adress fields in onboarding

* Adjust state/country autocomplete logic

* Refactor state and country check
This commit is contained in:
Justin Shreve 2019-12-11 12:10:05 -05:00 committed by GitHub
parent 3301575b60
commit 8b15bb441e
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js
View File

@ -86,21 +86,35 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
useEffect(
() => {
let filteredOptions = [];
const countrySearch = new RegExp( escapeRegExp( autofillCountry ), 'i' );
if ( autofillState.length || autofillCountry.length ) {
const countrySearch = new RegExp(
escapeRegExp( autofillCountry.replace( /\s/g, '' ) ),
'i'
);
filteredOptions = options.filter( option =>
countrySearch.test( option.label.replace( '-', '' ).replace( /\s/g, '' ) )
);
filteredOptions = options.filter( option => countrySearch.test( option.label ) );
}
if ( autofillCountry.length && autofillState.length ) {
const stateSearch = new RegExp( escapeRegExp( autofillState.replace( /\s/g, '' ) ), 'i' );
filteredOptions = filteredOptions.filter( option =>
stateSearch.test( option.label.replace( '-', '' ).replace( /\s/g, '' ) )
);
if ( filteredOptions.length > 1 ) {
let countryKeyOptions = [];
countryKeyOptions = filteredOptions.filter( option => countrySearch.test( option.key ) );
if ( countryKeyOptions.length > 0 ) {
filteredOptions = countryKeyOptions;
}
}
if ( filteredOptions.length > 1 ) {
let stateKeyOptions = [];
stateKeyOptions = filteredOptions.filter( option => stateSearch.test( option.key ) );
if ( 1 === stateKeyOptions.length ) {
filteredOptions = stateKeyOptions;
}
}
}
if ( 1 === filteredOptions.length && countryState !== filteredOptions[ 0 ].key ) {
setValue( 'countryState', filteredOptions[ 0 ].key );
}
@ -117,6 +131,7 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
type="text"
className="woocommerce-select-control__autofill-input"
tabIndex="-1"
autoComplete="country"
/>
<input
@ -126,6 +141,7 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
type="text"
className="woocommerce-select-control__autofill-input"
tabIndex="-1"
autoComplete="address-level1"
/>
</Fragment>
);
@ -146,12 +162,14 @@ export function StoreAddress( props ) {
<TextControl
label={ __( 'Address line 1', 'woocommerce-admin' ) }
required
autoComplete="address-line1"
{ ...getInputProps( 'addressLine1' ) }
/>
<TextControl
label={ __( 'Address line 2 (optional)', 'woocommerce-admin' ) }
required
autoComplete="address-line2"
{ ...getInputProps( 'addressLine2' ) }
/>
@ -173,11 +191,13 @@ export function StoreAddress( props ) {
label={ __( 'City', 'woocommerce-admin' ) }
required
{ ...getInputProps( 'city' ) }
autoComplete="address-level2"
/>
<TextControl
label={ __( 'Post code', 'woocommerce-admin' ) }
required
autoComplete="postal-code"
{ ...getInputProps( 'postCode' ) }
/>
</div>