diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index c8162e9..db61af1 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -3,10 +3,11 @@ import { Container } from "m3-utils"; import "slick-carousel"; import Header from "./components/Header"; import Footer from "./components/Footer"; +import Content from "./components/CheckoutContent"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer], + components: [CheckoutUI, Header, Footer, Content], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/CheckoutContent.js b/checkout/src/arquivos/js/components/CheckoutContent.js new file mode 100644 index 0000000..c5c9907 --- /dev/null +++ b/checkout/src/arquivos/js/components/CheckoutContent.js @@ -0,0 +1,61 @@ +// import waitForEl from "../helpers/waitForEl"; +import { waitElement } from "m3-utils"; + +export default class Content { + constructor() { + this.init(); + } + + async init() { + await this.selectors(); + this.events(); + // this.CriaSpan(); + } + + async selectors() { + this.option = await waitElement(".shp-lean ", { + //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar + timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise + interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + }); + + this.btn = await waitElement(".btn-go-to-payment", { + //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar + timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise + interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + }); + console.log(this.btn); + + this.sumario = await waitElement(".shp-summary-package-time", { + //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar + timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise + interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + }); + console.log(this.sumario); + } + + events() { + this.btn.addEventListener("click", this.AdicionaSpan()); + } + + // CriaSpan() { + // this.sumario.innerHTML += ` + // + // `; + // console.log("criou"); + // } + + AdicionaSpan() { + if (this.option.children[0].classList.contains("shp-lean-option-active")) { + const span = document.createElement("span"); + span.classList.add("forma-entrega"); + span.innerHTML = this.option.children[0].children[2].children[0].textContent; + this.sumario.appendChild(span); + } else if (this.option.children[1].classList.contains("shp-lean-option-active")) { + const span = document.createElement("span"); + span.classList.add("forma-entrega"); + span.innerHTML = this.option.children[1].children[2].children[0].textContent; + this.sumario.appendChild(span); + } + } +} diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 8de4001..fde431d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -18,15 +18,21 @@ export default class Footer { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + + console.log(this.checkoutVazio); + this.titulo = await waitElement("#cart-title"); + this.payments = await waitElement(".footerCheckout__payments", { timeout: 5000, interval: 1000, }); + this.vtexIcon = await waitElement(".footerCheckout__stamps", { timeout: 5000, interval: 1000, }); + this.developed = await waitElement(".footerCheckout__developedBy", { timeout: 5000, interval: 1000, @@ -41,7 +47,7 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + console.log(mutation.attributeName); }); }); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 17b1140..c62637b 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -10,6 +10,7 @@ export default class Header { await this.selectors(); this.progressBarHTML(); await this.progressBarProgress(); + this.CriaSpan(); // console.log(this.item); } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 8804cd6..66b5dbf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -153,31 +153,56 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid #f0f0f0; + border-radius: 8px; font-family: $font-family; - padding: 16px; + padding: 24px 17px; .accordion-heading { + .link-box-edit { + outline: 0 !important; + border: 0 !important; + box-shadow: none !important; + } + + .icon-edit { + width: 21px; + height: 20px; + background: no-repeat + url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); + background-size: 20px 20px; + outline: 0; + + &::before { + content: ""; + } + } + span { - color: #303030; - margin-bottom: 8px; + margin-bottom: 25px; padding: 0; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; + i::before { fill: #303030; + display: none; } } a { align-items: center; - background-color: #303030; + background-color: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 9px 0 0 0; } } @@ -188,18 +213,24 @@ .client-notice { color: $color-black; + display: none; } p { + margin-bottom: 16px; label { - color: $color-black; - font-weight: 500; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #7d7d7d; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid #e0e0e0; + border-radius: 5px; box-shadow: none; } @@ -211,6 +242,7 @@ .box-client-info-pj { .link a#is-corporate-client, .link a#not-corporate-client { + display: none; color: $color-black; font-weight: 500; text-decoration: underline; @@ -221,13 +253,22 @@ font-weight: 500; } + p.submit { + margin-top: 45px; + } + button.submit { + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; + background: #00c8ff; + border-radius: 8px; outline: none; transition: all 0.2s linear; + width: 100%; &:hover { background: lighten($color-black, 5); @@ -258,43 +299,162 @@ border-radius: 0; label { - background-color: $color-white; box-shadow: none; - color: #303030; + color: #7d7d7d; padding: 8px 12px; svg path { fill: #d8c8ac; } } + + .vtex-omnishipping-1-x-leanShippingOption { + border-bottom: 1px solid #e0e0e0; + } + + .shp-lean-option-active { + background: #f2f2f2; + } + .vtex-omnishipping-1-x-leanShippingTextLabel { + color: #7d7d7d; + font-family: $font-family; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + } } } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: #7d7d7d; + margin-bottom: 11px; } .shp-summary-group-info { border-color: $color-gray4; } + .vtex-omnishipping-1-x-addressSummary { + border: 1px solid #e0e0e0; + border-radius: 8px; + max-height: 63px; + margin-bottom: 15px; + width: 100%; + position: relative; + + .address-summary-BRA { + padding: 15px 0 14px 40px; + &::before { + content: ""; + display: block; + background: no-repeat + url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-size: 21px 20px; + width: 21px; + height: 20px; + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + } + } + + .home-icon { + background: no-repeat + url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-size: 21px 20px; + width: 21px; + height: 20px; + padding: 0 9px 0 0; + } + } + .address-summary { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #7d7d7d; + background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + border: 0px; + padding: 0; @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; + color: #00c8ff; font-weight: 500; - text-decoration: underline; + padding: 0 13px 0 14px; + } + } + + .vtex-omnishipping-1-x-address { + margin-bottom: 0; + .coluna-complementos { + display: flex; + flex-direction: column; + + .input-mini, + .input-large, + .input-xlarge { + width: 100%; + max-width: 282px; + } + + .ship-number, + .ship-complement, + .ship-receiverName { + margin: 0 0 15px 0; + } + } + } + + .vtex-omnishipping-1-x-submitPaymentButton { + margin-bottom: 0; + } + + .vtex-omnishipping-1-x-leanShippingOption { + position: relative; + &::before { + content: ""; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + border-radius: 3px; + background: $color-white; + border: 1px solid #c4c4c4; + } + &::after { + content: ""; + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + width: 12px; + height: 12px; + border-radius: 3px; + background: #00c8ff; + opacity: 0; + transition: all 0.25s linear; + } + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + &::after { + content: ""; + opacity: 1; } } @@ -317,14 +477,492 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background: #ffffff; + border: 1px solid $color-black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color: #292929; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + color: #c4c4c4; + } + + .vtex-omnishipping-1-x-deliveryChannelsOption { + min-height: 36px; + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + + .ship-postalCode { + display: flex; + flex-direction: column; + margin-bottom: 9px; + + label { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 0; + line-height: 16px; + color: #7d7d7d; + } + + label::after { + content: "CEP:"; + font-size: 12px; + } + + .success { + height: 35px; + padding-right: 203px; + border: 1px solid #c4c4c4; + border-radius: 8px; + } + + small { + margin: 0; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + } + + .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: #7d7d7d; + } + + .vtex-omnishipping-1-x-leanShippingGroupList { + border: 1px solid #e0e0e0; + border-radius: 8px; + margin-bottom: 15px; + } + } + } + } + } + + .client-profile-data { + .accordion-group { + .accordion-heading { + .accordion-toggle { + margin-bottom: 25px; + span { + font-size: 0; + } + + i::before { + fill: #303030; + display: none; + } + + span::before { + content: "Identificação"; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } } } } } } + +.form-step.box-info { + display: flex; + flex-direction: column-reverse; + + span.email { + position: absolute; + top: 21px; + } + + p.client-profile-summary { + display: flex; + flex-direction: column; + gap: 6px; + } +} + +.newsletter { + margin-top: -8px; + margin-bottom: 0 !important; +} + +.box-client-info-pj { + display: none; +} + +.shipping-data { + position: relative; + + .vtex-omnishipping-1-x-SummaryItemGroup { + padding: 0; + } + + span.forma-entrega { + left: 18px !important; + + &::before { + display: none; + } + } + + .shp-summary-group-info { + border-right: 0; + + .street::after { + content: ", "; + } + + .number::after { + content: " - "; + } + + .postalCode { + position: absolute; + top: 68px; + left: 137px; + } + + .shp-summary-package-time { + span { + position: absolute; + left: 112px; + bottom: 61px; + + &::before { + content: " - "; + } + } + } + } + + .shp-summary-group-price { + position: absolute; + bottom: 61px; + left: 215px; + + &::before { + content: " - "; + } + } +} + +.link-gift-card { + display: none !important; +} + +.payment-group { + margin: 0; + + .payment-group-item { + display: flex; + justify-content: center; + align-items: center; + + background: #f0f0f0; + mix-blend-mode: normal; + border: 1px solid #000000; + border-radius: 6px; + margin: 0; + color: #58595b; + margin-bottom: 12px; + padding: 0 15px 0 8px; + height: 48px; + + &.active { + background: rgba(220, 221, 227, 0.3); + mix-blend-mode: normal; + border: 1px solid #f15a31; + border-radius: 6px; + color: #f15a31; + } + } + + .payment-group-item-text { + padding-right: 0; + } + + .pg-deposito, + .pg-transferencia-bancaria, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + .pg-money, + #payment-group-instantPaymentPaymentGroup, + #payment-group-PSEPaymentGroup, + .pg-desconto-em-folha, + #payment-group-MercadoPagoPaymentGroup, + #payment-group-SPEIPaymentGroup { + display: none; + } + + #payment-group-creditControlPaymentGroup { + span { + font-size: 0; + font-weight: 400; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &::before { + content: "Cartão de Débito"; + font-size: 14px; + } + } + } + + #payment-group-creditCardPaymentGroup, + #payment-group-bankInvoicePaymentGroup { + span { + background: none; + font-size: 14px; + font-weight: 400; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + } + } + + .pg-promisory---monica { + span { + font-size: 0; + font-weight: 400; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &::before { + content: "Boleto Faturado"; + font-size: 14px; + } + } + } + + #payment-group-bankInvoicePaymentGroup { + span { + font-size: 0; + font-weight: 400; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &::before { + content: "Boleto à Vista"; + font-size: 14px; + } + } + } +} + +a#payment-group-Bancolombia\ TransferPaymentGroup { + display: none; +} + +div#payments-title { + span.accordion-toggle.collapsed.accordion-toggle-active { + margin-bottom: 76px; + span { + &::after { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #7d7d7d; + position: absolute; + top: 27px; + left: 0px; + } + } + } +} + +div { + .steps-view { + width: 393px; + } +} + +div.cart-template.mini-cart.span4 { + border: 1px solid #e5e5e5; + border-radius: 8px; + max-height: 403px; + + .cart-fixed { + height: auto !important; + h2 { + text-align: left; + padding: 24px 0 34px 17px; + } + + div { + .cart { + border: none; + padding: 0 17px 19px 17px; + margin: 0; + + span.quantity.badge { + display: none; + } + + span.shipping-date.pull-left { + display: none; + } + + li { + display: flex; + align-items: center; + } + + span { + max-width: 115px; + white-space: initial; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #000000; + } + + img { + width: 60px; + height: 60px; + object-fit: cover; + } + + strong { + position: absolute; + right: 0; + margin: 0; + top: 50%; + transform: translateY(-50%); + font-family: $font-family; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #292929; + } + } + } + + p#go-to-cart-button { + margin: 0; + max-height: 16px; + padding-bottom: 10px; + } + + a#orderform-minicart-to-cart { + font-family: $font-family; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + text-decoration-line: underline; + color: #000000; + padding: 0 17px 0 0; + } + + .summary-template-holder { + padding-top: 0; + } + + .accordion-inner { + // border: 2px solid red; + } + + .totalizers-list { + border: 1px solid #e5e5e5; + border-radius: 8px; + + tr.Items, + tr.Discounts { + border-top: 1px solid #e0e0e0; + } + + td.info { + float: inherit; + padding: 25px 0 25px 17px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #7d7d7d; + } + + td.monetary { + float: right; + padding: 25px 17px 25px 0; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #7d7d7d; + } + } + + tfoot { + border: 1px solid #e5e5e5; + border-radius: 8px; + border-bottom: none; + + td.info { + padding: 30px 0 22px 17px; + float: inherit; + } + + td.monetary { + float: right; + padding: 30px 17px 0 0; + font-size: 14px; + line-height: 19px; + } + } + + #payment-data-submit { + position: absolute; + background: #298541; + border-radius: 8px; + margin-top: 20px; + + i { + display: none; + } + } + } +} + +a#open-shipping { + display: none; +} + +.address-summary.address-summary-BRA { + max-height: 36px; + margin-bottom: 77px; +} + +p.client-profile-summary { + margin-bottom: 0 !important; +} + +//Pagamento + +label.FormFieldLabel, +#holder-document-0 { + display: none; +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 137b763..fdccfab 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,6 +17,7 @@ box-sizing: border-box; border-radius: 5px; padding: 0 16px; + margin-bottom: 27px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -58,7 +59,7 @@ &:not(:first-child) { margin-top: 8px; padding-top: 8px; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $color-gray5; } .shipping-date, @@ -448,6 +449,7 @@ .srp-data { margin-top: 10px; width: 280px; + max-height: 104px; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -655,9 +657,11 @@ &-totalizers { padding: 0; width: 354px; + margin: 0; .coupon-data { - margin-top: 33px; + margin: 20px 0; + display: block !important; #cart-link-coupon-add { text-decoration: none; &:hover { @@ -708,7 +712,7 @@ } .coupon-fields { - margin-bottom: 20px; + margin-bottom: 0; @include mq(sm, max) { span { @@ -773,7 +777,7 @@ .accordion-group { tr { - border-color: #e5e5e5; + border-color: $color-gray5; td { &.empty { @@ -819,6 +823,7 @@ display: flex; flex-direction: column; width: 354px; + margin-top: 7px !important; @include mq(md, max) { padding: 0 16px;