Modify feedback modal actions (#43005)

* Adapt feedback modal actions

* Add changelogs

* Modify comments

* Fix tests

* Fix test

packages/js/customer-effort-score/changelog/dev-40086_adapt_feedback_modal_action_confirmation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add `onCancel` callback #43005

packages/js/customer-effort-score/src/components/feedback-modal/feedback-modal.tsx

@@ -19,7 +19,8 @@ import classnames from 'classnames';
  * @param {string}   props.isSubmitButtonDisabled Boolean to enable/disable the send button.
  * @param {string}   props.submitButtonLabel      Label for the send button.
  * @param {string}   props.cancelButtonLabel      Label for the cancel button.
- * @param {Function} props.onModalClose           Callback for when user closes modal by clicking cancel.
+ * @param {Function} props.onModalClose           Function to call when user closes modal by clicking X.
+ * @param {Function} props.onCancel               Function to call when user presses cancel.
  * @param {Function} props.children               Children to be rendered.
  * @param {string}   props.className              Class name to addd to the modal.
  */
@@ -28,6 +29,7 @@ function FeedbackModal( {
 	title,
 	description,
 	onModalClose,
+	onCancel,
 	children,
 	isSubmitButtonDisabled,
 	submitButtonLabel,
@@ -38,6 +40,7 @@ function FeedbackModal( {
 	title: string;
 	description?: string;
 	onModalClose?: () => void;
+	onCancel?: () => void;
 	children?: JSX.Element;
 	isSubmitButtonDisabled?: boolean;
 	submitButtonLabel?: string;
@@ -78,7 +81,7 @@ function FeedbackModal( {
 			) }
 			{ children }
 			<div className="woocommerce-feedback-modal__buttons">
-				<Button isTertiary onClick={ closeModal } name="cancel">
+				<Button isTertiary onClick={ onCancel } name="cancel">
 					{ cancelButtonLabel }
 				</Button>
 				<Button

packages/js/customer-effort-score/src/components/feedback-modal/test/index.tsx

@@ -33,7 +33,7 @@ describe( 'FeedbackModal', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should close modal when cancel button pressed', async () => {
+	it( 'should close modal when X button is pressed', async () => {
 		render(
 			<FeedbackModal
 				onSubmit={ mockRecordScoreCallback }
@@ -47,7 +47,7 @@ describe( 'FeedbackModal', () => {
 		await screen.findByRole( 'dialog' );
 
 		// Press cancel button.
-		fireEvent.click( screen.getByRole( 'button', { name: /Cancel/i } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: /Close/i } ) );
 
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );

packages/js/product-editor/changelog/dev-40086_adapt_feedback_modal_action_confirmation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Modify feedback modal actions #43005

packages/js/product-editor/src/components/product-mvp-feedback-modal-container/product-mvp-feedback-modal-container.tsx

@@ -58,11 +58,20 @@ export const ProductMVPFeedbackModalContainer: React.FC< {
 
 	const onCloseModal = () => {
 		recordEvent( 'product_mvp_feedback', {
-			action: 'disable',
+			action: 'cancel',
 			checked: '',
 			comments: '',
 		} );
 		hideProductMVPFeedbackModal();
+	};
+
+	const onSkipFeedback = () => {
+		recordEvent( 'product_mvp_feedback', {
+			action: 'disable',
+			checked: '',
+			comments: 'Feedback skipped',
+		} );
+		hideProductMVPFeedbackModal();
 		window.location.href = classicEditorUrl;
 	};
 
@@ -74,6 +83,7 @@ export const ProductMVPFeedbackModalContainer: React.FC< {
 		<ProductMVPFeedbackModal
 			recordScoreCallback={ recordScore }
 			onCloseModal={ onCloseModal }
+			onSkipFeedback={ onSkipFeedback }
 		/>
 	);
 };

packages/js/product-editor/src/components/product-mvp-feedback-modal/product-mvp-feedback-modal.tsx

@@ -24,11 +24,13 @@ import { useDispatch } from '@wordpress/data';
  *
  * @param {Object}   props                     Component props.
  * @param {Function} props.recordScoreCallback Function to call when the results are sent.
- * @param {Function} props.onCloseModal        Callback for when user closes modal by clicking cancel.
+ * @param {Function} props.onCloseModal        Function to call when user closes the modal by clicking the X.
+ * @param {Function} props.onSkipFeedback      Function to call when user skips sending feedback.
  */
 function ProductMVPFeedbackModal( {
 	recordScoreCallback,
 	onCloseModal,
+	onSkipFeedback,
 }: {
 	recordScoreCallback: (
 		checked: string[],
@@ -36,6 +38,7 @@ function ProductMVPFeedbackModal( {
 		email: string
 	) => void;
 	onCloseModal?: () => void;
+	onSkipFeedback?: () => void;
 } ): JSX.Element | null {
 	const [ missingFeatures, setMissingFeatures ] = useState( false );
 	const [ missingPlugins, setMissingPlugins ] = useState( false );
@@ -105,6 +108,7 @@ function ProductMVPFeedbackModal( {
 				'woocommerce'
 			) }
 			onSubmit={ onSendFeedback }
+			onCancel={ onSkipFeedback }
 			onModalClose={ onCloseModal }
 			isSubmitButtonDisabled={ ! checked.length }
 			submitButtonLabel={ __( 'Send', 'woocommerce' ) }

packages/js/product-editor/src/components/product-mvp-feedback-modal/test/index.tsx

@@ -28,7 +28,7 @@ describe( 'ProductMVPFeedbackModal', () => {
 		jest.resetAllMocks();
 	} );
 
-	it( 'should close the ProductMVPFeedback modal when skip button pressed', async () => {
+	it( 'should close the ProductMVPFeedback modal when X button pressed', async () => {
 		render(
 			<ProductMVPFeedbackModal
 				recordScoreCallback={ mockRecordScoreCallback }
@@ -37,7 +37,7 @@ describe( 'ProductMVPFeedbackModal', () => {
 		// Wait for the modal to render.
 		await screen.findByRole( 'dialog' );
 		// Press cancel button.
-		fireEvent.click( screen.getByRole( 'button', { name: /Skip/i } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: /Close/i } ) );
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 	it( 'should enable Send button when an option is checked', async () => {