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 }`;