feat(main): cria componente de pix

This commit is contained in:
Andrea Matsunaga 2023-02-05 13:42:44 -03:00
parent dcffea037a
commit dd4dce7d08
12 changed files with 131 additions and 6 deletions

3
react/PixDiscount.tsx Normal file
View File

@ -0,0 +1,3 @@
import PixDiscount from "./components/PixDiscount/PixDiscount";
export default PixDiscount;

View File

@ -2,3 +2,11 @@
background-color: yellow;
padding-right: 16px;
} */
[class*="html--pix-price"] {
display: flex;
align-items: flex-end;
gap: 26px;
margin-top: 8px;
margin-bottom: 16px;
}

View File

@ -0,0 +1,43 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
// import { useQuery } from "react-apollo";
// import pixPrice from "../../graphql/pixPrice.graphql";
const PixDiscount = () => {
const productContextValue = useProduct();
const sellingPrice =
productContextValue?.product?.priceRange?.sellingPrice?.highPrice;
const pixPrice = (sellingPrice! * 0.9).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(productContextValue);
return (
<>
<p className={styles.pixDiscount}>{`R$ ${pixPrice}`}</p>
{/* <p>{testingApi}</p> */}
</>
);
};
export default PixDiscount;
// "vtex.search-graphql": "0.x"
// const { data } = useQuery(pixPrice, {
// variables: {
// slug: productContextValue?.product?.productName,
// },
// ssr: false,
// });
// const testingApi = fetch(
// "https://agenciamagma.dev.com.br/api/checkout/pub/orderForms/simulation"
// )
// .then((response) => response.json())
// .then((data) => console.log(data));

View File

@ -0,0 +1,8 @@
.pixDiscount {
/* background-color: red; */
margin: 0;
/* font-family: "Open Sans"; */
font-weight: 700;
font-size: 18px;
color: rgba(0, 0, 0, 0.58);
}

4
react/typings/css.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.css" {
const css: any;
export default css;
}

View File

@ -184,10 +184,11 @@
"flex-layout.row#product-name",
"product-identifier.product",
// "product-rating-summary",
// "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
// "product-separator",
// "flex-layout.row#list-price-savings",
"html#pix-price",
"product-separator",
"sku-selector",
"product-quantity",
"product-assembly-options",
@ -207,6 +208,33 @@
"children": ["vtex.store-components:product-name"]
},
"html#pix-price": {
"props": {
"tag": "div",
"testId": "pix-price",
"blockClass": "pix-price"
},
"children": ["image#pix-logo", "flex-layout.col#pix-discount"]
},
// "flex-layout.col#pix-image": {
// "children": ["image#pix-logo"]
// },
"image#pix-logo": {
"props": {
"src": "https://agenciamagma.vteximg.com.br/arquivos/pix-andreamm.svg",
"blockClass": "pix-logo"
}
},
"flex-layout.col#pix-discount": {
"children": ["pix-discount", "product-price-savings"],
"props": {
"blockClass": "pix-discount"
}
},
"sku-selector": {
"props": {
"variationsSpacing": 3,

View File

@ -25,5 +25,12 @@
"message": "{installmentsNumber} x de {installmentValue} sem juros",
"installmentsCriteria": "max-quantity-without-interest"
}
},
"product-price-savings": {
"props": {
"mininumPercentage": 10,
"message": "10% de desconto" //{savingsPercentage}
}
}
}

View File

@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
},
"pix-discount": {
"component": "PixDiscount"
}
}

View File

@ -25,3 +25,9 @@
.installments .currencyContainer {
font-weight: 700;
}
.savings {
font-weight: 300;
font-size: 13px;
color: #929292;
}

View File

@ -59,3 +59,9 @@
line-height: 34px;
color: #575757;
}
.imageElement--pix-logo {
width: 66px;
height: 24px;
padding-bottom: 5px;
}

View File

@ -18,8 +18,11 @@
.currencyContainer {
font-weight: 700;
}
// .installmentValue {
// display: inline;
// }
}
.savings {
// font-family: "Open Sans";
font-weight: 300;
font-size: 13px;
color: #929292;
}

View File

@ -64,3 +64,9 @@
line-height: 34px;
color: #575757;
}
.imageElement--pix-logo {
width: 66px;
height: 24px ;
padding-bottom: 5px;
}