feat: Adiciona o placeholder para o CEP e Email no produto indisponivel

react/Installments.tsx

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

react/Placeholder.tsx

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

react/components/Html/styles.css

@@ -246,7 +246,7 @@
 
 @media screen and (min-width: 1920px) {
   [class*="html--pdp-breadcrumb"] {
-    margin: 0 360px;
+    margin: 16px 360px;
   }
 
   [class*="html--product-main"] {

react/components/Installments/index.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { useProduct } from "vtex.product-context";
-import styles from "./styles.css";
-
-const Installments = () => {
-  const product = useProduct();
-  const installment = {
-    numberOfInstallments:
-      product?.selectedItem?.sellers[0].commertialOffer?.Installments[3]
-        .NumberOfInstallments,
-    value:
-      product?.selectedItem?.sellers[0].commertialOffer?.Installments[3].Value,
-  };
-  return (
-    <p className={styles.parcelas}>
-      <strong>
-        {installment.numberOfInstallments} x{" "}
-      </strong>
-      de
-      <strong>
-        {" "}
-        R$ {installment.value?.toFixed(2).toString().replace(".", ",")}
-      </strong>{" "}
-      sem juros
-    </p>
-  );
-};
-
-export default Installments;

react/components/Installments/styles.css

@@ -1,9 +0,0 @@
-.parcelas {
-  margin: 0;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-  margin-bottom: 8px;
-}

react/components/Pix/styles.css

@@ -1,7 +1,7 @@
 .pixWrapper {
   display: flex;
   gap: 26px;
-  margin-bottom: 16px;
+  margin:8px 0 16px;
   align-items: center;
 }
 

react/components/Placeholder/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Example = () => {
+  if (typeof document !== "undefined") {
+    const inputCEP = document.querySelector(".vtex-address-form-4-x-input");
+    const inputEmail = document.querySelector(".vtex-store-components-3-x-inputEmail");
+
+    if (inputCEP) {
+      inputCEP.setAttribute("placeholder", "Digite seu CEP");
+    }
+
+    if (inputEmail) {
+      console.log(inputEmail.children[0].children[0].children[0].setAttribute("placeholder", "E-mail"));
+
+    }
+  }
+
+  return <></>;
+};
+
+export default Example;

store/blocks/pdp/product.jsonc

@@ -1,6 +1,7 @@
 {
   "store.product": {
     "children": [
+      "placeholder",
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#description",
@@ -57,7 +58,8 @@
   },
 
   "product-summary.shelf#related-product": {
-    "children": [ "html#product-item"
+    "children": [
+      "html#product-item"
       // "product-summary-image#related-product",
       // "product-summary-name",
       // "product-summary-price"
@@ -278,8 +280,8 @@
       // "product-rating-summary",
       // "flex-layout.row#list-price-savings",
       "html#selling-price",
-      // "product-installments",
+      "product-installments",
-      "installments",
+      // "installments",
       // "product-separator",
       "html#pix",
       "html#sku-selector",
@@ -294,6 +296,15 @@
     ]
   },
 
+  "product-installments": {
+    "props": {
+      "markers": ["discount"],
+      "blockClass": "installments",
+      "message": "ou <discount>{installmentsNumber}x</discount> de <discount>R${installmentValue}</discount> sem juros",
+      "installmentsCriteria": "max-quantity-without-interest"
+    }
+  },
+
   "html#sku-selector": {
     "props": {
       "blockClass": "sku-selector",

store/interfaces.json

@@ -7,10 +7,11 @@
     "composition": "children"
   },
 
-  "installments": {
+  "placeholder": {
-    "component": "Installments"
+    "component": "Placeholder"
   },
-  
+
+
   "pix": {
     "component": "Pix"
   }

styles/css/vtex.product-price.css

@@ -13,4 +13,16 @@
   font-size: 25px;
   line-height: 38px;
   color: #000;
+}
+
+.installments {
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments .installments-discount {
+  font-weight: 700;
 }

styles/css/vtex.product-quantity.css

@@ -31,6 +31,9 @@
   font-size: 16px;
   line-height: 22px;
 }
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input):focus {
+  outline: none;
+}
 
 .quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) {
   justify-content: center;

styles/css/vtex.store-components.css

@@ -233,6 +233,14 @@
   padding: 16.5px 16px;
   margin: 0;
 }
+.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  color: #afafaf;
+}
 
 .shippingContainer :global(.vtex__icon-external-link) {
   display: none;

styles/sass/pages/product/vtex.product-price.scss

@@ -7,5 +7,14 @@
 }
 
 .installments {
-  // background: red;
+    margin: 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+
+    .installments-discount {
+      font-weight: 700;
+    }
 }

styles/sass/pages/product/vtex.product-quantity.scss

@@ -22,6 +22,10 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .quantitySelectorContainer

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

@@ -278,6 +278,14 @@
 .shippingContainer :global(.vtex-address-form-4-x-input) {
   padding: 16.5px 16px;
   margin: 0;
+  &::placeholder {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    color: #afafaf;
+  }
 }
 .shippingContainer :global(.vtex__icon-external-link) {
   display: none;