diff --git a/react/PixDiscount.tsx b/react/PixDiscount.tsx new file mode 100644 index 0000000..f53e7ea --- /dev/null +++ b/react/PixDiscount.tsx @@ -0,0 +1,3 @@ +import PixDiscount from "./components/PixDiscount/PixDiscount"; + +export default PixDiscount; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 8c6ffd3..fe9a2ff 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -2,3 +2,11 @@ background-color: yellow; padding-right: 16px; } */ + +[class*="html--pix-price"] { + display: flex; + align-items: flex-end; + gap: 26px; + margin-top: 8px; + margin-bottom: 16px; +} diff --git a/react/components/PixDiscount/PixDiscount.tsx b/react/components/PixDiscount/PixDiscount.tsx new file mode 100644 index 0000000..33af005 --- /dev/null +++ b/react/components/PixDiscount/PixDiscount.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; +// import { useQuery } from "react-apollo"; +// import pixPrice from "../../graphql/pixPrice.graphql"; + +const PixDiscount = () => { + const productContextValue = useProduct(); + + const sellingPrice = + productContextValue?.product?.priceRange?.sellingPrice?.highPrice; + + const pixPrice = (sellingPrice! * 0.9).toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }); + + console.log(productContextValue); + + return ( + <> +

{`R$ ${pixPrice}`}

+ {/*

{testingApi}

*/} + + ); +}; + +export default PixDiscount; + +// "vtex.search-graphql": "0.x" + +// const { data } = useQuery(pixPrice, { +// variables: { +// slug: productContextValue?.product?.productName, +// }, +// ssr: false, +// }); + +// const testingApi = fetch( +// "https://agenciamagma.dev.com.br/api/checkout/pub/orderForms/simulation" +// ) +// .then((response) => response.json()) +// .then((data) => console.log(data)); diff --git a/react/components/PixDiscount/styles.css b/react/components/PixDiscount/styles.css new file mode 100644 index 0000000..043997f --- /dev/null +++ b/react/components/PixDiscount/styles.css @@ -0,0 +1,8 @@ +.pixDiscount { + /* background-color: red; */ + margin: 0; + /* font-family: "Open Sans"; */ + font-weight: 700; + font-size: 18px; + color: rgba(0, 0, 0, 0.58); +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 533d7a4..272323d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -184,10 +184,11 @@ "flex-layout.row#product-name", "product-identifier.product", // "product-rating-summary", - // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - // "product-separator", + // "flex-layout.row#list-price-savings", + "html#pix-price", + "product-separator", "sku-selector", "product-quantity", "product-assembly-options", @@ -207,6 +208,33 @@ "children": ["vtex.store-components:product-name"] }, + "html#pix-price": { + "props": { + "tag": "div", + "testId": "pix-price", + "blockClass": "pix-price" + }, + "children": ["image#pix-logo", "flex-layout.col#pix-discount"] + }, + + // "flex-layout.col#pix-image": { + // "children": ["image#pix-logo"] + // }, + + "image#pix-logo": { + "props": { + "src": "https://agenciamagma.vteximg.com.br/arquivos/pix-andreamm.svg", + "blockClass": "pix-logo" + } + }, + + "flex-layout.col#pix-discount": { + "children": ["pix-discount", "product-price-savings"], + "props": { + "blockClass": "pix-discount" + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index a2639d5..1530c77 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -25,5 +25,12 @@ "message": "{installmentsNumber} x de {installmentValue} sem juros", "installmentsCriteria": "max-quantity-without-interest" } + }, + + "product-price-savings": { + "props": { + "mininumPercentage": 10, + "message": "10% de desconto" //{savingsPercentage} + } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..085dfaf 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-discount": { + "component": "PixDiscount" } } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95c67fa..f5ca2e0 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -24,4 +24,10 @@ .installments .installmentsNumber, .installments .currencyContainer { font-weight: 700; +} + +.savings { + font-weight: 300; + font-size: 13px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e17c978..5688d3b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -58,4 +58,10 @@ font-size: 20px; line-height: 34px; color: #575757; +} + +.imageElement--pix-logo { + width: 66px; + height: 24px; + padding-bottom: 5px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 22fbc87..4800500 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -18,8 +18,11 @@ .currencyContainer { font-weight: 700; } - - // .installmentValue { - // display: inline; - // } +} + +.savings { + // font-family: "Open Sans"; + font-weight: 300; + font-size: 13px; + color: #929292; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 613eced..9d2b563 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -64,3 +64,9 @@ line-height: 34px; color: #575757; } + +.imageElement--pix-logo { + width: 66px; + height: 24px ; + padding-bottom: 5px; +}