diff --git a/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx index 79d650d273468..2949f23848316 100644 --- a/client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx +++ b/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(); diff --git a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx b/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx index cf4b3fb943209..c801932fdc01a 100644 --- a/client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx +++ b/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 ( diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx index 6c235b89871f5..5d44e55b5d3f7 100644 --- a/client/hosting/performance/site-performance.tsx +++ b/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 = ( { { ! isMobile && pageSelector } diff --git a/client/hosting/performance/style.scss b/client/hosting/performance/style.scss index d6ad6919dcf35..3956ef519a18d 100644 --- a/client/hosting/performance/style.scss +++ b/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 { diff --git a/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx b/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx index 1f1302b43ded4..79f14ca2e69c8 100644 --- a/client/performance-profiler/components/core-web-vitals-accordion/core-web-vitals-accordion-v2.tsx +++ b/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 ); } }; diff --git a/client/performance-profiler/components/dashboard-content/index.tsx b/client/performance-profiler/components/dashboard-content/index.tsx index cca85ed0a8d26..8ff83796ad148 100644 --- a/client/performance-profiler/components/dashboard-content/index.tsx +++ b/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 } /> ) } diff --git a/client/performance-profiler/components/insights-section/index.tsx b/client/performance-profiler/components/insights-section/index.tsx index b238af78ff921..d254c22945806 100644 --- a/client/performance-profiler/components/insights-section/index.tsx +++ b/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 (
-

{ translate( 'Improve your site‘s performance' ) }

+

+ { props.isLoggedInVersion + ? translate( 'Recommendations' ) + : translate( 'Improve your site‘s performance' ) } +

{ 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, diff --git a/client/performance-profiler/components/insights-section/style.scss b/client/performance-profiler/components/insights-section/style.scss index e8ec8fe85bb85..6e77b6ce07601 100644 --- a/client/performance-profiler/components/insights-section/style.scss +++ b/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 { diff --git a/client/performance-profiler/components/metric-tab-bar/metric-tab-bar-v2.tsx b/client/performance-profiler/components/metric-tab-bar/metric-tab-bar-v2.tsx index 91a13a1f7c946..ddf63022acc7c 100644 --- a/client/performance-profiler/components/metric-tab-bar/metric-tab-bar-v2.tsx +++ b/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 (