feat: give payment its own page
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 2m12s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m35s

The PIX and card choices appeared under the cart, on the same page as the
customer's details. "Ir para o pagamento" now sends the order and opens
/pagamento, step 3 of the progress bar: the server's order summary, then PIX
or card, each opening below. The cart keeps only the sending progress and its
errors; a changed cart is sent again instead of offering the old quote.
Portal links open the payment page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-28 11:45:44 -03:00
parent 536510b148
commit 43043c361c
9 changed files with 113 additions and 40 deletions

View File

@@ -15,7 +15,8 @@ h1,h2,h3,h4{font-family:"Inter",sans-serif}
/* Pages (site-pages.js): the home, a product page and the cart show only their own parts. */
html[data-rota="inicio"] :is(#passos,#foco,#qual,#prev,#carr,.checkout,#carrVazio),
html[data-rota="produto"] :is(.hero2,.etapas2,#cards,#carr,.checkout,#carrVazio,#info),
html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info){display:none!important}
html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,.pagCab,.pagResumo){display:none!important}
html[data-rota="pagamento"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,#carr,#carrVazio,#desfazer){display:none!important}
html[data-sem-itens] #carr{display:none!important}
html:not([data-rota="inicio"]) #envio{padding-top:0;padding-bottom:64px;min-height:70vh}
#envio,#foco,#qual,#prev,#checkoutStatus{scroll-margin-top:var(--topo-passos,128px)}
@@ -225,6 +226,19 @@ section+section{border-top:0}
#checkoutActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
#checkoutActions button{height:48px!important;padding:0 20px!important;margin:0!important;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px}
#checkoutActions input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
/* The payment page */
html[data-rota="pagamento"] .checkout{margin-top:8px}
.pagCab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.pagCab h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
.pagVolta{font-size:14px;color:var(--texto2)}
.pagResumo{border:1px solid var(--linha);border-radius:16px;background:#fff;padding:18px 20px;margin-bottom:16px}
.pagResumo .l{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
.pagResumo .l span{color:var(--texto2)}
.pagResumo .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #EFEFEF;margin-top:10px;padding-top:12px}
.pagResumo .tot b{font-size:26px}
#checkoutActions .metodo{background:#fff;border:2px solid var(--linha);color:var(--preto);min-width:180px}
#checkoutActions .metodo[aria-pressed="true"]{border-color:var(--laranja);background:var(--aviso-fundo)}
#checkoutActions .area{flex-basis:100%}
/* Price and benefits */
.info2{background:var(--cinza);padding:64px 0}