Marcio Bevervanso
356b990368
- Adiciona pagina /checkout com todos os 4 planos, seletor bento, Pix (QR + polling) e cartao (Stripe redirect) - Modo locked: plano fixo em starter quando source=landing/funil/campanha - Offer.tsx e WhatsAppFunnel.tsx redirecionam para /checkout?plan=starter - Adiciona wooviService (criar cobranca e polling status via n8n) - Rota /checkout registrada no App Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
625 lines
28 KiB
TypeScript
625 lines
28 KiB
TypeScript
import { useState, useEffect, useRef, type FormEvent } from 'react';
|
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
ShieldCheck, Lock, QrCode, CreditCard, Copy, Check,
|
|
Loader2, Gift, Sparkles, ArrowRight, Star, Wand2, Zap,
|
|
} from 'lucide-react';
|
|
import { cn } from '../lib/utils';
|
|
import { createPixCharge, pollPixStatus, type PixCharge } from '../services/wooviService';
|
|
|
|
// ─── Planos (espelha src/utils/pricing.ts do app) ──────────────────────────
|
|
const PLANS = [
|
|
{
|
|
id: 'starter',
|
|
name: 'Starter',
|
|
credits: 10,
|
|
price: 999,
|
|
display: 'R$9,99',
|
|
perImg: 'R$1,00/img',
|
|
priceId: 'price_1TT5lpLjQo8Mvvq1HdDD7paN',
|
|
planName: 'Festa Magica IA - Kit Inicial',
|
|
},
|
|
{
|
|
id: 'popular',
|
|
name: 'Kit Festa',
|
|
credits: 30,
|
|
price: 1999,
|
|
display: 'R$19,99',
|
|
perImg: 'R$0,67/img',
|
|
priceId: 'price_1TT5kTLjQo8Mvvq1Tus1RS5D',
|
|
planName: 'Festa Magica IA - Kit Festa',
|
|
badge: 'Mais vendido',
|
|
},
|
|
{
|
|
id: 'pro',
|
|
name: 'Festa VIP',
|
|
credits: 80,
|
|
price: 4999,
|
|
display: 'R$49,99',
|
|
perImg: 'R$0,62/img',
|
|
priceId: 'price_1THThELjQo8Mvvq1uXkgh5jB',
|
|
planName: 'Festa Magica IA - Festa VIP',
|
|
},
|
|
{
|
|
id: 'professional',
|
|
name: 'Profissional',
|
|
credits: 200,
|
|
price: 9999,
|
|
display: 'R$99,99',
|
|
perImg: 'R$0,50/img',
|
|
priceId: 'price_1TT5i9LjQo8Mvvq12yhPqe1G',
|
|
planName: 'Festa Magica IA - Profissional',
|
|
},
|
|
] as const;
|
|
|
|
type Plan = (typeof PLANS)[number];
|
|
type Method = 'pix' | 'card';
|
|
|
|
const STRIPE_URL = 'https://n8n.seureview.com.br/webhook/festa-magica-stripe';
|
|
|
|
function getCookie(name: string) {
|
|
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
|
|
return match ? match[2] : '';
|
|
}
|
|
|
|
export default function Checkout() {
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
|
|
const source = searchParams.get('source') || 'landing';
|
|
const userId = searchParams.get('userId') || '';
|
|
const locked = searchParams.get('lock') === '1' || ['landing', 'funil', 'campanha'].includes(searchParams.get('source') || '');
|
|
const [email, setEmail] = useState(searchParams.get('email') || '');
|
|
const [method, setMethod] = useState<Method>('pix');
|
|
const [error, setError] = useState('');
|
|
|
|
// Plano inicial vindo da URL (?plan=popular) ou padrão = starter
|
|
const initialPlan = PLANS.find(p => p.id === searchParams.get('plan')) ?? PLANS[0];
|
|
const [plan, setPlan] = useState<Plan>(initialPlan);
|
|
|
|
// ── Pix ──────────────────────────────────────────────────────────────────
|
|
const [pixLoading, setPixLoading] = useState(false);
|
|
const [pix, setPix] = useState<PixCharge | null>(null);
|
|
const [copied, setCopied] = useState(false);
|
|
const [confirming, setConfirming] = useState(false);
|
|
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
|
|
// ── Cartão ────────────────────────────────────────────────────────────────
|
|
const [cardLoading, setCardLoading] = useState(false);
|
|
|
|
// ── Skeleton de entrada ───────────────────────────────────────────────────
|
|
const [ready, setReady] = useState(false);
|
|
useEffect(() => {
|
|
const t = setTimeout(() => setReady(true), 1200);
|
|
return () => clearTimeout(t);
|
|
}, []);
|
|
|
|
useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);
|
|
|
|
// Resetar Pix ao trocar de plano
|
|
useEffect(() => {
|
|
if (pollRef.current) clearInterval(pollRef.current);
|
|
setPix(null);
|
|
setConfirming(false);
|
|
setError('');
|
|
}, [plan.id]);
|
|
|
|
const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
|
|
const trackEvent = () => {
|
|
if (typeof window !== 'undefined' && 'fbq' in window) {
|
|
(window as any).fbq('track', 'InitiateCheckout');
|
|
}
|
|
};
|
|
|
|
// ── Pix ──────────────────────────────────────────────────────────────────
|
|
const handlePix = async (e?: FormEvent) => {
|
|
e?.preventDefault();
|
|
if (!validEmail) { setError('Informe um e-mail válido para continuar.'); return; }
|
|
setError('');
|
|
setPixLoading(true);
|
|
trackEvent();
|
|
try {
|
|
const charge = await createPixCharge({
|
|
userEmail: email,
|
|
source,
|
|
userId,
|
|
value: plan.price,
|
|
credits: plan.credits,
|
|
planName: plan.planName,
|
|
priceId: plan.priceId,
|
|
fbp: getCookie('_fbp'),
|
|
fbc: getCookie('_fbc'),
|
|
});
|
|
setPix(charge);
|
|
startPolling(charge.correlationID);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Não foi possível gerar o Pix. Tente novamente.');
|
|
} finally {
|
|
setPixLoading(false);
|
|
}
|
|
};
|
|
|
|
const startPolling = (correlationID: string) => {
|
|
setConfirming(true);
|
|
if (pollRef.current) clearInterval(pollRef.current);
|
|
pollRef.current = setInterval(async () => {
|
|
try {
|
|
const status = await pollPixStatus(correlationID);
|
|
if (status === 'COMPLETED') {
|
|
clearInterval(pollRef.current!);
|
|
navigate('/sucesso?status=approved', { replace: true });
|
|
} else if (status === 'EXPIRED') {
|
|
clearInterval(pollRef.current!);
|
|
setConfirming(false);
|
|
setPix(null);
|
|
setError('O Pix expirou. Gere um novo código para pagar.');
|
|
}
|
|
} catch { /* silencia; tenta no próximo tick */ }
|
|
}, 4000);
|
|
};
|
|
|
|
const handleCopy = async () => {
|
|
if (!pix) return;
|
|
try {
|
|
await navigator.clipboard.writeText(pix.brCode);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch { setError('Não consegui copiar. Copie o código manualmente.'); }
|
|
};
|
|
|
|
// ── Cartão ────────────────────────────────────────────────────────────────
|
|
const handleCard = async (e?: FormEvent) => {
|
|
e?.preventDefault();
|
|
if (!validEmail) { setError('Informe um e-mail válido para continuar.'); return; }
|
|
setError('');
|
|
setCardLoading(true);
|
|
trackEvent();
|
|
try {
|
|
const res = await fetch(STRIPE_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
source,
|
|
userEmail: email,
|
|
userId,
|
|
priceId: plan.priceId,
|
|
credits: plan.credits,
|
|
planName: plan.planName,
|
|
fbp: getCookie('_fbp'),
|
|
fbc: getCookie('_fbc'),
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
if (data.success && data.url) {
|
|
window.location.href = data.url;
|
|
} else {
|
|
setCardLoading(false);
|
|
setError('Ocorreu um erro ao abrir o pagamento. Tente novamente.');
|
|
}
|
|
} catch {
|
|
setCardLoading(false);
|
|
setError('Erro de conexão. Verifique sua internet e tente novamente.');
|
|
}
|
|
};
|
|
|
|
const features = [
|
|
'Personagem 3D exclusivo criado com IA',
|
|
`${plan.credits} créditos para itens do catálogo`,
|
|
'Arquivos em PDF prontos para impressão',
|
|
'Acesso imediato à plataforma',
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#f7f7f9] font-sans text-gray-900">
|
|
|
|
{/* ── Topo ─────────────────────────────────────────────────────── */}
|
|
<header className="bg-white border-b border-gray-100">
|
|
<div className="max-w-5xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-xl bg-gradient-to-br from-pink-500 to-violet-500 flex items-center justify-center shadow-sm shadow-pink-500/30">
|
|
<Wand2 className="w-4 h-4 text-white" strokeWidth={2.5} />
|
|
</div>
|
|
<span className="font-display font-bold text-lg tracking-tight text-gray-900">
|
|
Festa Mágica<span className="text-pink-500">IA</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-xs text-emerald-700 font-semibold bg-emerald-50 border border-emerald-100 px-3 py-1.5 rounded-full">
|
|
<Lock className="w-3.5 h-3.5" strokeWidth={2.5} />
|
|
Ambiente seguro
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-5xl mx-auto px-5 sm:px-8 py-8 sm:py-12">
|
|
|
|
{/* ── Skeleton ─────────────────────────────────────────────────────── */}
|
|
<AnimatePresence>
|
|
{!ready && (
|
|
<motion.div
|
|
key="skeleton"
|
|
initial={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="grid lg:grid-cols-[1fr_380px] gap-6"
|
|
>
|
|
{/* Esquerda */}
|
|
<div className="space-y-5">
|
|
{!locked && (
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
|
|
<div className="h-3 w-24 bg-gray-100 rounded-full animate-pulse" />
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="h-24 bg-gray-100 rounded-xl animate-pulse" style={{ animationDelay: `${i * 80}ms` }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
|
|
<div className="h-3 w-32 bg-gray-100 rounded-full animate-pulse" />
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="h-3 bg-gray-100 rounded-full animate-pulse" style={{ width: `${75 + i * 5}%`, animationDelay: `${i * 60}ms` }} />
|
|
))}
|
|
<div className="pt-4 border-t border-gray-100 flex justify-between">
|
|
<div className="h-3 w-28 bg-gray-100 rounded-full animate-pulse" />
|
|
<div className="h-6 w-20 bg-gray-100 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Direita */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-5">
|
|
<div className="h-4 w-24 bg-gray-100 rounded-full animate-pulse" />
|
|
<div className="h-11 bg-gray-100 rounded-xl animate-pulse" />
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="h-16 bg-gray-100 rounded-xl animate-pulse" />
|
|
<div className="h-16 bg-gray-100 rounded-xl animate-pulse" style={{ animationDelay: '80ms' }} />
|
|
</div>
|
|
<div className="h-12 bg-gray-100 rounded-xl animate-pulse" />
|
|
<div className="pt-4 border-t border-gray-100 grid grid-cols-2 gap-2">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" style={{ animationDelay: `${i * 50}ms` }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* ── Conteúdo real ────────────────────────────────────────────────── */}
|
|
<AnimatePresence>
|
|
{ready && (
|
|
<motion.div
|
|
key="content"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<div className="grid lg:grid-cols-[1fr_380px] gap-6 items-start">
|
|
|
|
{/* ── Coluna esquerda: seletor de plano + resumo ───────────── */}
|
|
<div className="space-y-5">
|
|
|
|
{/* Seletor de plano — oculto no modo locked (funil/campanha) */}
|
|
{!locked && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6"
|
|
>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-pink-500 mb-4">
|
|
Escolha o plano
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{PLANS.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
onClick={() => setPlan(p as Plan)}
|
|
className={cn(
|
|
'relative text-left rounded-xl border-2 p-4 transition-all duration-200',
|
|
plan.id === p.id
|
|
? 'border-pink-500 bg-pink-50/60 shadow-sm shadow-pink-500/10'
|
|
: 'border-gray-100 bg-white hover:border-pink-200 hover:bg-pink-50/30',
|
|
)}
|
|
>
|
|
{'badge' in p && p.badge && (
|
|
<span className="absolute -top-2.5 left-3 bg-gradient-to-r from-pink-500 to-violet-500 text-white text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-full">
|
|
{p.badge}
|
|
</span>
|
|
)}
|
|
<p className={cn(
|
|
'text-sm font-bold mb-1',
|
|
plan.id === p.id ? 'text-pink-700' : 'text-gray-700',
|
|
)}>
|
|
{p.name}
|
|
</p>
|
|
<p className={cn(
|
|
'font-display font-black text-2xl leading-none mb-1',
|
|
plan.id === p.id ? 'text-pink-600' : 'text-gray-900',
|
|
)}>
|
|
{p.display}
|
|
</p>
|
|
<p className="text-[11px] font-semibold text-gray-400">
|
|
{p.credits} imagens · {p.perImg}
|
|
</p>
|
|
{plan.id === p.id && (
|
|
<span className="absolute top-3 right-3 w-4 h-4 rounded-full bg-pink-500 flex items-center justify-center">
|
|
<Check className="w-2.5 h-2.5 text-white" strokeWidth={3} />
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Resumo do pedido */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.05 }}
|
|
className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6"
|
|
>
|
|
<div className="flex items-center gap-2 mb-5">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-pink-500 to-violet-500 flex items-center justify-center">
|
|
<Sparkles className="w-4 h-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-gray-400">Resumo</p>
|
|
<p className="font-display font-bold text-gray-900 leading-tight">{plan.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-3 mb-6">
|
|
{features.map((f, i) => (
|
|
<li key={i} className="flex items-start gap-3">
|
|
<span className="w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center shrink-0 mt-0.5">
|
|
<Check className="w-3 h-3 text-pink-600" strokeWidth={3} />
|
|
</span>
|
|
<span className="text-sm font-medium text-gray-700 leading-snug">{f}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Primeira imagem grátis — só pro starter */}
|
|
{plan.id === 'starter' && (
|
|
<div className="rounded-xl bg-emerald-50 border border-emerald-100 p-3.5 flex items-start gap-2.5 mb-5">
|
|
<Gift className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
|
|
<p className="text-xs font-semibold text-emerald-800 leading-snug">
|
|
Sua <strong>primeira imagem por nossa conta</strong> — não consome nenhum crédito.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Valor final */}
|
|
<div className="pt-5 border-t border-gray-100 flex items-baseline justify-between">
|
|
<span className="text-sm font-semibold text-gray-500">Você paga hoje</span>
|
|
<span className="font-display font-black text-3xl text-gray-900">{plan.display}</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400 text-right mt-1">Pagamento único · sem assinatura</p>
|
|
|
|
{/* Prova social */}
|
|
<div className="flex items-center gap-2 mt-5 pt-5 border-t border-gray-100">
|
|
<div className="flex -space-x-1">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star key={i} className="w-3.5 h-3.5 text-amber-400 fill-amber-400" />
|
|
))}
|
|
</div>
|
|
<span className="text-xs text-gray-500 font-semibold">+10.000 mães já fizeram a festa</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* ── Coluna direita: pagamento ─────────────────────────────── */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 lg:sticky lg:top-6"
|
|
>
|
|
<h2 className="font-display font-bold text-lg text-gray-900 mb-5">Pagamento</h2>
|
|
|
|
{/* E-mail */}
|
|
<div className="mb-5">
|
|
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5">
|
|
E-mail
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => { setEmail(e.target.value); if (error) setError(''); }}
|
|
placeholder="seu@email.com"
|
|
disabled={!!pix}
|
|
className="w-full h-11 px-4 rounded-xl border-2 border-gray-100 focus:border-pink-400 outline-none text-sm font-medium text-gray-900 transition-colors placeholder:text-gray-300 disabled:bg-gray-50 disabled:text-gray-400"
|
|
/>
|
|
<p className="text-[11px] text-gray-400 mt-1.5">
|
|
É aqui que enviamos o acesso ao painel.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Método */}
|
|
<div className="grid grid-cols-2 gap-2 mb-5">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setMethod('pix'); setError(''); }}
|
|
className={cn(
|
|
'flex flex-col items-center gap-1 py-3 rounded-xl border-2 text-sm font-bold transition-all',
|
|
method === 'pix'
|
|
? 'border-pink-500 bg-pink-50/60 text-pink-700'
|
|
: 'border-gray-100 text-gray-400 hover:border-gray-200',
|
|
)}
|
|
>
|
|
<QrCode className="w-4 h-4" />
|
|
Pix
|
|
<span className={cn(
|
|
'text-[9px] font-black uppercase tracking-wide px-2 py-0.5 rounded-full',
|
|
method === 'pix' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-400',
|
|
)}>
|
|
Aprovação imediata
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setMethod('card'); setError(''); }}
|
|
className={cn(
|
|
'flex flex-col items-center gap-1 py-3 rounded-xl border-2 text-sm font-bold transition-all',
|
|
method === 'card'
|
|
? 'border-pink-500 bg-pink-50/60 text-pink-700'
|
|
: 'border-gray-100 text-gray-400 hover:border-gray-200',
|
|
)}
|
|
>
|
|
<CreditCard className="w-4 h-4" />
|
|
Cartão
|
|
<span className="text-[9px] font-black uppercase tracking-wide px-2 py-0.5 rounded-full bg-gray-100 text-gray-400">
|
|
Crédito
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Erro */}
|
|
<AnimatePresence>
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="mb-4 text-xs text-red-600 bg-red-50 border border-red-100 rounded-xl px-3.5 py-2.5 font-semibold"
|
|
>
|
|
{error}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* ── Pix ── */}
|
|
<AnimatePresence mode="wait">
|
|
{method === 'pix' && (
|
|
<motion.div
|
|
key="pix"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
{!pix ? (
|
|
<form onSubmit={handlePix}>
|
|
<button
|
|
type="submit"
|
|
disabled={pixLoading}
|
|
className="w-full h-13 py-3.5 rounded-xl bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-base flex items-center justify-center gap-2 shadow-md shadow-pink-500/20 hover:shadow-lg hover:shadow-pink-500/30 hover:scale-[1.01] transition-all disabled:opacity-60 disabled:hover:scale-100 disabled:hover:shadow-md"
|
|
>
|
|
{pixLoading ? (
|
|
<><Loader2 className="w-4 h-4 animate-spin" /> Gerando Pix...</>
|
|
) : (
|
|
<><QrCode className="w-4 h-4" /> Gerar Pix · {plan.display}</>
|
|
)}
|
|
</button>
|
|
<p className="text-[11px] text-gray-400 mt-2.5 text-center flex items-center justify-center gap-1">
|
|
<Zap className="w-3 h-3 text-emerald-500" />
|
|
QR Code gerado na hora · pague pelo app do banco
|
|
</p>
|
|
</form>
|
|
) : (
|
|
<div className="text-center">
|
|
<div className="inline-block p-3 bg-white rounded-2xl border-2 border-gray-100 shadow-sm mb-4">
|
|
<img src={pix.qrCodeImage} alt="QR Code Pix" className="w-44 h-44 mx-auto" />
|
|
</div>
|
|
|
|
<p className="text-xs font-bold text-gray-600 mb-2">
|
|
Escaneie o QR Code ou use o Pix Copia e Cola:
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<input
|
|
readOnly
|
|
value={pix.brCode}
|
|
className="flex-1 text-[10px] bg-gray-50 border border-gray-100 rounded-xl px-3 py-2.5 text-gray-400 truncate"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleCopy}
|
|
className="shrink-0 h-9 px-3 rounded-xl bg-gray-900 text-white text-xs font-bold flex items-center gap-1.5 hover:bg-gray-700 transition-colors"
|
|
>
|
|
{copied
|
|
? <><Check className="w-3.5 h-3.5" /> Copiado</>
|
|
: <><Copy className="w-3.5 h-3.5" /> Copiar</>}
|
|
</button>
|
|
</div>
|
|
|
|
{confirming && (
|
|
<div className="flex items-center justify-center gap-2 text-pink-600 font-semibold text-xs mb-2">
|
|
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
|
Aguardando confirmação do pagamento...
|
|
</div>
|
|
)}
|
|
<p className="text-[11px] text-gray-400">
|
|
Assim que o Pix cair, liberamos seu acesso. Pode deixar esta tela aberta.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* ── Cartão ── */}
|
|
{method === 'card' && (
|
|
<motion.div
|
|
key="card"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<form onSubmit={handleCard}>
|
|
<button
|
|
type="submit"
|
|
disabled={cardLoading}
|
|
className="w-full py-3.5 rounded-xl bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-base flex items-center justify-center gap-2 shadow-md shadow-pink-500/20 hover:shadow-lg hover:shadow-pink-500/30 hover:scale-[1.01] transition-all disabled:opacity-60 disabled:hover:scale-100 disabled:hover:shadow-md"
|
|
>
|
|
{cardLoading ? (
|
|
<><Loader2 className="w-4 h-4 animate-spin" /> Abrindo checkout...</>
|
|
) : (
|
|
<>Pagar {plan.display} com cartão <ArrowRight className="w-4 h-4" /></>
|
|
)}
|
|
</button>
|
|
<p className="text-[11px] text-gray-400 mt-2.5 text-center flex items-center justify-center gap-1">
|
|
<Lock className="w-3 h-3" />
|
|
Você finaliza no ambiente seguro do Stripe
|
|
</p>
|
|
</form>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* ── Selos de confiança ── */}
|
|
<div className="mt-6 pt-5 border-t border-gray-100">
|
|
<div className="flex items-center justify-center gap-1.5 text-xs font-bold text-emerald-700 mb-4">
|
|
<ShieldCheck className="w-4 h-4" /> Pagamento 100% seguro e criptografado
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{[
|
|
{ icon: QrCode, label: 'Pix · Banco Central' },
|
|
{ icon: CreditCard, label: 'Cartão via Stripe' },
|
|
{ icon: Lock, label: 'SSL 256-bit' },
|
|
{ icon: ShieldCheck, label: 'Garantia de 7 dias' },
|
|
].map(({ icon: Icon, label }) => (
|
|
<div key={label} className="flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
|
|
<Icon className="w-3.5 h-3.5 text-pink-400 shrink-0" />
|
|
<span className="text-[11px] font-semibold text-gray-500">{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Rodapé */}
|
|
<p className="mt-8 text-center text-xs text-gray-400 font-medium">
|
|
Ao prosseguir você concorda com os Termos de Uso e Política de Privacidade.
|
|
Garantia de reembolso integral em até 7 dias, sem perguntas.
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|