Add error specific messages to product save functionality (woocommerc…

…e#38307) * Allow errors to be thrown when saving entity records * Show frontend error message when one exists * Allow errors to be thrown in preview save entity * Rename new util to getProductErrorMessage * Add tests around error message util * Add changelog entry
vishstack · May 18, 2023 · d17ca83 · d17ca83
1 parent 81e9239
commit d17ca83
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 16 deletions.
diff --git a/packages/js/product-editor/changelog/add-38215 b/packages/js/product-editor/changelog/add-38215
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add error specific messages to product save functionality
diff --git a/packages/js/product-editor/src/components/header/hooks/use-preview/use-preview.tsx b/packages/js/product-editor/src/components/header/hooks/use-preview/use-preview.tsx
@@ -13,6 +13,7 @@ import { MouseEvent } from 'react';
  * Internal dependencies
  */
 import { useValidations } from '../../../../contexts/validation-context';
+import { WPError } from '../../../../utils/get-product-error-message';
 
 export function usePreview( {
 	disabled,
@@ -22,7 +23,7 @@ export function usePreview( {
 	...props
 }: Omit< Button.AnchorProps, 'aria-disabled' | 'variant' | 'href' > & {
 	onSaveSuccess?( product: Product ): void;
-	onSaveError?( error: Error ): void;
+	onSaveError?( error: WPError ): void;
 } ): Button.AnchorProps {
 	const anchorRef = useRef< HTMLAnchorElement >();
 
@@ -117,7 +118,10 @@ export function usePreview( {
 			const publishedProduct = await saveEditedEntityRecord< Product >(
 				'postType',
 				'product',
-				productId
+				productId,
+				{
+					throwOnError: true,
+				}
 			);
 
 			// Redirect using the default anchor behaviour. This way, the usage
@@ -129,7 +133,7 @@ export function usePreview( {
 			}
 		} catch ( error ) {
 			if ( onSaveError ) {
-				onSaveError( error as Error );
+				onSaveError( error as WPError );
 			}
 		}
 	}

diff --git a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
@@ -12,6 +12,7 @@ import { MouseEvent } from 'react';
  * Internal dependencies
  */
 import { useValidations } from '../../../../contexts/validation-context';
+import { WPError } from '../../../../utils/get-product-error-message';
 
 export function usePublish( {
 	disabled,
@@ -21,7 +22,7 @@ export function usePublish( {
 	...props
 }: Omit< Button.ButtonProps, 'aria-disabled' | 'variant' | 'children' > & {
 	onPublishSuccess?( product: Product ): void;
-	onPublishError?( error: Error ): void;
+	onPublishError?( error: WPError ): void;
 } ): Button.ButtonProps {
 	const [ productId ] = useEntityProp< number >(
 		'postType',
@@ -77,15 +78,18 @@ export function usePublish( {
 			const publishedProduct = await saveEditedEntityRecord< Product >(
 				'postType',
 				'product',
-				productId
+				productId,
+				{
+					throwOnError: true,
+				}
 			);
 
 			if ( publishedProduct && onPublishSuccess ) {
 				onPublishSuccess( publishedProduct );
 			}
 		} catch ( error ) {
 			if ( onPublishError ) {
-				onPublishError( error as Error );
+				onPublishError( error as WPError );
 			}
 		}
 	}

diff --git a/packages/js/product-editor/src/components/header/hooks/use-save-draft/use-save-draft.tsx b/packages/js/product-editor/src/components/header/hooks/use-save-draft/use-save-draft.tsx
@@ -14,6 +14,7 @@ import { MouseEvent, ReactNode } from 'react';
  * Internal dependencies
  */
 import { useValidations } from '../../../../contexts/validation-context';
+import { WPError } from '../../../../utils/get-product-error-message';
 
 export function useSaveDraft( {
 	disabled,
@@ -23,7 +24,7 @@ export function useSaveDraft( {
 	...props
 }: Omit< Button.ButtonProps, 'aria-disabled' | 'variant' | 'children' > & {
 	onSaveSuccess?( product: Product ): void;
-	onSaveError?( error: Error ): void;
+	onSaveError?( error: WPError ): void;
 } ): Button.ButtonProps {
 	const [ productId ] = useEntityProp< number >(
 		'postType',
@@ -86,15 +87,18 @@ export function useSaveDraft( {
 			const publishedProduct = await saveEditedEntityRecord< Product >(
 				'postType',
 				'product',
-				productId
+				productId,
+				{
+					throwOnError: true,
+				}
 			);
 
 			if ( onSaveSuccess ) {
 				onSaveSuccess( publishedProduct );
 			}
 		} catch ( error ) {
 			if ( onSaveError ) {
-				onSaveError( error as Error );
+				onSaveError( error as WPError );
 			}
 		}
 	}

diff --git a/packages/js/product-editor/src/components/header/preview-button/preview-button.tsx b/packages/js/product-editor/src/components/header/preview-button/preview-button.tsx
@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { getProductErrorMessage } from '../../../utils/get-product-error-message';
 import { usePreview } from '../hooks/use-preview';
 
 export function PreviewButton( {
@@ -36,9 +37,11 @@ export function PreviewButton( {
 				navigateTo( { url } );
 			}
 		},
-		onSaveError() {
+		onSaveError( error ) {
+			const message = getProductErrorMessage( error );
+
 			createErrorNotice(
-				__( 'Failed to preview product.', 'woocommerce' )
+				message || __( 'Failed to preview product.', 'woocommerce' )
 			);
 		},
 	} );

diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx
@@ -13,6 +13,7 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import { getProductErrorMessage } from '../../../utils/get-product-error-message';
 import { recordProductEvent } from '../../../utils/record-product-event';
 import { usePublish } from '../hooks/use-publish';
 
@@ -62,12 +63,13 @@ export function PublishButton(
 				navigateTo( { url } );
 			}
 		},
-		onPublishError() {
-			const noticeContent = isCreating
+		onPublishError( error ) {
+			const defaultMessage = isCreating
 				? __( 'Failed to create product.', 'woocommerce' )
 				: __( 'Failed to publish product.', 'woocommerce' );
 
-			createErrorNotice( noticeContent );
+			const message = getProductErrorMessage( error );
+			createErrorNotice( message || defaultMessage );
 		},
 	} );
 

diff --git a/packages/js/product-editor/src/components/header/save-draft-button/save-draft-button.tsx b/packages/js/product-editor/src/components/header/save-draft-button/save-draft-button.tsx
@@ -12,6 +12,7 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import { getProductErrorMessage } from '../../../utils/get-product-error-message';
 import { recordProductEvent } from '../../../utils/record-product-event';
 import { useSaveDraft } from '../hooks/use-save-draft';
 
@@ -41,9 +42,11 @@ export function SaveDraftButton(
 				navigateTo( { url } );
 			}
 		},
-		onSaveError() {
+		onSaveError( error ) {
+			const message = getProductErrorMessage( error );
+
 			createErrorNotice(
-				__( 'Failed to update product.', 'woocommerce' )
+				message || __( 'Failed to update product.', 'woocommerce' )
 			);
 		},
 	} );

diff --git a/packages/js/product-editor/src/utils/get-product-error-message.ts b/packages/js/product-editor/src/utils/get-product-error-message.ts
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export type WPError = {
+	code: string;
+	message: string;
+	data: {
+		[ key: string ]: unknown;
+	};
+};
+
+export function getProductErrorMessage( error: WPError ) {
+	if ( error.code === 'product_invalid_sku' ) {
+		return __( 'Invalid or duplicated SKU.', 'woocommerce' );
+	}
+
+	return null;
+}
diff --git a/packages/js/product-editor/src/utils/test/get-product-error-message.ts b/packages/js/product-editor/src/utils/test/get-product-error-message.ts
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { getProductErrorMessage, WPError } from '../get-product-error-message';
+
+describe( 'getProductErrorMessage', () => {
+	it( 'should return the correct error message when one exists', () => {
+		const error = {
+			code: 'product_invalid_sku',
+		} as WPError;
+		const message = getProductErrorMessage( error );
+		expect( message ).toBe( 'Invalid or duplicated SKU.' );
+	} );
+
+	it( 'should return null when no error message exists', () => {
+		const error = {
+			code: 'unanticipated_error_code',
+		} as WPError;
+		const status = getProductErrorMessage( error );
+		expect( status ).toBeNull();
+	} );
+} );