From 59214af3ad5ae8cf3729e5ac64e69c30ba65a6c0 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Wed, 24 Apr 2024 16:05:09 +0000 Subject: [PATCH] fix(core): adjust payment related copywriting (#6655) --- .../account-setting/ai-usage-panel.tsx | 7 +- .../general-setting/billing/index.tsx | 72 +++++++++++-------- packages/frontend/i18n/src/resources/en.json | 8 +-- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx b/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx index 950d82a686..7f434b5a5e 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx @@ -37,11 +37,10 @@ export const AIUsagePanel = () => { const loading = aiActionLimit === null || aiActionUsed === null; const loadError = useLiveData(quotaService.quota.error$); - const openAiPricingPlan = useCallback(() => { + const openBilling = useCallback(() => { setOpenSettingModal({ open: true, - activeTab: 'plans', - scrollAnchor: 'aiPricingPlan', + activeTab: 'billing', }); }, [setOpenSettingModal]); @@ -96,7 +95,7 @@ export const AIUsagePanel = () => { hasPaymentFeature && aiSubscription?.canceledAt ? ( ) : ( - ) 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 7a0c8195e7..091e92a579 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 @@ -106,16 +106,25 @@ const SubscriptionSettings = () => { const currentRecurring = proSubscription?.recurring ?? SubscriptionRecurring.Monthly; - const gotoPlansSetting = useCallback(() => { - mixpanel.track('Button', { - resolve: 'ChangePlan', - currentPlan: proSubscription?.plan, - }); - setOpenSettingModalAtom({ - open: true, - activeTab: 'plans', - }); - }, [proSubscription, setOpenSettingModalAtom]); + const openPlans = useCallback( + (scrollAnchor?: string) => { + mixpanel.track('Button', { + resolve: 'ChangePlan', + currentPlan: proSubscription?.plan, + }); + setOpenSettingModalAtom({ + open: true, + activeTab: 'plans', + scrollAnchor: scrollAnchor, + }); + }, + [proSubscription?.plan, setOpenSettingModalAtom] + ); + const gotoCloudPlansSetting = useCallback(() => openPlans(), [openPlans]); + const gotoAiPlanSetting = useCallback( + () => openPlans('aiPricingPlan'), + [openPlans] + ); const amount = proSubscription ? proPrice @@ -143,7 +152,7 @@ const SubscriptionSettings = () => { components={{ 1: ( ), @@ -153,7 +162,7 @@ const SubscriptionSettings = () => { />

@@ -170,7 +179,7 @@ const SubscriptionSettings = () => { )} - + {proSubscription !== null ? ( proSubscription?.status === SubscriptionStatus.Active && ( <> @@ -237,7 +246,7 @@ const SubscriptionSettings = () => { ); }; -const AIPlanCard = () => { +const AIPlanCard = ({ onClick }: { onClick: () => void }) => { const t = useAFFiNEI18N(); const subscriptionService = useService(SubscriptionService); useEffect(() => { @@ -257,17 +266,24 @@ const AIPlanCard = () => { } const billingTip = - subscription === undefined - ? t['com.affine.payment.billing-setting.ai.free-desc']() - : subscription?.nextBillAt - ? t['com.affine.payment.ai.billing-tip.next-bill-at']({ - due: timestampToLocalDate(subscription.nextBillAt), - }) - : subscription?.canceledAt && subscription.end - ? t['com.affine.payment.ai.billing-tip.end-at']({ - end: timestampToLocalDate(subscription.end), - }) - : null; + subscription === undefined ? ( + + ), + }} + /> + ) : subscription?.nextBillAt ? ( + t['com.affine.payment.ai.billing-tip.next-bill-at']({ + due: timestampToLocalDate(subscription.nextBillAt), + }) + ) : subscription?.canceledAt && subscription.end ? ( + t['com.affine.payment.ai.billing-tip.end-at']({ + end: timestampToLocalDate(subscription.end), + }) + ) : null; return (

@@ -280,12 +296,12 @@ const AIPlanCard = () => { {price?.yearlyAmount ? ( subscription ? ( subscription.canceledAt ? ( - + ) : ( - + ) ) : ( - + {t['com.affine.payment.billing-setting.ai.purchase']()} ) diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index fdedf8410f..35ccbaa388 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -872,8 +872,8 @@ "com.affine.payment.ai.pricing-plan.title-caption-2": "A true multimodal AI copilot.", "com.affine.payment.ai.usage-description-purchased": "You have purchased AFFiNE AI.", "com.affine.payment.ai.usage-title": "AFFiNE AI Usage", - "com.affine.payment.ai.usage.change-button-label": "Change", - "com.affine.payment.ai.usage.purchase-button-label": "Upgrade", + "com.affine.payment.ai.usage.change-button-label": "Change Plan", + "com.affine.payment.ai.usage.purchase-button-label": "Purchase", "com.affine.payment.ai.usage.used-caption": "Times used", "com.affine.payment.ai.usage.used-detail": "{{used}}/{{limit}} Times", "com.affine.payment.benefit-1": "Unlimited local workspaces", @@ -909,7 +909,7 @@ "com.affine.payment.billing-setting.upgrade": "Upgrade", "com.affine.payment.billing-setting.view-invoice": "View Invoice", "com.affine.payment.billing-setting.year": "year", - "com.affine.payment.billing-setting.ai.free-desc": "Yue are current on the Free plan.", + "com.affine.payment.billing-setting.ai.free-desc": "Yue are current on the Free plan.", "com.affine.payment.billing-setting.ai.purchase": "Purchase", "com.affine.payment.blob-limit.description.local": "The maximum file upload size for local workspaces is {{quota}}.", "com.affine.payment.blob-limit.description.member": "The maximum file upload size for this joined workspace is {{quota}}. You can contact the owner of this workspace.", @@ -1165,7 +1165,7 @@ "com.affine.star-affine.confirm": "Star on GitHub", "com.affine.star-affine.description": "Are you finding our app useful and enjoyable? We'd love your support to keep improving! A great way to help us out is by giving us a star on GitHub. This simple action can make a big difference and helps us continue to deliver the best experience for you.", "com.affine.star-affine.title": "Star Us on GitHub", - "com.affine.storage.change-plan": "Change", + "com.affine.storage.change-plan": "Change Plan", "com.affine.storage.disabled.hint": "AFFiNE Cloud is currently in early access phase and is not supported for upgrading, please be patient and wait for our pricing plan.", "com.affine.storage.extend.hint": "The usage has reached its maximum capacity, AFFiNE Cloud is currently in early access phase and is not supported for upgrading, please be patient and wait for our pricing plan. ", "com.affine.storage.extend.link": "To get more information click here.",