From 69f49760a8f27d5a04978c86117bf0f449fbe559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Fri, 14 Feb 2020 13:30:33 +0100
Subject: [PATCH] Create CountyInput component
 (https://github.com/woocommerce/woocommerce-blocks/pull/1727)

* Split CountryInput and Select

* Create County Input

* Show text input when there are no county options

* Reset county value when changing country

* Fix keyboard navigation

* Hide checkmark

* Add reset styles for several popular themes

* Add country prop to ShippingCountyInput
---
 .../components/country-input/country-input.js | 19 ++----
 .../county-input/billing-county-input.js      | 23 +++++++
 .../components/county-input/county-input.js   | 63 +++++++++++++++++++
 .../js/base/components/county-input/index.js  |  3 +
 .../county-input/shipping-county-input.js     | 23 +++++++
 .../js/base/components/input-row/style.scss   |  2 +-
 .../assets/js/base/components/select/index.js | 45 +++++++++++++
 .../{country-input => select}/style.scss      | 12 +++-
 .../js/blocks/cart-checkout/checkout/block.js |  5 +-
 .../assets/js/settings/blocks/constants.js    |  2 +
 .../src/BlockTypes/Checkout.php               |  2 +
 11 files changed, 182 insertions(+), 17 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/county-input/billing-county-input.js
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/county-input/county-input.js
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/county-input/index.js
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/county-input/shipping-county-input.js
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/select/index.js
 rename plugins/woocommerce-blocks/assets/js/base/components/{country-input => select}/style.scss (80%)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js
index d5beb9ee0b2..7038b1648ee 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js
@@ -2,14 +2,12 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { CustomSelectControl } from 'wordpress-components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
+import Select from '../select';
 
 const CountryInput = ( {
 	className,
@@ -24,19 +22,12 @@ const CountryInput = ( {
 	} ) );
 
 	return (
-		<CustomSelectControl
-			className={ classnames( 'wc-block-country-input', className, {
-				'is-active': value,
-			} ) }
+		<Select
+			className={ className }
 			label={ label }
+			onChange={ onChange }
 			options={ options }
-			onChange={ ( { selectedItem } ) => {
-				onChange( selectedItem.key );
-			} }
-			value={ {
-				key: value,
-				name: decodeEntities( countries[ value ] ),
-			} }
+			value={ options.find( ( option ) => option.key === value ) }
 		/>
 	);
 };
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/county-input/billing-county-input.js b/plugins/woocommerce-blocks/assets/js/base/components/county-input/billing-county-input.js
new file mode 100644
index 00000000000..c01a1ca0675
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/county-input/billing-county-input.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { ALLOWED_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const BillingCountyInput = ( props ) => {
+	return <CountyInput counties={ ALLOWED_COUNTIES } { ...props } />;
+};
+
+BillingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default BillingCountyInput;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/county-input/county-input.js b/plugins/woocommerce-blocks/assets/js/base/components/county-input/county-input.js
new file mode 100644
index 00000000000..bf7ca001b12
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/county-input/county-input.js
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import TextInput from '../text-input';
+import Select from '../select';
+
+const CountyInput = ( {
+	className,
+	counties,
+	country,
+	label,
+	onChange,
+	value = '',
+} ) => {
+	const countryCounties = counties[ country ];
+	if ( ! countryCounties || Object.keys( countryCounties ).length === 0 ) {
+		return (
+			<TextInput
+				className={ className }
+				label={ label }
+				onChange={ onChange }
+				value={ value }
+			/>
+		);
+	}
+
+	const options = Object.keys( countryCounties ).map( ( key ) => ( {
+		key,
+		name: decodeEntities( countryCounties[ key ] ),
+	} ) );
+
+	return (
+		<Select
+			className={ className }
+			label={ label }
+			onChange={ onChange }
+			options={ options }
+			value={ options.find( ( option ) => option.key === value ) }
+		/>
+	);
+};
+
+CountyInput.propTypes = {
+	counties: PropTypes.objectOf(
+		PropTypes.oneOfType( [
+			PropTypes.array,
+			PropTypes.objectOf( PropTypes.string ),
+		] )
+	).isRequired,
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	country: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default CountyInput;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/county-input/index.js b/plugins/woocommerce-blocks/assets/js/base/components/county-input/index.js
new file mode 100644
index 00000000000..fbc9d5eb0b3
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/county-input/index.js
@@ -0,0 +1,3 @@
+export { default as CountyInput } from './county-input';
+export { default as BillingCountyInput } from './billing-county-input';
+export { default as ShippingCountyInput } from './shipping-county-input';
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/county-input/shipping-county-input.js b/plugins/woocommerce-blocks/assets/js/base/components/county-input/shipping-county-input.js
new file mode 100644
index 00000000000..40b434ca3c8
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/county-input/shipping-county-input.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { SHIPPING_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const ShippingCountyInput = ( props ) => {
+	return <CountyInput counties={ SHIPPING_COUNTIES } { ...props } />;
+};
+
+ShippingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default ShippingCountyInput;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss
index 56acba8b053..6d1c409c5a2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss
@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	justify-content: space-between;
 
-	> .wc-block-country-input,
+	> .wc-block-select,
 	> .wc-block-text-input {
 		margin-right: $gap-small;
 		flex-basis: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/select/index.js b/plugins/woocommerce-blocks/assets/js/base/components/select/index.js
new file mode 100644
index 00000000000..977daf89a22
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/index.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CustomSelectControl } from 'wordpress-components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Select = ( { className, label, onChange, options, value } ) => {
+	return (
+		<CustomSelectControl
+			className={ classnames( 'wc-block-select', className, {
+				'is-active': value,
+			} ) }
+			label={ label }
+			onChange={ ( { selectedItem } ) => {
+				onChange( selectedItem.key );
+			} }
+			options={ options }
+			value={ value }
+		/>
+	);
+};
+
+Select.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			key: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+		} ).isRequired
+	).isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.shape( {
+		key: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+	} ),
+};
+
+export default Select;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
similarity index 80%
rename from plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss
rename to plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
index 746760b320f..17b84beeeb1 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
@@ -1,4 +1,4 @@
-.wc-block-country-input {
+.wc-block-select {
 	position: relative;
 	margin-top: $gap;
 
@@ -23,17 +23,23 @@
 
 	.components-custom-select-control__button {
 		background-color: #fff;
+		box-shadow: none;
+		color: $input-text-active;
+		font-family: inherit;
 		font-size: 16px;
 		font-weight: normal;
 		height: 100%;
+		letter-spacing: inherit;
 		line-height: 1;
 		padding: $gap-large $gap $gap-smallest;
+		text-transform: none;
 		width: 100%;
 
 		&:hover,
 		&:focus,
 		&:active {
 			background-color: #fff;
+			text-decoration: none;
 		}
 	}
 
@@ -49,4 +55,8 @@
 		margin-left: 0;
 		padding-left: $gap;
 	}
+
+	.components-custom-select-control__item-icon {
+		display: none;
+	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index c641e1b8ca5..9a317eaa46e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
@@ -8,6 +8,7 @@ import CheckoutForm from '@woocommerce/base-components/checkout/form';
 import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
 import TextInput from '@woocommerce/base-components/text-input';
 import { ShippingCountryInput } from '@woocommerce/base-components/country-input';
+import { ShippingCountyInput } from '@woocommerce/base-components/county-input';
 import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
 import InputRow from '@woocommerce/base-components/input-row';
 import { CheckboxControl } from '@wordpress/components';
@@ -171,6 +172,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 								setShippingFields( {
 									...shippingFields,
 									country: newValue,
+									county: '',
 								} )
 							}
 						/>
@@ -189,7 +191,8 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 						/>
 					</InputRow>
 					<InputRow>
-						<TextInput
+						<ShippingCountyInput
+							country={ shippingFields.country }
 							label={ __(
 								'County',
 								'woo-gutenberg-products-block'
diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
index a83160ddbd3..c4fbf492867 100644
--- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
+++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
@@ -35,3 +35,5 @@ export const ATTRIBUTES = getSetting( 'attributes', [] );
 export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
 export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
 export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );
+export const SHIPPING_COUNTIES = getSetting( 'shippingCounties', {} );
+export const ALLOWED_COUNTIES = getSetting( 'allowedCounties', {} );
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
index c1e60df0395..5e98df92103 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
@@ -52,6 +52,8 @@ class Checkout extends AbstractBlock {
 		);
 		$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
 		$data_registry->add( 'shippingCountries', WC()->countries->get_shipping_countries() );
+		$data_registry->add( 'allowedCounties', WC()->countries->get_allowed_country_states() );
+		$data_registry->add( 'shippingCounties', WC()->countries->get_shipping_country_states() );
 		\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
 		return $content;
 	}