cainamilech/challenge-vtex-io-caina
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp): Adiciona componente pix

Browse Source
This commit is contained in:
Cainã Milech 2023-01-29 15:46:45 -03:00
parent 1ad8479f6c
commit c6d34bfff4
8 changed files with 124 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Pix.tsx Normal file
View File

@ -0,0 +1,3 @@
import Pix from "./components/Pix/Pix";
export default Pix;

3
react/components/Pix/Pix.module.css Normal file
View File

@ -0,0 +1,3 @@
.containerPix {
background-color: red;
}

23
react/components/Pix/Pix.tsx Normal file
View File

@ -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 (
<div className={styles.containerPix}>
<img
src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png"
alt="Imagem do pix"
/>
<div>
<p>R$ {priceWithDiscount.toFixed(2)}</p>
<p>10 % de desconto</p>
</div>
</div>
);
};
export default Pix;

1
react/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "*.css";

18
store/blocks/pdp/product.jsonc
View File

@ -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",*/

3
store/interfaces.json
View File

@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
},
"Pix": {
"component": "Pix"
}
}

43
styles/css/vtex.store-components.css
View File

@ -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;
}

47
styles/sass/pages/product/vtex.store-components.scss
View File

@ -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;
}
}
}