fix(core): payment UI fix (#4839)

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx

@@ -163,6 +163,7 @@ const Settings = () => {
             onNotify={({ detail, recurring }) => {
               pushNotification({
                 type: 'success',
+                theme: 'default',
                 title: t['com.affine.payment.updated-notify-title'](),
                 message:
                   detail.plan === SubscriptionPlan.Free

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -6,6 +6,7 @@ import {
   checkoutMutation,
   SubscriptionPlan,
   SubscriptionRecurring,
+  SubscriptionStatus,
   updateSubscriptionMutation,
 } from '@affine/graphql';
 import { Trans } from '@affine/i18n';
@@ -243,7 +244,10 @@ const ActionButton = ({
   const isFree = detail.plan === SubscriptionPlan.Free;
   const isCurrent =
     detail.plan === currentPlan &&
-    (isFree ? true : currentRecurring === recurring);
+    (isFree
+      ? true
+      : currentRecurring === recurring &&
+        subscription?.status === SubscriptionStatus.Active);
 
   // is current
   if (isCurrent) {
@@ -455,7 +459,11 @@ const ChangeRecurring = ({
       You are changing your <span className={styles.textEmphasis}>{from}</span>{' '}
       subscription to <span className={styles.textEmphasis}>{to}</span>{' '}
       subscription. This change will take effect in the next billing cycle, with
-      an effective date of <span className={styles.textEmphasis}>{due}</span>.
+      an effective date of{' '}
+      <span className={styles.textEmphasis}>
+        {new Date(due).toLocaleDateString()}
+      </span>
+      .
     </Trans>
   );