{/* Input row */}
);
}
function CartDrawer() {
const cart = useCart();
const [cep, setCep] = useState('');
const [calc, setCalc] = useState('idle'); // idle | loading | done
const [carriers, setCarriers] = useState([]);
const [selected, setSelected] = useState(null);
function maskCep(v) {
const d = v.replace(/\D/g, '').slice(0, 8);
return d.length > 5 ? d.slice(0,5) + '-' + d.slice(5) : d;
}
async function calcShipping() {
if (cep.replace(/\D/g,'').length !== 8) return;
setCalc('loading');
setCarriers([]);
setSelected(null);
try {
const r = await fetch('/api/shipping', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cep }),
});
const data = await r.json().catch(() => ({}));
if (!r.ok || !Array.isArray(data.carriers) || !data.carriers.length) {
setCalc('error');
return;
}
setCarriers(data.carriers);
setSelected(data.carriers[0].id);
setCalc('done');
} catch {
setCalc('error');
}
}
const selectedCarrier = carriers.find(c => c.id === selected);
const shippingCost = selectedCarrier ? selectedCarrier.price : 0;
if (!cart) return null;
return (
<>
{/* backdrop */}
{q.length < 2 ? (
Digite ao menos 2 letras para buscar
) : results.length === 0 ? (
Nenhum resultado para "{query}"
) : (
<>
{results.length} resultado{results.length !== 1 ? 's' : ''}
)}
cart.setOpen(false)} style={{
position: 'fixed', inset: 0, zIndex: 80,
background: 'rgba(8, 51, 68, 0.36)',
backdropFilter: 'blur(4px)',
opacity: cart.open ? 1 : 0,
pointerEvents: cart.open ? 'auto' : 'none',
transition: 'opacity .25s ease',
}} />
);
}
const qtyBtn = {
width: 24, height: 24, borderRadius: '50%',
background: 'white', border: 'none', cursor: 'pointer',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
color: 'var(--ink-2)',
};
const RECAPTCHA_SITE_KEY = '6LflNvEsAAAAAFvURm1GTUbGd1QmYHL9Ez0u0uAM';
// Login modal
function LoginModal({ open, onClose, message }) {
const auth = useAuth();
const [mode, setMode] = useState('login');
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [showPwd, setShowPwd] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const [busy, setBusy] = useState(false);
const [error, setError] = useState(null);
const recaptchaRef = useRef(null);
const recaptchaWidget = useRef(null);
// stage: 'form' | 'check-email' | 'needs-verify'
const [stage, setStage] = useState('form');
const [verifyEmail, setVerifyEmail] = useState('');
const [resendBusy, setResendBusy] = useState(false);
const [resendOK, setResendOK] = useState(false);
// Reset ao abrir
useEffect(() => {
if (open) {
setError(null);
setBusy(false);
setStage('form');
setResendOK(false);
setConfirm('');
setShowPwd(false);
setShowConfirm(false);
recaptchaWidget.current = null;
}
}, [open]);
// Renderiza widget reCAPTCHA quando modo signup estiver visível
useEffect(() => {
if (!open || mode !== 'signup' || stage !== 'form') {
recaptchaWidget.current = null;
return;
}
let timer;
function tryRender() {
if (!recaptchaRef.current) return;
if (recaptchaWidget.current !== null) return;
if (!window.grecaptcha || !window.grecaptcha.render) {
timer = setTimeout(tryRender, 150);
return;
}
recaptchaRef.current.innerHTML = '';
recaptchaWidget.current = window.grecaptcha.render(recaptchaRef.current, {
sitekey: RECAPTCHA_SITE_KEY,
theme: 'light',
});
}
tryRender();
return () => clearTimeout(timer);
}, [open, mode, stage]);
async function onSubmit(e){
e.preventDefault();
setError(null);
if (mode === 'signup') {
if (password !== confirm) return setError('As senhas não coincidem.');
const captchaToken = window.grecaptcha && recaptchaWidget.current !== null
? window.grecaptcha.getResponse(recaptchaWidget.current)
: '';
if (!captchaToken) return setError('Confirme que você não é um robô.');
}
setBusy(true);
try {
if (mode === 'login') {
await auth.login(email, password);
setName(''); setEmail(''); setPassword('');
} else {
const captchaToken = window.grecaptcha && recaptchaWidget.current !== null
? window.grecaptcha.getResponse(recaptchaWidget.current)
: '';
const r = await auth.signup(name, email, password, captchaToken);
setVerifyEmail(r.email || email);
setStage('check-email');
}
} catch (err) {
if (window.grecaptcha && recaptchaWidget.current !== null) {
window.grecaptcha.reset(recaptchaWidget.current);
}
if (err.code === 'email_not_verified') {
setVerifyEmail(err.email || email);
setStage('needs-verify');
} else {
setError(err.message || 'Algo deu errado. Tente de novo.');
}
} finally {
setBusy(false);
}
}
async function onResend(){
setResendBusy(true);
setResendOK(false);
try {
await auth.resendVerification(verifyEmail);
setResendOK(true);
} catch(e) {
setError(e.message || 'Não foi possível reenviar.');
} finally {
setResendBusy(false);
}
}
return (
<>
);
}
// ---------- stages "verifique seu email" ----------
function CheckEmailStage({ email, onResend, resendBusy, resendOK, onSwitchToLogin }) {
return (
);
}
function NeedsVerifyStage({ email, onResend, resendBusy, resendOK, onBack }) {
return (
{resendOK && (
);
}
function tabBtn(active) {
return {
border: 'none', cursor: 'pointer',
padding: '8px 18px', fontSize: 13, fontWeight: 500,
borderRadius: 999,
background: active ? 'white' : 'transparent',
color: active ? 'var(--blue-700)' : 'var(--ink-3)',
boxShadow: active ? '0 4px 12px -4px rgba(8,51,68,0.18)' : 'none',
transition: 'all .18s ease',
};
}
function Input({ label, ...rest }) {
return (
);
}
function PasswordInput({ label, show, onToggle, ...rest }) {
return (
);
}
// Floating WhatsApp button
function WhatsAppFab() {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={()=> setHover(false)}
style={{
position: 'fixed', bottom: 24, right: 24, zIndex: 70,
background: 'linear-gradient(135deg, #25d366, #128c7e)',
color: 'white', borderRadius: 999,
height: 60, padding: hover ? '0 22px 0 18px' : '0', width: hover ? 'auto' : 60,
display: 'inline-flex', alignItems: 'center', gap: 10,
justifyContent: 'center',
boxShadow: '0 14px 32px -8px rgba(18,140,126,0.55)',
transition: 'all .25s cubic-bezier(.2,.7,.2,1)',
overflow: 'hidden', whiteSpace: 'nowrap',
fontSize: 14, fontWeight: 500,
}}>
{hover && Atendimento}
);
}
Object.assign(window, { Nav, LoginModal, WhatsAppFab });
{/* visual side */}
{/* form side */}
Sua conta
Bem-vinda de volta à Lua Azul.
Acompanhe seus pedidos, salve favoritos e tenha um endereço de entrega pronto pra próxima compra.
Feito à mão
Salvador · BA
{stage === 'check-email' ? (
{ setStage('form'); setMode('login'); }}/>
) : stage === 'needs-verify' ? (
setStage('form')}/>
) : (
<>
{message}
)}
{/* Google OAuth */}
ou
{/* Erros do servidor */}
{error && (
}
)}
{mode === 'login' ? 'Olá novamente' : 'Crie sua conta'}
{mode === 'login' ? 'Entre pra ver pedidos e favoritos.' : 'Em 30 segundos, com email e senha.'}
{/* Mensagem contextual (ex: "Crie sua conta pra salvar essa peça nos favoritos") */} {message && (ou
{error}
)}
{/* Afiliadas link — só mostra se affiliates_enabled (default true) */}
{(window.SITE_CONFIG?.affiliates_enabled !== false) && { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 12px 24px -12px rgba(8,51,68,0.18)'; }}
onMouseLeave={(e)=> { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
Quer ser afiliada Lua Azul?
10% de comissão · pagamento todo dia 1º
Confira seu e-mail
Compre mais rápido e acompanhe seus pedidos em um só lugar! Você está a um passo de criar sua conta.
Enviamos um link para {email} para validar seu e-mail.
Ainda não recebeu?{' '}
{resendOK && ✓ Enviado!}
Confirme seu e-mail antes de entrar
Sua conta {email} ainda não foi confirmada. Verifique sua caixa de entrada e clique no link que enviamos.
✓ Email reenviado. Confira sua caixa de entrada.
)}