Show Expired status for monetize subscriptions past their end date

Author: tx2pnw

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

@@ -20,6 +20,16 @@ export const MonetizeSubscriptionTerms = ( {
 		return <>{ __( 'Never expires' ) }</>;
 	}
 
+	// Check if end_date is in the past
+	const endDate = new Date( subscription.end_date );
+	const isExpired = endDate < new Date();
+
+	// Show "Expired" for past dates
+	if ( isExpired ) {
+		return <>{ __( 'Expired' ) }</>;
+	}
+
+	// Show renewal or expiry for future dates
 	return (
 		<>
 			{ subscription.renew_interval === null
@@ -29,7 +39,7 @@ export const MonetizeSubscriptionTerms = ( {
 							dateStyle: 'long',
 						} ),
 				  } )
-				: // translators: %(siteUrl)s is the URL of the site. %(date)s is the date the subscription renews. . Format is LL (e.g. January 1, 2020).
+				: // translators: %(amount)s is the renewal price, %(date)s is the date the subscription renews. Format is LL (e.g. January 1, 2020).
 				  sprintf( __( 'Renews at %(amount)s on %(date)s' ), {
 						amount: formatCurrency( Number( subscription.renewal_price ), subscription.currency ),
 						date: formatDate( new Date( Date.parse( subscription?.end_date ?? '' ) ), locale, {

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

@@ -16,18 +16,26 @@ export const MembershipTerms = ( { subscription }: { subscription: MembershipSub
 		return <>{ translate( 'Never expires' ) }</>;
 	}
 
+	// Check if expired
+	const endDate = moment( subscription.end_date );
+	const isExpired = endDate.isBefore( moment() );
+
+	if ( isExpired ) {
+		return <>{ translate( 'Expired' ) }</>;
+	}
+
 	return (
 		<>
 			{ subscription.renew_interval === null
 				? translate( 'Expires on %(date)s', {
 						args: {
-							date: moment( subscription.end_date ).format( 'LL' ),
+							date: endDate.format( 'LL' ),
 						},
 				  } )
 				: translate( 'Renews at %(amount)s on %(date)s', {
 						args: {
 							amount: formatCurrency( Number( subscription.renewal_price ), subscription.currency ),
-							date: moment( subscription.end_date ).format( 'LL' ),
+							date: endDate.format( 'LL' ),
 						},
 				  } ) }
 		</>