diff --git a/assets/pix-logo.png b/assets/pix-logo.png
new file mode 100644
index 0000000..3458b4a
Binary files /dev/null and b/assets/pix-logo.png differ
diff --git a/react/Example.tsx b/react/Example.tsx
index 7d550e5..fe63560 100644
--- a/react/Example.tsx
+++ b/react/Example.tsx
@@ -1,3 +1,3 @@
import Example from "./components/Example/Example";
-export default Example;
\ No newline at end of file
+export default Example;
diff --git a/react/Installments.tsx b/react/Installments.tsx
new file mode 100644
index 0000000..679a337
--- /dev/null
+++ b/react/Installments.tsx
@@ -0,0 +1,3 @@
+import Installments from "./components/Installments";
+
+export default Installments;
diff --git a/react/Pix.tsx b/react/Pix.tsx
new file mode 100644
index 0000000..1373321
--- /dev/null
+++ b/react/Pix.tsx
@@ -0,0 +1,3 @@
+import Pix from "./components/Pix";
+
+export default Pix;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 7b114be..1287216 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,5 +1,9 @@
[class*="html--pdp-breadcrumb"] {
- margin: 0 40px;
+ margin: 16px 40px;
+}
+
+[class*="html--pdp-breadcrumb"] :global(.vtex-breadcrumb-1-x-container) {
+ padding: 0;
}
[class*="html--product-main"] {
@@ -8,6 +12,16 @@
gap: 32px;
}
+[class*="html--product-availability"] {
+ display: flex;
+ padding: 0 40px 16px;
+ gap: 32px;
+}
+
+[class*="html--info-availability"] {
+ width: 48.8235294%;
+}
+
[class*="html--stack"] {
width: 48.8235294%;
}
@@ -16,6 +30,58 @@
width: 48.8235294%;
}
+[class*="html--product-name"] {
+ text-align: end;
+ margin-bottom: 24px;
+}
+
+[class*="html--buy-container"] {
+ display: flex;
+ margin-bottom: 16px;
+}
+[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRow) {
+ flex: 1;
+}
+[class*="html--buy-container"] :global(.vtex-store-components-3-x-container) {
+ padding: 0;
+ margin-left: 10px;
+}
+
+[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRowContent) {
+ background-color: red;
+ margin: 0;
+ padding: 0;
+}
+
+[class*="html--buy-container"] :global(.vtex-button) {
+ background-color: #000;
+ padding: 12px 0;
+ border: none;
+ /* font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ color: #fff; */
+ border-radius: 0;
+ height: 49px;
+}
+
+[class*="html--buy-container"]
+ :global(.vtex-add-to-cart-button-0-x-buttonText) {
+ font-size: 0;
+}
+
+[class*="html--buy-container"]
+ :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
+ content: "Adicionar à sacola";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ color: #fff;
+ text-transform: uppercase;
+}
+
@media screen and (min-width: 2500px) {
[class*="html--pdp-breadcrumb"] {
margin: 0 360px;
@@ -24,12 +90,15 @@
[class*="html--product-main"] {
padding: 0 360px 16px;
}
+ [class*="html--product-availability"] {
+ padding: 0 360px 16px;
+ }
[class*="html--stack"] {
width: 49.13043478%;
}
- [class*="html--right-col"] {
+ [class*="html--info-availability"] {
width: 49.13043478%;
}
}
@@ -40,6 +109,11 @@
padding: 0 40px 16px;
}
+ [class*="html--product-availability"] {
+ display: block;
+ padding: 0 40px 16px;
+ }
+
[class*="html--stack"] {
width: 100%;
}
@@ -47,4 +121,29 @@
[class*="html--right-col"] {
width: 100%;
}
+
+ [class*="html--product-name"] {
+ text-align: start;
+ }
+
+ [class*="html--buy-container"] :global(.vtex-button__label) {
+ padding: 0;
+ }
+}
+
+@media screen and (max-width: 376px) {
+ [class*="html--buy-container"] {
+ display: block;
+ }
+
+ [class*="html--buy-container"] :global(.vtex-store-components-3-x-container) {
+ margin: 0;
+ margin-top: 10px;
+ }
+
+ [class*="html--buy-container"] :global(.vtex-button) {
+ height: 70px;
+ }
+
+
}
diff --git a/react/components/Installments/index.tsx b/react/components/Installments/index.tsx
new file mode 100644
index 0000000..50d9c1d
--- /dev/null
+++ b/react/components/Installments/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+
+const Installments = () => {
+ const product = useProduct();
+ const installment = {
+ numberOfInstallments:
+ product?.selectedItem?.sellers[0].commertialOffer?.Installments[10]
+ .NumberOfInstallments,
+ value:
+ product?.selectedItem?.sellers[0].commertialOffer?.Installments[10].Value,
+ };
+ return (
+
+
+ {installment.numberOfInstallments} x{" "}
+
+ de
+
+ {" "}
+ R$ {installment.value?.toFixed(2).toString().replace(".", ",")}
+ {" "}
+ sem juros
+
+ );
+};
+
+export default Installments;
diff --git a/react/components/Installments/styles.css b/react/components/Installments/styles.css
new file mode 100644
index 0000000..eb2a254
--- /dev/null
+++ b/react/components/Installments/styles.css
@@ -0,0 +1,9 @@
+.parcelas {
+ margin: 0;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+ margin-bottom: 8px;
+}
diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx
new file mode 100644
index 0000000..b374dfd
--- /dev/null
+++ b/react/components/Pix/index.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import styles from "./styles.css";
+
+const Pix = () => {
+ const product = useProduct();
+ const precoAtual = Number(
+ product?.product?.priceRange.sellingPrice.highPrice
+ );
+
+ const desconto = (precoAtual * 10) / 100;
+
+ const precoNovo = precoAtual - desconto;
+
+ const fechApi = async () => {
+ fetch("/api/checkout/pub/orderForms/simulation", {
+ method: "POST",
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ body: `{
+ "items": [
+ {
+ "id": ${product?.selectedItem?.itemId},
+ "seller": ${product?.selectedItem?.sellers[0].sellerId},
+ "quantity": ${product?.selectedQuantity}
+ }
+ ],
+ "country": "BRA"
+ }`,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data);
+ });
+ };
+
+ fechApi();
+
+ return (
+
+
+ 
+
+
+
+
R$ {precoNovo.toFixed(2).replace(".", ",")}
+
10 % de desconto
+
+