feat(checkout): Ajusta o checkout desktop

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();

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 += `
+    //         <span class="forma-entrega"></span>
+    //     `;
+    //     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);
+        }
+    }
+}

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

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

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 #f0f0f0;
-            border: 1px solid $color-gray4;
+            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: 25px;
-                    margin-bottom: 8px;
                     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-family: $font-family;
-                        font-weight: 500;
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 19px;
+                        color: #7d7d7d;
                     }
 
                     select,
                     input {
-                        border-radius: 0;
+                        border: 1px solid #e0e0e0;
-                        border: 1px solid $color-gray4;
+                        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: #00c8ff;
-                    background: $color-black;
+                    border-radius: 8px;
-                    margin-top: 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-weight: 700;
-                    font-size: 14px;
+                    font-size: 12px;
-                    font-weight: 500;
+                    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: 0px;
-                    border-radius: 0;
+                    padding: 0;
-                    color: #303030;
-                    padding: 12px;
 
                     @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;
+                    background: #ffffff;
-                    border: 1px solid #d8c8ac;
+                    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;
+}

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;