Limit 'email me when stock reaches' field to numerical only (woocomme…

…rce#38353) * Limit 'email me when stock reaches' field to numerical only * Add changelog file
vishstack · May 22, 2023 · 195bcd2 · 195bcd2
1 parent e16792d
commit 195bcd2
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 33 deletions.
diff --git a/packages/js/product-editor/changelog/fix-38244 b/packages/js/product-editor/changelog/fix-38244
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Limit 'email me when stock reaches' field to numerical only#38244
diff --git a/packages/js/product-editor/src/blocks/inventory-email/edit.tsx b/packages/js/product-editor/src/blocks/inventory-email/edit.tsx
@@ -3,16 +3,16 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@woocommerce/components';
-
+import { Product } from '@woocommerce/data';
 import {
 	createElement,
 	Fragment,
 	createInterpolateElement,
 } from '@wordpress/element';
 import { getSetting } from '@woocommerce/settings';
-
+import { BlockEditProps } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
-
+import { useInstanceId } from '@wordpress/compose';
 import {
 	BaseControl,
 	// @ts-expect-error `__experimentalInputControl` does exist.
@@ -23,54 +23,91 @@ import {
 // eslint-disable-next-line @woocommerce/dependency-group
 import { useEntityProp } from '@wordpress/core-data';
 
-export function Edit() {
+/**
+ * Internal dependencies
+ */
+import { useValidation } from '../../contexts/validation-context';
+import { InventoryEmailBlockAttributes } from './types';
+
+export function Edit( {
+	clientId,
+}: BlockEditProps< InventoryEmailBlockAttributes > ) {
 	const blockProps = useBlockProps();
 	const notifyLowStockAmount = getSetting( 'notifyLowStockAmount', 2 );
 
-	const [ lowStockAmount, setLowStockAmount ] = useEntityProp(
+	const [ lowStockAmount, setLowStockAmount ] = useEntityProp< number >(
 		'postType',
 		'product',
 		'low_stock_amount'
 	);
 
+	const id = useInstanceId( BaseControl, 'low_stock_amount' ) as string;
+
+	const {
+		ref: lowStockAmountRef,
+		error: lowStockAmountValidationError,
+		validate: validateLowStockAmount,
+	} = useValidation< Product >(
+		`low_stock_amount-${ clientId }`,
+		async function stockQuantityValidator() {
+			if ( lowStockAmount && lowStockAmount < 0 ) {
+				return __(
+					'This field must be a positive number.',
+					'woocommerce'
+				);
+			}
+		},
+		[ lowStockAmount ]
+	);
+
 	return (
 		<>
 			<div { ...blockProps }>
 				<div className="wp-block-columns">
 					<div className="wp-block-column">
 						<BaseControl
-							id={ 'product_inventory_email' }
+							id={ id }
 							label={ __(
 								'Email me when stock reaches',
 								'woocommerce'
 							) }
-							help={ createInterpolateElement(
-								__(
-									'Make sure to enable notifications in <link>store settings.</link>',
-									'woocommerce'
-								),
-								{
-									link: (
-										<Link
-											href={ `${ getSetting(
-												'adminUrl'
-											) }admin.php?page=wc-settings&tab=products&section=inventory` }
-											target="_blank"
-											type="external"
-										></Link>
+							help={
+								lowStockAmountValidationError ||
+								createInterpolateElement(
+									__(
+										'Make sure to enable notifications in <link>store settings.</link>',
+										'woocommerce'
 									),
-								}
-							) }
+									{
+										link: (
+											<Link
+												href={ `${ getSetting(
+													'adminUrl'
+												) }admin.php?page=wc-settings&tab=products&section=inventory` }
+												target="_blank"
+												type="external"
+											></Link>
+										),
+									}
+								)
+							}
+							className={
+								lowStockAmountValidationError && 'has-error'
+							}
 						>
 							<InputControl
-								name={ 'woocommerce-product-name' }
+								id={ id }
+								ref={ lowStockAmountRef }
+								name={ 'low_stock_amount' }
 								placeholder={ sprintf(
 									// translators: Default quantity to notify merchants of low stock.
 									__( '%d (store default)', 'woocommerce' ),
 									notifyLowStockAmount
 								) }
 								onChange={ setLowStockAmount }
+								onBlur={ validateLowStockAmount }
 								value={ lowStockAmount }
+								type="number"
 								min={ 0 }
 							/>
 						</BaseControl>

diff --git a/packages/js/product-editor/src/blocks/inventory-email/index.ts b/packages/js/product-editor/src/blocks/inventory-email/index.ts
@@ -1,22 +1,29 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { BlockConfiguration } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
-import { initBlock } from '../../utils';
-import metadata from './block.json';
+import { initBlock } from '../../utils/init-blocks';
+import blockConfiguration from './block.json';
 import { Edit } from './edit';
+import { InventoryEmailBlockAttributes } from './types';
 
-const { name } = metadata;
+const { name, ...metadata } =
+	blockConfiguration as BlockConfiguration< InventoryEmailBlockAttributes >;
 
 export { metadata, name };
 
-export const settings = {
+export const settings: Partial<
+	BlockConfiguration< InventoryEmailBlockAttributes >
+> = {
 	example: {},
 	edit: Edit,
 };
 
-export const init = () =>
-	initBlock( {
-		name,
-		metadata: metadata as never,
-		settings,
-	} );
+export function init() {
+	return initBlock( { name, metadata, settings } );
+}
diff --git a/packages/js/product-editor/src/blocks/inventory-email/types.ts b/packages/js/product-editor/src/blocks/inventory-email/types.ts
@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import { BlockAttributes } from '@wordpress/blocks';
+
+export interface InventoryEmailBlockAttributes extends BlockAttributes {
+	name: string;
+}