feat: tell the customer how long the upload takes before it starts
When files are picked, the product page shows the range the upload takes between a slow (10 Mbps) and a fast (150 Mbps) connection, and asks to keep the page open. The cart shows the same range until the real speed is measured, then the measured time left. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -152,8 +152,10 @@
|
|||||||
if (!e) return '';
|
if (!e) return '';
|
||||||
if (e.fase==='pronto') return 'Arquivos enviados ✓';
|
if (e.fase==='pronto') return 'Arquivos enviados ✓';
|
||||||
if (e.fase==='verificando') return 'Arquivos enviados · verificando a segurança…';
|
if (e.fase==='verificando') return 'Arquivos enviados · verificando a segurança…';
|
||||||
return 'Enviando seus arquivos: '+e.pct+'% · '+mb(e.sent)+' de '+mb(e.total)+
|
// Until the speed is measured, the range from the file size.
|
||||||
(e.restante!=null ? ' · '+tempo(e.restante) : '');
|
return 'Enviando seus arquivos: '+e.pct+'% · '+mb(e.sent)+' de '+mb(e.total)+' · '+
|
||||||
|
(e.restante!=null ? tempo(e.restante) : 'estimativa '+faixaEnvio(e.total-e.sent))+
|
||||||
|
'. Mantenha a página aberta.';
|
||||||
}
|
}
|
||||||
function pintaEnvio() {
|
function pintaEnvio() {
|
||||||
const e=estadoEnvio(), texto=textoEnvio(e);
|
const e=estadoEnvio(), texto=textoEnvio(e);
|
||||||
|
|||||||
@@ -917,6 +917,7 @@ footer a:hover{color:var(--laranja2)}
|
|||||||
<div class="trocouCam" id="avisoTipo" style="display:none"></div>
|
<div class="trocouCam" id="avisoTipo" style="display:none"></div>
|
||||||
<div class="recusa" id="recusa" style="display:none"></div>
|
<div class="recusa" id="recusa" style="display:none"></div>
|
||||||
<div id="lista"></div>
|
<div id="lista"></div>
|
||||||
|
<p class="avisoEnvio" id="avisoEnvio" role="note" hidden></p>
|
||||||
<div class="zona" id="zona" tabindex="0" role="button">
|
<div class="zona" id="zona" tabindex="0" role="button">
|
||||||
<div class="ico">↑</div>
|
<div class="ico">↑</div>
|
||||||
<b id="zTit">Arraste aqui</b><span id="zSub"></span>
|
<b id="zTit">Arraste aqui</b><span id="zSub"></span>
|
||||||
|
|||||||
@@ -96,6 +96,25 @@ const destinoApi=()=>entrega.tipo!=='frete' ? null : {
|
|||||||
recipient:entrega.end.nome.trim(), street:entrega.end.rua.trim(), number:entrega.end.num.trim(),
|
recipient:entrega.end.nome.trim(), street:entrega.end.rua.trim(), number:entrega.end.num.trim(),
|
||||||
complement:(entrega.end.comp||'').trim(), district:entrega.end.bairro.trim(),
|
complement:(entrega.end.comp||'').trim(), district:entrega.end.bairro.trim(),
|
||||||
city:entrega.end.cidade.trim(), state:entrega.end.uf.trim().toUpperCase(), postal_code:entrega.cep};
|
city:entrega.end.cidade.trim(), state:entrega.end.uf.trim().toUpperCase(), postal_code:entrega.cep};
|
||||||
|
// Tempo de envio antes de medir a internet de quem compra: uma faixa entre um
|
||||||
|
// upload lento (10 Mbps) e um rápido (150 Mbps). O arquivo vai direto para o
|
||||||
|
// armazenamento, então é o upload do cliente que manda.
|
||||||
|
const ENVIO_LENTO=10e6/8, ENVIO_RAPIDO=150e6/8, ENVIO_AVISA_S=120;
|
||||||
|
const duracao=s=>{
|
||||||
|
const min=Math.ceil(s/60);
|
||||||
|
return s<60 ? 'menos de 1 min' : min<60 ? min+' min' : Math.floor(min/60)+' h'+(min%60? ' '+min%60+' min' : '');
|
||||||
|
};
|
||||||
|
const faixaEnvio=bytes=>'de '+duracao(bytes/ENVIO_RAPIDO)+' a '+duracao(bytes/ENVIO_LENTO);
|
||||||
|
function pintaAvisoEnvio(){
|
||||||
|
const el=$('avisoEnvio'); if(!el) return;
|
||||||
|
const total=(ehFolha()?folhas:artes).reduce((t,x)=>t+(x.f?.size||0),0);
|
||||||
|
el.hidden = total/ENVIO_LENTO < ENVIO_AVISA_S;
|
||||||
|
if(el.hidden) return;
|
||||||
|
el.innerHTML='<b>O envio '+((ehFolha()?folhas:artes).length>1?'destes arquivos':'deste arquivo')+
|
||||||
|
' ('+fmt(total)+') leva '+faixaEnvio(total)+'</b>, conforme a velocidade de upload da sua internet. '+
|
||||||
|
'Ele começa quando você coloca o item no carrinho e continua enquanto você preenche os dados. '+
|
||||||
|
'<b>Mantenha a página aberta até terminar.</b>';
|
||||||
|
}
|
||||||
const larguraFilme=()=>MODOS[modo].larg;
|
const larguraFilme=()=>MODOS[modo].larg;
|
||||||
// cobrança proporcional: arredonda para cima em 10 cm · 2,75 m vira 2,80 m
|
// cobrança proporcional: arredonda para cima em 10 cm · 2,75 m vira 2,80 m
|
||||||
const cobrar=m=>Math.max(MINIMO_M, Math.ceil(m*10)/10);
|
const cobrar=m=>Math.max(MINIMO_M, Math.ceil(m*10)/10);
|
||||||
|
|||||||
@@ -406,6 +406,7 @@ function detalhesDaFolha(a,i,aberto){
|
|||||||
}
|
}
|
||||||
function pintaFolha(){
|
function pintaFolha(){
|
||||||
invalidaItemAtual();
|
invalidaItemAtual();
|
||||||
|
pintaAvisoEnvio();
|
||||||
const L=larguraFilme();
|
const L=larguraFilme();
|
||||||
pintaTipoEnvio(); // trava o seletor enquanto houver folha
|
pintaTipoEnvio(); // trava o seletor enquanto houver folha
|
||||||
$('zona').classList.toggle('compacta', folhas.length>0);
|
$('zona').classList.toggle('compacta', folhas.length>0);
|
||||||
@@ -528,6 +529,7 @@ function pintaProgressoArte(a){
|
|||||||
}
|
}
|
||||||
function pintaArtes(){
|
function pintaArtes(){
|
||||||
invalidaItemAtual();
|
invalidaItemAtual();
|
||||||
|
pintaAvisoEnvio();
|
||||||
$('zona').classList.toggle('compacta', artes.length>0);
|
$('zona').classList.toggle('compacta', artes.length>0);
|
||||||
// The same card as a finished sheet: thumbnail, size, a DPI chip, then the
|
// The same card as a finished sheet: thumbnail, size, a DPI chip, then the
|
||||||
// width (with the usual sizes), copies, rotation and mirroring.
|
// width (with the usual sizes), copies, rotation and mirroring.
|
||||||
|
|||||||
@@ -332,6 +332,8 @@ section+section{border-top:0}
|
|||||||
/* The payment pages: paying on the left, the order summary on the right */
|
/* The payment pages: paying on the left, the order summary on the right */
|
||||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
||||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
||||||
|
.avisoEnvio{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--aviso-fundo);color:#5A3A00;font-size:13px;line-height:1.5}
|
||||||
|
.avisoEnvio[hidden]{display:none}
|
||||||
.envioArq{font-size:13px;color:var(--texto2);margin-top:14px;line-height:1.5}
|
.envioArq{font-size:13px;color:var(--texto2);margin-top:14px;line-height:1.5}
|
||||||
.envioArq.ok{color:var(--verde)}
|
.envioArq.ok{color:var(--verde)}
|
||||||
.envioArq.erro{color:#B42318}
|
.envioArq.erro{color:#B42318}
|
||||||
|
|||||||
Reference in New Issue
Block a user