initial commit

packages/woocommerce-blocks/assets/js/base/components/block-error-boundary/block-error.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+
+const BlockError = ( {
+	imageUrl = `${ WC_BLOCKS_IMAGE_URL }/block-error.svg`,
+	header = __( 'Oops!', 'woocommerce' ),
+	text = __(
+		'There was an error loading the content.',
+		'woocommerce'
+	),
+	errorMessage,
+	errorMessagePrefix = __( 'Error:', 'woocommerce' ),
+	button,
+} ) => {
+	return (
+		<div className="wc-block-error wc-block-components-error">
+			{ imageUrl && (
+				<img
+					className="wc-block-error__image wc-block-components-error__image"
+					src={ imageUrl }
+					alt=""
+				/>
+			) }
+			<div className="wc-block-error__content wc-block-components-error__content">
+				{ header && (
+					<p className="wc-block-error__header wc-block-components-error__header">
+						{ header }
+					</p>
+				) }
+				{ text && (
+					<p className="wc-block-error__text wc-block-components-error__text">
+						{ text }
+					</p>
+				) }
+				{ errorMessage && (
+					<p className="wc-block-error__message wc-block-components-error__message">
+						{ errorMessagePrefix ? errorMessagePrefix + ' ' : '' }
+						{ errorMessage }
+					</p>
+				) }
+				{ button && (
+					<p className="wc-block-error__button wc-block-components-error__button">
+						{ button }
+					</p>
+				) }
+			</div>
+		</div>
+	);
+};
+
+BlockError.propTypes = {
+	/**
+	 * Error message to display below the content.
+	 */
+	errorMessage: PropTypes.node,
+	/**
+	 * Text to display as the heading of the error block.
+	 * If it's `null` or an empty string, no header will be displayed.
+	 * If it's not defined, the default header will be used.
+	 */
+	header: PropTypes.string,
+	/**
+	 * URL of the image to display.
+	 * If it's `null` or an empty string, no image will be displayed.
+	 * If it's not defined, the default image will be used.
+	 */
+	imageUrl: PropTypes.string,
+	/**
+	 * Text to display in the error block below the header.
+	 * If it's `null` or an empty string, nothing will be displayed.
+	 * If it's not defined, the default text will be used.
+	 */
+	text: PropTypes.node,
+	/**
+	 * Text preceeding the error message.
+	 */
+	errorMessagePrefix: PropTypes.string,
+	/**
+	 * Button cta.
+	 */
+	button: PropTypes.node,
+};
+
+export default BlockError;

packages/woocommerce-blocks/assets/js/base/components/block-error-boundary/index.js

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import BlockError from './block-error';
+import './style.scss';
+
+class BlockErrorBoundary extends Component {
+	state = { errorMessage: '', hasError: false };
+
+	static getDerivedStateFromError( error ) {
+		if (
+			typeof error.statusText !== 'undefined' &&
+			typeof error.status !== 'undefined'
+		) {
+			return {
+				errorMessage: (
+					<>
+						<strong>{ error.status }</strong>:&nbsp;
+						{ error.statusText }
+					</>
+				),
+				hasError: true,
+			};
+		}
+
+		return { errorMessage: error.message, hasError: true };
+	}
+
+	render() {
+		const {
+			header,
+			imageUrl,
+			showErrorMessage,
+			text,
+			errorMessagePrefix,
+			renderError,
+			button,
+		} = this.props;
+		const { errorMessage, hasError } = this.state;
+
+		if ( hasError ) {
+			if ( typeof renderError === 'function' ) {
+				return renderError( { errorMessage } );
+			}
+			return (
+				<BlockError
+					errorMessage={ showErrorMessage ? errorMessage : null }
+					header={ header }
+					imageUrl={ imageUrl }
+					text={ text }
+					errorMessagePrefix={ errorMessagePrefix }
+					button={ button }
+				/>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+BlockErrorBoundary.propTypes = {
+	/**
+	 * Text to display as the heading of the error block.
+	 * If it's `null` or an empty string, no header will be displayed.
+	 * If it's not defined, the default header will be used.
+	 */
+	header: PropTypes.string,
+	/**
+	 * URL of the image to display.
+	 * If it's `null` or an empty string, no image will be displayed.
+	 * If it's not defined, the default image will be used.
+	 */
+	imageUrl: PropTypes.string,
+	/**
+	 * Whether to display the JS error message.
+	 */
+	showErrorMessage: PropTypes.bool,
+	/**
+	 * Text to display in the error block below the header.
+	 * If it's `null` or an empty string, nothing will be displayed.
+	 * If it's not defined, the default text will be used.
+	 */
+	text: PropTypes.node,
+	/**
+	 * Text preceeding the error message.
+	 */
+	errorMessagePrefix: PropTypes.string,
+	/**
+	 * Render function to show a custom error component.
+	 */
+	renderError: PropTypes.func,
+};
+
+BlockErrorBoundary.defaultProps = {
+	showErrorMessage: true,
+};
+
+export default BlockErrorBoundary;

packages/woocommerce-blocks/assets/js/base/components/block-error-boundary/style.scss

@@ -0,0 +1,34 @@
+.wc-block-components-error {
+	display: flex;
+	padding: $gap-largest 0;
+	margin: $gap-largest 0;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	color: $gray-700;
+	text-align: center;
+}
+.wc-block-components-error__header {
+	@include font-size(larger);
+	margin: 0;
+	color: $studio-gray-50;
+}
+.wc-block-components-error__image {
+	width: 25%;
+	margin: 0 0 $gap-large 0;
+}
+.wc-block-components-error__text {
+	margin: 1em 0 0;
+	color: $studio-gray-30;
+	@include font-size(large);
+	max-width: 60ch;
+}
+.wc-block-components-error__message {
+	margin: 1em auto 0;
+	font-style: italic;
+	color: $studio-gray-30;
+	max-width: 60ch;
+}
+.wc-block-error__button {
+	margin: $gap-largest 0 0 0;
+}