24ee4e9eab
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Build and deploy / Integration suite on a real stack (push) Successful in 3m7s
Build and deploy / Secret scan and release gate (push) Successful in 10s
Build and deploy / Publish images (push) Successful in 1m6s
The order page becomes the customer's area, one page at four addresses: - /conta/entrar: sign in or create an account, side by side. "Esqueci minha senha" points to the Dropstar WhatsApp until e-mail can be sent. - /conta: the counts of orders waiting for payment, in production, in correction and finished, and the latest one. - /conta/pedidos: every order and the cart waiting for payment in one list, newest first, filtered by group, order number and period, ten per page. The cart shows "Aguardando pagamento" and its "Pagar" goes to the PIX page when a PIX code is open. An order opens in place with its progress, items, delivery, history, files and the correction form. A guest sees the orders paid in this browser. - /conta/dados: WhatsApp and a saved delivery address (the CNPJ is locked), e-mail and password changes, both confirmed with the current password; a password change signs the other devices out. The cart fills in the account's details and saved address. New API routes for the details, and the order list takes filters and pages and returns the counts; only the newest unpaid quote whose files still exist is listed. The Site's "Minha conta" and "Ver meus pedidos" point to the new addresses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
596 lines
29 KiB
JavaScript
596 lines
29 KiB
JavaScript
/* Checkout bridge only: approved commercial functions in web/index.html stay intact.
|
|
The cart sends the order; the quote is paid on its own page (/pagamento). */
|
|
(() => {
|
|
const status = document.getElementById('checkoutStatus');
|
|
const actions = document.getElementById('checkoutActions');
|
|
const resumo = document.getElementById('pagResumo');
|
|
const naPagina = () => ['pagamento','pix'].includes(document.documentElement.dataset.rota);
|
|
const naPix = () => document.documentElement.dataset.rota === 'pix';
|
|
let shownCart = null;
|
|
let pixClock = null;
|
|
let busy = false;
|
|
let draftId = localStorage.getItem('dtf-quote');
|
|
let requestKey = localStorage.getItem('dtf-request-key');
|
|
let requestBody = localStorage.getItem('dtf-request-body');
|
|
let quotedCart = localStorage.getItem('dtf-quote-cart');
|
|
let refreshVersion = 0;
|
|
function cartSnapshot() {
|
|
const items=itensAPagar();
|
|
return JSON.stringify({customer:cliente,delivery:entrega,items:items.map(item=>({
|
|
mode:item.modo,metres:item.metros,grade:item.nota,production:item.production,
|
|
quality:item.qualityStatus,
|
|
acknowledged:item.qualityAcknowledged,
|
|
files:(item.localFiles||[]).map(file=>({name:file.name,size:file.size,lastModified:file.lastModified}))
|
|
}))});
|
|
}
|
|
function clearDraft() {
|
|
draftId=null;quotedCart=null;requestKey=null;requestBody=null;
|
|
for(const key of ['dtf-quote','dtf-quote-cart','dtf-request-key','dtf-request-body'])
|
|
localStorage.removeItem(key);
|
|
actions.replaceChildren();
|
|
}
|
|
const api = async (path, body) => {
|
|
const response = await fetch('/api'+path, {
|
|
credentials: 'same-origin', headers: {'Content-Type':'application/json'},
|
|
...(body === undefined ? {} : {method:'POST', body:JSON.stringify(body)})
|
|
});
|
|
const text = await response.text();
|
|
let data;
|
|
try { data = text ? JSON.parse(text) : {}; }
|
|
catch (_) { throw new Error(response.ok ? 'Resposta inválida do serviço.' : 'O serviço está indisponível. Tente novamente em instantes.'); }
|
|
if (!response.ok) { const error=new Error(typeof data.detail === 'string' ? data.detail : 'Confira os dados do pedido ('+response.status+').');error.status=response.status;throw error; }
|
|
return data;
|
|
};
|
|
const ready = api('/session');
|
|
ready.then(session=>{
|
|
window.dtfUploadMaxBytes=session.max_upload_bytes;
|
|
const limit=document.getElementById('zLimite');
|
|
if(limit)limit.textContent='Até '+(session.max_upload_bytes/1073741824).toFixed(0)+' GB por arquivo.';
|
|
}).catch(()=>{});
|
|
window.dtfSessionReady=ready;
|
|
window.dtfApi=api;
|
|
ready.catch(error => { status.textContent = error.message; });
|
|
function message(text) { status.textContent = text; }
|
|
function button(label, handler, into = actions, className = 'pagBtn') {
|
|
const el = document.createElement('button');
|
|
el.type = 'button';
|
|
el.className = className;
|
|
el.textContent = label;
|
|
el.onclick = handler;
|
|
into.append(el);
|
|
return el;
|
|
}
|
|
function node(tag, text, className) {
|
|
const el=document.createElement(tag);
|
|
if (text!=null) el.textContent=text;
|
|
if (className) el.className=className;
|
|
return el;
|
|
}
|
|
// What the customer is paying for, from the server's approval.
|
|
function pintaResumo(quote) {
|
|
const approved = quote ? quote.approved : null;
|
|
resumo.hidden = !approved;
|
|
if (!approved) { resumo.replaceChildren(); return; }
|
|
const linha = (label, value, className='l') => {
|
|
const row=document.createElement('div'); row.className=className;
|
|
const name=document.createElement('span'); name.textContent=label;
|
|
const amount=document.createElement('b'); amount.textContent=value;
|
|
row.append(name,amount); return row;
|
|
};
|
|
const rows = approved.items.map(item => linha(
|
|
(MODOS[item.mode]?.tit || item.mode)+' · '+fmtM(Number(item.billed_metres))+' m', rs(item.total_cents/100)));
|
|
const pickup = approved.freight.service === 'pickup';
|
|
const prazo = approved.freight.days ? ' · até '+approved.freight.days+' dias úteis' : '';
|
|
rows.push(linha(pickup ? 'Retirada em Franca' : 'Frete'+prazo,
|
|
approved.freight.total_cents ? rs(approved.freight.total_cents/100) : 'Grátis'));
|
|
rows.push(linha('Total', rs(approved.total_cents/100), 'tot'));
|
|
resumo.replaceChildren(node('h4','Resumo do pedido'), ...rows);
|
|
}
|
|
function esqueletoPagamento() {
|
|
const linhas=['skel skelLinha','skel skelLinha','skel skelLinha curta'].map(c=>node('div',null,c));
|
|
resumo.hidden=false; resumo.replaceChildren(node('h4','Resumo do pedido'),...linhas);
|
|
actions.replaceChildren(node('div',null,'skel skelLinha curta'),node('div',null,'skel skelBloco'));
|
|
}
|
|
function semPedido() {
|
|
pintaResumo(null);
|
|
actions.replaceChildren();
|
|
message('Nenhum pedido aguardando pagamento.');
|
|
button('Ir para o carrinho', () => vaiPara(CARRINHO));
|
|
}
|
|
// Files start uploading as soon as they are in the cart, so a sheet of
|
|
// several GB is on its way while the customer fills in the order. The
|
|
// checkout waits for whatever is still going.
|
|
const envios=new Map();
|
|
const chaveArquivo=f=>[f.name,f.size,f.lastModified].join('|');
|
|
function enviar(file) {
|
|
const k=chaveArquivo(file);
|
|
let e=envios.get(k);
|
|
if (!e) {
|
|
e={file, sent:0, done:false, failed:null};
|
|
e.promise=(async()=>{
|
|
const session=await ready;
|
|
return window.dtfUpload(file,{api,scope:session.cart_scope,progress:()=>{},
|
|
onBytes:n=>{e.sent=n;pintaEnvio();}});
|
|
})();
|
|
e.promise.then(()=>{e.done=true;falhas.delete(k);pintaEnvio();},
|
|
error=>{envios.delete(k);falhas.set(k,{file,error});pintaEnvio();});
|
|
envios.set(k,e);
|
|
}
|
|
return e.promise;
|
|
}
|
|
// A failed upload is shown and waits for the customer, never retried behind
|
|
// their back: a file the check refused would fail again on every change.
|
|
const falhas=new Map();
|
|
function tentaDeNovo() {
|
|
const arquivos=[...falhas.values()].map(f=>f.file);
|
|
falhas.clear();
|
|
arquivos.forEach(f=>enviar(f).catch(()=>{}));
|
|
pintaEnvio();
|
|
}
|
|
const arquivosDoCarrinho=()=>[...pedido.filter(it=>it.marcado!==false),...(busy&&itemAtual?[itemAtual]:[])].flatMap(it=>it.localFiles||[]);
|
|
const gb=n=>(n/1073741824).toLocaleString('pt-BR',{maximumFractionDigits:1})+' GB';
|
|
const mb=n=>n>=1073741824 ? gb(n) : Math.round(n/1048576)+' MB';
|
|
// Where the uploads stand, and roughly how long is left from the recent speed.
|
|
const amostras=[];
|
|
function estadoEnvio() {
|
|
const files=arquivosDoCarrinho(); if(!files.length) return null;
|
|
let total=0, sent=0, pendentes=0;
|
|
for (const f of files) {
|
|
const e=envios.get(chaveArquivo(f));
|
|
total+=f.size; sent+=e ? Math.min(e.sent,f.size) : 0;
|
|
if (!e || !e.done) pendentes++;
|
|
}
|
|
const agora=Date.now();
|
|
amostras.push([agora,sent]); while(amostras.length>2 && agora-amostras[0][0]>15000) amostras.shift();
|
|
const [t0,s0]=amostras[0], taxa=agora>t0 ? (sent-s0)/((agora-t0)/1000) : 0;
|
|
const fase=!pendentes ? 'pronto' : sent>=total ? 'verificando' : 'enviando';
|
|
return {total, sent, fase, pct:Math.floor(sent/total*100),
|
|
restante: fase==='enviando' && taxa>0 ? (total-sent)/taxa : null};
|
|
}
|
|
const falta=s=>s<60 ? 'falta menos de 1 min' : 'faltam cerca de '+duracao(s);
|
|
// The time left, measured from the upload's own speed; until there is a
|
|
// measure, a range from the size.
|
|
const restante=e=>e.restante!=null ? falta(e.restante) : 'estimativa '+faixaEnvio(e.total-e.sent);
|
|
function textoEnvio(e) {
|
|
if (!e) return '';
|
|
if (e.fase==='pronto') return 'Arquivos enviados';
|
|
if (e.fase==='verificando') return 'Arquivos enviados · verificando a segurança…';
|
|
return 'Enviando seus arquivos · '+restante(e);
|
|
}
|
|
function pintaEnvio() {
|
|
const e=estadoEnvio(), texto=textoEnvio(e);
|
|
const el=document.getElementById('envioArq');
|
|
const falhou=arquivosDoCarrinho().map(f=>falhas.get(chaveArquivo(f))).filter(Boolean);
|
|
const topo=document.getElementById('cartEnvio');
|
|
if (falhou.length) {
|
|
if (el) {
|
|
el.replaceChildren(document.createTextNode('Não foi possível enviar '+falhou[0].file.name+': '+
|
|
(falhou[0].error?.message||'erro no envio').replace(/\.$/,'')+(falhou.length>1?' (e mais '+(falhou.length-1)+')':'')+'. '));
|
|
const b=document.createElement('button'); b.type='button'; b.className='envioDeNovo'; b.textContent='Tentar de novo';
|
|
b.onclick=tentaDeNovo; el.append(b);
|
|
el.classList.remove('ok'); el.classList.add('erro');
|
|
}
|
|
if (topo) topo.textContent='· falha no envio';
|
|
return;
|
|
}
|
|
if (el) el.classList.remove('erro');
|
|
if (el) {
|
|
el.replaceChildren();
|
|
if (e && e.fase!=='pronto') {
|
|
const barra=document.createElement('div'); barra.className='envioBarra';
|
|
const i=document.createElement('i'); i.style.width=(e.fase==='verificando'?100:e.pct)+'%'; barra.append(i);
|
|
el.append(barra);
|
|
}
|
|
if (e?.fase==='pronto') el.insertAdjacentHTML('beforeend', icone('okCirculo'));
|
|
if (texto) el.append(document.createTextNode(texto));
|
|
if (e?.fase==='enviando') {
|
|
const nota=document.createElement('small'); nota.className='envioNota';
|
|
nota.textContent='O tempo depende da velocidade da sua internet. Mantenha a página aberta.';
|
|
el.append(nota);
|
|
}
|
|
el.classList.toggle('ok', e?.fase==='pronto');
|
|
}
|
|
// Visible on every page while it runs.
|
|
if (topo) topo.textContent = !e || e.fase==='pronto' ? '' : e.fase==='verificando' ? '· verificando' : e.restante!=null ? '· '+duracao(e.restante) : '· enviando';
|
|
if (busy && texto) {
|
|
message(texto);
|
|
$('bPagarTx').textContent = e && e.fase!=='pronto' ? (e.fase==='verificando' ? 'Verificando os arquivos…' : 'Enviando arquivos… '+restante(e)) : $('bPagarTx').textContent;
|
|
}
|
|
}
|
|
// Leaving the page pauses an upload; it resumes, but the customer is warned.
|
|
window.addEventListener('beforeunload',event=>{
|
|
const e=estadoEnvio();
|
|
if (e && e.fase==='enviando') { event.preventDefault(); event.returnValue=''; }
|
|
});
|
|
// Only what is in the cart: the item on the product page may still change.
|
|
window.addEventListener('dtf-cart-changed',()=>{
|
|
arquivosDoCarrinho().forEach(f=>{ if(!falhas.has(chaveArquivo(f))) enviar(f).catch(()=>{}); });
|
|
pintaEnvio();
|
|
});
|
|
async function upload(file) {
|
|
return enviar(file);
|
|
}
|
|
// The cart's package: billed metres and value. The charged freight is
|
|
// quoted again by the server from the approved items.
|
|
const pacote = () => {
|
|
const items=itensAPagar();
|
|
return {metres:items.reduce((t,it)=>t+(it.cob||0),0), cents:Math.round(items.reduce((t,it)=>t+(it.total||0),0)*100)};
|
|
};
|
|
let freightQuoted = null;
|
|
window.dtfFreight = async () => {
|
|
const cep = entrega.cep;
|
|
const service = (await ready).freight_service;
|
|
if (!service) {
|
|
$('cepMsg').textContent = 'A entrega ainda não está disponível. Escolha a retirada em Franca.';
|
|
return;
|
|
}
|
|
const {metres, cents} = pacote();
|
|
if (!metres) { $('cepMsg').textContent = 'Adicione um item ao pedido para cotar o frete.'; return; }
|
|
$('cepMsg').textContent = 'Cotando o frete…';
|
|
try {
|
|
const result = await api('/freight',{service,postal_code:cep,metres:metres.toFixed(2),declared_cents:cents});
|
|
if (entrega.cep !== cep || entrega.tipo !== 'frete') return;
|
|
entrega.valor = result.total_cents/100;
|
|
entrega.dias = result.days || null;
|
|
entrega.cotado = true;
|
|
freightQuoted = JSON.stringify(pacote());
|
|
$('cepMsg').textContent = '';
|
|
pintaEntrega();
|
|
} catch(error) { $('cepMsg').textContent = error.message; }
|
|
};
|
|
// A different package is a different freight: quote it again.
|
|
window.addEventListener('dtf-cart-changed',()=>{
|
|
if (entrega.tipo==='frete' && entrega.cotado && freightQuoted && freightQuoted!==JSON.stringify(pacote())) {
|
|
entrega.cotado=false; freightQuoted=null; window.dtfFreight();
|
|
}
|
|
});
|
|
window.dtfCheckout = async () => {
|
|
if (busy) return;
|
|
// The cart that was sent goes straight to its payment; a changed cart is sent again.
|
|
if (draftId && quotedCart === cartSnapshot()) { await refresh(true); return; }
|
|
if (draftId) clearDraft();
|
|
if (!clienteOk() || !entrega.cotado) return;
|
|
if (!enderecoOk()) return message('Preencha o endereço de entrega.');
|
|
if (!cartPodeEnviar()) return message('Revise a qualidade e confirme a ressalva de cada item antes de enviar o pedido.');
|
|
const cart = itensAPagar();
|
|
if (!cart.length) return message('Adicione um item ao pedido.');
|
|
const initialCart=cartSnapshot();
|
|
busy = true;
|
|
$('bPagar').disabled = true;
|
|
try {
|
|
await ready;
|
|
if((await api('/session')).cart_scope !== (await ready).cart_scope) throw new Error('Sua conta ou sessão mudou. Recarregue a página antes de enviar o carrinho.');
|
|
const items=[];
|
|
pintaEnvio();
|
|
for (const item of cart) {
|
|
if (!item.localFiles?.length) throw new Error('Selecione novamente os arquivos deste item.');
|
|
const uploads=[];
|
|
for (const file of item.localFiles) uploads.push(await upload(file));
|
|
if (item.production?.version!==2 || item.production.sources?.length!==uploads.length)
|
|
throw new Error('A montagem deste item precisa ser refeita antes da cotação.');
|
|
items.push({mode:item.modo, metres:String(item.metros), grade:item.nota, uploads,
|
|
production:{...item.production,sources:item.production.sources.map((source,index)=>({
|
|
upload_id:uploads[index],...source}))},
|
|
quality_status:item.qualityStatus,quality_acknowledged:item.qualityAcknowledged});
|
|
}
|
|
const service = entrega.tipo==='retira' ? 'pickup' : (await ready).freight_service;
|
|
if (!service) throw new Error('A entrega ainda não está disponível. Escolha a retirada em Franca.');
|
|
const content = {customer:{...cliente},items,freight:{service,postal_code:entrega.tipo==='retira'?'':entrega.cep}};
|
|
const destination = destinoApi();
|
|
if (destination) content.destination = destination;
|
|
if (cartSnapshot()!==initialCart) throw new Error('O carrinho mudou durante o envio. Confira os itens e envie de novo.');
|
|
const serialized = JSON.stringify(content);
|
|
if (!requestKey || serialized !== requestBody) {
|
|
requestKey = crypto.randomUUID(); requestBody = serialized;
|
|
localStorage.setItem('dtf-request-key',requestKey);
|
|
localStorage.setItem('dtf-request-body',requestBody);
|
|
}
|
|
const quote = await api('/quotes',{request_key:requestKey,...content});
|
|
quotedCart=initialCart;localStorage.setItem('dtf-quote-cart',quotedCart);
|
|
draftId=quote.id; localStorage.setItem('dtf-quote',draftId);
|
|
await refresh(true);
|
|
} catch(error) { message(error.message); }
|
|
finally { busy=false; pintaEntrega(); }
|
|
};
|
|
// `go`: the customer asked to pay, so the cart page moves to the payment page.
|
|
async function refresh(go) {
|
|
if (!naPagina()) { if (!go || !draftId) return; }
|
|
else if (!draftId) { semPedido(); return; }
|
|
const version=++refreshVersion, shownId=draftId;
|
|
if (naPagina() && !actions.children.length) esqueletoPagamento();
|
|
try {
|
|
await ready;
|
|
const quote=await api('/quotes/'+shownId);
|
|
if(version!==refreshVersion || draftId!==shownId) return;
|
|
if (!naPagina()) { message(''); vaiPara(PAGAMENTO); return; }
|
|
shownCart=cartSnapshot();
|
|
clearInterval(pixClock);
|
|
unmountCard();
|
|
actions.replaceChildren();
|
|
message('');
|
|
pintaResumo(quote);
|
|
document.querySelector('.pagVolta').hidden = quote.status==='paid';
|
|
if (quote.status==='paid') { confirmado(quote); return; }
|
|
if (naPix() && quote.status!=='approved') { vaiPara(PAGAMENTO); return; }
|
|
if (!quotedCart || quotedCart!==cartSnapshot()) {
|
|
message('O carrinho mudou ou não está disponível neste navegador. A cotação anterior continua separada; envie o carrinho atual para uma nova revisão.');
|
|
button('Enviar carrinho atual',()=>{clearDraft();window.dtfCheckout();});
|
|
return;
|
|
}
|
|
if (quote.status==='pending_review') {
|
|
message((await ready).environment==='local'
|
|
? 'Arquivos enviados. No Kanban, confira metragem e nota e aprove a cotação '+draftId.slice(0,8)+'.'
|
|
: 'Arquivos enviados. Nossa equipe está conferindo a cotação '+draftId.slice(0,8)+'; o valor final aparece aqui em seguida.');
|
|
} else if (quote.status==='approved') {
|
|
if ((await ready).payment_provider === 'mercadopago') {
|
|
if (naPix()) await paginaPix(quote, version);
|
|
else await escolhaPagamento(quote, version);
|
|
return;
|
|
}
|
|
if ((await ready).environment !== 'local') {
|
|
message('Cotação revisada. O pagamento online ainda não está disponível.');
|
|
return;
|
|
}
|
|
// Local stack only: the simulated payment.
|
|
message('Total validado no servidor: '+rs(quote.approved.total_cents/100)+' · inclui frete. Cotação válida por 24 horas.');
|
|
button('Criar pedido de teste',async event=>{
|
|
if (!quotedCart || quotedCart!==cartSnapshot()) { await refresh(); return; }
|
|
event.target.disabled=true;
|
|
try {
|
|
const order=await api('/orders/dev-paid',{quote_id:draftId});
|
|
await pagos();
|
|
message('Pedido #'+order.number+' criado e disponível no Kanban.');
|
|
await refresh();
|
|
} catch(error) { message(error.message); event.target.disabled=false; }
|
|
});
|
|
} else {
|
|
message('Cotação expirada. Envie o carrinho de novo para pagar.');
|
|
button('Voltar ao carrinho',()=>{clearDraft();vaiPara(CARRINHO);});
|
|
}
|
|
} catch(error) {
|
|
if(version!==refreshVersion || draftId!==shownId) return;
|
|
message(error.message);
|
|
actions.replaceChildren();
|
|
button('Limpar referência e tentar de novo',clearDraft);
|
|
}
|
|
}
|
|
// The order is created by Mercado Pago's notification, never by this page,
|
|
// so after paying the page only waits for the order to exist.
|
|
let waitTimer=null;
|
|
function waitForOrder() {
|
|
clearInterval(waitTimer);
|
|
waitTimer=setInterval(async()=>{
|
|
try {
|
|
const quote=await api('/quotes/'+draftId);
|
|
if (quote.status==='paid') {
|
|
clearInterval(waitTimer);
|
|
await pagos();
|
|
await refresh();
|
|
} else if (quote.payment?.status==='rejected') {
|
|
// Refused after the bank's confirmation or the provider's review.
|
|
clearInterval(waitTimer);
|
|
await refresh();
|
|
message('Pagamento recusado. Tente de novo ou escolha outra forma de pagamento.');
|
|
}
|
|
} catch(_) {}
|
|
},3000);
|
|
}
|
|
// 3-D Secure: the bank's own page, opened by posting its request in a frame.
|
|
function showChallenge(challenge, into) {
|
|
unmountCard();
|
|
const frame=document.createElement('iframe');
|
|
frame.name='confirmacaoBanco'; frame.title='Confirmação do banco'; frame.className='desafio';
|
|
const form=document.createElement('form');
|
|
form.method='POST'; form.action=challenge.url; form.target=frame.name;
|
|
const input=document.createElement('input');
|
|
input.type='hidden'; input.name='creq'; input.value=challenge.creq;
|
|
form.append(input);
|
|
into.replaceChildren(node('p','Confirme o pagamento na página do seu banco, abaixo.','pagNota'),frame,form);
|
|
form.submit();
|
|
form.remove();
|
|
}
|
|
function confirmado(quote) {
|
|
clearInterval(waitTimer);
|
|
const box=node('div',null,'confirmado');
|
|
const titulo=node('h4','Pagamento confirmado');
|
|
titulo.insertAdjacentHTML('afterbegin', icone('okCirculo'));
|
|
box.append(titulo,
|
|
node('p','Pedido #'+quote.order.number+' recebido e enviado para a produção. Você acompanha cada etapa em Meus pedidos.'));
|
|
button('Ver meus pedidos',()=>location.assign('/conta/pedidos?order='+quote.order.id),box);
|
|
actions.append(box);
|
|
}
|
|
const cartOk=()=>!!quotedCart && quotedCart===cartSnapshot();
|
|
// What was paid leaves the cart; unchecked items stay for another order.
|
|
async function pagos() {
|
|
pedido=pedido.filter(it=>it.marcado===false); itemAtual=null; limpaPaineis();
|
|
if (pedido.length) pintaPedido(); else await window.dtfClearCart?.();
|
|
}
|
|
|
|
// Paying: card (the default, paid on this page) or PIX (paid on its own page).
|
|
async function escolhaPagamento(quote, version) {
|
|
const session=await ready;
|
|
const opcoes=[...(session.payment_public_key?[['credito','Cartão de crédito'],['debito','Cartão de débito']]:[]),['pix','PIX']];
|
|
let escolhido=opcoes[0][0];
|
|
const grupo=node('div',null,'metodos');
|
|
grupo.setAttribute('role','radiogroup'); grupo.setAttribute('aria-label','Forma de pagamento');
|
|
const area=node('div',null,'area');
|
|
const radios=opcoes.map(([key,label])=>{
|
|
const el=button(label,()=>{ if(escolhido!==key){ escolhido=key; pinta(); } },grupo,'metodo');
|
|
el.setAttribute('role','radio'); el.dataset.metodo=key;
|
|
el.insertAdjacentHTML('afterbegin', icone(key==='pix'?'qrcode':'cartao'));
|
|
return el;
|
|
});
|
|
actions.append(node('h4','Forma de pagamento'),grupo,area);
|
|
async function pinta() {
|
|
radios.forEach(el=>el.setAttribute('aria-checked',String(el.dataset.metodo===escolhido)));
|
|
unmountCard(); area.replaceChildren(); message('');
|
|
if (escolhido!=='pix') { await showCard(quote.approved, area, version, escolhido); return; }
|
|
area.append(node('p','Clique em Pagar para gerar o QR code do PIX.','pagNota'));
|
|
button('Pagar',async event=>{
|
|
if (!cartOk()) { await refresh(); return; }
|
|
event.target.disabled=true;
|
|
try {
|
|
await api('/payments/intent',{quote_id:draftId,method:{type:'pix'}});
|
|
vaiPara(PAGAMENTO_PIX);
|
|
} catch(error) { message(error.message); event.target.disabled=false; }
|
|
},area);
|
|
}
|
|
await pinta();
|
|
}
|
|
|
|
// The PIX page. The intent is idempotent on the quote, so reopening this
|
|
// page shows the same QR code instead of creating another charge.
|
|
async function paginaPix(quote, version) {
|
|
let intent;
|
|
try { intent=await api('/payments/intent',{quote_id:draftId,method:{type:'pix'}}); }
|
|
catch(error) {
|
|
if (version!==refreshVersion) return;
|
|
message(error.message);
|
|
button('Escolher outra forma de pagamento',()=>vaiPara(PAGAMENTO),actions,'pagBtn sec');
|
|
return;
|
|
}
|
|
if (version!==refreshVersion) return;
|
|
if (!intent.pix_qr_code) { message('Não foi possível gerar o PIX. Tente de novo em instantes.'); return; }
|
|
const box=node('div',null,'pixBox');
|
|
box.append(node('h4','Pague com PIX'),
|
|
node('p','Abra o app do seu banco, escolha pagar com PIX e leia o QR code ou cole o código abaixo.','pagNota'));
|
|
if (intent.pix_qr_code_base64) {
|
|
const img=document.createElement('img');
|
|
img.src='data:image/png;base64,'+intent.pix_qr_code_base64;
|
|
img.alt='QR code do PIX';img.width=240;img.height=240;
|
|
box.append(img);
|
|
}
|
|
const linha=node('div',null,'codigo');
|
|
const code=document.createElement('input');
|
|
code.readOnly=true;code.value=intent.pix_qr_code;code.setAttribute('aria-label','Código PIX copia e cola');
|
|
linha.append(code);
|
|
const copiar=button('Copiar código',async()=>{
|
|
try{ await navigator.clipboard.writeText(intent.pix_qr_code);
|
|
copiar.replaceChildren(); copiar.insertAdjacentHTML('beforeend', icone('ok')+'<span>Código copiado</span>'); }
|
|
catch(_){ code.select(); }
|
|
},linha);
|
|
copiar.insertAdjacentHTML('afterbegin', icone('copiar'));
|
|
const prazo=node('p',null,'prazo');
|
|
prazo.insertAdjacentHTML('afterbegin', icone('relogio'));
|
|
const prazoTx=node('span'); prazo.append(prazoTx);
|
|
box.append(linha,prazo,node('p','Aguardando a confirmação do pagamento…','aguarda'));
|
|
actions.append(box);
|
|
waitForOrder();
|
|
// The code stops working when it expires; a new one is a click away.
|
|
const fim=Date.parse(intent.expires_at);
|
|
if (!Number.isFinite(fim)) { prazo.remove(); return; }
|
|
const tick=()=>{
|
|
const s=Math.max(0,Math.ceil((fim-Date.now())/1000));
|
|
prazoTx.textContent='Pague em '+String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0');
|
|
if (s>0) return;
|
|
clearInterval(pixClock);
|
|
const fimBox=node('div',null,'pixBox');
|
|
fimBox.append(node('h4','O código PIX expirou'),
|
|
node('p','Gere um novo código para pagar. O anterior não pode mais ser pago.','pagNota'));
|
|
button('Gerar novo PIX',()=>refresh(),fimBox);
|
|
actions.replaceChildren(fimBox);
|
|
};
|
|
tick();
|
|
pixClock=setInterval(tick,1000);
|
|
}
|
|
|
|
// Card: Mercado Pago's own form (Card Payment Brick). The card is typed into
|
|
// Mercado Pago's secure fields and becomes a one-time token; the number never
|
|
// reaches this page's code or our server.
|
|
let sdkLoading=null;
|
|
function loadMercadoPago() {
|
|
if (window.MercadoPago) return Promise.resolve();
|
|
sdkLoading = sdkLoading || new Promise((resolve,reject)=>{
|
|
const script=document.createElement('script');
|
|
script.src='https://sdk.mercadopago.com/js/v2';
|
|
script.onload=resolve;
|
|
script.onerror=()=>{sdkLoading=null;reject(new Error('Não foi possível carregar o formulário do Mercado Pago.'));};
|
|
document.head.append(script);
|
|
});
|
|
return sdkLoading;
|
|
}
|
|
// The cardholder's document as the card form collected it.
|
|
function cardholder(id) {
|
|
const number=String(id?.number||'').replace(/\D/g,'');
|
|
const type=String(id?.type||'').toUpperCase();
|
|
return ['CPF','CNPJ'].includes(type) && /^[0-9]{11,14}$/.test(number)
|
|
? {payer_document_type:type, payer_document:number} : {};
|
|
}
|
|
let cardBrick=null;
|
|
function unmountCard() {
|
|
if (cardBrick) { try { cardBrick.unmount(); } catch(_) {} cardBrick=null; }
|
|
}
|
|
async function showCard(approved, into, version, tipo) {
|
|
const holder=node('div');
|
|
holder.id='cardPaymentBrick';
|
|
const espera=node('div',null,'skel skelBloco');
|
|
into.append(espera,holder);
|
|
try { await loadMercadoPago(); }
|
|
catch(error) { espera.remove(); message(error.message); return; }
|
|
const session=await ready;
|
|
// The customer may have switched to PIX, or the page re-rendered, meanwhile.
|
|
if (!holder.isConnected || version!==refreshVersion) return;
|
|
unmountCard();
|
|
const mp=new window.MercadoPago(session.payment_public_key,{locale:'pt-BR'});
|
|
cardBrick=await mp.bricks().create('cardPayment','cardPaymentBrick',{
|
|
initialization:{amount:approved.total_cents/100, payer:{email:approved.customer.mail}},
|
|
// Each option takes only its kind of card; debit is paid at once.
|
|
customization:{paymentMethods:tipo==='debito'
|
|
? {maxInstallments:1,types:{excluded:['credit_card']}}
|
|
: {maxInstallments:12,types:{excluded:['debit_card']}},
|
|
// The option above already names the card; the form's own title
|
|
// ("crédito ou débito") would contradict it.
|
|
visual:{hideFormTitle:true,
|
|
style:{customVariables:{baseColor:'#FFA81A',buttonTextColor:'#03060B'}}}},
|
|
callbacks:{
|
|
onReady:()=>{ espera.remove(); },
|
|
onError:error=>{ console.error(error); message('Erro no formulário do cartão. Confira os dados e tente de novo.'); },
|
|
onSubmit:async data=>{
|
|
if (!cartOk()) { await refresh(); throw new Error('cart changed'); }
|
|
message('');
|
|
let result;
|
|
try {
|
|
result=await api('/payments/intent',{quote_id:draftId,method:{
|
|
type:'card', token:data.token, payment_method_id:data.payment_method_id,
|
|
installments:Number(data.installments)||1,
|
|
issuer_id:data.issuer_id==null?null:String(data.issuer_id),
|
|
...cardholder(data.payer?.identification)}});
|
|
} catch(error) {
|
|
// Rejecting stops the form's spinner; the reason is shown above it.
|
|
message(error.message || 'Não foi possível concluir o pagamento. Tente de novo.');
|
|
status.scrollIntoView({behavior:'smooth',block:'center'});
|
|
throw error;
|
|
}
|
|
if (result.challenge) { showChallenge(result.challenge, into); waitForOrder(); return; }
|
|
if (result.status==='approved' || result.status==='pending') {
|
|
unmountCard();
|
|
into.replaceChildren(node('p',result.status==='approved'
|
|
? 'Pagamento aprovado. Confirmando seu pedido…'
|
|
: 'Pagamento em análise pelo Mercado Pago. Esta página atualiza assim que ele for confirmado.','pagNota'));
|
|
waitForOrder();
|
|
} else {
|
|
message('Pagamento recusado pelo Mercado Pago ('+(result.status_detail||result.status)+'). '+
|
|
'Confira os dados ou use outro cartão.');
|
|
throw new Error('rejected');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
if (!holder.isConnected || version!==refreshVersion) unmountCard();
|
|
}
|
|
const quoteFromPortal=new URLSearchParams(location.search).get('quote');
|
|
if(quoteFromPortal && /^[0-9a-f-]{36}$/.test(quoteFromPortal)){
|
|
if(draftId!==quoteFromPortal){quotedCart=null;localStorage.removeItem('dtf-quote-cart');}
|
|
draftId=quoteFromPortal;localStorage.setItem('dtf-quote',draftId);
|
|
}
|
|
// Re-render the payment page only when the cart really changed: re-rendering
|
|
// would remount the card form under the customer's typing.
|
|
window.addEventListener('dtf-cart-changed',()=>{if(draftId && naPagina() && shownCart!==cartSnapshot()) refresh();});
|
|
// The cart page keeps only the sending progress and errors, never a payment.
|
|
window.addEventListener('dtf-page-changed',()=>{
|
|
if (naPagina()) refresh();
|
|
else if (!busy) { refreshVersion++; clearInterval(pixClock); message(''); actions.replaceChildren(); pintaResumo(null); }
|
|
});
|
|
refresh();
|
|
})();
|