Show 'Expired X ago' with error styling for expired monetize subscriptions

Author: tx2pnw

client/dashboard/me/billing-monetize-subscriptions/monetize-item.tsx

@@ -7,7 +7,8 @@ import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import SiteIcon from '../../components/site-icon';
-import { formatDate } from '../../utils/datetime';
+import { Text } from '../../components/text';
+import { formatDate, isWithinLast, getRelativeTimeString } from '../../utils/datetime';
 
 export const MonetizeSubscriptionTerms = ( {
 	subscription,
@@ -26,7 +27,14 @@ export const MonetizeSubscriptionTerms = ( {
 
 	// Show "Expired" for past dates
 	if ( isExpired ) {
-		return <>{ __( 'Expired' ) }</>;
+		const isExpiredToday = isWithinLast( endDate, 24, 'hours' );
+		const expiredTodayText = __( 'Expired today' );
+		// translators: timeSinceExpiry is of the form "[number] [time-period] ago" i.e. "3 days ago"
+		const expiredFromNowText = sprintf( __( 'Expired %(timeSinceExpiry)s' ), {
+			timeSinceExpiry: getRelativeTimeString( endDate ),
+		} );
+
+		return <Text intent="error">{ isExpiredToday ? expiredTodayText : expiredFromNowText }</Text>;
 	}
 
 	// Show renewal or expiry for future dates

client/me/purchases/membership-item/index.tsx

@@ -21,7 +21,21 @@ export const MembershipTerms = ( { subscription }: { subscription: MembershipSub
 	const isExpired = endDate.isBefore( moment() );
 
 	if ( isExpired ) {
-		return <>{ translate( 'Expired' ) }</>;
+		const isExpiredToday = moment().diff( endDate, 'hours' ) < 24;
+
+		return (
+			<span className="purchase-item__is-error">
+				{ isExpiredToday
+					? translate( 'Expired today' )
+					: translate( 'Expired %(timeSinceExpiry)s', {
+							args: {
+								timeSinceExpiry: endDate.fromNow(),
+							},
+							context:
+								'timeSinceExpiry is of the form "[number] [time-period] ago" i.e. "3 days ago"',
+					  } ) }
+			</span>
+		);
 	}
 
 	return (