diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1fc61b4..e845609 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,21 +7,6 @@ export default class Footer { async init() { await this.selectors(); - this.verificaPag(); - // await this.onUpdate(); - this.addProdutos(); - this.entregaCarrinho(); - this.unidadeCarrinho(); - this.creatPaymentsIcons(); - this.creatVtexIconPci(); - this.creatDevIconsM3(); - await this.addCarrossel(); - await this.verificaOnload(); - } - - async selectors() { - this.checkoutVazio = await waitElement(".empty-cart-content"); - this.divPrateleira = await waitElement('.footerCheckout__prateleira'); this.tituloPrateleira = await waitElement('#cart-title') this.payments = await waitElement('.footerCheckout__payments'); this.vtexIconPci = await waitElement('.footerCheckout__vtexpci'); @@ -29,12 +14,28 @@ export default class Footer { this.continuarComprando = await waitElement('.empty-cart-links'); this.entrega = await waitElement('.shipping-date'); this.unidade = await waitElement('.product-price'); + this.creatPaymentsIcons(); + this.addProdutos(); + this.verificaPag(); + this.creatVtexIconPci(); + this.creatDevIconsM3(); + this.entregaCarrinho(); + await this.verificaOnload(); + this.unidadeCarrinho(); + await this.addCarrossel(); + } + + async selectors() { + this.checkoutVazio = await waitElement(".empty-cart-content"); + this.divPrateleira = await waitElement('.footerCheckout__prateleira'); } async verificaOnload () { - window.addEventListener('load', this.onUpdat()) + window.addEventListener('load', () => { + this.onUpdate(); + }) }; async onUpdate() { @@ -59,19 +60,19 @@ export default class Footer { if(window.location.hash == '#/cart') { this.requestApi(); } - } else { + else { this.divPrateleira.innerHTML= ``; } + } window.addEventListener('hashchange',() => { if(this.checkoutVazio.attributes.style.nodeValue === 'display: none;') { if(window.location.hash == '#/cart') { this.requestApi(); } - } else if (window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') { - this.divPrateleira.innerHTML= ``; - }else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") { + } else { this.divPrateleira.innerHTML= ``; } + })}; diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 8d34599..f4a4828 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,7 +4,6 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); - this.progressBarHTML(); } async init() { @@ -43,7 +42,6 @@ export default class Header { this.progressBar.innerHTML = ``; } }; - async progressBarActive () { if (this.progressBar && window.screen.width > 1024) { const progressBarLi = document.querySelectorAll('#progressBar ul li') diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 04b25e6..cd2f891 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -45,14 +45,15 @@ } .icon-lock { - right: 0; + right: -1; } .client-email { margin: 0 0 16px; width: 562px; input { - width: 443px; + max-width: 562px; + width: 100%; height: 50px; box-shadow: none; color: $color-black-500; @@ -60,7 +61,7 @@ padding: 0 16px; border: 1px solid $color-black-500; box-sizing: border-box; - border-radius: 5px 0px 0px 5px; + border-radius: 5px 9px 9px 5px; font-size: 12px; font-weight: 400; line-height: 16px; @@ -159,21 +160,26 @@ .payment-data, .client-profile-data { .client-profile-data { - max-width: 331px; - height: 459px; - width: 100%; - + .checkout-container { + padding: 24px 17px 36px; + } .collapsed { + .icon-user { display: none; - span { - font-size: 0; - } - .icon-user { - display: none; + } + #edit-shipping-data { + .icon-edit { + &::after { + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + } } } } - label { margin-bottom: 0; } @@ -181,53 +187,26 @@ border-radius: 8px; border: 1px solid $color-gray3; font-family: $font-family; - padding: 24px 16px 0; + padding: 17px 17px 44px 17px; - .accordion-heading { + .icon-credit-card { + display: none; + } - .accordion-toggle-active { - i::after { - content: ''; - } - } - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - font-family: $font-family-secundary; + .icon-home { + display: none; + } - i::before { - content: ''; - } - - i::after { - background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png%22'); - background-repeat: no-repeat; - background-size: 100% 100%; - width: 20px; - height: 20px; - display: block; - content: ''; - float: right; - } - } - - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - opacity: 0; - } - - - - } + span { + font-size: 17px; + line-height: 14px; + } + .accordion-toggle { + font-weight: 400; + font-size: 16px; + line-height: 20px; + } .accordion-inner { padding: 0; @@ -244,25 +223,16 @@ .client-notice { - color: $color-black; + color: $color-black; margin-bottom: 26px; font-size: 0px !important; - - &::before { - content: 'Identificação'; - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 19px; - } } p { margin-top: 12px; margin-bottom: 0; label { - color: $color-black; + color: $color-black; font-weight: 500; margin-bottom: 0; } @@ -282,12 +252,11 @@ border-radius: 0; border: 1px solid $color-gray4; box-shadow: none; - width: 18px; - height: 18px; } .help.error { - color: red; + color: red; + margin-left: 0 !important; } } @@ -307,31 +276,24 @@ } #client-email { - width: 297px; - height: 42px; - padding: 0 6px; + padding: 13px 6px; border-radius: 5px; border: 1px solid $color-gray9; } #client-last-name, #client-first-name { - padding: 0 6px; - width: 141px; - height: 42px; + padding: 13px 6px; + border: 1px solid $color-gray9; border-radius: 5px; } #client-document { - padding: 0 6px; - width: 142.06px; - height: 44px; + padding: 13px 6px; border: 1px solid $color-gray9; border-radius: 5px; } #client-phone { - padding: 0 6px; - width: 142.06px; - height: 44px; + padding: 13px 6px; border: 1px solid $color-gray9; border-radius: 5px; @@ -366,10 +328,10 @@ display: flex; align-items: center; justify-content: center; - margin: 44px 0; + margin-top: 44px; + margin-bottom: 0 !important; #go-to-shipping { width: 100%; - height: 42px; font-family: $font-family; font-style: normal; font-weight: 700; @@ -378,7 +340,7 @@ text-transform: uppercase; background-color: $color-blue-200; color: $color-white; - margin: 0; + margin: 0 !important; } } @@ -387,13 +349,13 @@ display: none; .link a#is-corporate-client, .link a#not-corporate-client { - font-weight: 500; + font-weight: 500; text-decoration: underline; } } .state-inscription-box span { - font-weight: 500; + font-weight: 500; } button.submit { @@ -405,72 +367,108 @@ transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($color-black, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-black, 5); } } /* Shipping configurations */ .ship-postalCode small a { - color: #303030; + color: #303030; font-weight: 500; text-decoration: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + color: #303030; font-size: 14px; font-weight: 500; } .shp-lean { - border: 1px solid $color-gray4; + border: 1px solid $color-gray4; border-radius: 0; label { - background-color: $color-white; + background-color: $color-white; box-shadow: none; color: #303030; padding: 8px 12px; svg path { - fill: #d8c8ac; + fill: #d8c8ac; } } } } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + margin-bottom: 11px; } + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + } .shp-summary-group-info { - border-color: $color-gray4; + border-color: $color-gray4; } + .vtex-omnishipping-1-x-SummaryItemContent { + align-items: end; + .address-summary { + background: none; + padding: 0; + } + .shp-summary-package { + padding: 0; + } + .shipping-data { + padding: 24px 16px 36px; + } + } + .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; + border-color: $color-gray9; + border-radius: 8px; color: #303030; - padding: 12px; + padding: 15px 11px 15px 43px; + background-image: url('https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png'); + background-position: 10px 22px; + background-size: 24px 24px; + background-repeat: no-repeat; @include mq(md, max) { - background-position: 8px 9px; + background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-blue-200; } + + span { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } } .shp-summary-group-price, @@ -489,23 +487,18 @@ .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; + background-color: #d8c8ac; border: 1px solid #d8c8ac; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + text-shadow: 1.3px 1px lighten($color-black, 50); } } } } - .Items { - border-bottom: 1px solid $color-gray4; - } - .info { - border-bottom: 1px solid $color-gray4; - } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 19e2fd7..0de7f7c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -12,32 +12,63 @@ .item-unit-label { display: none; } - .cart { - border-bottom: 1px solid $color-gray9; - border-radius: 0; - @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; + .cart-template-holder { + .cart { + @include mq(md, max) { + margin: 0px 0 25px 0; + } + border: 1px solid $color-gray3; + border-radius: 5px; + padding: 16px; + + .cart-items { + thead { + tr { + th { + padding-bottom: 17px !important; + } + } + } + + tbody { + tr { + display: contents; + padding: 0; + td { + padding: 0; + a { + .item-link-remove { + padding: 0; + } + } + } + } + } + } + } } .cart-fixed.affix { position: relative !important; } .cart-fixed { + height: 0 !important; font-family: $font-family; width: 100%; - border: 1px solid #E5E5E5; border-radius: 8px; max-width: 331px; - width: 100%; h2 { + padding: 24px 17px; background: $color-white; border: none; color: #303030; font-size: 14px; font-weight: 500; + text-align: initial; + border-top: 1px solid $color-gray9; + border-left: 1px solid $color-gray9; + border-right: 1px solid $color-gray9; + border-radius: 8px 8px 0 0; } .item-unavailable { @@ -49,11 +80,52 @@ } .cart { + padding: 0; + border-left: 1px solid $color-gray9; + border-right: 1px solid $color-gray9; + border-radius: 0; + display: flex; + padding: 0 17px; + + .description { + margin-left: 53px; + + span { + display: none; + } + + strong { + margin-right: 0; + margin-bottom: 23px; + } + } + + .badge { + display: none; + } + + .product-name { + max-width: 115px; + width: 100%; + white-space: pre-line; + } + ul li { + display: flex; + align-items: center; + margin: 0 !important; border-top: none; margin-top: 0; padding-top: 0; + img { + width: 60px; + } + + .product-name { + margin-left: 7px !important; + } + &:not(:first-child) { margin-top: 8px; padding-top: 8px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..c2e6466 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,11 +1,407 @@ body .container-main.container-order-form .orderform-template.active { .mini-cart { - width: 32.3242%; + max-width: 331px; + width: 100%; margin-left: unset; margin-right: 0; float: right; + + .summary-template-holder { + padding: 0px !important; + } + + tfoot { + border-top: 1px solid $color-gray9; + } + #go-to-cart-button { + border-right: 1px solid $color-gray9; + border-left: 1px solid $color-gray9; + width: 94.3%; + max-width: 329px; + text-align: end; + margin: auto; + padding: 19px 17px 10px 0; + } + + .table { + border: 1px solid $color-gray9; + border-radius: 0 0 8px 8px; + display: flex; + flex-direction: column; + tr { + .Items { + display: flex; + align-items: center; + justify-content: space-between; + } + + .info { + padding: 25px 142px 25px 17px; + width: 62px; + } + + .Discounts { + display: flex; + align-items: center; + } + + .monetary { + padding: 25px 17px; + } + } + + } + } .orderform-template-holder { width: 66.1132%; + + .client-profile-data { + .filled { + padding: 24px 17px 36px !important; + } + .box-info { + p { + span { + margin-left: 0; + } + + } + } + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 17px 17px 44px 17px; + .accordion-heading { + .accordion-toggle { + &::after { + content: 'Identificação'; + font-size: 16px; + } + } + span { + font-size: 0; + color: $color-black-500; + margin-bottom: 8px; + padding: 0; + + i::before { + display: none; + fill: $color-black-500; + } + } + + a { + align-items: center; + background-color: transparent; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 0; + + &::after { + background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png'); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + + img { + width: 20px; + height: 20px; + } + } + + } + } + } + + .shipping-data { + padding: 24px 16px 36px; + .accordion-group { + .accordion-heading { + span { + color: $color-black-500; + margin-bottom: 8px; + padding: 0; + + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + i::after { + display: none; + fill: $color-black-500; + } + } + a { + align-items: center; + background-color: $color-black-500; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + background: transparent; + box-shadow: none; + + .icon-edit { + &::before { + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + } + + } + } + + #postalCode-finished-loading { + border-radius: 100px; + div { + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + border: 1px solid $color-white1; + } + + .shp-method-option-active { + border: 1px solid $color-black; + background-color: $color-white; + border-radius: 100px; + color: $color-black ; + text-shadow: none; + } + } + + } + + .vtex-omnishipping-1-x-SummaryItemGroup { + padding: 0; + } + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + .ship-postalCode { + display: flex; + flex-direction: column; + label { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + input { + max-width: 100%; + width: 97%; + height: 45px; + border: 1px solid $color-gray7; + border-radius: 8px; + } + small { + margin-top: 10px; + margin-left: 0 !important; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + } + } + } + + .vtex-omnishipping-1-x-address { + div { + display: flex; + flex-direction: column; + + .ship-number, .ship-complement, .ship-receiverName{ + width: 100%; + label { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + margin-bottom: 3px; + } + input { + border: 1px solid #E0E0E0; + border-radius: 8px; + width: 95%; + padding: 6px 6px; + + &::placeholder { + color: $color-gray2; + } + } + } + } + } + + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-shippingSectionTitle { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + margin-bottom: 11px; + } + + #delivery-packages-options { + border: 1px solid $color-gray9 !important; + border-radius: 8px !important; + + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray9; + div { + span { + font-family: $font-family !important; + font-style: normal !important; + font-weight: 400 !important; + font-size: 12px !important; + line-height: 16px !important; + color: $color-gray2 !important; + } + } + } + div { + color: $color-gray2; + } + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: $color-gray11; + svg { + height: 12px; + width: 12px; + background-color: $color-blue-200; + border-radius: 3px; + } + } + label { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + .shp-option-icon { + border: 1px solid $color-gray7; + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 3px; + + svg { + path { + display: none; + } + } + } + } + } + + .box-step { + .btn-go-to-payment { + width: 100%; + border-radius: 8px; + background-color: $color-blue-200; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + + + &:hover { + background-color: $color-blue-100; + } + } + .box-step-content { + form { + .link-gift-card { + display: none; + } + } + } + } + + .btn-submit-wrapper { + #go-to-shipping { + width: 100%; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + background-color: #00c8ff; + color: #fff; + margin: 0 !important; + } + } + } + + .payment-data { + .accordion-group { + padding: 24px 17px 29px; + .accordion-heading { + span { + color: $color-black-500; + margin-bottom: 8px; + padding: 0; + + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + transition: all 5s ease-in-out; + } + + a { + align-items: center; + background: transparent; + border: none; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + box-shadow: none; + + .icon-edit { + &::before { + background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png'); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + } + } + } + } + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index fcd3285..7b6e5ca 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $color-black: #292929; $color-black-500: #000000; $color-white: #fff; +$color-white1: #f5f5f5; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; @@ -20,6 +21,7 @@ $color-gray7: #c4c4c4; $color-gray8: #2e2d2d; $color-gray9: #E0E0E0; $color-gray10: #808080; +$color-gray11:#F2F2F2; $color-blue-100: #6fd5f2; $color-blue-200: #00C8FF;