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] =?UTF-8?q?feat(add-card-btn):estilizanod=20bot=20=C3=A3o?=
 =?UTF-8?q?=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;