Merge pull request 'feature/paymentPix' (#6) from feature/paymentPix into development

Reviewed-on: #6

.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": {}
 }

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

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