From 6e584b6dfb97105ad2658f33307d1074f769315c Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Fri, 16 Dec 2022 18:31:38 -0300
Subject: [PATCH] feat: add estilo pagamento completo

---
 .../sass/checkout/_checkout-autenticacao.scss | 167 ++++++++++++++++--
 .../sass/checkout/_checkout-carrinho.scss     |  83 +++++++--
 .../sass/checkout/_checkout-pagamento.scss    |  20 +++
 .../src/arquivos/sass/utils/_variaveis.scss   |   7 +
 4 files changed, 248 insertions(+), 29 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index e952cb0..bd00d97 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -178,17 +178,17 @@
 
             .accordion-heading {
                 span {
-                    color: #303030;
+                    color: $color-black2;
                     padding: 0;
 
                     i::before {
-                        fill: #303030;
+                        fill: $color-black2;
                     }
                 }
 
                 a {
                     align-items: center;
-                    background-color: #303030;
+                    background-color: $color-black2;
                     border-radius: 8px;
                     border: none;
                     color: $color-white;
@@ -273,14 +273,14 @@
                 /* Shipping configurations */
 
                 .ship-postalCode small a {
-                    color: #303030;
+                    color: $color-black2;
                     font-weight: 500;
                     text-decoration: underline;
                 }
 
                 .vtex-omnishipping-1-x-deliveryGroup {
                     p {
-                        color: #303030;
+                        color: $color-black2;
                         font-size: 14px;
                         font-weight: 500;
                     }
@@ -292,7 +292,7 @@
                         label {
                             background-color: $color-white;
                             box-shadow: none;
-                            color: #303030;
+                            color: $color-black2;
                             padding: 8px 12px;
 
                             svg path {
@@ -303,7 +303,7 @@
                 }
 
                 .delivery-address-title {
-                    color: #303030;
+                    color: $color-black2;
                     font-size: 14px;
                     font-weight: 500;
                 }
@@ -316,7 +316,7 @@
                     background: none;
                     border-color: $color-gray4;
                     border-radius: 0;
-                    color: #303030;
+                    color: $color-black2;
                     padding: 12px;
 
                     @include mq(md, max) {
@@ -324,7 +324,7 @@
                     }
 
                     a {
-                        color: #303030;
+                        color: $color-black2;
                         font-weight: 500;
                         text-decoration: underline;
                     }
@@ -344,8 +344,8 @@
                 }
 
                 .vtex-omnishipping-1-x-summaryChange {
-                    border-color: #303030;
-                    color: #303030;
+                    border-color: $color-black2;
+                    color: $color-black2;
                 }
 
                 .vtex-omnishipping-1-x-deliveryChannelsToggle {
@@ -373,6 +373,127 @@
         }
     }
 
+    .step.accordion-group {
+        &.client-profile-data.filled {
+            padding-bottom: 36px !important;
+
+            .accordion-heading {
+                font-family: $font-family-secondary;
+                margin-bottom: 25px !important;
+            }
+        }
+
+        &.shipping-data {
+            padding-bottom: 35px;
+            margin-bottom: 16px;
+
+            .accordion-heading {
+                margin-bottom: 25px !important;
+            }
+
+            .vtex-omnishipping-1-x-SummaryItemGroup {
+                padding: 0 !important;
+
+                .vtex-omnishipping-1-x-SummaryItemContent {
+                    display: flex;
+                    font-size: 12px;
+                    align-items: flex-end;
+                    padding-left: 3px;
+
+                    .shp-summary-group-info {
+                        padding-left: 0 !important;
+                        border: none;
+
+                        .shp-summary-group-address {
+                            margin-bottom: 0;
+
+                            .address-summary {
+                                padding: 0 0 25px 0;
+                                color: $color-gray2;
+
+                                .street {
+                                    display: inline-block;
+                                    margin-bottom: 10px;
+                                }
+
+                                :nth-child(8) {
+                                    display: block;
+                                    margin-top: 10px;
+                                }
+
+                                .line3-delimiter {
+                                    display: none;
+                                }
+                            }
+                        }
+
+                        .shp-summary-package {
+                            padding-left: 0;
+                        }
+
+                        .shp-summary-group-price {
+                            padding: 0;
+                        }
+                    }
+                }
+            }
+
+            .link-change-shipping {
+                display: none;
+            }
+        }
+    }
+
+    .payment-data .accordion-group {
+        width: auto !important;
+
+        .accordion-heading span {
+            font-size: 16px;
+            font-weight: 400;
+        }
+
+        .payment-group-list-btn {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .payment-group-item {
+            margin-left: 0;
+            padding: 0;
+            border: none;
+            background: none;
+
+            &-text {
+                border: solid 1px $color-gray12;
+                border-radius: 6px;
+                color: $color-gray13;
+                background: $color-gray14;
+                height: 50px;
+                width: 209px;
+                display: flex;
+                font-size: 14px;
+                margin: 0;
+                padding: 0;
+                align-items: center;
+                justify-content: center;
+                background-image: none !important;
+            }
+
+            &.active {
+                .payment-group-item-text {
+                    border-color: $color-orange;
+                    color: $color-orange;
+                    background-color: $color-gray11;
+                }
+            }
+        }
+
+        .steps-view {
+            width: 363px;
+        }
+    }
+
     .shipping-data.active {
         #shipping-data .accordion-group {
             padding-bottom: 44px;
@@ -494,3 +615,27 @@
         }
     }
 }
+
+.box-info {
+    color: $color-gray2;
+
+    .client-profile-email,
+    span.name {
+        margin-bottom: 6px;
+    }
+
+    span.tel {
+        display: block;
+        margin-top: 6px;
+    }
+}
+
+.icon-user,
+.icon-home,
+.icon-credit-card {
+    display: none;
+}
+
+.accordion-heading {
+    font-family: $font-family-secondary;
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index b414b7f..4870ff3 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -83,7 +83,7 @@
         }
 
         #go-to-cart-button a {
-            color: #303030;
+            color: $color-black2;
             text-decoration: underline;
         }
 
@@ -161,6 +161,7 @@
 
         .product-name {
             padding-right: 0;
+            width: 300px !important;
 
             @include mq(lg, max) {
                 width: 250px;
@@ -203,8 +204,22 @@
             }
         }
 
+        th.shipping-date {
+            padding-right: 0;
+            padding-left: 0;
+        }
+
+        td.product-price {
+            bottom: -12px;
+            flex-direction: column;
+            width: 104px;
+            padding-right: 49px;
+        }
+
         .product-price {
-            min-width: 100px;
+            text-align: left;
+            padding-left: 91px;
+            min-width: none;
             @include mq(md, max) {
                 min-width: 78px;
             }
@@ -231,17 +246,23 @@
         }
 
         td.quantity {
+            display: flex;
+            margin-left: 0px;
+            margin-top: 16px;
+            padding-right: 0px;
+            height: 34px;
             align-items: center;
             border: 1px solid $color-gray3;
             border-radius: 8px;
             box-sizing: border-box;
-            display: flex;
             justify-content: center;
-            margin: 6px auto 0;
             max-height: 38px;
-            max-width: 118px;
+            width: 99px;
             padding: 0;
-            width: max-content !important;
+
+            :before {
+                padding: 0 !important;
+            }
 
             @media (max-width: 490px) {
                 margin-left: 84px !important;
@@ -267,6 +288,18 @@
                 }
             }
 
+            #item-quantity-change-decrement-2621 {
+                padding-right: 5px;
+            }
+
+            #item-quantity-change-increment-2621 {
+                padding-left: 5px;
+            }
+
+            #item-quantity-2621 {
+                padding: 0;
+            }
+
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
@@ -312,12 +345,24 @@
         }
 
         .quantity-price {
+            padding-left: 67px;
             font-weight: 400;
             @include mq(md, max) {
                 display: none;
             }
         }
 
+        th.quantity,
+        th.quantity-price,
+        td.quantity-price {
+            text-align: left;
+        }
+
+        td.quantity-price {
+            padding-right: 0px;
+            width: fit-content;
+        }
+
         .item-remove {
             @media (max-width: 490px) {
                 top: 0;
@@ -545,13 +590,13 @@
             .srp-result {
                 strong,
                 .srp-items {
-                    color: #303030;
+                    color: $color-black2;
                     font-weight: 400;
                     font-size: 14px;
                 }
 
                 #deliver-at-text a {
-                    color: #303030;
+                    color: $color-black2;
                     font-size: 16px;
                     font-weight: 500;
 
@@ -563,7 +608,7 @@
                 .srp-shipping-current-single {
                     border: 1px solid $color-gray4;
                     border-radius: 0;
-                    color: #303030;
+                    color: $color-black2;
                     margin: 16px 0 0;
                     padding: 4px 12px;
 
@@ -582,7 +627,7 @@
 
                     .srp-shipping-current-many {
                         &__name {
-                            color: #303030;
+                            color: $color-black2;
                         }
 
                         &__sla {
@@ -604,7 +649,7 @@
 
         &-totalizers {
             padding: 0;
-            width: 346px;
+            width: 362px;
 
             .coupon-data {
                 font-family: $font-family-secondary;
@@ -638,16 +683,16 @@
                 }
 
                 .link-coupon-add {
-                    color: #303030;
+                    color: $color-black2;
                     font-size: 12px;
                     text-decoration: underline;
                 }
 
                 .coupon-label {
-                    display: flex;
-                    margin-left: 20px;
+                    text-align: left;
 
                     label {
+                        margin-top: 49px;
                         margin-bottom: 4px;
                         font-family: $font-family-secondary;
                         font-style: normal;
@@ -660,6 +705,7 @@
                 }
 
                 .coupon-fields {
+                    width: fit-content;
                     margin-bottom: 32px;
 
                     @include mq(sm, max) {
@@ -676,15 +722,15 @@
                     }
 
                     input {
-                        border: 2px solid $color-gray5;
+                        border: 1px solid $color-gray5;
                         border-radius: 5px;
                         box-shadow: none;
                         color: $color-gray6;
                         font-size: 12px;
                         height: 34px;
+                        width: 178px;
                         padding: 0 12px;
                         font-family: $font-family-secondary;
-                        max-width: 160px;
 
                         @include mq(sm, max) {
                             max-width: 100%;
@@ -694,8 +740,9 @@
 
                     button {
                         background: $color-blue2;
+                        text-shadow: none !important;
                         border: none;
-                        border-radius: 5px;
+                        border-radius: 8px;
                         color: $color-black;
                         font-size: 14px;
                         font-weight: 400;
@@ -771,7 +818,6 @@
     .cart-links-bottom {
         display: flex;
         flex-direction: column;
-        width: 343px;
 
         @include mq(md, max) {
             padding: 0 16px;
@@ -815,6 +861,7 @@
                 font-weight: 700;
                 transition: ease-in 0.22s all;
                 padding: 12px 19px;
+                width: 316px;
 
                 &:hover {
                     background-color: darken($color-green, 5);
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 6fadb9a..aac6ee9 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -10,6 +10,10 @@ body .container-main.container-order-form .orderform-template.active {
         border-radius: 8px;
         padding: 24px 0 0 0;
 
+        .shipping-date.pull-left {
+            display: none;
+        }
+
         .cart {
             padding: 0 17px 19px 17px;
 
@@ -94,6 +98,22 @@ body .container-main.container-order-form .orderform-template.active {
             padding: 25px 0 25px 17px;
             color: $color-gray2;
         }
+
+        #payment-data-submit {
+            background-color: $color-green2;
+            border-radius: 8px;
+
+            .icon-lock {
+                display: none;
+            }
+
+            span {
+                text-transform: uppercase;
+                font-weight: 700;
+                letter-spacing: 0.05em;
+                font-size: 14px;
+            }
+        }
     }
     .orderform-template-holder {
         width: 66.1132%;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index cb0d0f8..0dca89f 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -20,13 +20,20 @@ $color-gray7: #989898;
 $color-gray8: #ededed;
 $color-gray9: #e0e0e0;
 $color-gray10: #808080;
+$color-gray11: #f4f5f7;
+$color-gray12: #b3b3b3;
+$color-gray13: #58595b;
+$color-gray14: #fbfbfb;
 
 $color-blue: #4267b2;
 $color-blue2: #00c8ff;
 
 $color-red: #ff0000;
 
+$color-orange: #f15a31;
+
 $color-green: #4caf50;
+$color-green2: #298541;
 
 /* Grid breakpoints */
 $grid-breakpoints: (