feat: adiciona estilização descrição e produto indisponivel

react/components/Pix-bloco/Pix.tsx

@@ -23,7 +23,7 @@ const Pix = () => {
 
   return (
     <div className={styles["wrapper"]}>
-      <div className={styles["container"]}>
+      <div className={styles["container-flex"]}>
         <div className={styles["image"]}>
           <img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
         </div>

react/components/Pix-bloco/style.module.css

@@ -1,3 +1,26 @@
-.wrapper {
+.container-flex {
-  /* background-color: red; */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 26px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.value {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  margin: 0;
+
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.text {
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  margin: 0;
+
+  color: #929292;
 }

store/blocks/pdp/product.jsonc

@@ -44,6 +44,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass": "container-main-content",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -109,11 +110,11 @@
       "flex-layout.row#selling-price",
       "product-installments",
       "Pix",
-      "product-separator",
+      // "product-separator",
       "sku-selector",
       "html#buy-button",
       // "flex-layout.row#buy-button",
-      "product-gifts",
+      // "product-gifts",
       "availability-subscriber",
       "shipping-simulator"
     ]
@@ -250,8 +251,7 @@
 
   "flex-layout.col#imageDescriptionContainer": {
     "props": {
-      "blockClass": "image-description",
+      "blockClass": "image-description"
-      "width": "50%"
     },
     "children": ["product-images#imageDescription"]
   },
@@ -265,7 +265,8 @@
 
   "flex-layout.row#description": {
     "props": {
-      "marginBottom": 7
+      "marginBottom": 7,
+      "preventHorizontalStretch": true
     },
     "children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
   },
@@ -335,6 +336,7 @@
 
   "flex-layout.row#product-availability": {
     "props": {
+      "blockClass": "container-main-content",
       "colGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
@@ -354,8 +356,8 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
   "flex-layout.row#availability": {

styles/css/vtex.breadcrumb.css

@@ -11,8 +11,7 @@
 /* Cores */
 /* Grid breakpoints */
 .container {
-  padding-right: 40px;
+  padding: 0 40px 16px;
-  padding-left: 40px;
 }
 
 .homeIcon,

styles/css/vtex.flex-layout.css

@@ -23,4 +23,17 @@
 
 .flexRowContent--buy-button-row {
   height: 49px;
+}
+
+:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
+  padding: 0 40px;
+}
+
+:global(.vtex-flex-layout-0-x-flexRowContent) {
+  padding: 0;
+  margin: 0;
+}
+
+:global(.vtex-flex-layout-0-x-flexCol--image-description) {
+  padding-right: 32px;
 }

styles/css/vtex.product-identifier.css

@@ -23,4 +23,5 @@
   font-size: 14px;
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
+  padding-bottom: 24px;
 }

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -10,6 +11,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */
+.container {
+  padding: 0;
+}
+
 .newsletter {
   background: #000000;
   color: #fff;
@@ -41,8 +46,8 @@
   color: #000000;
 }
 
-.container {
+.thumbImg {
-  padding: 0 40px;
+  border-radius: 8px;
 }
 
 .productNameContainer {
@@ -50,10 +55,12 @@
   font-size: 20px;
   line-height: 34px;
   text-align: right;
+  margin-bottom: 8px;
   color: #575757;
 }
 
 .productImage .productImageTag {
+  width: unset !important;
   max-height: unset !important;
 }
 
@@ -77,6 +84,7 @@
   flex-direction: column;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin-bottom: 16px;
   order: 2;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
@@ -100,6 +108,9 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
   display: none;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
   padding: 0;
   margin: auto;
@@ -156,6 +167,9 @@
   bottom: 3px;
   transform: rotateY(180deg);
 }
+.skuSelectorContainer .skuSelectorItem--sku-size {
+  margin: 0 16px 0 0;
+}
 
 .subscriberContainer {
   font-weight: 400;
@@ -190,6 +204,13 @@
   font-size: 40px;
 }
 
+:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
+  margin: 0;
+}
+:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) {
+  margin: 0;
+}
+
 .shippingContainer {
   display: flex;
 }
@@ -256,6 +277,10 @@
   color: #929292;
 }
 
+:global(.vtex-address-form__field--small) {
+  padding-bottom: 16px;
+}
+
 .shippingTable {
   display: flex;
   flex-direction: column;
@@ -274,6 +299,7 @@
   font-size: 14px;
   line-height: 19px;
   text-transform: uppercase;
+  padding-right: 112px;
   color: #202020;
 }
 .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
@@ -324,4 +350,65 @@
 }
 .shippingTableBody .shippingTableRadioBtn {
   display: none;
+}
+
+.subscriberContainer .title {
+  font-size: 0;
+}
+.subscriberContainer .title::after {
+  content: "Produto Indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .title .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .title .subscribeLabel::after {
+  content: "Deseja saber quando estiver disponível";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  display: grid;
+  grid-template-areas: " nome email" " submit submit";
+  justify-content: inherit;
+  gap: 8px;
+}
+.subscriberContainer .form .content .inputName {
+  grid-area: nome;
+}
+.subscriberContainer .form .content .inputEmail {
+  grid-area: email;
+}
+.subscriberContainer .form .content .submit {
+  grid-area: submit;
+  width: 100%;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  height: 49px;
+  cursor: pointer;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label) {
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
+  content: "avise-me";
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
+}
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  margin-bottom: 8px;
+  color: #575757;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,48 @@
+/*
+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 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
+/* Grid breakpoints */
+.container--structure {
+  padding: 0 40px;
+}
+
+.contentContainer {
+  padding: 0 32px;
+}
+
+.listContainer {
+  border-bottom: 1px solid #b9b9b9;
+  height: 43px;
+  justify-content: space-between;
+  padding: 0 64px;
+  margin-bottom: 32px;
+}
+.listContainer .listItem :global(.vtex-button):hover {
+  background-color: transparent;
+}
+.listContainer .listItem :global(.vtex-button__label) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 18px;
+  color: #bfbfbf;
+  text-transform: capitalize;
+  padding: 0.25em 10px 0.32em;
+}
+.listContainer .listItemActive :global(.vtex-button) {
+  background-color: #fff;
+  border: none;
+}
+.listContainer .listItemActive :global(.vtex-button__label) {
+  color: #000000;
+  background-color: #fff;
+  border-bottom: 2px solid #000000;
+  padding: 0;
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,6 +1,5 @@
 .container {
-  padding-right: 40px;
+  padding: 0 40px 16px ;
-  padding-left: 40px;
 }
 
 .homeIcon,

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

@@ -12,3 +12,16 @@
 .flexRowContent--buy-button-row {
   height: 49px;
 }
+
+:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
+  padding: 0 40px;
+}
+
+:global(.vtex-flex-layout-0-x-flexRowContent) {
+  padding: 0;
+  margin: 0;
+}
+
+:global(.vtex-flex-layout-0-x-flexCol--image-description) {
+  padding-right: 32px;
+}

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

@@ -15,5 +15,6 @@
     font-size: 14px;
     line-height: 19px;
     color: rgba(146, 146, 146, 0.48);
+    padding-bottom: 24px;
   }
 }

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

@@ -1,3 +1,7 @@
+.container {
+  padding: 0;
+}
+
 .newsletter {
     background: $black;
     color: $white;
@@ -33,22 +37,24 @@
   }
 }
 
-// TITULO E IMAGENS
+.thumbImg {
-.container {
+  border-radius: 8px;
-  padding: 0 40px;
 }
 
+// TITULO E IMAGENS
 .productNameContainer {
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
   text-align: right;
+  margin-bottom: 8px;
 
   color: $gray-100;
 }
 
 .productImage {
   .productImageTag {
+    width: unset !important;
     max-height: unset !important;
   }
 }
@@ -75,6 +81,7 @@ margin-top: 16px;
   flex-direction: column;
 
   .skuSelectorSubcontainer--cor {
+    margin-bottom: 16px;
     order: 2;
 
     .frameAround,
@@ -108,6 +115,8 @@ margin-top: 16px;
   }
 
   .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 10px;
+
     .skuSelectorItemTextValue {
       padding: 0;
       margin: auto;
@@ -183,6 +192,9 @@ margin-top: 16px;
       transform: rotateY(180deg);
     }
   }
+  .skuSelectorItem--sku-size {
+    margin: 0 16px 0 0;
+  }
 }
 
 .subscriberContainer {
@@ -226,6 +238,14 @@ margin-top: 16px;
     }
 }
 
+:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
+  margin: 0;
+
+  :global(.vtex-store-components-3-x-skuSelectorOptionsList) {
+    margin: 0;
+  }
+}
+
 // CEP
 .shippingContainer {
   display: flex;
@@ -309,6 +329,10 @@ margin-top: 16px;
   }
 }
 
+:global(.vtex-address-form__field--small) {
+  padding-bottom: 16px;
+}
+
 // ENTREGA
 
 .shippingTable {
@@ -330,6 +354,7 @@ margin-top: 16px;
       font-size: 14px;
       line-height: 19px;
       text-transform: uppercase;
+      padding-right: 112px;
 
       color: $black-100;
     }
@@ -399,3 +424,88 @@ margin-top: 16px;
     display: none;
   }
 }
+
+// PRODUTO INDISPONÍVEL
+.subscriberContainer {
+
+  .title {
+    font-size: 0;
+
+    &::after {
+      content: "Produto Indisponível";
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+
+      color: $gray-300;
+    }
+
+    .subscribeLabel {
+      font-size: 0;
+
+      &::after {
+        content: "Deseja saber quando estiver disponível";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+
+        color: $gray-300;
+      }
+    }
+  }
+
+  .form {
+    .content {
+      display: grid;
+      grid-template-areas: " nome email"
+      " submit submit";
+      justify-content: inherit;
+      gap: 8px;
+
+      .inputName {
+        grid-area: nome;
+      }
+
+      .inputEmail {
+        grid-area: email;
+      }
+
+      .submit {
+        grid-area: submit;
+        width: 100%;
+
+        :global(.vtex-button) {
+          width: 100%;
+          height: 49px;
+          cursor: pointer;
+        }
+
+        :global(.vtex-button__label) {
+          font-size: 0;
+
+          &::after {
+            content: "avise-me";
+            text-transform: uppercase;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+// DESCRIÇÃO
+.productDescriptionContainer {
+  .productDescriptionTitle {
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 8px;
+
+    color: $gray-100;
+  }
+}

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

@@ -0,0 +1,47 @@
+.container--structure {
+  padding: 0 40px;
+}
+
+.contentContainer {
+  padding: 0 32px;
+}
+
+.listContainer {
+  border-bottom: 1px solid $gray-500;
+  height: 43px;
+  justify-content: space-between;
+  padding: 0 64px;
+  margin-bottom: 32px;
+
+  .listItem {
+    :global(.vtex-button) {
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    :global(.vtex-button__label) {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 18px;
+      color: $gray-400;
+      text-transform: capitalize;
+      padding: 0.25em 10px 0.32em;
+    }
+  }
+
+  .listItemActive {
+    :global(.vtex-button) {
+      background-color: $white;
+      border: none;
+    }
+
+    :global(.vtex-button__label) {
+      color: $black;
+      background-color: $white;
+      border-bottom: 2px solid $black;
+      padding: 0;
+    }
+  }
+}

styles/sass/utils/_vars.scss

@@ -11,6 +11,9 @@ $white: #fff;
 $gray: #929292;
 $gray-100: #575757;
 $gray-200: #cccccc;
+$gray-300: #868686;
+$gray-400: #bfbfbf;
+$gray-500: #b9b9b9;
 
 
 $color-gray: #6c6c6c;