diff --git a/frontend/app/subscription-help/SubscriptionHelpClient.tsx b/frontend/app/subscription-help/SubscriptionHelpClient.tsx new file mode 100644 index 00000000..2dce2f6b --- /dev/null +++ b/frontend/app/subscription-help/SubscriptionHelpClient.tsx @@ -0,0 +1,137 @@ +"use client"; + +import Link from "next/link"; +import { useMemo } from "react"; +import { + ArrowLeft, + CheckCircle2, + Coins, + CreditCard, + MessageSquare, + ShieldCheck, +} from "lucide-react"; +import { useI18n } from "@/hooks/useI18n"; + +const TELEGRAM_GROUP_URL = String( + process.env.NEXT_PUBLIC_TELEGRAM_GROUP_URL || + "https://t.me/+nMG7SjziUKYyZmM1", +).trim(); + +const FAQ_ITEMS = [ + { + q_zh: "Pro 包含哪些功能？", + q_en: "What features does Pro include?", + a_zh: "开通后可解锁：今日日内机场报文规则分析（含高温时段）、历史对账 + 未来日期分析、全平台智能气象推送。", + a_en: "Unlocks: intraday METAR rule analysis (including peak window), historical reconciliation + future-date analysis, and cross-platform smart weather push.", + }, + { + q_zh: "当前订阅价格是多少？", + q_en: "What is the current subscription price?", + a_zh: "目前仅提供月付：5 USDC / 30 天。", + a_en: "Monthly plan only: 5 USDC / 30 days.", + }, + { + q_zh: "积分如何抵扣？", + q_en: "How do points work for discounts?", + a_zh: "满 500 积分起兑，每 500 积分抵 1U，单次最多抵 3U。", + a_en: "500 points minimum — every 500 points = 1 USDC off, up to 3 USDC discount per payment.", + }, + { + q_zh: "支持哪些钱包和支付方式？", + q_en: "Which wallets and payment methods are supported?", + a_zh: "支持 EVM 浏览器钱包（MetaMask / OKX / Rabby / Bitget 等）及 WalletConnect 扫码钱包（Trust Wallet / Binance Web3 Wallet / TokenPocket 等）。", + a_en: "EVM browser wallets (MetaMask, OKX, Rabby, Bitget, etc.) and WalletConnect-compatible wallets (Trust Wallet, Binance Web3 Wallet, TokenPocket, etc.).", + }, +]; + +export function SubscriptionHelpClient() { + const { locale } = useI18n(); + const isEn = locale === "en-US"; + + const copy = useMemo(() => ({ + back: isEn ? "Back to Account" : "返回账户中心", + title: isEn ? "PolyWeather Pro Subscription Guide" : "PolyWeather Pro 订阅说明", + description: isEn + ? "Complete subscription rules and payment guide." + : "这里是完整的订阅规则和支付说明。你可以先在页面内绑定钱包，再直接开通 Pro。", + priceLabel: isEn ? "Price" : "订阅价格", + priceText: "5 USDC / 30 " + (isEn ? "Days" : "天"), + discountLabel: isEn ? "Points Discount" : "积分抵扣", + discountText: isEn ? "Up to 3 USDC off" : "最多抵 3U", + communityLabel: isEn ? "Community Points" : "社群积分", + communityLink: isEn ? "Join community to earn" : "加入社群即可赚取积分", + faqTitle: isEn ? "FAQ" : "常见问题", + }), [isEn]); + + return ( +
+
+ + + {copy.back} + + +
+
+ +

{copy.title}

+
+

{copy.description}

+ +
+
+
+ + {copy.priceLabel} +
+

{copy.priceText}

+
+
+
+ + {copy.discountLabel} +
+

{copy.discountText}

+
+
+
+ + {copy.communityLabel} +
+ + {copy.communityLink} + +
+
+
+ +
+

{copy.faqTitle}

+
+ {FAQ_ITEMS.map((item) => ( +
+

+ + {isEn ? item.q_en : item.q_zh} +

+

+ {isEn ? item.a_en : item.a_zh} +

+
+ ))} +
+
+
+
+ ); +} diff --git a/frontend/app/subscription-help/page.tsx b/frontend/app/subscription-help/page.tsx index 695542a9..140464bf 100644 --- a/frontend/app/subscription-help/page.tsx +++ b/frontend/app/subscription-help/page.tsx @@ -1,137 +1,11 @@ -"use client"; +import type { Metadata } from "next"; +import { SubscriptionHelpClient } from "./SubscriptionHelpClient"; -import Link from "next/link"; -import { useMemo } from "react"; -import { - ArrowLeft, - CheckCircle2, - Coins, - CreditCard, - MessageSquare, - ShieldCheck, -} from "lucide-react"; -import { useI18n } from "@/hooks/useI18n"; - -const TELEGRAM_GROUP_URL = String( - process.env.NEXT_PUBLIC_TELEGRAM_GROUP_URL || - "https://t.me/+nMG7SjziUKYyZmM1", -).trim(); - -const FAQ_ITEMS = [ - { - q_zh: "Pro 包含哪些功能？", - q_en: "What features does Pro include?", - a_zh: "开通后可解锁：今日日内机场报文规则分析（含高温时段）、历史对账 + 未来日期分析、全平台智能气象推送。", - a_en: "Unlocks: intraday METAR rule analysis (including peak window), historical reconciliation + future-date analysis, and cross-platform smart weather push.", - }, - { - q_zh: "当前订阅价格是多少？", - q_en: "What is the current subscription price?", - a_zh: "目前仅提供月付：5 USDC / 30 天。", - a_en: "Monthly plan only: 5 USDC / 30 days.", - }, - { - q_zh: "积分如何抵扣？", - q_en: "How do points work for discounts?", - a_zh: "满 500 积分起兑，每 500 积分抵 1U，单次最多抵 3U。", - a_en: "500 points minimum — every 500 points = 1 USDC off, up to 3 USDC discount per payment.", - }, - { - q_zh: "支持哪些钱包和支付方式？", - q_en: "Which wallets and payment methods are supported?", - a_zh: "支持 EVM 浏览器钱包（MetaMask / OKX / Rabby / Bitget 等）及 WalletConnect 扫码钱包（Trust Wallet / Binance Web3 Wallet / TokenPocket 等）。", - a_en: "EVM browser wallets (MetaMask, OKX, Rabby, Bitget, etc.) and WalletConnect-compatible wallets (Trust Wallet, Binance Web3 Wallet, TokenPocket, etc.).", - }, -]; +export const metadata: Metadata = { + title: "PolyWeather | Subscription Help", + description: "PolyWeather Pro subscription, points discount, and payment guide.", +}; export default function SubscriptionHelpPage() { - const { locale } = useI18n(); - const isEn = locale === "en-US"; - - const copy = useMemo(() => ({ - back: isEn ? "Back to Account" : "返回账户中心", - title: isEn ? "PolyWeather Pro Subscription Guide" : "PolyWeather Pro 订阅说明", - description: isEn - ? "Complete subscription rules and payment guide." - : "这里是完整的订阅规则和支付说明。你可以先在页面内绑定钱包，再直接开通 Pro。", - priceLabel: isEn ? "Price" : "订阅价格", - priceText: "5 USDC / 30 " + (isEn ? "Days" : "天"), - discountLabel: isEn ? "Points Discount" : "积分抵扣", - discountText: isEn ? "Up to 3 USDC off" : "最多抵 3U", - communityLabel: isEn ? "Community Points" : "社群积分", - communityLink: isEn ? "Join community to earn" : "加入社群即可赚取积分", - faqTitle: isEn ? "FAQ" : "常见问题", - }), [isEn]); - - return ( -
-
- - - {copy.back} - - -
-
- -

{copy.title}

-
-

{copy.description}

- -
-
-
- - {copy.priceLabel} -
-

{copy.priceText}

-
-
-
- - {copy.discountLabel} -
-

{copy.discountText}

-
-
-
- - {copy.communityLabel} -
- - {copy.communityLink} - -
-
-
- -
-

{copy.faqTitle}

-
- {FAQ_ITEMS.map((item) => ( -
-

- - {isEn ? item.q_en : item.q_zh} -

-

- {isEn ? item.a_en : item.a_zh} -

-
- ))} -
-
-
-
- ); + return ; }