diff --git a/src/experiments/index.js b/src/experiments/index.js index 89c6f7e1e3b..ca383176862 100644 --- a/src/experiments/index.js +++ b/src/experiments/index.js @@ -4,17 +4,45 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { Button } from '@wordpress/components'; - +import { OPTIONS_STORE_NAME } from '@woocommerce/data'; /** * Internal dependencies */ import { STORE_KEY } from './data/constants'; import './data'; -function Experiments( { experiments, toggleExperiment } ) { +function Experiments( { + experiments, + toggleExperiment, + isTrackingEnabled, + isResolving, +} ) { + if ( isResolving ) { + return null; + } return (

Experiments

+ { isTrackingEnabled === 'no' && ( +

+ The following list might not be complete without tracking + enabled.
+ Please visit  + + WooCommerce → Settings → Advanced → + Woocommerce.com + +  and check{ ' ' } + Allow usage of WooCommerce to be tracked. +

+ ) } @@ -61,8 +89,12 @@ function Experiments( { experiments, toggleExperiment } ) { export default compose( withSelect( ( select ) => { const { getExperiments } = select( STORE_KEY ); + const { getOption, isResolving } = select( OPTIONS_STORE_NAME ); + return { experiments: getExperiments(), + isTrackingEnabled: getOption( 'woocommerce_allow_tracking' ), + isResolving: isResolving( 'getOption', [ 'getExperiments' ] ), }; } ), withDispatch( ( dispatch ) => { diff --git a/src/index.scss b/src/index.scss index ee3234dbfab..a87eb5dfc90 100644 --- a/src/index.scss +++ b/src/index.scss @@ -83,6 +83,13 @@ .components-notice { margin: 0px 0px 10px 0px; } + .tracking-disabled { + border: 1px solid #cc99c2; + border-left: 4px solid #cc99c2; + line-height: 1.5em; + background: #fff; + padding: 10px; + } } #wc-admin-test-helper-rest-api-filters {