Enhancement/7251 Restyle AdBlock Warning in Connect Services

assets/js/modules/adsense/components/common/AdBlockerWarning.js → assets/js/components/notifications/AdBlockerWarning.js

@@ -16,23 +16,30 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-
-import { MODULES_ADSENSE } from '../../datastore/constants';
-import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
-import AdBlockerWarningMessage from '../../../../components/AdBlockerWarningMessage';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import AdBlockerWarningMessage from './AdBlockerWarningMessage';
 const { useSelect } = Data;
 
-export default function AdBlockerWarning() {
+export default function AdBlockerWarning( { moduleSlug } ) {
+	const storeName = useSelect( ( select ) =>
+		select( CORE_MODULES ).getModuleStoreName( moduleSlug )
+	);
 	const adBlockerWarningMessage = useSelect( ( select ) =>
-		select( MODULES_ADSENSE ).getAdBlockerWarningMessage()
+		select( storeName )?.getAdBlockerWarningMessage()
 	);
 	const getHelpLink = useSelect( ( select ) =>
 		select( CORE_SITE ).getDocumentationLinkURL(
-			'adsense-ad-blocker-detected'
+			moduleSlug + '-ad-blocker-detected'
 		)
 	);
 
@@ -43,3 +50,7 @@ export default function AdBlockerWarning() {
 		/>
 	);
 }
+
+AdBlockerWarning.propTypes = {
+	moduleSlug: PropTypes.string.isRequired,
+};

assets/js/modules/adsense/components/common/AdBlockerWarning.test.js → assets/js/components/notifications/AdBlockerWarning.test.js

@@ -20,10 +20,13 @@
  * Internal dependencies
  */
 import AdBlockerWarning from './AdBlockerWarning';
-import { render } from '../../../../../../tests/js/test-utils';
-import { MODULES_ADSENSE } from '../../datastore/constants';
-import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
-import { provideModules } from '../../../../../../tests/js/utils';
+import { render } from '../../../../tests/js/test-utils';
+import { MODULES_ADSENSE } from '../../modules/adsense/datastore/constants';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import {
+	provideModules,
+	provideModuleRegistrations,
+} from '../../../../tests/js/utils';
 
 const setupAdBlockerNotConnectedRegistry = ( registry ) => {
 	provideModules( registry, [
@@ -33,6 +36,7 @@ const setupAdBlockerNotConnectedRegistry = ( registry ) => {
 			connected: false,
 		},
 	] );
+	provideModuleRegistrations( registry );
 	registry.dispatch( MODULES_ADSENSE ).receiveGetSettings( {} );
 	registry.dispatch( CORE_USER ).receiveIsAdBlockerActive( true );
 };
@@ -45,20 +49,32 @@ const setupAdBlockerConnectedRegistry = ( registry ) => {
 			connected: true,
 		},
 	] );
+	provideModuleRegistrations( registry );
 	registry.dispatch( MODULES_ADSENSE ).receiveGetSettings( {} );
 	registry.dispatch( CORE_USER ).receiveIsAdBlockerActive( true );
 };
 
 const setupNoAdBlockerRegistry = ( registry ) => {
+	provideModules( registry, [
+		{
+			slug: 'adsense',
+			active: true,
+			connected: true,
+		},
+	] );
+	provideModuleRegistrations( registry );
 	registry.dispatch( MODULES_ADSENSE ).receiveGetSettings( {} );
 	registry.dispatch( CORE_USER ).receiveIsAdBlockerActive( false );
 };
 
 describe( 'AdBlockerWarning', () => {
 	it( 'should render the warning when an AdBlocker is active and module is not connected', () => {
-		const { container } = render( <AdBlockerWarning />, {
-			setupRegistry: setupAdBlockerNotConnectedRegistry,
-		} );
+		const { container } = render(
+			<AdBlockerWarning moduleSlug="adsense" />,
+			{
+				setupRegistry: setupAdBlockerNotConnectedRegistry,
+			}
+		);
 
 		expect(
 			container.querySelector( '.googlesitekit-warning-notice' )
@@ -68,9 +84,12 @@ describe( 'AdBlockerWarning', () => {
 	} );
 
 	it( 'should render the warning when an AdBlocker is active and module is connected', () => {
-		const { container } = render( <AdBlockerWarning />, {
-			setupRegistry: setupAdBlockerConnectedRegistry,
-		} );
+		const { container } = render(
+			<AdBlockerWarning moduleSlug="adsense" />,
+			{
+				setupRegistry: setupAdBlockerConnectedRegistry,
+			}
+		);
 
 		expect(
 			container.querySelector( '.googlesitekit-warning-notice' )
@@ -80,9 +99,12 @@ describe( 'AdBlockerWarning', () => {
 	} );
 
 	it( 'should render nothing when no AdBlocker is active', () => {
-		const { container } = render( <AdBlockerWarning />, {
-			setupRegistry: setupNoAdBlockerRegistry,
-		} );
+		const { container } = render(
+			<AdBlockerWarning moduleSlug="adsense" />,
+			{
+				setupRegistry: setupNoAdBlockerRegistry,
+			}
+		);
 
 		expect( container.firstChild ).toEqual( null );
 	} );

assets/js/components/AdBlockerWarningMessage.js → assets/js/components/notifications/AdBlockerWarningMessage.js

@@ -30,9 +30,9 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Link from './Link';
-import WarningNotice from './WarningNotice';
-import ExternalIcon from '../../svg/icons/external-rounded.svg';
+import Link from '../Link';
+import WarningNotice from '../WarningNotice';
+import ExternalIcon from '../../../svg/icons/external-rounded.svg';
 
 export default function AdBlockerWarningMessage( {
 	getHelpLink = '',

assets/js/components/notifications/ModuleSettingsWarning.js

@@ -21,13 +21,12 @@
  */
 import Data from 'googlesitekit-data';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { ERROR_CODE_ADBLOCKER_ACTIVE } from '../../googlesitekit/datastore/user/constants';
 import WarningNotice from '../WarningNotice';
+import AdBlockerWarning from './AdBlockerWarning';
 
 const { useSelect } = Data;
 
-/*
- * A single module. Keeps track of its own active state and settings.
- */
 export default function ModuleSettingsWarning( { slug } ) {
 	const error = useSelect( ( select ) =>
 		select( CORE_MODULES )?.getCheckRequirementsError( slug )
@@ -37,5 +36,11 @@ export default function ModuleSettingsWarning( { slug } ) {
 		return null;
 	}
 
+	// The AdBlockerWarning component also renders the "Get help"
+	// documentation URL in addition to the error message.
+	if ( ERROR_CODE_ADBLOCKER_ACTIVE === error.code ) {
+		return <AdBlockerWarning moduleSlug={ slug } />;
+	}
+
 	return <WarningNotice>{ error.message }</WarningNotice>;
 }

assets/js/components/settings/DefaultSettingsSetupIncomplete.js

@@ -44,19 +44,29 @@ export default function DefaultSettingsSetupIncomplete( { slug } ) {
 	const adminReauthURL = useSelect( ( select ) =>
 		select( storeName )?.getAdminReauthURL?.()
 	);
+	const requirementsError = useSelect( ( select ) =>
+		select( CORE_MODULES )?.getCheckRequirementsError( slug )
+	);
 
 	return (
 		<Cell size={ 12 }>
 			<div className="googlesitekit-settings-module__fields-group googlesitekit-settings-module__fields-group--no-border">
 				<ModuleSettingsWarning slug={ slug } />
 			</div>
+
 			{ createInterpolateElement(
 				__(
 					'Setup incomplete: <a>continue module setup</a>',
 					'google-site-kit'
 				),
 				{
-					a: <Link href={ adminReauthURL } />,
+					a: (
+						<Link
+							className="googlesitekit-settings-module__edit-button"
+							href={ adminReauthURL }
+							disabled={ requirementsError ? true : false }
+						/>
+					),
 				}
 			) }
 		</Cell>

assets/js/components/settings/SetupModule.js

@@ -90,11 +90,7 @@ export default function SetupModule( { slug, name, description } ) {
 		<div
 			className={ classnames(
 				'googlesitekit-settings-connect-module',
-				`googlesitekit-settings-connect-module--${ slug }`,
-				{
-					'googlesitekit-settings-connect-module--disabled':
-						canActivateModule === false,
-				}
+				`googlesitekit-settings-connect-module--${ slug }`
 			) }
 			key={ slug }
 		>
@@ -126,8 +122,6 @@ export default function SetupModule( { slug, name, description } ) {
 				{ description }
 			</p>
 
-			<ModuleSettingsWarning slug={ slug } />
-
 			<p className="googlesitekit-settings-connect-module__cta">
 				<Link
 					onClick={ onSetup }
@@ -142,6 +136,8 @@ export default function SetupModule( { slug, name, description } ) {
 					) }
 				</Link>
 			</p>
+
+			<ModuleSettingsWarning slug={ slug } />
 		</div>
 	);
 }

assets/js/modules/ads/components/common/index.js

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-export { default as AdBlockerWarning } from './AdBlockerWarning';
 export { default as ConversionIDTextField } from './ConversionIDTextField';
 export { default as PAXEmbeddedApp } from './PAXEmbeddedApp';

assets/js/modules/ads/components/dashboard/PartnerAdsPAXWidget.js

@@ -34,7 +34,7 @@ import whenActive from '../../../../util/when-active';
 import whenScopesGranted from '../../../../util/whenScopesGranted';
 import { ADWORDS_SCOPE, MODULES_ADS } from '../../datastore/constants';
 import PAXEmbeddedApp from '../common/PAXEmbeddedApp';
-import { AdBlockerWarning } from '../common';
+import AdBlockerWarning from '../../../../components/notifications/AdBlockerWarning';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import { CORE_WIDGETS } from '../../../../googlesitekit/widgets/datastore/constants';
 const { useSelect } = Data;
@@ -65,7 +65,7 @@ function PartnerAdsPAXWidget( { WidgetNull, Widget } ) {
 	if ( isAdblockerActive ) {
 		return (
 			<Widget>
-				<AdBlockerWarning />
+				<AdBlockerWarning moduleSlug="ads" />
 			</Widget>
 		);
 	}

assets/js/modules/ads/components/settings/SettingsEdit.js

@@ -25,7 +25,7 @@ import { MODULES_ADS } from '../../datastore/constants';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import SettingsForm from './SettingsForm';
 import SettingsView from './SettingsView';
-import AdBlockerWarning from '../common/AdBlockerWarning';
+import AdBlockerWarning from '../../../../components/notifications/AdBlockerWarning';
 import { useFeature } from './../../../../hooks/useFeature';
 const { useSelect } = Data;
 
@@ -50,7 +50,7 @@ export default function SettingsEdit() {
 
 	let viewComponent;
 	if ( isAdBlockerActive ) {
-		viewComponent = <AdBlockerWarning />;
+		viewComponent = <AdBlockerWarning moduleSlug="ads" />;
 	} else if ( paxEnabled && ( paxConversionID || extCustomerID ) ) {
 		viewComponent = <SettingsView />;
 	} else if ( isDoingSubmitChanges ) {