Store: Use store’s address as default values for state & country in …

…address component (#19710) * Store: Use store’s address as default values for state & country in address components. Fixes #18902 * Update the orders create page to demo the address component
Automattic · Nov 15, 2017 · 54f7fc5 · 54f7fc5
1 parent 80d182c
commit 54f7fc5
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 20 deletions.
diff --git a/client/extensions/woocommerce/app/order/order-create/customer-card.js b/client/extensions/woocommerce/app/order/order-create/customer-card.js
@@ -165,6 +165,7 @@ class OrderCustomerCard extends Component {
 				</div>
 				<AddressView
 					isEditable
+					showAllLocations
 					onChange={ this.onAddressChange( 'shipping' ) }
 					address={ this.getAddressViewFormat( get( order, [ 'shipping' ], {} ) ) }
 				/>
@@ -221,6 +222,7 @@ class OrderCustomerCard extends Component {
 					</div>
 					<AddressView
 						isEditable
+						showAllLocations
 						onChange={ this.onAddressChange( 'billing' ) }
 						address={ this.getAddressViewFormat( get( order, [ 'billing' ], {} ) ) }
 					/>

diff --git a/client/extensions/woocommerce/components/form-location-select/countries.js b/client/extensions/woocommerce/components/form-location-select/countries.js
@@ -18,8 +18,13 @@ import {
 	getContinents,
 	getCountries,
 } from 'woocommerce/state/sites/locations/selectors';
+import {
+	areSettingsGeneralLoaded,
+	getStoreLocation,
+} from 'woocommerce/state/sites/settings/general/selectors';
 import { decodeEntities } from 'lib/formatting';
 import { fetchLocations } from 'woocommerce/state/sites/locations/actions';
+import { fetchSettingsGeneral } from 'woocommerce/state/sites/settings/general/actions';
 import FormLabel from 'components/forms/form-label';
 import FormSelect from 'components/forms/form-select';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
@@ -41,18 +46,26 @@ class FormCountrySelectFromApi extends Component {
 	};
 
 	componentWillMount() {
-		const { siteId, isLoaded } = this.props;
+		this.fetchData( this.props );
+	}
 
-		if ( siteId && ! isLoaded ) {
-			this.props.fetchLocations( siteId );
+	componentWillReceiveProps( newProps ) {
+		if ( newProps.siteId !== this.props.siteId ) {
+			this.fetchData( newProps );
 		}
 	}
 
-	componentWillReceiveProps( { siteId } ) {
-		if ( siteId !== this.props.siteId ) {
+	fetchData = ( { siteId, isLoaded, areSettingsLoaded } ) => {
+		if ( ! siteId ) {
+			return;
+		}
+		if ( ! isLoaded ) {
 			this.props.fetchLocations( siteId );
 		}
-	}
+		if ( ! areSettingsLoaded ) {
+			this.props.fetchSettingsGeneral( siteId );
+		}
+	};
 
 	renderOption = option => {
 		return (
@@ -80,9 +93,13 @@ class FormCountrySelectFromApi extends Component {
 }
 
 export default connect(
-	state => {
+	( state, props ) => {
 		const site = getSelectedSiteWithFallback( state );
 		const siteId = site.ID || null;
+		const address = getStoreLocation( state );
+		const areSettingsLoaded = areSettingsGeneralLoaded( state );
+		const value = ! props.value ? address.country : props.value;
+
 		const locationsList = [];
 		const isLoaded = areLocationsLoaded( state, siteId );
 		const continents = getContinents( state, siteId );
@@ -97,10 +114,12 @@ export default connect(
 		} );
 
 		return {
-			siteId,
-			locationsList: sortPopularCountriesToTop( locationsList ),
+			areSettingsLoaded,
 			isLoaded,
+			locationsList: sortPopularCountriesToTop( locationsList ),
+			siteId,
+			value,
 		};
 	},
-	dispatch => bindActionCreators( { fetchLocations }, dispatch )
+	dispatch => bindActionCreators( { fetchLocations, fetchSettingsGeneral }, dispatch )
 )( localize( FormCountrySelectFromApi ) );
diff --git a/client/extensions/woocommerce/components/form-location-select/states.js b/client/extensions/woocommerce/components/form-location-select/states.js
@@ -14,8 +14,13 @@ import { bindActionCreators } from 'redux';
  * Internal dependencies
  */
 import { areLocationsLoaded, getStates } from 'woocommerce/state/sites/locations/selectors';
+import {
+	areSettingsGeneralLoaded,
+	getStoreLocation,
+} from 'woocommerce/state/sites/settings/general/selectors';
 import { decodeEntities } from 'lib/formatting';
 import { fetchLocations } from 'woocommerce/state/sites/locations/actions';
+import { fetchSettingsGeneral } from 'woocommerce/state/sites/settings/general/actions';
 import FormLabel from 'components/forms/form-label';
 import FormSelect from 'components/forms/form-select';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
@@ -37,18 +42,26 @@ class FormStateSelectFromApi extends Component {
 	};
 
 	componentWillMount() {
-		const { siteId, isLoaded } = this.props;
+		this.fetchData( this.props );
+	}
 
-		if ( siteId && ! isLoaded ) {
-			this.props.fetchLocations( siteId );
+	componentWillReceiveProps( newProps ) {
+		if ( newProps.siteId !== this.props.siteId ) {
+			this.fetchData( newProps );
 		}
 	}
 
-	componentWillReceiveProps( { siteId } ) {
-		if ( siteId !== this.props.siteId ) {
+	fetchData = ( { siteId, isLoaded, areSettingsLoaded } ) => {
+		if ( ! siteId ) {
+			return;
+		}
+		if ( ! isLoaded ) {
 			this.props.fetchLocations( siteId );
 		}
-	}
+		if ( ! areSettingsLoaded ) {
+			this.props.fetchSettingsGeneral( siteId );
+		}
+	};
 
 	renderOption = option => {
 		return (
@@ -98,17 +111,25 @@ class FormStateSelectFromApi extends Component {
 
 export default connect(
 	( state, props ) => {
-		const { country } = props;
+		const address = getStoreLocation( state );
+		const areSettingsLoaded = areSettingsGeneralLoaded( state );
+		let { country, value } = props;
+		// If value or country are empty, use the store's address
+		country = ! country ? address.country : country;
+		value = ! value ? address.state : value;
+
 		const site = getSelectedSiteWithFallback( state );
 		const siteId = site.ID || null;
 		const isLoaded = areLocationsLoaded( state, siteId );
 		const locationsList = getStates( state, country, siteId );
 
 		return {
-			siteId,
-			locationsList,
+			areSettingsLoaded,
 			isLoaded,
+			locationsList,
+			siteId,
+			value,
 		};
 	},
-	dispatch => bindActionCreators( { fetchLocations }, dispatch )
+	dispatch => bindActionCreators( { fetchLocations, fetchSettingsGeneral }, dispatch )
 )( localize( FormStateSelectFromApi ) );