react/Pix.ts

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;

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;
+}}

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;
+
+}

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} >
+      <div className={handles.handles.pixWrapperImage}>
+        <img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
+      </div>
+      <div className={handles.handles.pixResult}>
+        <span className={handles.handles.pixResultValue}> R$ {strResult}</span>
+        <span className={handles.handles.pixResultPercent}>10 % de desconto</span>
+      </div>
+    </div >
+  );
+}
+export default Pix;

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",

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "m3-pix": {
+    "component": "Pix"
   }
 }

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;

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;
         }
       }