Restrict beta features to only those that have opted into tracking, adding modal for navigation feature (https://github.com/woocommerce/woocommerce-admin/pull/6054)

plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/container.js

@@ -0,0 +1,114 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { Button, Modal, CheckboxControl } from '@wordpress/components';
+import { withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { recordEvent } from '@woocommerce/tracks';
+
+const BetaFeaturesTrackingModal = ( { updateOptions } ) => {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ isChecked, setIsChecked ] = useState( false );
+	const enableNavigationCheckbox = useRef(
+		document.querySelector( '#woocommerce_navigation_enabled' )
+	);
+
+	const setTracking = async ( allow ) => {
+		if ( typeof window.wcTracks.enable === 'function' ) {
+			if ( allow ) {
+				window.wcTracks.enable();
+			} else {
+				window.wcTracks.isEnabled = false;
+			}
+		}
+
+		if ( allow ) {
+			recordEvent( 'settings_features_tracking_enabled' );
+		}
+
+		return updateOptions( {
+			woocommerce_allow_tracking: allow ? 'yes' : 'no',
+		} );
+	};
+
+	useEffect( () => {
+		if ( ! enableNavigationCheckbox.current ) {
+			return;
+		}
+		const listener = ( e ) => {
+			if ( e.target.checked ) {
+				e.target.checked = false;
+				setIsModalOpen( true );
+			}
+		};
+
+		const checkbox = enableNavigationCheckbox.current;
+
+		checkbox.addEventListener( 'change', listener, false );
+
+		return () => checkbox.removeEventListener( 'change', listener );
+	}, [] );
+
+	if ( ! enableNavigationCheckbox.current ) {
+		return null;
+	}
+
+	if ( ! isModalOpen ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={ __( 'Build a Better WooCommerce', 'woocommerce-admin' ) }
+			onRequestClose={ () => setIsModalOpen( false ) }
+			className="woocommerce-beta-features-tracking-modal"
+		>
+			<p>
+				{ __(
+					'Testing new features requires sharing non-sensitive data via ',
+					'woocommerce-admin'
+				) }
+				<a href="https://woocommerce.com/usage-tracking">
+					{ __( 'usage tracking', 'woocommerce-admin' ) }
+				</a>
+				{ __(
+					'. Gathering usage data allows us to make WooCommerce better — your store will be considered as we evaluate new features, judge the quality of an update, or determine if an improvement makes sense. No personal data is tracked or stored and you can opt-out at any time.',
+					'woocommerce-admin'
+				) }
+			</p>
+			<div className="woocommerce-beta-features-tracking-modal__checkbox">
+				<CheckboxControl
+					label="Enable usage tracking"
+					onChange={ setIsChecked }
+					checked={ isChecked }
+				/>
+			</div>
+			<div className="woocommerce-beta-features-tracking-modal__actions">
+				<Button
+					isPrimary
+					onClick={ async () => {
+						if ( isChecked ) {
+							await setTracking( true );
+							enableNavigationCheckbox.current.checked = true;
+						} else {
+							await setTracking( false );
+						}
+						setIsModalOpen( false );
+					} }
+				>
+					{ __( 'Save', 'woocommerce-admin' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+};
+
+export const BetaFeaturesTrackingContainer = compose(
+	withDispatch( ( dispatch ) => {
+		const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
+		return { updateOptions };
+	} )
+)( BetaFeaturesTrackingModal );

plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/index.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BetaFeaturesTrackingContainer } from './container';
+import './style.scss';
+
+const betaFeaturesRoot = document.createElement( 'div' );
+betaFeaturesRoot.setAttribute( 'id', 'beta-features-tracking' );
+
+render(
+	<BetaFeaturesTrackingContainer />,
+	document.body.appendChild( betaFeaturesRoot )
+);

plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/style.scss

@@ -0,0 +1,12 @@
+.woocommerce-beta-features-tracking-modal__actions {
+	text-align: right;
+	margin-top: $gap-large;
+
+	.components-button.is-primary {
+		margin-left: $gap;
+	}
+}
+
+.woocommerce-beta-features-tracking-modal__checkbox {
+	padding: $gap 0;
+}

plugins/woocommerce-admin/src/Loader.php

@@ -63,6 +63,7 @@ class Loader {
 		add_action( 'init', array( __CLASS__, 'load_features' ), 4 );
 		add_filter( 'woocommerce_get_sections_advanced', array( __CLASS__, 'add_features_section' ) );
 		add_filter( 'woocommerce_get_settings_advanced', array( __CLASS__, 'add_features_settings' ), 10, 2 );
+		add_filter( 'woocommerce_get_settings_advanced', array( __CLASS__, 'maybe_load_beta_features_modal' ), 10, 2 );
 		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'register_scripts' ) );
 		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'inject_wc_settings_dependencies' ), 14 );
 		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'load_scripts' ), 15 );
@@ -260,6 +261,39 @@ class Loader {
 		return $sections;
 	}
 
+	/**
+	 * Conditionally loads the beta features tracking modal.
+	 *
+	 * @param array $settings Settings.
+	 * @return array
+	 */
+	public static function maybe_load_beta_features_modal( $settings ) {
+		$tracking_enabled = get_option( 'woocommerce_allow_tracking', 'no' );
+
+		if ( 'yes' === $tracking_enabled ) {
+			return $settings;
+		}
+
+		$rtl = is_rtl() ? '.rtl' : '';
+
+		wp_enqueue_style(
+			'wc-admin-beta-features-tracking-modal',
+			self::get_url( "beta-features-tracking-modal/style{$rtl}", 'css' ),
+			array( 'wp-components' ),
+			self::get_file_version( 'css' )
+		);
+
+		wp_enqueue_script(
+			'wc-admin-beta-features-tracking-modal',
+			self::get_url( 'wp-admin-scripts/beta-features-tracking-modal', 'js' ),
+			array( 'wp-i18n', 'wp-element', WC_ADMIN_APP ),
+			self::get_file_version( 'js' ),
+			true
+		);
+
+		return $settings;
+	}
+
 	/**
 	 * Adds the Features settings.
 	 *
@@ -286,7 +320,7 @@ class Loader {
 				array(
 					'title' => __( 'Features', 'woocommerce-admin' ),
 					'type'  => 'title',
-					'desc'  => __( 'Start using new features that are being progressively rolled out to improve the store management experience.', 'woocommerce-admin' ),
+					'desc'  => __( 'Test new features to improve the store management experience. These features might be included in future versions of WooCommerce. <a href="https://href.li/?https://woocommerce.com/usage-tracking/">Requires usage tracking.</a>', 'woocommerce-admin' ),
 					'id'    => 'features_options',
 				),
 			),

plugins/woocommerce-admin/webpack.config.js

@@ -78,6 +78,7 @@ const wpAdminScripts = [
 	'onboarding-product-import-notice',
 	'onboarding-tax-notice',
 	'print-shipping-label-banner',
+	'beta-features-tracking-modal',
 ];
 wpAdminScripts.forEach( ( name ) => {
 	entryPoints[ name ] = `./client/wp-admin-scripts/${ name }`;