119 lines
3.9 KiB
TypeScript
119 lines
3.9 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,
|
|
getRecommendedChannel,
|
|
mustUseWxPay,
|
|
redirectToPay,
|
|
getDeviceFromEnv,
|
|
} from "@/app/lib/payment";
|
|
import { useState } from "react";
|
|
|
|
export function CTASection() {
|
|
const { user, vip } = useAuthAndVip();
|
|
const paid = !!user && vip;
|
|
const [authOpen, setAuthOpen] = useState(false);
|
|
const [payRedirecting, setPayRedirecting] = useState(false);
|
|
|
|
const startPay = (userId: string) => {
|
|
const env = getPayEnv();
|
|
const channel = mustUseWxPay(env) ? "wxpay" : getRecommendedChannel(env);
|
|
const device = getDeviceFromEnv(env);
|
|
const returnUrl = `${window.location.origin}/course/0/0`;
|
|
|
|
redirectToPay({
|
|
user_id: userId,
|
|
return_url: returnUrl,
|
|
channel,
|
|
device,
|
|
useJoinConfig: true,
|
|
});
|
|
};
|
|
|
|
const handleEnroll = async () => {
|
|
if (payRedirecting) return;
|
|
setPayRedirecting(true);
|
|
|
|
try {
|
|
if (user?.id) {
|
|
startPay(user.id);
|
|
return;
|
|
}
|
|
|
|
const meRes = await fetch("/api/auth/me", { credentials: "include" });
|
|
const meData = await meRes.json().catch(() => ({}));
|
|
if (meData?.user?.id) {
|
|
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);
|
|
startPay(storedUser.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 handleEnroll();
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|