From 1a45ae2c0da147f784c25e3790062eb837cc1887 Mon Sep 17 00:00:00 2001 From: Joel Thiessen <444632+joelclimbsthings@users.noreply.github.com> Date: Wed, 13 Jan 2021 11:43:45 -0800 Subject: [PATCH] Restrict beta features to only those that have opted into tracking, adding modal for navigation feature (https://github.com/woocommerce/woocommerce-admin/pull/6054) --- .../beta-features-tracking-modal/container.js | 114 ++++++++++++++++++ .../beta-features-tracking-modal/index.js | 18 +++ .../beta-features-tracking-modal/style.scss | 12 ++ plugins/woocommerce-admin/src/Loader.php | 36 +++++- plugins/woocommerce-admin/webpack.config.js | 1 + 5 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/container.js create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/index.js create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/style.scss diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/container.js b/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/container.js new file mode 100644 index 00000000000..bd6fc667878 --- /dev/null +++ b/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 ( + setIsModalOpen( false ) } + className="woocommerce-beta-features-tracking-modal" + > +

+ { __( + 'Testing new features requires sharing non-sensitive data via ', + 'woocommerce-admin' + ) } + + { __( 'usage tracking', 'woocommerce-admin' ) } + + { __( + '. 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' + ) } +

+
+ +
+
+ +
+ + ); +}; + +export const BetaFeaturesTrackingContainer = compose( + withDispatch( ( dispatch ) => { + const { updateOptions } = dispatch( OPTIONS_STORE_NAME ); + return { updateOptions }; + } ) +)( BetaFeaturesTrackingModal ); diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/index.js b/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/index.js new file mode 100644 index 00000000000..222d8400b56 --- /dev/null +++ b/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( + , + document.body.appendChild( betaFeaturesRoot ) +); diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/style.scss b/plugins/woocommerce-admin/client/wp-admin-scripts/beta-features-tracking-modal/style.scss new file mode 100644 index 00000000000..c401efa62da --- /dev/null +++ b/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; +} diff --git a/plugins/woocommerce-admin/src/Loader.php b/plugins/woocommerce-admin/src/Loader.php index fa0468ba87e..96fc90c940b 100644 --- a/plugins/woocommerce-admin/src/Loader.php +++ b/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. Requires usage tracking.', 'woocommerce-admin' ), 'id' => 'features_options', ), ), diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index dff25a9c1e9..bdbad10a625 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/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 }`;