删除 ProFeaturePaywall 组件,模态框内改为简洁订阅提示
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user