From 6ba524e13630c9adfa080d6ff63536782bcbc8e0 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Fri, 10 Feb 2023 19:03:36 -0300 Subject: [PATCH] feat(main): cria shipping simulator e ajusta data-testId's --- react/Freight.tsx | 3 + react/components/Freight/Freight.tsx | 36 +++ react/components/Freight/styles.css | 0 react/components/Html/styles.css | 5 + react/components/PixDiscount/PixDiscount.tsx | 2 +- store/blocks/pdp/product.jsonc | 69 ++++-- store/blocks/product-price.jsonc | 8 + store/interfaces.json | 3 + styles/configs/style.json | 2 +- styles/css/vtex.store-components.css | 168 ++++++++++++++ .../pages/product/vtex.store-components.scss | 216 ++++++++++++++++++ 11 files changed, 486 insertions(+), 26 deletions(-) create mode 100644 react/Freight.tsx create mode 100644 react/components/Freight/Freight.tsx create mode 100644 react/components/Freight/styles.css diff --git a/react/Freight.tsx b/react/Freight.tsx new file mode 100644 index 0000000..79184fe --- /dev/null +++ b/react/Freight.tsx @@ -0,0 +1,3 @@ +import Freight from "./components/Freight/Freight"; + +export default Freight; diff --git a/react/components/Freight/Freight.tsx b/react/components/Freight/Freight.tsx new file mode 100644 index 0000000..2ed5cdc --- /dev/null +++ b/react/components/Freight/Freight.tsx @@ -0,0 +1,36 @@ +import React, { useEffect } from "react"; + +const Freight = () => { + const setPlaceholder = (input: Element | null, placeholder: string) => { + if (input) { + input!.setAttribute("placeholder", placeholder); + } + }; + + const appendElement = ( + parentElement: ChildNode | null | undefined, + childElement: ChildNode | null | undefined + ) => { + if (parentElement && childElement) { + parentElement!.appendChild(childElement); + } + }; + + useEffect(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + const inputSpan = cepInput?.nextSibling; + const cepButton = document.querySelector(".vtex-address-form__postalCode") + ?.nextSibling; + + console.log("cepInput: " + cepInput, typeof cepInput); + console.log("inputSpan: " + inputSpan, typeof inputSpan); + console.log("cepButton: " + cepButton, typeof cepButton); + + setPlaceholder(cepInput, "Digite seu CEP"); + appendElement(inputSpan, cepButton); + }); + + return <>; +}; + +export default Freight; diff --git a/react/components/Freight/styles.css b/react/components/Freight/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 4b5f433..798f519 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -10,3 +10,8 @@ display: flex; flex-direction: column; } + +/* [data-testid="product-name"] +{ + +} */ diff --git a/react/components/PixDiscount/PixDiscount.tsx b/react/components/PixDiscount/PixDiscount.tsx index 33af005..7170ad9 100644 --- a/react/components/PixDiscount/PixDiscount.tsx +++ b/react/components/PixDiscount/PixDiscount.tsx @@ -15,7 +15,7 @@ const PixDiscount = () => { maximumFractionDigits: 2, }); - console.log(productContextValue); + // console.log(productContextValue); return ( <> diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9e604ff..fd922c3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "html#tab-layout", + "html#product-description", "html#shelf-container", "newsletter" ] @@ -17,10 +17,10 @@ "children": ["breadcrumb"] }, - "html#tab-layout": { + "html#product-description": { "props": { "tag": "section", - "testId": "tab-layout" + "testId": "product-description" }, "children": ["tab-layout#description"] }, @@ -170,11 +170,13 @@ "blockClass": "right-col" }, "children": [ + // "html#product-name", "flex-layout.row#product-name", - "product-identifier.product", + "html#codigo", // "product-rating-summary", - "flex-layout.row#selling-price", - "product-installments", + // "flex-layout.row#selling-price", + "html#selling-price", + "html#product-installments", // "flex-layout.row#list-price-savings", "html#pix-price", "html#sku-selector", @@ -182,18 +184,40 @@ // "product-assembly-options", // "product-gifts", "flex-layout.row#quantity-buy", - "availability-subscriber", - "shipping-simulator", - "share#default" + // "availability-subscriber", + "html#shipping-simulator" ] }, + "html#product-name": { + "props": { + "testId": "product-name", + "blockClass": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3, "blockClass": "product-name" }, - "children": ["vtex.store-components:product-name"] + "children": ["html#product-name"] + }, + + "html#codigo": { + "props": { + // "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] }, "html#pix-price": { @@ -271,7 +295,7 @@ "props": { "testId": "add-to-cart-button" }, - "children": ["add-to-cart-button"] + "children": ["add-to-cart-button#product"] }, "flex-layout.row#buy-button": { @@ -279,15 +303,23 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["add-to-cart-button#product"] }, - "add-to-cart-button": { + "add-to-cart-button#product": { "props": { "text": "ADICIONAR À SACOLA" } }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": ["shipping-simulator", "freight"] + }, + "flex-layout.row#product-availability": { "props": { "marginBottom": 5, @@ -321,17 +353,6 @@ "children": ["availability-subscriber"] }, - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } - }, - "html#shelf-container": { "props": { "blockClass": "shelf-container" diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 1530c77..d107329 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -8,6 +8,14 @@ "children": ["product-selling-price"] }, + "html#selling-price": { + "props": { + "testId": "product-price", + "blockClass": "selling-price" + }, + "children": ["product-selling-price"] + }, + "flex-layout.row#list-price-savings": { "props": { "colGap": 2, diff --git a/store/interfaces.json b/store/interfaces.json index 085dfaf..e18f54a 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,8 @@ }, "pix-discount": { "component": "PixDiscount" + }, + "freight": { + "component": "Freight" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index c87f830..ea2e1b4 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -110,7 +110,7 @@ "text": { "action-primary": "#0F3E99", "action-secondary": "#eef3f7", - "link": "#0F3E99", + "link": "#000000", "emphasis": "#f71963", "disabled": "#979899", "success": "#8bc34a", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7487813..e4a82b7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -151,6 +151,174 @@ color: #000000; } +.shippingContainer { + width: 61.6%; +} +@media only screen and (min-width: 1920px) { + .shippingContainer { + width: 45.24%; + } +} +@media only screen and (max-width: 1024px) { + .shippingContainer { + width: 43.33%; + } +} +@media only screen and (max-width: 639px) { + .shippingContainer { + width: 100%; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding: 0; + display: flex; + gap: 32px; +} +@media only screen and (max-width: 639px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + gap: 8px; + } +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; + color: #929292; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: fit-content; + justify-content: space-between; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + width: 82.5%; + height: fit-content; + padding: 16.5px 16px; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.shippingContainer :global(.vtex-input__suffix) { + padding: 0; +} +.shippingContainer :global(.vtex-button) { + width: fit-content; + border: 0; + border-radius: 0; + background: #000000; +} +.shippingContainer :global(.vtex-button__label) { + padding: 15px 14.5px !important; + font-weight: 600; + font-size: 0; + color: #ffffff; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; + line-height: 19px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding-top: 27.5px; + display: flex; + align-items: center; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; +} +@media only screen and (max-width: 639px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + justify-content: flex-end; + } +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} + +.shippingTable { + margin-top: 16px; + padding: 0; + border: 0; + width: 50%; +} +@media only screen and (min-width: 1920px) { + .shippingTable { + width: 79.71%; + } +} +@media only screen and (max-width: 1024px) { + .shippingTable { + width: 34.54%; + } +} +@media only screen and (max-width: 639px) { + .shippingTable { + width: 100%; + } +} +.shippingTable .shippingTableHead { + display: table-header-group; + text-align: left; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +.shippingTable .shippingTableCell { + padding: 0; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.shippingTable .shippingTableRow { + padding-bottom: 15px; + display: grid; + grid-template-columns: 33.74% 24.54% 41.72%; + grid-template-areas: "entregaTHead freteTHead prazoTHead" "entregaTBody freteTBody prazoTBody"; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + grid-area: entregaTHead; + font-weight: 400; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: prazoTHead; + font-weight: 400; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { + grid-area: freteTHead; + font-weight: 400; + font-size: 0; + position: relative; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + width: min-content; + position: absolute; + bottom: 1px; + left: 1px; + font-size: 14px; + line-height: 19px; + text-align: left; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryName { + grid-area: entregaTBody; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate { + grid-area: prazoTBody; +} +.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: freteTBody; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} + /* ----- INFO-AVAILABILITY ----- */ .subscriberContainer { margin-bottom: 16px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index bc18f0d..e0bb014 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -57,6 +57,9 @@ } /* ----- RIGHT-COL ----- */ +// .productNameContainer { + +// } .productBrand--quickview { // font-family: "Open Sans"; font-weight: 300; @@ -202,6 +205,219 @@ } } +.shippingContainer { + // background-color: cyan; + width: 61.6%; + + @include mq(xl, min) { + width: 45.24%; + } + + @include mq(lg, max) { + width: 43.33%; + } + + @include mq(md, max) { + width: 100%; + } + + :global(.vtex-address-form__postalCode) { + padding: 0; + display: flex; + gap: 32px; + + @include mq(md, max) { + flex-direction: column; + gap: 8px; + } + } + + :global(.vtex-input__label) { + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 0; + color: #929292; + + &::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + } + } + + :global(.vtex-input-prefix__group) { + height: fit-content; + justify-content: space-between; + border: 1px solid #cccccc; + border-radius: 0; + } + + :global(.vtex-address-form-4-x-input) { + // background-color: yellow; + width: 82.5%; + height: fit-content; + padding: 16.5px 16px; + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + } + + :global(.vtex-input__suffix) { + padding: 0; + } + + :global(.vtex-button) { + width: fit-content; + border: 0; + border-radius: 0; + background: #000000; + } + + :global(.vtex-button__label) { + padding: 15px 14.5px !important; + // font-family: "Open Sans"; + font-weight: 600; + font-size: 0; + color: #ffffff; + + &::after { + content: "OK"; + font-size: 14px; + line-height: 19px; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + // background-color: yellow; + padding-top: 27.5px; + display: flex; + align-items: center; + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + + @include mq(md, max) { + padding: 0; + justify-content: flex-end; + } + } + + :global(.vtex__icon-external-link) { + display: none; + } +} + +.shippingTable { + margin-top: 16px; + padding: 0; + border: 0; + width: 50%; + + @include mq(xl, min) { + width: 79.71%; + } + + @include mq(lg, max) { + width: 34.54%; + } + + @include mq(md, max) { + width: 100%; + } + + .shippingTableHead { + display: table-header-group; + text-align: left; + // font-family: "Open Sans"; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; + } + + // .shippingTableBody { + // // background-color: orange; + // } + + .shippingTableCell { + padding: 0; + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + // text-align: left; + + // &:last-child { + // padding-right: 0; + // } + } + + .shippingTableRow { + padding-bottom: 15px; + + display: grid; + // grid-template-rows: auto; + grid-template-columns: 33.74% 24.54% 41.72%; + // grid-template-columns: 23.92% 14.72% 41.72%; + // gap: 32px; + grid-template-areas: + "entregaTHead freteTHead prazoTHead" + "entregaTBody freteTBody prazoTBody"; + + .shippingTableHeadDeliveryName { + // background-color: cyan; + grid-area: entregaTHead; + font-weight: 400; + } + + .shippingTableHeadDeliveryEstimate { + // background-color: yellow; + grid-area: prazoTHead; + font-weight: 400; + } + + .shippingTableHeadDeliveryPrice { + // background-color: magenta; + grid-area: freteTHead; + font-weight: 400; + font-size: 0; + position: relative; + + &::after { + content: "FRETE"; + width: min-content; + position: absolute; + bottom: 1px; + left: 1px; + font-size: 14px; + line-height: 19px; + text-align: left; + } + } + + .shippingTableCellDeliveryName { + grid-area: entregaTBody; + } + + .shippingTableCellDeliveryEstimate { + grid-area: prazoTBody; + } + + .shippingTableCellDeliveryPrice { + grid-area: freteTBody; + } + } + + .shippingTableRadioBtn { + display: none; + } +} + /* ----- INFO-AVAILABILITY ----- */ .subscriberContainer { // background-color: red;