Make message editable

block.json

@@ -11,12 +11,20 @@
 	},
 	"attributes": {
 		"currentTotal": {
-			"type": "number",
+			"type": "string",
 			"default": "15"
 		},
 		"freeShippingFrom": {
-			"type": "number",
+			"type": "string",
 			"default": "50"
+		},
+		"labelInsufficientTotals": {
+			"type": "string",
+			"default": "Spend only {amount} more to get free shipping!"
+		},
+		"labelSufficientTotals": {
+			"type": "string",
+			"default": "You have qualified for free shipping. Great job!"
 		}
 	},
 	"textdomain": "free-shipping-progress-bar",

package.json

@@ -26,6 +26,7 @@
 		"prettier": "npm:[email protected]"
 	},
 	"devDependencies": {
+		"@wordpress/components": "^18.0.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
 		"@wordpress/i18n": "4.2.4",
 		"@wordpress/prettier-config": "1.1.1",

src/block.js

@@ -1,33 +1,14 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-
-export default function Block( { currentTotal, freeShippingFrom } ) {
-	const progress = ( currentTotal / freeShippingFrom ) * 100;
-	const divWidth = ( progress > 100 ? 100 : progress ) + '%';
-	const divStyle = { width: divWidth };
-	const remaining = Number( freeShippingFrom - currentTotal ).toFixed( 2 );
-	const message =
-		remaining > 0
-			? sprintf(
-					__(
-						'Spend only $%s more to get free shipping!',
-						'free-shipping-progress-bar'
-					),
-					remaining
-			  )
-			: __(
-					'You have qualified for free shipping. Great job!',
-					'free-shipping-progress-bar'
-			  );
+import ProgressLabel from './components/progress-label';
+import ProgressBar from './components/progress-bar';
 
+export default function Block( attributes ) {
 	return (
-		<div className="wc-free-shipping-progress-bar">
-			<div id="message">{ message }</div>
-			<div id="progressBar">
-				<div id="progress" style={ divStyle }></div>
-			</div>
-		</div>
+		<>
+			<ProgressLabel { ...attributes } />
+			<ProgressBar { ...attributes } />
+		</>
 	);
 }

src/components/block-error-boundary/block-error.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const BlockError = ( {
+	header = __( 'Oops!', 'free-shipping-progress-bar' ),
+	text = __(
+		'There was an error loading the content.',
+		'free-shipping-progress-bar'
+	),
+	errorMessage,
+	errorMessagePrefix = __( 'Error:', 'free-shipping-progress-bar' ),
+	button,
+} ) => {
+	return (
+		<div className="wc-free-shipping-progress-bar-error">
+			<div className="wc-free-shipping-progress-bar-error__content">
+				{ header && (
+					<p className="wc-free-shipping-progress-bar-error__header">
+						{ header }
+					</p>
+				) }
+				{ text && (
+					<p className="wc-free-shipping-progress-bar-error__text">
+						{ text }
+					</p>
+				) }
+				{ errorMessage && (
+					<p className="wc-free-shipping-progress-bar-error__message">
+						{ errorMessagePrefix ? errorMessagePrefix + ' ' : '' }
+						{ errorMessage }
+					</p>
+				) }
+				{ button && (
+					<p className="wc-free-shipping-progress-bar-error__button">
+						{ button }
+					</p>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default BlockError;

src/components/block-error-boundary/index.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+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,
+			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 }
+					text={ text }
+					errorMessagePrefix={ errorMessagePrefix }
+					button={ button }
+				/>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+export default BlockErrorBoundary;

src/components/block-error-boundary/style.scss

@@ -0,0 +1,28 @@
+.wc-free-shipping-progress-bar-error {
+	align-items: center;
+	color: currentColor;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 1em;
+	padding: 1em;
+	text-align: center;
+}
+.wc-free-shipping-progress-bar-error__header {
+	color: currentColor;
+	margin: 0;
+}
+.wc-free-shipping-progress-bar-error__text {
+	color: currentColor;
+	margin: 1em 0 0;
+	max-width: 60ch;
+}
+.wc-free-shipping-progress-bar-error__message {
+	color: currentColor;
+	font-style: italic;
+	margin: 1em 0 0;
+	max-width: 60ch;
+}
+.wc-free-shipping-progress-bar-error__button {
+	margin: 0;
+}

src/components/progress-bar/index.js

@@ -0,0 +1,16 @@
+const ProgressBar = ( { currentTotal, freeShippingFrom } ) => {
+	const progress = ( currentTotal / freeShippingFrom ) * 100;
+	const divWidth = ( progress > 100 ? 100 : progress ) + '%';
+	const divStyle = { width: divWidth };
+
+	return (
+		<div className="wc-free-shipping-progress-bar__outer">
+			<div
+				className="wc-free-shipping-progress-bar__inner"
+				style={ divStyle }
+			></div>
+		</div>
+	);
+};
+
+export default ProgressBar;

src/components/progress-label/index.js

@@ -0,0 +1,18 @@
+const ProgressLabel = ( {
+	currentTotal,
+	freeShippingFrom,
+	labelInsufficientTotals,
+	labelSufficientTotals,
+} ) => {
+	const remaining = Number( freeShippingFrom - currentTotal ).toFixed( 2 );
+	const message =
+		remaining > 0
+			? labelInsufficientTotals.replace( '{amount}', remaining )
+			: labelSufficientTotals;
+
+	return (
+		<div className="wc-free-shipping-progress-bar__label">{ message }</div>
+	);
+};
+
+export default ProgressLabel;

src/components/use-view-switcher/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, select } from '@wordpress/data';
+import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { Icon, eye } from '../../icons';
+
+export const useViewSwitcher = ( clientId, views ) => {
+	const initialView = views[ 0 ];
+	const [ currentView, setCurrentView ] = useState( initialView );
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+	const { getBlock } = select( blockEditorStore );
+
+	const ViewSwitcherComponent = (
+		<Toolbar>
+			<ToolbarDropdownMenu
+				label={ __( 'Switch view', 'free-shipping-progress-bar' ) }
+				text={ currentView.label }
+				icon={
+					<Icon srcElement={ eye } style={ { marginRight: '8px' } } />
+				}
+				controls={ views.map( ( view ) => ( {
+					...view,
+					title: view.label,
+					onClick: () => {
+						setCurrentView( view );
+						selectBlock(
+							getBlock( clientId ).innerBlocks.find(
+								( block ) => block.name === view.view
+							)?.clientId || clientId
+						);
+					},
+				} ) ) }
+			/>
+		</Toolbar>
+	);
+
+	return {
+		currentView: currentView.view,
+		component: ViewSwitcherComponent,
+	};
+};
+
+export default useViewSwitcher;

src/constants.js

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const notice = __(
+	'Spend only {amount} more to get free shipping!',
+	'free-shipping-progress-bar'
+);