219 lines
12 KiB
TypeScript
219 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { CheckCircleIcon, ClockIcon, UserCircleIcon } from '@heroicons/react/24/solid';
|
|
import { SparklesIcon } from '@heroicons/react/24/outline';
|
|
import Link from 'next/link';
|
|
|
|
interface SucessoClientProps {
|
|
branding: {
|
|
name: string;
|
|
logo_url?: string;
|
|
primary_color: string;
|
|
};
|
|
accentColor: string;
|
|
submittedAt: string;
|
|
}
|
|
|
|
const timeline = [
|
|
{
|
|
title: 'Cadastro recebido',
|
|
description: 'Confirmamos seus dados e senha automaticamente.',
|
|
status: 'done' as const,
|
|
},
|
|
{
|
|
title: 'Análise da equipe',
|
|
description: 'Nossa equipe valida seus dados e configura seu acesso.',
|
|
status: 'current' as const,
|
|
},
|
|
{
|
|
title: 'Acesso liberado',
|
|
description: 'Você receberá aviso e poderá fazer login com sua senha.',
|
|
status: 'upcoming' as const,
|
|
},
|
|
];
|
|
|
|
export default function SucessoClient({ branding, accentColor, submittedAt }: SucessoClientProps) {
|
|
const [customerName, setCustomerName] = useState<string | null>(null);
|
|
const [customerEmail, setCustomerEmail] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const name = sessionStorage.getItem('customer_name');
|
|
const email = sessionStorage.getItem('customer_email');
|
|
setCustomerName(name);
|
|
setCustomerEmail(email);
|
|
setIsLoading(false);
|
|
|
|
// Limpar sessionStorage após carregar
|
|
if (name || email) {
|
|
sessionStorage.removeItem('customer_name');
|
|
sessionStorage.removeItem('customer_email');
|
|
}
|
|
}, []);
|
|
|
|
const primaryColor = branding.primary_color || '#3b82f6';
|
|
const firstName = customerName?.split(' ')[0] || 'Cliente';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto space-y-8">
|
|
<div className="text-center space-y-4">
|
|
{branding.logo_url ? (
|
|
<img src={branding.logo_url} alt={branding.name} className="mx-auto h-16 w-auto object-contain" />
|
|
) : (
|
|
<div className="mx-auto h-16 w-16 rounded-2xl flex items-center justify-center text-white text-2xl font-semibold" style={{ backgroundColor: primaryColor }}>
|
|
{branding.name?.substring(0, 2).toUpperCase() || 'AG'}
|
|
</div>
|
|
)}
|
|
<p className="text-sm uppercase tracking-[0.25em] text-gray-500 font-medium">Portal do Cliente</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200">
|
|
<div className="h-3" style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }} />
|
|
|
|
<div className="p-8 sm:p-12 space-y-8">
|
|
{/* Header Premium com Nome */}
|
|
<div className="flex flex-col items-center text-center space-y-6">
|
|
<div className="relative">
|
|
<div className="h-24 w-24 rounded-full flex items-center justify-center bg-gradient-to-br from-green-100 to-emerald-50 shadow-lg">
|
|
<CheckCircleIcon className="h-14 w-14 text-green-600" />
|
|
</div>
|
|
<div className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full bg-white flex items-center justify-center shadow-md">
|
|
<SparklesIcon className="h-5 w-5 text-amber-500" />
|
|
</div>
|
|
</div>
|
|
|
|
{!isLoading && customerName ? (
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
|
|
Tudo certo, {firstName}! 🎉
|
|
</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Seu cadastro foi enviado com sucesso
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
|
|
Cadastro enviado com sucesso! 🎉
|
|
</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Recebemos todas as suas informações
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 max-w-lg">
|
|
<div className="flex items-start gap-3">
|
|
<UserCircleIcon className="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" />
|
|
<div className="text-left">
|
|
<p className="text-sm font-semibold text-blue-900">Sua senha está segura</p>
|
|
<p className="text-sm text-blue-700 mt-1">
|
|
Você já definiu sua senha de acesso. Assim que a agência liberar seu cadastro,
|
|
você poderá fazer login imediatamente no portal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{!isLoading && customerEmail && (
|
|
<p className="text-sm text-gray-500">
|
|
Login: <span className="font-mono font-semibold text-gray-700">{customerEmail}</span>
|
|
</p>
|
|
)}
|
|
|
|
<p className="text-xs text-gray-400">Enviado em {submittedAt}</p>
|
|
</div>
|
|
|
|
{/* Timeline */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{timeline.map((item, idx) => (
|
|
<div
|
|
key={item.title}
|
|
className={`rounded-2xl border-2 p-5 flex flex-col gap-3 transition-all ${item.status === 'done'
|
|
? 'border-green-200 bg-green-50/50'
|
|
: item.status === 'current'
|
|
? 'border-indigo-300 bg-indigo-50/50 shadow-lg'
|
|
: 'border-gray-200 bg-gray-50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className={`h-10 w-10 rounded-full flex items-center justify-center font-bold ${item.status === 'done'
|
|
? 'bg-green-500 text-white'
|
|
: item.status === 'current'
|
|
? 'bg-indigo-500 text-white'
|
|
: 'bg-gray-200 text-gray-400'
|
|
}`}>
|
|
{idx + 1}
|
|
</div>
|
|
{item.status === 'current' && (
|
|
<div className="flex space-x-1">
|
|
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
|
|
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.2s' }} />
|
|
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.4s' }} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-900">{item.title}</p>
|
|
<p className="text-sm text-gray-600 mt-1">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Informações */}
|
|
<div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-6 border border-gray-200">
|
|
<p className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<ClockIcon className="h-5 w-5 text-amber-500" />
|
|
O que acontece agora?
|
|
</p>
|
|
<ul className="space-y-2 text-sm text-gray-700">
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-green-500 font-bold mt-0.5">✓</span>
|
|
<span>Nossa equipe valida seus dados e configura seu ambiente no portal</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-green-500 font-bold mt-0.5">✓</span>
|
|
<span>Assim que aprovado, você receberá aviso pelos contatos informados</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-green-500 font-bold mt-0.5">✓</span>
|
|
<span>Use o login <strong>{customerEmail || 'seu e-mail'}</strong> e a senha que você criou para acessar</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-amber-500 font-bold mt-0.5">!</span>
|
|
<span>Em caso de urgência, fale com a equipe {branding.name} pelo telefone ou WhatsApp</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="space-y-3 pt-4">
|
|
<Link
|
|
href="/login"
|
|
className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-4 text-white font-semibold shadow-lg transition-all hover:shadow-xl hover:-translate-y-0.5"
|
|
style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }}
|
|
>
|
|
Ir para o login do cliente
|
|
</Link>
|
|
<Link
|
|
href="/"
|
|
className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 font-semibold border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
|
|
>
|
|
Voltar para o site da agência
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center text-sm text-gray-500 bg-white/70 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
|
|
Precisa ajustar alguma informação? Entre em contato com a equipe <strong>{branding.name}</strong> pelos
|
|
canais que você informou no cadastro.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|