Merge branch 'feature/cep' into desenvolvimento

docs/Todo.md

@@ -11,7 +11,7 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07}
 
-- FIXME [Blocos que devem ser ajustado e desenvolvidos](6){
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](testeid){
 
       - [x]  1. BreadCrumb; {cm:2023-01-31}
 
@@ -23,9 +23,9 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
       - HACK 5. prateleira de produtos, {cm:2023-02-07}
       
-      - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
+      - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) {cm:2023-02-10}
 
-      - HACK 7.Fazer o cep
+      - HACK 7.Fazer o cep {cm:2023-02-10}
 
       - FIXME COLOCAR OS TESTESID!!!!!
 
@@ -36,8 +36,8 @@ os Requisitos cobrados serão: {cm:2023-02-07}
 
 {cm:2023-01-25}
 
-* FIXME Bloco de Preço com Desconto deve ser CUSTOM
+* FIXME Bloco de Preço com Desconto deve ser CUSTOM {cm:2023-02-10}
 
-* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
+* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. {cm:2023-02-10}
 
-* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.
+* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. {cm:2023-02-10}

react/CEP.tsx

@@ -0,0 +1,3 @@
+import CEP from "./components/ProductContext/cep";
+
+export default CEP;

react/Placeholder.tsx

@@ -0,0 +1,3 @@
+import Placeholder from "./components/ProductContext/Placeholder";
+
+export default Placeholder;

react/components/Html/styles.css

@@ -20,7 +20,10 @@
     display: flex;
     flex-direction: column;
 }
-.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p{
+    margin: 0;
+}
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class="pix_wrapper-price"]{
     font-family: 'Open Sans',sans-serif;
     font-style: normal;
     font-weight: 700;
@@ -29,7 +32,7 @@
     color: rgba(0, 0, 0, 0.58);
     white-space: nowrap;
 }
-.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class='pix_wrapper-Discount']{
     font-family: 'Open Sans',sans-serif;
     font-style: normal;
     font-weight: 300;
@@ -46,7 +49,9 @@
 .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
   width: 50%;
 }
-
+.html--card-button{
+  width: -webkit-fill-available;
+}
 .html--buy-button{
   display: flex;
   gap: 10px;
@@ -55,13 +60,13 @@
   margin-top: 16px;
 }
 .html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
-  display: block;
+  display: none;
 }
 .html--buy-button :global(.vtex-button){
   display: block;
   background: black;
   height: 49px;
-  max-width: 77.354%;
+  max-width: 97.05%;
   border: 1px solid black;
 }
 .html--pdp-section_descriptions{
@@ -73,7 +78,7 @@
   @media screen and (min-width: 1920px){
     .html--buy-button :global(.vtex-button){
       max-width: 766px;
-      width: 80.126%;
+      width: 96%;
     }
     .html--pdp-productMain,.html--availability{
       padding-right: 12.5393%;
@@ -193,3 +198,17 @@
     padding-left: 0px;
   }
 }
+:global(.vtex-address-form__postalCode-forgottenURL)  a{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+  color: #000000;
+}
+:global(.vtex-address-form__postalCode-forgottenURL)  a span{
+  display: none;
+}

react/components/ProductContext/Pix.tsx

@@ -1,36 +1,43 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import {  useProduct  } from 'vtex.product-context';
 
-const Pix: React.FC = () => {
+type price = {
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  discountRate:number
-  useEffect(() => {
-    if (buttonRef.current) {
-      buttonRef.current.innerHTML = 'Novo texto';
-      buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
 }
-  }, []);
+const Pix = ({ discountRate}:price) => {
   const { product } = useProduct()
 
   let pixprice = product?.priceRange.sellingPrice.lowPrice
-  let desconto = 10
+  let desconto = discountRate >= 0 ? discountRate : 10;
   let finalprice = pixprice - (pixprice/desconto)
   let RoundedNumber =  Number(Math.round(finalprice * 100) / 100);
   const formattedNumber = RoundedNumber.toLocaleString('pt-BR', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   });
-  console.log('productContex',product)
   return (
     <div className='pix_wrapper'>
       <img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />
       <span datatype='span_wrapper'>
-        <span className='pix_wrapper-price'>
+        <p className='pix_wrapper-price'>
         R$ {formattedNumber}
-        </span>
+        </p>
-        <span className='pix_wrapper-Discount'> {desconto} % de desconto</span>
+        <p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
       </span>
     </div>
   )
 }
-
+Pix.schema = {
+  title:"Pix-Price",
+  description:"quantos % o pagamento via pix irá proporcionar",
+  type:"object",
+  properties:{
+    discountRate:{
+      title: "Pix-Price",
+      description:"quantos % o pagamento via pix irá proporcionar",
+      type:"number",
+      default:10
+    }
+  }
+}
 export default Pix

react/components/ProductContext/Placeholder.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Placeholder = () => {
+  if (typeof document !== "undefined") {
+    const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
+    const placeholdertamanho = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--tamanho .vtex-store-components-3-x-skuSelectorName");
+    const placeholdercor = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--cor .vtex-store-components-3-x-skuSelectorName");
+    console.log(placeholdertamanho)
+    if(placeholdertamanho){
+      placeholdertamanho.textContent = "OUTROS TAMANHOS:";
+    }
+    if(placeholdercor){
+      placeholdercor.textContent = "OUTRAS CORES:";
+    }
+    Placeholder?.setAttribute("Placeholder","Digite seu CEP")
+  }
+  return(
+    <>
+    </>
+  )
+}
+export default Placeholder;

react/components/ProductContext/cep.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+const CEP = () => {
+  function handleButtonClick(){
+    setTimeout(() => {
+      if (typeof document !== "undefined"){
+            const tr = document.querySelector('.vtex-store-components-3-x-shippingTableRow');
+            const trRow = document.querySelectorAll('.vtex-store-components-3-x-shippingTableBody .vtex-store-components-3-x-shippingTableRow ');
+            const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate');
+            const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate');
+            const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice');
+            if(tdEstimate){
+              tdEstimate.forEach((row) => {
+                if(row.parentNode){
+                  row.parentNode.removeChild(row);
+                }
+              });
+
+              trRow.forEach((row, index) => {
+                const td = tdEstimate[index];
+                row.appendChild(td);
+              });
+            }
+            if(tr){
+              if(thEstimate){
+                thEstimate.textContent = "PRAZO";
+                tr.removeChild(thEstimate);
+                tr.appendChild(thEstimate);
+              }
+              if(thPrice){
+                thPrice.textContent = "FRETE";
+                tr.removeChild(thPrice);
+                tr.insertBefore(thPrice,thEstimate);
+              }
+            }
+      }
+    }, 1000);
+  }
+  if (typeof document !== "undefined") {
+    const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button");
+      if (btnCep) {
+      btnCep.addEventListener('click', handleButtonClick);
+    }
+  }
+  return(
+    <>
+    </>
+  )
+}
+export default CEP;

store/blocks/pdp/product.jsonc

@@ -1,6 +1,8 @@
 {
   "store.product": {
     "children": [
+      "html#Placeholder",
+      "html#CEP",
       "html#breadcrumb",
       "condition-layout.product#availability",
       "html#departaments",
@@ -10,10 +12,23 @@
   },
   "html#Pix": {
     "props": {
+      "testId": "pix-price",
       "blockClass": "pdp-pixPrice"
     },
     "children": ["Pix"]
   },
+  "html#Placeholder": {
+    "children": ["Placeholder"]
+  },
+  "html#CEP": {
+    "children": ["CEP"]
+  },
+  "html#tab-layout": {
+    "props": {
+      "testId": "tab-layout"
+    },
+    "children": ["tab-layout#pdp"]
+  },
   "tab-layout#pdp": {
     "children": [
       "tab-list#pdp",
@@ -118,13 +133,14 @@
   },
   "html#prateleira": {
     "props": {
-      "testId": "vtex-product-sumary"
+      "testId": "vtex-product-summary"
     },
     "children": [
-      "product-summary-image#shelfpdp",
+      "stack-layout#pdp",
       "product-summary-name",
       "product-list-price#summary",
-      "product-selling-price#summary"
+      "html#selling-price",
+      "flex-layout.row#selling-price-savingspdp"
     ]
   },
   "html#carousel": {
@@ -138,11 +154,17 @@
   },
   "list-context.product-list#pdp": {
     "blocks": ["product-summary.shelf#Pdp"],
-    "children": ["slider-layout#demo-products#pdp"],
+    "children": ["html#slider"],
     "props": {
       "orderBy": "OrderByTopSaleDESC"
     }
   },
+  "html#slider": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#demo-products#pdp"]
+  },
   "slider-layout#demo-products#pdp": {
     "props": {
       "itemsPerPage": {
@@ -155,14 +177,9 @@
       "blockClass": "pdp-carrousel"
     }
   },
-
   "product-summary.shelf#Pdp": {
     "children": [
-      "stack-layout#pdp",
+      "html#prateleira"
-      "product-summary-name",
-      "product-list-price#summary",
-      "product-selling-price#summarypdp",
-      "flex-layout.row#selling-price-savingspdp"
     ]
   },
 
@@ -208,8 +225,6 @@
     "children": ["breadcrumb"]
   },
 
-
-
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -291,7 +306,7 @@
       "testId": "product-description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["tab-layout#pdp"]
+    "children": ["html#tab-layout"]
   },
 
   "html#description": {
@@ -307,7 +322,8 @@
     "children": ["stack-layout"],
     "props": {
       "width": "50%",
-      "blockClass": "StackLayout"
+      "blockClass": "StackLayout",
+      "testId": "product-images"
     }
   },
 
@@ -351,52 +367,83 @@
       "blockClass": "pdp-InfoBuy"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "html#product-installments",
       "html#Pix",
-      "sku-selector",
+      "html#sku-selector",
       "product-assembly-options",
       "product-gifts",
       "html#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator",
       "share#default"
     ]
   },
-  "shipping-simulator": {
+  "html#shipping-simulator": {
-    "props": {}
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
   },
   "product-installments": {
     "props": {
       "message": "{installmentsNumber}  de {installmentValue} sem juros"
     }
   },
+
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["product-selling-price#summarypdp"]
+  },
+
   "product-selling-price#summarypdp": {
     "props": {
       "blockClass": "desconto",
       "message": "de {sellingPriceWithTax} por"
     }
   },
+
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,
       "blockClass": "title"
     },
-    "children": [
+    "children": ["html#código", "vtex.store-components:product-name"]
-      "product-identifier.product",
+  },
-      "vtex.store-components:product-name"
+  "html#código": {
-    ]
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
   },
-
   "product-identifier.product": {
     "props": {
-      "label": "hide", //'default' | 'custom' | 'hide'
+      "label": "hide" //'default' | 'custom' | 'hide'
-      "blockClass": "sku"
     }
   },
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -405,7 +452,7 @@
   },
 
   "flex-layout.row#buy-button": {
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "add-to-cart-button"]
   },
   "html#buy-button": {
     "props": {
@@ -413,7 +460,13 @@
       "marginBottom": 7,
       "blockClass": "buy-button"
     },
-    "children": ["product-quantity", "add-to-cart-button"]
+    "children": ["html#product-quantity", "html#add-to-cart-button#pdp"]
+  },
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
   },
   "product-quantity": {
     "props": {
@@ -422,7 +475,14 @@
       "size": "regular"
     }
   },
-  "add-to-cart-button": {
+  "html#add-to-cart-button#pdp": {
+    "props": {
+      "blockClass": "card-button",
+      "testId": "add-to-cart-button"
+    },
+    "children": ["add-to-cart-button#pdp"]
+  },
+  "add-to-cart-button#pdp": {
     "props": {
       "text": "ADICIONAR À SACOLA"
     }
@@ -432,17 +492,14 @@
     "props": {
       "blockClass": "availability"
     },
-    "children": [
+    "children": ["html#stack", "html#right-col-availability"]
-      "html#stack",
-      "html#right-col-availability"
-    ]
   },
   "html#right-col-availability": {
     "props": {
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "flex-layout.row#availability",
       "sku-selector"
     ]

store/blocks/product-price.jsonc

@@ -8,9 +8,15 @@
       "marginBottom": 4
     },
     "children": [
-      "product-selling-price"
+      "html#selling--price"
     ]
   },
+  "html#selling--price":{
+    "props":{
+      "testId": "product-price"
+    },
+      "children": ["product-selling-price"]
+    },
   "product-selling-price#ProducyImage":{
     "props":{
       "blockClass": "price"

store/interfaces.json

@@ -5,6 +5,12 @@
   "Pix": {
     "component": "Pix"
   },
+  "Placeholder": {
+    "component": "Placeholder"
+  },
+  "CEP": {
+    "component": "CEP"
+  },
 
   "html": {
     "component": "html",

styles/css/vtex.store-components.css

@@ -63,22 +63,16 @@
   left: 0;
   right: 0;
 }
+.skuSelectorContainer .skuSelectorName {
+  text-transform: uppercase;
+  font-family: "Open Sans", sans-serif;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor {
   height: 75px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
   height: 48px;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
-  text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
-  content: "ES:";
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
-  content: "OUTRAS ";
-}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
   width: 40px;
   height: 40px;
@@ -91,16 +85,6 @@
   width: 40px;
   height: 40px;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
-  text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
-  content: "S:";
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
-  content: "OUTROS ";
-}
 .skuSelectorContainer .skuSelectorInternalBox {
   border: 2px solid #B9B9B9;
 }
@@ -246,6 +230,13 @@
 .form {
   width: max-content;
 }
+@media screen and (max-width: 1024px) {
+  .form {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
 .form .content {
   width: 65.532%;
   height: 108px;
@@ -255,6 +246,11 @@
   grid-template-rows: 1fr 1fr;
   gap: 8px;
 }
+@media screen and (max-width: 1024px) {
+  .form .content {
+    width: 100%;
+  }
+}
 .form .content .inputName, .form .content .inputEmail {
   width: 100%;
   height: 40px;
@@ -262,6 +258,11 @@
   margin-right: 0;
   margin-bottom: 7px;
 }
+@media screen and (max-width: 1024px) {
+  .form .content .inputName, .form .content .inputEmail {
+    min-width: 0;
+  }
+}
 .form .submit {
   width: 100%;
   justify-content: center;
@@ -269,6 +270,7 @@
   grid-row: 2;
 }
 .form .submit :global(.vtex-button) {
+  display: block;
   width: 100%;
   background: #000000;
   width: 308px;
@@ -295,3 +297,156 @@
   padding: 14px 14px 16px;
   color: #989898;
 }
+
+.shippingContainer {
+  display: grid;
+  position: relative;
+  align-items: end;
+  width: max-content;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer {
+    max-width: 100%;
+    min-width: 93.665%;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr 1fr;
+    height: 100px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: grid;
+  grid-column: 1/2;
+  padding: 0;
+  min-width: 230px;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+    grid-row: 1;
+  }
+}
+.shippingContainer :global(.vtex-button) {
+  display: block;
+  grid-column: 2/3;
+  background: #000000;
+  width: 100%;
+  height: max-content;
+  border: 0;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+  padding: 0;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "ok";
+  padding: 14px;
+  min-height: 21px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #FFFFFF;
+}
+.shippingContainer :global(.vtex-input) {
+  grid-column: 1/2;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 1px solid #CCCCCC;
+  height: 49px;
+  max-width: 100%;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  color: #AFAFAF;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 16.5px 16px;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
+  font-size: 0;
+  width: max-content;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  width: max-content;
+  position: absolute;
+  grid-column: 3/4;
+  right: 0;
+  bottom: 25%;
+  left: 0;
+  margin-left: 32px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    margin-left: 0;
+    grid-column: 1/4;
+    left: auto;
+    bottom: 0;
+  }
+}
+
+.shippingTable {
+  border: 0;
+  width: max-content;
+}
+.shippingTable .shippingTableHead {
+  display: table-row-group;
+  vertical-align: middle;
+  text-align: center;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  width: 100%;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  text-transform: uppercase;
+  padding-bottom: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  padding-bottom: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell, .shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel, .shippingTable .shippingTableBody .shippingTableRow .currencyContainer {
+  font-size: 12px;
+  line-height: 16px;
+  color: #AFAFAF;
+  text-align: start;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+}

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

@@ -50,24 +50,16 @@
     left: 0;
     right: 0;
   }
+  .skuSelectorName{
+    text-transform: uppercase;
+    font-family: 'Open Sans',sans-serif;
+  }
   .skuSelectorSubcontainer-{
     &-cor{
       height: 75px;
       .skuSelectorOptionsList{
         height: 48px;
       }
-      .skuSelectorTextContainer{
-        .skuSelectorName{
-          text-transform: uppercase;
-          font-family: 'Open Sans',sans-serif;
-          &::after{
-              content: "ES:";
-            }
-            &::before{
-                content: "OUTRAS ";
-              }
-        }
-      }
     }
     &-tamanho{
       .frameAround{
@@ -82,18 +74,6 @@
         width: 40px;
         height: 40px;
       }
-      .skuSelectorTextContainer{
-        .skuSelectorName{
-          text-transform: uppercase;
-          font-family: 'Open Sans',sans-serif;
-          &::after{
-              content: "S:";
-            }
-            &::before{
-                content: "OUTROS ";
-              }
-        }
-      }
     }
   }
 
@@ -218,6 +198,11 @@
 
 .form{
   width: max-content;
+  @media screen and (max-width: 1024px){
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
   .content{
     width: 65.532%;
     height: 108px;
@@ -226,12 +211,18 @@
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1fr 1fr;
     gap: 8px;
+    @media screen and (max-width: 1024px){
+      width: 100%;
+    }
     .inputName,.inputEmail{
       width: 100%;
       height: 40px;
       min-width: 150px;
       margin-right: 0;
       margin-bottom: 7px;
+      @media screen and (max-width: 1024px){
+        min-width: 0;
+      }
     }
   }
   .submit{
@@ -240,6 +231,7 @@
     grid-column: span 2;
     grid-row: 2;
     :global(.vtex-button){
+      display: block;
       width: 100%;
       background: #000000;
       width: 308px;
@@ -268,5 +260,158 @@
     color: #989898;
   }
 }
+.shippingContainer{
+  display: grid;
+  position: relative;
+  align-items: end;
+  width: max-content;
+  @media screen and (max-width: 1024px){
+    max-width: 100%;
+    min-width: 93.665%;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr 1fr;
+    height: 100px;
+  }
+  :global(.vtex-address-form__postalCode ){
+    display: grid;
+    grid-column: 1 / 2;
+    padding: 0;
+    min-width: 230px;
+    @media screen and (max-width: 1024px){
+      min-width: 100%;
+      max-width: 100%;
+      width: 100%;
+      grid-row: 1;
+    }
+  }
+  :global(.vtex-button){
+    display: block;
+    grid-column: 2 / 3;
+    background: #000000;
+    width: 100%;
+    height: max-content;
+    border: 0;
+    border-radius: 0;
+    :global(.vtex-button__label){
+      font-size: 0;
+      padding: 0;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      &::after{
+        content: "ok";
+        padding: 14px;
+        min-height: 21px;
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: #FFFFFF;
+      }
+    }
+  }
+  :global(.vtex-input){
+    grid-column: 1 / 2;
+    :global(.vtex-input-prefix__group){
+      border: 1px solid #CCCCCC;
+      height: 49px;
+      max-width: 100%;
+      border-radius: 0;
+      :global(.vtex-address-form-4-x-input){
+        color: #AFAFAF;
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        padding: 16.5px 16px;
+      }
+    }
+    :global(.vtex-input__label){
+      font-size: 0;
+      width:max-content;
+      &::after{
+        content: "CALCULAR FRETE:";
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+  :global(.vtex-address-form__postalCode-forgottenURL){
+    width: max-content;
+    position: absolute;
+    grid-column: 3 / 4;
+    right: 0;
+    bottom: 25%;
+    left: 0;
+    margin-left: 32px;
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    text-decoration-line:underline;
+    @media screen and (max-width: 1024px){
+      margin-left: 0;
+      grid-column:1 / 4;
+      left: auto;
+      bottom: 0;
+    }
+  }
+}
+.shippingTable{
+  border: 0;
+  width: max-content;
+  .shippingTableHead{
+    display: table-row-group;
+    vertical-align: middle;
+    text-align: center;
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #202020;
+    .shippingTableRow{
+      width: 100%;
+      .shippingTableHeadDeliveryName,.shippingTableHeadDeliveryEstimate,.shippingTableHeadDeliveryPrice{
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        text-transform: uppercase;
+        padding-bottom: 15px;
+      }
+    }
+  }
+  .shippingTableBody{
+    .shippingTableRow{
+      .shippingTableCell{
+        padding-bottom: 15px;
+      }
+      .shippingTableCellDeliveryName{
+        .shippingTableLabel{
+          .shippingTableRadioBtn{
+            display: none;
+          }
+        }
+      }
+      .shippingTableCell,.shippingTableLabel,.currencyContainer{
+        font-size: 12px;
+        line-height: 16px;
+        color: #AFAFAF;
+        text-align: start;
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 400;
+      }
+    }
+  }
+}