diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 02744f7..f968dcc 100644 --- a/react/components/Pix/Pix.tsx +++ b/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(); - //console.log(productContextValue); + // CEP Placeholder -------------------------------------------------------------- - 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 ( <> diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4c889a6..56fa195 100644 --- a/styles/css/vtex.store-components.css +++ b/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; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 06e105c..4771002 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/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 {