initial commit

packages/woocommerce-blocks/assets/js/editor-components/error-placeholder/editor.scss

@@ -0,0 +1,18 @@
+.wc-block-error-message {
+	margin-bottom: 16px;
+	margin-top: 8px;
+}
+
+.wc-block-api-error {
+	.components-placeholder__fieldset {
+		display: block;
+	}
+
+	.wc-block-error-message {
+		margin-top: 0;
+	}
+
+	.components-spinner {
+		float: none;
+	}
+}

packages/woocommerce-blocks/assets/js/editor-components/error-placeholder/error-message.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import { escapeHTML } from '@wordpress/escape-html';
+
+const getErrorMessage = ( { message, type } ) => {
+	if ( ! message ) {
+		return __(
+			'An unknown error occurred which prevented the block from being updated.',
+			'woocommerce'
+		);
+	}
+
+	if ( type === 'general' ) {
+		return (
+			<span>
+				{ __(
+					'The following error was returned',
+					'woocommerce'
+				) }
+				<br />
+				<code>{ escapeHTML( message ) }</code>
+			</span>
+		);
+	}
+
+	if ( type === 'api' ) {
+		return (
+			<span>
+				{ __(
+					'The following error was returned from the API',
+					'woocommerce'
+				) }
+				<br />
+				<code>{ escapeHTML( message ) }</code>
+			</span>
+		);
+	}
+
+	return message;
+};
+
+const ErrorMessage = ( { error } ) => (
+	<div className="wc-block-error-message">{ getErrorMessage( error ) }</div>
+);
+
+ErrorMessage.propTypes = {
+	/**
+	 * The error object.
+	 */
+	error: PropTypes.shape( {
+		/**
+		 * Human-readable error message to display.
+		 */
+		message: PropTypes.node,
+		/**
+		 * Context in which the error was triggered. That will determine how the error is displayed to the user.
+		 */
+		type: PropTypes.oneOf( [ 'api', 'general' ] ),
+	} ),
+};
+
+export default ErrorMessage;

packages/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import { Icon, notice } from '@woocommerce/icons';
+import classNames from 'classnames';
+import { Button, Placeholder, Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ErrorMessage from './error-message.js';
+import './editor.scss';
+
+const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
+	<Placeholder
+		icon={ <Icon srcElement={ notice } /> }
+		label={ __(
+			'Sorry, an error occurred',
+			'woocommerce'
+		) }
+		className={ classNames( 'wc-block-api-error', className ) }
+	>
+		<ErrorMessage error={ error } />
+		{ onRetry && (
+			<>
+				{ isLoading ? (
+					<Spinner />
+				) : (
+					<Button isSecondary onClick={ onRetry }>
+						{ __( 'Retry', 'woocommerce' ) }
+					</Button>
+				) }
+			</>
+		) }
+	</Placeholder>
+);
+
+ErrorPlaceholder.propTypes = {
+	/**
+	 * Classname to add to placeholder in addition to the defaults.
+	 */
+	className: PropTypes.string,
+	/**
+	 * The error object.
+	 */
+	error: PropTypes.shape( {
+		/**
+		 * Human-readable error message to display.
+		 */
+		message: PropTypes.node,
+		/**
+		 * Context in which the error was triggered. That will determine how the error is displayed to the user.
+		 */
+		type: PropTypes.oneOf( [ 'api', 'general' ] ),
+	} ),
+	/**
+	 * Whether there is a request running, so the 'Retry' button is hidden and
+	 * a spinner is shown instead.
+	 */
+	isLoading: PropTypes.bool,
+	/**
+	 * Callback to retry an action.
+	 */
+	onRetry: PropTypes.func,
+};
+
+export default ErrorPlaceholder;

packages/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/index.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import ErrorPlaceholder from '../';
+
+export default {
+	title: 'WooCommerce Blocks/editor-components/ErrorPlaceholder',
+	component: ErrorPlaceholder,
+};
+
+export const Default = () => (
+	<ErrorPlaceholder
+		error={ {
+			message:
+				'Unfortunately, we seem to have encountered a slight problem',
+			type: 'general',
+		} }
+	/>
+);