const { useState, useEffect, useRef, useCallback } = React;
function Icon({ d, size = 18 }) {
return {d} ;
}
const ICONS = {
lock:
);
}
function ErrorBox({ msg }) {
if (!msg) return null;
return (
{msg}
);
}
function Field({ label, ...props }) {
const [focused, setFocused] = useState(false);
return (
{label}
{props.error} }
);
}
// ─── Progress bar ────────────────────────────────────────────────────────────
function ProgressBar({ step }) {
const steps = ['Conta', 'Pagamento'];
return (
{steps.map((s, i) => (
{i < steps.length - 1 &&
}
))}
Resumo do pedido
{product.name.toUpperCase()}
1 mês de acesso · renovação automática
Assinatura mensal R$ {priceStr}
Equivale a R$ {dailyStr}/dia
Total hoje R$ {priceStr}
{email && (
Acesso enviado para {email}
)}
{['Compra segura', 'Privacidade protegida', 'Cancele quando quiser'].map(t => (
))}
);
}
// ─── Step 1 — Conta ──────────────────────────────────────────────────────────
function AccountStep({ data, setData, onNext, product }) {
const [errors, setErrors] = useState({});
const [emailStatus, setEmailStatus] = useState('idle'); // idle | checking | new | existing | legacy
const [loginError, setLoginError] = useState('');
const [checkingLogin, setCheckingLogin] = useState(false);
const emailCheckRef = useRef(null);
// "existing" = já passou pelo checkout novo antes (senha verificável aqui).
// "legacy" = tem conta antiga no site (a maioria dos nossos usuários hoje) — não dá pra
// verificar a senha antiga (login do WP tem reCAPTCHA), então tratamos como definir uma
// senha nova de acesso, que passa a valer para a conta também.
const isExisting = emailStatus === 'existing';
const isLegacy = emailStatus === 'legacy';
const isKnown = isExisting || isLegacy;
function checkEmail(email) {
clearTimeout(emailCheckRef.current);
setLoginError('');
if (!/^\S+@\S+\.\S+$/.test(email)) { setEmailStatus('idle'); return; }
setEmailStatus('checking');
emailCheckRef.current = setTimeout(async () => {
try {
const r = await fetch(`/api/checkout/check-email?email=${encodeURIComponent(email)}`);
const { status } = await r.json();
setEmailStatus(status || 'new');
} catch {
setEmailStatus('idle');
}
}, 500);
}
function validate() {
const e = {};
if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = 'Digite um e-mail válido';
if (data.phone.replace(/\D/g, '').length < 10) e.phone = 'Digite um WhatsApp válido com DDD';
if (isExisting) {
if (!data.password) e.password = 'Digite sua senha';
} else {
if (data.password.length < 6) e.password = 'Mínimo de 6 caracteres';
}
setErrors(e);
return Object.keys(e).length === 0;
}
async function handleContinue() {
if (!validate()) return;
if (!isExisting) { onNext(); return; }
// E-mail já cadastrado no checkout novo: confirma a senha antes de prosseguir (evita
// "criar conta" duplicada e evita anexar uma nova assinatura à conta de outra pessoa).
setCheckingLogin(true);
setLoginError('');
try {
const r = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: data.email, password: data.password }),
});
if (!r.ok) throw new Error();
onNext();
} catch {
setLoginError('Senha incorreta. Tente novamente ou recupere sua senha.');
} finally {
setCheckingLogin(false);
}
}
return (
);
}
// ─── Bandeiras de cartão ─────────────────────────────────────────────────────
function CardBrandIcons() {
const brands = ['visa', 'mastercard', 'elo', 'american-express', 'hipercard'];
return (
{brands.map(b => (
))}
Você paga o primeiro mês agora via PIX. Os próximos ciclos são cobrados automaticamente — cancele quando quiser pela sua conta SX.
{ setCpf(fmtCpf(e.target.value)); setCpfError(''); }} />
Pagar com Pix
);
}
if (status === 'loading') {
return (
);
}
const qrSrc = resolveQrSrc(pixData?.pix?.qrcode);
const qrText = pixData?.pix?.qrcode_text;
return (
Assinatura criada
{qrSrc ? (
<>
Pague o primeiro mês agora para ativar sua assinatura recorrente:
{qrText && (
{qrText}
)}
{qrText && qrText.startsWith('http') && (
Ambiente de testes: clique aqui para simular o pagamento e aguarde a confirmação abaixo.
)}
{status === 'waiting' && (
)}
) : (
Tudo certo! Enviamos um link de pagamento para {email} . Acesse o e-mail para pagar o primeiro mês e ativar sua assinatura.
)}
Os próximos meses são cobrados automaticamente. Cancele quando quiser na sua conta SX.
);
}
// ─── Painel Cartão ────────────────────────────────────────────────────────────
function CardPanel({ data, setData, onSuccess, product }) {
const [errors, setErrors] = useState({});
const [loading, setLoading] = useState(false);
const [apiError, setApiError] = useState('');
function validate() {
const e = {};
if (data.cardNumber.replace(/\s/g, '').length < 16) e.cardNumber = 'Número do cartão inválido';
if (!data.cardName.trim()) e.cardName = 'Informe o nome impresso no cartão';
if (data.cardExpiry.length < 5) e.cardExpiry = 'Data inválida';
if (data.cardCvv.length < 3) e.cardCvv = 'CVV inválido';
setErrors(e);
return Object.keys(e).length === 0;
}
async function pay() {
if (!validate()) return;
setApiError('');
setLoading(true);
const nameParts = data.cardName.trim().split(/\s+/);
const firstName = nameParts[0];
const lastName = nameParts.slice(1).join(' ') || nameParts[0];
const [month, year] = data.cardExpiry.split('/');
try {
const resp = await fetch('/api/checkout/subscribe-card', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: data.email,
name: data.cardName,
phone: data.phone,
card: {
number: data.cardNumber,
firstName,
lastName,
month: month?.trim(),
year: year?.trim(),
cvv: data.cardCvv,
},
produto: product.slug,
}),
});
const result = await resp.json();
if (!resp.ok) throw new Error(result.error || 'Erro ao processar pagamento');
onSuccess();
} catch (err) {
setApiError(err.message);
} finally {
setLoading(false);
}
}
return (
setData(d => ({ ...d, cardNumber: fmtCard(e.target.value) }))} />
setData(d => ({ ...d, cardName: e.target.value.toUpperCase() }))} />
setData(d => ({ ...d, cardExpiry: fmtExpiry(e.target.value) }))} />
setData(d => ({ ...d, cardCvv: e.target.value.replace(/\D/g, '').slice(0, 4) }))} />
Cobrança recorrente de R$ {fmtPriceCents(product.priceCents)}/mês no cartão até o cancelamento.
Teste: Visa 4111 1111 1111 1111 · Master 5500 0000 0000 0004 · CVV qualquer · validade futura
{loading ?
);
}
// ─── Step 2 — Pagamento ───────────────────────────────────────────────────────
function PaymentStep({ data, setData, onBack, onSuccess, iuguReady, product }) {
const [method, setMethod] = useState('card');
const tabs = [
{ id: 'card', label: 'Cartão de Crédito', icon: ICONS.card },
{ id: 'pix-rec', label: 'Pix', icon: ICONS.pix },
];
return (
Forma de pagamento
Processado com segurança via IUGU.
{tabs.map(t => (
setMethod(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '10px 16px', borderRadius: 9999, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--font-ui)', border: `1px solid ${method === t.id ? 'var(--border-brand)' : 'var(--border-default)'}`, background: method === t.id ? 'rgba(123,63,242,0.14)' : 'transparent', color: method === t.id ? 'var(--purple-light)' : 'var(--text-secondary)', transition: 'all .15s' }}>
))}
{method === 'card' && (
)}
{method === 'pix-rec' && (
)}
);
}
// ─── Tela de sucesso ──────────────────────────────────────────────────────────
const PROJETO_NAMES = { sxclube: 'Sexy Clube', papo: 'Papo com Pijama', pimentinhas: 'Pimentinhas', casapim: 'Casa das Pimentinhas' };
function SuccessScreen({ email, onHome, product }) {
const [going, setGoing] = useState(false);
const accessBadges = product.kind === 'combo'
? product.projetos.map(p => PROJETO_NAMES[p] || p)
: [product.name];
async function goToMembers() {
setGoing(true);
try {
const r = await fetch(`/api/checkout/wp-login-url?email=${encodeURIComponent(email)}`);
const { url } = await r.json();
if (url) { window.location.href = url; return; }
} catch { /* cai no fallback abaixo */ }
setGoing(false);
onHome();
}
return (
Assinatura confirmada
Seu {product.name} está ativo. Enviamos os detalhes de acesso para{' '}
{email || 'seu e-mail'} .
{[['Plano', product.name], ['Cobrança', `R$ ${fmtPriceCents(product.priceCents)}/mês`]].map(([k, v]) => (
{k}
{v}
))}
Acesso incluído
{accessBadges.map(t => (
{t}
))}
{going && (
Continue nesta tela — você está sendo redirecionado para o conteúdo
de ASSINANTES SexyClube ...
)}
{going ?
);
}
// ─── Fluxo principal ──────────────────────────────────────────────────────────
function CheckoutFlow({ onExit }) {
const [step, setStep] = useState(0);
const [iuguReady, setIuguReady] = useState(false);
const [productList, setProductList] = useState(null);
const [data, setData] = useState({
email: '', phone: '', password: '', terms: false,
cardNumber: '', cardName: '', cardExpiry: '', cardCvv: '',
});
// Inicializa IUGU.js com account_id do backend
useEffect(() => {
fetch('/api/config')
.then(r => r.json())
.then(cfg => {
const Iugu = window.Iugu;
if (Iugu && cfg.iugu_account_id) {
Iugu.setAccountID(cfg.iugu_account_id);
if (cfg.test_mode) Iugu.setTestMode(true);
setIuguReady(true);
}
})
.catch(() => {}); // degradação graciosa se o servidor não estiver disponível
}, []);
// Resolve o produto a partir de ?produto= na URL — funciona como destino autônomo,
// sem depender de navegação prévia no site (link vem de fora do domínio também).
useEffect(() => {
fetch('/api/products')
.then(r => r.json())
.then(setProductList)
.catch(() => setProductList([]));
}, []);
if (!productList) {
return (
);
}
const produtoParam = new URLSearchParams(window.location.search).get('produto');
const product = productList.find(p => p.slug === produtoParam) || productList.find(p => p.slug === 'combo_premium') || productList[0];
if (step === 2) {
return (
);
}
return (
SX
{step === 0 && (
{ setStep(1); window.scrollTo(0, 0); }} product={product} />
)}
{step === 1 && (
setStep(0)}
onSuccess={() => { setStep(2); window.scrollTo(0, 0); }}
product={product}
/>
)}
);
}
window.CheckoutFlow = CheckoutFlow;
))}