Meus pedidos DTF
Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.
-
-
-
-
-
Minha conta
0Carrinho
diff --git a/web/portal.css b/web/portal.css
new file mode 100644
index 0000000..483f922
--- /dev/null
+++ b/web/portal.css
@@ -0,0 +1,116 @@
+/* Meus pedidos: the Site's look (tokens and shell from site-shell.css and
+ site-v2.css) for the order page. */
+[hidden]{display:none!important}
+body{background:var(--cinza)}
+.topo .acts a[aria-current="page"]{color:var(--laranja-escuro)}
+.ped{padding-top:26px;padding-bottom:64px;min-height:70vh}
+.volta{display:inline-block;margin-bottom:14px;font-size:15px;color:var(--texto2);text-decoration:none}
+.volta:hover{color:var(--laranja-escuro)}
+.pedCab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
+.pedCab h1{font-size:34px;font-weight:800;margin-top:4px}
+.conta{margin-top:6px;font-size:15px;color:var(--fraco)}
+.conta:empty{display:none}
+.pedAcoes{display:flex;gap:10px}
+.pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px}
+.pedMsg{margin-bottom:14px;font-size:15px;color:var(--laranja-escuro)}
+.pedMsg:empty{display:none}
+
+/* Buttons, as on the Site. */
+.bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
+.bPri:hover:not(:disabled){background:#FFB53D}
+.bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer}
+.bSec:hover:not(:disabled){border-color:var(--preto)}
+.bSec .ic{width:18px;height:18px}
+.bLink{margin-top:14px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
+button:disabled{opacity:.6;cursor:default}
+
+/* Sign in / create account. */
+.acesso{margin-bottom:26px}
+.acessoIntro{margin-bottom:12px;font-size:15px;color:var(--texto2)}
+.acessoIntro:empty{display:none}
+.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
+.bloco{display:flex;flex-direction:column;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
+.bloco h2{font-size:21px;font-weight:800}
+.bloco .nota2{margin:4px 0 12px;font-size:14.5px;color:var(--fraco)}
+.bloco label,.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
+.bloco label .obs{font-weight:400;color:var(--fraco)}
+.bloco input,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff}
+.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
+.bloco input:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
+.bloco .bPri{margin-top:16px}
+.bloco .nota2:last-child{margin:12px 0 0}
+.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
+.duas>div{display:flex;flex-direction:column}
+
+/* Orders. */
+.grupo{margin-bottom:22px}
+.grupo:empty{display:none}
+.tituloGrupo{margin-bottom:12px;font-size:20px;font-weight:800}
+.pedido{margin-bottom:14px;padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
+.pedido.pendente{border-color:var(--aviso-linha)}
+.pedido.correcao{border-color:#F3B7A9}
+.pedTopo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.pedTopo>div{flex:1;min-width:160px}
+.pedTopo h3{font-size:19px;font-weight:800}
+.pedTopo .data{font-size:14.5px;color:var(--fraco)}
+.pedTopo .valor{font-family:"Inter",sans-serif;font-size:19px;font-weight:800}
+.pedido.pendente .bPri{margin-top:14px}
+.pedido .nota2{margin-top:10px;font-size:15px;color:var(--fraco)}
+.estado{padding:5px 11px;border-radius:999px;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
+.est-fin{background:var(--verde-fundo);color:var(--verde)}
+.est-cor{background:#FDE8E6;color:#B42318}
+.est-imp,.est-fil,.est-tra,.est-rec{background:var(--aviso-fundo);color:var(--laranja-escuro)}
+
+/* Progress through production. */
+.trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0}
+.trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)}
+.trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0}
+.trilha li:first-child::before{display:none}
+.trilha li.feito::before,.trilha li.atual::before{background:var(--verde)}
+.trilha .marca{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #D0D0D0;background:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:14px}
+.trilha .marca .ic{width:16px;height:16px;stroke-width:3}
+.trilha li.feito{color:var(--verde)}
+.trilha li.feito .marca{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
+.trilha li.atual{color:var(--preto)}
+.trilha li.atual .marca{background:var(--laranja);border-color:var(--laranja)}
+.trilha b{font-weight:600}
+.trilha li.atual b{font-weight:800}
+.pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px}
+.pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318}
+
+.itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)}
+.itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
+.itensPed .nome{flex:1;font-weight:600}
+.itensPed .qt{color:var(--fraco)}
+.itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif}
+.itensPed .frete .nome{font-weight:400;color:var(--texto2)}
+.entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)}
+.entregaPed .ic{width:19px;height:19px;color:var(--laranja-escuro)}
+
+/* Details. */
+.detalhe:empty{display:none}
+.detalhe{margin-top:14px;padding-top:4px;border-top:1px dashed var(--linha)}
+.secao{margin-top:14px}
+.secao h4{margin-bottom:8px;font-size:16px;font-weight:800}
+.historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)}
+.historico li{position:relative;padding:0 0 12px 12px;font-size:15px}
+.historico li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--laranja)}
+.historico li b{margin-right:8px}
+.historico li span{color:var(--fraco)}
+.historico .motivo{margin-top:4px;padding:8px 10px;border-radius:8px;background:#FDE8E6;font-size:14.5px}
+.arquivo{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)}
+.arquivo>div{flex:1;min-width:0;display:flex;flex-direction:column}
+.arquivo b{overflow-wrap:anywhere;font-size:15px}
+.arquivo span{font-size:14px;color:var(--fraco)}
+.correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)}
+.correcaoForm input[type=file]{font-size:15px}
+.correcaoForm .bPri{margin-top:14px;align-self:flex-start}
+
+.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;border:1px dashed #D6D6D6;border-radius:var(--raio);background:#fff;font-size:16px;color:var(--texto2)}
+
+@media (max-width:600px){
+ .pedCab h1{font-size:28px}
+ .trilha b{font-size:12.5px}
+ .duas{grid-template-columns:1fr}
+ .pedido{padding:16px}
+}
diff --git a/web/portal.html b/web/portal.html
index 6e8ab8b..5b64e7c 100644
--- a/web/portal.html
+++ b/web/portal.html
@@ -1,11 +1,102 @@
-Dropstar · Meus pedidos DTF
-
-DROPSTAREnviar arteMinha conta · DTF
-
-
-
- Meus pedidos · DTF Dropstar
+
+
+
+
+
+
+
+
+
+
+ ‹ Enviar outra arte
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/portal.js b/web/portal.js
index 59085b2..9a85c7f 100644
--- a/web/portal.js
+++ b/web/portal.js
@@ -1,62 +1,168 @@
+/* Meus pedidos: the customer's orders, their progress and files, sign-in and
+ the artwork correction the team may ask for. */
const $=id=>document.getElementById(id);
-const node=(tag,text)=>{const el=document.createElement(tag);if(text!==undefined)el.textContent=text;return el;};
+const node=(tag,text,className)=>{const el=document.createElement(tag);if(text!==undefined&&text!==null)el.textContent=text;if(className)el.className=className;return el;};
const money=c=>(c/100).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
+const quando=d=>new Date(d).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'});
+const dia=d=>new Date(d).toLocaleDateString('pt-BR');
+const metros=m=>Number(m).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})+' m';
+// Lucide shapes (ISC licence), the same as on the Site.
+const ICONES={
+ baixar:'details(order.id,content)),content);$('orders').append(card);
- if(new URLSearchParams(location.search).get('order')===order.id)await details(order.id,content);
+ const card=node('article',null,'pedido'+(order.state==='cor'?' correcao':''));card.id='order-'+order.id;
+ const topo=node('div',null,'pedTopo');
+ const nome=node('div');nome.append(node('h3','Pedido #'+order.number),node('span',quando(order.created_at),'data'));
+ topo.append(nome,node('span',states[order.state],'estado est-'+order.state),node('b',money(order.snapshot.total_cents)+(environment==='local'?' · teste':''),'valor'));
+ card.append(topo);
+ if(order.state==='cor'){
+ const p=node('p',null,'pedAlerta');p.append(icone('alerta'),node('span','A equipe precisa de uma correção na sua arte. Abra os detalhes para ver o motivo e enviar o arquivo corrigido.'));
+ card.append(p);
+ }else card.append(trilha(order.state));
+ card.append(itens(order.snapshot),entrega(order.snapshot));
+ const content=node('div',null,'detalhe');
+ const ver=button('Ver detalhes e arquivos',async()=>{
+ if(content.childElementCount){content.replaceChildren();ver.textContent='Ver detalhes e arquivos';return;}
+ await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes';
+ },'bLink');
+ card.append(ver,content);orders.append(card);
+ if(aberto===order.id){await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes';card.scrollIntoView({block:'start'});}
}
- }catch(error){$('message').textContent=error.message;}
+ }catch(error){aviso(error.message);}
}
-async function details(id,container){
+
+async function details(id,container,criado){
const order=await api('/customer/orders/'+id);container.replaceChildren();
- for(const [i,item] of order.snapshot.items.entries())container.append(node('p',(i+1)+'. '+item.mode+' · '+item.billed_metres+' m · nota '+item.grade+' · '+money(item.total_cents)));
- const history=node('ol');
- for(const h of order.history)history.append(node('li',new Date(h.created_at).toLocaleString('pt-BR')+' · '+states[h.to_state]+(h.reason?' — '+h.reason:'')));
- container.append(history);
- for(const file of order.files){
- const row=node('p',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+file.name+' · '+(file.expired?'expirado':!file.active?'substituído':'disponível até '+new Date(file.expires_at).toLocaleDateString('pt-BR')));
- if(file.active&&!file.expired)row.append(button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();}));
- container.append(row);
+ const hist=node('div',null,'secao');hist.append(node('h4','Andamento'));
+ const ol=node('ol',null,'historico');
+ // Payment is where the order starts: the first step is not a movement.
+ if(criado){const li=node('li');li.append(node('b',states.rec||'Arte recebida'),node('span',quando(criado)));ol.append(li);}
+ for(const h of order.history){
+ const li=node('li');li.append(node('b',states[h.to_state]),node('span',quando(h.created_at)));
+ if(h.reason)li.append(node('p',h.reason,'motivo'));
+ ol.append(li);
+ }
+ hist.append(ol);container.append(hist);
+ if(order.files.length){
+ const arq=node('div',null,'secao');arq.append(node('h4','Arquivos'));
+ for(const file of order.files){
+ const row=node('div',null,'arquivo');
+ const info=node('div');
+ info.append(node('b',file.name),node('span',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+
+ (file.expired?'expirado':!file.active?'substituído':'disponível até '+dia(file.expires_at))));
+ row.append(info);
+ if(file.active&&!file.expired){
+ const b=button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();});
+ b.prepend(icone('baixar'));row.append(b);
+ }
+ arq.append(row);
+ }
+ container.append(arq);
}
if(order.state==='cor'){
- const form=node('form');form.append(node('h3','Enviar arte corrigida'));
- const inputs=order.snapshot.items.map((item,index)=>{const label=node('label','Item '+(index+1)+' · '+item.mode);const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index;label.append(input);form.append(label);return input;});
- const note=node('textarea');note.placeholder='Descreva a correção';note.required=true;note.maxLength=1000;form.append(note);
- const submit=node('button','Enviar correção');submit.type='submit';form.append(submit);
+ const form=node('form',null,'secao correcaoForm');form.append(node('h4','Enviar arte corrigida'));
+ const inputs=order.snapshot.items.map((item,index)=>{
+ const label=node('label',(index+1)+'. '+(PRODUTO[item.mode]||item.mode));
+ const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index;
+ form.append(label,input);return input;
+ });
+ const nl=node('label','O que foi corrigido');const note=node('textarea');note.required=true;note.maxLength=1000;note.rows=3;
+ form.append(nl,note);
+ const submit=node('button','Enviar correção','bPri');submit.type='submit';form.append(submit);
form.onsubmit=async event=>{event.preventDefault();submit.disabled=true;try{
- const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>$('message').textContent=text})});
+ const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>aviso(text)})});
if(!files.length)throw new Error('Selecione pelo menos um arquivo corrigido.');
await api('/customer/orders/'+id+'/corrections',{version:order.version,files,note:note.value});
- $('message').textContent='Correção enviada. Aguarde a conferência da equipe.';await details(id,container);
- }catch(error){$('message').textContent=error.message;}finally{submit.disabled=false;}};
+ aviso('Correção enviada. Aguarde a conferência da equipe.');await details(id,container,criado);
+ }catch(error){aviso(error.message);}finally{submit.disabled=false;}};
container.append(form);
}
}
+
async function migrateGuestCart(previous,next){
if(previous===next)return;
const database=await new Promise((resolve,reject)=>{const r=indexedDB.open('dtf-local-cart',1);r.onupgradeneeded=()=>r.result.createObjectStore('cart');r.onsuccess=()=>resolve(r.result);r.onerror=()=>reject(r.error);});
@@ -65,13 +171,13 @@ async function migrateGuestCart(previous,next){
}
async function authenticate(path,body){
const previous=scope,guest=!(await api('/account/me')).customer;
- await api(path,body);forgetCheckout();$('message').textContent='Acesso confirmado.';
+ await api(path,body);forgetCheckout();aviso('Acesso confirmado.');
const next=(await api('/session')).cart_scope;
- if(guest)try{await migrateGuestCart(previous,next);}catch{$('message').textContent='Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.';}
+ if(guest)try{await migrateGuestCart(previous,next);}catch{aviso('Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.');}
await load();$('password').value='';$('register-password').value='';
}
-$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){$('message').textContent=e.message;}};
-$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){$('message').textContent=e.message;}};
-$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){$('message').textContent='Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.';}};
+$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){aviso(e.message);}};
+$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){aviso(e.message);}};
+$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){aviso('Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.');}};
$('refresh').onclick=load;
load();
diff --git a/web/site-config.js b/web/site-config.js
index 4220a1d..7cea92e 100644
--- a/web/site-config.js
+++ b/web/site-config.js
@@ -8,7 +8,6 @@ const rs=v=>'R$ '+v.toFixed(2).replace('.',',');
// Ícones (Lucide, licença ISC) desenhados no próprio HTML: nada a carregar, e a
// cor vem do texto em volta. Os que ficam no HTML estático são os mesmos.
const ICONES={
- busca:'
+ ENVIE SEU ARQUIVO DTF PELO SITE · DTF TÊXTIL COM O MENOR PREÇO DO METRO EM FRANCA-SP
+
+
+
+
+
+
+ Minha conta
+ Carrinho
+
+
+
+
+
+ DTF Dropstar
+Meus pedidos
+ +
+
+
+
+ Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.
+ + +
+
+
+
+