Merge branch 'trunk' into update/stats_location_views_alter_endpoint

client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx

@@ -58,7 +58,7 @@ describe( 'UpgradePlanDetails', () => {
 		} );
 
 		await waitFor( () => {
-			expect( screen.getByText( 'One time offer' ) ).toBeInTheDocument();
+			expect( screen.getByText( '50% off your first year' ) ).toBeInTheDocument();
 
 			// Introductory offer price per month (calculated from the full price).
 			expect( screen.getByText( '12' ) ).toBeInTheDocument();
@@ -87,7 +87,7 @@ describe( 'UpgradePlanDetails', () => {
 		} );
 
 		await waitFor( () => {
-			expect( screen.queryByText( 'One time offer' ) ).toBeNull();
+			expect( screen.queryByText( '50% off your first year' ) ).toBeNull();
 
 			// Introductory offer price per month (calculated from the full price).
 			expect( screen.queryByText( '12' ) ).toBeNull();

client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx

@@ -142,9 +142,9 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 				}
 		  );
 
-	const badgeText = hasEnTranslation( 'One time offer' )
-		? translate( 'One time offer' )
-		: translate( 'One time discount' );
+	const badgeText = hasEnTranslation( '50% off your first year' )
+		? translate( '50% off your first year' )
+		: translate( 'One time offer' );
 
 	return (
 		<UpgradePlanPrice billingTimeFrame={ billingTimeFrame }>

client/hosting/performance/site-performance.tsx

@@ -1,5 +1,5 @@
 import page from '@automattic/calypso-router';
-import { useDesktopBreakpoint } from '@automattic/viewport-react';
+import { useMobileBreakpoint } from '@automattic/viewport-react';
 import { Button } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 import { translate } from 'i18n-calypso';
@@ -9,6 +9,7 @@ import InlineSupportLink from 'calypso/components/inline-support-link';
 import NavigationHeader from 'calypso/components/navigation-header';
 import { useUrlBasicMetricsQuery } from 'calypso/data/site-profiler/use-url-basic-metrics-query';
 import { useUrlPerformanceInsightsQuery } from 'calypso/data/site-profiler/use-url-performance-insights';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { useDispatch, useSelector } from 'calypso/state';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getRequest from 'calypso/state/selectors/get-request';
@@ -146,6 +147,7 @@ export const SitePerformance = () => {
 	}, [ currentPage?.wpcom_performance_report_url ] );
 
 	const retestPage = () => {
+		recordTracksEvent( 'calypso_performance_profiler_test_again_click' );
 		setWpcom_performance_report_url( {
 			url: currentPage?.url ?? '',
 			hash: '',
@@ -200,9 +202,16 @@ export const SitePerformance = () => {
 		dispatch( launchSite( siteId! ) );
 	};
 
-	const isMobile = ! useDesktopBreakpoint();
+	const isMobile = useMobileBreakpoint();
 	const disableControls = performanceReport.isLoading || isInitialLoading || ! isSitePublic;
 
+	const handleDeviceTabChange = ( tab: Tab ) => {
+		setActiveTab( tab );
+		recordTracksEvent( 'calypso_performance_profiler_device_tab_change', {
+			device: tab,
+		} );
+	};
+
 	const pageSelector = (
 		<PageSelector
 			onFilterValueChange={ setQuery }
@@ -278,7 +287,7 @@ export const SitePerformance = () => {
 				{ ! isMobile && pageSelector }
 				<DeviceTabControls
 					showTitle={ ! isMobile }
-					onDeviceTabChange={ setActiveTab }
+					onDeviceTabChange={ handleDeviceTabChange }
 					disabled={ disableControls }
 					value={ activeTab }
 				/>

client/hosting/performance/style.scss

@@ -10,6 +10,11 @@ $section-max-width: 1224px;
 	flex-direction: column;
 	gap: 16px;
 
+	// Button style overrides necessary because of conflicting WPcom styles.
+	.components-button.is-primary.is-busy:disabled {
+		background-image: linear-gradient(-45deg, var(--color-accent) 28%, var(--color-accent-60) 28%, var(--color-accent-60) 72%, var(--color-accent) 72%);
+	}
+
 	.notice-banner,
 	.notice-banner__title {
 		font-size: $font-body-small;
@@ -20,6 +25,20 @@ $section-max-width: 1224px;
 		gap: 0;
 	}
 
+	.performance-profiler-insights-section {
+		.subtitle {
+			font-size: $font-body-small;
+		}
+
+		.insight-header-container {
+			font-size: $font-body-small;
+		}
+
+		.description-area {
+			font-size: $font-body-small;
+		}
+	}
+
 	.performance-profiler-content .container {
 		padding-top: 0;
 		gap: 16px;
@@ -76,16 +95,29 @@ $section-max-width: 1224px;
 			fill: $studio-red-80;
 		}
 	}
+
+	@media (max-width: $break-large) {
+		.insight-header-container .counter {
+			display: none;
+		}
+
+		.metrics-insight-item .foldable-card__content > div {
+			padding-inline: 0;
+		}
+	}
 }
 
 .site-performance-device-tab-controls__container {
 	display: flex;
 	gap: 24px;
-	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	margin-bottom: 16px;
 
+	@media (max-width: $break-medium) {
+		flex-wrap: wrap;
+	}
+
 	.site-performance__page-selector {
 		display: flex;
 		align-items: flex-start;
@@ -142,7 +174,6 @@ $section-max-width: 1224px;
 	}
 
 	@media (max-width: $break-medium) {
-		margin-bottom: 8px;
 		width: 100%;
 
 		.formatted-header__subtitle {

client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { Metrics } from 'calypso/data/site-profiler/types';
 import { CircularPerformanceScore } from 'calypso/hosting/performance/components/circular-performance-score/circular-performance-score';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	metricsNames,
 	mapThresholdsToStatus,
@@ -59,6 +60,9 @@ export const CoreWebVitalsAccordionV2 = ( props: Props ) => {
 		if ( key === activeTab ) {
 			setActiveTab( null );
 		} else {
+			recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', {
+				tab: key,
+			} );
 			setActiveTab( key as Metrics );
 		}
 	};

client/performance-profiler/components/dashboard-content/index.tsx

@@ -109,6 +109,7 @@ export const PerformanceProfilerDashboardContent = ( {
 						ref={ insightsRef }
 						hash={ hash }
 						filter={ filter }
+						isLoggedInVersion={ showV2 }
 						onRecommendationsFilterChange={ onRecommendationsFilterChange }
 					/>
 				) }

client/performance-profiler/components/insights-section/index.tsx

@@ -18,6 +18,7 @@ type InsightsSectionProps = {
 	isWpcom: boolean;
 	hash: string;
 	filter?: string;
+	isLoggedInVersion?: boolean;
 	onRecommendationsFilterChange?: ( filter: string ) => void;
 };
 
@@ -37,6 +38,9 @@ export const InsightsSection = forwardRef(
 			.filter( ( key ) => filterRecommendations( selectedFilter, audits[ key ] ) )
 			.sort( sortInsightKeys );
 		const onFilter = useCallback( ( option: { label: string; value: string } ) => {
+			recordTracksEvent( 'calypso_performance_profiler_recommendations_filter_change', {
+				filter: option.value,
+			} );
 			setSelectedFilter( option.value );
 			if ( props.onRecommendationsFilterChange ) {
 				props.onRecommendationsFilterChange( option.value );
@@ -50,12 +54,18 @@ export const InsightsSection = forwardRef(
 				setSelectedFilter( filter );
 			}
 		}, [ selectedFilter, filter ] );
-
+		const siteOrPageSubtitle = props.isLoggedInVersion
+			? translate( 'your page' )
+			: translate( 'your site' );
 		return (
 			<div className="performance-profiler-insights-section" ref={ ref }>
 				<div className="header">
 					<div>
-						<h2 className="title">{ translate( 'Improve your site‘s performance' ) }</h2>
+						<h2 className="title">
+							{ props.isLoggedInVersion
+								? translate( 'Recommendations' )
+								: translate( 'Improve your site‘s performance' ) }
+						</h2>
 						<p className="subtitle">
 							{ filteredAudits.length
 								? translate(
@@ -66,7 +76,7 @@ export const InsightsSection = forwardRef(
 												quantity: filteredAudits.length,
 												metric:
 													selectedFilter === 'all'
-														? translate( 'your site' )
+														? siteOrPageSubtitle
 														: metricsNames[ selectedFilter as keyof typeof metricsNames ]?.name,
 											},
 											count: filteredAudits.length,

client/performance-profiler/components/insights-section/style.scss

@@ -28,6 +28,9 @@
 		color: var(--studio-gray-70);
 		font-size: $font-body;
 		margin-bottom: 0;
+		@media (max-width: $break-xlarge) {
+			max-width: 360px;
+		}
 	}
 
 	.metrics-insight-item.foldable-card {

client/performance-profiler/components/metric-tab-bar/metric-tab-bar-v2.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { Metrics } from 'calypso/data/site-profiler/types';
 import { CircularPerformanceScore } from 'calypso/hosting/performance/components/circular-performance-score/circular-performance-score';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	metricsNames,
 	mapThresholdsToStatus,
@@ -17,13 +18,18 @@ type Props = Record< Metrics, number > & {
 const MetricTabBarV2 = ( props: Props ) => {
 	const { activeTab, setActiveTab } = props;
 
+	const handleTabClick = ( tab: Metrics ) => {
+		setActiveTab( tab );
+		recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', { tab } );
+	};
+
 	return (
 		<div className="metric-tab-bar-v2">
 			<button
 				className={ clsx( 'metric-tab-bar-v2__tab metric-tab-bar-v2__performance', {
 					active: activeTab === 'overall',
 				} ) }
-				onClick={ () => setActiveTab( 'overall' ) }
+				onClick={ () => handleTabClick( 'overall' ) }
 			>
 				<div className="metric-tab-bar-v2__tab-text">
 					<div
@@ -61,7 +67,7 @@ const MetricTabBarV2 = ( props: Props ) => {
 						<button
 							key={ key }
 							className={ clsx( 'metric-tab-bar-v2__tab', { active: key === activeTab } ) }
-							onClick={ () => setActiveTab( key as Metrics ) }
+							onClick={ () => handleTabClick( key as Metrics ) }
 						>
 							<div className="metric-tab-bar-v2__tab-status">
 								<StatusIndicator

client/performance-profiler/components/metrics-insight/index.tsx

@@ -60,10 +60,10 @@ const Header = styled.div`
 
 	.impact {
 		padding: 4px 10px;
-		border-radius: 14px;
+		border-radius: 4px;
 		border: 1px solid transparent;
 		float: right;
-		font-size: 14px;
+		font-size: 12px;
 		color: var( --studio-black );
 
 		&.fail {

client/performance-profiler/components/metrics-insight/insight-content.tsx

@@ -36,6 +36,8 @@ export const InsightContent: React.FC< InsightContentProps > = ( props ) => {
 		setFeedbackSent( true );
 	};
 
+	const isPerformancePage = window.location.pathname.includes( '/sites/performance/' );
+
 	const renderFeedbackForm = () => {
 		if ( feedbackSent ) {
 			return <div className="survey">{ translate( 'Thanks for the feedback!' ) }</div>;
@@ -94,7 +96,14 @@ export const InsightContent: React.FC< InsightContentProps > = ( props ) => {
 	return (
 		<div className="metrics-insight-content">
 			{ isLoading ? (
-				<LLMMessage message={ translate( 'Finding the best solution for your site…' ) } rotate />
+				<LLMMessage
+					message={
+						isPerformancePage
+							? translate( 'Finding the best solution for your page…' )
+							: translate( 'Finding the best solution for your site…' )
+					}
+					rotate
+				/>
 			) : (
 				<>
 					<div className="description-area">

client/performance-profiler/components/tip/index.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import './style.scss';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 
 export type TipProps = {
 	title: string;
@@ -11,13 +12,19 @@ export type TipProps = {
 export const Tip = ( { title, content, link, linkText }: TipProps ) => {
 	const translate = useTranslate();
 
+	const handleLearnMoreClick = () => {
+		recordTracksEvent( 'calypso_performance_profiler_tip_learn_more_clicked', {
+			link: link,
+		} );
+	};
+
 	return (
 		<div className="performance-profiler-tip">
 			<h4>{ title }</h4>
 			<p>{ content }</p>
 			{ link && (
 				<p className="learn-more-link">
-					<a href={ link } target="_blank" rel="noreferrer">
+					<a href={ link } target="_blank" rel="noreferrer" onClick={ handleLearnMoreClick }>
 						{ linkText ?? translate( 'Learn more ↗' ) }
 					</a>
 				</p>