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/Installment.tsx b/react/Installment.tsx
new file mode 100644
index 0000000..76cde17
--- /dev/null
+++ b/react/Installment.tsx
@@ -0,0 +1,2 @@
+import Installment from "./components/Installment/index";
+export default Installment;
diff --git a/react/PixDiscount.tsx b/react/PixDiscount.tsx
new file mode 100644
index 0000000..f4e902f
--- /dev/null
+++ b/react/PixDiscount.tsx
@@ -0,0 +1,2 @@
+import PixDiscount from "./components/PixDiscount/index";
+export default PixDiscount;
diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx
new file mode 100644
index 0000000..53ea3ff
--- /dev/null
+++ b/react/Placeholder.tsx
@@ -0,0 +1,3 @@
+import Placeholder from "./components/Placeholder/index";
+
+export default Placeholder;
diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..7319e12 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,41 +1,53 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./style.css";
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/Html/style.css b/react/components/Html/style.css
new file mode 100644
index 0000000..6a029ae
--- /dev/null
+++ b/react/components/Html/style.css
@@ -0,0 +1,12 @@
+
+[class*="html--product-quantity"] {
+ height: 100%;
+}
+[class*="html--buy-button "] {
+ height: 100%;
+ width: 100%;
+}
+
+[class*="html--cep"] {
+ margin: 16px 0;
+}
diff --git a/react/components/Installment/Installment.module.css b/react/components/Installment/Installment.module.css
new file mode 100644
index 0000000..4c896d1
--- /dev/null
+++ b/react/components/Installment/Installment.module.css
@@ -0,0 +1,15 @@
+.installment-product {
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ margin: 0;
+ padding: 0;
+ height: 22px;
+ color: #929292;
+}
+
+.installment-product__strong {
+ font-weight: 700;
+}
diff --git a/react/components/Installment/index.tsx b/react/components/Installment/index.tsx
new file mode 100644
index 0000000..9e7f39a
--- /dev/null
+++ b/react/components/Installment/index.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./Installment.module.css";
+
+const Installment = () => {
+ const skuProduct = useProduct();
+ console.log(skuProduct);
+
+ const productInstallment: any = {
+ numberOfInstallment:
+ skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
+ .NumberOfInstallments,
+ value:
+ skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
+ .Value,
+ };
+
+ return (
+
+
+ {productInstallment.numberOfInstallment}x{" "}
+
+ de
+
+ {""} R${" "}
+ {productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "}
+
+ sem juros
+
+ );
+};
+
+export default Installment;
diff --git a/react/components/PixDiscount/PixDiscount.module.css b/react/components/PixDiscount/PixDiscount.module.css
new file mode 100644
index 0000000..a739a1d
--- /dev/null
+++ b/react/components/PixDiscount/PixDiscount.module.css
@@ -0,0 +1,38 @@
+.pixContainer {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ height: 39px;
+ column-gap: 26px;
+ margin: 8px 0 16px 0;
+}
+
+.pixContainer__img {
+ width: 66px;
+ height: 24px;
+}
+
+.pixContainer__discount {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.pixContainer__priceFinal {
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+}
+
+.pixContainer__discount__value {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 18px;
+ color: #929292;
+}
diff --git a/react/components/PixDiscount/index.tsx b/react/components/PixDiscount/index.tsx
new file mode 100644
index 0000000..4da239f
--- /dev/null
+++ b/react/components/PixDiscount/index.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./PixDiscount.module.css";
+
+const PixDiscount = () => {
+ const skuProduct = useProduct();
+ const productPrice = {
+ price: Number(
+ skuProduct?.selectedItem?.sellers[0]?.commertialOffer?.Price.toFixed(2)
+ ),
+ };
+
+ const discount = productPrice.price * 0.1;
+ const pixPrice = productPrice.price - discount;
+
+ console.log(pixPrice);
+
+ return (
+
+
+
+
+ R$ {pixPrice?.toFixed(2).toString().replace(".", ",")}
+
+
+ 10% de desconto
+
+
+