feat: adiciona testeId em blocos e responsividade na pagina de produto

react/components/Html/styles.css

@@ -1,6 +1,7 @@
 /*
   CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
 */
+
 [class*="html--buy-button"] :global(.vtex-button) {
     min-height: 49px;
     padding: 12px 64px;
@@ -32,6 +33,11 @@
   }
 }
 
+[class*="html--product-quantity"] {
+  width: 128px;
+  margin-right: 10px;
+}
+
 /*
   DESCRIÇÃO DO PRODUTO SELECIONADO
 */
@@ -47,7 +53,7 @@
 
 
 [class*="html--container-description"] {
-  margin: 32px 32px 16px 32px;
+  margin: 32px 32px 0px 32px;
 }
 @media(max-width: 1024px){
   [class*="html--container-description"] {
@@ -63,14 +69,11 @@
   margin-bottom: 16px;
   position: relative;
   width: 53.75%;
+  padding: 0 40px;
 }
 
 @media(max-width: 1024px){
   [class*="html--container-form-input"] {
-    display: flex;
-    padding: 0 40px;
-    margin-bottom: 32px;
-    position: relative;
     width: 100%;
   }
 }

store/blocks/pdp/product.jsonc

@@ -5,7 +5,7 @@
       "condition-layout.product#availability",
       "tab-layout#description",
       "list-context.product-list#prateleira",
-      "newsletter-form#container-newsletter"
+      "flex-layout.row#newsletter-container"
     ]
   },
 
@@ -24,6 +24,7 @@
 /*
   IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
 */
+
 "condition-layout.product#availability": {
   "props": {
   "blockClass": "availability",
@@ -72,8 +73,16 @@
   }
 },
 "flex-layout.row#product-image": {
+  "children": ["html#product-images"]
+},
+
+"html#product-images": {
+  "props": {
+    "testId": "product-images"
+  },
   "children": ["product-images"]
 },
+
 "product-images": {
   "props": {
     "thumbnailsOrientation": "horizontal",
@@ -112,7 +121,21 @@
       "testId": "product-images",
       "blockClass": "image-description"
     },
-    "children": ["image#product"]
+    "children": ["html#product-image"]
+  },
+
+  "html#product-image":{
+    "props": {
+      "testId": "product-images"
+    },
+    "children": ["product-images#description"]
+  },
+
+  "product-images#description":{
+    "props": {
+      "blockClass": "description",
+      "displayMode": "first-image"
+    }
   },
 
   "image#product": {
@@ -220,19 +243,45 @@
 */
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf#prateleira"],
-    "children": ["rich-text#prateleira","slider-layout#prateleira"]
+    "children": ["rich-text#title-prateleira","slider-layout#prateleira"]
   },
 
   "product-summary.shelf#prateleira": {
+    "children": ["html#product-summary"]
+  },
+
+  "html#product-summary": {
+    "props":{
+      "testId": "vtex-product-summary",
+      "blockClass": "product-summary"
+    },
     "children": [
       "stack-layout#prodsum",
-      "product-summary-name",
+      "product-summary-name#name-prateleira",
-      "product-list-price",
+      "product-list-price#promotion-prateleira",
-      "product-selling-price"
+      "product-selling-price#price-prateleira"
     ]
   },
 
-  "rich-text#prateleira": {
+  "product-summary-name#name-prateleira": {
+    "props": {
+      "blockClass": "name-prateleira"
+    }
+  },
+
+  "product-list-price#promotion-prateleira":{
+    "props": {
+      "blockClass": "promotion-prateleira"
+    }
+  },
+
+  "product-selling-price#price-prateleira":{
+    "props": {
+      "blockClass": "price-prateleira"
+    }
+  },
+
+  "rich-text#title-prateleira": {
     "props": {
       "textAlignment": "CENTER",
       "textPosition": "CENTER",
@@ -246,7 +295,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "fullWidth": false,
@@ -257,19 +306,22 @@
   /*
     NEWSLETTER
   */
-  "newsletter-form#container-newsletter": {
-    "props": {
-      "blockClass": "container-newsletter"
-    },
 
-    "children": [
+  "flex-layout.row#newsletter-container":{
-      "rich-text#subscriber-newsletter",
+    "props":{
-      "rich-text#offer-newsletter",
+      "blockClass": "newsletter-container"
-      "html#container-form-input"
+    },
-    ]
+    "children": ["flex-layout.row#text-newsletter","newsletter-form#container-newsletter"]
   },
 
-  "rich-text#subscriber-newsletter": {
+  "flex-layout.row#text-newsletter":{
+    "props": {
+      "blockClass": "text-newsletter"
+    },
+    "children": ["rich-text#newsletter-title","rich-text#offer-newsletter" ]
+  },
+
+  "rich-text#newsletter-title": {
     "props": {
       "blockClass": "subscriber-newsletter",
       "textAlignment": "center",
@@ -286,6 +338,16 @@
       "text": "Receba ofertas e novidades por e-mail"
     }
   },
+
+  "newsletter-form#container-newsletter": {
+    "props": {
+      "blockClass": "container-newsletter"
+    },
+    "children": [
+      "html#container-form-input"
+    ]
+  },
+
   "html#container-form-input": {
     "props": {
       "blockClass": "container-form-input"
@@ -318,9 +380,9 @@
       "product-identifier.product",
       "flex-layout.row#selling-price",
       "product-installments#parcelaProduct",
-      "pix-discount",
+      "html#pix-discount",
       "availability-subscriber",
-      "sku-selector",
+      "html#sku-selector",
       "html#buy-button",
       "shipping-simulator"
     ]
@@ -342,6 +404,20 @@
     }
   },
 
+  "html#pix-discount":{
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["pix-discount"]
+  },
+
+  "html#sku-selector":{
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "sku-selector": {
     "props": {
       "blockClass": "sku-selector",
@@ -358,7 +434,15 @@
       "testId": "buy-button",
       "blockClass": "buy-button"
     },
-    "children": ["product-quantity","add-to-cart-button"]
+    "children": ["html#product-quantity","add-to-cart-button"]
+  },
+
+  "html#product-quantity":{
+    "props": {
+      "testId": "product-quantity",
+      "blockClass": "product-quantity"
+    },
+    "children": ["product-quantity"]
   },
 
   /*

styles/css/vtex.flex-layout.css

@@ -92,3 +92,27 @@
     width: 100% !important;
   }
 }
+
+/* NEWSLETTER */
+.flexRow--newsletter-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: #000000;
+}
+.flexRow--newsletter-container .flexRowContent--newsletter-container {
+  display: flex;
+  flex-direction: column;
+}
+.flexRow--newsletter-container .flexRowContent--newsletter-container .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRow--newsletter-container .flexRowContent--newsletter-container .flexRowContent--text-newsletter {
+  display: flex;
+  flex-direction: column;
+}
+
+/* CORREÇÃO BUG SCROLL DA PAG */
+:global(.vtex-store-footer) {
+  margin: 0 !important;
+}

styles/css/vtex.product-quantity.css

@@ -10,7 +10,7 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  width: 149px;
+  width: 100%;
   margin: 0 10px 0 0;
 }
 @media only screen and (max-width: 768px) {

styles/css/vtex.store-components.css

@@ -9,6 +9,7 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
+  width: 100%;
   max-width: 100%;
   padding: 0;
   margin: 0;
@@ -28,11 +29,10 @@
     margin: 0;
   }
 }
-.productImagesGallerySlide .productImage .productImageTag {
+.productImagesGallerySlide .productImage .productImageTag--main {
-  width: 100%;
   max-height: 100% !important;
-  object-fit: contain;
 }
+
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
   margin: 16px 0;
@@ -223,6 +223,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 28px;
   color: #929292;
 }
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input__error) {
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+  margin: 0;
+}
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
   width: 100%;
   margin-bottom: 16px;
@@ -237,6 +243,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
   content: "AVISE-ME";
@@ -270,26 +277,32 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     display: block;
   }
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  position: relative;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
   font-size: 0;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
   content: "CALCULAR FRETE";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #929292;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
   width: 280px;
   height: 49px;
   border-radius: 0;
 }
 @media only screen and (max-width: 768px) {
-  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
     width: 100%;
   }
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+  position: absolute;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
   margin-top: 25px;
@@ -437,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 
 /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
+.productImageTag--description {
-  width: 100%;
+  max-height: 100% !important;
 }
 
 /* DESCRIÇÃO DO PRODUTO */
@@ -460,7 +473,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 @media only screen and (max-width: 1024px) {
   .productDescriptionContainer .productDescriptionTitle {
-    margin-top: 16px;
+    font-size: 20px;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 32px;
   }
 }
 .productDescriptionContainer .productDescriptionText {
@@ -469,3 +487,15 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 22px;
   color: #929292;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

styles/css/vtex.store-footer.css

@@ -1,11 +1,14 @@
-.row--menu-row {
+@charset "UTF-8";
-  padding-right: 24px;
+/*
-}
+0 - 600PX: Phone
-
+600 - 900px: Table portrait
-.row--menu-row .rowContainer {
+900 - 1200px: Tablet landscape
-  align-items: flex-start;
+[1200 - 1800] is where our nortal styles apply
-}
+1800px + : Big desktop
-
+*/
-.row--payment-methods {
+/* Media Query M3 */
-  padding-top: 16px;
+/* Grid breakpoints */
+/* CORREÇÃO BUG DE SCROLL NA PAGINA */
+.socialNetworksContainer {
+  margin: 0 !important;
 }

styles/css/vtex.store-newsletter.css

@@ -13,7 +13,6 @@
   justify-content: center;
   align-items: center;
   background-color: #000000;
-  margin-top: 64px;
   position: relative;
 }
 
@@ -35,9 +34,6 @@
 }
 @media only screen and (max-width: 768px) {
   .emailInputContainer :global(.vtex-input) :global(.vtex-input__error) {
-    width: 100%;
-    top: 32px;
-    left: 18px;
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
@@ -92,3 +88,9 @@
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
+
+.defaultSuccessMessage {
+  color: white;
+  margin: 0 0 16px 0;
+  text-align: center;
+}

styles/css/vtex.tab-layout.css

@@ -9,10 +9,11 @@
 /* Grid breakpoints */
 .container--description {
   padding: 0 40px;
+  margin: 16px 0;
 }
 .container--description .listContainer {
   display: flex;
-  padding: 0 80px;
+  padding: 0 64px;
   border-bottom: 1px solid #b9b9b9;
   justify-content: space-between;
 }
@@ -37,6 +38,11 @@
     margin-bottom: 16px;
   }
 }
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItem {
+    width: 142px;
+  }
+}
 .container--description .listContainer .listItem :global(.vtex-button) {
   background-color: transparent;
   border: none;
@@ -58,6 +64,13 @@
   text-transform: capitalize;
   border-bottom: 2px solid transparent;
 }
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    font-size: 24px;
+    line-height: 38px;
+    border-bottom: 3px solid transparent;
+  }
+}
 .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
   color: #000000;
   border-bottom: 2px solid #000000;
@@ -76,6 +89,11 @@
     border-bottom: none;
   }
 }
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItemActive {
+    border-bottom: 3px solid #000000;
+  }
+}
 .container--description .listContainer .listItemActive :global(.vtex-button) {
   color: #000000;
 }

styles/sass/pages/footer/vtex.store-footer.scss

@@ -0,0 +1,4 @@
+/* CORREÇÃO BUG DE SCROLL NA PAGINA */
+.socialNetworksContainer {
+  margin: 0 !important;
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -71,3 +71,27 @@
     }
   }
 }
+
+/* NEWSLETTER */
+.flexRow--newsletter-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: $color-black-padrao;
+  .flexRowContent--newsletter-container {
+    display: flex;
+    flex-direction: column;
+    .stretchChildrenWidth {
+      width: 100% !important;
+    }
+    .flexRowContent--text-newsletter {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+/* CORREÇÃO BUG SCROLL DA PAG */
+:global(.vtex-store-footer) {
+  margin: 0 !important;
+}

styles/sass/pages/product/vtex.product-quantity.scss

@@ -1,7 +1,7 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  width: 149px;
+  width: 100%;
   margin: 0 10px 0 0;
   @include mq(sm, max) {
     margin: 0 0 10px 0;

styles/sass/pages/product/vtex.store-components.scss

@@ -1,4 +1,5 @@
 .container {
+  width: 100%;
   max-width: 100%;
   padding: 0;
   margin: 0;
@@ -14,12 +15,8 @@
     @include mq(md, max) {
       margin: 0;
     }
-    .productImageTag {
+    .productImageTag--main {
-      width: 100%;
       max-height: 100% !important;
-      object-fit: contain;
-      @include mq(sm, max) {
-      }
     }
   }
 }
@@ -228,6 +225,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
             color: $color-gray-6;
           }
         }
+        :global(.vtex-input__error) {
+          position: absolute;
+          bottom: 40px;
+          right: 0;
+          margin: 0;
+        }
       }
       .submit {
         width: 100%;
@@ -242,6 +245,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
           display: flex;
           align-items: center;
           justify-content: center;
+          cursor: pointer;
           &::before {
             content: "AVISE-ME";
             color: $color-white;
@@ -273,24 +277,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     @include mq(sm, max) {
       display: block;
     }
-    :global(.vtex-input__label) {
+    :global(.vtex-input) {
-      font-size: 0;
+      position: relative;
-      &::before {
+      :global(.vtex-input__label) {
-        content: "CALCULAR FRETE";
+        font-size: 0;
-        font-weight: 400;
+        &::before {
-        font-size: 14px;
+          content: "CALCULAR FRETE";
-        line-height: 19px;
+          font-weight: 400;
-        color: $color-gray-6;
+          font-size: 14px;
-      }
+          line-height: 19px;
-    }
+          color: $color-gray-6;
-    :global(.vtex-input-prefix__group) {
+        }
-      width: 280px;
+      }
-      height: 49px;
+      :global(.vtex-input-prefix__group) {
-      border-radius: 0;
+        width: 280px;
-      @include mq(sm, max) {
+        height: 49px;
-        width: 100%;
+        border-radius: 0;
+        @include mq(sm, max) {
+          width: 100%;
+        }
+      }
+      :global(.vtex-input__error) {
+        position: absolute;
       }
     }
+
     :global(.vtex-address-form__postalCode-forgottenURL) {
       padding: 0;
       margin-top: 25px;
@@ -439,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 
 /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
+.productImageTag--description {
-  width: 100%;
+  max-height: 100% !important;
 }
 
 /* DESCRIÇÃO DO PRODUTO */
@@ -457,7 +468,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     margin-bottom: 8px;
     color: $color-gray13;
     @include mq(md, max) {
-      margin-top: 16px;
+      font-size: 20px;
+    }
+    @include mq(xl, min) {
+      font-size: 32px;
     }
   }
   .productDescriptionText {
@@ -465,5 +479,13 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     font-size: 16px;
     line-height: 22px;
     color: $color-gray14;
+    @include mq(md, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+    @include mq(xl, min) {
+      font-size: 18px;
+      line-height: 25px;
+    }
   }
 }

styles/sass/pages/product/vtex.store-newsletter.scss

@@ -4,7 +4,6 @@
   justify-content: center;
   align-items: center;
   background-color: $color-black-padrao;
-  margin-top: 64px;
   position: relative;
 }
 
@@ -22,9 +21,6 @@
       right: 0;
       margin-right: 16px;
       @include mq(sm, max) {
-        width: 100%;
-        top: 32px;
-        left: 18px;
         font-size: 12px;
         line-height: 16px;
         font-weight: 400;
@@ -75,3 +71,9 @@
     }
   }
 }
+
+.defaultSuccessMessage {
+  color: white;
+  margin: 0 0 16px 0;
+  text-align: center;
+}

styles/sass/pages/product/vtex.tab-layout.scss

@@ -1,8 +1,9 @@
 .container--description {
   padding: 0 40px;
+  margin: 16px 0;
   .listContainer {
     display: flex;
-    padding: 0 80px;
+    padding: 0 64px;
     border-bottom: 1px solid $color-gray11;
     justify-content: space-between;
     @include mq(md, max) {
@@ -21,6 +22,9 @@
         width: 100%;
         margin-bottom: 16px;
       }
+      @include mq(xl, min) {
+        width: 142px;
+      }
 
       :global(.vtex-button) {
         background-color: transparent;
@@ -40,6 +44,11 @@
           line-height: 38px;
           text-transform: capitalize;
           border-bottom: 2px solid transparent;
+          @include mq(xl, min) {
+            font-size: 24px;
+            line-height: 38px;
+            border-bottom: 3px solid transparent;
+          }
           &:hover {
             color: $color-black-padrao;
             border-bottom: 2px solid $color-black-padrao;
@@ -57,6 +66,9 @@
       @include mq(md, max) {
         border-bottom: none;
       }
+      @include mq(xl, min) {
+        border-bottom: 3px solid $color-black-padrao;
+      }
       :global(.vtex-button) {
         color: $color-black-padrao;
       }

styles/sass/utils/_vars.scss

@@ -29,8 +29,8 @@ $grid-breakpoints: (
   cstm: 400,
   sm: 769px,
   md: 1025px,
-  lg: 1921px,
+  lg: 1920px,
-  xl: 1922px,
+  xl: 1921px,
 ) !default;
 
 $z-index: (