feat(placeholder): Adiciona placeholder ao input de cep e ajusta a tabela de cep

react/Placeholder.tsx

@@ -0,0 +1 @@
+export { Placeholder as default } from './components/PlaceHolder'

react/components/PlaceHolder/index.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react'
+
+export const Placeholder = () => {
+  async function QuerySelect(selector: string) {
+    return new Promise<HTMLInputElement>(resolve => {
+      const getElement = () => {
+        const element = document.querySelector<HTMLInputElement>(selector)
+        if (element) {
+          resolve(element)
+        } else {
+          requestAnimationFrame(getElement)
+        }
+      }
+      getElement()
+    })
+  }
+  async function alterInput() {
+    const cep = await QuerySelect(
+      'form[class*=vtex-address-form__postalCode] input'
+    )
+
+    console.log(cep)
+    cep?.setAttribute('placeholder', 'Digite seu CEP')
+  }
+
+  useEffect(() => {
+    alterInput()
+  }, [])
+
+  return <></>
+}

store/blocks/pdp/product.jsonc

@@ -119,7 +119,8 @@
       // "product-gifts",
       // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "html#shipping-simulator"
+      "html#shipping-simulator",
+      "placeholder"
       // "share#default"
     ]
   },

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "placeholder": {
+    "component": "Placeholder"
   }
 }

styles/css/vtex.address-form.css

@@ -10,4 +10,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .input {
   height: 49px;
+  padding: 0 0 0 16px;
+  display: flex;
+  justify-content: center;
+}
+.input::placeholder {
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
 }

styles/css/vtex.store-components.css

@@ -154,6 +154,8 @@
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;
   padding-right: 21px;
+  display: flex;
+  align-items: center;
 }
 .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
   display: none;
@@ -190,6 +192,10 @@
 .shippingTable .shippingTableHead {
   display: table-row;
 }
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: grid;
+  grid-template-columns: 35% 25% 40%;
+}
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice,
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
@@ -215,7 +221,7 @@
 }
 .shippingTable .shippingTableBody .shippingTableRow {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 35% 25% 40%;
   grid-template-rows: 1;
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {

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

@@ -1,3 +1,12 @@
 .input {
   height: 49px;
+  padding: 0 0 0 16px;
+  display: flex;
+  justify-content: center;
+
+  &::placeholder {
+    font-size: 12px;
+    line-height: 16px;
+    color: $color-gray9;
+  }
 }

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

@@ -178,6 +178,8 @@
   :global(.vtex-input-prefix__group) {
     height: 49px;
     padding-right: 21px;
+    display: flex;
+    align-items: center;
     :global(.vtex-input__suffix) {
       display: none;
     }
@@ -219,6 +221,8 @@
     display: table-row;
 
     .shippingTableRow {
+      display: grid;
+      grid-template-columns: 35% 25% 40%;
       .shippingTableHeadDeliveryName,
       .shippingTableHeadDeliveryPrice,
       .shippingTableHeadDeliveryEstimate {
@@ -254,7 +258,7 @@
   .shippingTableBody {
     .shippingTableRow {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: 35% 25% 40%;
       grid-template-rows: 1;
 
       .shippingTableCellDeliveryEstimate {