Amandaalmeida/m3-academy-template-checkout-amanda-almeida
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(merge): correção de erro para realizar merge

Browse Source
This commit is contained in:
amanda almeida 2022-12-26 16:27:03 -03:00
commit f5e26bb741
10 changed files with 708 additions and 671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
checkout/src/arquivos/js/components/Cart.js
View File

@ -7,26 +7,26 @@ export default class Cart {
async init() { async init() {
await this.textButton(); await this.textButton();
this.selectors();
this.events();
} }
async textButton() { selectors() {
const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products", { this.addTextButton = $('.link-box-edit');
timeout: 30000, }
interval: 100,
});
const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date", {
timeout: 30000,
interval: 100,
});
const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price", {
timeout: 30000,
interval: 100,
});
const dadosPessoais = await waitElement('.accordion-toggle span', {
timeout: 30000, events() {
interval: 100, this.addTextButton.click(this.textButton);
}) }
async textButton() {
const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products");
const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date");
const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price");
const pPagamento = await waitElement('div.store-country-BRA.active .accordion-body .accordion-inner .notification')
const dadosPessoais = await waitElement('.accordion-toggle span')
textButtonCardVazio.textContent = `Continuar comprando`; textButtonCardVazio.textContent = `Continuar comprando`;
textCartItemsEntrega.textContent = `Frete`; textCartItemsEntrega.textContent = `Frete`;

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

@ -169,10 +169,7 @@ export default class Footer {
} }
async addCarrossel() { async addCarrossel() {
const products = await waitElement(".footerCheckout__products", { const products = await waitElement(".footerCheckout__products");
timeout: 30000,
interval: 1000,
});
$(products).slick({ $(products).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,

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

File diff suppressed because it is too large Load Diff

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

@ -35,7 +35,7 @@
} }
.cart { .cart {
border: 1px solid $color-gray3; border: 1px solid $color-gray2;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
margin: 0; margin: 0;
@ -63,7 +63,7 @@
thead { thead {
th { th {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -131,7 +131,7 @@
padding-right: 141px; padding-right: 141px;
a { a {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
@ -173,12 +173,12 @@
padding-right: 91px; padding-right: 91px;
span { span {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray8; color: $color-gray6;
@include mq(xl, min) { @include mq(xl, min) {
font-size: 24px; font-size: 24px;
@ -197,7 +197,7 @@
} }
td.product-price { td.product-price {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
text-align: start; text-align: start;
width: 99px; width: 99px;
padding-right: 49px; padding-right: 49px;
@ -212,7 +212,7 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
color: $color-gray8; color: $color-gray6;
@include mq(xl, min) { @include mq(xl, min) {
font-size: 24px; font-size: 24px;
@ -256,12 +256,12 @@
input { input {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $color-gray3; border: 1px solid $color-gray2;
width: 100%; width: 100%;
height: 34px; height: 34px;
border-radius: 8px; border-radius: 8px;
margin: 0; margin: 0;
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@ -338,7 +338,7 @@
padding-right: 22px; padding-right: 22px;
.total-selling-price { .total-selling-price {
font-family: 'Open Sans'; font-family: '$font-family';
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -367,7 +367,7 @@
a { a {
font-family: initial; font-family: initial;
font-size: 10px; font-size: 10px;
color: $color-gray6; color: $color-gray4;
@include mq(xl, min) { @include mq(xl, min) {
font-size: 20px; font-size: 20px;
@ -446,7 +446,7 @@
.srp-description { .srp-description {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $color-gray2; color: $color-gray;
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;
max-width: 276px; max-width: 276px;
@ -481,7 +481,7 @@
height: 44px; height: 44px;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: $color-gray9; background: $color-gray7;
border: 0; border: 0;
mix-blend-mode: normal; mix-blend-mode: normal;
border-radius: 8px; border-radius: 8px;
@ -495,17 +495,17 @@
@include mq(lg, min) { @include mq(lg, min) {
&:hover { &:hover {
background: lighten($color-gray9, 70); background: lighten($color-gray7, 70);
} }
&:active { &:active {
background: $color-gray9; background: $color-gray7;
} }
} }
@include mq(lg, max) { @include mq(lg, max) {
&:active { &:active {
background: lighten($color-gray9, 70); background: lighten($color-gray7, 70);
} }
} }
@ -551,7 +551,7 @@
} }
&__pickup { &__pickup {
color: $color-gray6; color: $color-gray4;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -627,10 +627,10 @@
width: 100%; width: 100%;
height: 36px; height: 36px;
background: $color-white; background: $color-white;
border: 1px solid $color-gray6; border: 1px solid $color-gray4;
border-radius: 5px; border-radius: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
padding-left: 11px; padding-left: 11px;
@ -645,7 +645,7 @@
small { small {
a { a {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
@ -788,7 +788,7 @@
} }
.link-coupon-add { .link-coupon-add {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -810,11 +810,11 @@
.coupon-label { .coupon-label {
label { label {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray;
margin-bottom: 4px; margin-bottom: 4px;
text-align: start; text-align: start;
@ -850,11 +850,11 @@
width: 52.7%; width: 52.7%;
height: 36px; height: 36px;
background: $color-white; background: $color-white;
border: 1px solid $color-gray5; border: 1px solid $color-gray3;
border-radius: 5px; border-radius: 5px;
padding: 0; padding: 0;
padding-left: 11px; padding-left: 11px;
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -873,12 +873,12 @@
&::placeholder { &::placeholder {
padding: 11px 0 11px 5px; padding: 11px 0 11px 5px;
color: $color-gray6; color: $color-gray4;
} }
} }
button { button {
font-family: 'Open Sans'; font-family: '$font-family';
background: $color-blue2; background: $color-blue2;
border-radius: 8px; border-radius: 8px;
height: 36px; height: 36px;
@ -919,13 +919,13 @@
margin-top: 6px; margin-top: 6px;
tr { tr {
border-bottom: 1px solid $color-gray5; border-bottom: 1px solid $color-gray3;
width: 100%; width: 100%;
} }
td { td {
padding: 10px 0; padding: 10px 0;
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -1006,7 +1006,7 @@
height: 14px; height: 14px;
a { a {
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;

454
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -1,11 +1,457 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
width: 32.3242%; width: 32.3242%;
margin-left: unset; margin: 0;
margin-right: 0;
float: right; float: right;
border: 1px solid $color-gray3;
border-radius: 8px;
height: 100%;
max-height: 496px;
@include mq(md, max) {
width: 100%;
margin-bottom: 117px;
} }
.orderform-template-holder {
width: 66.1132%; @include mq(sm, max) {
width: 91.4%;
}
.cart-fixed-transition {
transition: initial;
height: auto !important;
}
.cart-fixed {
position: relative;
top: 0;
width: 100%;
height: 100% !important;
.cart-totalizers {
margin: 0;
}
h2 {
background: transparent;
font-family: '$font-family-secundary';
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black-400;
border: 0;
padding: 24px 0 34px 17px;
text-align: left;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
} }
} }
.cart {
padding: 0;
@include mq(xl, min) {
max-height: 242px;
}
.cart-items {
overflow-x: hidden;
.quantity,
.shipping-date {
display: none;
}
.item {
margin: 0;
margin-bottom: 19px;
padding: 0 17px;
border: 0;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
@include mq(md, max) {
width: 96.8%;
}
@include mq(sm, max) {
width: 90%;
}
img {
width: 60px;
height: 60px;
@include mq(xl, min) {
width: 116px;
height: 116px;
}
}
.product-name {
font-family: '$font-family-secundary';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black;
width: 44%;
height: 60px;
text-overflow: initial;
white-space: initial;
display: flex;
align-items: center;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
width: 215px;
height: 116px;
}
}
.description {
margin: 0;
width: 30%;
}
.price {
font-family: '$font-family';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: $color-black-400;
margin: 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
}
}
.link {
margin: 0;
margin-right: 17px;
margin-bottom: 10px;
small a {
font-family: '$font-family';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: $color-black;
cursor: pointer;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
.summary-template-holder {
margin: 0;
padding: 0;
border: 0;
background: transparent;
tbody tr {
td {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray;
padding: 25px 17px;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
}
tr {
border-top: 1px solid $color-gray8;
td {
font-family: '$font-family';
width: 68%;
@include mq(md, max) {
width: 81%;
}
}
}
tfoot tr td {
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: $color-black-400;
padding: 30px 17px 22px;
@include mq(xl, min) {
font-size: 36px;
line-height: 49px;
}
}
.info {
text-align: left;
}
.monetary {
text-align: right;
}
}
.payment-submit-wrap {
#payment-data-submit {
position: absolute;
top: 20px;
border-radius: 8px;
height: 42px;
background: $color-green1;
border-radius: 8px;
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;
margin: 0;
cursor: pointer;
@include mq(xl, min) {
height: 61px;
font-size: 28px;
line-height: 38px;
}
i {
display: none;
}
}
}
}
}
#payment-data {
@include mq(md, max) {
margin-bottom: 17px;
}
.link-gift-card,
.pg-transferencia-bancaria,
#payment-group-creditControlPaymentGroup,
#payment-group-promissoryPaymentGroup,
.pg-money,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup,
#payment-group-customPrivate_502PaymentGroup,
#payment-group-custom201PaymentGroupPaymentGroup,
#payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup {
display: none !important;
}
.notification {
display: block !important;
@include mq(md, max) {
margin-bottom: 0;
}
font-family: '$font-family';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin: 0;
margin-top: 12px;
margin-bottom: 16px;
letter-spacing: -0.01em;
color: $color-gray;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
div.store-country-BRA.active {
width: 95% !important;
margin: 0;
margin-bottom: 102px;
@include mq(xl, min) {
width: 97.2% !important;
}
@include mq(md, max) {
width: 96.4% !important;
float: initial;
margin-left: 0;
margin-bottom: 0;
}
@include mq(reset3, max) {
width: 94.4% !important;
}
@include mq(sm, max) {
width: 92.4% !important;
}
.accordion-toggle {
line-height: 24px;
letter-spacing: -0.01em;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
}
}
@include mq(reset4, max) {
width: 87% !important;
}
.notification {
margin-bottom: 16px;
}
}
.payment-group {
margin: 0;
width: 38.1%;
@include mq(md, max) {
width: 100%;
}
&-list-btn {
margin: 0;
margin-right: 40px;
width: 83.9%;
@include mq(md, max) {
width: 100%;
margin: 0;
}
}
.active {
background: rgba($color-gray2, 0.3);
border: 1px solid $color-orange;
.payment-group-item-text {
color: $color-orange;
text-decoration: none;
}
}
&-item {
margin: 0;
background-color: rgba($color-gray2, 0.3);
mix-blend-mode: normal;
border: 1px solid rgba($color-black, 0.3);
border-radius: 6px;
width: 99%;
height: 50px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
cursor: pointer;
@include mq(md, max) {
width: 99%;
}
&:hover,
&:active {
background: rgba($color-gray2, 0.3);
border: 1px solid $color-orange;
}
.payment-group-item-text {
background: initial;
padding: 0;
font-family: '$font-family';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
text-align: center;
letter-spacing: -0.01em;
color: $color-gray11;
@include mq(xl, min) {
font-size: 28px;
line-height: 24px;
}
&:hover,
&:active {
color: $color-orange;
text-decoration: none;
}
}
}
}
}
.steps-view {
width: 56%;
border-radius: 5px;
padding: 0;
@include mq(md, max) {
width: 97.1%;
input {
width: 100%;
}
}
}
p.PaymentCardHolderDocument {
display: none;
}
}

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

@ -72,7 +72,7 @@
width: 327px; width: 327px;
height: 48px; height: 48px;
border: 1px solid $color-black; border: 1px solid $color-black;
font-family: 'Tenor Sans'; font-family: '$font-family-secundary';
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;

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

@ -72,7 +72,7 @@ body {
} }
#orderform-title { #orderform-title {
color: $color-gray2; color: $color-gray;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 500;
font-size: 36px; font-size: 36px;

6
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,6 +1,6 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
color: $color-gray2; color: $color-gray;
@ -118,7 +118,7 @@
} }
&__divider { &__divider {
background-color: $color-gray6; background-color: $color-gray4;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
width: 1px; width: 1px;
@ -172,7 +172,7 @@
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $color-gray;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;

6
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -73,7 +73,7 @@
height: 36px; height: 36px;
} }
@include mq_range(sm4, sm6) { @include mq_range(sm, sm6) {
height: 36px; height: 36px;
} }
@ -84,7 +84,7 @@
img { img {
width: 100%; width: 100%;
background-color: $color-gray7; background-color: $color-gray5;
} }
} }
@ -101,7 +101,7 @@
height: 61px; height: 61px;
} }
@include mq_range(sm4, sm6) { @include mq_range(sm, sm6) {
width: 100%; width: 100%;
height: 61px; height: 61px;
} }

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

@ -9,19 +9,21 @@ $color-black: #000000;
$color-black-400: #292929; $color-black-400: #292929;
$color-white: #fff; $color-white: #fff;
$color-white2: #F5F5F5;
$color-white3: #F2F2F2;
$color-gray: #6c6c6c; $color-gray: #7d7d7d;
$color-gray2: #7d7d7d; $color-gray2: #f0f0f0;
$color-gray3: #f0f0f0; $color-gray3: #e5e5e5;
$color-gray4: #8d8d8d; $color-gray4: #C4C4C4;
$color-gray5: #e5e5e5; $color-gray5: #EEEEEE;
$color-gray6: #C4C4C4; $color-gray6: #989898;
$color-gray7: #EEEEEE; $color-gray7: #EDEDED;
$color-gray8: #989898; $color-gray8: #E0E0E0;
$color-gray9: #EDEDED; $color-gray9: #808080;
$color-gray10: #E0E0E0; $color-gray10: #828282;
$color-gray11: #808080; $color-gray11: #58595B;
$calor-gray12: #828282; $color-gray12: #BDBDBD;
@ -30,19 +32,17 @@ $color-blue2: #00C8FF;
$color-green: #4caf50; $color-green: #4caf50;
$color-green1: #298541; $color-green1: #298541;
$color-red: #FF0000; $color-red: #FF0000;
$color-orange: #F15A31;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xss: 295px,
xs: 320px,
xs1: 345px,
sm: 601px, sm: 601px,
reset4: 421px, reset4: 421px,
sm2: 456px, sm2: 456px,
sm3: 487px, sm3: 487px,
reset: 491px, reset: 491px,
sm4: 600px, reset5: 768px,
sm5: 684px, sm4: 940px,
sm6: 730px, sm6: 730px,
reset2: 868px, reset2: 868px,
reset3: 900px, reset3: 900px,