diff --git a/.vscode/settings.json b/.vscode/settings.json index 04540ca..bac992e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -164,5 +164,14 @@ } } } - ] + ], + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/Thumbs.db": false + }, + "explorerExclude.backup": {} } diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx index 60bf463..fe6c855 100644 --- a/react/components/PaymentPix/PaymentPix.tsx +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -1,21 +1,30 @@ import React from "react"; import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + const PaymentPix = () => { const product = useProduct(); const pricePix = ( (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 ).toFixed(2); - { - /*const imagePix =*/ - } + + const imagePix = + "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png"; const convertPrice = pricePix.toString().replace(".", ","); return ( -
-

R$ {convertPrice}

-

10% de desconto

+
+ Imagem do Pix +
+

R$ {convertPrice}

+

10% de desconto

+
); }; diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css new file mode 100644 index 0000000..23a2810 --- /dev/null +++ b/react/components/PaymentPix/styles.css @@ -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; +}