97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
/**
|
||
* External dependencies
|
||
*/
|
||
import { __ } from '@wordpress/i18n';
|
||
import { Button } from '@wordpress/components';
|
||
import { SelectControl } from '@woocommerce/components';
|
||
import { Icon, chevronDown } from '@wordpress/icons';
|
||
import { useState } from '@wordpress/element';
|
||
|
||
/**
|
||
* Internal dependencies
|
||
*/
|
||
import { CoreProfilerStateMachineContext } from '../index';
|
||
import { BusinessLocationEvent } from '../events';
|
||
import { CountryStateOption } from '../services/country';
|
||
import { Heading } from '../components/heading/heading';
|
||
import { Navigation } from '../components/navigation/navigation';
|
||
export const BusinessLocation = ( {
|
||
sendEvent,
|
||
navigationProgress,
|
||
context,
|
||
}: {
|
||
sendEvent: ( event: BusinessLocationEvent ) => void;
|
||
navigationProgress: number;
|
||
context: Pick< CoreProfilerStateMachineContext, 'countries' >;
|
||
} ) => {
|
||
const [ storeCountry, setStoreCountry ] = useState< CountryStateOption >( {
|
||
key: '',
|
||
label: '',
|
||
} );
|
||
|
||
const inputLabel = __( 'Select country/region', 'woocommerce' );
|
||
|
||
return (
|
||
<div
|
||
className="woocommerce-profiler-business-location"
|
||
data-testid="core-profiler-business-location"
|
||
>
|
||
<Navigation percentage={ navigationProgress } />
|
||
<div className="woocommerce-profiler-page__content woocommerce-profiler-business-location__content">
|
||
<Heading
|
||
className="woocommerce-profiler__stepper-heading"
|
||
title={ __(
|
||
'Where is your business located?',
|
||
'woocommerce'
|
||
) }
|
||
subTitle={ __(
|
||
'We’ll use this information to help you set up payments, shipping, and taxes.',
|
||
'woocommerce'
|
||
) }
|
||
/>
|
||
<SelectControl
|
||
className="woocommerce-profiler-select-control__country"
|
||
instanceId={ 1 }
|
||
placeholder={ inputLabel }
|
||
label={ storeCountry.key === '' ? inputLabel : '' }
|
||
getSearchExpression={ ( query: string ) => {
|
||
return new RegExp(
|
||
'(^' + query + '| — (' + query + '))',
|
||
'i'
|
||
);
|
||
} }
|
||
autoComplete="new-password" // disable autocomplete and autofill
|
||
options={ context.countries }
|
||
excludeSelectedOptions={ false }
|
||
help={ <Icon icon={ chevronDown } /> }
|
||
onChange={ ( results: Array< CountryStateOption > ) => {
|
||
if ( results.length ) {
|
||
setStoreCountry( results[ 0 ] );
|
||
}
|
||
} }
|
||
selected={ storeCountry ? [ storeCountry ] : [] }
|
||
showAllOnFocus
|
||
isSearchable
|
||
/>
|
||
<div className="woocommerce-profiler-button-container woocommerce-profiler-go-to-mystore__button-container">
|
||
<Button
|
||
className="woocommerce-profiler-button"
|
||
variant="primary"
|
||
disabled={ ! storeCountry.key }
|
||
onClick={ () => {
|
||
sendEvent( {
|
||
type: 'BUSINESS_LOCATION_COMPLETED',
|
||
payload: {
|
||
storeLocation: storeCountry.key,
|
||
},
|
||
} );
|
||
} }
|
||
>
|
||
{ __( 'Go to my store', 'woocommerce' ) }
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|