Fix/unsaved prompt (woocommerce#35657)

* Set initial values prop from reset form function as optional

* Fix unsaved modal propmt to not be shown during form submission

* Reset form on save draft and before navigation starts

* Add comments ssuggestions

packages/js/components/changelog/fix-unsaved-prompt

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Set initial values prop from reset form function as optional

packages/js/components/src/form/form-context.ts

@@ -44,7 +44,7 @@ export type FormContext< Values extends Record< string, any > > = {
 	): InputProps< Values, Value >;
 	isValidForm: boolean;
 	resetForm: (
-		initialValues: Values,
+		initialValues?: Values,
 		touchedFields?: { [ P in keyof Values ]?: boolean | undefined },
 		errors?: FormErrors< Values >
 	) => void;

packages/js/components/src/form/form.tsx

@@ -166,11 +166,11 @@ function FormComponent< Values extends Record< string, any > >(
 		validate( values );
 	}, [] );
 
-	const resetForm = (
-		newInitialValues = {} as Values,
-		newTouchedFields = {},
-		newErrors = {}
-	) => {
+	const resetForm: (
+		newInitialValues?: Values,
+		newTouchedFields?: { [ P in keyof Values ]?: boolean | undefined },
+		newErrors?: FormErrors< Values >
+	) => void = ( newInitialValues, newTouchedFields = {}, newErrors = {} ) => {
 		const newValues = newInitialValues ?? initialValues.current ?? {};
 		initialValues.current = newValues;
 		setValuesInternal( newValues );
@@ -183,7 +183,7 @@ function FormComponent< Values extends Record< string, any > >(
 	} ) );
 
 	const isValidForm = async () => {
-		await validate( values );
+		validate( values );
 		return ! Object.keys( errors ).length;
 	};
 

plugins/woocommerce-admin/client/products/product-form-actions.tsx

@@ -14,6 +14,7 @@ import { registerPlugin } from '@wordpress/plugins';
 import { useFormContext } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
+import { navigateTo } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -54,7 +55,13 @@ export const ProductFormActions: React.FC = () => {
 			...getProductDataForTracks(),
 		} );
 		if ( ! values.id ) {
-			createProductWithStatus( values, 'draft' );
+			const product = await createProductWithStatus( values, 'draft' );
+			if ( product?.id ) {
+				resetForm();
+				navigateTo( {
+					url: 'admin.php?page=wc-admin&path=/product/' + product.id,
+				} );
+			}
 		} else {
 			const product = await updateProductWithStatus(
 				values.id,
@@ -73,7 +80,13 @@ export const ProductFormActions: React.FC = () => {
 			...getProductDataForTracks(),
 		} );
 		if ( ! values.id ) {
-			createProductWithStatus( values, 'publish' );
+			const product = await createProductWithStatus( values, 'publish' );
+			if ( product?.id ) {
+				resetForm();
+				navigateTo( {
+					url: 'admin.php?page=wc-admin&path=/product/' + product.id,
+				} );
+			}
 		} else {
 			const product = await updateProductWithStatus(
 				values.id,
@@ -94,7 +107,7 @@ export const ProductFormActions: React.FC = () => {
 		if ( values.id ) {
 			await updateProductWithStatus( values.id, values, 'publish' );
 		} else {
-			await createProductWithStatus( values, 'publish', false, true );
+			await createProductWithStatus( values, 'publish', false );
 		}
 		await copyProductWithStatus( values );
 	};
@@ -114,13 +127,17 @@ export const ProductFormActions: React.FC = () => {
 		await copyProductWithStatus( values );
 	};
 
-	const onTrash = () => {
+	const onTrash = async () => {
 		recordEvent( 'product_delete', {
 			new_product_page: true,
 			...getProductDataForTracks(),
 		} );
 		if ( values.id ) {
-			deleteProductAndRedirect( values.id );
+			const product = await deleteProductAndRedirect( values.id );
+			if ( product?.id ) {
+				resetForm( product );
+				navigateTo( { url: 'edit.php?post_type=product' } );
+			}
 		}
 	};
 

plugins/woocommerce-admin/client/products/use-product-helper.ts

@@ -14,7 +14,6 @@ import {
 	productReadOnlyProperties,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { navigateTo } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -66,21 +65,19 @@ export function useProductHelper() {
 	 * @param {Product} product the product to be created.
 	 * @param {string}  status the product status.
 	 * @param {boolean} skipNotice if the notice should be skipped (default: false).
-	 * @param {boolean} skipRedirect if the user should skip the redirection to the new product page (default: false).
 	 * @return {Promise<Product>} Returns a promise with the created product.
 	 */
 	const createProductWithStatus = useCallback(
 		async (
 			product: Omit< Product, ReadOnlyProperties >,
 			status: ProductStatus,
-			skipNotice = false,
-			skipRedirect = false
+			skipNotice = false
 		) => {
 			setUpdating( {
 				...updating,
 				[ status ]: true,
 			} );
-			createProduct( {
+			return createProduct( {
 				...product,
 				status,
 			} ).then(
@@ -109,15 +106,9 @@ export function useProductHelper() {
 						...updating,
 						[ status ]: false,
 					} );
-					if ( ! skipRedirect ) {
-						navigateTo( {
-							url:
-								'admin.php?page=wc-admin&path=/product/' +
-								newProduct.id,
-						} );
-					}
+					return newProduct;
 				},
-				() => {
+				( error ) => {
 					if ( ! skipNotice ) {
 						createNotice(
 							'error',
@@ -136,6 +127,7 @@ export function useProductHelper() {
 						...updating,
 						[ status ]: false,
 					} );
+					return error;
 				}
 			);
 		},
@@ -236,28 +228,32 @@ export function useProductHelper() {
 	 * Deletes a product by given id and redirects to the product list page.
 	 *
 	 * @param {number} id the product id to be deleted.
-	 * @param {string} redirectUrl the redirection url, defaults to product list ('edit.php?post_type=product').
 	 * @return {Promise<Product>} promise with the deleted product.
 	 */
-	const deleteProductAndRedirect = useCallback(
-		( id: number, redirectUrl = 'edit.php?post_type=product' ) => {
-			setIsDeleting( true );
-			return deleteProduct( id ).then( () => {
+	const deleteProductAndRedirect = useCallback( async ( id: number ) => {
+		setIsDeleting( true );
+		return deleteProduct( id ).then(
+			( product ) => {
 				createNotice(
 					'success',
 					__(
 						'🎉 Successfully moved product to Trash.',
 						'woocommerce'
 					)
 				);
-				navigateTo( {
-					url: redirectUrl,
-				} );
 				setIsDeleting( false );
-			} );
-		},
-		[]
-	);
+				return product;
+			},
+			( error ) => {
+				createNotice(
+					'error',
+					__( 'Failed to move product to Trash.', 'woocommerce' )
+				);
+				setIsDeleting( false );
+				return error;
+			}
+		);
+	}, [] );
 
 	/**
 	 * Sanitizes a price.

plugins/woocommerce/changelog/fix-unsaved-prompt

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix unsaved modal propmt to not be shown during form submission