fix(core): adjust payment related copywriting (#6655)

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',
+      activeTab: 'billing',
-      scrollAnchor: 'aiPricingPlan',
     });
   }, [setOpenSettingModal]);
 
@@ -96,7 +95,7 @@ export const AIUsagePanel = () => {
         hasPaymentFeature && aiSubscription?.canceledAt ? (
           <AIResume />
         ) : (
-          <Button onClick={openAiPricingPlan}>
+          <Button onClick={openBilling}>
             {t['com.affine.payment.ai.usage.change-button-label']()}
           </Button>
         )

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -106,7 +106,8 @@ const SubscriptionSettings = () => {
   const currentRecurring =
     proSubscription?.recurring ?? SubscriptionRecurring.Monthly;
 
-  const gotoPlansSetting = useCallback(() => {
+  const openPlans = useCallback(
+    (scrollAnchor?: string) => {
       mixpanel.track('Button', {
         resolve: 'ChangePlan',
         currentPlan: proSubscription?.plan,
@@ -114,8 +115,16 @@ const SubscriptionSettings = () => {
       setOpenSettingModalAtom({
         open: true,
         activeTab: 'plans',
+        scrollAnchor: scrollAnchor,
       });
-  }, [proSubscription, setOpenSettingModalAtom]);
+    },
+    [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: (
                       <span
-                        onClick={gotoPlansSetting}
+                        onClick={gotoCloudPlansSetting}
                         className={styles.currentPlanName}
                       />
                     ),
@@ -153,7 +162,7 @@ const SubscriptionSettings = () => {
             />
             <PlanAction
               plan={currentPlan}
-              gotoPlansSetting={gotoPlansSetting}
+              gotoPlansSetting={gotoCloudPlansSetting}
             />
           </div>
           <p className={styles.planPrice}>
@@ -170,7 +179,7 @@ const SubscriptionSettings = () => {
         <SubscriptionSettingSkeleton />
       )}
 
-      <AIPlanCard />
+      <AIPlanCard onClick={gotoAiPlanSetting} />
       {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
+    subscription === undefined ? (
-      ? t['com.affine.payment.billing-setting.ai.free-desc']()
+      <Trans
-      : subscription?.nextBillAt
+        i18nKey={'com.affine.payment.billing-setting.ai.free-desc'}
-        ? t['com.affine.payment.ai.billing-tip.next-bill-at']({
+        components={{
+          a: (
+            <a href="#" onClick={onClick} className={styles.currentPlanName} />
+          ),
+        }}
+      />
+    ) : subscription?.nextBillAt ? (
+      t['com.affine.payment.ai.billing-tip.next-bill-at']({
         due: timestampToLocalDate(subscription.nextBillAt),
       })
-        : subscription?.canceledAt && subscription.end
+    ) : subscription?.canceledAt && subscription.end ? (
-          ? t['com.affine.payment.ai.billing-tip.end-at']({
+      t['com.affine.payment.ai.billing-tip.end-at']({
         end: timestampToLocalDate(subscription.end),
       })
-          : null;
+    ) : null;
 
   return (
     <div className={styles.planCard} style={{ marginTop: 24 }}>
@@ -280,12 +296,12 @@ const AIPlanCard = () => {
         {price?.yearlyAmount ? (
           subscription ? (
             subscription.canceledAt ? (
-              <AIResume />
+              <AIResume className={styles.planAction} />
             ) : (
-              <AICancel />
+              <AICancel className={styles.planAction} />
             )
           ) : (
-            <AISubscribe>
+            <AISubscribe className={styles.planAction}>
               {t['com.affine.payment.billing-setting.ai.purchase']()}
             </AISubscribe>
           )

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.change-button-label": "Change Plan",
-  "com.affine.payment.ai.usage.purchase-button-label": "Upgrade",
+  "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 <a>Free plan</a>.",
   "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.",