From 3c4dbed16b12ac89e3caf62d2709b5191604887e Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Mon, 6 Nov 2023 10:40:52 +0800
Subject: [PATCH] fix(core): payment UI fix (#4839)

---
 .../components/notification-center/icons.tsx  | 23 +++++++++++++++++++
 .../components/notification-center/index.tsx  |  9 +++++++-
 .../general-setting/plans/index.tsx           |  1 +
 .../general-setting/plans/plan-card.tsx       | 12 ++++++++--
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/component/src/components/notification-center/icons.tsx

diff --git a/packages/frontend/component/src/components/notification-center/icons.tsx b/packages/frontend/component/src/components/notification-center/icons.tsx
new file mode 100644
index 000000000..f2e1da732
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/component/src/components/notification-center/index.tsx b/packages/frontend/component/src/components/notification-center/index.tsx
index 3a1c79db2..b83903c02 100644
--- a/packages/frontend/component/src/components/notification-center/index.tsx
+++ b/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}
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
index 1a1f0e8b6..58c5d6dfc 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
+++ b/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
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
index 737fdb9f0..359aeb3da 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/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>
   );