Merge branch 'develop' into enhancement/10105-update-zero-data-report.

.github/workflows/js-css-lint-test.yml

@@ -73,4 +73,19 @@ jobs:
       - name: JS Lint
         run: npm run lint:js
       - name: Jest Tests
+        id: test-js
         run: npm run test:js
+        continue-on-error: true
+      - name: Jest Tests (Retry Failures 1)
+        id: test-js-retry-1
+        run: npm run test:js -- --onlyFailures
+        if: steps.test-js.outcome == 'failure'
+        continue-on-error: true
+      - name: Jest Tests (Retry Failures 2)
+        id: test-js-retry-2
+        run: npm run test:js -- --onlyFailures
+        if: steps.test-js-retry-1.outcome == 'failure'
+        continue-on-error: true
+      - name: Jest Tests (Retry Failures 3)
+        run: npm run test:js -- --onlyFailures
+        if: steps.test-js-retry-2.outcome == 'failure'

assets/js/components/KeyMetrics/ConversionReportingDashboardSubtleNotification.js

@@ -25,51 +25,27 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useSelect } from 'googlesitekit-data';
 import { Button, SpinnerButton } from 'googlesitekit-components';
 import StarFill from '../../../svg/icons/star-fill.svg';
 import SubtleNotification from '../../googlesitekit/notifications/components/layout/SubtleNotification';
-import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
-import Link from '../Link';
 
 export default function ConversionReportingDashboardSubtleNotification( {
+	description,
 	ctaLabel,
 	handleCTAClick,
 	isSaving = false,
 	onDismiss,
 	dismissCTALabel = __( 'Maybe later', 'google-site-kit' ),
 } ) {
-	const documentationURL = useSelect( ( select ) =>
-		select( CORE_SITE ).getDocumentationLinkURL( 'key-metrics' )
-	);
-
 	return (
 		<SubtleNotification
 			className="googlesitekit-acr-subtle-notification"
 			title={ __( 'New key metrics were added!', 'google-site-kit' ) }
-			description={ createInterpolateElement(
-				__(
-					'We’ve extended your metrics selection with metrics that aren’t available by default in Analytics. Add them to your dashboard to get a better understanding of how users interact with your site. <a>Learn more</a>',
-					'google-site-kit'
-				),
-				{
-					a: (
-						<Link
-							href={ documentationURL }
-							external
-							aria-label={ __(
-								'Learn more about advanced conversion reporting',
-								'google-site-kit'
-							) }
-						/>
-					),
-				}
-			) }
+			description={ description }
 			dismissCTA={
 				<Button tertiary onClick={ onDismiss }>
 					{ dismissCTALabel }
@@ -86,6 +62,7 @@ export default function ConversionReportingDashboardSubtleNotification( {
 }
 
 ConversionReportingDashboardSubtleNotification.propTypes = {
+	description: PropTypes.string.isRequired,
 	ctaLabel: PropTypes.string.isRequired,
 	handleCTAClick: PropTypes.func.isRequired,
 	isSaving: PropTypes.bool,

assets/js/components/KeyMetrics/ConversionReportingNotificationCTAWidget.js

@@ -27,6 +27,7 @@ import { useIntersection } from 'react-use';
  */
 import { __ } from '@wordpress/i18n';
 import {
+	createInterpolateElement,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -52,6 +53,8 @@ import useDisplayNewEventsCalloutForTailoredMetrics from './hooks/useDisplayNewE
 import useDisplayNewEventsCalloutForUserPickedMetrics from './hooks/useDisplayNewEventsCalloutForUserPickedMetrics';
 import useDisplayNewEventsCalloutAfterInitialDetection from './hooks/useDisplayNewEventsCalloutAfterInitialDetection';
 import { trackEvent } from '../../util';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import Link from '../Link';
 
 function ConversionReportingNotificationCTAWidget( { Widget, WidgetNull } ) {
 	const viewContext = useViewContext();
@@ -359,6 +362,10 @@ function ConversionReportingNotificationCTAWidget( { Widget, WidgetNull } ) {
 		shouldShowCalloutForLostEvents,
 	] );
 
+	const documentationURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getDocumentationLinkURL( 'key-metrics' )
+	);
+
 	if (
 		! shouldShowInitialCalloutForTailoredMetrics &&
 		! shouldShowCalloutForLostEvents &&
@@ -368,12 +375,34 @@ function ConversionReportingNotificationCTAWidget( { Widget, WidgetNull } ) {
 		return <WidgetNull />;
 	}
 
+	let description = createInterpolateElement(
+		__(
+			'We’ve extended your metrics selection with metrics that aren’t available by default in Analytics. Add them to your dashboard to get a better understanding of how users interact with your site. <a>Learn more</a>',
+			'google-site-kit'
+		),
+		{
+			a: (
+				<Link
+					href={ documentationURL }
+					external
+					aria-label={ __(
+						'Learn more about advanced conversion reporting',
+						'google-site-kit'
+					) }
+				/>
+			),
+		}
+	);
 	let ctaLabel = __( 'Select metrics', 'google-site-kit' );
 
 	if ( shouldShowInitialCalloutForTailoredMetrics ) {
 		ctaLabel = __( 'Add metrics', 'google-site-kit' );
 	}
 	if ( shouldShowCalloutForNewEvents ) {
+		description = __(
+			'We’ve extended your metrics selection with metrics that aren’t available by default in Analytics.',
+			'google-site-kit'
+		);
 		ctaLabel = __( 'View metrics', 'google-site-kit' );
 	}
 
@@ -391,6 +420,7 @@ function ConversionReportingNotificationCTAWidget( { Widget, WidgetNull } ) {
 				shouldShowCalloutForUserPickedMetrics ||
 				shouldShowCalloutForNewEvents ) && (
 				<ConversionReportingDashboardSubtleNotification
+					description={ description }
 					ctaLabel={ ctaLabel }
 					handleCTAClick={
 						shouldShowInitialCalloutForTailoredMetrics

assets/js/components/KeyMetrics/ConversionReportingNotificationCTAWidget.test.js

@@ -696,7 +696,7 @@ describe( 'ConversionReportingNotificationCTAWidget', () => {
 				isWidgetHidden: false,
 			} );
 
-			const { getByRole, waitForRegistry } = render(
+			const { getByRole, getByText, waitForRegistry } = render(
 				<ConversionReportingNotificationCTAWidget
 					Widget={ Widget }
 					WidgetNull={ WidgetNull }
@@ -713,6 +713,17 @@ describe( 'ConversionReportingNotificationCTAWidget', () => {
 				getByRole( 'button', { name: 'View metrics' } )
 			).toBeInTheDocument();
 
+			expect(
+				getByText(
+					( content, testElement ) =>
+						testElement.tagName.toLowerCase() === 'p' &&
+						testElement.className ===
+							'googlesitekit-subtle-notification__secondary_description' &&
+						content ===
+							'We’ve extended your metrics selection with metrics that aren’t available by default in Analytics.'
+				)
+			).toBeInTheDocument();
+
 			// eslint-disable-next-line require-await
 			await act( async () => {
 				fireEvent.click(

assets/js/components/OverlayNotification/OverlayNotificationsRenderer.js

@@ -28,11 +28,15 @@ import { useFeature } from '../../hooks/useFeature';
 import AudienceSegmentationIntroductoryOverlayNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationIntroductoryOverlayNotification';
 import AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification from './AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification';
 import LinkAnalyticsAndAdSenseAccountsOverlayNotification from './LinkAnalyticsAndAdSenseAccountsOverlayNotification';
-import { PublicationApprovedOverlayNotification } from '../../modules/reader-revenue-manager/components/dashboard';
+import {
+	PublicationApprovedOverlayNotification,
+	RRMIntroductoryOverlayNotification,
+} from '../../modules/reader-revenue-manager/components/dashboard';
 
 export default function OverlayNotificationsRenderer() {
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
 	const readerRevenueManagerEnabled = useFeature( 'rrmModule' );
+	const readerRevenueManagerV2Enabled = useFeature( 'rrmModuleV2' );
 
 	return (
 		<Fragment>
@@ -44,6 +48,9 @@ export default function OverlayNotificationsRenderer() {
 			{ readerRevenueManagerEnabled && (
 				<PublicationApprovedOverlayNotification />
 			) }
+			{ readerRevenueManagerV2Enabled && (
+				<RRMIntroductoryOverlayNotification />
+			) }
 		</Fragment>
 	);
 }

assets/js/googlesitekit/datastore/site/info.js

@@ -170,6 +170,7 @@ export const reducer = ( state, { payload, type } ) => {
 				setupErrorMessage,
 				setupErrorRedoURL,
 				siteName,
+				siteLocale,
 				timezone,
 				usingProxy,
 				webStoriesActive,
@@ -206,6 +207,7 @@ export const reducer = ( state, { payload, type } ) => {
 					setupErrorMessage,
 					setupErrorRedoURL,
 					siteName,
+					siteLocale,
 					timezone,
 					usingProxy,
 					webStoriesActive,
@@ -297,6 +299,7 @@ export const resolvers = {
 			setupErrorMessage,
 			setupErrorRedoURL,
 			siteName,
+			siteLocale,
 			timezone,
 			usingProxy,
 			webStoriesActive,
@@ -338,6 +341,7 @@ export const resolvers = {
 			setupErrorMessage,
 			setupErrorRedoURL,
 			siteName,
+			siteLocale,
 			timezone,
 			postTypes,
 			usingProxy: !! usingProxy,
@@ -651,6 +655,18 @@ export const selectors = {
 	 */
 	getSiteName: getSiteInfoProperty( 'siteName' ),
 
+	/**
+	 * Gets a site's locale.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {(string|undefined)} The site locale.
+	 */
+	getSiteLocale: createRegistrySelector(
+		( select ) => () =>
+			select( CORE_SITE ).getSiteInfo()?.siteLocale?.replace( '_', '-' )
+	),
+
 	/**
 	 * Gets a setup error code, if one exists.
 	 *

assets/js/googlesitekit/datastore/site/info.test.js

@@ -39,6 +39,7 @@ describe( 'core/site site info', () => {
 		setupErrorMessage: null,
 		setupErrorRedoURL: null,
 		siteName: 'Something Test',
+		siteLocale: 'en-US',
 		timezone: 'America/Denver',
 		usingProxy: true,
 		widgetsAdminURL: 'http://example.com/wp-admin/widgets.php',
@@ -393,6 +394,7 @@ describe( 'core/site site info', () => {
 			[ 'getProxySetupURL', 'proxySetupURL' ],
 			[ 'getProxyPermissionsURL', 'proxyPermissionsURL' ],
 			[ 'getSiteName', 'siteName' ],
+			[ 'getSiteLocale', 'siteLocale' ],
 			[ 'getSetupErrorCode', 'setupErrorCode' ],
 			[ 'getSetupErrorMessage', 'setupErrorMessage' ],
 			[ 'getSetupErrorRedoURL', 'setupErrorRedoURL' ],

assets/js/googlesitekit/notifications/components/layout/SubtleNotification.js

@@ -32,6 +32,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import CheckFill from '../../../../../svg/icons/check-fill.svg';
 import WarningSVG from '../../../../../svg/icons/warning.svg';
+import StarFill from '../../../../../svg/icons/star-fill.svg';
 import { Grid, Cell, Row } from '../../../../material-components';
 
 const SubtleNotification = forwardRef(
@@ -61,6 +62,8 @@ const SubtleNotification = forwardRef(
 									type === 'success',
 								'googlesitekit-subtle-notification--warning':
 									type === 'warning',
+								'googlesitekit-subtle-notification--new-feature':
+									type === 'new-feature',
 							}
 						) }
 					>
@@ -72,6 +75,9 @@ const SubtleNotification = forwardRef(
 							{ type === 'warning' && ! icon && (
 								<WarningSVG width={ 24 } height={ 24 } />
 							) }
+							{ type === 'new-feature' && ! icon && (
+								<StarFill width={ 24 } height={ 24 } />
+							) }
 						</div>
 
 						<div className="googlesitekit-subtle-notification__content">
@@ -94,11 +100,11 @@ const SubtleNotification = forwardRef(
 
 SubtleNotification.propTypes = {
 	className: PropTypes.string,
-	title: PropTypes.node.isRequired,
+	title: PropTypes.node,
 	description: PropTypes.node,
 	dismissCTA: PropTypes.node,
 	additionalCTA: PropTypes.node,
-	type: PropTypes.string,
+	type: PropTypes.oneOf( [ 'success', 'warning', 'new-feature' ] ),
 	icon: PropTypes.object,
 };
 

assets/js/modules/reader-revenue-manager/components/common/PublicationCreate.js

@@ -49,8 +49,8 @@ export default function PublicationCreate( { onCompleteSetup } ) {
 	const publications = useSelect( ( select ) =>
 		select( MODULES_READER_REVENUE_MANAGER ).getPublications()
 	);
-	const serviceURL = useSelect( ( select ) =>
-		select( MODULES_READER_REVENUE_MANAGER ).getServiceURL()
+	const createPublicationURL = useSelect( ( select ) =>
+		select( MODULES_READER_REVENUE_MANAGER ).getCreatePublicationLinkURL()
 	);
 
 	const { setValues } = useDispatch( CORE_FORMS );
@@ -110,7 +110,7 @@ export default function PublicationCreate( { onCompleteSetup } ) {
 					</p>
 					<div className="googlesitekit-setup-module__action">
 						<Button
-							href={ serviceURL }
+							href={ createPublicationURL }
 							target="_blank"
 							trailingIcon={
 								<ExternalIcon width={ 14 } height={ 14 } />

assets/js/modules/reader-revenue-manager/components/common/PublicationCreate.test.js

@@ -71,7 +71,9 @@ describe( 'PublicationCreate', () => {
 			} )
 		).toHaveAttribute(
 			'href',
-			registry.select( MODULES_READER_REVENUE_MANAGER ).getServiceURL()
+			registry
+				.select( MODULES_READER_REVENUE_MANAGER )
+				.getCreatePublicationLinkURL()
 		);
 	} );