Dashboard v2: lazy load current plan (expiry + manage link) (#103601)

Author: ellatrix

client/dashboard/app/router.tsx

@@ -84,9 +84,11 @@ const siteRoute = createRoute( {
 const siteOverviewRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: '/',
-	loader: ( { params: { siteSlug } } ) =>
+	loader: ( { params: { siteSlug }, preload } ) =>
 		Promise.all( [
-			queryClient.ensureQueryData( siteCurrentPlanQuery( siteSlug ) ),
+			// The current plan is nice to have preloaded, but not blocking for
+			// navigation.
+			preload ? queryClient.ensureQueryData( siteCurrentPlanQuery( siteSlug ) ) : undefined,
 			queryClient.ensureQueryData( siteEngagementStatsQuery( siteSlug ) ),
 		] ),
 } ).lazy( () =>

client/dashboard/components/text-blur/index.tsx

@@ -1,5 +1,9 @@
 import './style.scss';
 
-export function TextBlur( { text }: { text: string } ) {
-	return <span className="text-blur" data-text={ text } />;
+export function TextBlur( { children }: { children: React.ReactNode } ) {
+	return (
+		<span className="dashboard-text-blur" aria-hidden="true">
+			{ children }
+		</span>
+	);
 }

client/dashboard/components/text-blur/style.scss

@@ -1,5 +1,5 @@
-.text-blur::after {
-	content: attr(data-text);
+.dashboard-text-blur {
+	user-select: none;
     // The larger the font-size, the more blurring is needed.
 	filter: blur(0.3em);
 	opacity: 0.5;

client/dashboard/data/types.ts

@@ -56,7 +56,7 @@ export interface SitePlan {
 }
 
 export interface Plan {
-	id: string;
+	id: string | null;
 	current_plan?: boolean;
 	expiry?: string;
 	subscribed_date?: string;

client/dashboard/sites/overview/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
-import { siteQuery, siteCurrentPlanQuery, siteEngagementStatsQuery } from '../../app/queries';
+import { siteQuery, siteEngagementStatsQuery } from '../../app/queries';
 import { siteRoute } from '../../app/router';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
@@ -28,10 +28,9 @@ import './style.scss';
 function SiteOverview() {
 	const { siteSlug } = siteRoute.useParams();
 	const { data: site } = useQuery( siteQuery( siteSlug ) );
-	const { data: currentPlan } = useQuery( siteCurrentPlanQuery( siteSlug ) );
 	const { data: engagementStats } = useQuery( siteEngagementStatsQuery( siteSlug ) );
 
-	if ( ! site || ! currentPlan || ! engagementStats ) {
+	if ( ! site || ! engagementStats ) {
 		return;
 	}
 	return (
@@ -55,7 +54,7 @@ function SiteOverview() {
 			}
 		>
 			<HStack alignment="flex-start" spacing={ 8 }>
-				<Sidebar site={ site } currentPlan={ currentPlan } />
+				<Sidebar site={ site } />
 				<VStack spacing={ 8 }>
 					<Card style={ { padding: '16px' } }>
 						<VStack>

client/dashboard/sites/overview/sidebar.tsx

@@ -1,11 +1,11 @@
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import SiteCard from './site-card';
-import type { Site, Plan } from '../../data/types';
+import type { Site } from '../../data/types';
 
 /**
  * Sidebar component for the site overview page
  */
-export default function Sidebar( props: { site: Site; phpVersion?: string; currentPlan: Plan } ) {
+export default function Sidebar( props: { site: Site } ) {
 	return (
 		<VStack spacing={ 4 } style={ { minWidth: '300px' } }>
 			<SiteCard { ...props } />

client/dashboard/sites/overview/site-card.tsx

@@ -8,22 +8,23 @@ import {
 	ExternalLink,
 } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { sitePHPVersionQuery } from '../../app/queries';
+import { sitePHPVersionQuery, siteCurrentPlanQuery } from '../../app/queries';
 import { TextBlur } from '../../components/text-blur';
 import { getSiteStatusLabel } from '../../utils/site-status';
 import { getFormattedWordPressVersion } from '../../utils/wp-version';
 import SitePreview from '../site-preview';
-import type { Site, Plan } from '../../data/types';
+import type { Site } from '../../data/types';
 
 function PHPVersion( { siteSlug }: { siteSlug: string } ) {
-	return useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <TextBlur text="X.Y" />;
+	return useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <TextBlur>X.Y</TextBlur>;
 }
 
 /**
  * SiteCard component to display site information in a card format
  */
-export default function SiteCard( { site, currentPlan }: { site: Site; currentPlan: Plan } ) {
+export default function SiteCard( { site }: { site: Site } ) {
 	const { URL: url, is_private, is_wpcom_atomic } = site;
 	const wpVersion = getFormattedWordPressVersion( site );
 
@@ -77,7 +78,7 @@ export default function SiteCard( { site, currentPlan }: { site: Site; currentPl
 							) }
 						</HStack>
 					) }
-					<PlanDetails site={ site } currentPlan={ currentPlan } />
+					<PlanDetails site={ site } />
 				</VStack>
 			</VStack>
 		</Card>
@@ -103,40 +104,67 @@ function FieldTitle( { children }: { children: React.ReactNode } ) {
 	);
 }
 
-function PlanDetails( { site, currentPlan }: { site: Site; currentPlan: Plan } ) {
-	if ( ! site.plan || ! currentPlan ) {
+function PlanDetails( { site }: { site: Site } ) {
+	const { data: currentPlan } = useQuery( siteCurrentPlanQuery( site.slug ) );
+
+	if ( ! site.plan ) {
 		return null;
 	}
 
 	const {
 		plan: { product_name_short, is_free: isFree },
 	} = site;
-	const { expiry, id } = currentPlan;
+
 	return (
 		<VStack>
 			<FieldTitle>{ __( 'Plan' ) }</FieldTitle>
 			{ product_name_short && <Text>{ product_name_short }</Text> }
-			<Text>{ getPlanExpirationMessage( { isFree, expiry } ) }</Text>
-			{ id ? (
-				<Button href={ `/purchases/subscriptions/${ site.slug }/${ id }` } variant="link">
-					{ __( 'Manage subscription' ) }
-				</Button>
+			{ isFree ? (
+				<>
+					<Text>{ __( 'No expiration date.' ) }</Text>
+					<Button href={ `/plans/${ site.slug }` } variant="link">
+						{ __( 'Upgrade' ) }
+					</Button>
+				</>
 			) : (
-				<Button href={ `/plans/${ site.slug }` } variant="link">
-					{ __( 'Upgrade' ) }
-				</Button>
+				<>
+					{ currentPlan ? (
+						<>
+							<Text>{ getPlanExpirationMessage( currentPlan.expiry ) }</Text>
+							<Button
+								href={ `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` }
+								variant="link"
+							>
+								{ __( 'Manage subscription' ) }
+							</Button>
+						</>
+					) : (
+						<>
+							<Text>
+								<TextBlur>{ getPlanExpirationMessage( new Date().toISOString() ) }</TextBlur>
+							</Text>
+							{ /* @ts-expect-error inert is not typed */ }
+							<Button inert href="" variant="link">
+								<TextBlur>{ __( 'Manage subscription' ) }</TextBlur>
+							</Button>
+						</>
+					) }
+				</>
 			) }
 		</VStack>
 	);
 }
 
-function getPlanExpirationMessage( { isFree, expiry }: { isFree: boolean; expiry?: string } ) {
-	if ( isFree ) {
-		return __( 'No expiration date.' );
+function getPlanExpirationMessage( isoDate?: string ) {
+	if ( ! isoDate ) {
+		return null;
 	}
-	return (
-		expiry &&
+
+	return createInterpolateElement(
 		/* translators: %s: date of plan's expiration date. Eg.  August 20, 2025 */
-		sprintf( __( 'Expires on %s.' ), dateI18n( 'F j, Y', expiry ) )
+		sprintf( __( 'Expires on <time>%s</time>.' ), dateI18n( 'F j, Y', isoDate ) ),
+		{
+			time: <time dateTime={ isoDate } />,
+		}
 	);
 }

client/dashboard/sites/overview/uptime-card.tsx

@@ -35,7 +35,7 @@ function UptimeCardEnabled( { siteSlug }: { siteSlug: string } ) {
 			heading={
 				uptimePercentage === undefined ? (
 					<>
-						<TextBlur text={ sprintf( percentageString, '100' ) } />
+						<TextBlur>{ sprintf( percentageString, '100' ) }</TextBlur>
 						<VisuallyHidden>{ __( 'Loading…' ) }</VisuallyHidden>
 					</>
 				) : (