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 (
+
+
+
+
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;
+ }
+ }
+}