feat(cep):cep fechado estilizado

react/Placeholder.tsx

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

react/components/Html/styles.css

@@ -55,7 +55,7 @@
   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;
@@ -193,3 +193,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,14 +1,8 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import {  useProduct  } from 'vtex.product-context';
 
-const Pix: React.FC = () => {
+const Pix = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  
-  useEffect(() => {
-    if (buttonRef.current) {
-      buttonRef.current.innerHTML = 'Novo texto';
-      buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
-    }
-  }, []);
   const { product } = useProduct()
 
   let pixprice = product?.priceRange.sellingPrice.lowPrice

react/components/ProductContext/Placeholder.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Placeholder = () => {
+  if (typeof document !== "undefined") {
+    const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
+    Placeholder?.setAttribute("Placeholder","Digite seu CEP")
+  }
+  return(
+    <>
+    </>
+  )
+}
+export default Placeholder;

store/blocks/pdp/product.jsonc

@@ -1,6 +1,7 @@
 {
   "store.product": {
     "children": [
+      "html#Placeholder",
       "html#breadcrumb",
       "condition-layout.product#availability",
       "html#departaments",
@@ -14,6 +15,9 @@
     },
     "children": ["Pix"]
   },
+  "html#Placeholder":{
+    "children": ["Placeholder"]
+  },
   "tab-layout#pdp": {
     "children": [
       "tab-list#pdp",

store/interfaces.json

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

styles/css/vtex.store-components.css

@@ -295,3 +295,75 @@
   padding: 14px 14px 16px;
   color: #989898;
 }
+
+.shippingContainer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  position: relative;
+  align-items: end;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: grid;
+  grid-column: 1/2;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-button) {
+  display: block;
+  grid-column: 2/3;
+  background: #000000;
+  width: max-content;
+  height: max-content;
+}
+.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: max-content;
+}
+.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;
+}
+.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) {
+  position: absolute;
+  grid-column: 3/4;
+  right: 0;
+  bottom: 25%;
+  left: 0;
+  margin-left: 32px;
+}

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

@@ -268,5 +268,76 @@
     color: #989898;
   }
 }
+.shippingContainer{
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  position: relative;
+  align-items: end;
+  :global(.vtex-address-form__postalCode ){
+    display: grid;
+    grid-column: 1 / 2;
+    padding: 0;
+  }
+  :global(.vtex-button){
+    display: block;
+    grid-column: 2 / 3;
+    background: #000000;
+    width: max-content;
+    height: max-content;
+    :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: max-content;
+      :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;
+      &::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){
+    position: absolute;
+    grid-column: 3 / 4;
+    right: 0;
+    bottom: 25%;
+    left: 0;
+    margin-left: 32px;
+  }
+}