Merge branch 'develop' into enhancement/8181-site-health-created-audi…

…ences.
google · May 27, 2024 · 9381a89 · 9381a89
2 parents 8d16c2e + 58d9589
commit 9381a89
Show file tree

Hide file tree

Showing 152 changed files with 1,773 additions and 454 deletions.
diff --git a/assets/js/components/DashboardMainApp.js b/assets/js/components/DashboardMainApp.js
@@ -48,6 +48,7 @@ import DateRangeSelector from './DateRangeSelector';
 import HelpMenu from './help/HelpMenu';
 import BannerNotifications from './notifications/BannerNotifications';
 import SurveyViewTrigger from './surveys/SurveyViewTrigger';
+import AdsModuleSetupCTAWidget from './notifications/AdsModuleSetupCTAWidget';
 import CurrentSurveyPortal from './surveys/CurrentSurveyPortal';
 import ConsentModeSetupCTAWidget from './consent-mode/ConsentModeSetupCTAWidget';
 import ScrollEffect from './ScrollEffect';
@@ -259,6 +260,7 @@ export default function DashboardMainApp() {
 						<AudienceSegmentationSetupCTAWidget />
 					) }
 					<ConsentModeSetupCTAWidget />
+					<AdsModuleSetupCTAWidget />
 				</Fragment>
 			) }
 

diff --git a/assets/js/components/WarningNotice.js b/assets/js/components/WarningNotice.js
@@ -0,0 +1,30 @@
+/**
+ * WarningNotice component.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+export default function WarningNotice( { children } ) {
+	return <div className="googlesitekit-warning-notice">{ children }</div>;
+}
+
+WarningNotice.propTypes = {
+	children: PropTypes.node.isRequired,
+};
diff --git a/assets/js/components/WarningNotice.stories.js b/assets/js/components/WarningNotice.stories.js
@@ -0,0 +1,58 @@
+/**
+ * WarningNotice Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WarningNotice from './WarningNotice';
+import Link from './Link';
+import ExternalIcon from '../../svg/icons/external-rounded.svg';
+
+function Template( args ) {
+	return <WarningNotice { ...args } />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'WarningNotice';
+Default.scenario = {
+	label: 'Components/WarningNotice',
+};
+Default.args = {
+	children: createInterpolateElement(
+		'Ad blocker detected; please disable it to get the latest AdSense data. <Link>Get help</Link>',
+		{
+			Link: (
+				<Link
+					href="#"
+					external
+					hideExternalIndicator
+					trailingIcon={ <ExternalIcon width={ 13 } height={ 14 } /> }
+				/>
+			),
+		}
+	),
+};
+
+export default {
+	title: 'Components/WarningNotice',
+};
diff --git a/assets/js/components/consent-mode/ConsentModeSetupCTAWidget.js b/assets/js/components/consent-mode/ConsentModeSetupCTAWidget.js
@@ -222,23 +222,23 @@ function ConsentModeSetupCTAWidget( { Widget, WidgetNull } ) {
 					<Cell size={ 12 }>
 						<Widget
 							noPadding
-							className="googlesitekit-consent-mode-setup-cta-widget"
+							className="googlesitekit-setup-cta-banner googlesitekit-consent-mode-setup-cta-widget"
 						>
 							<Grid collapsed ref={ trackingRef }>
 								<Row>
 									<Cell
 										smSize={ 6 }
 										mdSize={ 8 }
 										lgSize={ 6 }
-										className="googlesitekit-consent-mode-setup-cta-widget__primary-cell"
+										className="googlesitekit-setup-cta-banner__primary-cell"
 									>
-										<h3 className="googlesitekit-consent-mode-setup-cta-widget__title">
+										<h3 className="googlesitekit-setup-cta-banner__title">
 											{ __(
 												'Enable Consent Mode to preserve tracking for your Ads campaigns',
 												'google-site-kit'
 											) }
 										</h3>
-										<p className="googlesitekit-consent-mode-setup-cta-widget__description">
+										<p className="googlesitekit-setup-cta-banner__description">
 											{ createInterpolateElement(
 												__(
 													'Consent mode interacts with your Consent Management Platform (CMP) or custom implementation for obtaining visitor consent, such as a cookie consent banner. <a>Learn more</a>',
@@ -265,7 +265,7 @@ function ConsentModeSetupCTAWidget( { Widget, WidgetNull } ) {
 												message={ saveError.message }
 											/>
 										) }
-										<div className="googlesitekit-consent-mode-setup-cta-widget__actions-wrapper">
+										<div className="googlesitekit-setup-cta-banner__actions-wrapper">
 											<Fragment>
 												<SpinnerButton
 													onClick={ handleCTAClick }
@@ -297,7 +297,7 @@ function ConsentModeSetupCTAWidget( { Widget, WidgetNull } ) {
 									</Cell>
 									<Cell
 										alignBottom
-										className="googlesitekit-consent-mode-setup-cta-widget__svg-wrapper"
+										className="googlesitekit-setup-cta-banner__svg-wrapper"
 										smSize={ 6 }
 										mdSize={ 8 }
 										lgSize={ 6 }

diff --git a/...nse/components/common/AdBlockerWarning.js → ...ponents/notifications/AdBlockerWarning.js b/...nse/components/common/AdBlockerWarning.js → ...ponents/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,
+};
diff --git a/...omponents/common/AdBlockerWarning.test.js → ...ts/notifications/AdBlockerWarning.test.js b/...omponents/common/AdBlockerWarning.test.js → ...ts/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,44 +49,62 @@ 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-settings-module-warning' )
+			container.querySelector( '.googlesitekit-warning-notice' )
 		).not.toEqual( null );
 
 		expect( container.textContent ).toContain( 'to set up AdSense' );
 	} );
 
 	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-settings-module-warning' )
+			container.querySelector( '.googlesitekit-warning-notice' )
 		).not.toEqual( null );
 
 		expect( container.textContent ).toContain( 'latest AdSense data' );
 	} );
 
 	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 );
 	} );

diff --git a/.../js/components/AdBlockerWarningMessage.js → .../notifications/AdBlockerWarningMessage.js b/.../js/components/AdBlockerWarningMessage.js → .../notifications/AdBlockerWarningMessage.js
@@ -30,8 +30,9 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ErrorIcon from '../../svg/icons/error.svg';
-import Link from './Link';
+import Link from '../Link';
+import WarningNotice from '../WarningNotice';
+import ExternalIcon from '../../../svg/icons/external-rounded.svg';
 
 export default function AdBlockerWarningMessage( {
 	getHelpLink = '',
@@ -42,23 +43,28 @@ export default function AdBlockerWarningMessage( {
 	}
 
 	return (
-		<div className="googlesitekit-settings-module-warning">
+		<WarningNotice>
 			{ createInterpolateElement(
 				sprintf(
 					/* translators: 1: The warning message. 2: "Get help" text. */
-					__(
-						'<ErrorIcon /> %1$s. <Link>%2$s</Link>',
-						'google-site-kit'
-					),
+					__( '%1$s. <Link>%2$s</Link>', 'google-site-kit' ),
 					warningMessage,
 					__( 'Get help', 'google-site-kit' )
 				),
 				{
-					ErrorIcon: <ErrorIcon height="20" width="23" />,
-					Link: <Link href={ getHelpLink } external />,
+					Link: (
+						<Link
+							href={ getHelpLink }
+							external
+							hideExternalIndicator
+							trailingIcon={
+								<ExternalIcon width={ 13 } height={ 14 } />
+							}
+						/>
+					),
 				}
 			) }
-		</div>
+		</WarningNotice>
 	);
 }