feat: Finalização do header para todas as telas

react/Installments.tsx

@@ -1,3 +0,0 @@
-import { Installments } from "./components/installments";
-
-export default Installments;

react/components/descont-pix/index.tsx

@@ -5,7 +5,7 @@ import styles from "./styles.css";
 export const DescontPix: FC = () => {
 
   const productContextValue = useProduct();
-
+  console.log(productContextValue);
   // const fetchApi = async () => {
   //   fetch("/api/checkout/pub/orderForms/simulation", {
   //     method: "POST",

react/components/installments/index.tsx

@@ -1,16 +0,0 @@
-import React, { FC } from 'react'
-import { useProduct } from 'vtex.product-context'
-import styles from "./styles.css";
-
-export const Installments: FC = () => {
-
-  const productContextValue = useProduct();
-
-  let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
-
-  return (
-    <div className={styles.containerProductReference}>
-      <span className={styles.sellingPrice}><strong className={styles.sellingPriceBold}>4 x</strong> de <strong className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</strong> sem juros</span>
-    </div>
-  );
-}

react/components/installments/styles.css

@@ -1,10 +0,0 @@
-.sellingPrice{
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-}
-
-.sellingPriceBold{
-  font-weight: 700;
-}

store/blocks/header/header.jsonc

@@ -7,12 +7,27 @@
   },
   "header-layout.desktop": {
     "children": [
-      "flex-layout.row#1-desktop",
+      "flex-layout.row#top-menu-descont",
-      "flex-layout.row#3-desktop",
       "sticky-layout#4-desktop"
     ]
   },
 
+  "flex-layout.row#top-menu-descont":{
+    "props": {
+      "blockClass": "container-top-menu-descont"
+    },
+    "children": [
+      "rich-text#text-top-menu-descont"
+    ]
+  },
+
+  "rich-text#text-top-menu-descont": {
+    "props": {
+        "text": "Desconto na primeira compra",
+        "blockClass": "text-top-menu-descont"
+    }
+  },
+
   "flex-layout.row#1-desktop": {
     "children": ["telemarketing"],
     "props": {
@@ -57,47 +72,69 @@
     "children": [
       "flex-layout.col#logo-desktop",
       "flex-layout.col#category-menu",
-      "flex-layout.col#spacer",
+      // "flex-layout.col#spacer",
       "search-bar",
-      "locale-switcher",
+      "flex-layout.row#login-and-cart"
-      "login",
-      "minicart.v2"
     ]
   },
+
+  "search-bar":{
+    "props": {
+      "placeholder": "Faça sua busca"
+    }
+  },
+
   "flex-layout.col#logo-desktop": {
     "props": {
-      "verticalAlign": "middle"
+      "verticalAlign": "middle",
+      "blockClass": "logo-desktop-m3academy"
     },
     "children": ["logo#desktop"]
   },
   "flex-layout.col#category-menu": {
     "props": {
-      "verticalAlign": "middle"
+      "verticalAlign": "middle",
+      "blockClass": "menu-header-container"
     },
     "children": ["vtex.menu@2.x:menu#category-menu"]
   },
   "logo#desktop": {
     "props": {
-      "title": "Logo",
+      "title": "Logo M3 Academy",
       "href": "/",
-      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
+      "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
-      "width": "180",
+      "width": "100%",
-      "height": "12"
+      "height": "auto"
     }
   },
   "header-layout.mobile": {
-    "children": ["sticky-layout#1-mobile"]
+    "children": [
+      "flex-layout.row#top-menu-descont",
+      "sticky-layout#1-mobile"
+    ],
+    "props": {
+      "sticky": false
+    }
   },
   "sticky-layout#1-mobile": {
-    "children": ["flex-layout.row#1-mobile"]
+    "children": ["flex-layout.row#mobile-header-col"]
   },
+
+  "flex-layout.row#mobile-header-col": {
+    "children": [
+      "flex-layout.row#1-mobile",
+      "search-bar#mobile"
+    ],
+    "props": {
+      "blockClass": "mobile-header-col"
+    }
+  },
+
   "flex-layout.row#1-mobile": {
     "children": [
       "drawer",
       "logo#mobile",
-      "flex-layout.col#spacer",
+      "flex-layout.row#login-and-cart"
-      "login",
-      "minicart.v2"
     ],
     "props": {
       "blockClass": "main-header-mobile",
@@ -106,8 +143,22 @@
       "fullWidth": true
     }
   },
+
+  "flex-layout.row#login-and-cart":{
+    "children": [
+      "login",
+      "minicart.v2"
+    ],
+    "props": {
+      "blockClass": "login-and-cart-container"
+    }
+  },
+
   "drawer": {
-    "children": ["menu#drawer"]
+    "children": ["menu#drawer"],
+    "props": {
+      "blockClass": "drawer-header"
+    }
   },
 
   "menu#drawer": {
@@ -125,9 +176,16 @@
     "props": {
       "title": "Logo",
       "href": "/",
-      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
+      "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
-      "width": "77.5",
+      "width": "140",
-      "height": "27.5"
+      "height": "33",
+      "blockClass": "logo-mobile-header"
+    }
+  },
+
+  "search-bar#mobile": {
+    "props": {
+      "blockClass": "search-mobile-header"
     }
   }
 }

store/blocks/pdp/product.jsonc

@@ -49,6 +49,7 @@
   "product-images#description": {
     "props":{
       "displayMode": "first-image",
+      "zoomMode": "disabled",
       "blockClass": "image-description-pdp"
     }
   },
@@ -188,18 +189,27 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 2
+        "mobile": 2
       }
     }
   },
 
+  "html#related-products-testid": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
+    "children": [
+      "rich-text#title-related-products",
+      "list-context.product-list#related-products-pdp"
+    ]
+  },
+
   "flex-layout.row#related-products-pdp":{
     "props": {
       "blockClass": "container-related-products-pdp"
     },
     "children": [
-      "rich-text#title-related-products",
+      "html#related-products-testid"
-      "list-context.product-list#related-products-pdp"
     ]
   },
 
@@ -302,7 +312,7 @@
       "flex-layout.row#product-name",
       "product-identifier.product",
       "flex-layout.row#selling-price",
-      "installments",
+      "product-installments#m3",
       "html#descont-pix",
       "html#sku-selector",
       "flex-layout.row#quantity-and-buy-button",
@@ -311,6 +321,18 @@
     ]
   },
 
+  "product-installments#m3": {
+    "props": {
+      "markers": ["discount"],
+      "installmentOptionsFilter": {
+        "paymentSystemName": "Mastercard",
+        "installmentsQuantity": 4
+      },
+      "blockClass": "m3-custom-installments",
+      "message": "{installmentsNumber} x <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
+    }
+  },
+
   "html#descont-pix":{
     "props": {
       "testId": "pix-price"

store/interfaces.json

@@ -2,9 +2,6 @@
   "example-component": {
     "component": "Example"
   },
-  "installments": {
-    "component": "Installments"
-  },
   "descont-pix": {
     "component": "DescontPix"
   },

styles/configs/style.json

@@ -4,14 +4,14 @@
       ],
       "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
       "customMedia": [
-        { "s": 20 },
+        { "s": 48 },
         { "ns": {
-            "value": 40,
+            "value": 48,
             "minWidth": true
           }
         },
         { "m": {
-            "value": 40,
+            "value": 48,
             "minWidth": true
           }
         },

styles/css/vtex.flex-layout.css

@@ -8,6 +8,45 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.flexRowContent--main-header {
+  padding: 24.5px 40px !important;
+  justify-content: space-between;
+}
+.flexRowContent--main-header .flexCol--logo-desktop-m3academy {
+  width: 44.8717%;
+}
+.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) {
+  max-width: 100%;
+  max-height: 100%;
+  min-width: auto;
+  padding: 0;
+}
+
+.flexRowContent--main-header-mobile {
+  justify-content: space-between;
+}
+
+.flexRowContent--mobile-header-col {
+  padding: 32px 40px;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.flexRowContent--mobile-header-col .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) {
+  max-width: 100%;
+}
+
+.flexRowContent--login-and-cart-container {
+  gap: 40px;
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRowContent--main-header {
+    padding: 24.5px 360px !important;
+  }
+}
 .flexRow--container-product-main {
   padding: 0 40px;
 }

styles/css/vtex.login.css

@@ -0,0 +1,32 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.container {
+  height: min-content;
+  align-self: flex-end;
+  padding: 3px 0px;
+}
+.container :global(.vtex-button) {
+  border: 0;
+}
+.container :global(.vtex-button):hover {
+  background: transparent;
+}
+.container :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 !important;
+  padding-left: 4px !important;
+}
+
+.label {
+  font-size: 0;
+  padding: 0;
+}
+.label::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
+}

styles/css/vtex.menu.css

@@ -0,0 +1,25 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+:global(.vtex-menu-2-x-styledLink) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: -0.1em;
+  text-transform: uppercase;
+  color: #929292;
+}
+
+:global(.vtex-menu-2-x-styledLinkContainer) {
+  margin: 0;
+}
+
+:global(.vtex-menu-2-x-menuContainer) {
+  gap: 15px;
+}

styles/css/vtex.minicart.css

@@ -0,0 +1,31 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.minicartContainer {
+  align-self: flex-end;
+  padding: 3px 0;
+}
+.minicartContainer .openIconContainer {
+  padding: 0;
+}
+.minicartContainer .openIconContainer :global(.vtex-minicart-2-x-cartIcon) {
+  display: none;
+}
+.minicartContainer .openIconContainer .minicartIconContainer::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
+}
+.minicartContainer .openIconContainer :global(.vtex-button) {
+  border: 0;
+}
+.minicartContainer .openIconContainer :global(.vtex-button):hover {
+  background: transparent;
+}
+.minicartContainer .openIconContainer :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 !important;
+}

styles/css/vtex.product-price.css

@@ -20,3 +20,16 @@
   line-height: 22px;
   color: #929292;
 }
+
+.installments--m3-custom-installments .installments-discount--m3-custom-installments {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments--m3-custom-installments .currencyContainer--m3-custom-installments {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

styles/css/vtex.rich-text.css

@@ -7,6 +7,31 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container--text-top-menu-descont {
+  justify-content: center;
+  background-color: #000000;
+}
+
+.paragraph--text-top-menu-descont {
+  display: flex;
+  margin: 0;
+  padding: 10px 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #FFFFFF;
+}
+.paragraph--text-top-menu-descont::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
+  margin-left: 54px;
+  height: 14px;
+}
+.paragraph--text-top-menu-descont::before {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
+  margin-right: 54px;
+  height: 14px;
+}
+
 .container--title-related-products {
   justify-content: center;
   margin-top: 16px;

styles/css/vtex.sticky-layout.css

@@ -0,0 +1,16 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.wrapper--sticky-header {
+  background-color: #ffffff !important;
+}
+
+.wrapper--stuck .container {
+  position: relative !important;
+}

styles/css/vtex.store-components.css

@@ -8,6 +8,43 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.searchBarContainer {
+  padding: 0;
+  align-self: center;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) {
+  display: flex;
+  flex-direction: row-reverse;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid #AEAEAE;
+  height: auto;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 16px;
+  color: #AEAEAE;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  padding-bottom: 8px;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  padding: 0;
+  padding-bottom: 8px;
+  background: transparent;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search) {
+  padding-right: 12px;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search)::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchIcon) {
+  display: none;
+}
+
 .newsletter {
   background: red;
 }
@@ -364,3 +401,11 @@
     display: block !important;
   }
 }
+@media screen and (max-width: 416px) {
+  .shippingTable {
+    width: 100%;
+  }
+  .shippingTable .shippingTableBody .shippingTableRow {
+    align-items: center;
+  }
+}

styles/css/vtex.store-drawer.css

@@ -7,8 +7,12 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.container {
+.openIconContainer {
-  margin: 0;
   padding: 0;
-  max-width: max-content;
+}
+.openIconContainer .menuIcon {
+  display: none;
+}
+.openIconContainer::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
 }

styles/sass/pages/header/vtex.flex-layout.scss

@@ -0,0 +1,44 @@
+.flexRowContent--main-header{
+  padding: 24.5px 40px !important;
+  justify-content: space-between;
+
+  .flexCol--logo-desktop-m3academy{
+    width: 44.8717%;
+
+    :global(.vtex-store-components-3-x-logoContainer){
+      max-width: 100%;
+      max-height: 100%;
+      min-width: auto;
+      padding: 0;
+    }
+  }
+}
+
+.flexRowContent--main-header-mobile{
+justify-content: space-between;
+}
+
+.flexRowContent--mobile-header-col{
+  padding: 32px 40px;
+
+  flex-direction: column;
+  row-gap: 8px;
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+
+  :global(.vtex-store-components-3-x-searchBarContainer){
+    max-width: 100%;
+  }
+}
+
+.flexRowContent--login-and-cart-container{
+  gap: 40px;
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRowContent--main-header{
+    padding: 24.5px 360px !important;
+  }
+}

styles/sass/pages/header/vtex.login.scss

@@ -0,0 +1,27 @@
+.container{
+  height: min-content;
+  align-self: flex-end;
+  padding: 3px 0px;
+
+  :global(.vtex-button){
+    border: 0;
+
+    &:hover{
+      background: transparent;
+    }
+
+    :global(.vtex-button__label){
+      padding: 0 !important;
+      padding-left: 4px !important;
+    }
+  }
+}
+
+.label{
+  font-size: 0;
+  padding: 0;
+
+  &::after{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
+  }
+}

styles/sass/pages/header/vtex.menu.scss

@@ -0,0 +1,17 @@
+:global(.vtex-menu-2-x-styledLink){
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: -0.1em;
+  text-transform: uppercase;
+
+  color: #929292;
+}
+
+:global(.vtex-menu-2-x-styledLinkContainer){
+  margin: 0;
+}
+
+:global(.vtex-menu-2-x-menuContainer){
+  gap: 15px;
+}

styles/sass/pages/header/vtex.minicart.scss

@@ -0,0 +1,29 @@
+.minicartContainer{
+  align-self: flex-end;
+  padding: 3px 0;
+  .openIconContainer{
+    padding: 0;
+
+    :global(.vtex-minicart-2-x-cartIcon){
+      display: none;
+    }
+
+    .minicartIconContainer{
+      &::after{
+        content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
+      }
+    }
+
+    :global(.vtex-button){
+      border: 0;
+
+      &:hover{
+        background: transparent;
+      }
+
+      :global(.vtex-button__label){
+        padding: 0 !important;
+      }
+    }
+  }
+}

styles/sass/pages/header/vtex.rich-text.scss

@@ -0,0 +1,29 @@
+.container--text-top-menu-descont{
+  justify-content: center;
+  background-color: #000000;
+}
+
+.paragraph--text-top-menu-descont{
+  display: flex;
+  margin: 0;
+  padding: 10px 0;
+
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+
+
+  color: #FFFFFF;
+
+  &::after{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
+    margin-left: 54px;
+    height: 14px;
+  }
+
+  &::before{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
+    margin-right: 54px;
+    height: 14px;
+  }
+}

styles/sass/pages/header/vtex.sticky-layout.scss

@@ -0,0 +1,9 @@
+.wrapper--sticky-header {
+  background-color: #ffffff !important;
+}
+
+.wrapper--stuck{
+  .container{
+    position: relative !important;
+  }
+}

styles/sass/pages/header/vtex.store-components.scss

@@ -0,0 +1,46 @@
+.searchBarContainer{
+  padding: 0;
+  align-self: center;
+
+  :global(.vtex-input-prefix__group){
+    display: flex;
+    flex-direction: row-reverse;
+
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid #AEAEAE;
+
+    height: auto;
+
+    :global(.vtex-styleguide-9-x-input){
+
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 16px;
+      color: #AEAEAE;
+      border: 0;
+      padding: 0;
+
+      background: transparent;
+
+      padding-bottom: 8px;
+    }
+
+    :global(.vtex-input__suffix){
+      padding: 0;
+      padding-bottom: 8px;
+      background: transparent;
+      :global(.vtex-store-components-3-x-searchBarIcon--search){
+
+        padding-right: 12px;
+        &::after{
+          content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
+        }
+      }
+
+      :global(.vtex-store-components-3-x-searchIcon){
+        display: none;
+      }
+    }
+  }
+}

styles/sass/pages/header/vtex.store-drawer.scss

@@ -0,0 +1,12 @@
+.openIconContainer{
+
+  padding: 0;
+
+  .menuIcon{
+    display: none;
+  }
+
+  &::after{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
+  }
+}

styles/sass/pages/product/vtex.product-price.scss

@@ -11,3 +11,19 @@
   line-height: 22px;
   color: #929292;
 }
+
+.installments--m3-custom-installments{
+  .installments-discount--m3-custom-installments{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+
+  .currencyContainer--m3-custom-installments{
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+}

styles/sass/pages/product/vtex.slider-layout.scss

@@ -68,9 +68,5 @@
       right: -20px;
     }
   }
-
-  // .sliderTrack--container-slider-related-products-pdp{
-  //   width: 700% !important;
-  // }
-
 }
+

styles/sass/pages/product/vtex.store-components.scss

@@ -425,3 +425,14 @@
     display: block !important;
   }
 }
+
+@media screen and (max-width: 416px) {
+  .shippingTable {
+    width: 100%;
+    .shippingTableBody{
+      .shippingTableRow{
+        align-items: center;
+      }
+    }
+  }
+}