From a0c22b7d06654782bb02909f46e5465ea50b83bd Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Wed, 13 Aug 2025 12:42:29 +0800
Subject: [PATCH] fix(core): manage payment details entry adjustment (#13481)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### PR Dependency Tree


* **PR #13481** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- Bug Fixes
- The “Update payment method” prompt now appears only when your
subscription is past due.
- Payment Method section now shows whenever a paid plan record exists
(loading placeholders unchanged).
- Action button styling adjusts for past-due subscriptions (uses the
alternate/secondary style).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../general-setting/billing/ai-plan-card.tsx  | 12 +++++++-----
 .../setting/general-setting/billing/index.tsx |  7 ++-----
 .../general-setting/billing/pro-plan-card.tsx | 19 +++++++++++++------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/ai-plan-card.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/ai-plan-card.tsx
index c257bdff8..251d594a8 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/ai-plan-card.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/ai-plan-card.tsx
@@ -97,11 +97,13 @@ export const AIPlanCard = ({ onClick }: { onClick: () => void }) => {
                     </AISubscribe>
                   )
                 ) : null}
-                <PaymentMethodUpdater
-                  inCardView
-                  className={styles.managementInCard}
-                  variant="primary"
-                />
+                {subscription?.status === SubscriptionStatus.PastDue ? (
+                  <PaymentMethodUpdater
+                    inCardView
+                    className={styles.managementInCard}
+                    variant="primary"
+                  />
+                ) : null}
               </div>
             </>
           }
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/index.tsx
index 01f45a8e0..4673daea4 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/index.tsx
@@ -4,7 +4,6 @@ import {
   SettingWrapper,
 } from '@affine/component/setting-components';
 import { SubscriptionService } from '@affine/core/modules/cloud';
-import { SubscriptionStatus } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -80,7 +79,7 @@ const SubscriptionSettings = ({
   return (
     <div className={styles.subscription}>
       <AIPlanCard onClick={gotoAiPlanSetting} />
-      {/* loaded  */}
+
       {proSubscription !== null ? (
         isBeliever ? (
           <BelieverIdentifier onOpenPlans={gotoCloudPlansSetting} />
@@ -94,9 +93,7 @@ const SubscriptionSettings = ({
       <TypeformLink />
 
       {proSubscription !== null ? (
-        proSubscription?.status === SubscriptionStatus.Active && (
-          <PaymentMethod />
-        )
+        proSubscription && <PaymentMethod />
       ) : (
         <SubscriptionSettingSkeleton />
       )}
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/pro-plan-card.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/pro-plan-card.tsx
index 9201893f2..38de3fae7 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/pro-plan-card.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/billing/pro-plan-card.tsx
@@ -148,6 +148,7 @@ const CloudExpirationInfo = () => {
 
 const PlanAction = ({
   plan,
+  subscriptionStatus,
   gotoPlansSetting,
 }: {
   plan: string;
@@ -167,18 +168,24 @@ const PlanAction = ({
     <div className={styles.planActionContainer}>
       <Button
         className={styles.planAction}
-        variant="primary"
+        variant={
+          subscriptionStatus === SubscriptionStatus.PastDue
+            ? 'secondary'
+            : 'primary'
+        }
         onClick={gotoPlansSetting}
       >
         {plan === SubscriptionPlan.Pro
           ? t['com.affine.payment.billing-setting.change-plan']()
           : t['com.affine.payment.billing-setting.upgrade']()}
       </Button>
-      <PaymentMethodUpdater
-        inCardView
-        className={styles.managementInCard}
-        variant="primary"
-      />
+      {subscriptionStatus === SubscriptionStatus.PastDue ? (
+        <PaymentMethodUpdater
+          inCardView
+          className={styles.managementInCard}
+          variant="primary"
+        />
+      ) : null}
     </div>
   );
 };