Add navigation opt out modal (https://github.com/woocommerce/woocommerce-admin/pull/5857)

* Add navigation opt out script

* Check to see if opted out before loading opt out scripts

* Include opt out styles

* Close modal after clicking 'Share Feedback'

* Update to not use export default

plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/container.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Button, Modal } from '@wordpress/components';
+
+export class NavigationOptOutContainer extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			isModalOpen: true,
+		};
+	}
+
+	render() {
+		const { isModalOpen } = this.state;
+		if ( ! isModalOpen ) {
+			return null;
+		}
+
+		return (
+			<Modal
+				title={ __( 'Help us improve', 'woocommerce-admin' ) }
+				onRequestClose={ () => this.setState( { isModalOpen: false } ) }
+				className="woocommerce-navigation-opt-out-modal"
+			>
+				<p>
+					{ __(
+						"Take this 2-minute survey to share why you're opting out of the new navigation",
+						'woocommerce-admin'
+					) }
+				</p>
+
+				<div className="woocommerce-navigation-opt-out-modal__actions">
+					<Button
+						isDefault
+						onClick={ () =>
+							this.setState( { isModalOpen: false } )
+						}
+					>
+						{ __( 'No thanks', 'woocommerce-admin' ) }
+					</Button>
+
+					<Button
+						isPrimary
+						target="_blank"
+						href="https://automattic.survey.fm/new-navigation-opt-out"
+						onClick={ () =>
+							this.setState( { isModalOpen: false } )
+						}
+					>
+						{ __( 'Share feedback', 'woocommerce-admin' ) }
+					</Button>
+				</div>
+			</Modal>
+		);
+	}
+}

plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/index.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationOptOutContainer } from './container';
+import './style.scss';
+
+const navigationOptOutRoot = document.createElement( 'div' );
+navigationOptOutRoot.setAttribute( 'id', 'navigation-opt-out-root' );
+
+render(
+	<NavigationOptOutContainer />,
+	document.body.appendChild( navigationOptOutRoot )
+);

plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/style.scss

@@ -0,0 +1,8 @@
+.woocommerce-navigation-opt-out-modal__actions {
+	text-align: right;
+	margin-top: $gap-large;
+
+	.components-button.is-primary {
+		margin-left: $gap;
+	}
+}

plugins/woocommerce-admin/src/Features/Navigation/Init.php

@@ -23,6 +23,7 @@ class Init {
 		add_filter( 'woocommerce_admin_preload_options', array( $this, 'preload_options' ) );
 		add_filter( 'woocommerce_admin_features', array( $this, 'maybe_remove_nav_feature' ), 0 );
 		add_action( 'update_option_woocommerce_navigation_enabled', array( $this, 'reload_page_on_toggle' ), 10, 2 );
+		add_action( 'admin_enqueue_scripts', array( $this, 'maybe_enqueue_opt_out_scripts' ) );
 
 		if ( Loader::is_feature_enabled( 'navigation' ) ) {
 			add_action( 'in_admin_header', array( __CLASS__, 'embed_navigation' ) );
@@ -101,8 +102,40 @@ class Init {
 			return;
 		}
 
+		if ( 'yes' !== $value ) {
+			update_option( 'woocommerce_navigation_show_opt_out', 'yes' );
+		}
+
 		if ( isset( $_SERVER['REQUEST_URI'] ) ) {
 			wp_safe_redirect( wp_unslash( $_SERVER['REQUEST_URI'] ) );
+			exit();
 		}
 	}
+
+	/**
+	 * Enqueue the opt out scripts.
+	 */
+	public function maybe_enqueue_opt_out_scripts() {
+		if ( 'yes' !== get_option( 'woocommerce_navigation_show_opt_out', 'no' ) ) {
+			return;
+		}
+
+		$rtl = is_rtl() ? '.rtl' : '';
+		wp_enqueue_style(
+			'wc-admin-navigation-opt-out',
+			Loader::get_url( "navigation-opt-out/style{$rtl}", 'css' ),
+			array( 'wp-components' ),
+			Loader::get_file_version( 'css' )
+		);
+
+		wp_enqueue_script(
+			'wc-admin-navigation-opt-out',
+			Loader::get_url( 'wp-admin-scripts/navigation-opt-out', 'js' ),
+			array( 'wp-i18n', 'wp-element', WC_ADMIN_APP ),
+			Loader::get_file_version( 'js' ),
+			true
+		);
+
+		delete_option( 'woocommerce_navigation_show_opt_out' );
+	}
 }

plugins/woocommerce-admin/webpack.config.js

@@ -69,6 +69,7 @@ wcAdminPackages.forEach( ( name ) => {
 
 const wpAdminScripts = [
 	'marketing-coupons',
+	'navigation-opt-out',
 	'onboarding-homepage-notice',
 	'onboarding-product-notice',
 	'onboarding-product-import-notice',