From 5c9b7826b05c5010d8a84b53bbcd8a0db936cc9b Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 6 Feb 2023 14:41:25 -0300
Subject: [PATCH] feat: Adicionado os estilos do pagamento pix

---
 .vscode/settings.json                      | 11 +++++-
 react/components/PaymentPix/PaymentPix.tsx | 21 ++++++++----
 react/components/PaymentPix/styles.css     | 39 ++++++++++++++++++++++
 3 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 react/components/PaymentPix/styles.css

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 (
-    <div>
-      <p>R$ {convertPrice}</p>
-      <p>10% de desconto</p>
+    <div className={styles.paymentPixWrapper}>
+      <img
+        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>
   );
 };
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;
+}