From 734ddad704dc897d8f4431ea24e345e3a1a7738c Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Mon, 6 Feb 2023 21:44:37 -0300 Subject: [PATCH] feat: cria component custom do pix --- react/Pix.ts | 3 + react/Placeholder.ts | 3 - react/components/Html/styles.css | 99 +++++++++++++++++++ react/components/Pix/Pix.css | 49 +++++++++ react/components/Pix/Pix.tsx | 46 +++++++++ react/components/Placeholder/Placeholder.tsx | 13 --- store/blocks/pdp/product.jsonc | 4 +- store/interfaces.json | 4 +- styles/css/vtex.tab-layout.css | 6 +- .../sass/pages/product/vtex.tab-layout.scss | 2 +- 10 files changed, 204 insertions(+), 25 deletions(-) create mode 100644 react/Pix.ts delete mode 100644 react/Placeholder.ts create mode 100644 react/components/Html/styles.css create mode 100644 react/components/Pix/Pix.css create mode 100644 react/components/Pix/Pix.tsx delete mode 100644 react/components/Placeholder/Placeholder.tsx diff --git a/react/Pix.ts b/react/Pix.ts new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.ts @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/Placeholder.ts b/react/Placeholder.ts deleted file mode 100644 index 29393ed..0000000 --- a/react/Placeholder.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Placeholder from "./components/Placeholder/Placeholder"; - -export default Placeholder; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..131fa3b --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,99 @@ +[class*="html--container__buyButton"] { + display: flex; + column-gap: 10px; +} + +/* Tablet */ +@media (max-width: 1024px) { + [class*="html--container__buyButton"] { + width: 100%; + max-width: 944px; + } +} + +/* mobile */ +@media (max-width: 767px) { + [class*="html--container__buyButton"] { + flex-direction: column; + } +} + +[class*="html--container__buyButton"] :global(.vtex-button) { + background-color: #000; + border: none; + border-radius: 0; + width: 100%; + height: 49px; + max-width: 526px; + /* aqui é até 1440 */ +} + +@media (min-width: 1920px) { + [class*="html--container__buyButton"] :global(.vtex-button) { + min-width: 766px; + } +} + +@media (min-width: 490px) { + [class*="html--container__buyButton"] :global(.vtex-button__label)::after { + max-width: none; + } +} + +@media (min-width: 1023px) and (max-width: 1025px) { + [class*="html--container__buyButton"] :global(.vtex-button) { + min-width: 806px; + } +} + +@media (max-width: 1440px) { + [class*="html--container__buyButton"] :global(.vtex-button) { + max-width: 806px; + } +} + +[class*="html--container__buyButton"] :global(.vtex-button__label) { + font-size: 0; +} + +[class*="html--container__buyButton"] :global(.vtex-button__label)::after { + content: "Adicionar à sacola"; + text-transform: uppercase; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + display: block; +} + +@media (max-width: 767px) { + [class*="html--container__buyButton"] :global(.vtex-button__label)::after { + max-width: none; + max-width: 168px; + } +} + +@media (min-width: 490px) { + [class*="html--container__buyButton"] :global(.vtex-button__label)::after { + max-width: none; + max-width: none; + } +} + +@media (min-width:374px) and (max-width:376px) { +[class*="html--m3-html-product-sumary"] { + height: 254.8px!important; +}} +@media (max-width:1920px) { + [class*="html--m3-html-product-sumary"] { + height: unset; + width: unset; +max-width:314.4px; +/* max-height: 314.4px; */ +}} +@media (min-width:768px) and (max-width:1024px) { +[class*="html--m3-html-product-sumary"] { + height: unset; + width: unset; + max-width: 291.2px; +}} diff --git a/react/components/Pix/Pix.css b/react/components/Pix/Pix.css new file mode 100644 index 0000000..986bdb1 --- /dev/null +++ b/react/components/Pix/Pix.css @@ -0,0 +1,49 @@ +.pixWrapper { + display: flex; + width: 197px; + height: 39px; + justify-content: space-between; + align-items: center; + margin-top: 8px; +} + +.pixWrapperImage { + width: 100%; + max-width: 66px; + height: 100%; + max-height: 24px; +} + +.pixImage { + width: 100%; + height: 100%; +} + +.pixResult { + display: flex; + flex-direction: column; +} + +.pixResultValue{ + font-family: 'Open Sans'; +font-style: normal; +font-weight: 700; +font-size: 18px; +line-height: 25px; +/* identical to box height */ + + +color: rgba(0, 0, 0, 0.58); +} +.pixResultPercent{ + font-family: 'Open Sans'; +font-style: normal; +font-weight: 300; +font-size: 13px; +line-height: 18px; +/* identical to box height */ + + +color: #929292; + +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..c945149 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,46 @@ +import React, { useEffect } from 'react'; +import { useProduct } from 'vtex.product-context'; +import { useCssHandles } from 'vtex.css-handles'; +import "./Pix.css" +const Pix = () => { + + useEffect(() => { + const m3Input = document.querySelector(".vtex-address-form-4-x-input"); + m3Input?.setAttribute("placeholder", "Digite seu CEP"); + }); + + + + const CSS_HANDLES = [ + 'pixWrapper', + 'pixWrapperImage', + 'pixImage', + 'pixResult', + 'pixResultValue', + 'pixResultPercent' + ]; + const handles = useCssHandles(CSS_HANDLES); + + const pixImg = "https://agenciamagma.vtexassets.com/arquivos/pix-emmanuelvitorpereiradejesus.svg"; + + const resultProductContext = useProduct(); + const productSelling = Number(resultProductContext?.product?.priceRange?.sellingPrice?.lowPrice); + const disccount = (productSelling * 10) / 100; + const result = productSelling - disccount; + const strResult = result.toFixed(2).replace(".", ","); + + + + return ( + < div className={handles.handles.pixWrapper} > +
+ Imagem de pix +
+
+ R$ {strResult} + 10 % de desconto +
+ + ); +} +export default Pix; diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx deleted file mode 100644 index 26b9935..0000000 --- a/react/components/Placeholder/Placeholder.tsx +++ /dev/null @@ -1,13 +0,0 @@ - -const Placeholder = () => { - - - - if (typeof document !== "undefined") { - const m3Input = document.querySelector(".vtex-address-form-4-x-input"); - m3Input?.setAttribute("placeholder", "Digite seu CEP"); - } - - return null; -} -export default Placeholder; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 07b6246..7879718 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -102,7 +102,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments#parcelas", - // "m3-pix", + "m3-pix", "sku-selector", "product-assembly-options", "product-gifts", @@ -194,7 +194,7 @@ "props": { "blockClass": "m3-shipping-simulator" }, - "children": ["rich-text", "shipping-simulator", "m3-placeholder"] + "children": ["rich-text", "shipping-simulator"] }, "rich-text": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index 1731525..6cd570c 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,9 +6,7 @@ "component": "html", "composition": "children" }, - "m3-placeholder": { - "component": "Placeholder" - }, + "m3-pix": { "component": "Pix" } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 5753e91..0cb484e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -44,18 +44,18 @@ text-transform: capitalize; } .container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product { - background: #fff; + background: #ffffff; border: none !important; width: 114px; } .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product, .container--tab-product .listContainer--m3-tab-list-product .listItemActive { - background: #fff; + background: #ffffff; border: none !important; } .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button), .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) { - background-color: #fff; + background-color: #ffffff; border: none; border-bottom: 2px solid #000000; border-radius: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 1a070f4..f4e35a4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -37,7 +37,7 @@ align-items: center; text-align: center; - color: $COLOR-GRAY8; + color: $color-gray8; text-transform: capitalize; } }