From 0c456bd3bc494d2aa29c18fb5a47d7b85a621f97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Mon, 12 Dec 2022 22:41:19 -0300 Subject: [PATCH] feat: Adiciona area de email desktop --- .../src/arquivos/js/components/CheckoutUI.js | 8 - checkout/src/arquivos/js/components/Footer.js | 14 + .../sass/checkout/_checkout-autenticacao.scss | 644 ++++++++++-------- .../sass/checkout/_checkout-carrinho.scss | 4 + .../src/arquivos/sass/checkout/_checkout.scss | 2 - .../src/arquivos/sass/utils/_variaveis.scss | 2 + 6 files changed, 376 insertions(+), 298 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index a703c3d..34c946a 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -11,15 +11,11 @@ export default class CheckoutUI { this.events(); this.setFooterDropdown(); } - - this.carrinhoVazio(); } selectors() { this.title = $(".footerCheckout__title"); this.contents = $(".footerCheckout__content"); - - this.fraseCarrinhoVazio = $(".empty-cart-title"); } events() { @@ -61,8 +57,4 @@ export default class CheckoutUI { $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } - - carrinhoVazio() { - this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; - } } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..5ec45d9 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,7 @@ export default class Footer { async init() { await this.selectors(); + await this.carrinho(); // this.onUpdate(); } @@ -14,6 +15,19 @@ 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"); + //CARRINHO VAZIO + this.fraseCarrinhoVazio = await waitElement(".empty-cart-title"); + this.continuarCompra = await waitElement("#cart-choose-products"); + //carrinho + this.frete = await waitElement(".shipping-date"); + this.unidade = await waitElement(".product-price"); + } + + carrinho() { + this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; + this.continuarCompra.innerHTML = `continuar comprando`; + this.frete.innerHTML = `Frete`; + this.unidade.innerHTML = `Unidade`; } onUpdate() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..8ece1ec 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,357 @@ -.checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; - - .link-cart { - a { - color: $color-black; - font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } - } - } - - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; - - h3 { - margin-bottom: 16px; - - span { - color: #303030; - font-size: 24px; - } - - small { - color: $color-gray4; - } - } - } - - .client-email { - margin: 0 0 16px; - - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; - - @media (max-width: 490px) { - width: auto; - } - } - - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; - - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } - - span.help.error { - color: red; - } - } - - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; - - h3 { - color: #303030; - margin: 0 0 8px 0; - } - - ul { - margin: 0; - - li { - span { - color: $color-black; - } - - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } - - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } - - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; - - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - - i::before { - fill: #303030; - } - } - - 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; - } - } - - .accordion-inner { - padding: 0; - - /* General configurations */ - - .client-notice { - color: $color-black; - } - - p { - label { - color: $color-black; - font-weight: 500; - } - - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } - - .help.error { - color: red; - } - } - - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } - - .state-inscription-box span { - font-weight: 500; - } - - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } - } - - /* Shipping configurations */ - - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; - - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - - svg path { - fill: #d8c8ac; - } - } - } - } - - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-summary-group-info { - border-color: $color-gray4; - } - - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; - - @include mq(md, max) { - background-position: 8px 9px; - } - - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } - - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } - - .shp-summary-group-price { - padding-right: 16px; - } - - .shp-summary-package { - padding-left: 16px; - } - - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } - - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } - - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } +h1#orderform-title { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black-500; + margin: 17px 0; +} + +.checkout-container { + .client-pre-email { + border-color: $color-black-500; + font-family: $font-family; + padding-top: 8px; + + .link-cart { + a { + font-family: $font-family-secundary; + margin-top: 6px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: $color-black-500; + font-size: 14px; + + &:hover { + color: lighen($color-black-500, 10); + } + } + } + + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + + h3 { + margin-bottom: 21px; + + span { + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-family: $font-family-secundary; + } + + small { + color: $color-black-500; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-family: $font-family-secundary; + } + } + } + + .client-email { + /*left: -61px;*/ + margin: 0 0 24.56px; + + input { + /*width: 65.8%;*/ + width: 82%; + height: 50px; + box-shadow: none; + color: $color-black-500; + font-family: $font-family; + padding: 0 14px; + border: 1px solid $color-black-500; + border-radius: 5px 0px 0px 5px; + box-sizing: border-box; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + &::placeholder { + color: $color-black-500; + } + + @media (max-width: 490px) { + width: auto; + } + } + + button { + background-color: $color-blue2; + color: $color-black-500; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + width: 126.76px; + height: 52px; + right: 45px; + top: -1px; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } + + span.help.error { + color: $color-red; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + } + } + + .emailInfo { + width: 366px; + height: 116px; + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black-500; + border-radius: 5px; + + h3 { + color: $color-black-500; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + margin: 0 0 9.56px 0; + } + + ul { + margin: 0; + + li { + span { + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black-500; + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + margin-right: 6px; + } + } + } + + i.icon-lock { + right: 0; + bottom: -30px; + } + + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } + + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; + + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + + i::before { + fill: #303030; + } + } + + 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; + } + } + + .accordion-inner { + padding: 0; + + /* General configurations */ + + .client-notice { + color: $color-black; + } + + p { + label { + color: $color-black; + font-weight: 500; + } + + select, + input { + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + } + + .help.error { + color: red; + } + } + + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + button.submit { + border: none; + border-radius: 5px; + background: $color-black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; + + &:hover { + background: lighten($color-black, 5); + } + + &:active { + background: darken($color-black, 5); + } + } + + /* Shipping configurations */ + + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } + + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; + + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; + + svg path { + fill: #d8c8ac; + } + } + } + } + + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } + + .shp-summary-group-info { + border-color: $color-gray4; + } + + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } + + .shp-summary-group-price { + padding-right: 16px; + } + + .shp-summary-package { + padding-left: 16px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 6560a80..ad34e10 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -262,6 +262,10 @@ color: $color-gray6; } } + + .new-product-price-label { + text-transform: lowercase; + } } td.quantity { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae3bc1d..ae30bad 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -74,13 +74,11 @@ body { #cart-title, #orderform-title { - color: $color-gray2; font-family: $font-family; font-weight: 500; font-size: 36px; line-height: 42px; margin: 40px 0 30px; - letter-spacing: 0.1em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 1ec8f56..f0c835d 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,8 @@ $color-blue: #4267b2; $color-blue2: #00c8ff; $color-blue3: #2f8ea8; +$color-red: #ff0000; + $color-green: #4caf50; /* Grid breakpoints */