Create the "Top converting traffic source" key metric widget tile.

assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.stories.js

@@ -100,7 +100,6 @@ export default {
 	decorators: [
 		( Story, { args } ) => {
 			const setupRegistry = ( registry ) => {
-				global._googlesitekitUserData.isUserInputCompleted = false;
 				provideModules( registry, [
 					{
 						slug: 'analytics-4',

assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js

@@ -102,7 +102,6 @@ export default {
 	decorators: [
 		( Story, { args } ) => {
 			const setupRegistry = ( registry ) => {
-				global._googlesitekitUserData.isUserInputCompleted = false;
 				provideModules( registry, [
 					{
 						slug: 'analytics-4',

assets/js/modules/analytics-4/components/widgets/PopularContentWidget.stories.js

@@ -115,7 +115,6 @@ export default {
 	decorators: [
 		( Story, { args } ) => {
 			const setupRegistry = ( registry ) => {
-				global._googlesitekitUserData.isUserInputCompleted = false;
 				provideModules( registry, [
 					{
 						slug: 'analytics-4',

assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js

@@ -21,11 +21,23 @@
  */
 import PropTypes from 'prop-types';
 
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import {
+	DATE_RANGE_OFFSET,
+	MODULES_ANALYTICS_4,
+} from '../../datastore/constants';
+import { useInViewSelect } from '../../../../hooks/useInViewSelect';
+import MetricTileText from '../../../../components/KeyMetrics/MetricTileText';
+import { numFmt } from '../../../../util';
 
 const { useSelect } = Data;
 
@@ -37,14 +49,92 @@ export default function TopConvertingTrafficSourceWidget( {
 		select( CORE_USER ).isKeyMetricsWidgetHidden()
 	);
 
+	const dates = useSelect( ( select ) =>
+		select( CORE_USER ).getDateRangeDates( {
+			offsetDays: DATE_RANGE_OFFSET,
+			compare: true,
+		} )
+	);
+
+	const reportOptions = {
+		...dates,
+		dimensions: [ 'sessionDefaultChannelGroup' ],
+		metrics: [
+			{
+				name: 'sessionConversionRate',
+			},
+		],
+		limit: 1,
+		orderBy: 'sessionConversionRate',
+	};
+
+	const report = useInViewSelect( ( select ) => {
+		if ( keyMetricsWidgetHidden !== false ) {
+			return null;
+		}
+
+		return select( MODULES_ANALYTICS_4 ).getReport( reportOptions );
+	} );
+
+	const loading = useSelect(
+		( select ) =>
+			! select( MODULES_ANALYTICS_4 ).hasFinishedResolution(
+				'getReport',
+				[ reportOptions ]
+			)
+	);
+
 	if ( keyMetricsWidgetHidden !== false ) {
 		return <WidgetNull />;
 	}
 
+	const getRowForDateRange = ( dateRange ) => {
+		if ( ! report?.rows ) {
+			return null;
+		}
+
+		// Filter the report to get only rows that match the given date range.
+		const rows = report.rows.filter(
+			( { dimensionValues: [ , dateValue ] } ) =>
+				dateValue.value === dateRange
+		);
+
+		// As the report is limited to 1 row per date range, return the first row.
+		return rows[ 0 ];
+	};
+
+	const currentRow = getRowForDateRange( 'date_range_0' );
+	const previousRow = getRowForDateRange( 'date_range_1' );
+
+	const topChannelGroup = currentRow?.dimensionValues?.[ 0 ].value || '-';
+	const topConversionRate = parseFloat(
+		currentRow?.metricValues?.[ 0 ].value || '0'
+	);
+	const previousTopConversionRate = parseFloat(
+		previousRow?.metricValues?.[ 0 ].value || '0'
+	);
+
+	const format = {
+		style: 'percent',
+		signDisplay: 'never',
+		maximumFractionDigits: 1,
+	};
+
 	return (
-		<Widget>
-			<div>TODO: UI for TopConvertingTrafficSourceWidget</div>
-		</Widget>
+		<MetricTileText
+			Widget={ Widget }
+			title={ __( 'Top converting traffic source', 'google-site-kit' ) }
+			metricValue={ topChannelGroup }
+			metricValueFormat={ format }
+			subText={ sprintf(
+				/* translators: %d: Percentage of visits that led to conversions. */
+				__( '%s of visits led to conversions', 'google-site-kit' ),
+				numFmt( topConversionRate, format )
+			) }
+			previousValue={ previousTopConversionRate }
+			currentValue={ topConversionRate }
+			loading={ loading }
+		/>
 	);
 }
 

assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.stories.js

@@ -0,0 +1,142 @@
+/**
+ * TopConvertingTrafficSourceWidget Component Stories.
+ *
+ * Site Kit by Google, Copyright 2023 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import {
+	provideKeyMetrics,
+	provideModules,
+} from '../../../../../../tests/js/utils';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
+import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
+import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import { MODULES_ANALYTICS_4 } from '../../datastore/constants';
+import {
+	getAnalytics4MockResponse,
+	provideAnalytics4MockReport,
+} from '../../utils/data-mock';
+import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../../../.storybook/utils/zeroReports';
+
+const reportOptions = {
+	compareStartDate: '2020-07-14',
+	compareEndDate: '2020-08-10',
+	startDate: '2020-08-11',
+	endDate: '2020-09-07',
+	dimensions: [ 'sessionDefaultChannelGroup' ],
+	metrics: [
+		{
+			name: 'sessionConversionRate',
+		},
+	],
+	limit: 1,
+	orderBy: 'sessionConversionRate',
+};
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'kmAnalyticsTopTrafficSource'
+)( TopConvertingTrafficSourceWidget );
+
+const Template = ( { setupRegistry, ...args } ) => (
+	<WithRegistrySetup func={ setupRegistry }>
+		<WidgetWithComponentProps { ...args } />
+	</WithRegistrySetup>
+);
+
+export const Ready = Template.bind( {} );
+Ready.storyName = 'Ready';
+Ready.args = {
+	setupRegistry: ( registry ) => {
+		provideAnalytics4MockReport( registry, reportOptions );
+	},
+};
+Ready.scenario = {
+	label: 'KeyMetrics/TopConvertingTrafficSourceWidget/Ready',
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+	setupRegistry: ( { dispatch } ) => {
+		dispatch( MODULES_ANALYTICS_4 ).startResolution( 'getReport', [
+			reportOptions,
+		] );
+	},
+};
+Loading.scenario = {
+	label: 'KeyMetrics/TopConvertingTrafficSourceWidget/Loading',
+};
+Loading.decorators = [
+	( Story ) => {
+		// Ensure the animation is paused for VRT tests to correctly capture the loading state.
+		return (
+			<div className="googlesitekit-vrt-animation-paused">
+				<Story />
+			</div>
+		);
+	},
+];
+
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	setupRegistry: ( { dispatch } ) => {
+		dispatch( MODULES_ANALYTICS_4 ).receiveGetReport(
+			replaceValuesInAnalytics4ReportWithZeroData(
+				getAnalytics4MockResponse( reportOptions )
+			),
+			{
+				options: reportOptions,
+			}
+		);
+	},
+};
+ZeroData.scenario = {
+	label: 'KeyMetrics/TopConvertingTrafficSourceWidget/ZeroData',
+};
+
+export default {
+	title: 'Key Metrics/TopConvertingTrafficSourceWidget',
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				provideModules( registry, [
+					{
+						slug: 'analytics-4',
+						active: true,
+						connected: true,
+					},
+				] );
+
+				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
+
+				provideKeyMetrics( registry );
+
+				// Call story-specific setup.
+				args.setupRegistry( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.test.js

@@ -0,0 +1,91 @@
+/**
+ * TopConvertingTrafficSourceWidget component tests.
+ *
+ * Site Kit by Google, Copyright 2023 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { render } from '../../../../../../tests/js/test-utils';
+import { provideKeyMetrics } from '../../../../../../tests/js/utils';
+import { provideAnalytics4MockReport } from '../../utils/data-mock';
+import { getWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
+import {
+	CORE_USER,
+	KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE,
+} from '../../../../googlesitekit/datastore/user/constants';
+import TopConvertingTrafficSourceWidget from './TopConvertingTrafficSourceWidget';
+
+describe( 'TopConvertingTrafficSourceWidget', () => {
+	const { Widget, WidgetNull } = getWidgetComponentProps(
+		KM_ANALYTICS_TOP_CONVERTING_TRAFFIC_SOURCE
+	);
+
+	it.each( [ undefined, true ] )(
+		'renders null when isKeyMetricsWidgetHidden() returns %s',
+		async ( isWidgetHidden ) => {
+			const { container, waitForRegistry } = render(
+				<TopConvertingTrafficSourceWidget
+					Widget={ Widget }
+					WidgetNull={ WidgetNull }
+				/>,
+				{
+					setupRegistry: ( registry ) => {
+						provideKeyMetrics( registry, { isWidgetHidden } );
+					},
+				}
+			);
+			await waitForRegistry();
+
+			expect( container ).toBeEmptyDOMElement();
+		}
+	);
+
+	it( 'renders correctly with the expected metrics when the Key Metrics widget is not hidden', async () => {
+		const { container, waitForRegistry } = render(
+			<TopConvertingTrafficSourceWidget
+				Widget={ Widget }
+				WidgetNull={ WidgetNull }
+			/>,
+			{
+				setupRegistry: ( registry ) => {
+					registry
+						.dispatch( CORE_USER )
+						.setReferenceDate( '2020-09-08' );
+
+					provideKeyMetrics( registry );
+					provideAnalytics4MockReport( registry, {
+						compareStartDate: '2020-07-14',
+						compareEndDate: '2020-08-10',
+						startDate: '2020-08-11',
+						endDate: '2020-09-07',
+						dimensions: [ 'sessionDefaultChannelGroup' ],
+						metrics: [
+							{
+								name: 'sessionConversionRate',
+							},
+						],
+						limit: 1,
+						orderBy: 'sessionConversionRate',
+					} );
+				},
+			}
+		);
+		await waitForRegistry();
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );

assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.stories.js

@@ -125,7 +125,6 @@ export default {
 	decorators: [
 		( Story, { args } ) => {
 			const setupRegistry = ( registry ) => {
-				global._googlesitekitUserData.isUserInputCompleted = false;
 				provideModules( registry, [
 					{
 						slug: 'analytics-4',