Site Profiler: Add a blur effect for locked metrics

client/site-profiler/components/metrics-insights-list/index.tsx

@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 import { useTranslate } from 'i18n-calypso';
 
 type MetricsInsightsListProps = {
-	insights: Insight[];
+	insights?: Insight[];
+	locked?: boolean;
 };
 
 type Insight = {
 	header: string;
-	description: string;
+	description?: string;
 };
 
 const Container = styled.div`
@@ -18,9 +19,15 @@ const Container = styled.div`
 	letter-spacing: -0.1px;
 `;
 
+type InsightHeaderProps = {
+	locked: boolean;
+	children: React.ReactNode;
+};
 const InsightHeader = styled.div`
 	font-family: 'SF Pro Text';
 	font-size: 16px;
+	filter: ${ ( props: InsightHeaderProps ) => ( props.locked ? 'blur(2px)' : 'none' ) };
+	user-select: ${ ( props: InsightHeaderProps ) => ( props.locked ? 'none' : 'auto' ) };
 `;
 
 const InsightContent = styled.div`
@@ -29,21 +36,57 @@ const InsightContent = styled.div`
 
 export const MetricsInsightsList = ( props: MetricsInsightsListProps ) => {
 	const translate = useTranslate();
-	const { insights } = props;
+	const { insights = [], locked = false } = props;
+	const lockedInsights = useLockedInsights();
 
+	const itemsToRender = locked ? lockedInsights : insights;
 	return (
 		<Container className="metrics-insights-list">
-			{ insights.map( ( insight ) => (
+			{ itemsToRender.map( ( insight ) => (
 				<FoldableCard
-					header={ <InsightHeader>{ insight.header }</InsightHeader> }
+					header={ <InsightHeader locked={ locked }>{ insight.header }</InsightHeader> }
 					screenReaderText={ translate( 'More' ) }
 					compact
 					clickableHeader
 					smooth
+					disabled={ locked }
+					icon={ locked ? 'lock' : 'chevron-down' }
 				>
 					<InsightContent>{ insight.description }</InsightContent>
 				</FoldableCard>
 			) ) }
 		</Container>
 	);
 };
+
+export function useLockedInsights(): Insight[] {
+	const translate = useTranslate();
+
+	return [
+		{
+			header: translate(
+				'The full report will display all the informations you need to improve your site domain, hosting, performance, health, and security'
+			),
+		},
+		{
+			header: translate(
+				'Click on the "Get full site report - It\'s free" button to unlock the all the information you need to make your site stand out on the web'
+			),
+		},
+		{
+			header: translate(
+				"You'll be asked to provide your name and email, and once you confirm your email, you should be able to view all of your site stats"
+			),
+		},
+		{
+			header: translate(
+				'The full report will display all the information about how your site is perfoming currently among with information about how to improve it'
+			),
+		},
+		{
+			header: translate(
+				'Feel free to use our tool how many times you want, its free, and once you have unlocked all functionalities you can see informations for any site'
+			),
+		},
+	];
+}

client/site-profiler/components/site-profiler.tsx

@@ -208,7 +208,9 @@ export default function SiteProfiler( props: Props ) {
 								) }
 								subtitle={ translate( "Optimize your site's health" ) }
 								ref={ healthScoresRef }
-							/>
+							>
+								<MetricsInsightsList locked />
+							</MetricsSection>
 						</LayoutBlockSection>
 					) }
 				</LayoutBlock>