Move error messages to <ApiErrorPlaceholder>

assets/js/blocks/featured-product/block.js

@@ -194,13 +194,17 @@ class FeaturedProduct extends Component {
 
 	renderApiError() {
 		const { error, debouncedGetProduct, isLoading } = this.props;
+		const { productId } = this.props.attributes;
+		const onRetry = () => {
+			debouncedGetProduct( productId );
+		};
 
 		return (
 			<ApiErrorPlaceholder
 				className="wc-block-featured-product-error"
-				errorMessage={ error.message }
+				error={ error }
 				isLoading={ isLoading }
-				onRetry={ debouncedGetProduct }
+				onRetry={ onRetry }
 			/>
 		);
 	}

assets/js/components/api-error-placeholder/index.js

@@ -6,19 +6,40 @@ import { Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import Gridicon from 'gridicons';
 import classNames from 'classnames';
+import { escapeHTML } from '@wordpress/escape-html';
 import {
 	Button,
 	Placeholder,
 	Spinner,
 } from '@wordpress/components';
 
-const ApiErrorPlaceholder = ( { className, errorMessage, isLoading, onRetry } ) => (
+const getErrorMessage = ( { apiMessage, message } ) => {
+	if ( message ) {
+		return message;
+	}
+
+	if ( apiMessage ) {
+		return (
+			<span>
+				{ __( 'The following error was returned from the API', 'woo-gutenberg-products-block' ) }
+				<br />
+				<code>{ escapeHTML( apiMessage ) }</code>
+			</span>
+		);
+	}
+
+	return __( 'An unknown error occurred which prevented the block from being updated.', 'woo-gutenberg-products-block' );
+};
+
+const ApiErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
 	<Placeholder
 		icon={ <Gridicon icon="notice" /> }
 		label={ __( 'Sorry, an error occurred', 'woo-gutenberg-products-block' ) }
 		className={ classNames( 'wc-block-api-error', className ) }
 	>
-		<div className="wc-block-error__message">{ errorMessage }</div>
+		<div className="wc-block-error__message">
+			{ getErrorMessage( error ) }
+		</div>
 		{ onRetry && (
 			<Fragment>
 				{ isLoading ? (
@@ -43,9 +64,18 @@ ApiErrorPlaceholder.propTypes = {
 	 */
 	className: PropTypes.string,
 	/**
-	 * The error message to display from the API.
+	 * The error object.
 	 */
-	errorMessage: PropTypes.node,
+	error: PropTypes.shape( {
+		/**
+		 * API error message to display in case of a missing `message`.
+		 */
+		apiMessage: PropTypes.node,
+		/**
+		 * Human-readable error message to display.
+		 */
+		message: PropTypes.string,
+	} ),
 	/**
 	 * Whether there is a request running, so the 'Retry' button is hidden and
 	 * a spinner is shown instead.

assets/js/utils/with-get-product.js

@@ -1,12 +1,10 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Component } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { debounce, isObject } from 'lodash';
-import { escapeHTML } from '@wordpress/escape-html';
 
 const withGetProduct = createHigherOrderComponent(
 	( OriginalComponent ) => {
@@ -41,19 +39,13 @@ const withGetProduct = createHigherOrderComponent(
 						this.setState( { product, loading: false, error: false } );
 					} )
 					.catch( ( apiError ) => {
-						const error = {};
-
-						if ( isObject( apiError ) ) {
-							error.message = (
-								<span>
-									{ __( 'The following error was returned from the API', 'woo-gutenberg-products-block' ) }
-									<br />
-									<code>{ escapeHTML( apiError.message ) }</code>
-								</span>
-							);
-						} else {
-							error.message = __( 'An unknown error occurred which prevented the block from being updated.', 'woo-gutenberg-products-block' );
-						}
+						const error = isObject( apiError ) ? {
+							apiMessage: apiError.message,
+						} : {
+							// If we can't get any message from the API, set it to null and
+							// let <ApiErrorPlaceholder /> handle the message to display.
+							apiMessage: null,
+						};
 
 						this.setState( { product: false, loading: false, error } );
 					} );