diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..4811319 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1 @@ +export { default } from "./components/Pix/Pix"; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a2d88b3..26ae228 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -104,3 +104,10 @@ [class*="html--right-col"] button { display: none; } + +[class*="html--pix"] { + display: flex; + align-items: center; + margin-top: 8px; + margin-bottom: 16px; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..02744f7 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { useProduct } from 'vtex.product-context'; + +import styles from './styles.css'; + +const 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 ( + <> + Imagem Pix + +
+

R$ {pixValue.toFixed(2).replace("." , ",")}

+

10 % de desconto

+
+ + ); +} + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..c7a39c9 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,26 @@ +.pixImage { + margin-right: 26px; + width: 66px; + height: 24px; +} + +.pixText { + display: flex; + flex-direction: column; +} + +.pixPrice { + margin: 0; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.pixDiscount { + margin: 0; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b2dfb36..3ff38ce 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -130,6 +130,14 @@ ] }, + "html#pix-price": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + "html#right-col": { "props": { "tag": "section", @@ -141,6 +149,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments#m3", + "html#pix-price", "html#sku-selector-m3", "html#product-quantity-cart-button", "product-assembly-options", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..7a7dfed 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-component": { + "component": "Pix" } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 33e040b..e4fd5f5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,10 +63,13 @@ color: #929292; } */ +.skuSelectorNameContainer { + margin: 0; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; - margin-top: 16px; margin-bottom: 16px; } .skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 23c77d9..64347d3 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -52,10 +52,14 @@ color: #929292; } */ + +.skuSelectorNameContainer { + margin: 0; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; - margin-top: 16px; margin-bottom: 16px; :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {