131 lines
4.5 KiB
TypeScript
131 lines
4.5 KiB
TypeScript
"use client";
|
||
|
||
import { Link } from "@/i18n/navigation";
|
||
import { CTA_CONFIG } from "@/config/course";
|
||
import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
|
||
import { getStoredToken, getStoredUser } from "@/app/lib/pocketbase";
|
||
import AuthModal from "@/app/components/AuthModal";
|
||
import {
|
||
getPayEnv,
|
||
redirectToPay,
|
||
getDeviceFromEnv,
|
||
} from "@/app/lib/payment";
|
||
import { useState } from "react";
|
||
|
||
export function CTASection() {
|
||
const { user, vip, refetch } = useAuthAndVip();
|
||
const paid = !!user && vip;
|
||
const [authOpen, setAuthOpen] = useState(false);
|
||
const [payRedirecting, setPayRedirecting] = useState(false);
|
||
|
||
const startPay = (userId: string) => {
|
||
const env = getPayEnv();
|
||
const channel = "wxpay";
|
||
const device = getDeviceFromEnv(env);
|
||
const returnUrl = `${window.location.origin}/`;
|
||
|
||
redirectToPay({
|
||
user_id: userId,
|
||
return_url: returnUrl,
|
||
channel,
|
||
device,
|
||
type: "video",
|
||
useJoinConfig: true,
|
||
});
|
||
};
|
||
|
||
const handleEnroll = async () => {
|
||
if (payRedirecting) return;
|
||
setPayRedirecting(true);
|
||
|
||
try {
|
||
// 先验证登录态
|
||
let meRes = await fetch("/api/auth/me", { credentials: "include" });
|
||
let meData = await meRes.json().catch(() => ({}));
|
||
if (meData?.user?.id) {
|
||
// 已登录：先校验 VIP，已是 VIP 则无需支付
|
||
const vipRes = await fetch(`/api/vip/check?email=${encodeURIComponent(meData.user.email)}`, { credentials: "include" });
|
||
const vipData = await vipRes.json().catch(() => ({}));
|
||
if (vipData?.vip) {
|
||
await refetch();
|
||
return;
|
||
}
|
||
startPay(meData.user.id);
|
||
return;
|
||
}
|
||
|
||
const storedUser = getStoredUser();
|
||
const storedToken = getStoredToken();
|
||
if (storedUser?.id && storedToken) {
|
||
await fetch("/api/auth/sync-session", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ token: storedToken, record: storedUser }),
|
||
credentials: "include",
|
||
}).catch(() => null);
|
||
meRes = await fetch("/api/auth/me", { credentials: "include" });
|
||
meData = await meRes.json().catch(() => ({}));
|
||
if (meData?.user?.id) {
|
||
const vipRes = await fetch(`/api/vip/check?email=${encodeURIComponent(meData.user.email)}`, { credentials: "include" });
|
||
const vipData = await vipRes.json().catch(() => ({}));
|
||
if (vipData?.vip) {
|
||
await refetch();
|
||
return;
|
||
}
|
||
startPay(meData.user.id);
|
||
return;
|
||
}
|
||
}
|
||
|
||
setAuthOpen(true);
|
||
} finally {
|
||
setPayRedirecting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
|
||
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
|
||
<h2 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">{CTA_CONFIG.title}</h2>
|
||
<p className="mb-6 text-[var(--muted-foreground)] sm:mb-8">{CTA_CONFIG.subtitle}</p>
|
||
<div className="mb-8 flex flex-wrap justify-center gap-4 text-sm text-[var(--muted-foreground)] sm:mb-10 sm:gap-6">
|
||
{CTA_CONFIG.badges.map((b, i) => (
|
||
<span
|
||
key={b}
|
||
className="animate-float-badge rounded-full border border-[var(--border)] bg-[var(--card)] px-4 py-2"
|
||
style={{ animationDelay: `${i * 0.2}s` }}
|
||
>
|
||
{b}
|
||
</span>
|
||
))}
|
||
</div>
|
||
{paid ? (
|
||
<Link
|
||
href="/course/0/0"
|
||
className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
|
||
>
|
||
开始学习 →
|
||
</Link>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={handleEnroll}
|
||
disabled={payRedirecting}
|
||
className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-95 disabled:opacity-70 sm:px-10"
|
||
>
|
||
{payRedirecting ? "跳转支付中..." : "立即报名 →"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
<AuthModal
|
||
isOpen={authOpen}
|
||
onClose={() => setAuthOpen(false)}
|
||
onSuccess={() => {
|
||
setAuthOpen(false);
|
||
void refetch();
|
||
}}
|
||
/>
|
||
</section>
|
||
);
|
||
}
|