feat: aplica e estiliza o placeholder do cep

react/components/Pix/Pix.tsx

@@ -1,18 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useProduct } from 'vtex.product-context';
 
 import styles from './styles.css';
 
 const Pix = () => {
 
-    const productContextValue = useProduct();
+  // CEP Placeholder --------------------------------------------------------------
-    //console.log(productContextValue);
 
-    const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+  useEffect(() => {
+    const inputCep = document.querySelector(".vtex-address-form-4-x-input");
 
-    const discount = (Number(price) * (10 / 100));
+    inputCep?.setAttribute("placeholder", "Digite seu CEP");
+  });
 
-    const pixValue = (Number(price) - Number(discount));
+  // Pix --------------------------------------------------------------------------
+
+  const productContextValue = useProduct();
+  //console.log(productContextValue);
+  const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+  const discount = (Number(price) * (10 / 100));
+
+  const pixValue = (Number(price) - Number(discount));
 
   return (
     <>

styles/css/vtex.store-components.css

@@ -265,6 +265,12 @@
   position: absolute;
   margin: 2px;
 }
+.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #AFAFAF;
+}
 
 .shippingTable {
   margin: 16px 0 0 0;

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

@@ -274,6 +274,15 @@
     position: absolute;
     margin: 2px;
   }
+
+  :global(.vtex-address-form-4-x-input) {
+    &::placeholder {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #AFAFAF;
+    }
+  }
 }
 
 .shippingTable {