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

This commit is contained in:
Joel Thiessen 2021-01-13 11:43:45 -08:00 committed by GitHub
parent 839c56d57a
commit 1a45ae2c0d
5 changed files with 180 additions and 1 deletions

View File

@ -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 );

View File

@ -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 )
);

View File

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

View File

@ -63,6 +63,7 @@ class Loader {
add_action( 'init', array( __CLASS__, 'load_features' ), 4 ); add_action( 'init', array( __CLASS__, 'load_features' ), 4 );
add_filter( 'woocommerce_get_sections_advanced', array( __CLASS__, 'add_features_section' ) ); 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__, '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__, 'register_scripts' ) );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'inject_wc_settings_dependencies' ), 14 ); add_action( 'admin_enqueue_scripts', array( __CLASS__, 'inject_wc_settings_dependencies' ), 14 );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'load_scripts' ), 15 ); add_action( 'admin_enqueue_scripts', array( __CLASS__, 'load_scripts' ), 15 );
@ -260,6 +261,39 @@ class Loader {
return $sections; 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. * Adds the Features settings.
* *
@ -286,7 +320,7 @@ class Loader {
array( array(
'title' => __( 'Features', 'woocommerce-admin' ), 'title' => __( 'Features', 'woocommerce-admin' ),
'type' => 'title', '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', 'id' => 'features_options',
), ),
), ),

View File

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