From 86374839764a488bf31480bab0bba5a0a633035b Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Mon, 30 Jan 2023 20:03:38 -0300
Subject: [PATCH 1/9] =?UTF-8?q?feat:inicializando=20especifica=C3=A7=C3=A3?=
 =?UTF-8?q?o=20de=20compras?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/blocks/pdp/product.jsonc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 1502415..dc8d388 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -44,7 +44,7 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack"]
+    "children": ["flex-layout.col#stack","flex-layout.col#right-col"]
   },
 
   "stack-layout": {

From 40394780af8072ea2f52691efe0259c2ff0ebe85 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Tue, 31 Jan 2023 01:11:52 -0300
Subject: [PATCH 2/9] =?UTF-8?q?feat(dados=5Fde=5Fcompra):estilzando=20esti?=
 =?UTF-8?q?lizando=20op=C3=A7=C3=B5es=20de=20cores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/Todo.md                                  | 15 +++--
 store/blocks/pdp/product.jsonc                |  2 +-
 styles/css/vtex.store-components.css          | 45 ++++++++-----
 .../pages/product/vtex.store-components.scss  | 66 ++++++++++++-------
 4 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/docs/Todo.md b/docs/Todo.md
index c478340..ae7193a 100644
--- a/docs/Todo.md
+++ b/docs/Todo.md
@@ -11,19 +11,20 @@ os Requisitos cobrados serão:
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
 
-- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c}
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](dados_do_produto_e_de_compra-ao_lado_das_imagens){
 
-      - [x] 1. BreadCrumb;
+      - [x]  1. BreadCrumb; {cm:2023-01-31}
 
-      - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
+      - [x]  2. todo o bloco de imagens do produto, {cm:2023-01-31}
 
-      - HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo,
+      - HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens
 
-      - HACK 4. prateleira de produtos,
+      - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo,
 
-      - HACK 5. Newsletter.
+      - HACK 5. prateleira de produtos,
+
+      - HACK 6. Newsletter.
 
-      - HACK dados_do_produto_e_de_compra-ao_lado_das_imagens
 }
 
 
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index dc8d388..6a4205a 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -44,7 +44,7 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack","flex-layout.col#right-col"]
+    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
 
   "stack-layout": {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index b055542..7bd52fc 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -7,36 +7,45 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.skuSelectorContainer--m3-custom-sku-selector {
+.skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
 }
-.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector {
-  border-radius: 50%;
+.skuSelectorContainer .skuSelectorItemImage {
+  width: 48px;
+  height: 48px;
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
+.skuSelectorContainer .skuSelectorItem--selected .frameAround {
+  border-radius: 24px;
+  border: 2px solid #000000;
+}
+.skuSelectorContainer .frameAround {
+  width: 48px;
+  height: 48px;
+  z-index: 5;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
   text-transform: uppercase;
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
   content: "ES:";
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
   content: "OUTRAS ";
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
-  text-transform: uppercase;
+.skuSelectorContainer .skuSelectorInternalBox {
+  border: 2px solid #B9B9B9;
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
-  content: "S:";
+.skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox {
+  width: 100%;
+  border-radius: 24px;
 }
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
-  content: "OUTROS ";
-}
-.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector {
-  border-radius: 50%;
-}
-.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector {
-  border-radius: 50%;
+.skuSelectorContainer .diagonalCross {
+  border-radius: 24px;
 }
 
 .carouselContainer {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 38f013e..a4875f3 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,9 +1,24 @@
-.skuSelectorContainer--m3-custom-sku-selector{
+.skuSelectorContainer{
   display: flex;
   flex-direction: column-reverse;
-
-  .frameAround--m3-custom-sku-selector{
-    border-radius: 50%;
+  .skuSelectorItemImage{
+    width: 48px;
+    height: 48px;
+  }
+  .skuSelectorItem--selected{
+    .frameAround{
+      border-radius: 24px;
+      border: 2px solid #000000
+    }
+  }
+  .frameAround{
+    width: 48px;
+    height: 48px;
+    z-index: 5;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
   }
   .skuSelectorSubcontainer-{
     &-cor{
@@ -19,29 +34,32 @@
         }
       }
     }
-    &-tamanho{
-      .skuSelectorTextContainer{
-        .skuSelectorName{
-          text-transform: uppercase;
-          &::after{
-              content: "S:";
-            }
-            &::before{
-                content: "OUTROS ";
-              }
-        }
-      }
+    // &-tamanho{
+    //   .skuSelectorTextContainer{
+    //     .skuSelectorName{
+    //       text-transform: uppercase;
+    //       &::after{
+    //           content: "S:";
+    //         }
+    //         &::before{
+    //             content: "OUTROS ";
+    //           }
+    //     }
+    //   }
+    // }
+  }
+
+    .skuSelectorInternalBox{
+        border: 2px solid #B9B9B9;
     }
-  }
-
-
-    .skuSelectorItemImageValue--m3-custom-sku-selector{
-          border-radius: 50%;
+    .skuSelectorItemImageValue,.skuSelectorInternalBox{
+          width: 100%;
+          border-radius: 24px;
       }
 
-  .diagonalCross--m3-custom-sku-selector{
-    border-radius: 50%;
-  }
+    .diagonalCross{
+      border-radius: 24px;
+    }
 }
 
 .carouselContainer{

From b3654c7c33d143d7cdec23aa76d81aff5130d54b Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Tue, 31 Jan 2023 20:56:56 -0300
Subject: [PATCH 3/9] feat(dados_de_compra):seletores de sku estilizados

---
 docs/Todo.md                                  |  2 +
 store/blocks/pdp/product.jsonc                |  3 +-
 styles/css/vtex.store-components.css          | 21 ++++++++++
 .../pages/product/vtex.store-components.scss  | 38 ++++++++++++-------
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/docs/Todo.md b/docs/Todo.md
index ae7193a..9373b63 100644
--- a/docs/Todo.md
+++ b/docs/Todo.md
@@ -24,6 +24,8 @@ os Requisitos cobrados serão:
       - HACK 5. prateleira de produtos,
 
       - HACK 6. Newsletter.
+      
+      - HACK 7. fazer o pix.
 
 }
 
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a4205a..6ebd4aa 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -124,7 +124,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "name": "Outro Tamanho"
     }
   },
 
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 7bd52fc..157592a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -37,6 +37,27 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
   content: "OUTRAS ";
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  top: -2px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
+  content: "S:";
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTROS ";
+}
 .skuSelectorContainer .skuSelectorInternalBox {
   border: 2px solid #B9B9B9;
 }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index a4875f3..3aa8e83 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -34,19 +34,31 @@
         }
       }
     }
-    // &-tamanho{
-    //   .skuSelectorTextContainer{
-    //     .skuSelectorName{
-    //       text-transform: uppercase;
-    //       &::after{
-    //           content: "S:";
-    //         }
-    //         &::before{
-    //             content: "OUTROS ";
-    //           }
-    //     }
-    //   }
-    // }
+    &-tamanho{
+      .frameAround{
+        width: 40px;
+        height: 40px;
+        top: -2px;
+      }
+      .skuSelectorItemTextValue{
+        padding: 0;
+      }
+      .skuSelectorInternalBox{
+        width: 40px;
+        height: 40px;
+      }
+      .skuSelectorTextContainer{
+        .skuSelectorName{
+          text-transform: uppercase;
+          &::after{
+              content: "S:";
+            }
+            &::before{
+                content: "OUTROS ";
+              }
+        }
+      }
+    }
   }
 
     .skuSelectorInternalBox{

From ce479e5038b150dd4d88d70de6cf59745c1e881d Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Wed, 1 Feb 2023 01:10:52 -0300
Subject: [PATCH 4/9] feat(product-price):dados de parcelamento estilizado

---
 docs/Todo.md                                  |  2 +-
 react/Example.tsx                             |  2 +-
 react/components/Example/Example.tsx          |  4 ++--
 store/blocks/pdp/product.jsonc                | 19 ++++++++++++++++---
 styles/css/vtex.product-price.css             | 18 ++++++++++++++++++
 styles/css/vtex.store-components.css          |  1 +
 .../sass/pages/product/vtex.flex-layout.scss  |  1 +
 .../pages/product/vtex.product-price.scss     | 19 +++++++++++++++++++
 .../pages/product/vtex.store-components.scss  |  1 +
 9 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-price.scss

diff --git a/docs/Todo.md b/docs/Todo.md
index 9373b63..5a87d91 100644
--- a/docs/Todo.md
+++ b/docs/Todo.md
@@ -25,7 +25,7 @@ os Requisitos cobrados serão:
 
       - HACK 6. Newsletter.
       
-      - HACK 7. fazer o pix.
+      - HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
 
 }
 
diff --git a/react/Example.tsx b/react/Example.tsx
index 7d550e5..fe63560 100644
--- a/react/Example.tsx
+++ b/react/Example.tsx
@@ -1,3 +1,3 @@
 import Example from "./components/Example/Example";
 
-export default Example;
\ No newline at end of file
+export default Example;
diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx
index d195271..7b05f06 100644
--- a/react/components/Example/Example.tsx
+++ b/react/components/Example/Example.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 const Example = () => {
   return (
-    <div>Example</div>
+    <div>Example um</div>
   )
 }
 
-export default Example
\ No newline at end of file
+export default Example
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6ebd4aa..f50c05c 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -80,6 +80,7 @@
   },
   "product-images": {
     "props": {
+      "testid": "product-images",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
@@ -101,7 +102,6 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
       "product-identifier.product",
       "sku-selector",
       "product-quantity",
@@ -113,6 +113,20 @@
       "share#default"
     ]
   },
+  "product-installments": {
+    "props": {
+      "message": "{installmentsNumber}  de {installmentValue} sem juros"
+    }
+  },
+
+
+  "product-identifier.product": {
+    "props": {
+      "label": "hide", //'default' | 'custom' | 'hide'
+      "customLabel": "teste", // text if label is custom
+      "idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
+    }
+  },
 
   "flex-layout.row#product-name": {
     "props": {
@@ -124,8 +138,7 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true,
-      "name": "Outro Tamanho"
+      "showValueNameForImageVariation": true
     }
   },
 
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 65c01fc..1f87cfd 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -89,4 +89,22 @@
 :global(.vtex-shelf-1-x-slide) .listPrice {
   text-align: center;
   margin-bottom: 16px;
+}
+
+.savings, .listPriceValue {
+  display: none;
+}
+
+.installments {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments .installmentsNumber, .installments .installmentValue {
+  font-weight: 700;
+}
+.installments .installmentsNumber::after {
+  content: "x";
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 157592a..8505db4 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -66,6 +66,7 @@
   border-radius: 24px;
 }
 .skuSelectorContainer .diagonalCross {
+  border: 1px solid #D5D5D5;
   border-radius: 24px;
 }
 
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index c460e83..e564bb5 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -115,3 +115,4 @@
   }
 }
 
+
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
new file mode 100644
index 0000000..bcccabb
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,19 @@
+.savings,.listPriceValue{
+  display: none;
+}
+.installments{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  // font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  .installmentsNumber,.installmentValue{
+    font-weight: 700;
+  }
+  .installmentsNumber{
+      &::after{
+        content: "x";
+      }
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 3aa8e83..ec0afa9 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -70,6 +70,7 @@
       }
 
     .diagonalCross{
+      border: 1px solid #D5D5D5;
       border-radius: 24px;
     }
 }

From 4ca8f60f5010a0b83045cb50e35efbf292fe29eb Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Wed, 1 Feb 2023 01:36:05 -0300
Subject: [PATCH 5/9] feat(skuName):nome do produto estilizado

---
 docs/Todo.md                                  |  2 ++
 styles/css/vtex.store-components.css          | 10 ++++++++++
 .../pages/product/vtex.product-price.scss     | 19 -------------------
 .../pages/product/vtex.store-components.scss  | 10 +++++++++-
 styles/sass/pages/vtex.product-price.scss     | 18 ++++++++++++++++++
 5 files changed, 39 insertions(+), 20 deletions(-)
 delete mode 100644 styles/sass/pages/product/vtex.product-price.scss

diff --git a/docs/Todo.md b/docs/Todo.md
index 5a87d91..33bb2c5 100644
--- a/docs/Todo.md
+++ b/docs/Todo.md
@@ -27,6 +27,8 @@ os Requisitos cobrados serão:
       
       - HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
 
+      - FIXME COLOCAR OS TESTESID!!!!!
+
 }
 
 
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8505db4..c6e40f2 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -70,6 +70,16 @@
   border-radius: 24px;
 }
 
+.productNameContainer--quickview {
+  text-align: end;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  padding-right: 40px;
+}
+
 .carouselContainer {
   padding: 0 40px 0;
 }
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
deleted file mode 100644
index bcccabb..0000000
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.savings,.listPriceValue{
-  display: none;
-}
-.installments{
-  font-family: 'Open Sans',sans-serif;
-  font-style: normal;
-  // font-weight: 700;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-  .installmentsNumber,.installmentValue{
-    font-weight: 700;
-  }
-  .installmentsNumber{
-      &::after{
-        content: "x";
-      }
-  }
-}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index ec0afa9..4ac0808 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -74,7 +74,15 @@
       border-radius: 24px;
     }
 }
-
+.productNameContainer--quickview{
+  text-align: end;
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  padding-right: 40px;
+}
 .carouselContainer{
   padding: 0 40px 0;
   .productImage{
diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss
index d12de58..299d942 100644
--- a/styles/sass/pages/vtex.product-price.scss
+++ b/styles/sass/pages/vtex.product-price.scss
@@ -84,3 +84,21 @@
     margin-bottom: 16px;
   }
 }
+.savings,.listPriceValue{
+  display: none;
+}
+.installments{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  .installmentsNumber,.installmentValue{
+    font-weight: 700;
+  }
+  .installmentsNumber{
+      &::after{
+        content: "x";
+      }
+  }
+}

From 5025125e0750452540bbfef6f4b541076d0a2d82 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Wed, 1 Feb 2023 18:16:47 -0300
Subject: [PATCH 6/9] feat(dados_do_produto):product_name_estilizado

---
 styles/css/vtex.store-components.css                 | 3 ++-
 styles/sass/pages/product/vtex.store-components.scss | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index c6e40f2..0640339 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -77,7 +77,8 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 40px;
+  padding-right: 20px;
+  color: #575757;
 }
 
 .carouselContainer {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 4ac0808..13dd738 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -81,7 +81,8 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 40px;
+  padding-right: 20px;
+  color: #575757;
 }
 .carouselContainer{
   padding: 0 40px 0;

From feadf149052f3847632a10a1c41f913187b9e6b6 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Thu, 2 Feb 2023 03:40:09 -0300
Subject: [PATCH 7/9] =?UTF-8?q?feat(add-card-btn):estilizanod=20bot=20?=
 =?UTF-8?q?=C3=A3o=20de=20carrinho?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 store/blocks/pdp/product.jsonc                | 25 +++++++++++--------
 styles/css/vtex.flex-layout.css               | 18 +++++++++++++
 styles/css/vtex.product-quantity.css          | 12 +++++++++
 .../sass/pages/product/vtex.flex-layout.scss  | 18 ++++++++++++-
 .../pages/product/vtex.product-quantity.scss  |  3 +++
 .../pages/product/vtex.store-components.scss  |  3 +++
 6 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 styles/css/vtex.product-quantity.css
 create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index f50c05c..a2980e8 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -70,7 +70,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "46%",
       "rowGap": 10,
       "blockClass": "StackLayout"
     }
@@ -80,8 +80,8 @@
   },
   "product-images": {
     "props": {
-      "testid": "product-images",
-      "aspectRatio": {
+        "testid": "product-images",
+        "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
       },
@@ -98,13 +98,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -119,12 +118,9 @@
     }
   },
 
-
   "product-identifier.product": {
     "props": {
-      "label": "hide", //'default' | 'custom' | 'hide'
-      "customLabel": "teste", // text if label is custom
-      "idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
+      "label": "hide" //'default' | 'custom' | 'hide'
     }
   },
 
@@ -145,9 +141,16 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass":"buy-button"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity","add-to-cart-button"]
+  },
+
+  "add-to-cart-button": {
+    "props": {
+      "text": "ADICIONAR À SACOLA"
+    }
   },
 
   "flex-layout.row#product-availability": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index cf9fec8..ad47e58 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -12,6 +12,24 @@
   padding: 0 0.5rem;
 }
 
+.flexRowContent {
+  padding: 0;
+  margin: 0;
+}
+.flexRowContent--buy-button {
+  gap: 10px;
+}
+.flexRowContent--buy-button .stretchChildrenWidth {
+  padding: 0;
+  width: max-content !important;
+}
+.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
+  background: black;
+  height: 49px;
+  width: 100%;
+  min-width: 534px;
+}
+
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..1317f4f
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,12 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorTitle {
+  display: none;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index e564bb5..6306930 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -2,7 +2,23 @@
 .flexRowContent--main-header {
   padding: 0 0.5rem;
 }
-
+.flexRowContent{
+  padding: 0;
+  margin: 0;
+  &--buy-button{
+      gap: 10px;
+    .stretchChildrenWidth{
+      padding: 0;
+      width: max-content !important;
+      :global(.vtex-button){
+        background: black;
+        height: 49px;
+        width: 100%;
+        min-width: 534px;
+      }
+    }
+  }
+}
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..54d6f33
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,3 @@
+.quantitySelectorTitle{
+  display: none;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 13dd738..d7e343b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,6 @@
+  .container{
+
+  }
 .skuSelectorContainer{
   display: flex;
   flex-direction: column-reverse;

From 3eb41bad168ee252bc21b24325f6bc10c3656d57 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Thu, 2 Feb 2023 22:47:13 -0300
Subject: [PATCH 8/9] feat(dados_de_compra):titulo && cart btn estilizados

---
 store/blocks/pdp/product.jsonc                | 36 ++++++++++++-------
 styles/css/vtex.flex-layout.css               | 10 ++++--
 styles/css/vtex.product-identifier.css        | 16 +++++++--
 styles/css/vtex.product-quantity.css          | 29 +++++++++++++--
 styles/css/vtex.store-components.css          |  5 ++-
 .../sass/pages/product/vtex.flex-layout.scss  |  9 +++--
 .../product/vtex.product-identifier.scss      |  8 +++++
 .../pages/product/vtex.product-quantity.scss  | 32 +++++++++++++++--
 .../pages/product/vtex.store-components.scss  |  7 ++--
 9 files changed, 122 insertions(+), 30 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index a2980e8..048ecac 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -80,8 +80,8 @@
   },
   "product-images": {
     "props": {
-        "testid": "product-images",
-        "aspectRatio": {
+      "testid": "product-images",
+      "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
       },
@@ -98,7 +98,6 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
@@ -118,19 +117,24 @@
     }
   },
 
-  "product-identifier.product": {
-    "props": {
-      "label": "hide" //'default' | 'custom' | 'hide'
-    }
-  },
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "title"
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": [
+      "product-identifier.product",
+      "vtex.store-components:product-name"
+    ]
   },
 
+  "product-identifier.product": {
+    "props": {
+      "label": "hide", //'default' | 'custom' | 'hide'
+      "blockClass": "sku"
+    }
+  },
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -142,11 +146,17 @@
     "props": {
       "marginTop": 4,
       "marginBottom": 7,
-      "blockClass":"buy-button"
+      "blockClass": "buy-button"
     },
-    "children": ["product-quantity","add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
+  },
+  "product-quantity": {
+    "props": {
+      "width": "20%",
+      "showLabel": false,
+      "size": "regular"
+    }
   },
-
   "add-to-cart-button": {
     "props": {
       "text": "ADICIONAR À SACOLA"
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index ad47e58..da42b84 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -21,13 +21,12 @@
 }
 .flexRowContent--buy-button .stretchChildrenWidth {
   padding: 0;
-  width: max-content !important;
+  justify-content: flex-start;
 }
 .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
   background: black;
   height: 49px;
-  width: 100%;
-  min-width: 534px;
+  max-width: 526px;
 }
 
 @media screen and (min-width: 40em) {
@@ -136,4 +135,9 @@
 }
 :global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings {
   justify-content: center;
+}
+
+.flexRowContent--title {
+  align-items: end;
+  flex-direction: column-reverse;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..af7ca9b 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -1,3 +1,15 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
 .product-identifier--productReference {
-  margin-bottom: 1rem;
-}
+  display: block;
+  text-align: end;
+  margin-top: 8px;
+  padding-right: 8px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 1317f4f..6ef4e94 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -7,6 +7,31 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.quantitySelectorTitle {
-  display: none;
+.quantitySelectorStepper {
+  border: 1px solid #CCCCCC;
+  width: max-content;
+  min-width: 83.86%;
+  padding: 3.5px 0;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
+  border: none;
+  max-width: 28px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
+  border: none;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
+  color: #000;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) {
+  color: #000;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  background: #fff;
+}
+
+.quantitySelectorContainer {
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0640339..8b90328 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.productNameContainer--quickview {
+  padding-right: 40px !important;
+}
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -77,7 +81,6 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 20px;
   color: #575757;
 }
 
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 6306930..9106a60 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -9,12 +9,11 @@
       gap: 10px;
     .stretchChildrenWidth{
       padding: 0;
-      width: max-content !important;
+      justify-content: flex-start;
       :global(.vtex-button){
         background: black;
         height: 49px;
-        width: 100%;
-        min-width: 534px;
+        max-width: 526px;
       }
     }
   }
@@ -130,5 +129,9 @@
       justify-content: center;
   }
 }
+.flexRowContent--title{
+  align-items: end;
+  flex-direction: column-reverse;
+}
 
 
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
new file mode 100644
index 0000000..5d3ae98
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -0,0 +1,8 @@
+.product-identifier{
+  &--productReference{
+    display: block;
+    text-align: end;
+    margin-top: 8px;
+    padding-right: 8px;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 54d6f33..6dbb2a0 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -1,3 +1,31 @@
-.quantitySelectorTitle{
-  display: none;
+.quantitySelectorStepper{
+  border: 1px solid #CCCCCC;
+  width: max-content;
+  min-width: 83.86%;
+  padding: 3.5px 0;
+  :global(.vtex-numeric-stepper-wrapper){
+    :global(.vtex-numeric-stepper-container){
+      :global(.vtex-numeric-stepper__input){
+          border: none;
+          max-width: 28px;
+      }
+      :global(.vtex-numeric-stepper__plus-button){
+        border: none;
+      }
+      :global(.vtex-numeric-stepper__plus-button__text){
+        color: #000;
+      }
+      :global(.vtex-numeric-stepper__minus-button__text){
+        color: #000;
+      }
+      :global(.vtex-numeric-stepper__minus-button){
+        border: none;
+        background: #fff;
+      }
+    }
+  }
+}
+.quantitySelectorContainer{
+    justify-content: center;
+    align-items: center;
 }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index d7e343b..07ec51f 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,6 +1,6 @@
-  .container{
-
-  }
+.productNameContainer--quickview{
+  padding-right: 40px !important;
+}
 .skuSelectorContainer{
   display: flex;
   flex-direction: column-reverse;
@@ -84,7 +84,6 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  padding-right: 20px;
   color: #575757;
 }
 .carouselContainer{

From a70ca72654fc6fd528ea97efd90593fefba86e02 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Fri, 3 Feb 2023 17:44:52 -0300
Subject: [PATCH 9/9] feat(dados-de-compra):finalizando dodas de compra

falta fazer o conteiner de cep e o pix
---
 react/components/Example/Example.tsx |  1 +
 store/blocks/pdp/product.jsonc       | 17 +++++++++++++++--
 store/interfaces.json                |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx
index 7b05f06..8b5fb17 100644
--- a/react/components/Example/Example.tsx
+++ b/react/components/Example/Example.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 const Example = () => {
+  console.log("olá mundo")
   return (
     <div>Example um</div>
   )
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 048ecac..25f2f0c 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,6 +1,9 @@
 {
   "store.product": {
-    "children": ["html#breadcrumb", "condition-layout.product#availability"]
+    "children": ["html#example-component",
+                  "html#breadcrumb",
+                  "condition-layout.product#availability"
+                  ]
   },
   "html#breadcrumb": {
     "props": {
@@ -10,6 +13,14 @@
     },
     "children": ["breadcrumb"]
   },
+  "html#example-component": {
+    "props": {
+      "tag": "nav",
+      "testId": "breadcrumbs",
+      "blockClass": "pdp-exemplo"
+    },
+    "children": ["example-component"]
+  },
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -111,13 +122,15 @@
       "share#default"
     ]
   },
+  "shipping-simulator": {
+    "props": {}
+  },
   "product-installments": {
     "props": {
       "message": "{installmentsNumber}  de {installmentValue} sem juros"
     }
   },
 
-
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..75f4496 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -2,6 +2,7 @@
   "example-component": {
     "component": "Example"
   },
+  
   "html": {
     "component": "html",
     "composition": "children"