删除 ProFeaturePaywall 组件,模态框内改为简洁订阅提示

This commit is contained in:
2569718930@qq.com
2026-05-25 02:02:05 +08:00
parent b6725ea36d
commit d05d11148e
2 changed files with 21 additions and 103 deletions
@@ -1,9 +1,10 @@
"use client";
import clsx from "clsx";
import Link from "next/link";
import { LockKeyhole } from "lucide-react";
import { CSSProperties, useEffect, useMemo, useState } from "react";
import type { Locale } from "@/lib/i18n";
import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
import { getFutureModalView } from "@/lib/dashboard-utils";
import { getModelView, getProbabilityView } from "@/lib/model-utils";
import { getTodayPaceView } from "@/lib/pace-utils";
@@ -898,10 +899,25 @@ export function FutureForecastModalContent({
</div>
</div>
) : !isPro ? (
<ProFeaturePaywall
feature={isToday ? "today" : "future"}
onClose={modal.closeFutureModal}
/>
<div className="flex h-full items-center justify-center p-8">
<div className="text-center">
<LockKeyhole size={32} className="mx-auto mb-3 text-slate-400" />
<p className="text-sm font-bold text-slate-700">
{locale === "en-US" ? "Pro subscription required" : "需要 Pro 订阅"}
</p>
<p className="mt-1 text-xs text-slate-500">
{locale === "en-US"
? "Subscribe in Account Center to unlock full analysis."
: "请在账户中心订阅以解锁完整分析功能。"}
</p>
<Link
href="/account"
className="mt-4 inline-flex items-center gap-2 rounded-lg bg-slate-950 px-4 py-2 text-sm font-bold text-white hover:bg-slate-800"
>
{locale === "en-US" ? "Subscribe" : "去订阅"}
</Link>
</div>
</div>
) : (
<div className="modal-content large future-modal">
<FutureForecastModalHeader
@@ -1,98 +0,0 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { useI18n } from "@/hooks/useI18n";
import { useProAccess } from "@/hooks/useDashboardStore";
import { UnlockProOverlay } from "@/components/subscription/UnlockProOverlay";
import { trackAppEvent } from "@/lib/app-analytics";
const TELEGRAM_GROUP_URL = String(
process.env.NEXT_PUBLIC_TELEGRAM_GROUP_URL ||
"https://t.me/+Io5H9oVHFmVjOTQ5",
).trim();
const SUBSCRIPTION_HELP_HREF = "/subscription-help";
type ProFeaturePaywallProps = {
feature: "today" | "history" | "future" | "assistant" | "scan";
onClose?: () => void;
};
export function ProFeaturePaywall({
feature,
onClose,
}: ProFeaturePaywallProps) {
const router = useRouter();
const { locale } = useI18n();
const { proAccess } = useProAccess();
const [usePoints, setUsePoints] = useState(true);
const isEn = locale === "en-US";
const isAuthenticated = proAccess.authenticated;
const pointsAvailable = Number(proAccess.points || 0);
const PRO_PRICE_USD = 10;
const POINTS_PER_USD = 500;
const MAX_DISCOUNT_USD = 3;
const billing = useMemo(() => {
const isEligible = pointsAvailable >= POINTS_PER_USD;
const maxRedeemablePoints = MAX_DISCOUNT_USD * POINTS_PER_USD;
const boundedPoints = isEligible
? Math.min(pointsAvailable, maxRedeemablePoints)
: 0;
const discountUnits = Math.floor(boundedPoints / POINTS_PER_USD);
const pointsUsed = discountUnits * POINTS_PER_USD;
const discountAmount = usePoints ? discountUnits : 0;
return {
pointsEnabled: true,
isEligible,
pointsPerUsd: POINTS_PER_USD,
maxDiscountUsd: MAX_DISCOUNT_USD,
pointsUsed: usePoints ? pointsUsed : 0,
discountAmount,
finalPrice: PRO_PRICE_USD - discountAmount,
};
}, [pointsAvailable, usePoints]);
const payLabel = isAuthenticated
? isEn
? "Open Pro in Account"
: "去账户中心开通 Pro"
: isEn
? "Sign In to Unlock Pro"
: "先登录再开通 Pro";
useEffect(() => {
trackAppEvent("paywall_viewed", {
entry: "feature_gate",
feature,
user_state: isAuthenticated ? "logged_in" : "guest",
});
}, [feature, isAuthenticated]);
return (
<div className="flex w-full flex-col items-center justify-center py-6 md:py-10 z-30 p-4">
<UnlockProOverlay
locale={locale}
points={pointsAvailable}
planPriceUsd={PRO_PRICE_USD}
usePoints={usePoints}
onToggleUsePoints={() => setUsePoints((prev) => !prev)}
billing={billing}
onClose={onClose}
onPay={() => {
if (!isAuthenticated) {
router.push("/auth/login?next=%2Faccount");
return;
}
router.push("/account");
}}
payLabel={payLabel}
faqHref={SUBSCRIPTION_HELP_HREF}
telegramGroupUrl={TELEGRAM_GROUP_URL}
/>
</div>
);
}