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

packages/frontend/component/src/components/notification-center/icons.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+export const SuccessIcon = ({
+  width = 24,
+  height = 24,
+}: SVGProps<SVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM16.2247 9.36363C16.5176 9.07073 16.5176 8.59586 16.2247 8.30296C15.9318 8.01007 15.4569 8.01007 15.164 8.30296L9.88882 13.5782L8.30804 11.9974C8.01515 11.7045 7.54027 11.7045 7.24738 11.9974C6.95449 12.2903 6.95449 12.7652 7.24738 13.0581L9.35849 15.1692C9.65138 15.4621 10.1263 15.4621 10.4192 15.1692L16.2247 9.36363Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

packages/frontend/component/src/components/notification-center/index.tsx

@@ -17,6 +17,7 @@ import {
   useState,
 } from 'react';
 
+import { SuccessIcon } from './icons';
 import * as styles from './index.css';
 import type { Notification } from './index.jotai';
 import {
@@ -47,21 +48,25 @@ const typeColorMap = {
     light: styles.lightInfoStyle,
     dark: styles.darkInfoStyle,
     default: '',
+    icon: <InformationFillDuotoneIcon />,
   },
   success: {
     light: styles.lightSuccessStyle,
     dark: styles.darkSuccessStyle,
     default: '',
+    icon: <SuccessIcon />,
   },
   warning: {
     light: styles.lightWarningStyle,
     dark: styles.darkWarningStyle,
     default: '',
+    icon: <InformationFillDuotoneIcon />,
   },
   error: {
     light: styles.lightErrorStyle,
     dark: styles.darkErrorStyle,
     default: '',
+    icon: <InformationFillDuotoneIcon />,
   },
 };
 
@@ -286,7 +291,9 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
               [styles.lightInfoIconStyle]: notification.theme === 'light',
             })}
           >
-            <InformationFillDuotoneIcon />
+            {typeColorMap[notification.type]?.icon ?? (
+              <InformationFillDuotoneIcon />
+            )}
           </div>
           <div className={styles.notificationTitleContactStyle}>
             {notification.title}

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>
   );