Stats: Add UTM module overlay with blurred fake data bars (#88629)

* Remove unused prop of StatsCardUpsellJetpack

* Introduce StatsCard with fake data and an overlay as StatsModuleUTMOverlay

* Add blur to splitHeader of StatsCard

* Pass className to StatsModuleUTMOverlay for layout grid

client/my-sites/stats/stats-card-upsell/stats-card-upsell-jetpack.tsx

@@ -13,7 +13,6 @@ import StatsCardUpsellOverlay from './stats-card-upsell-overlay';
 
 interface Props {
 	className: string;
-	statType: string;
 	siteSlug: string;
 	buttonComponent?: ReactNode;
 }

client/my-sites/stats/stats-module-utm/index.jsx

@@ -2,17 +2,15 @@ import { StatsCard } from '@automattic/components';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
-import { useSelector } from 'calypso/state';
-import { getSiteSlug } from 'calypso/state/sites/selectors';
 import { default as usePlanUsageQuery } from '../hooks/use-plan-usage-query';
 import useStatsPurchases from '../hooks/use-stats-purchases';
 import useUTMMetricTopPostsQuery from '../hooks/use-utm-metric-top-posts-query';
 import useUTMMetricsQuery from '../hooks/use-utm-metrics-query';
-import StatsCardUpsellJetpack from '../stats-card-upsell/stats-card-upsell-jetpack';
 import StatsModulePlaceholder from '../stats-module/placeholder';
 import StatsModuleDataQuery from '../stats-module/stats-module-data-query';
 import statsStrings from '../stats-strings';
 import UTMDropdown from './stats-module-utm-dropdown';
+import StatsModuleUTMOverlay from './stats-module-utm-overlay';
 
 const OPTION_KEYS = {
 	SOURCE_MEDIUM: 'utm_source,utm_medium',
@@ -26,7 +24,6 @@ const StatsModuleUTM = ( { siteId, period, postId, query, summary, className } )
 	const moduleStrings = statsStrings();
 	const translate = useTranslate();
 	const [ selectedOption, setSelectedOption ] = useState( OPTION_KEYS.SOURCE_MEDIUM );
-	const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) );
 
 	// Check if blog is internal.
 	const { isFetching: isFetchingUsage, data: usageData } = usePlanUsageQuery( siteId );
@@ -106,14 +103,7 @@ const StatsModuleUTM = ( { siteId, period, postId, query, summary, className } )
 				</StatsCard>
 			) }
 			{ ! isFetching && ! isAdvancedFeatureEnabled && (
-				// TODO: update the ghost card to only show the module name
-				<StatsCard
-					title="UTM"
-					className={ classNames( className, 'stats-module-utm', 'stats-module__card', 'utm' ) }
-					isNew
-				>
-					<StatsCardUpsellJetpack className="stats-module__upsell" siteSlug={ siteSlug } />
-				</StatsCard>
+				<StatsModuleUTMOverlay className={ className } siteId={ siteId } />
 			) }
 			{ ! isFetching && isAdvancedFeatureEnabled && (
 				<StatsModuleDataQuery

client/my-sites/stats/stats-module-utm/stats-module-utm-overlay.scss

@@ -0,0 +1,11 @@
+.stats-module-utm-overlay {
+	.stats-card--column-header {
+		filter: blur(10px);
+	}
+
+	.stats-card__content {
+		// Prevent blur elements from being interactable.
+		pointer-events: none;
+		user-select: none;
+	}
+}

client/my-sites/stats/stats-module-utm/stats-module-utm-overlay.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useSelector } from 'calypso/state';
+import { getSiteSlug } from 'calypso/state/sites/selectors';
+import StatsCardUpsellJetpack from '../stats-card-upsell/stats-card-upsell-jetpack';
+import StatsListCard from '../stats-list/stats-list-card';
+
+import './stats-module-utm-overlay.scss';
+
+type StatsModuleUTMOverlayProps = {
+	siteId: number;
+	className?: string;
+};
+
+const StatsModuleUTMOverlay: React.FC< StatsModuleUTMOverlayProps > = ( { siteId, className } ) => {
+	const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) || '' );
+
+	const fakeData = [
+		{
+			label: 'google / cpc',
+			value: 102,
+		},
+		{
+			label: 'linkedin / social',
+			value: 15,
+		},
+		{
+			label: 'google / organic',
+			value: 14,
+		},
+		{
+			label: 'facebook.com / social',
+			value: 13,
+		},
+		{
+			label: 'newsletter / email',
+			value: 12,
+		},
+		{
+			label: 'x.com / social',
+			value: 12,
+		},
+		{
+			label: 'rss / rss',
+			value: 10,
+		},
+	];
+
+	return (
+		// @ts-expect-error TODO: Refactor StatsListCard with TypeScript.
+		<StatsListCard
+			title="UTM"
+			className={ classNames( className, 'stats-module-utm-overlay', 'stats-module__card', 'utm' ) }
+			moduleType="utm"
+			data={ fakeData }
+			mainItemLabel="Posts by Source / Medium"
+			splitHeader
+			showMore={ {
+				label: 'View all',
+			} }
+			overlay={ <StatsCardUpsellJetpack className="stats-module__upsell" siteSlug={ siteSlug } /> }
+		></StatsListCard>
+	);
+};
+
+export default StatsModuleUTMOverlay;