diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
index 99fe89d4a..be1485854 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
@@ -15,22 +15,53 @@ const StatusText = observer(({ subscriptionState }: Props) => {
const { userSubscription, userSubscriptionName } = subscriptionState;
const expirationDate = new Date(
convertTimestampToMilliseconds(userSubscription!.endsAt)
- ).toLocaleString();
+ );
+ const expirationDateString = expirationDate.toLocaleString();
+ const expired = expirationDate.getTime() < new Date().getTime();
+ const canceled = userSubscription!.cancelled;
- return userSubscription!.cancelled ? (
-
- Your{' '}
-
- Standard Notes{userSubscriptionName ? ' ' : ''}
- {userSubscriptionName}
- {' '}
- subscription has been{' '}
-
- canceled but will remain valid until {expirationDate}
-
- . You may resubscribe below if you wish.
-
- ) : (
+ if (canceled) {
+ return (
+
+ Your{' '}
+
+ Standard Notes{userSubscriptionName ? ' ' : ''}
+ {userSubscriptionName}
+ {' '}
+ subscription has been canceled
+ {' '}
+ {expired ? (
+
+ and expired on {expirationDateString}
+
+ ) : (
+
+ but will remain valid until {expirationDateString}
+
+ )}
+ . You may resubscribe below if you wish.
+
+ );
+ }
+
+ if (expired) {
+ return (
+
+ Your{' '}
+
+ Standard Notes{userSubscriptionName ? ' ' : ''}
+ {userSubscriptionName}
+ {' '}
+ subscription {' '}
+
+ expired on {expirationDateString}
+
+ . You may resubscribe below if you wish.
+
+ );
+ }
+
+ return (
Your{' '}
@@ -38,7 +69,7 @@ const StatusText = observer(({ subscriptionState }: Props) => {
{userSubscriptionName}
{' '}
subscription will be{' '}
- renewed on {expirationDate}.
+ renewed on {expirationDateString}.
);
});