Merge pull request 'feature/testId' (#16) from feature/testId into development

Reviewed-on: #16

react/components/Html/styles.css

@@ -107,3 +107,5 @@ max-width:314.4px;
   display: flex;
   flex-direction: column;
  }
+ [class*="html--m3-add-to-cart-button "]{
+  width: 100%; }

react/components/Pix/Pix.css

@@ -30,6 +30,7 @@ font-style: normal;
 font-weight: 700;
 font-size: 18px;
 line-height: 25px;
+margin: 0;
 /* identical to box height */
 
 
@@ -41,6 +42,7 @@ font-style: normal;
 font-weight: 300;
 font-size: 13px;
 line-height: 18px;
+margin: 0;
 /* identical to box height */
 
 

react/components/Pix/Pix.tsx

@@ -37,8 +37,8 @@ const Pix = () => {
         <img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
       </div>
       <div className={handles.handles.pixResult}>
-        <span className={handles.handles.pixResultValue}> R$ {strResult}</span>
+        <p className={handles.handles.pixResultValue}> R$ {strResult}</p>
-        <span className={handles.handles.pixResultPercent}>10 % de desconto</span>
+        <p className={handles.handles.pixResultPercent}>10 % de desconto</p>
       </div>
     </div >
   );

store/blocks/pdp/product-shelf-related.jsonc

@@ -4,10 +4,7 @@
       "blockClass": "m3-shelf-retaletd"
     },
     "blocks": ["product-summary.shelf#m3-shelf-retaletd-content"],
-    "children": [
+    "children": ["rich-text#m3-shelf-related-title", "html#slider-layout"]
-      "rich-text#m3-shelf-related-title",
-      "slider-layout#m3-carousel-products"
-    ]
   },
   "product-summary.shelf#m3-shelf-retaletd-content": {
     "props": {
@@ -33,6 +30,12 @@
       "message": "de {listPriceValue} por"
     }
   },
+  "html#slider-layout": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#m3-carousel-products"]
+  },
   "slider-layout#m3-carousel-products": {
     "props": {
       "blockClass": "m3-carousel-products",

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#tab-product",
+      "html#tab-layout",
       "list-context.product-list#m3-shelf-retaletd",
       "newsletter#m3-newsletter",
       "product-questions-and-answers"
@@ -55,7 +55,7 @@
       "blockClass": "product"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "html#product-images",
       "product-bookmark",
       "product-specification-badges"
     ]
@@ -76,6 +76,12 @@
       "rowGap": 0
     }
   },
+  "html#product-images": {
+    "props": {
+      "testId": "product-images"
+    },
+    "children": ["flex-layout.row#product-image"]
+  },
   "flex-layout.row#product-image": {
     "children": ["product-images"]
   },
@@ -100,14 +106,13 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "product-installments#parcelas",
+      "html#product-installments",
-      "m3-pix",
+      "html#m3-pix",
-      "sku-selector",
+      "html#sku-selector",
-      "product-assembly-options",
       "product-gifts",
       "html#buy-button",
       "availability-subscriber",
@@ -115,6 +120,26 @@
     ]
   },
 
+  "html#product-identifier.product": {
+    "props": { "testId": "product-code" },
+    "children": ["product-identifier.product"]
+  },
+  "html#selling-price": {
+    "props": { "testId": "product-price" },
+    "children": ["flex-layout.row#selling-price"]
+  },
+  "html#m3-pix": {
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["m3-pix"]
+  },
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments#parcelas"]
+  },
   "product-installments#parcelas": {
     "props": {
       "blockClass": "desconto",
@@ -123,13 +148,24 @@
       "message": "{installmentsNumber} <x>x</x> de {installmentValue} sem juros"
     }
   },
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
     },
     "children": ["vtex.store-components:product-name"]
   },
-
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -143,12 +179,19 @@
       "marginBottom": 7,
       "paddingRight": 0
     },
-    "children": ["html#sizeQuantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "html#add-to-cart-button"]
   },
-  "html#sizeQuantity": {
+  "html#add-to-cart-button": {
+    "props": {
+      "blockClass": "m3-add-to-cart-button",
+      "testId": "add-to-cart-button"
+    },
+    "children": ["add-to-cart-button"]
+  },
+  "html#product-quantity": {
     "props": {
       "blockClass": "quantity",
-      "testid": "product-quantity"
+      "testId": "product-quantity"
     },
     "children": ["product-quantity#size"]
   },
@@ -182,17 +225,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-identifier.product",
       "flex-layout.row#availability",
       "sku-selector"
     ]
   },
-  // "flex-layout.row#identifieAndName": {
+
-  //   "props": {
-  //     "blockClass": "identifieAndName"
-  //   },
-  //   "children": ["flex-layout.row#product-name", "product-identifier.product"]
-  // },
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
@@ -203,7 +241,7 @@
     "props": {
       "blockClass": "m3-shipping-simulator"
     },
-    "children": ["rich-text", "shipping-simulator"]
+    "children": ["rich-text", "html#shipping-simulator"]
   },
   "rich-text": {
     "props": {
@@ -212,6 +250,12 @@
       "text": "Calcular o frete"
     }
   },
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
 
   "share#default": {
     "props": {

store/blocks/pdp/tab-layout-product.jsonc

@@ -1,4 +1,11 @@
 {
+  "html#tab-layout": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#tab-product"]
+  },
+
   "tab-layout#tab-product": {
     "children": ["tab-list#tab-product", "tab-content#tab-product"],
     "props": {
@@ -101,6 +108,7 @@
     },
     "children": ["product-images#imageDescription", "product-description"]
   },
+
   "product-description": {
     "props": {
       "collapseContent": false

styles/css/vtex.store-components.css

@@ -133,8 +133,9 @@
 .shippingContainer :global(.vtex-address-form__postalCode) {
   display: flex;
 }
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .shippingContainer :global(.vtex-address-form__postalCode) {
+    width: 100%;
     flex-direction: column;
   }
 }
@@ -158,6 +159,14 @@
     position: initial;
   }
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: auto;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   display: none;
 }
@@ -170,6 +179,11 @@
   max-width: 231px;
   height: 49px;
 }
+@media (max-width: 768px) {
+  .shippingContainer :global(.vtex-input-prefix__group) {
+    max-width: none;
+  }
+}
 .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input),
 .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
   font-family: "Open Sans";

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

@@ -142,7 +142,8 @@
   :global(.vtex-address-form__postalCode) {
     display: flex;
 
-    @media (max-width:1024px) {
+    @media (max-width:768px) {
+      width: 100%;
       flex-direction: column;
     }
 
@@ -166,6 +167,13 @@
         position: initial;
       }
 
+      @media (max-width:768px) {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: auto;
+      }
+
       :global(.vtex__icon-external-link) {
         display: none;
       }
@@ -182,6 +190,9 @@
     max-width: 231px;
     height: 49px;
 
+    @media (max-width:768px) {
+      max-width: none;
+    }
 
 
     :global(.vtex-address-form-4-x-input),