feat(pix): Adiciona o custom pix

react/components/pix/ValuePix.tsx

@@ -1,19 +0,0 @@
-import { useProduct } from "vtex.product-context";
-
-const Pix = () => {
-  const productContextValue = useProduct();
-  console.log(productContextValue);
-  const price = productContextValue?.product?.priceRange.listPrice.highPrice;
-  console.log(price);
-  if (price !== undefined) {
-    const pix = (price / 100) * 10;
-    console.log(pix, "valor lido");
-    const valuePix = price - pix;
-    console.log(valuePix);
-    return valuePix;
-  } else {
-    return "valor não encontrado";
-  }
-};
-
-export default Pix;

react/components/pix/index.tsx

@@ -1,8 +1,41 @@
 import React from "react";
-import Pix from "./ValuePix";
+import { useProduct } from "vtex.product-context";
+import { useCssHandles } from "vtex.css-handles";
 
-const ValuePix = () => {
-  return <p>R$ {Pix}</p>;
+const Pix = () => {
+  const productContextValue = useProduct();
+  const price = productContextValue?.product?.priceRange.listPrice.highPrice;
+
+  console.log(productContextValue);
+
+  console.log(price);
+  let pix;
+  let valuePix;
+
+  if (price !== undefined) {
+    pix = (price / 100) * 10;
+    console.log(pix, "valor lido");
+    valuePix = price - pix;
+    console.log(valuePix);
+  }
+
+  const CSS_HANDLES = [
+    'imagePix',
+    'textPix'
+  ]
+
+  const handles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <div>
+      <img
+        className={handles.}
+        alt="imagem pix"
+        src="https://agenciamagma.vteximg.com.br/arquivos/pix.png"
+      />
+      <p>R$ {valuePix}</p>
+    </div>
+  );
 };
 
-export default ValuePix;
+export default Pix;

react/components/pix/styles.css

@@ -0,0 +1,3 @@
+.imagePix {
+  width: 25px;
+}

react/components/placeholder/index.js

@@ -1,11 +0,0 @@
-const Placeholder = () => {
-  const placeholderCep = document.querySelector(".vtex-address-form-4-x-input");
-
-  if (placeholderCep) {
-    return (placeholderCep.placeholder = "Digite seu CEP");
-  } else {
-    return "";
-  }
-};
-
-export default Placeholder;

react/components/placeholder/index.tsx

@@ -0,0 +1,16 @@
+const Placeholder = () => {
+  if (window !== undefined) {
+    if (document !== undefined) {
+      const placeholderCep = document.querySelector(
+        ".vtex-address-form__postalCode .vtex-input .vtex-input-prefix__group .vtex-address-form-4-x-hideDecorators"
+      );
+      console.log(placeholderCep);
+    } else {
+      return console.log("não achei document");
+    }
+  } else {
+    return console.log("não achei windows");
+  }
+};
+
+export default Placeholder;

react/tsconfig.json

@@ -11,8 +11,7 @@
     "./typings/*.d.ts",
     "./**/*.tsx",
     "./**/*.ts",
-    "components/placeholder/index.js",
-    "Placeholder.js",
-    "components/placeholder/index.js"
+    "components/placeholder/index.tsx",
+    "Placeholder.tsx"
   ]
 }