fix(core): manage payment details entry adjustment (#13481)

#### 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 -->

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
+                {subscription?.status === SubscriptionStatus.PastDue ? (
-                  inCardView
+                  <PaymentMethodUpdater
-                  className={styles.managementInCard}
+                    inCardView
-                  variant="primary"
+                    className={styles.managementInCard}
-                />
+                    variant="primary"
+                  />
+                ) : null}
               </div>
             </>
           }

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 && (
+        proSubscription && <PaymentMethod />
-          <PaymentMethod />
-        )
       ) : (
         <SubscriptionSettingSkeleton />
       )}

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
+      {subscriptionStatus === SubscriptionStatus.PastDue ? (
-        inCardView
+        <PaymentMethodUpdater
-        className={styles.managementInCard}
+          inCardView
-        variant="primary"
+          className={styles.managementInCard}
-      />
+          variant="primary"
+        />
+      ) : null}
     </div>
   );
 };