删除 ProFeaturePaywall 组件，模态框内改为简洁订阅提示
This commit is contained in:
2569718930@qq.com
@@ -1,9 +1,10 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { LockKeyhole } from "lucide-react";
|
||||||
import { CSSProperties, useEffect, useMemo, useState } from "react";
|
import { CSSProperties, useEffect, useMemo, useState } from "react";
|
||||||
import type { Locale } from "@/lib/i18n";
|
import type { Locale } from "@/lib/i18n";
|
||||||
import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
|
|
||||||
import { getFutureModalView } from "@/lib/dashboard-utils";
|
import { getFutureModalView } from "@/lib/dashboard-utils";
|
||||||
import { getModelView, getProbabilityView } from "@/lib/model-utils";
|
import { getModelView, getProbabilityView } from "@/lib/model-utils";
|
||||||
import { getTodayPaceView } from "@/lib/pace-utils";
|
import { getTodayPaceView } from "@/lib/pace-utils";
|
||||||
@@ -898,10 +899,25 @@ export function FutureForecastModalContent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : !isPro ? (
|
) : !isPro ? (
|
||||||
<ProFeaturePaywall
|
<div className="flex h-full items-center justify-center p-8">
|
||||||
feature={isToday ? "today" : "future"}
|
<div className="text-center">
|
||||||
onClose={modal.closeFutureModal}
|
<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">
|
<div className="modal-content large future-modal">
|
||||||
<FutureForecastModalHeader
|
<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