Show a proper error message when a duplicate SKU is found. (16218)

client/extensions/woocommerce/app/products/product-create.js

@@ -47,6 +47,7 @@ import ProductForm from './product-form';
 import ProductHeader from './product-header';
 import { getLink } from 'woocommerce/lib/nav-utils';
 import { withAnalytics, recordTracksEvent } from 'state/analytics/actions';
+import { getSaveErrorMessage } from './save-error-message';
 
 class ProductCreate extends React.Component {
 	static propTypes = {
@@ -156,11 +157,13 @@ class ProductCreate extends React.Component {
 			return getSuccessNotice( newProduct );
 		};
 
-		const failureAction = errorNotice(
-			translate( 'There was a problem saving %(product)s. Please try again.', {
-				args: { product: product.name },
-			} )
-		);
+		const failureAction = error => {
+			const errorSlug = ( error && error.error ) || undefined;
+
+			return errorNotice( getSaveErrorMessage( errorSlug, product.name, translate ), {
+				duration: 8000,
+			} );
+		};
 
 		if ( ! product.type ) {
 			// Product type was never switched, so set it before we save.

client/extensions/woocommerce/app/products/product-update.js

@@ -48,6 +48,7 @@ import {
 	clearProductCategoryEdits,
 } from 'woocommerce/state/ui/product-categories/actions';
 import { getProductCategoriesWithLocalEdits } from 'woocommerce/state/ui/product-categories/selectors';
+import { getSaveErrorMessage } from './save-error-message';
 import page from 'page';
 import ProductForm from './product-form';
 import ProductHeader from './product-header';
@@ -174,11 +175,13 @@ class ProductUpdate extends React.Component {
 			);
 		};
 
-		const failureAction = errorNotice(
-			translate( 'There was a problem saving %(product)s. Please try again.', {
-				args: { product: product.name },
-			} )
-		);
+		const failureAction = error => {
+			const errorSlug = ( error && error.error ) || undefined;
+
+			return errorNotice( getSaveErrorMessage( errorSlug, product.name, translate ), {
+				duration: 8000,
+			} );
+		};
 
 		this.props.createProductActionList( successAction, failureAction );
 	};

client/extensions/woocommerce/app/products/save-error-message.js

@@ -0,0 +1,12 @@
+export function getSaveErrorMessage( slug, productName, translate ) {
+	switch ( slug ) {
+		case 'product_invalid_sku':
+			return translate( 'There was a problem saving %(product)s. A product already exists with this SKU.', {
+				args: { product: productName },
+			} );
+		default:
+			return translate( 'There was a problem saving %(product)s. Please try again.', {
+				args: { product: productName },
+			} );
+	}
+}

client/extensions/woocommerce/state/data-layer/ui/products/index.js

@@ -90,8 +90,12 @@ export function handleProductActionListCreate( store, action ) {
 		}
 		return dispatch( successAction );
 	};
-	const onFailure = dispatch => {
-		dispatch( failureAction );
+	const onFailure = ( dispatch, { productError } ) => {
+		if ( isFunction( failureAction ) ) {
+			dispatch( failureAction( productError ) );
+		} else {
+			dispatch( failureAction );
+		}
 		dispatch( actionListClear() );
 	};
 	const actionList = makeProductActionList(
@@ -240,6 +244,15 @@ const productSuccess = ( actionList, type ) => (
 	dispatch( actionListStepSuccess( newActionList ) );
 };
 
+const productFailure = actionList => ( dispatch, getState, { error } ) => {
+	const newActionList = {
+		...actionList,
+		productError: error,
+	};
+
+	dispatch( actionListStepFailure( newActionList ) );
+};
+
 export function makeProductSteps( rootState, siteId, productEdits ) {
 	if ( ! productEdits ) {
 		return [];
@@ -261,7 +274,7 @@ export function makeProductSteps( rootState, siteId, productEdits ) {
 							siteId,
 							getCorrectedProduct( product, categoryIdMapping ),
 							productSuccess( actionList, 'create' ),
-							actionListStepFailure( actionList )
+							productFailure( actionList )
 						)
 					);
 				},
@@ -288,7 +301,7 @@ export function makeProductSteps( rootState, siteId, productEdits ) {
 								siteId,
 								getCorrectedProduct( product, categoryIdMapping ),
 								productSuccess( actionList, 'update' ),
-								actionListStepFailure( actionList )
+								productFailure( actionList )
 							)
 						);
 					},