feat(pix-custom): created components and added testId in components for test

This commit is contained in:
Henrique Santos Santana 2023-02-07 19:27:44 -03:00
parent 26fb65e434
commit ccdc63b636
19 changed files with 293 additions and 32 deletions

1
react/Global.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "*.module.css";

View File

@ -0,0 +1 @@
export { PixCustomInstallments as default } from "./components/PixCustomInstallments";

View File

@ -0,0 +1,13 @@
export const sanatizeColor = (color: string) => {
if (color) {
const [first] = color.split(" ");
if (first.indexOf("c-") === 0) {
return first;
}
return "c-on-base";
}
return "c-on-base";
};

View File

@ -0,0 +1,27 @@
.pix {
gap: 26px;
align-items: center;
max-width: 197px;
}
.pix img {
height: 26px;
width: 66px;
}
.pix p {
margin: 0;
flex-grow: 2;
}
.pix .pix__priceValue {
font-weight: 700;
font-size: 18px;
line-height: 24.51px;
color: #00000094;
}
.pix .pix__label {
font-size: 13px;
line-height: 17.7px;
}

View File

@ -0,0 +1,72 @@
import React from "react";
import styles from "./_PixCustomInstallments.module.css";
import { useProduct } from "vtex.product-context";
import { sanatizeColor } from "./_ComponentsFunctions";
interface IPixCustomInstallmentsProps {
label: string;
percent: number;
}
export function PixCustomInstallments({
label = "de desconto",
percent = 10,
}: IPixCustomInstallmentsProps) {
const data = useProduct();
const calculationPercent = (
percent: number | undefined,
value: number | undefined
) => {
if (value && percent) {
const newPercent = percent / 100;
const discount = value * newPercent;
const newValue = value - discount;
return newValue.toFixed(2).toString().replace(".", ",");
}
return "";
};
console.log(data);
return (
<div className={`${styles["pix"]} flex`}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
alt="Promoção de pagamento com o PIX"
/>
<p>
<span className={styles["pix__priceValue"]}>
{`R$ ${calculationPercent(
percent,
data?.product?.priceRange.sellingPrice.highPrice
)}`}
</span>
<div
className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
>
{`${percent}% ${label}`}
</div>
</p>
</div>
);
}
PixCustomInstallments.schema = {
title: "Promoção de pagamento com o PIX",
type: "object",
properties: {
label: {
type: "string",
},
percent: {
type: "number",
},
},
};

View File

@ -0,0 +1 @@
export { PixCustomInstallments } from "./_PixCustomInstallments";

View File

@ -46,14 +46,36 @@
}
},
"product-summary.shelf#pdp-shelf": {
"html#product-summary": {
"props": {
"testId": "vtex-product-summary"
},
"children": [
"product-summary-image#pdp-shelf",
"product-summary-name",
"product-summary-price#pdp-shelf"
"product-list-price#product-summary",
"product-selling-price#product-summary"
]
},
"product-list-price#product-summary": {
"props": {
"blockClass": "productSummary",
"markers": ["highlight"],
"message": "de {listPriceValue} por"
}
},
"product-selling-price#product-summary": {
"props": {
"blockClass": "productSummary"
}
},
"product-summary.shelf#pdp-shelf": {
"children": ["html#product-summary"]
},
"product-summary-image#pdp-shelf": {
"props": {
"showBadge": false,
@ -76,13 +98,5 @@
"phone": "124.8px"
}
}
},
"product-summary-price#pdp-shelf": {
"props": {
"showInstallments": false,
"labelListPrice": "de",
"labelSellingPrice": "por"
}
}
}

View File

@ -4,6 +4,13 @@
"blockClass": "productSpecifications"
},
"children": ["html#product-description"]
},
"html#product-description": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#product-specification"]
},

View File

@ -131,16 +131,52 @@
"children": [
"flex-layout.row#product-name",
"flex-layout.row#selling-price",
"product-installments",
"html#product-installments",
"flex-layout.row#pix-custom-installments",
"html#sku-selector",
"product-gifts",
"flex-layout.row#pdp-buy-actions",
"availability-subscriber",
"shipping-simulator"
"html#shipping-simulator"
]
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
},
"flex-layout.row#pix-custom-installments": {
"props": {
"marginBottom": 5
},
"children": ["html#pix-custom-installments"]
},
"html#pix-custom-installments": {
"props": {
"testId": "pix-price"
},
"children": ["pix-custom-installments"]
},
"pix-custom-installments": {
"props": {
"text": "de desconto"
}
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"product-installments": {
"props": {
"markers": ["discount"],
@ -163,10 +199,22 @@
"rowGap": 3
},
"children": [
"vtex.store-components:product-name",
"product-identifier.product#pdp-identifier"
]
"children": ["html#product-name", "html#pdp-identifier"]
},
"html#product-name": {
"props": {
"testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"html#pdp-identifier": {
"props": {
"testId": "product-code"
},
"children": ["product-identifier.product#pdp-identifier"]
},
"product-identifier.product#pdp-identifier": {

View File

@ -1,4 +1,12 @@
{
"html#product-selling-price": {
"props": {
"testId": "product-price"
},
"children": ["product-selling-price"]
},
"flex-layout.row#selling-price": {
"props": {
"colGap": 2,
@ -6,7 +14,7 @@
"preventHorizontalStretch": true,
"marginBottom": 4
},
"children": ["product-selling-price"]
"children": ["html#product-selling-price"]
},
"flex-layout.row#list-price-savings": {

View File

@ -2,5 +2,12 @@
"html": {
"component": "html",
"composition": "children"
},
"pix-custom-installments": {
"component": "PixCustomInstallments",
"props": {
"text": "10 % de desconto"
}
}
}

View File

@ -10,7 +10,14 @@
.listPrice {
color: #727273;
margin-bottom: 0.25rem;
font-size: 1rem;
font-size: 0.75rem;
line-height: 16.34px;
}
@media screen and (min-width: 1025px) {
.listPrice {
font-size: 0.875rem;
line-height: 19.07px;
}
}
.sellingPrice {
@ -19,10 +26,16 @@
}
.sellingPriceValue {
font-size: 1.5625rem;
line-height: 38px;
font-size: 1.125rem;
line-height: 24.51px;
font-weight: 700;
}
@media screen and (min-width: 1025px) {
.sellingPriceValue {
font-size: 1.5rem;
line-height: 32.68px;
}
}
.installments {
display: inline-block;
@ -41,6 +54,10 @@
color: #2e2e2e;
}
.sellingPriceValue--productSummary {
display: block;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
@ -68,6 +85,12 @@
font-size: 0.875rem;
}
.listPrice--productSummary {
display: block;
text-decoration: line-through;
margin-bottom: 8px;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;

View File

@ -32,11 +32,19 @@
.nameContainer {
padding-top: 1rem;
padding-bottom: 1rem;
padding-bottom: 8px;
}
.brandName {
color: #2e2e2e;
color: #000000;
font-size: 0.875rem;
line-height: 19.07px;
}
@media screen and (min-width: 1025px) {
.brandName {
font-size: 1.125rem;
line-height: 24.51px;
}
}
.container {
@ -58,12 +66,12 @@
.sellingPriceContainer .currencyContainer {
font-weight: 700;
color: #000;
font-size: 18px;
font-size: 1.125rem;
line-height: normal;
}
@media screen and (min-width: 1025px) {
.sellingPriceContainer .currencyContainer {
font-size: 24px;
font-size: 1.5rem;
line-height: normal;
}
}

View File

@ -297,6 +297,7 @@
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
color: #575757;
}
@media screen and (min-width: 1025px) {
.productDescriptionTitle {

View File

@ -1,7 +1,13 @@
.listPrice {
color: #727273;
margin-bottom: 0.25rem;
font-size: 1rem;
font-size: 0.75rem;
line-height: 16.34px;
@media screen and (min-width: 1025px) {
font-size: 0.875rem;
line-height: 19.07px;
}
}
.sellingPrice {
@ -10,9 +16,14 @@
}
.sellingPriceValue {
font-size: 1.5625rem;
line-height: 38px;
font-size: 1.125rem;
line-height: 24.51px;
font-weight: 700;
@media screen and (min-width: 1025px) {
font-size: 1.5rem;
line-height: 32.68px;
}
}
.installments {
@ -32,6 +43,10 @@
color: #2e2e2e;
}
.sellingPriceValue--productSummary {
display: block;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
@ -60,6 +75,12 @@
font-size: 0.875rem;
}
.listPrice--productSummary {
display: block;
text-decoration: line-through;
margin-bottom: 8px;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;

View File

@ -24,11 +24,19 @@
.nameContainer {
padding-top: 1rem;
padding-bottom: 1rem;
padding-bottom: 8px;
}
.brandName {
color: #2e2e2e;
color: #000000;
font-size: 0.875rem;
line-height: 19.07px;
@media screen and (min-width: 1025px) {
font-size: 1.125rem;
line-height: 24.51px;
}
}
.container {
@ -51,11 +59,11 @@
.currencyContainer {
font-weight: 700;
color: #000;
font-size: 18px;
font-size: 1.125rem;
line-height: normal;
@media screen and (min-width: 1025px) {
font-size: 24px;
font-size: 1.5rem;
line-height: normal;
}
}

View File

@ -332,6 +332,7 @@
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
color: #575757;
@media screen and (min-width: 1025px) {
font-size: 24px;