From faa3fcd43663a9e27f38d95f07bdb369e2e94d0d Mon Sep 17 00:00:00 2001
From: Izabela Balizardo <izah_rb@hotmail.com>
Date: Fri, 10 Feb 2023 21:28:44 -0300
Subject: [PATCH] feat: Adiciona testID

---
 react/components/Html/styles.css              |  10 +-
 react/components/Pix/Pix.tsx                  |   2 +-
 store/blocks/pdp/product.jsonc                | 136 +++++++++++++++---
 store/blocks/product-price.jsonc              |   8 ++
 styles/css/vtex.flex-layout.css               |  16 ++-
 styles/css/vtex.store-components.css          |   8 +-
 .../sass/pages/product/vtex.flex-layout.scss  |  17 ++-
 .../pages/product/vtex.store-components.scss  |   8 +-
 8 files changed, 170 insertions(+), 35 deletions(-)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 4092d9d..ff94055 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -205,9 +205,10 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
   color: rgba(0, 0, 0, 0.58);
 }
 
-[class*="pix-p"] span {
+[class*="pix-p"] p {
+  display: inline;
   font-family: "Open Sans";
-  top: -10px;
+
   position: relative;
   font-size: 13px;
   font-weight: 300;
@@ -215,3 +216,8 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
   margin-top: 10px;
   text-align: left;
 }
+
+
+.html--botaoadc-quantidade {
+  display: flex;
+}
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
index 0c1d515..21edb0a 100644
--- a/react/components/Pix/Pix.tsx
+++ b/react/components/Pix/Pix.tsx
@@ -19,7 +19,7 @@ const Pix = () => {
             .toFixed(2)
             .replace(".", ",")}`}
           <div className="pix-p">
-            <span>10% de desconto</span>
+            <p>10% de desconto</p>
           </div>
         </div>
       </div>
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 5992115..263d29b 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,13 +3,20 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#descricao",
+      "html#tab-layout",
       "list-context.product-list#list",
       "product-questions-and-answers",
       "newsletter"
     ]
   },
 
+  "html#tab-layout": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#descricao"]
+  },
+
   "tab-layout#descricao": {
     "children": ["tab-list#descricao", "tab-content#descricao"],
 
@@ -113,28 +120,57 @@
     }
   },
 
-  "rich-text#prat-titulo":{
+  "rich-text#prat-titulo": {
     "props": {
       "textAlignment": "CENTER",
-      "textPosition":"CENTER",
+      "textPosition": "CENTER",
       "text": "Você também pode gostar:",
-      "blockClass":"shelfTitleText"
+      "blockClass": "shelfTitleText"
     }
   },
 
   "list-context.product-list#list": {
     "blocks": ["product-summary.shelf#carrosselprodutos"],
-    "children": [ "rich-text#prat-titulo","slider-layout#carrosselatualizado"]
+    "children": ["rich-text#prat-titulo", "html#slider"]
   },
 
   "product-summary.shelf#carrosselprodutos": {
+    "children": ["html#product-summary"]
+  },
+
+  "html#product-summary": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-summary-price"
+      "product-list-price#summary",
+      "product-selling-price#summary"
     ]
   },
 
+  "html#product-list-price#summary": {
+    "props": {
+      "blockClass": "preco-prateleira"
+    },
+    "children": ["product-list-price"]
+  },
+
+  "html#selling-price#summary": {
+    "props": {
+      "blockClass": "preco-riscado"
+    },
+    "children": ["product-selling-price"]
+  },
+
+  "html#slider": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#carrosselatualizado"]
+  },
+
   "slider-layout#carrosselatualizado": {
     "props": {
       "itemsPerPage": {
@@ -183,6 +219,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass": "container-main",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -190,6 +227,8 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
+
+
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
 
@@ -221,6 +260,13 @@
     }
   },
   "flex-layout.row#product-image": {
+    "children": ["html#product-image"]
+  },
+
+  "html#product-image": {
+    "props": {
+      "testId": "product-images"
+    },
     "children": ["product-images"]
   },
   "product-images": {
@@ -241,27 +287,63 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-name",
+      "html#codigo",
+
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
-      "Pix",
-      "sku-selector",
-      "product-quantity",
+      "html#product-installments",
+      "html#pix",
+      "html#sku-selector",
+      "html#container-buttonquantity",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator",
       "share#default"
     ]
   },
 
-  "flex-layout.row#product-name": {
+  "html#container-buttonquantity": {
     "props": {
-      "marginBottom": 3
+      "blockClass": "botaoadc-quantidade"
+    },
+    "children": ["html#product-quantity", "flex-layout.row#buy-button"]
+  },
+
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+
+  "html#pix": {
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["Pix"]
+  },
+  "html#product-name": {
+    "props": {
+      "marginBottom": 3,
+      "testId": "product-name"
     },
     "children": ["vtex.store-components:product-name"]
   },
@@ -273,15 +355,28 @@
     }
   },
 
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
       "marginBottom": 7,
       "blockClass": "btn-product"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["html#add-to-cart-button"]
   },
 
+  "html#add-to-cart-button": {
+    "props": {
+      "testId": "add-to-cart-button"
+    },
+    "children": ["add-to-cart-button"]
+  },
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
@@ -307,6 +402,13 @@
       "flex-layout.row#availability"
     ]
   },
+
+  "html#codigo": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc
index 779175f..35d589c 100644
--- a/store/blocks/product-price.jsonc
+++ b/store/blocks/product-price.jsonc
@@ -6,7 +6,15 @@
       "preventHorizontalStretch": true,
       "marginBottom": 4
     },
+    "children": ["html#selling-price"]
+  },
+
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
     "children": ["product-selling-price"]
+
   },
 
   "flex-layout.row#list-price-savings": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 9103249..b071c30 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -8,22 +8,28 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+.flexRowContent--btn-product {
+  margin: 0;
+}
+
 .flexRow--btn-product {
   width: 100%;
-  max-width: 380px;
-  bottom: 75px;
-  position: relative;
-  left: 155px;
+  margin: 0 10px;
 }
 .flexRow--btn-product :global(.vtex-button) {
   background-color: black;
   border: 1px solid black;
   border-radius: 0;
-  height: 49px;
+  padding: 12px;
+  margin: 0;
 }
 .flexRow--btn-product :global(.vtex-button):hover {
   background-color: rgb(36, 36, 36);
 }
 .flexRow--btn-product .flexRow--btn-product--botao-adicionar {
   font-family: "Open Sans", sans-serif;
+}
+
+.flexRowContent--container-main {
+  padding: 0 40px;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0ea0d2d..aefd9ab 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -47,13 +47,18 @@
   margin: 16px;
 }
 .newsletter .inputGroup {
-  width: 774px;
+  display: flex;
 }
 .newsletter .inputGroup :global(.vtex-input-prefix__group) {
   border: none;
   border-bottom: 1px solid gray;
   border-radius: 0;
 }
+@media screen and (min-width: 768px) {
+  .newsletter .inputGroup {
+    width: 774px;
+  }
+}
 .newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
   background-color: black;
 }
@@ -115,7 +120,6 @@
 .shippingContainer {
   display: flex;
   position: relative;
-  bottom: 76px;
 }
 .shippingContainer :global(.vtex-button) {
   background-color: black;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 4b3a82b..9a6460b 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -8,19 +8,20 @@
 //   border-radius: 0px;
 // }
 
+.flexRowContent--btn-product {
+  margin: 0;
+}
+
 .flexRow--btn-product {
   width: 100%;
-
-  max-width: 380px;
-  bottom: 75px;
-  position: relative;
-  left: 155px;
+  margin: 0 10px;
 
   :global(.vtex-button) {
     background-color: black;
     border: 1px solid black;
     border-radius: 0;
-    height: 49px;
+    padding: 12px;
+    margin: 0;
 
     &:hover {
       background-color: rgb(36, 36, 36);
@@ -31,3 +32,7 @@
     font-family: "Open Sans", sans-serif;
   }
 }
+
+.flexRowContent--container-main {
+  padding: 0 40px;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index d890de7..62346e9 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -44,13 +44,17 @@
   }
 
   .inputGroup {
-    width: 774px;
+    display: flex;
     :global(.vtex-input-prefix__group) {
       border: none;
       border-bottom: 1px solid gray;
       border-radius: 0;
     }
 
+    @media screen and (min-width: 768px) {
+      width: 774px;
+    }
+
     :global(.vtex-styleguide-9-x-input) {
       background-color: black;
     }
@@ -127,7 +131,7 @@
 .shippingContainer {
   display: flex;
   position: relative;
-  bottom: 76px;
+
   :global(.vtex-button) {
     background-color: black;
     width: 70px;