From 9459e48d97dc37899de97194168fba1e0c72e37f Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:27:07 -0300 Subject: [PATCH 01/31] refactor(interfaces.json): removendo componente InstallmentProduct --- store/interfaces.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/store/interfaces.json b/store/interfaces.json index 9288222..c5fcf69 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,9 +6,6 @@ "component": "html", "composition": "children" }, - "installment-product-component": { - "component": "InstallmentProduct" - }, "pix-component": { "component": "Pix" }, From 348a4a0981df736433097144cd69c0b5ee7b6be3 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:46:22 -0300 Subject: [PATCH 02/31] refactor: removendo arquivos do componente InstallmentProduct --- react/InstallmentProduct.tsx | 3 --- .../InstallmentProduct/InstallmentProduct.tsx | 27 ------------------- .../components/InstallmentProduct/styles.css | 7 ----- 3 files changed, 37 deletions(-) delete mode 100644 react/InstallmentProduct.tsx delete mode 100644 react/components/InstallmentProduct/InstallmentProduct.tsx delete mode 100644 react/components/InstallmentProduct/styles.css diff --git a/react/InstallmentProduct.tsx b/react/InstallmentProduct.tsx deleted file mode 100644 index 0827efa..0000000 --- a/react/InstallmentProduct.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct"; - -export default InstallmentProduct; diff --git a/react/components/InstallmentProduct/InstallmentProduct.tsx b/react/components/InstallmentProduct/InstallmentProduct.tsx deleted file mode 100644 index 11fafb7..0000000 --- a/react/components/InstallmentProduct/InstallmentProduct.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import { useProduct } from "vtex.product-context"; -import styles from "./styles.css"; - -const InstallmentProduct = () => { - const product = useProduct(); - const productWithInstallments = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3] - .NumberOfInstallments, - value: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, - }; - return ( -

- {productWithInstallments.numberOfInstallments}x  - de  - - R$  - {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")} - {" "} - sem juros -

- ); -}; - -export default InstallmentProduct; diff --git a/react/components/InstallmentProduct/styles.css b/react/components/InstallmentProduct/styles.css deleted file mode 100644 index 87129b9..0000000 --- a/react/components/InstallmentProduct/styles.css +++ /dev/null @@ -1,7 +0,0 @@ -.PriceContent { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} From b8da49bddc78bce30a336eaf3dddb0b2703f3ede Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:48:08 -0300 Subject: [PATCH 03/31] refactor(Pix.tsx): substituindo span por p --- react/components/Pix/Pix.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index dce7874..a05813a 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -18,9 +18,9 @@ const Pix = () => { alt="logo pix" />
- +

R$ {pixPrice?.toFixed(2).toString().replace(".", ",")} - +

10 % de desconto
From a0a1fd15f9bc9e6f9a1dd903d8704de3b382e7d6 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:50:03 -0300 Subject: [PATCH 04/31] style(styles.css): adicionando margin: 0 no .TextPixDiscount --- react/components/Pix/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css index b416807..b68f39a 100644 --- a/react/components/Pix/styles.css +++ b/react/components/Pix/styles.css @@ -22,10 +22,11 @@ font-size: 18px; line-height: 25px; color: rgba(0, 0, 0, 0.58); + margin: 0; } .TextDiscount { - font-weight: 300 ; + font-weight: 300; font-size: 13px; line-height: 18px; color: #929292; From b0213fc84ff386468520459c49495d49201feb0a Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:52:24 -0300 Subject: [PATCH 05/31] refactor(product-right-col.jsonc): modificando estrutura para adicionar os testId --- store/blocks/pdp/product-right-col.jsonc | 40 +++++++++++++++++++++--- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/store/blocks/pdp/product-right-col.jsonc b/store/blocks/pdp/product-right-col.jsonc index 9b523b2..35929e2 100644 --- a/store/blocks/pdp/product-right-col.jsonc +++ b/store/blocks/pdp/product-right-col.jsonc @@ -7,8 +7,8 @@ "children": [ "html#identification-product", // "product-rating-summary", - "flex-layout.row#selling-price", - "installment-product-component", + "html#prices", + "html#product-installments", "html#pix-component", // "product-separator", "html#sku-selector", @@ -24,8 +24,32 @@ ] }, + "html#prices": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "product-installments": { + "props": { + "blockClass": "product-installments", + "markers": ["discount"], + "message": "{installmentsNumber} de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + "html#product-name": { "props": { + "testId": "product-name", "marginBottom": 3 }, "children": ["vtex.store-components:product-name"] @@ -35,7 +59,13 @@ "props": { "blockClass": "identification-product-content" }, - "children": ["html#product-name", "product-identifier.product"] + "children": ["html#product-name", "html#product-identifier.product"] + }, + "html#product-identifier.product": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] }, "html#pix-component": { @@ -88,8 +118,8 @@ "children": ["add-to-cart-button"] }, - "html#shipping-simulator":{ - "props":{ + "html#shipping-simulator": { + "props": { "testId": "shipping-simulator" }, "children": ["shipping-simulator"] From e817d45145fc9d95b4a65ed400d41bf427a8b796 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:54:47 -0300 Subject: [PATCH 06/31] refactor(product-slider-layout.jsonc): substituindo product-summary-price por product-list-price e product-selling-price --- store/blocks/pdp/product-slider-layout.jsonc | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-slider-layout.jsonc b/store/blocks/pdp/product-slider-layout.jsonc index 753aa15..0146d9a 100644 --- a/store/blocks/pdp/product-slider-layout.jsonc +++ b/store/blocks/pdp/product-slider-layout.jsonc @@ -25,7 +25,9 @@ "product-summary-image#slider-images", "product-summary-name", // "product-summary-space", - "product-summary-price" + // "product-summary-price" + "product-list-price", + "product-selling-price" ] }, From 56aa19ddf589639d3d81cd2365ec9c7fd9e6c5da Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 18:57:14 -0300 Subject: [PATCH 07/31] refactor(product-tab-layout.jsonc): substituindo nome do testId do html#tab-layout#description --- store/blocks/pdp/product-tab-layout.jsonc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc index 96cde4c..c87f80a 100644 --- a/store/blocks/pdp/product-tab-layout.jsonc +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -9,7 +9,7 @@ "html#tab-layout#description": { "props": { - "testId": "tab-layout" + "testId": "product-description" }, "children": ["tab-layout#description"] }, From 2765d52c25b602d596d3862d90656f5fde40f09f Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 19:03:49 -0300 Subject: [PATCH 08/31] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20e=20remo?= =?UTF-8?q?=C3=A7=C3=A3o=20de=20css=20do=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.slider-layout.css | 100 +----------------- .../vtexSliderLayout/vtex.slider-layout.scss | 80 +------------- 2 files changed, 2 insertions(+), 178 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 7a24b8e..ab40a65 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -76,22 +76,7 @@ border-radius: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 448.4px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 543.4px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 383.2px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 254.8px; - } + height: auto; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { padding: 0; @@ -153,89 +138,6 @@ min-width: 100%; } } -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { - padding: 0; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { - row-gap: 8px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { - height: 60px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { - height: 49px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { - height: 49px; - } -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { - padding: 0; - text-align: center; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { - display: none; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { - padding: 0; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-decoration-line: line-through; - color: #bababa; -} -@media (max-width: 1025px) and (min-width: 768px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { - font-size: 12px; - line-height: 16px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) { - font-size: 12px; - line-height: 16px; - } -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before { - content: "de "; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after { - content: " por"; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { - padding: 0; - display: flex; - justify-content: center; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; -} -.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { - font-weight: 700; - font-size: 24px; - line-height: 33px; - text-align: center; - color: #000000; -} -@media (max-width: 1025px) and (min-width: 768px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { - font-size: 18px; - line-height: 25px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { - font-size: 18px; - line-height: 25px; - } -} .sliderLayoutContainer--carousel .sliderArrows { padding: 0; margin: 0; diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss index 8ff7932..46e092a 100644 --- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -47,16 +47,7 @@ max-width: 100% !important; border-radius: 0; :global(.vtex-product-summary-2-x-clearLink) { - min-height: 448.4px; - @media (max-width: 2561px) and (min-width: 1920px) { - min-height: 543.4px; - } - @media (max-width: 1025px) and (min-width: 768px) { - min-height: 383.2px; - } - @media (max-width: 768px) and (min-width: 375px) { - min-height: 254.8px; - } + height: auto; :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-nameContainer) { @@ -108,75 +99,6 @@ } } } - :global(.vtex-product-summary-2-x-priceContainer) { - padding: 0; - :global(.vtex-store-components-3-x-priceContainer) { - row-gap: 8px; - @media (max-width: 2561px) and (min-width: 1920px) { - height: 60px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 49px; - } - @media (max-width: 768px) and (min-width: 375px) { - height: 49px; - } - :global(.vtex-store-components-3-x-listPrice) { - padding: 0; - text-align: center; - :global(.vtex-store-components-3-x-listPriceLabel) { - display: none; - } - :global(.vtex-store-components-3-x-listPriceValue) { - padding: 0; - :global(.vtex-product-summary-2-x-currencyContainer) { - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-decoration-line: line-through; - color: $BABABA; - @media (max-width: 1025px) and (min-width: 768px) { - font-size: 12px; - line-height: 16px; - } - @media (max-width: 768px) and (min-width: 375px) { - font-size: 12px; - line-height: 16px; - } - &::before { - content: "de "; - } - &::after { - content: " por"; - } - } - } - } - :global(.vtex-store-components-3-x-sellingPrice) { - padding: 0; - display: flex; - justify-content: center; - :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; - } - :global(.vtex-store-components-3-x-sellingPrice) { - font-weight: 700; - font-size: 24px; - line-height: 33px; - text-align: center; - color: $black; - @media (max-width: 1025px) and (min-width: 768px) { - font-size: 18px; - line-height: 25px; - } - @media (max-width: 768px) and (min-width: 375px) { - font-size: 18px; - line-height: 25px - } - } - } - } - } } } } From a827c225b3cee646d43ae37e3261544750a7d786 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 19:06:09 -0300 Subject: [PATCH 09/31] style: adicionando css do parcelamento e do slider --- styles/css/vtex.product-price.css | 118 ++++++++++++++++++ .../vtexProduct/vtex.product-price.scss | 107 +++++++++++++++- 2 files changed, 224 insertions(+), 1 deletion(-) diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index c22a76c..9243a0d 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -13,4 +13,122 @@ line-height: 38px; color: #000000; margin-top: 24px; +} + +.installments--product-installments { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments--product-installments .installmentsNumber { + font-weight: 700; +} +.installments--product-installments .installmentsNumber::after { + content: "x"; + margin-left: 4px; +} +.installments--product-installments .installmentValue { + font-weight: 700; +} + +.listPrice { + padding: 0; + text-align: center; + height: 19px !important; + display: flex; + justify-content: center; + margin-bottom: 8px; + line-height: 19px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .listPrice { + height: 16px !important; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .listPrice { + height: 16px !important; + line-height: 16px; + } +} +.listPrice :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; +} +.listPrice .listPriceValue { + padding: 0; +} +.listPrice .listPriceValue .currencyContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; + display: block; +} +@media (max-width: 1025px) and (min-width: 768px) { + .listPrice .listPriceValue .currencyContainer { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .listPrice .listPriceValue .currencyContainer { + font-size: 12px; + line-height: 16px; + } +} +.listPrice .listPriceValue .currencyContainer::before { + content: "de "; +} +.listPrice .listPriceValue .currencyContainer::after { + content: " por"; +} + +.sellingPrice { + display: flex; + justify-content: center; + margin: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice { + line-height: 25px; + } +} +.sellingPrice .sellingPriceValue { + height: 33px; + line-height: 33px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice .sellingPriceValue { + line-height: 25px; + height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sellingPrice .sellingPriceValue { + line-height: 25px; + height: 25px; + } +} +.sellingPrice .sellingPriceValue .currencyContainer { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice .sellingPriceValue .currencyContainer { + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sellingPrice .sellingPriceValue .currencyContainer { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss index 1690d69..c2f638f 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss @@ -1,4 +1,4 @@ -//dados produto +//Dados produto .sellingPrice { font-weight: 700; @@ -7,3 +7,108 @@ color: $black; margin-top: 24px; } + +//Parcelamento + +.installments--product-installments { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $gray; + .installmentsNumber { + font-weight: 700; + &::after { + content: "x"; + margin-left: 4px; + } + } + .installmentValue { + font-weight: 700; + } +} + +//Slider + +.listPrice { + padding: 0; + text-align: center; + height: 19px !important; + display: flex; + justify-content: center; + margin-bottom: 8px; + line-height: 19px; + @media (max-width: 1025px) and (min-width: 768px) { + height: 16px !important; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 16px !important; + line-height: 16px; + } + :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; + } + .listPriceValue { + padding: 0; + .currencyContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: $BABABA; + display: block; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } + &::before { + content: "de "; + } + &::after { + content: " por"; + } + } + } +} + +.sellingPrice { + display: flex; + justify-content: center; + margin: 0; + + @media (max-width: 1025px) and (min-width: 768px) { + line-height: 25px; + } + .sellingPriceValue { + height: 33px; + line-height: 33px; + @media (max-width: 1025px) and (min-width: 768px) { + line-height: 25px; + height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + line-height: 25px; + height: 25px; + } + .currencyContainer { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 18px; + line-height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 18px; + line-height: 25px; + } + } + } +} From 1e15c3ca2cd11c235a67bf30fed43442b15c9031 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 19:14:45 -0300 Subject: [PATCH 10/31] style: removendo bottom do .vtex-button da Calculadora de Frete --- styles/css/vtex.store-components.css | 1 - styles/sass/pages/product/vtexStore/vtex.store-components.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 921f1e8..9fb3b77 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -489,7 +489,6 @@ background: #000000; border-radius: 0; border: none; - bottom: 1px; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { display: none; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index f3176c5..aab0940 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -487,7 +487,6 @@ background: $black; border-radius: 0; border: none; - bottom: 1px; :global(.vtex-button__label) { display: none; } From cd6a6b7e43763ab9f8ae02e3f185fb9d6f9b9c22 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:17:50 -0300 Subject: [PATCH 11/31] refactor: removendo index.d.ts --- react/index.d.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 react/index.d.ts diff --git a/react/index.d.ts b/react/index.d.ts deleted file mode 100644 index 1fb927a..0000000 --- a/react/index.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -declare module "*.css" { - interface IClassNames { - [className: string]: string; - } - const classNames: IClassNames; - export = classNames; -} From eccef81ab5d4cfafd1a934d68ce154bba113930b Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:19:25 -0300 Subject: [PATCH 12/31] =?UTF-8?q?refactor(tsconfig.json):=20removendo=20c?= =?UTF-8?q?=C3=B3digo=20in=C3=BAtil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/tsconfig.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/react/tsconfig.json b/react/tsconfig.json index 40652a6..9d83892 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -7,11 +7,5 @@ "moduleResolution": "node", "target": "es2017" }, - "include": [ - "./typings/*.d.ts", - "./**/*.tsx", - "./**/*.ts", - "components/SwiperComponent/SwiperComponent.tsxonent.tsx", - "SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx" - ] + "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] } From 1d9e62cfe1b37764509e70f5e3a963fa4e434392 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:20:49 -0300 Subject: [PATCH 13/31] feat: adicionando vtex.render-runtime.d.ts --- react/typings/vtex.render-runtime.d.ts | 38 ++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 react/typings/vtex.render-runtime.d.ts diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} From be39f827b696072093c6f7a6c7d374508c673d9d Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:21:44 -0300 Subject: [PATCH 14/31] feat: adicionando css.d.ts --- react/typings/css.d.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 react/typings/css.d.ts diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} From c301f170eed218b11b3eb7d48447c481a37027ec Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:22:48 -0300 Subject: [PATCH 15/31] feat: adicionando global.d.ts --- react/typings/global.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 react/typings/global.d.ts diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record From a7173d9d0865cb783d5d6ef8788910ea10e4f2b7 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:23:58 -0300 Subject: [PATCH 16/31] feat: adicionando graphql.d.ts --- react/typings/graphql.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 react/typings/graphql.d.ts diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} From 5a474dd4ddc0ade21204e0c0dc2201d2c9c81208 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:25:15 -0300 Subject: [PATCH 17/31] feat: adicionando storefront.d.ts --- react/typings/storefront.d.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 react/typings/storefront.d.ts diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} From 4e614850773a87fc45efea0bc7fdca30431139c5 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:26:27 -0300 Subject: [PATCH 18/31] feat: adicionando vtex.css-handles.ts --- react/typings/vtex.css-handles.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 react/typings/vtex.css-handles.ts diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" From 8fc6ff370aaf7b6897e2c6fe410b6f1c845fdf93 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:27:46 -0300 Subject: [PATCH 19/31] feat: adicionando vtex.order-manager.d.ts --- react/typings/vtex.order-manager.d.ts | 103 ++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 react/typings/vtex.order-manager.d.ts diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + From 0d79328fd60bee141c7c2c407ca9df19b17083b2 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 06:28:39 -0300 Subject: [PATCH 20/31] feat: adicionando vtex.styleguide.d.ts --- react/typings/vtex.styleguide.d.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 react/typings/vtex.styleguide.d.ts diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} From 6454d20579d390495e1407a776b1590dcc24decd Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:06:55 -0300 Subject: [PATCH 21/31] refactor: removendo componente Autores para adicionar componente Authors --- react/Autores.tsx | 3 --- react/components/Autores/Autores.tsx | 26 -------------------------- 2 files changed, 29 deletions(-) delete mode 100644 react/Autores.tsx delete mode 100644 react/components/Autores/Autores.tsx diff --git a/react/Autores.tsx b/react/Autores.tsx deleted file mode 100644 index 9381cb5..0000000 --- a/react/Autores.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Autores from "./components/Autores/Autores"; - -export default Autores; diff --git a/react/components/Autores/Autores.tsx b/react/components/Autores/Autores.tsx deleted file mode 100644 index 12ef274..0000000 --- a/react/components/Autores/Autores.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; - -const Autores = () => { - return ( -

-
    -
  • - Powered by - ícone logo vtex -
    • -
  • - Developed by - ícone logo m3 -
    • -
-
- ); -}; - -export default Autores; From e1dfbe657c15f27a288444654f6405b8424acea7 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:09:00 -0300 Subject: [PATCH 22/31] feat: adicionando componente Authors e styles.css dele --- react/Authors.tsx | 3 +++ react/components/Authors/Authors.tsx | 27 +++++++++++++++++++++++++++ react/components/Authors/styles.css | 20 ++++++++++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 react/Authors.tsx create mode 100644 react/components/Authors/Authors.tsx create mode 100644 react/components/Authors/styles.css diff --git a/react/Authors.tsx b/react/Authors.tsx new file mode 100644 index 0000000..6576b05 --- /dev/null +++ b/react/Authors.tsx @@ -0,0 +1,3 @@ +import Authors from "./components/Authors/Authors"; + +export default Authors; diff --git a/react/components/Authors/Authors.tsx b/react/components/Authors/Authors.tsx new file mode 100644 index 0000000..d2b6408 --- /dev/null +++ b/react/components/Authors/Authors.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styles from "./styles.css"; + +const Authors = () => { + return ( +
+
    +
  • + Powered by + ícone logo vtex +
    • +
  • + Developed by + ícone logo m3 +
    • +
+
+ ); +}; + +export default Authors; diff --git a/react/components/Authors/styles.css b/react/components/Authors/styles.css new file mode 100644 index 0000000..b66a0cc --- /dev/null +++ b/react/components/Authors/styles.css @@ -0,0 +1,20 @@ +/* Footer Credits */ + +.AutoresGroup { + display: flex; + align-items: center; + column-gap: 15.73px; + margin: 0; + padding: 0; + +} + +.AutoresList { + display: flex; + align-items: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #ffffff; + column-gap: 8.72px; +} From adf217e625a7d27727773c185d4943a029017f27 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:10:45 -0300 Subject: [PATCH 23/31] refactor(interfaces.json): substituindo autores-component por authors-component --- store/interfaces.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/store/interfaces.json b/store/interfaces.json index c5fcf69..ba68fff 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -18,7 +18,7 @@ "payment-methods-component": { "component": "PaymentMethods" }, - "autores-component": { - "component": "Autores" + "authors-component": { + "component": "Authors" } } From d2f66c6e5ff05dc1162bb143cb6e62ed4789268e Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:16:48 -0300 Subject: [PATCH 24/31] refactor(footer.json): substituindo nome autores por authors --- store/blocks/footer/footer.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c2e5300..a9e00c5 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -55,7 +55,7 @@ "html#footer-3-desktop": { "children": [ "html#footer-credits-information", - "html#footer-credits-autores" + "html#footer-credits-authors" ], "props": { "blockClass": "credits" @@ -71,11 +71,11 @@ "rich-text#footer-cnpj" ] }, - "html#footer-credits-autores": { + "html#footer-credits-authors": { "props": { - "blockClass": "autores-component" + "blockClass": "authors-component" }, - "children": ["autores-component"] + "children": ["authors-component"] }, "rich-text#footer": { "props": { @@ -125,7 +125,7 @@ "html#footer-1-mobile": { "children": [ "html#footer-credits-information", - "html#footer-credits-autores" + "html#footer-credits-authors" ], "props": { "blockClass": "footer-credits-information-mobile", From c4e596331f618a77f2940d0671fc3bdfebd8a149 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:18:03 -0300 Subject: [PATCH 25/31] style: removendo estilo do Footer Credits --- styles/css/vtex.menu.css | 17 ---------------- .../pages/product/vtexMenu/vtex.menu.scss | 20 ------------------- 2 files changed, 37 deletions(-) diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index da0e430..7ad4bb7 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -227,21 +227,4 @@ .FooterRightBlock .UlGroup .UlSecondary .ImgCard { width: 42px; } -} - -.AutoresBlock .Autores-Group { - display: flex; - align-items: center; - column-gap: 15.73px; - margin: 0; - padding: 0; -} -.AutoresBlock .Autores-Group .Autores-List { - display: flex; - align-items: center; - font-weight: 400; - font-size: 10px; - line-height: 12px; - color: #ffffff; - column-gap: 8.72px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtexMenu/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss index 035d2a7..11a8c1e 100644 --- a/styles/sass/pages/product/vtexMenu/vtex.menu.scss +++ b/styles/sass/pages/product/vtexMenu/vtex.menu.scss @@ -193,23 +193,3 @@ } } -// Footer Credits - -.AutoresBlock { - .Autores-Group { - display: flex; - align-items: center; - column-gap: 15.73px; - margin: 0; - padding: 0; - .Autores-List { - display: flex; - align-items: center; - font-weight: 400; - font-size: 10px; - line-height: 12px; - color: $white; - column-gap: 8.72px; - } - } -} From 211fe5c464fec402f02e8e965b3a0b844b35279e Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:47:53 -0300 Subject: [PATCH 26/31] style: removendo estilo do .FooterRightBlock --- styles/css/vtex.menu.css | 79 ------------------- .../pages/product/vtexMenu/vtex.menu.scss | 66 ---------------- 2 files changed, 145 deletions(-) diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index 7ad4bb7..78a531b 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -148,83 +148,4 @@ display: flex; justify-content: center; } -} - -.FooterRightBlock { - margin-bottom: 16px; -} -@media (max-width: 1025px) and (min-width: 768px) { - .FooterRightBlock { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 0; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .FooterRightBlock { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 0; - } -} -.FooterRightBlock .SpanTitle { - color: #ffffff; - font-weight: 400; - font-size: 14px; - line-height: 38px; -} -.FooterRightBlock .SpanTitleBig { - color: #ffffff; - font-weight: 400; - font-size: 18px; - line-height: 38px; -} -@media (max-width: 1025px) and (min-width: 768px) { - .FooterRightBlock .SpanTitleBig { - font-size: 14px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .FooterRightBlock .SpanTitleBig { - font-size: 14px; - } -} -.FooterRightBlock .UlGroup { - display: flex; - flex-direction: column; - padding: 0; - margin: 0; - row-gap: 4px; -} -@media (max-width: 1025px) and (min-width: 768px) { - .FooterRightBlock .UlGroup { - align-items: center; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .FooterRightBlock .UlGroup { - justify-content: center; - align-items: center; - } -} -.FooterRightBlock .UlGroup .UlSecondary { - display: flex; - padding: 0; - margin: 0; - column-gap: 8px; - list-style: none; -} -@media (max-width: 1025px) and (min-width: 768px) { - .FooterRightBlock .UlGroup .UlSecondary .ImgCard { - width: 42px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .FooterRightBlock .UlGroup .UlSecondary .ImgCard { - width: 42px; - } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtexMenu/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss index 11a8c1e..4e7f0ac 100644 --- a/styles/sass/pages/product/vtexMenu/vtex.menu.scss +++ b/styles/sass/pages/product/vtexMenu/vtex.menu.scss @@ -127,69 +127,3 @@ } } } - -.FooterRightBlock { - margin-bottom: 16px; - @media (max-width: 1025px) and (min-width: 768px) { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 0; - } - @media (max-width: 768px) and (min-width: 375px) { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 0; - } - .SpanTitle { - color: $white; - font-weight: 400; - font-size: 14px; - line-height: 38px; - } - .SpanTitleBig { - color: $white; - font-weight: 400; - font-size: 18px; - line-height: 38px; - @media (max-width: 1025px) and (min-width: 768px) { - font-size: 14px; - } - @media (max-width: 768px) and (min-width: 375px) { - font-size: 14px; - } - } - .UlGroup { - display: flex; - flex-direction: column; - padding: 0; - margin: 0; - row-gap: 4px; - @media (max-width: 1025px) and (min-width: 768px) { - align-items: center; - } - @media (max-width: 768px) and (min-width: 375px) { - justify-content: center; - align-items: center; - } - .UlSecondary { - display: flex; - padding: 0; - margin: 0; - column-gap: 8px; - list-style: none; - .ImgCard { - @media (max-width: 1025px) and (min-width: 768px) { - width: 42px; - } - @media (max-width: 768px) and (min-width: 375px) { - width: 42px; - } - } - } - } -} - From 6610014992cd7369893a61de0de4d3621b2a43f6 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 07:52:03 -0300 Subject: [PATCH 27/31] refactor(PaymentMethods.tsx): substituindo classes por Css Modules --- .../PaymentMethods/PaymentMethods.tsx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/react/components/PaymentMethods/PaymentMethods.tsx b/react/components/PaymentMethods/PaymentMethods.tsx index 87e598a..210e88f 100644 --- a/react/components/PaymentMethods/PaymentMethods.tsx +++ b/react/components/PaymentMethods/PaymentMethods.tsx @@ -1,65 +1,66 @@ import React from "react"; +import styles from "./styles.css"; const PaymentMethods = () => { return ( -
- Formas de pagamento -