feat: adição tests id

react/Parcelamento.tsx

@@ -1,3 +0,0 @@
-import Parcelamento from './components/Parcelamento/Parcelamento'
-
-export default Parcelamento

react/components/Html/style.css

@@ -5,10 +5,20 @@
   margin-bottom: 16px;
 }
 
-[class*='html--Quantity-Button'] > [class*='button'] {
+[class*='html--Quantity-Button'] > [class*='html--addButton'] {
   width: 100%;
+}
+
+[class*='html--Quantity-Button']
+  > [class*='html--addButton']
+  > [class*='button'] {
   height: 49px;
   background: #000;
   border: #000;
   border-radius: 0;
 }
+
+[class*='html--Prateleira'] {
+  display: flex;
+  flex-direction: column;
+}

react/components/Parcelamento/Parcelamento.css

@@ -1,3 +0,0 @@
-.ParcelaWrapper {
-  margin: 0 0 8px 0;
-}

react/components/Parcelamento/Parcelamento.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { useProduct } from 'vtex.product-context'
-import { useCssHandles } from 'vtex.css-handles'
-
-import "./Parcelamento.css"
-
-const Parcelamento = () => {
-  const CSS_HANDLES = ['ParcelaWrapper']
-
-  const handles = useCssHandles(CSS_HANDLES)
-  const product = useProduct()
-
-  const Installments = {
-    numberOfInstallments:
-      product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
-        .NumberOfInstallments,
-  }
-  const Price = {
-    numberOfInstallments:
-      product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
-  }
-  console.log(product)
-  return (
-    <p className={handles.handles.ParcelaWrapper}>
-      {Installments.numberOfInstallments}&nbsp;x&nbsp;de&nbsp;R$&nbsp;
-      {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem
-      juros
-    </p>
-  )
-}
-
-export default Parcelamento

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#desc",
+      "html#tab-layout#desc",
       "flex-layout.row#specifications-title",
       "list-context.product-list#demo1",
       "product-questions-and-answers",
@@ -106,31 +106,55 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#codigo",
       "product-rating-summary",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "Parcelamento",
+      "html#product-installments",
-      "pix",
+      "html#pix",
-      "sku-selector",
+      "html#sku-selector",
       "html#quantityAndButton",
       "Placeholder",
       "product-assembly-options",
       "product-gifts",
       "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
-
+  "html#selling-price": {
-  "shipping-simulator": {
     "props": {
-      "testId": "shipping-simulator"
+      "testId": "product-price"
-    }
+    },
+    "children": ["product-selling-price"]
   },
 
-  "flex-layout.row#product-name": {
+  "html#product-installments": {
     "props": {
-      "marginBottom": 3
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+  "html#pix": {
+    "props": {
+      "testId": "pix-price",
+      "blockClass": "pix"
+    },
+    "children": ["pix"]
+  },
+
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator",
+      "blockClass": "shippingSimulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
+  "html#product-name": {
+    "props": {
+      "marginBottom": 3,
+      "testId": "product-name",
+      "blockClass": "productName"
     },
     "children": ["vtex.store-components:product-name"]
   },
@@ -154,11 +178,31 @@
       "showValueNameForImageVariation": true
     }
   },
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
   "html#quantityAndButton": {
     "props": {
       "blockClass": "Quantity-Button"
     },
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "html#add-to-cart-button"]
+  },
+  "html#add-to-cart-button": {
+    "props": {
+      "testId": "add-to-cart-button",
+      "blockClass": "addButton"
+    },
+    "children": ["add-to-cart-button"]
+  },
+
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
   },
 
   "flex-layout.row#product-availability": {
@@ -180,12 +224,19 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#codigo",
-      "sku-selector",
+      "html#sku-selector",
       "flex-layout.row#availability"
     ]
   },
+  "html#codigo": {
+    "props": {
+      "blockClass": "codigo",
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
@@ -211,6 +262,14 @@
     "children": ["product-description"]
   },
 
+  "html#tab-layout#desc": {
+    "props": {
+      "testId": "product-description",
+      "blockClass": "tabDescription"
+    },
+    "children": ["tab-layout#desc"]
+  },
+
   "tab-layout#desc": {
     "children": ["tab-list#home", "tab-content#desc"],
     "props": {
@@ -321,18 +380,11 @@
 
   "list-context.product-list#demo1": {
     "blocks": ["product-summary.shelf#demo1"],
-    "children": ["slider-layout#demo-products"]
+    "children": ["html#slider-layout"]
   },
 
   "product-summary.shelf#demo1": {
-    "children": [
+    "children": ["html#sliderPrateleira"]
-      "product-summary-name",
-      "product-summary-description",
-      "product-summary-image",
-      "product-summary-price",
-      "product-summary-sku-selector",
-      "product-summary-buy-button"
-    ]
   },
 
   "product-summary-image": {
@@ -343,6 +395,25 @@
     }
   },
 
+  "html#sliderPrateleira": {
+    "props": {
+      "testId": "vtex-product-summary",
+      "blockClass": "Prateleira"
+    },
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-list-price",
+      "product-selling-price"
+    ]
+  },
+  "html#slider-layout": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#demo-products"]
+  },
+
   "slider-layout#demo-products": {
     "props": {
       "itemsPerPage": {

styles/css/vtex.flex-layout.css

@@ -10,6 +10,12 @@
 :global(.vtex-store-components-3-x-container) {
   padding: 0 40px;
 }
+@media (max-width: 1024px) {
+  :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: column;
+  }
+}
 :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
   max-height: none;
 }

styles/css/vtex.slider-layout.css

@@ -36,7 +36,6 @@
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
   display: flex;
-  order: 1;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
   display: none;
@@ -47,7 +46,6 @@
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
   display: flex;
-  order: 2;
   padding: 0;
   justify-content: center;
 }
@@ -64,19 +62,13 @@
   text-align: center;
   color: #000;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) {
-  display: flex;
-  order: 3;
-  padding: 0;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-decoration-line: line-through;
+  margin: 0;
-  gap: 1px;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -84,11 +76,9 @@
   line-height: 19px;
   text-align: center;
   color: #bababa;
-  text-transform: lowercase;
-  text-decoration: none;
   padding: 0;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -96,23 +86,14 @@
   line-height: 19px;
   text-align: center;
   color: #bababa;
-  text-decoration: none;
   padding: 0;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after {
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) {
-  content: "por";
+  display: flex;
-  font-family: "Open Sans", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  text-align: center;
-  color: #bababa;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
   padding: 0;
+  justify-content: center;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) {
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -121,21 +102,6 @@
   text-align: center;
   color: #000;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
-  display: none;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) {
-  display: none;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) {
-  display: none;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) {
-  display: none;
-}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
-  display: none;
-}
 .sliderLayoutContainer .paginationDotsContainer {
   align-items: center;
 }

styles/css/vtex.store-components.css

@@ -133,6 +133,12 @@
 .skuSelectorContainer .skuSelectorInternalBox {
   border-radius: 50%;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin-left: 0 !important;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
   font-size: 0;

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

@@ -1,8 +1,14 @@
 :global(.vtex-store-components-3-x-container) {
   padding: 0 40px;
 
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    @media (max-width: 1024px) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   :global(.vtex-store-components-3-x-productImageTag) {
-    // max-height: 664px !important;
     max-height: none;
   }
 }

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

@@ -30,7 +30,6 @@
               padding: 0;
               :global(.vtex-product-summary-2-x-imageContainer) {
                 display: flex;
-                order: 1;
 
                 :global(.vtex-store-components-3-x-discountContainer) {
                   :global(.vtex-store-components-3-x-discountInsideContainer) {
@@ -46,7 +45,6 @@
               }
               :global(.vtex-product-summary-2-x-nameContainer) {
                 display: flex;
-                order: 2;
                 padding: 0;
                 justify-content: center;
 
@@ -65,19 +63,13 @@
                   color: #000;
                 }
               }
-              :global(.vtex-product-summary-2-x-priceContainer) {
+              :global(.vtex-product-price-1-x-listPrice) {
-                display: flex;
-                order: 3;
-                padding: 0;
-
-                :global(.vtex-store-components-3-x-listPrice) {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                  text-decoration-line: line-through;
+                margin: 0;
-                  gap: 1px;
 
-                  :global(.vtex-store-components-3-x-listPriceLabel) {
+                :global(.vtex-product-price-1-x-listPriceValue) {
                   font-family: 'Open Sans', sans-serif;
                   font-style: normal;
                   font-weight: 400;
@@ -85,11 +77,9 @@
                   line-height: 19px;
                   text-align: center;
                   color: #bababa;
-                    text-transform: lowercase;
-                    text-decoration: none;
                   padding: 0;
                 }
-                  :global(.vtex-store-components-3-x-listPriceValue) {
+                :global(.vtex-product-price-1-x-currencyContainer) {
                   font-family: 'Open Sans', sans-serif;
                   font-style: normal;
                   font-weight: 400;
@@ -97,25 +87,25 @@
                   line-height: 19px;
                   text-align: center;
                   color: #bababa;
-                    text-decoration: none;
                   padding: 0;
                 }
               }
-                :global(.vtex-store-components-3-x-listPrice)::after {
+              // :global(.vtex-product-price-1-x-listPriceValue)::after {
-                  content: 'por';
+              //   content: 'por';
-                  font-family: 'Open Sans', sans-serif;
+              //   font-family: 'Open Sans', sans-serif;
-                  font-style: normal;
+              //   font-style: normal;
-                  font-weight: 400;
+              //   font-weight: 400;
-                  font-size: 14px;
+              //   font-size: 14px;
-                  line-height: 19px;
+              //   line-height: 19px;
-                  text-align: center;
+              //   text-align: center;
-                  color: #bababa;
+              //   color: #bababa;
-                }
+              // }
 
-                :global(.vtex-store-components-3-x-sellingPrice) {
+              :global(.vtex-product-price-1-x-sellingPrice) {
+                display: flex;
                 padding: 0;
-
+                justify-content: center;
-                  :global(.vtex-product-summary-2-x-currencyContainer) {
+                :global(.vtex-product-price-1-x-sellingPriceValue) {
                   font-family: 'Open Sans', sans-serif;
                   font-style: normal;
                   font-weight: 700;
@@ -124,25 +114,6 @@
                   text-align: center;
                   color: #000;
                 }
-
-                  :global(.vtex-store-components-3-x-sellingPriceLabel) {
-                    display: none;
-                  }
-                }
-
-                :global(.vtex-store-components-3-x-installmentsPrice) {
-                  display: none;
-                }
-              }
-
-              :global(.vtex-product-summary-2-x-buyButtonContainer) {
-                display: none;
-              }
-              :global(.vtex-product-summary-2-x-description) {
-                display: none;
-              }
-              :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
-                display: none;
               }
             }
           }
@@ -152,7 +123,6 @@
   }
   .paginationDotsContainer {
     align-items: center;
-    // bottom: -32px;
 
     .paginationDot {
       width: 10px;

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

@@ -137,6 +137,10 @@
 
   .skuSelectorSubcontainer--cor {
     .skuSelectorNameContainer {
+      margin: 0;
+      .skuSelectorOptionsList {
+        margin-left: 0 !important;
+      }
       .skuSelectorTextContainer {
         .skuSelectorName,
         .skuSelectorSelectorImageValue {