From 5d142df23a8368c85c5b9dfb6c838279caabeda2 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Wed, 8 Feb 2023 15:51:41 -0300
Subject: [PATCH] feat(product): adicionando corretamente o testId no
 product-summary

---
 react/components/Html/style.css               |   8 +
 store/blocks/pdp/product__carousel.jsonc      |   3 +-
 styles/css/vtex.product-summary.css           |  40 ++--
 .../vtexProduct/vtex.product-summary.scss     | 190 +++++++++---------
 4 files changed, 117 insertions(+), 124 deletions(-)

diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index ac5093d..1a2d5bd 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -15,3 +15,11 @@
   margin: 0;
   padding: 0;
 }
+
+[class*="agenciamagma-store-theme-5-x-html--slider-product" ]{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+}
diff --git a/store/blocks/pdp/product__carousel.jsonc b/store/blocks/pdp/product__carousel.jsonc
index 4b0fae9..fe32833 100644
--- a/store/blocks/pdp/product__carousel.jsonc
+++ b/store/blocks/pdp/product__carousel.jsonc
@@ -27,7 +27,8 @@
       "product-summary-image#slider-images",
       "product-summary-name",
       // "product-summary-space",
-      "product-summary-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index d3abedc..b4b2f47 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -40,11 +40,14 @@
     line-height: 19px;
   }
 }
-.containerNormal .clearLink .element .priceContainer {
+.containerNormal .clearLink .element .listPrice {
   padding: 0;
   margin: 0;
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer {
+.containerNormal .clearLink .element .listPrice .installmentContainer {
+  display: none;
+}
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -57,24 +60,21 @@
   margin-bottom: 8px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
-  display: none;
-}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
   font-size: 14px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
     font-size: 12px;
     line-height: 16px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
   content: "de ";
   font-family: "Open Sans", sans-serif;
   font-style: normal;
@@ -84,12 +84,12 @@
   text-align: center;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
   content: " por";
   font-family: "Open Sans", sans-serif;
   font-style: normal;
@@ -99,12 +99,12 @@
   text-align: center;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
   padding: 0;
   margin: 0;
   height: 33px;
@@ -117,28 +117,22 @@
   color: #000;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+  .containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
     font-size: 18px;
     line-height: 25px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
   font-size: 24px;
   line-height: 33px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+  .containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
     font-size: 18px;
     line-height: 25px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
-  display: none;
-}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) .sellingPriceValue {
   padding: 0;
   margin: 0;
-}
-.containerNormal .clearLink .element .priceContainer .installmentContainer {
-  display: none;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
index 06fab47..b5a2877 100644
--- a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
@@ -33,109 +33,10 @@
         }
       }
 
-      .priceContainer {
+      .listPrice {
         padding: 0;
         margin: 0;
 
-        .listPriceContainer {
-          font-family: $font-family;
-          font-style: normal;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 19px;
-          text-align: center;
-          text-decoration-line: line-through;
-          color: #BABABA;
-          padding: 0;
-          margin-bottom: 8px;
-
-          @media #{$mq-tablet}, #{$mq-mobile} {
-            font-size: 12px;
-            line-height: 15px;
-          }
-
-          .listPriceLabel {
-            display: none;
-          }
-
-          .currencyContainer {
-            font-size: 14px;
-
-            @media #{$mq-tablet}, #{$mq-mobile} {
-              font-size: 12px;
-              line-height: 16px;
-            }
-
-            &::before {
-              content: "de ";
-              font-family: $font-family;
-              font-style: normal;
-              font-weight: 400;
-              font-size: 14px;
-              line-height: 19px;
-              text-align: center;
-
-              @media #{$mq-tablet}, #{$mq-mobile} {
-                font-size: 12px;
-                line-height: 15px;
-              }
-            }
-
-            &::after {
-              content: " por";
-              font-family: $font-family;
-              font-style: normal;
-              font-weight: 400;
-              font-size: 14px;
-              line-height: 19px;
-              text-align: center;
-
-              @media #{$mq-tablet}, #{$mq-mobile} {
-                font-size: 12px;
-                line-height: 15px;
-              }
-            }
-          }
-
-        }
-
-        .sellingPriceContainer {
-          padding: 0;
-          margin: 0;
-          height: 33px;
-          font-family: $font-family;
-          font-style: normal;
-          font-weight: 700;
-          font-size: 24px;
-          line-height: 33px;
-          text-align: center;
-          color: $color-black0;
-
-          @media #{$mq-tablet}, #{$mq-mobile} {
-            font-size: 18px;
-            line-height: 25px;
-          }
-
-          .currencyContainer {
-            font-size: 24px;
-            line-height: 33px;
-
-            @media #{$mq-tablet}, #{$mq-mobile} {
-              font-size: 18px;
-              line-height: 25px;
-            }
-          }
-
-          .sellingPriceLabel  {
-            display: none;
-          }
-
-          .sellingPriceValue {
-            padding: 0;
-            margin: 0;
-          }
-        }
-
         .installmentContainer  {
           display: none;
         }
@@ -143,4 +44,93 @@
     }
   }
 
+  :global(.vtex-product-price-1-x-listPriceValue) {
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    text-decoration-line: line-through;
+    color: #BABABA;
+    padding: 0;
+    margin-bottom: 8px;
+
+    @media #{$mq-tablet}, #{$mq-mobile} {
+      font-size: 12px;
+      line-height: 15px;
+    }
+
+    :global(.vtex-product-price-1-x-currencyContainer) {
+      font-size: 14px;
+
+      @media #{$mq-tablet}, #{$mq-mobile} {
+        font-size: 12px;
+        line-height: 16px;
+      }
+
+      &::before {
+        content: "de ";
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        text-align: center;
+
+        @media #{$mq-tablet}, #{$mq-mobile} {
+          font-size: 12px;
+          line-height: 15px;
+        }
+      }
+
+      &::after {
+        content: " por";
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        text-align: center;
+
+        @media #{$mq-tablet}, #{$mq-mobile} {
+          font-size: 12px;
+          line-height: 15px;
+        }
+      }
+    }
+  }
+
+  :global(.vtex-product-price-1-x-sellingPrice) {
+    padding: 0;
+    margin: 0;
+    height: 33px;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    text-align: center;
+    color: $color-black0;
+
+    @media #{$mq-tablet}, #{$mq-mobile} {
+      font-size: 18px;
+      line-height: 25px;
+    }
+
+    :global(.vtex-product-price-1-x-currencyContainer) {
+      font-size: 24px;
+      line-height: 33px;
+
+      @media #{$mq-tablet}, #{$mq-mobile} {
+        font-size: 18px;
+        line-height: 25px;
+      }
+    }
+    .sellingPriceValue {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
 }