forked from M3-Academy/challenge-vtex-io
feat(pix-custom): created components and added testId in components for test #7
1
react/Global.d.ts
vendored
Normal file
1
react/Global.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module "*.module.css";
|
||||
1
react/PixCustomInstallments.ts
Normal file
1
react/PixCustomInstallments.ts
Normal file
@ -0,0 +1 @@
|
||||
export { PixCustomInstallments as default } from "./components/PixCustomInstallments";
|
||||
@ -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";
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { PixCustomInstallments } from "./_PixCustomInstallments";
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,13 @@
|
||||
"blockClass": "productSpecifications"
|
||||
},
|
||||
|
||||
"children": ["html#product-description"]
|
||||
},
|
||||
|
||||
"html#product-description": {
|
||||
"props": {
|
||||
"testId": "product-description"
|
||||
},
|
||||
"children": ["tab-layout#product-specification"]
|
||||
},
|
||||
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -2,5 +2,12 @@
|
||||
"html": {
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
},
|
||||
|
||||
"pix-custom-installments": {
|
||||
"component": "PixCustomInstallments",
|
||||
"props": {
|
||||
"text": "10 % de desconto"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -297,6 +297,7 @@
|
||||
.productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
.productDescriptionTitle {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -332,6 +332,7 @@
|
||||
.productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
font-size: 24px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user