Create CountryInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1585)

* Create initial CountryInput component

* Create ShippingCountryInput

* Create BillingCountryInput

* Make backgrounds white

* Correctly align options

* Add CSS resets for 20xy themes

* Fix wrong defaults in countries constants

* Make CountryInput respect 'prefers-reduced-motion'

* Reverse prefers-reduced-motion check

* Set max-width to CountryInput dropdown

* Use decodeEntities to print country names

* Avoid unnecessary JSON enconding and later parsing

* Make sure country name is also encoded when selected

* Fix countries default value

plugins/woocommerce-blocks/assets/js/base/components/country-input/billing-country-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { ALLOWED_COUNTRIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountryInput from './country-input.js';
+
+const BillingCountryInput = ( props ) => {
+	return <CountryInput countries={ ALLOWED_COUNTRIES } { ...props } />;
+};
+
+BillingCountryInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default BillingCountryInput;

plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js

@@ -0,0 +1,52 @@
+/**
+ * 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';
+
+const CountryInput = ( {
+	className,
+	countries,
+	label,
+	onChange,
+	value = '',
+} ) => {
+	const options = Object.keys( countries ).map( ( key ) => ( {
+		key,
+		name: decodeEntities( countries[ key ] ),
+	} ) );
+
+	return (
+		<CustomSelectControl
+			className={ classnames( 'wc-block-country-input', className, {
+				'is-active': value,
+			} ) }
+			label={ label }
+			options={ options }
+			onChange={ ( { selectedItem } ) => {
+				onChange( selectedItem.key );
+			} }
+			value={ {
+				key: value,
+				name: decodeEntities( countries[ value ] ),
+			} }
+		/>
+	);
+};
+
+CountryInput.propTypes = {
+	countries: PropTypes.objectOf( PropTypes.string ).isRequired,
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default CountryInput;

plugins/woocommerce-blocks/assets/js/base/components/country-input/index.js

@@ -0,0 +1,3 @@
+export { default as CountryInput } from './country-input';
+export { default as BillingCountryInput } from './billing-country-input';
+export { default as ShippingCountryInput } from './shipping-country-input';

plugins/woocommerce-blocks/assets/js/base/components/country-input/shipping-country-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { SHIPPING_COUNTRIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountryInput from './country-input.js';
+
+const ShippingCountryInput = ( props ) => {
+	return <CountryInput countries={ SHIPPING_COUNTRIES } { ...props } />;
+};
+
+ShippingCountryInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default ShippingCountryInput;

plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss

@@ -0,0 +1,52 @@
+.wc-block-country-input {
+	position: relative;
+	margin-top: $gap;
+
+	label {
+		position: absolute;
+		transform: translateX(#{$gap}) translateY(#{$gap-small});
+		transform-origin: top left;
+		transition: all 200ms ease;
+		font-size: 16px;
+		line-height: 22px;
+		color: $gray-50;
+		z-index: 1;
+
+		@media screen and (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
+	&.is-active label {
+		transform: translateX(#{$gap}) translateY(#{$gap-smallest}) scale(0.75);
+	}
+
+	.components-custom-select-control__button {
+		background-color: #fff;
+		font-size: 16px;
+		font-weight: normal;
+		height: 100%;
+		line-height: 1;
+		padding: $gap-large $gap $gap-smallest;
+		width: 100%;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: #fff;
+		}
+	}
+
+	.components-custom-select-control__menu {
+		background-color: #fff;
+		margin: 0;
+		max-height: 300px;
+		overflow: auto;
+	}
+
+	.components-custom-select-control__item {
+		font-size: 16px;
+		margin-left: 0;
+		padding-left: $gap;
+	}
+}

plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss

@@ -3,8 +3,10 @@
 	flex-wrap: wrap;
 	justify-content: space-between;
 
-	& > .wc-block-text-input {
+	> .wc-block-country-input,
+	> .wc-block-text-input {
 		margin-right: $gap-small;
+		flex-basis: 0;
 		flex-grow: 1;
 		margin-top: $gap;
 		&:last-child {

plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss

@@ -21,6 +21,7 @@
 .wc-block-text-input input[type="url"],
 .wc-block-text-input input[type="text"],
 .wc-block-text-input input[type="email"] {
+	background-color: #fff;
 	padding: $gap-small $gap;
 	border-radius: 4px;
 	border: 1px solid $input-border-gray;
@@ -32,6 +33,10 @@
 	box-sizing: border-box;
 	height: 48px;
 	color: $input-text-active;
+
+	&:focus {
+		background-color: #fff;
+	}
 }
 .wc-block-text-input.is-active input[type="tel"],
 .wc-block-text-input.is-active input[type="url"],

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -7,6 +7,7 @@ import FormStep from '@woocommerce/base-components/checkout/form-step';
 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 RadioControl from '@woocommerce/base-components/radio-control';
 import InputRow from '@woocommerce/base-components/input-row';
 import { CheckboxControl } from '@wordpress/components';
@@ -179,7 +180,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 								}
 							/>
 							<InputRow>
-								<TextInput
+								<ShippingCountryInput
 									label={ __(
 										'Country',
 										'woo-gutenberg-products-block'

plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js

@@ -33,3 +33,5 @@ export const DISPLAY_PRICES_INCLUDING_TAXES = getSetting(
 export const PRODUCT_COUNT = getSetting( 'productCount', 0 );
 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', {} );

plugins/woocommerce-blocks/bin/webpack-helpers.js

@@ -125,6 +125,8 @@ const mainEntry = {
 	'block-error-boundary':
 		'./assets/js/base/components/block-error-boundary/style.scss',
 	'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
+	'custom-select-control-style':
+		'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
 
 	// cart & checkout blocks
 	cart: './assets/js/blocks/cart-checkout/cart/index.js',

plugins/woocommerce-blocks/package.json

@@ -109,16 +109,17 @@
 		"npm": "6.13.4"
 	},
 	"dependencies": {
-		"@wordpress/components": "8.5.0",
-		"wordpress-components": "npm:@wordpress/components@8.5.0",
 		"@woocommerce/components": "4.0.0",
+		"@wordpress/components": "8.5.0",
+		"@wordpress/html-entities": "^2.5.0",
 		"compare-versions": "3.5.1",
 		"downshift": "4.0.5",
 		"eslint-plugin-woocommerce": "file:bin/eslint-plugin-woocommerce",
 		"gridicons": "3.3.1",
 		"react-number-format": "4.3.1",
 		"trim-html": "0.1.9",
-		"use-debounce": "3.3.0"
+		"use-debounce": "3.3.0",
+		"wordpress-components": "npm:@wordpress/components@8.5.0"
 	},
 	"husky": {
 		"hooks": {

plugins/woocommerce-blocks/src/Assets.php

@@ -126,6 +126,8 @@ class Assets {
 				'productCount'                => array_sum( (array) $product_counts ),
 				'attributes'                  => array_values( wc_get_attribute_taxonomies() ),
 				'wcBlocksAssetUrl'            => plugins_url( 'assets/', __DIR__ ),
+				'shippingCountries'           => WC()->countries->get_shipping_countries(),
+				'allowedCountries'            => WC()->countries->get_allowed_countries(),
 				'restApiRoutes'               => [
 					'/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ),
 				],