Add/35126 ces exit prompt orders (#35762)

* Add exit tracking for orders

* Update exit page CES action

* Fix order hook name

* Add changelog

* Address PR feedback

plugins/woocommerce-admin/client/customer-effort-score-tracks/customer-effort-score-exit-page.ts

@@ -205,6 +205,31 @@ function getExitPageCESCopy( pageId: string ): {
 					'woocommerce'
 				),
 			};
+		case 'shop_order_update':
+			return {
+				action: pageId,
+				icon: '📦',
+				noticeLabel: __(
+					'How easy or difficult was it to update this order?',
+					'woocommerce'
+				),
+				title: __(
+					"How's your experience with orders?",
+					'woocommerce'
+				),
+				description: __(
+					'We noticed you started editing an order, then left. How was it? Your feedback will help create a better experience for thousands of merchants like you.',
+					'woocommerce'
+				),
+				firstQuestion: __(
+					'The order editing screen is easy to use',
+					'woocommerce'
+				),
+				secondQuestion: __(
+					"The order details screen's functionality meets my needs",
+					'woocommerce'
+				),
+			};
 		default:
 			return null;
 	}

plugins/woocommerce-admin/client/utils/static-form-helper.ts

@@ -12,6 +12,7 @@ export function staticFormDataToObject( elForm: HTMLFormElement ) {
 			field.type === 'button' ||
 			field.type === 'image' ||
 			field.type === 'submit' ||
+			field.type === 'hidden' ||
 			! sKey
 		)
 			continue;

plugins/woocommerce-admin/client/wp-admin-scripts/order-tracking/exit-order-page.ts

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { addCustomerEffortScoreExitPageListener } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
+import { staticFormDataToObject } from '~/utils/static-form-helper';
+
+type FormElements = {
+	post?: HTMLFormElement;
+} & HTMLCollectionOf< HTMLFormElement >;
+const forms: FormElements = document.forms;
+if ( forms?.post ) {
+	let triggeredSaveOrDeleteButton = false;
+	const saveButton = document.querySelector( '.save_order' );
+	const deleteButton = document.querySelector( '.submitdelete' );
+
+	if ( saveButton ) {
+		saveButton.addEventListener( 'click', () => {
+			triggeredSaveOrDeleteButton = true;
+		} );
+	}
+	if ( deleteButton ) {
+		deleteButton.addEventListener( 'click', () => {
+			triggeredSaveOrDeleteButton = true;
+		} );
+	}
+	const formData = staticFormDataToObject( forms.post );
+	addCustomerEffortScoreExitPageListener( 'shop_order_update', () => {
+		if ( triggeredSaveOrDeleteButton ) {
+			return false;
+		}
+		const newFormData = forms.post
+			? staticFormDataToObject( forms.post )
+			: {};
+		for ( const key of Object.keys( formData ) ) {
+			const value =
+				typeof formData[ key ] === 'object'
+					? JSON.stringify( formData[ key ] )
+					: formData[ key ];
+			const newValue =
+				typeof newFormData[ key ] === 'object'
+					? JSON.stringify( newFormData[ key ] )
+					: newFormData[ key ];
+			if ( value !== newValue ) {
+				return true;
+			}
+		}
+		return false;
+	} );
+}

plugins/woocommerce-admin/client/wp-admin-scripts/order-tracking/index.ts

@@ -0,0 +1 @@
+export * from './exit-order-page';

plugins/woocommerce-admin/webpack.config.js

@@ -58,6 +58,7 @@ const wpAdminScripts = [
 	'product-tour',
 	'wc-addons-tour',
 	'settings-tracking',
+	'order-tracking',
 ];
 const getEntryPoints = () => {
 	const entryPoints = {

plugins/woocommerce/changelog/add-35126_ces_exit_prompt_orders

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add exit prompt CES for users editing orders when tracking is enabled.

plugins/woocommerce/includes/tracks/events/class-wc-orders-tracking.php

@@ -6,6 +6,7 @@
  */
 
 use Automattic\WooCommerce\Utilities\OrderUtil;
+use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
 
 defined( 'ABSPATH' ) || exit;
 
@@ -24,6 +25,7 @@ class WC_Orders_Tracking {
 		add_action( 'woocommerce_process_shop_order_meta', array( $this, 'track_order_action' ), 51 );
 		add_action( 'load-post-new.php', array( $this, 'track_add_order_from_edit' ), 10 );
 		add_filter( 'woocommerce_shop_order_search_results', array( $this, 'track_order_search' ), 10, 3 );
+		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_order_tracking_scripts' ) );
 	}
 
 	/**
@@ -175,4 +177,20 @@ class WC_Orders_Tracking {
 			}
 		}
 	}
+
+	/**
+	 * Adds the tracking scripts for product setting pages.
+	 *
+	 * @param string $hook Page hook.
+	 */
+	public function possibly_add_order_tracking_scripts( $hook ) {
+		// phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized, WordPress.Security.NonceVerification
+		if (
+			( isset( $_GET['post_type'] ) && 'shop_order' === wp_unslash( $_GET['post_type'] ) ) ||
+			( 'post.php' === $hook && isset( $_GET['post'] ) && 'shop_order' === get_post_type( intval( $_GET['post'] ) ) )
+		) {
+			WCAdminAssets::register_script( 'wp-admin-scripts', 'order-tracking', false );
+		}
+		// phpcs:enable
+	}
 }