73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useTrack } from "@/hooks/use-track";
|
||
import { TRACKING_EVENTS } from "@/lib/tracking-events";
|
||
import { useDeveloperFlags } from "@/components/developer-flags-provider";
|
||
|
||
const STORAGE_KEY = "download_nova_ops_popup_closed";
|
||
|
||
export function OpsPopup() {
|
||
const [open, setOpen] = useState(false);
|
||
const { track } = useTrack();
|
||
const { flags } = useDeveloperFlags();
|
||
|
||
useEffect(() => {
|
||
if (!flags.opsPopup) return;
|
||
const closed = window.localStorage.getItem(STORAGE_KEY) === "1";
|
||
if (!closed) {
|
||
const timer = window.setTimeout(() => {
|
||
setOpen(true);
|
||
track(TRACKING_EVENTS.popupExpose, { scene: "global_ops_popup" });
|
||
}, 1500);
|
||
return () => window.clearTimeout(timer);
|
||
}
|
||
}, [track, flags.opsPopup]);
|
||
|
||
if (!flags.opsPopup) return null;
|
||
|
||
const close = () => {
|
||
setOpen(false);
|
||
window.localStorage.setItem(STORAGE_KEY, "1");
|
||
track(TRACKING_EVENTS.popupClose, { scene: "global_ops_popup" });
|
||
};
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
{open && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-50 grid place-items-end bg-slate-950/45 p-4 md:place-items-center"
|
||
onClick={close}
|
||
>
|
||
<motion.div
|
||
initial={{ y: 20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
exit={{ y: 16, opacity: 0 }}
|
||
className="card-glass w-full max-w-md"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<p className="text-xs text-cyan-300">限时运营活动</p>
|
||
<h3 className="mt-1 text-xl font-semibold">关注公众号领取专属解锁码</h3>
|
||
<p className="mt-2 text-sm text-slate-300">输入关键词“下载”，可获取新资源首发、加群入口与 VIP 试用资格。</p>
|
||
<div className="mt-4 flex gap-2">
|
||
<Link
|
||
href="/unlock"
|
||
onClick={() => track(TRACKING_EVENTS.popupClick, { target: "unlock", scene: "global_ops_popup" })}
|
||
className="cta-main"
|
||
>
|
||
立即领取
|
||
</Link>
|
||
<button className="cta-sub" onClick={close}>稍后再说</button>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|