feat: calcular frete feito

react/components/Html/styles.css

@@ -8,5 +8,19 @@
 [class*="html--pdp-breadcrumb"] {
   background-color: #fff;
 }
+[class*="html--quantidadeEBuy"] {
+  display: flex;
+  gap: 10px;
+}
+@media (max-width: 1024px) {
+  [class*="html--quantidadeEBuy"] {
+    display: flex;
+    flex-direction:column;
+    gap: 10px;
+  }
+}
 
+[class*=""] {
+  
+}
 

store/blocks/pdp/product.jsonc

@@ -133,22 +133,41 @@
       // "product-gifts",
       // "flex-layout.row#buy-button",
       // "availability-subscriber"
+      "rich-text#titleCep",
       "shipping-simulator"
       // "share#default"
 
     ]
   },
+  "shipping-simulator":{
+    "props":{
+      "blockClass":"divCep"
+      // "placeholder": "Digite seu CEP"
+    }
+  },
+  "rich-text#titleCep": {
+    "props": {
+      "blockClass": "titleCep",
+      "text": "CALCULAR FRETE:"
+    }
+  },
   "html#quantidadeEButtonCustom":{
     "props": {
       "blockClass": "quantidadeEBuy"
     },
     "children": ["product-quantity","flex-layout.row#buy-button"]
   },
+  "product-quantity":{
+    "props":{
+      "blockClass":"divQuantidade",
+      "size":"regular"
+    }
+  },
   "product-installments#custom":{
     "props":{
       "blockClass":"divParcelamente",
       "markers": ["discount"],
-      "message": " {installmentsNumber}x de {installmentValue} <discount> sem juros </discount> ",
+      "message": " {installmentsNumber}<discount>x</discount> de {installmentValue} <discount> sem juros </discount> ",
       "installmentsCriteria":"max-quantity-without-interest"
     }
   },
@@ -177,6 +196,7 @@
 
   "flex-layout.row#buy-button": {
     "props": {
+      "blockClass":"divButtonBuy",
       "marginTop": 4,
       "marginBottom": 7
     },

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/*
+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 */
+.buttonDataContainer {
+  font-size: 0;
+}
+.buttonDataContainer .buttonText::after {
+  content: "ADICIONAR À SACOLA";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}

styles/css/vtex.flex-layout.css

@@ -70,3 +70,11 @@
     margin-right: 0px;
   }
 }
+
+.flexRow--divButtonBuy {
+  text-align: center;
+  width: 100%;
+}
+.flexRow--divButtonBuy :global(.vtex-button) {
+  background-color: black;
+}

styles/css/vtex.product-price.css

@@ -27,6 +27,9 @@
 .installments--divParcelamente .installmentsNumber--divParcelamente {
   font-weight: 700;
 }
+.installments--divParcelamente .installments-discount--divParcelamente {
+  font-weight: 700;
+}
 .installments--divParcelamente .currencyContainer--divParcelamente {
   font-weight: 700;
 }

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 */
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}

styles/css/vtex.rich-text.css

@@ -36,3 +36,12 @@
     font-size: 20px;
   }
 }
+
+.wrapper--titleCep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}

styles/css/vtex.store-components.css

@@ -222,3 +222,62 @@
   border-radius: 50%;
   transform: rotate(-90deg);
 }
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  width: 409px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  padding: 0%;
+  margin: 0%;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  width: 280px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 1px solid #cccccc;
+  border-radius: 0px;
+  height: 49px;
+  border-right: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+  color: #000000;
+  position: absolute;
+  right: -57px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  font-size: 0;
+  background: black;
+  width: 49px;
+  height: 49px;
+  border: 0;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "Ok";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+  padding: 0;
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,12 @@
+.buttonDataContainer {
+  font-size: 0;
+  .buttonText::after {
+    content: "ADICIONAR À SACOLA";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    // color: #ffffff;
+  }
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -56,3 +56,10 @@
   }
 }
 
+.flexRow--divButtonBuy{
+  text-align: center;
+  width: 100%;
+  :global(.vtex-button){
+    background-color: black;
+  }
+}

styles/sass/pages/product/vtex.product-price.scss

@@ -17,6 +17,9 @@
     .installmentsNumber--divParcelamente{
         font-weight: 700;
     }
+    .installments-discount--divParcelamente{
+        font-weight: 700;
+    }
     .currencyContainer--divParcelamente{
         font-weight: 700;
     }

styles/sass/pages/product/vtex.product-quantity.scss

@@ -0,0 +1,13 @@
+.quantitySelectorContainer{
+    // width: 128px;
+    // height: 49px;
+    .quantitySelectorTitle{
+        display: none;
+    }
+    // .quantitySelectorStepper{
+    //     width: 100%;
+    //     .vtex-numeric-stepper-container{
+    //         width: 100%;
+    //     }
+    // }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -21,3 +21,11 @@
     }
   }
 }
+.wrapper--titleCep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}

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

@@ -203,3 +203,62 @@
     transform: rotate(-90deg);
   }
 }
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  width: 409px;
+  height: 49px;
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    padding: 0%;
+    margin: 0%;
+    :global(.vtex-input) {
+      width: 280px;
+      height: 49px;
+      :global(.vtex-input__label) {
+        display: none;
+      }
+      :global(.vtex-input-prefix__group) {
+        border: 1px solid #cccccc;
+        border-radius: 0px;
+        height: 49px;
+        border-right: 0;
+      }
+    }
+    :global(.vtex-address-form__postalCode-forgottenURL) {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      text-decoration-line: underline;
+      color: #000000;
+      position: absolute;
+      right: -57px;
+      :global(.vtex__icon-external-link) {
+        display: none;
+      }
+    }
+  }
+  :global(.vtex-button) {
+    font-size: 0;
+    background: black;
+    width: 49px;
+    height: 49px;
+    border: 0;
+    border-radius: 0;
+    :global(.vtex-button__label)::after {
+      content: "Ok";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: #ffffff;
+      padding: 0;
+    }
+  }
+}