SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adicionado os estilos do pagamento pix

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-02-06 14:41:25 -03:00
parent 6fdf9d88dd
commit 5c9b7826b0
3 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.vscode/settings.json vendored
View File

@ -164,5 +164,14 @@
} }
} }
} }
] ],
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": false
},
"explorerExclude.backup": {}
} }

21
react/components/PaymentPix/PaymentPix.tsx
View File

@ -1,21 +1,30 @@
import React from "react"; import React from "react";
import { useProduct } from "vtex.product-context"; import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const PaymentPix = () => { const PaymentPix = () => {
const product = useProduct(); const product = useProduct();
const pricePix = ( const pricePix = (
(product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
).toFixed(2); ).toFixed(2);
{
/*const imagePix =*/ const imagePix =
} "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
const convertPrice = pricePix.toString().replace(".", ","); const convertPrice = pricePix.toString().replace(".", ",");
return ( return (
<div> <div className={styles.paymentPixWrapper}>
<p>R$ {convertPrice}</p> <img
<p>10% de desconto</p> className={styles.paymentPixImg}
src={imagePix}
alt="Imagem do Pix"
/>
<div className={styles.paymentPixText}>
<p className={styles.paymentPixValue}>R$ {convertPrice}</p>
<p className={styles.paymentPixDiscount}>10% de desconto</p>
</div>
</div> </div>
); );
}; };

39
react/components/PaymentPix/styles.css Normal file
View File

@ -0,0 +1,39 @@
.paymentPixWrapper {
display: flex;
flex-direction: row;
margin-top: 8px;
margin-bottom: 16px;
height: 39px;
gap: 26px;
align-items: center;
}
.paymentPixImg {
display: flex;
width: 66px;
height: 24px;
align-items: center;
}
.paymentPixText {
display: flex;
flex-direction: column;
align-items: center;
}
.paymentPixValue {
margin: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.paymentPixDiscount {
margin: 0;
color: #929292;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
}