diff --git a/react/Global.d.ts b/react/Global.d.ts new file mode 100644 index 0000000..1eabbb4 --- /dev/null +++ b/react/Global.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; diff --git a/react/PixCustomInstallments.ts b/react/PixCustomInstallments.ts new file mode 100644 index 0000000..5932fd9 --- /dev/null +++ b/react/PixCustomInstallments.ts @@ -0,0 +1 @@ +export { PixCustomInstallments as default } from "./components/PixCustomInstallments"; diff --git a/react/components/PixCustomInstallments/_ComponentsFunctions.ts b/react/components/PixCustomInstallments/_ComponentsFunctions.ts new file mode 100644 index 0000000..dfb4550 --- /dev/null +++ b/react/components/PixCustomInstallments/_ComponentsFunctions.ts @@ -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"; +}; diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.module.css b/react/components/PixCustomInstallments/_PixCustomInstallments.module.css new file mode 100644 index 0000000..852104e --- /dev/null +++ b/react/components/PixCustomInstallments/_PixCustomInstallments.module.css @@ -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; +} diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss b/react/components/PixCustomInstallments/_PixCustomInstallments.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.ts b/react/components/PixCustomInstallments/_PixCustomInstallments.ts deleted file mode 100644 index e69de29..0000000 diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.tsx b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx new file mode 100644 index 0000000..77ba8ce --- /dev/null +++ b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx @@ -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 ( +
+ Promoção de pagamento com o PIX +

+ + {`R$ ${calculationPercent( + percent, + data?.product?.priceRange.sellingPrice.highPrice + )}`} + +

+ {`${percent}% ${label}`} +
+

+
+ ); +} + +PixCustomInstallments.schema = { + title: "Promoção de pagamento com o PIX", + type: "object", + properties: { + label: { + type: "string", + }, + percent: { + type: "number", + }, + }, +}; diff --git a/react/components/PixCustomInstallments/index.ts b/react/components/PixCustomInstallments/index.ts index e69de29..5c72fa3 100644 --- a/react/components/PixCustomInstallments/index.ts +++ b/react/components/PixCustomInstallments/index.ts @@ -0,0 +1 @@ +export { PixCustomInstallments } from "./_PixCustomInstallments"; diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc index 9284ce5..924d80e 100644 --- a/store/blocks/pdp/product-shelf.jsonc +++ b/store/blocks/pdp/product-shelf.jsonc @@ -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" - } } } diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index 8931ee2..9f512e3 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -4,6 +4,13 @@ "blockClass": "productSpecifications" }, + "children": ["html#product-description"] + }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, "children": ["tab-layout#product-specification"] }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e64e78f..060776d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 779175f..8199041 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -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": { diff --git a/store/interfaces.json b/store/interfaces.json index 01705ab..8bd0a7a 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,5 +2,12 @@ "html": { "component": "html", "composition": "children" + }, + + "pix-custom-installments": { + "component": "PixCustomInstallments", + "props": { + "text": "10 % de desconto" + } } } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index ee7a284..40cfb7e 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -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; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index d504530..2871a5b 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -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; } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 049dd48..287709a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -297,6 +297,7 @@ .productDescriptionTitle { font-size: 20px; line-height: 32px; + color: #575757; } @media screen and (min-width: 1025px) { .productDescriptionTitle { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 9e940ac..20cf57d 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -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; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 2a7f0e2..b9c17a8 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -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; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0b1b735..5d8135d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -332,6 +332,7 @@ .productDescriptionTitle { font-size: 20px; line-height: 32px; + color: #575757; @media screen and (min-width: 1025px) { font-size: 24px;