From 9db02a248d3c117afca57d4209ca45c668dca1ab Mon Sep 17 00:00:00 2001
From: Moon <moon.kyong@automattic.com>
Date: Tue, 5 Nov 2024 08:42:28 -0800
Subject: [PATCH] Fix the bug where CES requires a double-click on Give
 feedback (#52556)

* Update shown for action when the user navigates away to ensure we do not show the same notice again

* No need to call addActionToShownOption on dismiss since we are calling it on page change

* Use apiFetch to avoid re-render

* Use apiFetch from @wordpress/api-fetch

* Add changefile(s) from automation for the following project(s): @woocommerce/customer-effort-score

* Fix lint issue

* Fix lint issue

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 ...6-fix-52515-ces-feedback-require-dbl-click |  4 ++++
 .../customer-effort-score-tracks/index.js     | 20 ++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 packages/js/customer-effort-score/changelog/52556-fix-52515-ces-feedback-require-dbl-click

diff --git a/packages/js/customer-effort-score/changelog/52556-fix-52515-ces-feedback-require-dbl-click b/packages/js/customer-effort-score/changelog/52556-fix-52515-ces-feedback-require-dbl-click
new file mode 100644
index 00000000000..3963497f38b
--- /dev/null
+++ b/packages/js/customer-effort-score/changelog/52556-fix-52515-ces-feedback-require-dbl-click
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+A fix a bug where users need to click Give feedback twice.
\ No newline at end of file
diff --git a/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js b/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
index 103e341e7ed..8676f5f7826 100644
--- a/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
+++ b/packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js
@@ -8,6 +8,7 @@ import { createElement, useState } from '@wordpress/element';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -38,7 +39,6 @@ import { getStoreAgeInWeeks } from '../../utils';
  * @param {boolean}  props.allowTracking      Whether tracking is allowed or not.
  * @param {boolean}  props.resolving          Are values still being resolved.
  * @param {number}   props.storeAgeInWeeks    The age of the store in weeks.
- * @param {Function} props.updateOptions      Function to update options.
  * @param {Function} props.createNotice       Function to create a snackbar.
  */
 function _CustomerEffortScoreTracks( {
@@ -55,7 +55,6 @@ function _CustomerEffortScoreTracks( {
 	allowTracking,
 	resolving,
 	storeAgeInWeeks,
-	updateOptions,
 	createNotice,
 } ) {
 	const [ modalShown, setModalShown ] = useState( false );
@@ -91,12 +90,17 @@ function _CustomerEffortScoreTracks( {
 			ces_location: 'inside',
 			...trackProps,
 		} );
+
 		if ( ! cesShownForActions || ! cesShownForActions.includes( action ) ) {
-			updateOptions( {
-				[ SHOWN_FOR_ACTIONS_OPTION_NAME ]: [
-					action,
-					...( cesShownForActions || [] ),
-				],
+			apiFetch( {
+				path: 'wc-admin/options',
+				method: 'POST',
+				data: {
+					[ SHOWN_FOR_ACTIONS_OPTION_NAME ]: [
+						action,
+						...( cesShownForActions || [] ),
+					],
+				},
 			} );
 		}
 	};
@@ -247,11 +251,9 @@ export const CustomerEffortScoreTracks = compose(
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
 		const { createNotice } = dispatch( 'core/notices' );
 
 		return {
-			updateOptions,
 			createNotice,
 		};
 	} )