Performance Profiler: weekly report subscribe page (#94065)

* update controller

* add message display component

* add redirect to log-in page

* update redirect

* add loading and error states

* update button link

* update cta focus state

* update mutation name

client/data/site-profiler/types.ts

@@ -112,6 +112,10 @@ export interface UrlBasicMetricsQueryResponse {
 	token: string;
 }
 
+export interface LeadMutationResponse {
+	success: boolean;
+}
+
 export interface UrlSecurityMetricsQueryResponse {
 	wpscan: {
 		report: {

client/data/site-profiler/use-lead-query.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { LeadMutationResponse } from 'calypso/data/site-profiler/types';
+import wp from 'calypso/lib/wp';
+
+export const useLeadMutation = ( url?: string, hash?: string ) => {
+	return useMutation( {
+		mutationKey: [ 'lead', url, hash ],
+		mutationFn: (): Promise< LeadMutationResponse > =>
+			wp.req.post(
+				{
+					path: '/site-profiler/lead',
+					apiNamespace: 'wpcom/v2',
+				},
+				{
+					url,
+					hash,
+				}
+			),
+	} );
+};

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

@@ -13,11 +13,13 @@ import './style.scss';
 type PerformanceProfilerDashboardContentProps = {
 	performanceReport: PerformanceReport;
 	url: string;
+	hash: string;
 };
 
 export const PerformanceProfilerDashboardContent = ( {
 	performanceReport,
 	url,
+	hash,
 }: PerformanceProfilerDashboardContentProps ) => {
 	const { overall_score, fcp, lcp, cls, inp, ttfb, tbt, audits, history, screenshots, is_wpcom } =
 		performanceReport;
@@ -41,7 +43,7 @@ export const PerformanceProfilerDashboardContent = ( {
 					tbt={ tbt }
 					history={ history }
 				/>
-				<NewsletterBanner />
+				<NewsletterBanner link={ `/speed-test-tool/weekly-report?url=${ url }&hash=${ hash }` } />
 				<ScreenshotTimeline screenshots={ screenshots ?? [] } />
 				{ audits && <InsightsSection audits={ audits } url={ url } isWpcom={ is_wpcom } /> }
 			</div>

client/performance-profiler/components/message-display/index.tsx

@@ -0,0 +1,55 @@
+import { Gridicon } from '@automattic/components';
+import { Button, IconType } from '@wordpress/components';
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { Badge } from 'calypso/performance-profiler/components/badge';
+
+import './style.scss';
+
+type Props = {
+	title?: string;
+	message: string | ReactNode;
+	ctaText?: string;
+	ctaHref?: string;
+	secondaryMessage?: string;
+	displayBadge?: boolean;
+	ctaIcon?: string;
+	isErrorMessage?: boolean;
+};
+
+export const MessageDisplay = ( {
+	displayBadge = false,
+	title,
+	message,
+	ctaText,
+	ctaHref,
+	secondaryMessage,
+	ctaIcon = '',
+	isErrorMessage = false,
+}: Props ) => {
+	return (
+		<div className="message-display">
+			<div className="l-block-wrapper">
+				<div className="message-wrapper">
+					{ displayBadge && <Badge /> }
+					<div className={ clsx( 'main-message', { error: isErrorMessage } ) }>
+						{ isErrorMessage && <Gridicon icon="notice-outline" /> }
+						{ title && <h1 className="title">{ title }</h1> }
+						<p className="message">{ message }</p>
+						{ ctaText && ctaHref && (
+							<Button
+								variant="primary"
+								icon={ ctaIcon as IconType }
+								className="cta-button"
+								href={ ctaHref }
+							>
+								{ ctaText }
+							</Button>
+						) }
+					</div>
+					{ secondaryMessage && <p className="secondary-message">{ secondaryMessage }</p> }
+				</div>
+			</div>
+		</div>
+	);
+};

client/performance-profiler/components/message-display/style.scss

@@ -0,0 +1,105 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/variables";
+
+$blueberry-color: #3858e9;
+
+.message-display {
+	color: #fff;
+	padding-top: 40px;
+	background: linear-gradient(180deg, var(--studio-gray-100) 25.44%, rgba(16, 21, 23, 0) 100%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPC9zdmc+Cg==) repeat, var(--studio-gray-100);
+
+	a {
+		color: $blueberry-color;
+
+		&:hover {
+			color: darken($blueberry-color, 10%);
+			text-decoration: underline;
+		}
+
+		&.is-primary {
+			color: #fff;
+			background-color: $blueberry-color;
+			border-radius: 4px;
+
+			&:hover:not(:disabled),
+			&:active:not(:disabled),
+			&:focus:not(:disabled) {
+				background-color: darken($blueberry-color, 10%);
+				border-color: darken($blueberry-color, 10%);
+				box-shadow: none;
+			}
+		}
+	}
+
+	p {
+		margin: 0;
+	}
+
+	.l-block-wrapper {
+		height: 100%;
+		max-width: 1056px;
+	}
+
+	.message-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		gap: 64px;
+		min-height: 700px;
+		width: 50%;
+
+		.main-message {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+			gap: 16px;
+
+			&.error {
+				border-radius: 4px;
+				border: 1px solid var(--studio-red-70);
+				background-color: var(--studio-red-70);
+				padding: 16px;
+				padding-left: 52px;
+				position: relative;
+
+				.gridicon {
+					position: absolute;
+					top: 16px;
+					left: 16px;
+				}
+
+				.cta-button {
+					margin: 0;
+				}
+			}
+
+			.title {
+				font-family: $brand-serif;
+				font-size: $font-headline-medium;
+				line-height: $font-headline-large;
+				color: #fff;
+			}
+
+			.message {
+				font-size: $font-body;
+				font-weight: 500;
+				line-height: $font-title-medium;
+			}
+
+			.cta-button {
+				margin-top: 16px;
+				font-size: $font-body-small;
+				line-height: $font-title-small;
+				padding: 20px;
+			}
+		}
+
+		.secondary-message {
+			font-size: $font-body-small;
+			line-height: $font-title-small;
+			color: var(--studio-gray-20);
+		}
+	}
+}

client/performance-profiler/components/newsletter-banner.tsx

@@ -34,7 +34,7 @@ const BlueberryButton = styled( Button )`
 	}
 `;
 
-export const NewsletterBanner = () => {
+export const NewsletterBanner = ( { link }: { link: string } ) => {
 	const translate = useTranslate();
 
 	return (
@@ -48,7 +48,7 @@ export const NewsletterBanner = () => {
 				</Body>
 				<Body>{ translate( 'All you need is a free WordPress.com account to get started.' ) }</Body>
 			</div>
-			<BlueberryButton variant="primary">
+			<BlueberryButton variant="primary" href={ link }>
 				{ translate( 'Sign up for email reports' ) }
 			</BlueberryButton>
 		</Container>

client/performance-profiler/controller.tsx

@@ -7,6 +7,7 @@ import Main from 'calypso/components/main';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import { TabType } from './components/header';
 import { PerformanceProfilerDashboard } from './pages/dashboard';
+import { WeeklyReport } from './pages/weekly-report';
 
 export function PerformanceProfilerDashboardContext( context: Context, next: () => void ): void {
 	const isLoggedIn = isUserLoggedIn( context.store.getState() );
@@ -41,6 +42,36 @@ export function PerformanceProfilerDashboardContext( context: Context, next: ()
 	next();
 }
 
+export function WeeklyReportContext( context: Context, next: () => void ): void {
+	const isLoggedIn = isUserLoggedIn( context.store.getState() );
+
+	if ( ! config.isEnabled( 'performance-profiler' ) ) {
+		page.redirect( '/' );
+		return;
+	}
+
+	if ( ! isLoggedIn ) {
+		window.location.href = '/log-in?redirect_to=' + encodeURIComponent( context.path );
+		return;
+	}
+
+	const url = context.query?.url?.startsWith( 'http' )
+		? context.query.url
+		: `https://${ context.query?.url ?? '' }`;
+
+	context.primary = (
+		<>
+			<Main fullWidthLayout>
+				<WeeklyReport url={ url } hash={ context.query?.hash ?? '' } />
+			</Main>
+
+			<UniversalNavbarFooter isLoggedIn={ isLoggedIn } />
+		</>
+	);
+
+	next();
+}
+
 export const notFound = ( context: Context, next: () => void ) => {
 	context.primary = (
 		<EmptyContent

client/performance-profiler/index.web.ts

@@ -1,8 +1,9 @@
 import page from '@automattic/calypso-router';
 import { makeLayout, render as clientRender } from 'calypso/controller/index.web';
-import { PerformanceProfilerDashboardContext, notFound } from './controller';
+import { PerformanceProfilerDashboardContext, WeeklyReportContext, notFound } from './controller';
 
 export default function () {
 	page( '/speed-test-tool/', PerformanceProfilerDashboardContext, makeLayout, clientRender );
+	page( '/speed-test-tool/weekly-report', WeeklyReportContext, makeLayout, clientRender );
 	page( '/speed-test-tool*', notFound, makeLayout, clientRender );
 }

client/performance-profiler/pages/dashboard/index.tsx

@@ -101,6 +101,7 @@ export const PerformanceProfilerDashboard = ( props: PerformanceProfilerDashboar
 				<PerformanceProfilerDashboardContent
 					performanceReport={ performanceReport }
 					url={ finalUrl ?? url }
+					hash={ hash }
 				/>
 			) }
 		</div>