Display EU customs specificity requirement in Create shipping label modal (#2633)

* Display EU customs specificity requirement in Create shipping label modal
* Display warnings when customs item descriptions are too short

Author: Wacław Jacek

client/extensions/woocommerce/woocommerce-services/state/shipping-label/selectors.js

@@ -418,8 +418,8 @@ export const getCustomsErrors = (
 
 		items: mapValues( pick( customs.items, usedProductIds ), ( itemData, productId ) => {
 			const itemErrors = {};
-			if ( ! itemData.description ) {
-				itemErrors.description = translate( 'This field is required' );
+			if ( ! itemData.description || itemData.description.length < 3 ) {
+				itemErrors.description = translate( 'You must provide a clear, specific description for every item.' );
 			}
 			if ( ! customs.ignoreWeightValidation[ productId ] ) {
 				if ( isNil( itemData.weight ) || '' === itemData.weight ) {

client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/customs-step/index.js

@@ -26,16 +26,29 @@ import StepConfirmationButton from '../step-confirmation-button';
 import getPackageDescriptions from '../packages-step/get-package-descriptions';
 import { getAllPackageDefinitions } from 'woocommerce/woocommerce-services/state/packages/selectors';
 
+const customsSummary = ( errors, translate ) => {
+	if ( ! hasNonEmptyLeaves( errors ) ) {
+		return translate( 'Customs information valid' );
+	}
+
+	const areAllErrorsDescriptionSpecificityErrors = errors.items && Object.values( errors.items ).every( ( item ) => {
+		return 1 === Object.keys( item ).length && item.description;
+	} );
+
+	if ( areAllErrorsDescriptionSpecificityErrors ) {
+		return translate( 'Descriptions are incomplete' );
+	}
+
+	return translate( 'Customs information incomplete' );
+};
+
 const CustomsStep = props => {
 	const { siteId, orderId, errors, expanded, translate, isSubmitted, packageDescriptions } = props;
-	const summary = hasNonEmptyLeaves( errors )
-		? translate( 'Customs information incomplete' )
-		: translate( 'Customs information valid' );
 
 	return (
 		<StepContainer
 			title={ translate( 'Customs' ) }
-			summary={ isSubmitted ? summary : '' }
+			summary={ isSubmitted ? customsSummary( errors, translate ) : '' }
 			expanded={ expanded }
 			toggleStep={ props.toggleStep }
 			isSuccess={ isSubmitted && ! hasNonEmptyLeaves( errors ) }

client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/customs-step/item-row-header.js

@@ -5,14 +5,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { ExternalLink, Tooltip } from '@wordpress/components';
+import { Button, ExternalLink, Popover, Tooltip } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { getShippingLabel } from 'woocommerce/woocommerce-services/state/shipping-label/selectors';
 import Gridicon from "gridicons";
 
+const EUCustomsSpecificityRequirementPopover = localize( ( { togglePopoverVisible, translate } ) => (
+	<Popover onFocusOutside={ togglePopoverVisible }>
+		<p>
+			{ translate( 'When shipping to countries that follow European Union (EU) customs rules, you must provide a clear, specific description on every item.' ) }
+		</p>
+		<p>
+			{ translate( 'For example, if you are sending clothing, you must indicate what type of clothing (e.g. men\'s shirts, girl\'s vest, boy\'s jacket) for the description to be acceptable.' ) }
+		</p>
+		<p>
+			{ translate( 'Otherwise, shipments may be delayed or interrupted at customs.' ) }
+		</p>
+		<p>
+			<ExternalLink
+				href="https://www.usps.com/international/new-eu-customs-rules.htm"
+			>
+				{ translate( 'Learn more about customs rules' ) }
+			</ExternalLink>
+		</p>
+	</Popover>
+) );
+
+export const DescriptionTitle = localize( ( { translate } ) => {
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	const togglePopoverVisible = () => {
+		setIsPopoverVisible( ( state ) => ! state );
+	};
+
+	return <span>
+		{ translate( 'Description' ) }
+		<Button onClick={ togglePopoverVisible }>
+			<span>
+				<Gridicon icon="info-outline" size={ 18 } />
+			</span>
+		</Button>
+		<span className="popover-container">
+			{ isPopoverVisible && <EUCustomsSpecificityRequirementPopover togglePopoverVisible={ togglePopoverVisible } /> }
+		</span>
+	</span>;
+} );
+
 export const TariffCodeTitle = localize( ( { translate } ) => (
 	<span>
 		{ translate( 'HS Tariff number' ) } (
@@ -25,20 +67,31 @@ export const TariffCodeTitle = localize( ( { translate } ) => (
 	</span>
 ) );
 
-export const OriginCountryTitle = localize( ( { translate } ) => (
-	<span>
+export const OriginCountryTitle = localize( ( { translate } ) => {
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	const togglePopoverVisible = () => {
+		setIsPopoverVisible( ( state ) => ! state );
+	};
+
+	return <span>
 		{ translate( 'Origin country' ) }
-		<Tooltip text={ translate( 'Country where the product was manufactured or assembled' ) }>
-			<span>
-				<Gridicon icon="info-outline" size={ 18 } />
+		<Button onClick={ togglePopoverVisible }>
+				<span>
+					<Gridicon icon="info-outline" size={ 18 } />
+				</span>
+			</Button>
+			<span className="popover-container">
+				{ isPopoverVisible && <Popover onFocusOutside={ togglePopoverVisible }>
+					<p>{ translate( 'Country where the product was manufactured or assembled.' ) }</p>
+				</Popover> }
 			</span>
-		</Tooltip>
-	</span>
-) );
+		</span>;
+} );
 
 const ItemRowHeader = ( { translate, weightUnit } ) => (
 	<div className="customs-step__item-rows-header">
-		<span className="customs-step__item-description-column">{ translate( 'Description' ) }</span>
+		<div className="customs-step__item-description-column"><DescriptionTitle /></div>
 		<span className="customs-step__item-code-column">{ <TariffCodeTitle /> }</span>
 		<span className="customs-step__item-weight-column">
 			{ translate( 'Weight (%s per unit)', { args: [ weightUnit ] } ) }

client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/customs-step/item-row.js

@@ -26,7 +26,7 @@ import { getAllCountryNames } from 'woocommerce/state/sites/data/locations/selec
 import Dropdown from 'woocommerce/woocommerce-services/components/dropdown';
 import WeightField from 'woocommerce/woocommerce-services/components/weight-field';
 import PriceField from 'woocommerce/woocommerce-services/components/price-field';
-import { TariffCodeTitle, OriginCountryTitle } from './item-row-header';
+import { TariffCodeTitle, OriginCountryTitle, DescriptionTitle } from './item-row-header';
 
 const ItemRow = props => {
 	const {
@@ -49,7 +49,7 @@ const ItemRow = props => {
 			<TextField
 				id={ packageId + '_' + productId + '_description' }
 				className="customs-step__item-description-column"
-				title={ translate( 'Description' ) }
+				title={ <DescriptionTitle /> }
 				value={ description }
 				placeholder={ defaultDescription }
 				updateValue={ props.setCustomsItemDescription }

client/extensions/woocommerce/woocommerce-services/views/shipping-label/label-purchase-modal/customs-step/style.scss

@@ -92,6 +92,30 @@
 	@include breakpoint( '>960px' ) {
 		margin-left: 4px;
 	}
+
+	.components-button {
+		height: 17px;
+		margin-bottom: 8px;
+
+		span {
+			margin-bottom: 0;
+		}
+	}
+
+	.popover-container {
+		position: relative;
+		z-index: 100;
+	}
+
+	.components-popover {
+		position: absolute;
+		width: 280px;
+
+		.components-popover__content {
+			padding: 20px;
+			width: 100%;
+		}
+	}
 }
 
 .customs-step__item-weight-column,