cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona area de email desktop

Browse Source
This commit is contained in:
Cainã Milech 2022-12-12 22:41:19 -03:00
parent 0fcce0e4df
commit 0c456bd3bc
6 changed files with 376 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -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`;
}
}

14
checkout/src/arquivos/js/components/Footer.js
View File

@ -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() {

644
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -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);
}
}
}
}
}

4
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -262,6 +262,10 @@
color: $color-gray6;
}
}
.new-product-price-label {
text-transform: lowercase;
}
}
td.quantity {

2
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -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) {

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -23,6 +23,8 @@ $color-blue: #4267b2;
$color-blue2: #00c8ff;
$color-blue3: #2f8ea8;
$color-red: #ff0000;
$color-green: #4caf50;
/* Grid breakpoints */