diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/components/Pix/Pix.module.css b/react/components/Pix/Pix.module.css new file mode 100644 index 0000000..83743cd --- /dev/null +++ b/react/components/Pix/Pix.module.css @@ -0,0 +1,3 @@ +.containerPix { + background-color: red; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..c1483dc --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./Pix.module.css"; + +const Pix = () => { + const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice; + const discount = (Number(price) * 10) / 100; + const priceWithDiscount = Number(price) - Number(discount); + return ( +
+ Imagem do pix +
+

R$ {priceWithDiscount.toFixed(2)}

+

10 % de desconto

+
+
+ ); +}; + +export default Pix; diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..cbe652d --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index bc47d8d..a65b8c6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,7 +2,7 @@ "store.product": { "children": [ /*"html#breadcrumb",*/ - "breadcrumb#teste1", + "breadcrumb#pdp", "condition-layout.product#availability", "tab-layout#details", /*"html#description",*/ @@ -22,15 +22,6 @@ "label": "Assine nossa newsletter", "placeholder": "Digite seu e-mail", "blockClass": "newsletter" - }, - "blocks": ["rich-text#newsletter"] - }, - "rich-text#newsletter": { - "props": { - "textAlignment": "CENTER", - "textPosition": "CENTER", - "text": "Receba ofertas e novidades por e-mail", - "blockClass": "news-msg" } }, @@ -167,21 +158,21 @@ } }, - "breadcrumb#teste1": { + "breadcrumb#pdp": { "props": { "blockClass": "testebread", "showOnMobile": true } }, - "html#breadcrumb": { + /*"html#breadcrumb": { "props": { "tag": "section", "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, "children": ["breadcrumb"] - }, + },*/ "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -275,6 +266,7 @@ /*"flex-layout.row#list-price-savings", desconto*/ "flex-layout.row#selling-price", "product-installments", + "Pix", /*"product-separator",*/ "sku-selector", /*"product-quantity",*/ diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..2d07e38 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "Pix": { + "component": "Pix" } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 439824f..5eee30b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -410,18 +410,25 @@ } .newsletter--newsletter { + justify-content: center; + display: flex; margin-top: 64px; padding-top: 32px; padding-bottom: 16px; background-color: #000000; + border-bottom: 1px solid #fff; } .container--newsletter { + /*width: 53.75%;*/ + width: 774px; color: #fff; + max-width: unset; } .form--newsletter { position: relative; + max-width: unset; } .form--newsletter :global(.vtex-styleguide-9-x-noAppearance) { background-color: #000000; @@ -434,6 +441,18 @@ padding-bottom: 4px; align-items: flex-end; } +.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} .label--newsletter { font-weight: 400; @@ -444,8 +463,8 @@ .label--newsletter::after { content: "Receba ofertas e novidades por e-mail"; position: absolute; - right: 100px; - top: 42px; + right: 234px; + top: 50px; font-weight: 400; font-size: 18px; line-height: 25px; @@ -455,4 +474,24 @@ .inputGroup--newsletter { margin-top: 40px; padding: 0; +} + +.buttonContainer--newsletter { + margin: 0; + padding: 0; + width: 84px; +} +.buttonContainer--newsletter :global(.vtex-button) { + border: none; + border-radius: 0%; + border-bottom: 3px solid #bfbfbf; + background-color: transparent; + width: 100%; +} +.buttonContainer--newsletter :global(.vtex-button) :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; + padding: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2eb7486..3918050 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -469,17 +469,24 @@ //NEWSLETTER .newsletter--newsletter { + justify-content: center; + display: flex; margin-top: 64px; padding-top: 32px; padding-bottom: 16px; background-color: $color-black-100; + border-bottom: 1px solid $color-white; } .container--newsletter { + /*width: 53.75%;*/ + width: 774px; color: $color-white; + max-width: unset; } .form--newsletter { position: relative; + max-width: unset; :global(.vtex-styleguide-9-x-noAppearance) { background-color: $color-black-100; @@ -492,6 +499,20 @@ border-radius: 0%; padding-bottom: 4px; align-items: flex-end; + + :global(.vtex-styleguide-9-x-hideDecorators) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + + &::placeholder { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + } + } } } @@ -503,8 +524,8 @@ &::after { content: "Receba ofertas e novidades por e-mail"; position: absolute; - right: 100px; - top: 42px; + right: 234px; + top: 50px; font-weight: 400; font-size: 18px; line-height: 25px; @@ -516,3 +537,25 @@ margin-top: 40px; padding: 0; } + +.buttonContainer--newsletter { + margin: 0; + padding: 0; + width: 84px; + + :global(.vtex-button) { + border: none; + border-radius: 0%; + border-bottom: 3px solid $color-gray9; + background-color: transparent; + width: 100%; + + :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; + padding: 0; + } + } +}