feat: perfect stripe redirect flow and ux

This commit is contained in:
Marcio Bevervanso 2026-04-13 19:58:00 -03:00
parent 37e9f199f4
commit f5e0d81d43
2 changed files with 19 additions and 6 deletions

View file

@ -76,6 +76,7 @@ const AppContent: React.FC = () => {
const handleOpenRegister = (plan: string = 'starter') => { const handleOpenRegister = (plan: string = 'starter') => {
setSelectedPlan(plan); setSelectedPlan(plan);
localStorage.removeItem('intended_plan'); // Segurança contra redirecionamentos não desejados
setAuthMode('register'); setAuthMode('register');
setIsModalOpen(true); setIsModalOpen(true);
}; };
@ -86,20 +87,25 @@ const AppContent: React.FC = () => {
} else { } else {
localStorage.setItem('login_intent', 'user'); localStorage.setItem('login_intent', 'user');
} }
localStorage.removeItem('intended_plan'); // Segurança contra redirecionamentos não desejados
setAuthMode('login'); setAuthMode('login');
setIsModalOpen(true); setIsModalOpen(true);
}; };
const handleAuthSuccess = async () => { const handleAuthSuccess = async () => {
setIsModalOpen(false);
await refreshProfile();
// Recupera a intenção de plano caso tenha recarregado a página (ex: Login via Google) // Recupera a intenção de plano caso tenha recarregado a página (ex: Login via Google)
const savedPlan = localStorage.getItem('intended_plan'); const savedPlan = localStorage.getItem('intended_plan');
const finalPlan = selectedPlan === 'monthly' ? 'monthly' : savedPlan; const finalPlan = selectedPlan === 'monthly' ? 'monthly' : savedPlan;
const isRedirecting = (authMode === 'register' || isCompletingProfile) && finalPlan === 'monthly';
if (!isRedirecting) {
setIsModalOpen(false);
}
await refreshProfile();
// Se acabou de fazer o cadastro clicando em um plano pago (monthly), leva direto pro Stripe! // Se acabou de fazer o cadastro clicando em um plano pago (monthly), leva direto pro Stripe!
if ((authMode === 'register' || isCompletingProfile) && finalPlan === 'monthly') { if (isRedirecting) {
try { try {
const { data: { session } } = await supabase.auth.getSession(); const { data: { session } } = await supabase.auth.getSession();
if (session) { if (session) {
@ -113,16 +119,19 @@ const AppContent: React.FC = () => {
}); });
const { url, error } = await res.json(); const { url, error } = await res.json();
if (error) { if (error) {
setIsModalOpen(false);
alert('Falha interna ao inicializar carrinho: ' + JSON.stringify(error)); alert('Falha interna ao inicializar carrinho: ' + JSON.stringify(error));
} else if (url) { } else if (url) {
localStorage.removeItem('intended_plan'); localStorage.removeItem('intended_plan');
window.location.href = url; // Redireciona pro Checkout window.location.href = url; // Redireciona pro Checkout magicamente
return; return;
} }
} else { } else {
setIsModalOpen(false);
alert('Sessão não encontrada para redirecionamento. Verifique se precisa confirmar o email.'); alert('Sessão não encontrada para redirecionamento. Verifique se precisa confirmar o email.');
} }
} catch (e) { } catch (e) {
setIsModalOpen(false);
console.error("Falha ao redirecionar para o checkout:", e); console.error("Falha ao redirecionar para o checkout:", e);
alert('Erro ao comunicar com o servidor: ' + e); alert('Erro ao comunicar com o servidor: ' + e);
} }

View file

@ -179,7 +179,11 @@ const RegistrationModal: React.FC<RegistrationModalProps> = ({
if (rpcError) throw rpcError; if (rpcError) throw rpcError;
setSuccessMsg(t.auth.successRegister); if (plan === 'monthly') {
setSuccessMsg("Conta criada com sucesso! Redirecionando para o pagamento seguro...");
} else {
setSuccessMsg(t.auth.successRegister);
}
setTimeout(() => onSuccess(), 1500); setTimeout(() => onSuccess(), 1500);
return; return;
} }