feat(mobile): align upgrade prompts with desktop (#4914)

Author: DIYgod

apps/mobile/src/lib/error-parser.ts

@@ -80,6 +80,12 @@ export const toastFetchError = (error: Error, { title: _title }: { title?: strin
         code = typeof _code === "number" ? _code : Number(_code)
       }
       message = typeof _message === "string" && _message.trim() ? _message : message
+      if (code != null) {
+        const tValue = t(`errors:${code}` as any)
+        if (tValue !== `${code}`) {
+          message = tValue
+        }
+      }
 
       if (typeof reason === "string" && reason.trim()) {
         _reason = reason
@@ -122,8 +128,8 @@ export const toastFetchError = (error: Error, { title: _title }: { title?: strin
 
   if (needUpgradeError) {
     showUpgradeRequiredDialog({
-      title: _title || message,
-      message: _reason || message,
+      title: message || t("settings:subscription.actions.upgrade"),
+      message: t("settings:subscription.summary.free_description"),
     })
     return
   }

apps/mobile/src/modules/feed/FollowFeed.tsx

@@ -28,9 +28,9 @@ import { Text } from "@/src/components/ui/typography/Text"
 import { SafeAlertCuteReIcon } from "@/src/icons/safe_alert_cute_re"
 import { SafetyCertificateCuteReIcon } from "@/src/icons/safety_certificate_cute_re"
 import { User3CuteReIcon } from "@/src/icons/user_3_cute_re"
+import { toastFetchError } from "@/src/lib/error-parser"
 import { useCanDismiss, useNavigation } from "@/src/lib/navigation/hooks"
 import { useSetModalScreenOptions } from "@/src/lib/navigation/ScreenOptionsContext"
-import { getBizFetchErrorMessage } from "@/src/lib/parse-api-error"
 import { toast } from "@/src/lib/toast"
 import { FeedSummary } from "@/src/modules/discover/FeedSummary"
 import { FeedViewSelector } from "@/src/modules/feed/view-selector"
@@ -135,7 +135,7 @@ function FollowImpl(props: { feedId: string; defaultView?: FeedViewType }) {
         navigate.back()
       }
     } catch (error) {
-      toast.error(error instanceof Error ? getBizFetchErrorMessage(error) : "Failed to update feed")
+      toastFetchError(error as Error)
     } finally {
       setIsLoading(false)
     }
@@ -163,9 +163,7 @@ function FollowImpl(props: { feedId: string; defaultView?: FeedViewType }) {
               navigate.back()
             }
           } catch (error) {
-            toast.error(
-              error instanceof Error ? getBizFetchErrorMessage(error) : "Failed to update feed",
-            )
+            toastFetchError(error as Error)
           } finally {
             setIsLoading(false)
           }

apps/mobile/src/modules/list/FollowList.tsx

@@ -24,9 +24,9 @@ import { GroupedInsetListCard } from "@/src/components/ui/grouped/GroupedList"
 import { IconWithFallback } from "@/src/components/ui/icon/fallback-icon"
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 import { Text } from "@/src/components/ui/typography/Text"
+import { toastFetchError } from "@/src/lib/error-parser"
 import { useNavigation, useScreenIsInSheetModal } from "@/src/lib/navigation/hooks"
 import { useSetModalScreenOptions } from "@/src/lib/navigation/ScreenOptionsContext"
-import { getBizFetchErrorMessage } from "@/src/lib/parse-api-error"
 import { toast } from "@/src/lib/toast"
 
 import { FeedViewSelector } from "../feed/view-selector"
@@ -108,7 +108,7 @@ const Impl = (props: { id: string }) => {
         navigation.back()
       }
     } catch (error) {
-      toast.error(error instanceof Error ? getBizFetchErrorMessage(error) : "Failed to update list")
+      toastFetchError(error as Error)
     } finally {
       setIsLoading(false)
     }

apps/mobile/src/modules/settings/routes/ManageList.tsx

@@ -26,10 +26,9 @@ import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { Text } from "@/src/components/ui/typography/Text"
 import { CheckLineIcon } from "@/src/icons/check_line"
+import { toastFetchError } from "@/src/lib/error-parser"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import type { NavigationControllerView } from "@/src/lib/navigation/types"
-import { getBizFetchErrorMessage } from "@/src/lib/parse-api-error"
-import { toast } from "@/src/lib/toast"
 import { accentColor } from "@/src/theme/colors"
 
 const ManageListContext = createContext<{
@@ -82,7 +81,7 @@ export const ManageListScreen: NavigationControllerView<{
                     navigation.back()
                   })
                   .catch((error) => {
-                    toast.error(getBizFetchErrorMessage(error))
+                    toastFetchError(error as Error)
                     console.error(error)
                   })
               }}

apps/mobile/src/modules/settings/routes/Plan.tsx

@@ -6,6 +6,7 @@ import { useMutation, useQuery } from "@tanstack/react-query"
 import dayjs from "dayjs"
 import type { SubscriptionProduct } from "expo-iap"
 import { openURL } from "expo-linking"
+import type { TFunction } from "i18next"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import type { LayoutChangeEvent } from "react-native"
@@ -39,6 +40,41 @@ type PaymentPlan = NonNullable<StatusConfigs["PAYMENT_PLAN_LIST"]>[number]
 type PaymentFeature = PaymentPlan["limit"]
 type BillingPeriod = "monthly" | "yearly"
 
+const AI_MODEL_SELECTION_VALUE_LABELS = {
+  none: {
+    translationKey: "plan.featureValues.AI_MODEL_SELECTION.none",
+    fallback: "—",
+  },
+  curated: {
+    translationKey: "plan.featureValues.AI_MODEL_SELECTION.curated",
+    fallback: "Curated models",
+  },
+  high_performance: {
+    translationKey: "plan.featureValues.AI_MODEL_SELECTION.high_performance",
+    fallback: "All high-end models",
+  },
+} as const
+
+const PLAN_FEATURE_ORDER: Array<keyof PaymentFeature> = [
+  "MAX_SUBSCRIPTIONS",
+  "MAX_LISTS",
+  "MAX_INBOXES",
+  "MAX_ACTIONS",
+  "MAX_AI_ENTRY_SUMMARY_PER_DAY",
+  "MAX_AI_ENTRY_TRANSLATION_PER_DAY",
+  "MAX_AI_TEXT_TO_SPEECH_PER_DAY",
+  "AI_MODEL_SELECTION",
+  "AI_BRING_YOUR_OWN_KEY",
+  "BOOSTS",
+  "PRIORITY_SUPPORT",
+  "PRIVATE_SUBSCRIPTION",
+  "MAX_RSSHUB_SUBSCRIPTIONS",
+  "SECURE_IMAGE_PROXY",
+  "INTEGRATION_SUPPORTED",
+  "AI_CREDIT",
+  "MAX_AI_TASKS",
+]
+
 const BILLING_SEGMENTS: BillingPeriod[] = ["monthly", "yearly"]
 
 type SegmentLayout = {
@@ -96,11 +132,21 @@ const formatCurrency = (value: number) => currencyFormatter.format(value)
 const formatFeatureValue = (
   key: keyof PaymentFeature,
   value: PaymentFeature[keyof PaymentFeature] | undefined | null,
+  t?: TFunction<"settings">,
 ): string => {
   if (value == null) {
     return "—"
   }
 
+  if (key === "AI_MODEL_SELECTION" && typeof value === "string") {
+    const selectionValue =
+      AI_MODEL_SELECTION_VALUE_LABELS[value as keyof typeof AI_MODEL_SELECTION_VALUE_LABELS]
+
+    if (selectionValue) {
+      return t?.(selectionValue.translationKey) ?? selectionValue.fallback
+    }
+  }
+
   if (typeof value === "boolean") {
     return value ? "✓" : "—"
   }
@@ -337,13 +383,13 @@ export const PlanScreen: NavigationControllerView = () => {
     : t("subscription.summary.free")
 
   let summarySubtitle = t("subscription.summary.free_description")
-  if (role === UserRole.Pro || role === UserRole.Plus) {
-    summarySubtitle = t("subscription.summary.active")
-  } else if (daysLeft && daysLeft > 0 && role && role !== UserRole.Free) {
+  if (daysLeft && daysLeft > 0 && role && role !== UserRole.Free) {
     summarySubtitle = t("subscription.summary.trial_expiring", {
       date: dayjs(roleEndAt).format("MMMM D, YYYY"),
       days: daysLeft,
     })
+  } else if (currentPlan && currentPlan.role !== UserRole.Free) {
+    summarySubtitle = t("subscription.summary.active")
   }
 
   return (
@@ -407,6 +453,7 @@ export const PlanScreen: NavigationControllerView = () => {
                 isProcessing={isProcessing || isPurchasing || isProcessingPurchase}
                 isManaging={billingPortalMutation.isPending}
                 activeSubscription={billingSubscriptionQuery.data}
+                upgradeButtonText={plan.upgradeButtonText}
               />
             )
           })}
@@ -568,6 +615,7 @@ const PlanCard = ({
   isProcessing,
   isManaging,
   activeSubscription,
+  upgradeButtonText,
 }: {
   plan: PaymentPlan
   billingPeriod: BillingPeriod
@@ -578,6 +626,7 @@ const PlanCard = ({
   isProcessing?: boolean
   isManaging?: boolean
   activeSubscription?: ActiveSubscription
+  upgradeButtonText?: string
 }) => {
   const { t } = useTranslation("settings")
 
@@ -645,11 +694,14 @@ const PlanCard = ({
   const planDescription = t(`plan.descriptions.${plan.role}` as const, { defaultValue: "" })
 
   const features = useMemo(() => {
-    return (
-      Object.entries(plan.limit || {}) as Array<
-        [keyof PaymentFeature, PaymentFeature[keyof PaymentFeature]]
-      >
-    )
+    const fallbackFeatureOrder = Object.keys(plan.limit || {}) as Array<keyof PaymentFeature>
+    const orderedFeatureKeys = [
+      ...PLAN_FEATURE_ORDER,
+      ...fallbackFeatureOrder.filter((featureKey) => !PLAN_FEATURE_ORDER.includes(featureKey)),
+    ]
+
+    return orderedFeatureKeys
+      .map((featureKey) => [featureKey, plan.limit?.[featureKey]] as const)
       .filter(([, value]) => isFeatureValueVisible(value))
       .slice(0, 6)
   }, [plan.limit])
@@ -719,7 +771,7 @@ const PlanCard = ({
 
       <View className="mt-4 gap-2">
         {features.map(([featureKey, value]) => {
-          const formattedValue = formatFeatureValue(featureKey, value)
+          const formattedValue = formatFeatureValue(featureKey, value, t)
           const showValue = !(typeof value === "boolean" && value)
           return (
             <View key={featureKey as string} className="flex-row items-center gap-3">
@@ -755,6 +807,7 @@ const PlanCard = ({
         isProcessing={isProcessing}
         isManaging={isManaging}
         activeSubscription={activeSubscription}
+        upgradeButtonText={upgradeButtonText}
       />
     </View>
   )
@@ -767,13 +820,15 @@ const PlanAction = ({
   isProcessing,
   isManaging,
   activeSubscription,
+  upgradeButtonText,
 }: {
   actionType: "current" | "upgrade" | "coming-soon" | null
   onUpgrade?: () => void
   onManageSubscription?: () => void
   isProcessing?: boolean
   isManaging?: boolean
   activeSubscription?: ActiveSubscription
+  upgradeButtonText?: string
 }) => {
   const { t } = useTranslation("settings")
 
@@ -865,7 +920,7 @@ const PlanAction = ({
           <ActivityIndicator color="white" />
         ) : (
           <Text className="text-base font-semibold text-white">
-            {t("subscription.actions.upgrade")}
+            {upgradeButtonText || t("subscription.actions.upgrade")}
           </Text>
         )}
       </Pressable>

apps/mobile/src/modules/settings/utils.ts

@@ -5,8 +5,8 @@ import * as Sharing from "expo-sharing"
 
 import { getDbPath } from "@/src/database"
 import { followApi } from "@/src/lib/api-client"
+import { toastFetchError } from "@/src/lib/error-parser"
 import { pickImage } from "@/src/lib/native/picker"
-import { getBizFetchErrorMessage } from "@/src/lib/parse-api-error"
 import { toast } from "@/src/lib/toast"
 
 export const setAvatar = async () => {
@@ -22,7 +22,7 @@ export const setAvatar = async () => {
       file: formData.get("file") as any,
     } as any)
     .catch((err) => {
-      toast.error(getBizFetchErrorMessage(err))
+      toastFetchError(err)
       throw err
     })
 
@@ -34,7 +34,7 @@ export const setAvatar = async () => {
       toast.success("Avatar updated")
     })
     .catch((err) => {
-      toast.error(getBizFetchErrorMessage(err))
+      toastFetchError(err)
     })
 }
 
@@ -74,8 +74,7 @@ export const importOpml = async () => {
       `Import successful, ${successfulItems.length} feeds were imported, ${conflictItems.length} feeds were already subscribed, and ${parsedErrorItems.length} feeds failed to import.`,
     )
   } catch (error) {
-    const bizError = getBizFetchErrorMessage(error as Error)
-    toast.error(`Import failed${bizError ? `: ${bizError}` : ""}`)
+    toastFetchError(error as Error)
     console.error(error)
   }
 }

apps/mobile/src/screens/(modal)/ListScreen.tsx

@@ -23,10 +23,10 @@ import {
   GroupedInsetButtonCell,
   GroupedInsetListCard,
 } from "@/src/components/ui/grouped/GroupedList"
+import { toastFetchError } from "@/src/lib/error-parser"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { useSetModalScreenOptions } from "@/src/lib/navigation/ScreenOptionsContext"
 import type { NavigationControllerView } from "@/src/lib/navigation/types"
-import { getBizFetchErrorMessage } from "@/src/lib/parse-api-error"
 import { toast } from "@/src/lib/toast"
 import { FeedViewSelector } from "@/src/modules/feed/view-selector"
 
@@ -218,11 +218,7 @@ const ScreenOptions = memo(({ title, listId }: ScreenOptionsProps) => {
                   toast.success("List created")
                   navigation.dismiss()
                 } catch (error) {
-                  toast.error(
-                    error instanceof Error
-                      ? getBizFetchErrorMessage(error)
-                      : "Failed to create list",
-                  )
+                  toastFetchError(error as Error)
                   console.error(error)
                 } finally {
                   setIsLoading(false)
@@ -243,9 +239,7 @@ const ScreenOptions = memo(({ title, listId }: ScreenOptionsProps) => {
                 toast.success("List updated")
                 navigation.dismiss()
               } catch (error) {
-                toast.error(
-                  error instanceof Error ? getBizFetchErrorMessage(error) : "Failed to update list",
-                )
+                toastFetchError(error as Error)
                 console.error(error)
               } finally {
                 setIsLoading(false)

locales/settings/en.json

@@ -579,10 +579,10 @@
   "notifications.token": "Client Token",
   "plan.canceled_expires": "Canceled - Expires {{date}}",
   "plan.current_plan": "Current Plan",
-  "plan.descriptions.basic": "More feeds without AI features.",
+  "plan.descriptions.basic": "More feeds plus daily AI summaries and translations.",
   "plan.descriptions.free": "Great for beginners.",
-  "plan.descriptions.plus": "Unlock AI features and more feeds.",
-  "plan.descriptions.pro": "Full access to the best of Folo.",
+  "plan.descriptions.plus": "Unlimited AI features with more feeds and automations.",
+  "plan.descriptions.pro": "Highest limits, full AI access, and top performance.",
   "plan.featureValues.AI_MODEL_SELECTION.curated": "Curated models",
   "plan.featureValues.AI_MODEL_SELECTION.high_performance": "All high-end models",
   "plan.featureValues.AI_MODEL_SELECTION.none": "—",
@@ -598,8 +598,8 @@
   "plan.features.MAX_AI_REQUESTS_PER_MONTH": "AI Chats Per Month",
   "plan.features.MAX_AI_TASKS": "AI Tasks",
   "plan.features.MAX_AI_TEXT_TO_SPEECH_PER_DAY": "AI Text-to-Speech Per Day",
-  "plan.features.MAX_INBOXES": "Inbox",
-  "plan.features.MAX_LISTS": "List",
+  "plan.features.MAX_INBOXES": "Inboxes",
+  "plan.features.MAX_LISTS": "Lists",
   "plan.features.MAX_RSSHUB_SUBSCRIPTIONS": "RSSHub Subscriptions",
   "plan.features.MAX_SUBSCRIPTIONS": "Feed Subscriptions",
   "plan.features.PRIORITY_SUPPORT": "Priority Support",

locales/settings/ja.json

@@ -579,10 +579,10 @@
   "notifications.token": "クライアントトークン",
   "plan.canceled_expires": "キャンセル済み - {{date}}に終了",
   "plan.current_plan": "現在のプラン",
-  "plan.descriptions.basic": "AI機能なしでより多くのフィードを利用できます。",
+  "plan.descriptions.basic": "より多くのフィードに加えて、毎日のAI要約と翻訳を利用できます。",
   "plan.descriptions.free": "初心者に最適です。",
-  "plan.descriptions.plus": "AI機能とより多くのフィードをアンロック。",
-  "plan.descriptions.pro": "Foloの最高の機能すべてにアクセス。",
+  "plan.descriptions.plus": "無制限のAI機能と、より多くのフィードや自動化を利用できます。",
+  "plan.descriptions.pro": "最高の上限、完全なAI機能、そして最上位のパフォーマンス。",
   "plan.featureValues.AI_MODEL_SELECTION.curated": "厳選モデル",
   "plan.featureValues.AI_MODEL_SELECTION.high_performance": "高性能すべて",
   "plan.featureValues.AI_MODEL_SELECTION.none": "—",
@@ -598,7 +598,7 @@
   "plan.features.MAX_AI_REQUESTS_PER_MONTH": "1ヶ月あたりのAIリクエスト数",
   "plan.features.MAX_AI_TASKS": "AI タスク",
   "plan.features.MAX_AI_TEXT_TO_SPEECH_PER_DAY": "1日あたりのAI音声合成数",
-  "plan.features.MAX_INBOXES": "受信トレイフィード",
+  "plan.features.MAX_INBOXES": "受信箱",
   "plan.features.MAX_LISTS": "カスタムリスト",
   "plan.features.MAX_RSSHUB_SUBSCRIPTIONS": "RSSHub サブスクリプション",
   "plan.features.MAX_SUBSCRIPTIONS": "フィードサブスクリプション",