diff --git a/assets/iconPix.svg b/assets/iconPix.svg
new file mode 100644
index 0000000..af826b6
--- /dev/null
+++ b/assets/iconPix.svg
@@ -0,0 +1,38 @@
+
diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
- "agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",
diff --git a/react/PayWithPix.tsx b/react/PayWithPix.tsx
new file mode 100644
index 0000000..13fe3a0
--- /dev/null
+++ b/react/PayWithPix.tsx
@@ -0,0 +1,3 @@
+import { PayWithPix } from "./components/PayWithPix/PayWithPix";
+
+export default PayWithPix;
diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx
new file mode 100644
index 0000000..fbdca5f
--- /dev/null
+++ b/react/ProductContext.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import { useProduct } from "vtex.product-context";
+
+const ProductContext = () => {
+ const productContext = useProduct();
+ const [simulation, setSimulation] = useState();
+ useEffect(() => {
+ fetch("/api/checkout/pub/orderForms/simulation?sc=1", {
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ method: "POST",
+ body: JSON.stringify({
+ paymentData: {
+ payments: [{ paymentSystem: "125", installments: 1 }],
+ },
+ items: [
+ {
+ id: productContext?.selectedItem?.itemId,
+ quantity: 1,
+ seller: "1",
+ },
+ ],
+ country: "BRA",
+ }),
+ }).then(async (res) => {
+ setSimulation(await res.json());
+ });
+ }, [productContext?.selectedItem]);
+
+ console.log("productContext", productContext);
+ return <> {simulation?.paymentData?.payments[0]?.value};
+};
+
+export default ProductContext;
diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..847f910 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
- children?: ReactNode,
- /**
- * Qual tag Html que deseja que seja usar
- *
- * @default div
- */
- tag?: keyof React.ReactHTML
- /**
- * Classes CSS extras que deseja adicionar.
- * Feito para uso de [classes do tachyons](https://tachyons.io/)
- */
- tachyonsClasses?: string
- /**
- * Se caso quiser usar esse componente
- * para adicinar um texto simples
- */
- text?: string
- /**
- * Tag ID para
- */
- testId?: string
-}
-
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
- const { handles } = useCssHandles(CSS_HANDLES);
-
- const props = {
- className: `${handles.html} ${classes}`,
- "data-testid": testId
- };
- const Children = <>{children}{text};
- const Element = React.createElement(tag, props, Children);
-
- return <>{Element};
+ children?: ReactNode;
+ /**
+ * Qual tag Html que deseja que seja usar
+ *
+ * @default div
+ */
+ tag?: keyof React.ReactHTML;
+ /**
+ * Classes CSS extras que deseja adicionar.
+ * Feito para uso de [classes do tachyons](https://tachyons.io/)
+ */
+ tachyonsClasses?: string;
+ /**
+ * Se caso quiser usar esse componente
+ * para adicinar um texto simples
+ */
+ text?: string;
+ /**
+ * Tag ID para
+ */
+ testId?: string;
+};
+
+export const Html = ({
+ children = null,
+ tag = "div",
+ text = "",
+ tachyonsClasses: classes = "",
+ testId,
+}: HtmlProps) => {
+ const { handles } = useCssHandles(CSS_HANDLES);
+
+ const props = {
+ className: `${handles.html} ${classes}`,
+ "data-testid": testId,
+ };
+ const Children = (
+ <>
+ {children}
+ {text}
+
+ );
+ const Element = React.createElement(tag, props, Children);
+
+ return <>{Element};
};
diff --git a/react/components/PayWithPix/PayWithPix.css b/react/components/PayWithPix/PayWithPix.css
new file mode 100644
index 0000000..cef306a
--- /dev/null
+++ b/react/components/PayWithPix/PayWithPix.css
@@ -0,0 +1,33 @@
+.PayWithPix {
+ display: flex;
+ column-gap: 26px;
+ align-items: center;
+ margin: 16px 0 24px;
+}
+
+.PayWithPix__pixIcon {
+ width: 66px;
+ height: 24px;
+ display: block;
+}
+
+.PayWithPix__wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.PayWithPix__price {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+ margin: 0;
+}
+
+.PayWithPix__discount {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 300;
+ font-size: 13px;
+ color: #929292;
+}
diff --git a/react/components/PayWithPix/PayWithPix.tsx b/react/components/PayWithPix/PayWithPix.tsx
new file mode 100644
index 0000000..2f54ace
--- /dev/null
+++ b/react/components/PayWithPix/PayWithPix.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import style from "./PayWithPix.css";
+
+const PayWithPix = () => {
+ const productContextValue = useProduct();
+
+ const discount =
+ (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) *
+ 0.9;
+ const priceFormatted = discount?.toFixed(2).toString().replace(".", ",");
+
+ return (
+
+
+
R$ {priceFormatted}
+
10 % de desconto
+
+