From 8206b0932e69d3f77b5960e268571e6ed8d6bb98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Sun, 22 Jan 2023 20:02:29 -0300
Subject: [PATCH] feat(pdp): Adiciona bloco de frete

---
 store/blocks/pdp/product.jsonc                | 10 ++-
 styles/css/vtex.product-quantity.css          | 36 ++++++++--
 styles/css/vtex.store-components.css          | 57 ++++++++++++++++
 .../pages/product/vtex.product-quantity.scss  | 33 ++++++++-
 .../pages/product/vtex.store-components.scss  | 68 +++++++++++++++++++
 5 files changed, 195 insertions(+), 9 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index be2df56..9797d82 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -123,8 +123,8 @@
       /*"flex-layout.row#buy-button",*/
       "html#qtd-btn",
       "availability-subscriber",
-      "shipping-simulator",
-      "share#default"
+      "shipping-simulator"
+      /*"share#default"*/
     ]
   },
 
@@ -216,5 +216,11 @@
         "Pinterest": true
       }
     }
+  },
+
+  "shipping-simulator": {
+    "props": {
+      "blockClass": "frete"
+    }
   }
 }
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index e68b426..8b42529 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -22,11 +22,13 @@
   border-right: none;
   height: 50px;
 }*/
-/*.hideDecorators {
+.hideDecorators {
   border: 1px solid red;
   border-left: none;
   border-right: none;
-}*/
+  height: 49px;
+}
+
 /*.numeric-stepper__plus-button {
   border: none;
   height: 50px;
@@ -41,7 +43,6 @@
 }
 */
 .quantitySelectorContainer--quantidade {
-  border: 1px solid green;
   margin-right: 5px;
   padding: 0;
   height: 100%;
@@ -52,4 +53,31 @@
   background-color: blue;
   border: 1px solid orange;
   height: 49px;
-}*/
\ No newline at end of file
+}*/
+:global(.vtex-numeric-stepper__input) {
+  height: 49px;
+  width: 30px;
+  border-right: 0;
+  border-left: 0;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+:global(.vtex-numeric-stepper__plus-button) {
+  height: 49px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: transparent;
+  height: 49px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 13ffde1..03ee676 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -64,4 +64,61 @@
   font-size: 14px;
   line-height: 19px;
   color: #000000;
+}
+
+.shippingContainer {
+  border: 1px solid red;
+  display: flex;
+  align-items: end;
+  margin-top: 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  position: relative;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+  border-radius: 0%;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  /*background-color: red;*/
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: absolute;
+  top: 28px;
+  right: -180px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+  color: #000000;
+}
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  background-color: #000000;
+  border: none;
+  border-radius: inherit;
+}
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index a92d5e9..b42f7bc 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -14,11 +14,12 @@
   height: 50px;
 }*/
 
-/*.hideDecorators {
+.hideDecorators {
   border: 1px solid red;
   border-left: none;
   border-right: none;
-}*/
+  height: 49px;
+}
 
 /*.numeric-stepper__plus-button {
   border: none;
@@ -36,7 +37,6 @@
 }
 */
 .quantitySelectorContainer--quantidade {
-  border: 1px solid green;
   margin-right: 5px;
   padding: 0;
   height: 100%;
@@ -48,3 +48,30 @@
   border: 1px solid orange;
   height: 49px;
 }*/
+:global(.vtex-numeric-stepper__input) {
+  height: 49px;
+  width: 30px;
+  border-right: 0;
+  border-left: 0;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+:global(.vtex-numeric-stepper__plus-button) {
+  height: 49px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: transparent;
+  height: 49px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 116a28d..7b1fdea 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -60,3 +60,71 @@
     color: #000000;
   }
 }
+
+//FRETE
+
+.shippingContainer {
+  border: 1px solid red;
+  display: flex;
+  align-items: end;
+  margin-top: 16px;
+
+  :global(.vtex-address-form__postalCode) {
+    position: relative;
+    padding: 0;
+  }
+
+  :global(.vtex-input__label) {
+    font-size: 0;
+
+    &::after {
+      content: "CALCULAR FRETE:";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
+  }
+
+  :global(.vtex-input-prefix__group) {
+    height: 49px;
+    border-radius: 0%;
+  }
+
+  :global(.vtex-address-form-4-x-input) {
+    /*background-color: red;*/
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: absolute;
+    top: 28px;
+    right: -180px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    text-decoration-line: underline;
+    color: #000000;
+  }
+
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: #000000;
+    border: none;
+    border-radius: inherit;
+  }
+
+  :global(.vtex-button__label) {
+    font-size: 0;
+
+    &::after {
+      content: "OK";
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: #ffffff;
+    }
+  }
+}