diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.js index f29c00290d8..f9341c8d75f 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.js @@ -33,11 +33,9 @@ import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants'; import SupportLink from '../../../../components/SupportLink'; import Badge from '../../../../components/Badge'; import { ACCOUNT_STATUS_READY, SITE_STATUS_READY } from '../../util'; -import { useFeature } from '../../../../hooks/useFeature'; const { useSelect } = Data; export default function AdBlockingRecoveryCTA() { - const adBlockerDetectionEnabled = useFeature( 'adBlockerDetection' ); const adBlockingRecoverySetupStatus = useSelect( ( select ) => select( MODULES_ADSENSE ).getAdBlockingRecoverySetupStatus() ); @@ -52,7 +50,6 @@ export default function AdBlockingRecoveryCTA() { ); if ( - ! adBlockerDetectionEnabled || adBlockingRecoverySetupStatus !== '' || accountStatus !== ACCOUNT_STATUS_READY || siteStatus !== SITE_STATUS_READY diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.stories.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.stories.js index 793c612f36d..d176a7cbe45 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.stories.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.stories.js @@ -41,9 +41,6 @@ Ready.storyName = 'Ready'; Ready.scenario = { label: 'Global/AdBlockingRecoveryCTA/Ready', }; -Ready.parameters = { - features: [ 'adBlockerDetection' ], -}; export default { title: 'Modules/AdSense/Components/AdBlockingRecoveryCTA', diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.test.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.test.js index b1ad37b4b2a..44b745a47c2 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.test.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryCTA.test.js @@ -34,26 +34,17 @@ import { describe( 'AdBlockingRecoveryCTA', () => { it.each( [ - [ - 'the Ad blocker detection feature flag is not enabled', - ACCOUNT_STATUS_PENDING, - SITE_STATUS_READY, - '', - false, - ], [ 'Adsense account status is not ready', ACCOUNT_STATUS_PENDING, SITE_STATUS_READY, '', - true, ], [ 'Adsense site status is not ready', ACCOUNT_STATUS_READY, SITE_STATUS_ADDED, '', - true, ], [ 'Ad blocking recovery status is not an empty string', @@ -68,13 +59,9 @@ describe( 'AdBlockingRecoveryCTA', () => { testName, accountStatus, siteStatus, - adBlockingRecoverySetupStatus, - adBlockerDetectionEnabled + adBlockingRecoverySetupStatus ) => { const { container } = render( , { - features: [].concat( - adBlockerDetectionEnabled ? 'adBlockerDetection' : [] - ), setupRegistry: ( registry ) => { provideModules( registry, [ { @@ -105,7 +92,6 @@ describe( 'AdBlockingRecoveryCTA', () => { it( 'should render the CTA when Ad Blocking Recovery is not set up', () => { const { container } = render( , { - features: [ 'adBlockerDetection' ], setupRegistry: ( registry ) => { provideModules( registry, [ { diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.js index 1c84e50c162..9ff2c469909 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.js @@ -38,13 +38,10 @@ import { } from '../../datastore/constants'; import Link from '../../../../components/Link'; import SettingsNotice from '../../../../components/SettingsNotice/SettingsNotice'; -import { useFeature } from '../../../../hooks/useFeature'; import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants'; const { useSelect, useDispatch } = Data; export default function AdBlockingRecoveryToggle() { - const adBlockerDetectionEnabled = useFeature( 'adBlockerDetection' ); - const adBlockerDetectionSnippet = useSelect( ( select ) => select( MODULES_ADSENSE ).getUseAdBlockerDetectionSnippet() ); @@ -108,7 +105,7 @@ export default function AdBlockingRecoveryToggle() { setValues( AD_BLOCKING_FORM_SETTINGS, initialToggleValues ); } ); - if ( ! adBlockerDetectionEnabled || ! adBlockingRecoverySetupStatus ) { + if ( ! adBlockingRecoverySetupStatus ) { return null; } diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.stories.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.stories.js index 47b4856bef1..052fc528c0c 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.stories.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.stories.js @@ -49,9 +49,6 @@ Ready.args = { .receiveGetSettings( validSettings ); }, }; -Ready.parameters = { - features: [ 'adBlockerDetection' ], -}; export const WithAdBlockingRecoveryTagEnabled = Template.bind( {} ); WithAdBlockingRecoveryTagEnabled.storyName = @@ -65,9 +62,6 @@ WithAdBlockingRecoveryTagEnabled.args = { } ); }, }; -WithAdBlockingRecoveryTagEnabled.parameters = { - features: [ 'adBlockerDetection' ], -}; export const WithBothTogglesEnabled = Template.bind( {} ); WithBothTogglesEnabled.storyName = 'With Both The Toggles Enabled'; @@ -80,9 +74,6 @@ WithBothTogglesEnabled.args = { } ); }, }; -WithBothTogglesEnabled.parameters = { - features: [ 'adBlockerDetection' ], -}; export default { title: 'Modules/AdSense/Components/AdBlockingRecoveryToggle', diff --git a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.test.js b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.test.js index 3949ec25687..e23d17161e4 100644 --- a/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.test.js +++ b/assets/js/modules/adsense/components/common/AdBlockingRecoveryToggle.test.js @@ -41,45 +41,35 @@ describe( 'AdBlockingRecoveryToggle', () => { adBlockingRecoverySetupStatus: '', }; - it.each( [ - [ 'the Ad blocker detection feature flag is not enabled', false ], - [ 'Ad blocker recovery setup status is empty', true ], - ] )( - 'should not render the Ad blocking recovery toggle when %s', - ( testName, adBlockerDetectionEnabled ) => { - const { container } = render( , { - features: [].concat( - adBlockerDetectionEnabled ? 'adBlockerDetection' : [] - ), - setupRegistry: ( registry ) => { - provideModules( registry, [ - { - slug: 'adsense', - active: true, - connected: true, - }, - ] ); - registry - .dispatch( MODULES_ADSENSE ) - .receiveGetSettings( validSettings ); - }, - } ); + it( 'should not render the Ad blocking recovery toggle when Ad blocker recovery setup status is empty', () => { + const { container } = render( , { + setupRegistry: ( registry ) => { + provideModules( registry, [ + { + slug: 'adsense', + active: true, + connected: true, + }, + ] ); + registry + .dispatch( MODULES_ADSENSE ) + .receiveGetSettings( validSettings ); + }, + } ); - expect( - container.querySelector( - '.googlesitekit-settings-module__ad-blocking-recovery-toggles' - ) - ).toBeNull(); + expect( + container.querySelector( + '.googlesitekit-settings-module__ad-blocking-recovery-toggles' + ) + ).toBeNull(); - expect( container ).toBeEmptyDOMElement(); - } - ); + expect( container ).toBeEmptyDOMElement(); + } ); it( 'should render the Ad blocking recovery toggle when the conditions are met', () => { const { container, getByLabelText, getAllByRole } = render( , { - features: [ 'adBlockerDetection' ], setupRegistry: ( registry ) => { provideModules( registry, [ { @@ -131,7 +121,6 @@ describe( 'AdBlockingRecoveryToggle', () => { const { getByLabelText, getAllByRole, queryByLabelText } = render( , { - features: [ 'adBlockerDetection' ], setupRegistry: ( registry ) => { provideModules( registry, [ { @@ -171,7 +160,6 @@ describe( 'AdBlockingRecoveryToggle', () => { const { getByLabelText, getAllByRole, container } = render( , { - features: [ 'adBlockerDetection' ], setupRegistry: ( registry ) => { provideModules( registry, [ { diff --git a/assets/js/modules/adsense/components/settings/SettingsForm.js b/assets/js/modules/adsense/components/settings/SettingsForm.js index dc7216437e9..79666c25672 100644 --- a/assets/js/modules/adsense/components/settings/SettingsForm.js +++ b/assets/js/modules/adsense/components/settings/SettingsForm.js @@ -39,9 +39,12 @@ import WebStoriesAdUnitSelect from '../common/WebStoriesAdUnitSelect'; import Link from '../../../../components/Link'; import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants'; import AdBlockingRecoveryCTA from '../common/AdBlockingRecoveryCTA'; +import { useFeature } from '../../../../hooks/useFeature'; const { useSelect } = Data; export default function SettingsForm() { + const adBlockerDetectionEnabled = useFeature( 'adBlockerDetection' ); + const webStoriesActive = useSelect( ( select ) => select( CORE_SITE ).isWebStoriesActive() ); @@ -125,9 +128,12 @@ export default function SettingsForm() { - - - + { adBlockerDetectionEnabled && ( + + + + + ) } ); } diff --git a/assets/js/modules/adsense/components/settings/SettingsView.js b/assets/js/modules/adsense/components/settings/SettingsView.js index 923f1fd04f0..25d4312e72a 100644 --- a/assets/js/modules/adsense/components/settings/SettingsView.js +++ b/assets/js/modules/adsense/components/settings/SettingsView.js @@ -44,6 +44,7 @@ const { useSelect } = Data; export default function SettingsView() { const adsenseSetupV2Enabled = useFeature( 'adsenseSetupV2' ); + const adBlockerDetectionEnabled = useFeature( 'adBlockerDetection' ); const accountID = useSelect( ( select ) => select( MODULES_ADSENSE ).getAccountID() @@ -179,52 +180,59 @@ export default function SettingsView() { ) } - { !! adBlockingRecoverySetupStatus?.length && ( -
-
-
- { __( 'Ad blocking recovery', 'google-site-kit' ) } -
- { adBlockingRecoverySetupStatus === - 'setup-confirmed' && ( -

+ { adBlockerDetectionEnabled && + !! adBlockingRecoverySetupStatus?.length && ( +

+
+
{ __( - 'Ad blocking recovery tag is not placed', + 'Ad blocking recovery', 'google-site-kit' ) } -

- ) } - { adBlockingRecoverySetupStatus === 'tag-placed' && ( - +
+ { adBlockingRecoverySetupStatus === + 'setup-confirmed' && (

{ __( - 'Ad blocking recovery tag is placed', + 'Ad blocking recovery tag is not placed', 'google-site-kit' ) }

-

- { createInterpolateElement( - __( - 'Ad blocking recovery only works if you’ve also created and published a recovery message in AdSense. Configure your message', + ) } + { adBlockingRecoverySetupStatus === + 'tag-placed' && ( + +

+ { __( + 'Ad blocking recovery tag is placed', 'google-site-kit' - ), - { - a: ( - + ) } +

+

+ { createInterpolateElement( + __( + 'Ad blocking recovery only works if you’ve also created and published a recovery message in AdSense. Configure your message', + 'google-site-kit' ), - } - ) } -

- - ) } + { + a: ( + + ), + } + ) } +

+ + ) } +
-
- ) } + ) } - + { adBlockerDetectionEnabled && }
); }