Fix timezone parsing for monetize subscription dates

Author: tx2pnw

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

@@ -22,8 +22,8 @@ export const MonetizeSubscriptionTerms = ( {
 		return <>{ __( 'Never expires' ) }</>;
 	}
 
-	// Check if end_date is in the past
-	const endDate = new Date( subscription.end_date );
+	// Check if end_date is in the past (convert to ISO 8601 and append Z to parse as UTC)
+	const endDate = new Date( subscription.end_date.replace( ' ', 'T' ) + 'Z' );
 	const isExpired = endDate < new Date();
 
 	// Show "Expired" for past dates
@@ -44,14 +44,14 @@ export const MonetizeSubscriptionTerms = ( {
 			{ subscription.renew_interval === null
 				? // translators: %(date)s is the date the subscription expires. Format is LL (e.g. January 1, 2020).
 				  sprintf( __( 'Expires on %(date)s' ), {
-						date: formatDate( new Date( Date.parse( subscription?.end_date ?? '' ) ), locale, {
+						date: formatDate( new Date( subscription.end_date.replace( ' ', 'T' ) + 'Z' ), locale, {
 							dateStyle: 'long',
 						} ),
 				  } )
 				: // 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, {
+						date: formatDate( new Date( subscription.end_date.replace( ' ', 'T' ) + 'Z' ), locale, {
 							dateStyle: 'long',
 						} ),
 				  } ) }

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

@@ -84,9 +84,13 @@ function AutoRenewButton( {
 					if ( isAutoRenewing ) {
 						// translators: date is a formatted date string
 						return sprintf( __( 'You will be billed on %(date)s' ), {
-							date: formatDate( new Date( Date.parse( data?.end_date ?? '' ) ), locale, {
-								dateStyle: 'long',
-							} ),
+							date: formatDate(
+								new Date( ( data?.end_date ?? '' ).replace( ' ', 'T' ) + 'Z' ),
+								locale,
+								{
+									dateStyle: 'long',
+								}
+							),
 						} );
 					}
 				} )();
@@ -230,7 +234,14 @@ export default function MonetizeSubscriptionDetails() {
 	const formattedExpiry = useFormattedTime( subscription?.end_date ?? '' );
 	const formattedRenewal = useFormattedTime( subscription?.end_date ?? '' );
 	const isOneTimePurchase = subscription?.renew_interval === 'one-time';
+	const endDate = subscription?.end_date
+		? new Date( subscription.end_date.replace( ' ', 'T' ) + 'Z' )
+		: null;
+	const isExpired = endDate && endDate < new Date();
 	const expiryDateTitle = ( () => {
+		if ( isExpired ) {
+			return __( 'Expired' );
+		}
 		if ( isProduct ) {
 			return __( 'Paid until' );
 		}
@@ -285,6 +296,7 @@ export default function MonetizeSubscriptionDetails() {
 								}
 								return __( 'Auto-renew is disabled.' );
 							} )() }
+							intent={ isExpired ? 'error' : undefined }
 						/>
 
 						{ isOneTimePurchase && (