Douglas-Vinicius-Nobrega/m3-academy-template-checkout-Douglas-Nobrega
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature(finalizandar-compra) Tela de finalização de compra concluida

Browse Source
This commit is contained in:
Douglas Vinicius Nobrega 2022-12-18 18:28:14 -03:00
parent e3744ee00f
commit 79f14a38a0
4 changed files with 130 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,6 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
this.apiPrateleira(); this.apiPrateleira();
await this.addCarrossel();
this.payments(); this.payments();
this.iconVtex(); this.iconVtex();
this.developBy(); this.developBy();
@ -84,6 +83,9 @@ export default class Footer {
`; `;
}); });
}); });
//.then(() => {
//this.addCarrossel();
//});
} }
async addCarrossel() { async addCarrossel() {

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

@ -1,4 +1,20 @@
.checkout-container { .checkout-container {
.checkbox {
input {
border: 1px solid $color-border-radius-figma-2 !important;
border-radius: 3px !important;
}
span {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-figma-gray-medium;
}
}
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
@ -46,6 +62,20 @@
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
label {
font-size: 0px;
&:before {
content: "Email";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
}
input { input {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
@ -150,20 +180,39 @@
} }
} }
.client-profile-data {
.accordion-heading {
.accordion-toggle {
display: none !important;
}
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray3;
border-radius: 8px;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 24px 17px 44px 17px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
font-family: $font-family-secundary;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
i {
background-image: url("../lapisM3Academy.png");
}
i::before { i::before {
fill: #303030; fill: #303030;
@ -185,22 +234,47 @@
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.shipping-summary-info,
.notification {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; color: $color-black;
margin-bottom: 26px;
font-size: 0px;
&::before {
content: "Identificação";
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
} }
p { p {
label { label {
color: $color-black; font-family: $font-family;
font-weight: 500; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; border: 1px solid $color-border-radius-figma;
box-shadow: none; box-shadow: none;
} }
@ -212,6 +286,7 @@
.box-client-info-pj { .box-client-info-pj {
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
display: none;
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@ -223,13 +298,24 @@
} }
button.submit { button.submit {
background: $color-blue-figma;
border-radius: 8px;
border: none; border: none;
border-radius: 5px;
background: $color-black;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
width: 100%;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }

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

@ -5,6 +5,9 @@
} }
.cart-template { .cart-template {
//border: 1px solid #e5e5e5;
//border-radius: 8px;
padding: 0px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
@ -13,10 +16,10 @@
} }
.cart { .cart {
font-family: $font-family-secundary; font-family: $font-family-secundary;
border: 1px solid $color-gray3; //border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 0px 17px 19px 17px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -29,9 +32,14 @@
position: relative !important; position: relative !important;
} }
.cart-fixed { .cart-fixed {
border: 1px solid #e5e5e5;
border-radius: 8px;
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
font-family: $font-family-secundary;
display: flex;
padding: 24px 0px 34px 17px;
background: $color-white; background: $color-white;
border: none; border: none;
color: #303030; color: #303030;
@ -48,7 +56,7 @@
} }
.cart { .cart {
border: 1px solid $color-gray4; //border: 1px solid $color-gray4;
ul li { ul li {
border-top: none; border-top: none;
@ -74,13 +82,20 @@
} }
#go-to-cart-button a { #go-to-cart-button a {
color: #303030; font-family: $font-family;
text-decoration: underline; font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
color: $color-black;
padding: 0px 17px 10px 0;
} }
.summary-totalizers { .summary-totalizers {
td.info { td.info {
width: 100%; width: 100%;
margin-right: -17px;
} }
} }
@ -753,21 +768,25 @@
.accordion-group { .accordion-group {
tr { tr {
border-top: 1px solid $color-border-radius-figma;
border-color: #e5e5e5; border-color: #e5e5e5;
padding: 25px 17px;
td { td {
margin-top: 25px;
margin-bottom: 25px;
&.empty { &.empty {
display: none; display: none;
} }
&.info, &.info,
&.monetary { &.monetary {
font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
color: $color-black; color: $color-gray2;
padding: 12px 0;
} }
&.info { &.info {

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

@ -9,6 +9,11 @@ $color-black: #292929;
$color-white: #fff; $color-white: #fff;
$color-border-radius-figma: #e0e0e0;
$color-border-radius-figma-2: #828282;
$color-figma-gray-medium: #808080;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;