80 lines
4 KiB
TypeScript
80 lines
4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useSearchParams, useNavigate } from "react-router-dom";
|
|
import { CheckCircle, Mail, LayoutDashboard, Sparkles } from "lucide-react";
|
|
import Footer from "../components/Footer";
|
|
|
|
export default function SuccessPage() {
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
const [isValid, setIsValid] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// O Stripe passa 'session_id' automaticamente quando redireciona,
|
|
// Ou podemos checar um parâmetro manual como '?status=approved'
|
|
const sessionId = searchParams.get("session_id");
|
|
const status = searchParams.get("status");
|
|
|
|
if (sessionId || status === "approved") {
|
|
setIsValid(true);
|
|
} else {
|
|
// Se não tiver nenhum parâmetro válido, joga de volta pra home
|
|
navigate("/", { replace: true });
|
|
}
|
|
}, [searchParams, navigate]);
|
|
|
|
if (!isValid) {
|
|
return null; // Retorna nulo enquanto valida para não piscar a tela
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-pink-50 text-indigo-900 selection:bg-pink-300 font-sans flex flex-col">
|
|
<main className="flex-1 py-12 px-4 md:px-6 flex items-center justify-center">
|
|
<div className="max-w-5xl mx-auto w-full">
|
|
{/* Success Banner */}
|
|
<section className="text-center bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-pink-100">
|
|
<CheckCircle className="w-20 h-20 text-emerald-500 mx-auto mb-6" />
|
|
<h1 className="text-3xl md:text-5xl font-display font-bold text-indigo-950 mb-4">
|
|
Pagamento Confirmado!
|
|
</h1>
|
|
<p className="text-lg text-indigo-600 md:text-xl max-w-2xl mx-auto mb-12">
|
|
Tudo certo com o seu pedido! Preparamos tudo para você começar a criar a festa dos sonhos em instantes.
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto">
|
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-pink-500 mb-4">
|
|
<Mail className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">1. Fique de olho no e-mail</h3>
|
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
|
Em até 5 minutos, você receberá um e-mail de confirmação com a nota do seu pedido e todos os detalhes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-violet-500 mb-4">
|
|
<LayoutDashboard className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">2. Acesse o Painel</h3>
|
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
|
No mesmo e-mail, enviaremos um <strong>link de acesso exclusivo</strong> direto para o nosso Painel de Criação Mágica. Não se preocupe em criar conta!
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-pink-50/50 rounded-2xl p-6 border border-pink-100 relative hover:shadow-md transition-shadow">
|
|
<div className="bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm text-amber-500 mb-4">
|
|
<Sparkles className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="font-bold text-indigo-950 text-lg mb-2">3. Crie a Magia</h3>
|
|
<p className="text-indigo-700/80 text-sm leading-relaxed">
|
|
Dentro do painel, siga as instruções rápidas, faça o upload da foto e deixe a inteligência artificial transformar tudo em um kit inesquecível!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|