Merge remote-tracking branch 'origin/develop' into enhancement/8180-c…

…hanging-analytics-property-name-AS.

.github/PULL_REQUEST_TEMPLATE.md

@@ -32,6 +32,7 @@ _Do not alter or remove anything below. The following sections will be managed b
 - [ ] Ensure CI checks pass.
 - [ ] Check Storybook where applicable.
 - [ ] Ensure there is a QA Brief.
+- [ ] Ensure there are no unexpected significant changes to file sizes.
 
 ## Merge Reviewer Checklist
 

assets/js/components/KeyMetrics/key-metrics-widgets.js

@@ -33,6 +33,7 @@ import {
 	KM_ANALYTICS_POPULAR_CONTENT,
 	KM_ANALYTICS_POPULAR_PRODUCTS,
 	KM_ANALYTICS_TOP_CITIES,
+	KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
 	KM_ANALYTICS_TOP_COUNTRIES,
 	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
 	KM_ANALYTICS_PAGES_PER_VISIT,
@@ -50,6 +51,7 @@ import {
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { isFeatureEnabled } from '../../features';
 
 /**
  * Determines whether to show a widget the requires Analytics 4 and AdSense to be linked.
@@ -122,6 +124,30 @@ function shouldDisplayWidgetWithCustomDimensions(
 	);
 }
 
+/**
+ * Determines whether to display a widget that requires conversion reporting events
+ * in the key metrics selection panel.
+ *
+ * This function is attached to the widget object that requires the conversion reporting events and
+ * has the `requiredConversionEventName` property.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Function} select Data store select function.
+ * @return {boolean} Whether to display the widget.
+ */
+function shouldDisplayWidgetWithConversionEvent( select ) {
+	if ( ! isFeatureEnabled( 'conversionReporting' ) ) {
+		return false;
+	}
+
+	return select( MODULES_ANALYTICS_4 ).hasConversionReportingEvents(
+		// This property is available to the widget object that requires the
+		// conversion reporting events, where the function is attached.
+		this.requiredConversionEventName
+	);
+}
+
 const KEY_METRICS_WIDGETS = {
 	[ KM_ANALYTICS_ADSENSE_TOP_EARNING_CONTENT ]: {
 		title: __( 'Top earning pages', 'google-site-kit' ),
@@ -330,6 +356,23 @@ const KEY_METRICS_WIDGETS = {
 			'google-site-kit'
 		),
 	},
+	[ KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS ]: {
+		title: __( 'Top cities driving leads', 'google-site-kit' ),
+		description: __(
+			'Cities driving the most contact form submissions',
+			'google-site-kit'
+		),
+		infoTooltip: __(
+			'Cities driving the most contact form submissions',
+			'google-site-kit'
+		),
+		requiredConversionEventName: [
+			'submit_lead_form',
+			'contact',
+			'generate_lead',
+		],
+		displayInList: shouldDisplayWidgetWithConversionEvent,
+	},
 	[ KM_ANALYTICS_TOP_COUNTRIES ]: {
 		title: __( 'Top countries driving traffic', 'google-site-kit' ),
 		description: __(

assets/js/components/SelectionBox.js

@@ -28,6 +28,7 @@ import classnames from 'classnames';
 import { Checkbox } from 'googlesitekit-components';
 
 export default function SelectionBox( {
+	badge,
 	checked,
 	children,
 	disabled,
@@ -52,12 +53,14 @@ export default function SelectionBox( {
 				value={ value }
 			>
 				{ title }
+				{ badge }
 			</Checkbox>
 		</div>
 	);
 }
 
 SelectionBox.propTypes = {
+	badge: PropTypes.node,
 	checked: PropTypes.bool,
 	children: PropTypes.node,
 	disabled: PropTypes.bool,

assets/js/components/SelectionPanel/SelectionPanelItem.js

@@ -37,10 +37,12 @@ export default function SelectionPanelItem( {
 	onCheckboxChange,
 	subtitle,
 	suffix,
+	badge,
 } ) {
 	return (
 		<div className="googlesitekit-selection-panel-item">
 			<SelectionBox
+				badge={ badge }
 				checked={ isItemSelected }
 				disabled={ isItemDisabled }
 				id={ id }
@@ -76,4 +78,5 @@ SelectionPanelItem.propTypes = {
 	onCheckboxChange: PropTypes.func,
 	subtitle: PropTypes.string,
 	suffix: PropTypes.node,
+	badge: PropTypes.node,
 };

assets/js/components/SelectionPanel/index.stories.js

@@ -24,13 +24,18 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import NewBadge from '../NewBadge';
 import SelectionPanel from './SelectionPanel';
 import SelectionPanelFooter from './SelectionPanelFooter';
 import SelectionPanelHeader from './SelectionPanelHeader';
 import SelectionPanelItem from './SelectionPanelItem';
 import SelectionPanelItems from './SelectionPanelItems';
 
-function Template( { availableSavedItems = {}, savedItemSlugs = [] } ) {
+function Template( {
+	availableSavedItems = {},
+	savedItemSlugs = [],
+	itemComponentProps = {},
+} ) {
 	const [ selectedItems, setSeletectedItems ] = useState(
 		Object.keys( availableSavedItems )
 	);
@@ -55,6 +60,7 @@ function Template( { availableSavedItems = {}, savedItemSlugs = [] } ) {
 						slug,
 						title: `Item ${ current }`,
 						description: `Description for item ${ current }`,
+						...itemComponentProps,
 					},
 				};
 			}, {} );
@@ -153,6 +159,17 @@ withZeroUnsavedItems.args = {
 };
 withZeroUnsavedItems.scenario = {};
 
+export const WithNewBadges = Template.bind( {} );
+WithNewBadges.storyName = 'With "New" badges';
+WithNewBadges.args = {
+	itemComponentProps: {
+		badge: <NewBadge />,
+	},
+};
+WithNewBadges.scenario = {
+	label: 'Components/SelectionPanel/WithNewBadges',
+};
+
 export default {
 	title: 'Components/Selection Panel',
 	component: SelectionPanel,

assets/js/components/conversion-tracking/ConversionTrackingToggle.js

@@ -29,14 +29,12 @@ import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import ErrorText from '../../components/ErrorText';
 import LoadingWrapper from '../LoadingWrapper';
 import ConfirmDisableConversionTrackingDialog from './ConfirmDisableConversionTrackingDialog';
-import { useFeature } from '../../hooks/useFeature';
 import useViewContext from '../../hooks/useViewContext';
 import { trackEvent } from '../../util';
 import PropTypes from 'prop-types';
 
 export default function ConversionTrackingToggle( { children, loading } ) {
 	const viewContext = useViewContext();
-	const iceEnabled = useFeature( 'conversionInfra' );
 	const [ saveError ] = useState( null );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
@@ -50,10 +48,6 @@ export default function ConversionTrackingToggle( { children, loading } ) {
 
 	const { setConversionTrackingEnabled } = useDispatch( CORE_SITE );
 
-	if ( ! iceEnabled ) {
-		return null;
-	}
-
 	return (
 		<Fragment>
 			<LoadingWrapper loading={ loading } width="180px" height="21.3px">

assets/js/components/conversion-tracking/ConversionTrackingToggle.stories.js

@@ -39,9 +39,6 @@ Enabled.scenario = {
 	label: 'Components/Conversion Tracking/ConversionTrackingToggle/Enabled',
 	delay: 250,
 };
-Enabled.parameters = {
-	features: [ 'conversionInfra' ],
-};
 Enabled.decorators = [
 	( Story, { parameters } ) => {
 		const setupRegistry = ( registry ) => {
@@ -76,9 +73,6 @@ Default.scenario = {
 	label: 'Components/Conversion Tracking/ConversionTrackingToggle/Default',
 	delay: 250,
 };
-Default.parameters = {
-	features: [ 'conversionInfra' ],
-};
 Default.decorators = [
 	( Story, { parameters } ) => {
 		const setupRegistry = ( registry ) => {

assets/js/components/notifications/SubtleNotifications.js

@@ -25,7 +25,6 @@ import { Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import { useFeature } from '../../hooks/useFeature';
-import { SetupSuccessSubtleNotification } from '../../modules/ads/components/notifications/';
 import AudienceSegmentationSetupSuccessSubtleNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
 import { RRMSetupSuccessSubtleNotification } from '../../modules/reader-revenue-manager/components/dashboard';
 import GA4AdSenseLinkedNotification from './GA4AdSenseLinkedNotification';
@@ -51,7 +50,6 @@ export default function SubtleNotifications() {
 				<AudienceSegmentationSetupSuccessSubtleNotification />
 			) }
 			<GA4AdSenseLinkedNotification />
-			<SetupSuccessSubtleNotification />
 			{ rrmModuleEnabled && <RRMSetupSuccessSubtleNotification /> }
 			<Notifications
 				viewContext={ viewContext }

assets/js/components/settings/SettingsAdmin.js

@@ -26,6 +26,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { useSelect } from 'googlesitekit-data';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 import { MODULES_SEARCH_CONSOLE } from '../../modules/search-console/datastore/constants';
 import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import Layout from '../layout/Layout';
@@ -43,6 +44,9 @@ import { useFeature } from '../../hooks/useFeature';
 export default function SettingsAdmin() {
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
 
+	const configuredAudiences = useSelect( ( select ) =>
+		select( CORE_USER ).getConfiguredAudiences()
+	);
 	const isAnalyticsConnected = useSelect( ( select ) =>
 		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
@@ -146,11 +150,12 @@ export default function SettingsAdmin() {
 				</Cell>
 			) }
 
-			{ audienceSegmentationEnabled && isAnalyticsConnected && (
-				<Cell size={ 12 }>
-					<SettingsCardVisitorGroups />
-				</Cell>
-			) }
+			{ audienceSegmentationEnabled &&
+				( isAnalyticsConnected || !! configuredAudiences ) && (
+					<Cell size={ 12 }>
+						<SettingsCardVisitorGroups />
+					</Cell>
+				) }
 
 			<Cell size={ 12 }>
 				<Layout

assets/js/components/settings/SettingsApp.test.js

@@ -121,6 +121,11 @@ describe( 'SettingsApp', () => {
 			new RegExp( '^/google-site-kit/v1/modules/analytics-4/data' )
 		);
 
+		registry.dispatch( CORE_USER ).receiveGetAudienceSettings( {
+			configuredAudiences: null,
+			isAudienceSegmentationWidgetHidden: false,
+		} );
+
 		history.push( '/admin-settings' );
 
 		const { getAllByRole, waitForRegistry } = render( <SettingsApp />, {
@@ -170,6 +175,11 @@ describe( 'SettingsApp', () => {
 			new RegExp( '^/google-site-kit/v1/modules/analytics-4/data' )
 		);
 
+		registry.dispatch( CORE_USER ).receiveGetAudienceSettings( {
+			configuredAudiences: null,
+			isAudienceSegmentationWidgetHidden: false,
+		} );
+
 		await registry.dispatch( CORE_USER ).setTrackingEnabled( false );
 
 		const { getAllByRole, waitForRegistry } = render( <SettingsApp />, {

assets/js/components/settings/SettingsModules.test.js

@@ -102,6 +102,11 @@ describe( 'SettingsModules', () => {
 
 		await registry.dispatch( CORE_USER ).setTrackingEnabled( false );
 
+		registry.dispatch( CORE_USER ).receiveGetAudienceSettings( {
+			configuredAudiences: null,
+			isAudienceSegmentationWidgetHidden: false,
+		} );
+
 		history.push( '/admin' );
 
 		const { waitForRegistry } = render( <SettingsModules />, {

assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartGA4.js

@@ -37,6 +37,7 @@ import {
 import GoogleChart from '../GoogleChart';
 import { UNIQUE_VISITORS_CHART_OPTIONS } from './chart-options';
 import { extractAnalytics4DashboardData } from '../../modules/analytics-4/utils/extract-dashboard-data';
+import { stringToDate } from '../../util';
 
 export default function WPDashboardUniqueVisitorsChartGA4( props ) {
 	const { WPDashboardReportError } = props;
@@ -140,7 +141,7 @@ export default function WPDashboardUniqueVisitorsChartGA4( props ) {
 		);
 
 	if ( isZeroChart ) {
-		options.hAxis.ticks = [ refDate ];
+		options.hAxis.ticks = [ stringToDate( refDate ) ];
 	}
 
 	return (

assets/js/googlesitekit/datastore/user/audience-settings.js

@@ -31,10 +31,7 @@ import {
 	commonActions,
 	combineStores,
 } from 'googlesitekit-data';
-import {
-	AUDIENCE_TYPE_SORT_ORDER,
-	MODULES_ANALYTICS_4,
-} from '../../../modules/analytics-4/datastore/constants';
+import { MODULES_ANALYTICS_4 } from '../../../modules/analytics-4/datastore/constants';
 import { createFetchStore } from '../../data/create-fetch-store';
 import { createValidatedAction } from '../../data/utils';
 import { createReducer } from '../../data/create-reducer';
@@ -140,17 +137,18 @@ const baseActions = {
 			const sortedConfiguredAudiences = [
 				...finalSettings.configuredAudiences,
 			].sort( ( audienceNameA, audienceNameB ) => {
-				const audienceTypeA = availableAudiences?.find(
+				const audienceIndexA = availableAudiences.findIndex(
 					( audience ) => audience.name === audienceNameA
-				)?.audienceType;
-				const audienceTypeB = availableAudiences?.find(
+				);
+				const audienceIndexB = availableAudiences.findIndex(
 					( audience ) => audience.name === audienceNameB
-				)?.audienceType;
+				);
 
-				const weightA = AUDIENCE_TYPE_SORT_ORDER[ audienceTypeA ] || 0;
-				const weightB = AUDIENCE_TYPE_SORT_ORDER[ audienceTypeB ] || 0;
+				if ( audienceIndexA === -1 || audienceIndexB === -1 ) {
+					return 0;
+				}
 
-				return weightA - weightB;
+				return audienceIndexA - audienceIndexB;
 			} );
 
 			finalSettings.configuredAudiences = sortedConfiguredAudiences;

assets/js/googlesitekit/datastore/user/audience-settings.test.js

@@ -59,7 +59,7 @@ describe( 'modules/analytics-4 audience settings', () => {
 		};
 
 		audienceSettingsSortedResponse = {
-			configuredAudiences: [ 'audienceB', 'audienceA' ],
+			configuredAudiences: [ 'audienceA', 'audienceB' ],
 			isAudienceSegmentationWidgetHidden: false,
 		};
 
@@ -139,9 +139,7 @@ describe( 'modules/analytics-4 audience settings', () => {
 					.setAvailableAudiences( availableAudiences );
 				registry
 					.dispatch( CORE_USER )
-					.setConfiguredAudiences(
-						audienceSettingsResponse.configuredAudiences
-					);
+					.setConfiguredAudiences( [ 'audienceB', 'audienceA' ] );
 				registry
 					.dispatch( CORE_USER )
 					.setAudienceSegmentationWidgetHidden(

assets/js/googlesitekit/datastore/user/constants.js

@@ -60,6 +60,8 @@ export const KM_ANALYTICS_POPULAR_CONTENT = 'kmAnalyticsPopularContent';
 export const KM_ANALYTICS_POPULAR_PRODUCTS = 'kmAnalyticsPopularProducts';
 export const KM_ANALYTICS_RETURNING_VISITORS = 'kmAnalyticsReturningVisitors';
 export const KM_ANALYTICS_TOP_CITIES = 'kmAnalyticsTopCities';
+export const KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS =
+	'kmAnalyticsTopCitiesDrivingLeads';
 export const KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE =
 	'kmAnalyticsTopConvertingTrafficSource';
 export const KM_ANALYTICS_TOP_COUNTRIES = 'kmAnalyticsTopCountries';
@@ -87,6 +89,7 @@ export const keyMetricsGA4Widgets = [
 	KM_ANALYTICS_RETURNING_VISITORS,
 	KM_ANALYTICS_TOP_CATEGORIES,
 	KM_ANALYTICS_TOP_CITIES,
+	KM_ANALYTICS_TOP_CITIES_DRIVING_LEADS,
 	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
 	KM_ANALYTICS_TOP_COUNTRIES,
 	KM_ANALYTICS_TOP_RECENT_TRENDING_PAGES,