fix: better subscription state text

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 ? (
-    <Text className="mt-1">
-      Your{' '}
-      <span className="font-bold">
-        Standard Notes{userSubscriptionName ? ' ' : ''}
-        {userSubscriptionName}
-      </span>{' '}
-      subscription has been{' '}
-      <span className="font-bold">
-        canceled but will remain valid until {expirationDate}
-      </span>
-      . You may resubscribe below if you wish.
-    </Text>
-  ) : (
+  if (canceled) {
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription has been canceled
+        {' '}
+        {expired ? (
+          <span className="font-bold">
+            and expired on {expirationDateString}
+          </span>
+        ) : (
+          <span className="font-bold">
+            but will remain valid until {expirationDateString}
+          </span>
+        )}
+        . You may resubscribe below if you wish.
+      </Text>
+    );
+  }
+
+  if (expired) {
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription {' '}
+        <span className="font-bold">
+          expired on {expirationDateString}
+        </span>
+        . You may resubscribe below if you wish.
+      </Text>
+    );
+  }
+
+  return (
     <Text className="mt-1">
       Your{' '}
       <span className="font-bold">
@@ -38,7 +69,7 @@ const StatusText = observer(({ subscriptionState }: Props) => {
         {userSubscriptionName}
       </span>{' '}
       subscription will be{' '}
-      <span className="font-bold">renewed on {expirationDate}</span>.
+      <span className="font-bold">renewed on {expirationDateString}</span>.
     </Text>
   );
 });