/* ===== Axé de Quitéria — Loja: Auth e Conta ===== */ const LJ_USER_KEY = 'axe-quiteria:loja:user:v1'; function loadUser(){ try{ return JSON.parse(localStorage.getItem(LJ_USER_KEY)||'null'); }catch(e){ return null; } } function saveUser(u){ try{ u ? localStorage.setItem(LJ_USER_KEY,JSON.stringify(u)) : localStorage.removeItem(LJ_USER_KEY); }catch(e){} } /* Sincroniza perfil (nome, telefone, enderecos) com tabela perfis no Supabase */ async function syncPerfil(userId, patch){ if(!window.LJ_SUPABASE || !userId) return; try { await LJ_SUPABASE.from('perfis').upsert( { id: userId, ...patch, updated_at: new Date().toISOString() }, { onConflict: 'id' } ); } catch(e) {} } /* Carrega perfil do Supabase e mescla com localStorage */ async function loadPerfilRemoto(userId){ if(!window.LJ_SUPABASE || !userId) return null; try { const { data } = await LJ_SUPABASE.from('perfis').select('*').eq('id', userId).maybeSingle(); return data || null; } catch(e) { return null; } } async function hashSenha(s) { const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(s)); return Array.from(new Uint8Array(buf)).map(b=>b.toString(16).padStart(2,'0')).join(''); } /* ── AccountDrawer ── */ function AccountDrawer({ onClose, user, onLogin, onLogout, onAccount }) { const [email, setEmail] = useState(''); const [senha, setSenha] = useState(''); const [mode, setMode] = useState('login'); // login | register const [nome, setNome] = useState(''); const [err, setErr] = useState(''); const [loading, setLoading] = useState(false); const [showPw, setShowPw] = useState(false); const [showPwReg, setShowPwReg] = useState(false); const EyeOpen = () => ( ); const EyeOff = () => ( ); const handleLogin = async (e) => { e.preventDefault(); setErr(''); setLoading(true); try { const { data, error } = await LJ_SUPABASE.auth.signInWithPassword({ email, password: senha }); if (error) throw error; const uid = data.user.id; const perfil = await loadPerfilRemoto(uid); const userObj = { id: uid, email: data.user.email, nome: perfil?.nome || data.user.user_metadata?.nome || email.split('@')[0], telefone: perfil?.telefone || '', enderecos: perfil?.enderecos || [], }; saveUser(userObj); onLogin(userObj); onClose(); } catch(e) { const msg = e.message || ''; if (msg.includes('Email not confirmed')) setErr('Confirme seu e-mail antes de entrar. Verifique sua caixa de entrada.'); else if (msg.includes('Invalid login')) setErr('E-mail ou senha incorretos.'); else setErr(msg || 'Erro ao entrar'); } finally { setLoading(false); } }; const handleRegister = async (e) => { e.preventDefault(); setErr(''); setLoading(true); try { const { data, error } = await LJ_SUPABASE.auth.signUp({ email, password: senha, options: { data: { nome } } }); if (error) throw error; if (data.user && !data.session) { setErr('Cadastro realizado! Verifique seu e-mail para confirmar a conta e depois faça login.'); setMode('login'); } else { onLogin({ id: data.user.id, email: data.user.email, nome, enderecos: [] }); onClose(); } } catch(e) { const msg = e.message || ''; if (msg.includes('already registered') || msg.includes('already been registered')) setErr('E-mail já cadastrado. Faça login.'); else setErr(msg || 'Erro ao cadastrar'); } finally { setLoading(false); } }; const accountItems = [ { icon: '📦', label:'Meus pedidos', sub:'Acompanhe e rastreie suas compras', tab:'pedidos' }, { icon: '♡', label:'Favoritos', sub:'Peças que você salvou', tab:'favoritos' }, { icon: '📍', label:'Endereços', sub:'Locais de entrega', tab:'enderecos' }, { icon: '🔒', label:'Dados e segurança',sub:'E-mail, senha e privacidade', tab:'seguranca' }, ]; return (
{/* Header */}
Minha conta
{/* Deslogado */} {!user && (
{mode === 'login' ? ( <>

Entre para acompanhar seus pedidos, salvar favoritos e agilizar suas compras.

setEmail(e.target.value)} required/>
setSenha(e.target.value)} required style={{width:'100%',paddingRight:44,boxSizing:'border-box'}}/>
{err &&

{err}

}
) : ( <>

Crie sua conta para acompanhar pedidos e salvar favoritos.

setNome(e.target.value)} required/> setEmail(e.target.value)} required/>
setSenha(e.target.value)} required style={{width:'100%',paddingRight:44,boxSizing:'border-box'}}/>
{err &&

{err}

}
)}
)} {/* Logado */} {user && ( <>
{/* Avatar */}
{(user.nome||'U').charAt(0).toUpperCase()}
Olá, {user.nome} {user.email}
{/* Menu items */}
{accountItems.map(a=>( ))}
{/* Newsletter card */}
DO ATELIÊ

Novidades do ateliê

Peças novas, encomendas abertas e datas de obrigações direto no seu e-mail.

{/* Sair */}
)}
); } /* ── AccountScreen ── */ function AccountScreen({ user, onLogin, onLogout, onHome, favorites, onOpen, onUpdateUser }) { const [tab, setTab] = useState('pedidos'); const [mobileTab, setMobileTab] = useState(null); // null = list view, string = sub-screen /* Mobile login form state */ const [mEmail, setMEmail] = useState(''); const [mSenha, setMSenha] = useState(''); const [mNome, setMNome] = useState(''); const [mMode, setMMode] = useState('login'); const [mErr, setMErr] = useState(''); const [mLoad, setMLoad] = useState(false); const tabs = [ { key:'pedidos', label:'Meus pedidos', icon:'📦' }, { key:'favoritos', label:'Favoritos', icon:'♡' }, { key:'enderecos', label:'Endereços', icon:'📍' }, { key:'seguranca', label:'Dados e segurança', icon:'🔒' }, ]; const handleMobileLogin = async (e) => { e.preventDefault(); setMErr(''); setMLoad(true); try { const { data, error } = await LJ_SUPABASE.auth.signInWithPassword({ email: mEmail, password: mSenha }); if (error) throw error; const uid = data.user.id; const perfil = await loadPerfilRemoto(uid); const u = { id: uid, email: data.user.email, nome: perfil?.nome || data.user.user_metadata?.nome || mEmail.split('@')[0], telefone: perfil?.telefone || '', enderecos: perfil?.enderecos || [] }; saveUser(u); if (onLogin) onLogin(u); } catch(e) { const msg = e.message || ''; if (msg.includes('Email not confirmed')) setMErr('Confirme seu e-mail antes de entrar.'); else if (msg.includes('Invalid login')) setMErr('E-mail ou senha incorretos.'); else setMErr(msg || 'Erro ao entrar'); } finally { setMLoad(false); } }; const handleMobileRegister = async (e) => { e.preventDefault(); setMErr(''); setMLoad(true); try { const { data, error } = await LJ_SUPABASE.auth.signUp({ email: mEmail, password: mSenha, options: { data: { nome: mNome } } }); if (error) throw error; if (data.user && !data.session) { setMErr('Cadastro realizado! Verifique seu e-mail e depois faça login.'); setMMode('login'); } else { const u = { id: data.user.id, email: data.user.email, nome: mNome, enderecos: [] }; saveUser(u); if (onLogin) onLogin(u); } } catch(e) { const msg = e.message || ''; if (msg.includes('already registered') || msg.includes('already been registered')) setMErr('E-mail já cadastrado. Faça login.'); else setMErr(msg || 'Erro ao cadastrar'); } finally { setMLoad(false); } }; return (
{/* ── Layout Mobile ── */}
{/* Não logado: formulário inline */} {!user && (

Minha conta

Entre para acompanhar seus pedidos e favoritos.

{mMode === 'login' ? (
setMEmail(e.target.value)} required/> setMSenha(e.target.value)} required/> {mErr &&

{mErr}

}
) : (
setMNome(e.target.value)} required/> setMEmail(e.target.value)} required/> setMSenha(e.target.value)} required/> {mErr &&

{mErr}

}
)}
)} {/* Logado: lista de navegação */} {user && mobileTab === null && (
{/* Avatar */}
{(user.nome||'U').charAt(0).toUpperCase()}
Olá, {user.nome} {user.email}
{/* Menu */}
{tabs.map((t,i)=>( ))}
)} {/* Sub-tela */} {user && mobileTab !== null && (
{mobileTab === 'pedidos' && } {mobileTab === 'favoritos' && } {mobileTab === 'enderecos' && } {mobileTab === 'seguranca' && }
)}
{/* ── Layout Desktop ── */}
MINHA CONTA

Olá, {user?.nome||'visitante'}

{/* Sidebar */} {/* Content */}
{tab === 'pedidos' && } {tab === 'favoritos' && } {tab === 'enderecos' && } {tab === 'seguranca' && }
); } /* ── AccPedidos ── */ function AccPedidos({ user }) { const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); const [trackModal, setTrackModal] = useState(null); // order object or null const STATUS_MAP = { 'recebido': { label: 'Pedido recebido', color: '#8A6A14' }, 'producao': { label: 'Em produção', color: '#B58A34' }, 'enviando': { label: 'A caminho!', color: '#2A5A8A' }, 'concluido':{ label: 'Concluído', color: '#2F4E8A' }, }; useEffect(() => { if (!user) { setLoading(false); return; } // Carrega pedidos do localStorage (inseridos no checkout deste dispositivo) try { const local = JSON.parse(localStorage.getItem(LJ_ORDERS_KEY)||'[]')||[]; setOrders(local); } catch(_) {} setLoading(false); }, [user?.email]); // Sincroniza status dos pedidos em tempo real com o Supabase useEffect(() => { if (!window.LJ_SUPABASE || !user?.email) return; window.LJ_SUPABASE.from('pedidos') .select('numero, status, total, itens, id') .filter('cliente->>email', 'eq', user.email) .order('id', { ascending: false }) .then(({ data }) => { if (!data || !data.length) return; try { const cached = JSON.parse(localStorage.getItem(LJ_ORDERS_KEY) || '[]'); let changed = false; const updated = cached.map(o => { const fresh = data.find(r => r.numero === o.id || r.id === o.id); if (fresh && fresh.status !== o.status) { changed = true; return { ...o, status: fresh.status }; } return o; }); // Também adiciona pedidos do Supabase que não estejam no cache local data.forEach(r => { const exists = updated.find(o => o.id === r.numero || o.id === r.id); if (!exists) { changed = true; updated.unshift({ id: r.numero || r.id, total: r.total, status: r.status, itens: r.itens || [], data: '' }); } }); if (changed) { localStorage.setItem(LJ_ORDERS_KEY, JSON.stringify(updated)); setOrders(updated); } } catch(e) {} }); }, [user?.email]); if (loading) { return (

Meus pedidos

{[1,2,3].map(i=>(
))}
); } return (

Meus pedidos

{(!orders||orders.length===0) ?

Nenhum pedido ainda.

:
{orders.map(o=>{ const st = STATUS_MAP[o.status] || { label: o.status||'Confirmado', color:'var(--clay)' }; return (
Pedido #{o.numero||o.id} {o.data||''}
{st.label}
{o.itens?.length||0} {o.itens?.length===1?'peça':'peças'}
{brl(o.total)}
); })}
} {/* Modal Rastrear */} {trackModal && (
setTrackModal(null)} style={{position:'absolute',inset:0,background:'rgba(44,30,20,.5)'}}/>

Rastrear pedido #{trackModal.numero||trackModal.id}

{(() => { const st = STATUS_MAP[trackModal.status] || { label: trackModal.status||'Confirmado', color:'var(--clay)' }; return ( <>
{st.label}
{(trackModal.status === 'enviando' || trackModal.status === 'concluido') && ( Rastrear nos Correios → )} ); })()}
)}
); } /* ── AccFavoritos ── */ function AccFavoritos({ favorites, onOpen }) { return (

Favoritos

{(!favorites||favorites.length===0) ?

Nenhum favorito salvo.

:
{favorites.map(p=>(
{p.name} {brl(p.price)}
))}
}
); } /* ── AccEnderecos ── */ function AccEnderecos({ user, onUpdateUser }) { const [addrs, setAddrs] = useState(user?.enderecos || []); const [showForm, setShowForm] = useState(false); const [newLabel, setNewLabel] = useState(''); const [newCep, setNewCep] = useState(''); const [newEndereco, setNewEndereco] = useState(''); const [newCidade, setNewCidade] = useState(''); const [cepLoading, setCepLoading] = useState(false); const saveAddr = (updated) => { const fresh = loadUser() || {}; const next = { ...fresh, enderecos: updated }; saveUser(next); syncPerfil(user?.id, { enderecos: updated }); if (onUpdateUser) onUpdateUser(next); }; const handleCepBlur = async () => { const cepNum = newCep.replace(/\D/g, ''); if (cepNum.length !== 8) return; setCepLoading(true); try { const res = await fetch(`https://viacep.com.br/ws/${cepNum}/json/`); const json = await res.json(); if (!json.erro) { setNewEndereco(json.logradouro ? `${json.logradouro}, ` : ''); setNewCidade(`${json.localidade} / ${json.uf}`); } } catch(e) {} finally { setCepLoading(false); } }; const handleSaveAddr = () => { if (!newEndereco.trim()) return; const updated = [...addrs, { label: newLabel || 'Endereço', cep: newCep, endereco: newEndereco, cidade: newCidade, }]; setAddrs(updated); saveAddr(updated); setShowForm(false); setNewLabel(''); setNewCep(''); setNewEndereco(''); setNewCidade(''); }; const handleRemove = (idx) => { const updated = addrs.filter((_,i)=>i!==idx); setAddrs(updated); saveAddr(updated); }; const handleMakePrincipal = (idx) => { const updated = [addrs[idx], ...addrs.filter((_,i)=>i!==idx)]; setAddrs(updated); saveAddr(updated); }; return (

Endereços

{!showForm && ( )}
{/* Form inline */} {showForm && (

Novo endereço

setNewLabel(e.target.value)}/> setNewCep(e.target.value)} onBlur={handleCepBlur} maxLength={9}/> {cepLoading && Buscando endereço…} setNewEndereco(e.target.value)}/> setNewCidade(e.target.value)}/>
)} {addrs.length === 0 && !showForm && (

Nenhum endereço cadastrado ainda.

)} {addrs.length > 0 && (
{addrs.map((a,i)=>(
{i===0 && ( Principal )} {a.label}

{a.endereco}{a.cep ? ` — ${a.cep}` : ''}
{a.cidade}

{i !== 0 && ( )}
))}
)}
); } /* ── AccSeguranca ── */ function AccSeguranca({ user, onUpdateUser }) { const [nome, setNome] = useState(user?.nome||''); const [telefone, setTelefone] = useState(user?.telefone||''); const [dadosMsg, setDadosMsg] = useState(''); const [dadosSaving, setDadosSaving] = useState(false); const [showPwAtual, setShowPwAtual] = useState(false); const [showPwNova, setShowPwNova] = useState(false); const [senhaAtual, setSenhaAtual] = useState(''); const [senhaNova, setSenhaNova] = useState(''); const [pwMsg, setPwMsg] = useState(''); const [pwSaving, setPwSaving] = useState(false); const EyeOpen = () => ( ); const EyeOff = () => ( ); return (

Dados e segurança

{/* ── Dados pessoais ── */}

Dados pessoais

setNome(e.target.value)}/> setTelefone(e.target.value)}/>
{dadosMsg && ( {dadosMsg} )}
{/* ── Alterar senha ── */}

Alterar senha

setSenhaAtual(e.target.value)} style={{width:'100%',paddingRight:44,boxSizing:'border-box'}}/>
setSenhaNova(e.target.value)} style={{width:'100%',paddingRight:44,boxSizing:'border-box'}}/>
{pwMsg && ( {pwMsg} )}
); } Object.assign(window, { AccountDrawer, AccountScreen, loadUser, saveUser });