diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx index e30b01abf7..456685269f 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx @@ -42,6 +42,7 @@ import { AICancel, AIResume, AISubscribe } from '../plans/ai/actions'; import { AIRedeemCodeButton } from '../plans/ai/actions/redeem'; import { BelieverCard } from '../plans/lifetime/believer-card'; import { BelieverBenefits } from '../plans/lifetime/benefits'; +import { RedeemCode } from '../plans/plan-card'; import * as styles from './style.css'; const DescriptionI18NKey = { @@ -146,20 +147,23 @@ const SubscriptionSettings = () => { spreadCol={false} name={t['com.affine.payment.billing-setting.current-plan']()} desc={ - - ), - }} - /> + <> + + ), + }} + /> + + } /> { > - {proSubscription.nextBillAt && ( - - )} - {isOnetime && proSubscription.end && ( - - )} {isBeliever || isOnetime ? null : proSubscription.end && proSubscription.canceledAt ? ( { ); }; +const CloudExpirationInfo = () => { + const t = useI18n(); + const subscriptionService = useService(SubscriptionService); + const subscription = useLiveData(subscriptionService.subscription.pro$); + + let text = ''; + if (subscription?.nextBillAt) { + text = t['com.affine.payment.billing-setting.renew-date.description']({ + renewDate: i18nTime(subscription.nextBillAt, { + absolute: { accuracy: 'day' }, + }), + }); + } else if (subscription?.end) { + text = t['com.affine.payment.billing-setting.due-date.description']({ + dueDate: i18nTime(subscription.end, { + absolute: { accuracy: 'day' }, + }), + }); + } + + return text ? ( + <> +
+ {text} + + ) : null; +}; + const TypeFormLink = () => { const t = useI18n(); const subscriptionService = useService(SubscriptionService); @@ -375,7 +385,7 @@ const AIPlanCard = ({ onClick }: { onClick: () => void }) => { absolute: { accuracy: 'day' }, }), }) - ) : subscription?.canceledAt && subscription.end ? ( + ) : (isOnetime || subscription?.canceledAt) && subscription.end ? ( t['com.affine.payment.ai.billing-tip.end-at']({ end: i18nTime(subscription.end, { absolute: { accuracy: 'day' } }), }) @@ -422,6 +432,13 @@ const PlanAction = ({ }) => { const t = useI18n(); + const subscription = useService(SubscriptionService).subscription; + const isOnetimePro = useLiveData(subscription.isOnetimePro$); + + if (isOnetimePro) { + return ; + } + return ( - ) : isOnetime ? ( - ) : (