From 2068b36fe74862c37930434fd79877b0d5177548 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Wed, 16 Dec 2020 09:08:14 -0500 Subject: [PATCH] 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 --- .../navigation-opt-out/container.js | 59 +++++++++++++++++++ .../navigation-opt-out/index.js | 18 ++++++ .../navigation-opt-out/style.scss | 8 +++ .../src/Features/Navigation/Init.php | 33 +++++++++++ plugins/woocommerce-admin/webpack.config.js | 1 + 5 files changed, 119 insertions(+) create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/container.js create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/index.js create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/style.scss diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/container.js b/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/container.js new file mode 100644 index 00000000000..5a5cd5f6785 --- /dev/null +++ b/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 ( + this.setState( { isModalOpen: false } ) } + className="woocommerce-navigation-opt-out-modal" + > +

+ { __( + "Take this 2-minute survey to share why you're opting out of the new navigation", + 'woocommerce-admin' + ) } +

+ +
+ + + +
+ + ); + } +} diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/index.js b/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/index.js new file mode 100644 index 00000000000..9f52860e34a --- /dev/null +++ b/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( + , + document.body.appendChild( navigationOptOutRoot ) +); diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/style.scss b/plugins/woocommerce-admin/client/wp-admin-scripts/navigation-opt-out/style.scss new file mode 100644 index 00000000000..5797952fab1 --- /dev/null +++ b/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; + } +} diff --git a/plugins/woocommerce-admin/src/Features/Navigation/Init.php b/plugins/woocommerce-admin/src/Features/Navigation/Init.php index 1e5fe55896e..91a30c84040 100644 --- a/plugins/woocommerce-admin/src/Features/Navigation/Init.php +++ b/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' ); + } } diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index b189694119f..8fc7b167663 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/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',