forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #2
@ -1,5 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useProduct } from "vtex.product-context";
|
import { useProduct } from "vtex.product-context";
|
||||||
|
import styles from "./InstallmentProduct.module.css";
|
||||||
|
|
||||||
const InstallmentProduct = () => {
|
const InstallmentProduct = () => {
|
||||||
const product = useProduct();
|
const product = useProduct();
|
||||||
@ -12,16 +13,14 @@ const InstallmentProduct = () => {
|
|||||||
product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value,
|
product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<p className="vtex-flex-layout-0-x-PriceContent">
|
<p className={styles.PriceContent}>
|
||||||
<strong>
|
<strong>{productWithInstallments.numberOfInstallments}x </strong>
|
||||||
{productWithInstallments.numberOfInstallments}x
|
|
||||||
</strong>
|
|
||||||
de
|
de
|
||||||
<strong>
|
<strong>
|
||||||
R$
|
R$
|
||||||
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
|
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
|
||||||
</strong> sem juros
|
</strong>{" "}
|
||||||
|
sem juros
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -31,15 +31,4 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 48.819% 48.819%;
|
grid-template-columns: 48.819% 48.819%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.flexColChild .PriceContent {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #929292;
|
|
||||||
}
|
|
||||||
.flexColChild .PriceContent :nth-child(1n) {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
@ -23,18 +23,3 @@
|
|||||||
grid-template-columns: 48.819% 48.819%;
|
grid-template-columns: 48.819% 48.819%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// dados produto
|
|
||||||
|
|
||||||
.flexColChild {
|
|
||||||
.PriceContent {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #929292;
|
|
||||||
& :nth-child(1n) {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user