diff --git a/assets/pix.png b/assets/pix.png
new file mode 100644
index 0000000..e52663d
Binary files /dev/null and b/assets/pix.png differ
diff --git a/package.json b/package.json
index 4b65062..d64cb62 100644
--- a/package.json
+++ b/package.json
@@ -16,29 +16,29 @@
"keywords": [],
"author": "",
"devDependencies": {
+ "@typescript-eslint/eslint-plugin": "^4.18.0",
+ "@typescript-eslint/parser": "^4.18.0",
+ "@vtex/prettier-config": "0.1.4",
+ "concurrently": "^6.0.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
+ "eslint-config-vtex": "12.3.2",
+ "eslint-config-vtex-react": "^6.2.1",
"eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-react": "^7.23.1",
"glob": "^7.1.6",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-sass": "^5.0.0",
"gulp-wait": "0.0.2",
- "sass": "^1.37.5",
- "concurrently": "^6.0.0",
- "@typescript-eslint/eslint-plugin": "^4.18.0",
- "@typescript-eslint/parser": "^4.18.0",
- "@vtex/prettier-config": "0.1.4",
- "eslint-config-vtex": "12.3.2",
- "eslint-config-vtex-react": "^6.2.1",
- "eslint-plugin-react": "^7.23.1",
"husky": "^5.2.0",
"lint-staged": "10.1.1",
"prettier": "2.0.2",
+ "sass": "^1.37.5",
"typescript": "3.8.3"
},
"dependencies": {
"husky": "^5.2.0",
"react": "^17.0.2"
}
-}
+}
\ No newline at end of file
diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx
deleted file mode 100644
index 8980692..0000000
--- a/react/Placeholder.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Placeholder from "./components/placeholder";
-
-export default Placeholder;
diff --git a/react/PlaceholderAdd.tsx b/react/PlaceholderAdd.tsx
new file mode 100644
index 0000000..a74b44e
--- /dev/null
+++ b/react/PlaceholderAdd.tsx
@@ -0,0 +1,3 @@
+import PlaceholderAdd from "./components/placeholder";
+
+export default PlaceholderAdd;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index aa7570c..f97398d 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -34,6 +34,12 @@
margin-bottom: 32px;
}
+[class*="html--pix"] {
+ display: flex;
+ gap: 26px;
+ align-items: center;
+}
+
@media screen and (max-width: 1024px) {
[class*="html--product-main"] {
flex-direction: column;
diff --git a/react/components/pix/index.tsx b/react/components/pix/index.tsx
index fc87a45..9498915 100644
--- a/react/components/pix/index.tsx
+++ b/react/components/pix/index.tsx
@@ -1,40 +1,28 @@
import React from "react";
-import { useProduct } from "vtex.product-context";
import { useCssHandles } from "vtex.css-handles";
+import { useProduct } from "vtex.product-context";
+import "./styles.css";
const Pix = () => {
- const productContextValue = useProduct();
- const price = productContextValue?.product?.priceRange.listPrice.highPrice;
+ const productContext = useProduct();
+ const price = productContext?.product?.priceRange.listPrice.highPrice;
+ const CSS_HANDLES = ["containerPix", "imagePix", "pricePix", "textPix"];
+ const { handles } = useCssHandles(CSS_HANDLES);
- console.log(productContextValue);
-
- console.log(price);
- let pix;
let valuePix;
if (price !== undefined) {
- pix = (price / 100) * 10;
- console.log(pix, "valor lido");
- valuePix = price - pix;
- console.log(valuePix);
+ const value = (price / 100) * 10;
+ valuePix = price - value;
}
- const CSS_HANDLES = [
- 'imagePix',
- 'textPix'
- ]
-
- const handles = useCssHandles(CSS_HANDLES)
-
return (
-
-
-
R$ {valuePix}
-
+
R$ {valuePix}
+
10% de desconto
+