feat(Shipping-simulator): Ajusta componente de frete

manifest.json

@@ -65,7 +65,8 @@
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
     "vtex.css-handles": "1.x",
-    "vtex.product-context": "0.x"
+    "vtex.product-context": "0.x",
+    "vtex.address-form": "4.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/components/Example/Example.tsx

@@ -7,6 +7,8 @@ const Pix = () => {
 
   const productContext = useProduct()
 
+  const total = (valuePix * 0.1 - valuePix / 100) / 10
+
   const objectPass = [
     {
       id: productContext?.selectedItem?.itemId,
@@ -55,7 +57,7 @@ const Pix = () => {
 
       <div className="preco-wrapper">
         <h2 className="preco-pix">
-          {(valuePix / 100).toLocaleString('pt-br', {
+          {total.toLocaleString('pt-br', {
             style: 'currency',
             currency: 'BRL',
           })}

store/blocks/pdp/product.jsonc

@@ -119,11 +119,18 @@
       // "product-gifts",
       // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator"
-      "share#default"
+      // "share#default"
     ]
   },
 
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator",
+      "blockClass": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
   "html#quantity-wrapper": {
     "props": {
       "tag": "section",

styles/configs/style.json

@@ -110,7 +110,7 @@
     "text": {
       "action-primary": "#0F3E99",
       "action-secondary": "#eef3f7",
-      "link": "#0F3E99",
+      "link": "#000000",
       "emphasis": "#f71963",
       "disabled": "#979899",
       "success": "#8bc34a",

styles/css/vtex.address-form.css

@@ -0,0 +1,13 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+.input {
+  height: 49px;
+}

styles/css/vtex.breadcrumb.css

@@ -58,4 +58,10 @@
 .container .termArrow,
 .container .term {
   display: none;
+}
+
+@media screen and (min-width: 1920px) {
+  .container {
+    padding-left: 360px;
+  }
 }

styles/css/vtex.flex-layout.css

@@ -10,6 +10,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .flexRowContent {
   position: relative;
+  padding: 0;
+  margin: 0;
 }
 
 .flexRowContent--container-compra {

styles/css/vtex.store-components.css

@@ -10,15 +10,16 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .container {
   padding: 0 40px;
+  max-width: initial;
 }
 .container .productImagesThumb {
   padding-right: 16px;
 }
 .container .productImagesGallerySlide {
-  width: 664px !important;
+  width: 100% !important;
 }
 .container .carouselGaleryCursor {
-  width: 664px;
+  width: 100%;
 }
 .container .carouselGaleryThumbs {
   margin-top: 16px;
@@ -109,4 +110,138 @@
 }
 .container .diagonalCross {
   transform: rotate(90deg);
+}
+
+.shippingContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  padding-bottom: 26px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: absolute;
+  left: 344px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child {
+  text-decoration: underline;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #000000 !important;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child :global(.vtex__icon-external-link) {
+  display: none;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+  padding-right: 21px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  display: none;
+}
+
+.shippingContainer :global(.vtex-input__error) {
+  position: absolute;
+  top: 70px;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  background-color: #000000;
+  border: none;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "OK";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
+
+.shippingTable {
+  border: none;
+  padding: 0;
+  margin-top: -10px;
+  width: fit-content;
+}
+.shippingTable .shippingTableHead {
+  display: table-row;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  text-align: left;
+  font-weight: 400;
+  font-size: 0;
+  line-height: 19px;
+  color: #202020;
+  min-width: 112px;
+  padding: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName::after {
+  font-size: 14px;
+  content: "ENTREGA";
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate::before {
+  font-size: 14px;
+  content: "FRETE";
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+  font-size: 14px;
+  content: "PRAZO";
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  grid-area: 1/3/1/3;
+}
+.shippingTable .shippingTableBody .shippingTableCell {
+  width: 112px;
+  padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableCellDeliveryName {
+  padding-left: 0;
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableCell,
+.shippingTable .shippingTableLabel,
+.shippingTable .currencyContainer {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+  padding-left: 0;
+}
+
+@media screen and (min-width: 1920px) {
+  .container {
+    padding: 0 360px;
+  }
 }

styles/sass/pages/product/vtex.address-form.scss

@@ -0,0 +1,3 @@
+.input {
+  height: 49px;
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -58,3 +58,9 @@
     display: none;
   }
 }
+
+@media screen and (min-width: 1920px) {
+  .container {
+    padding-left: 360px;
+  }
+}

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

@@ -1,5 +1,7 @@
 .flexRowContent {
   position: relative;
+  padding: 0;
+  margin: 0;
 }
 
 .flexRowContent--container-compra {

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

@@ -3,17 +3,18 @@
 // }
 .container {
   padding: 0 40px;
+  max-width: initial;
 
   .productImagesThumb {
     padding-right: 16px;
   }
 
   .productImagesGallerySlide {
-    width: 664px !important;
+    width: 100% !important;
   }
 
   .carouselGaleryCursor {
-    width: 664px;
+    width: 100%;
   }
 
   .carouselGaleryThumbs {
@@ -129,3 +130,165 @@
     transform: rotate(90deg);
   }
 }
+
+//Entrega
+
+.shippingContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+  :global(.vtex-address-form__postalCode) {
+    padding-bottom: 26px;
+    :global(.vtex-address-form__postalCode-forgottenURL) {
+      position: absolute;
+      left: 344px;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 0;
+
+      &:last-child {
+        text-decoration: underline;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: $color-black2 !important;
+        :global(.vtex__icon-external-link) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input__label) {
+    font-size: 0;
+    &::after {
+      content: 'CALCULAR FRETE:';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray7;
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input-prefix__group) {
+    height: 49px;
+    padding-right: 21px;
+    :global(.vtex-input__suffix) {
+      display: none;
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input__error) {
+    position: absolute;
+    top: 70px;
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: $color-black2;
+    border: none;
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: 'OK';
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-white;
+      }
+    }
+  }
+}
+
+.shippingTable {
+  border: none;
+  padding: 0;
+  margin-top: -10px;
+  width: fit-content;
+  .shippingTableHead {
+    display: table-row;
+
+    .shippingTableRow {
+      .shippingTableHeadDeliveryName,
+      .shippingTableHeadDeliveryPrice,
+      .shippingTableHeadDeliveryEstimate {
+        text-align: left;
+        font-weight: 400;
+        font-size: 0;
+        line-height: 19px;
+        color: $color-black3;
+        min-width: 112px;
+        padding: 0;
+      }
+      .shippingTableHeadDeliveryName {
+        &::after {
+          font-size: 14px;
+          content: 'ENTREGA';
+        }
+      }
+      .shippingTableHeadDeliveryEstimate {
+        &::before {
+          font-size: 14px;
+          content: 'FRETE';
+        }
+      }
+      .shippingTableHeadDeliveryPrice {
+        &::before {
+          font-size: 14px;
+          content: 'PRAZO';
+        }
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: 1;
+
+      .shippingTableCellDeliveryEstimate {
+        grid-area: 1 / 3 / 1 / 3;
+      }
+    }
+
+    .shippingTableCell {
+      width: 112px;
+      padding: 0 0 15px 0;
+    }
+  }
+
+  .shippingTableCellDeliveryName {
+    padding-left: 0;
+  }
+
+  .shippingTableRadioBtn {
+    display: none;
+  }
+
+  .shippingTableCell,
+  .shippingTableLabel,
+  .currencyContainer {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: $color-gray9;
+    padding-left: 0;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .container {
+    padding: 0 360px;
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,5 +1,6 @@
 $color-black: #292929;
 $color-black2: #000000;
+$color-black3: #202020;
 
 $color-white: #fff;
 
@@ -37,4 +38,4 @@ $z-index: (
 
 //Fonts
 
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');