Merge pull request 'feature/adiciona-produto-indisponivel-1440px' (#20) from feature/adiciona-produto-indisponivel-1440px into feature/adiciona-prateleira

Reviewed-on: #20

store/blocks/pdp/product.jsonc

@@ -10,6 +10,7 @@
       // "shelf.relatedProducts",
       "rich-text#shelfTitle",
       "list-context.product-list#shelfProducts",
+      "newsletter#pageProduct",
       "product-questions-and-answers"
     ]
   },
@@ -125,7 +126,7 @@
       "product-gifts",
       // "flex-layout.row#buy-button",
       "html#buy-button",
-      "availability-subscriber",
+      // "availability-subscriber",
       "shipping-simulator",
       "share#default"
     ]
@@ -205,8 +206,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": {
@@ -244,8 +245,21 @@
     ]
   },
 
+  "product-summary-image": {
+    "props": {
+      "showBadge": false
+    }
+  },
+
   "list-context.product-list#shelfProducts": {
     "blocks": ["product-summary.shelf#shelfProducts"],
     "children": ["slider-layout#demo-products"]
+  },
+  "newsletter#pageProduct": {
+    "props": {
+      "blockClass": "pageProduct",
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail"
+    }
   }
 }

store/blocks/product-price.jsonc

@@ -16,6 +16,13 @@
     }
   },
 
+  "product-selling-price#shelf": {
+    "props": {
+      "blockClass": "shelf",
+      "message": "{sellingPriceValue}"
+    }
+  },
+
   "flex-layout.row#list-price-savings": {
     "props": {
       "colGap": 2,

styles/css/vtex.product-price.css

@@ -111,5 +111,5 @@
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
-  color: #292929;
+  color: #000000;
 }

styles/css/vtex.product-summary.css

@@ -13,4 +13,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.brandName {
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  color: #000000;
 }

styles/css/vtex.slider-layout.css

@@ -15,7 +15,7 @@
 }
 
 .paginationDot--shelf {
-  background: #292929;
+  background: #000000;
   width: 10px !important;
   height: 10px !important;
 }
@@ -23,6 +23,22 @@
 .paginationDot--shelf--isActive {
   width: 17px !important;
   height: 17px !important;
-  border: 0.5px solid #292929;
+  border: 0.5px solid #000000;
   background: transparent;
+}
+
+.sliderLeftArrow--shelf {
+  visibility: hidden;
+}
+.sliderLeftArrow--shelf::after {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png");
+}
+
+.sliderRightArrow--shelf {
+  visibility: hidden;
+}
+.sliderRightArrow--shelf::before {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
 }

styles/css/vtex.store-components.css

@@ -140,7 +140,7 @@
   position: absolute;
   left: 232px;
   top: 33%;
-  background: #292929;
+  background: #000000;
   border: none;
   border-radius: 0;
 }
@@ -169,7 +169,7 @@
   visibility: visible;
   content: "Não sei meu CEP";
   font-size: 12px;
-  color: #292929;
+  color: #000000;
   text-decoration-line: underline;
 }
 
@@ -198,7 +198,7 @@
   content: "Entrega";
   text-transform: uppercase;
   display: block;
-  color: #292929;
+  color: #000000;
 }
 
 .shippingTableHeadDeliveryEstimate {
@@ -215,7 +215,7 @@
   content: "Prazo";
   text-transform: uppercase;
   display: block;
-  color: #292929;
+  color: #000000;
 }
 
 .shippingTableHeadDeliveryPrice {
@@ -232,7 +232,7 @@
   content: "Frete";
   text-transform: uppercase;
   display: block;
-  color: #292929;
+  color: #000000;
 }
 
 .shippingTableRadioBtn {
@@ -263,4 +263,189 @@
 
 .skuSelectorOptionsList {
   margin: 0;
+}
+
+:global(.vtex-address-form-4-x-input)::placeholder {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.price_sellingPriceContainer {
+  margin-bottom: 32px;
+}
+
+.price_sellingPriceLabel {
+  display: none;
+}
+
+.price_sellingPrice {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+
+.newsletter--pageProduct {
+  height: 175px;
+  margin: 64px 0 32px 0;
+  background: #000000;
+  display: flex;
+}
+
+.container--pageProduct {
+  padding: 0;
+  padding-top: 32px;
+  width: 53.75%;
+  max-width: unset;
+}
+
+.form--pageProduct {
+  max-width: unset;
+}
+
+.label--pageProduct {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #fff;
+}
+
+.label--pageProduct::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+
+.buttonContainer--pageProduct {
+  padding: 0;
+}
+
+.buttonContainer--pageProduct :global(.vtex-button) {
+  border: none;
+  border-bottom: 4px solid #ffffff;
+  border-radius: 0;
+  background: transparent;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
+
+.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid #ffffff;
+}
+
+.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  padding: 0;
+}
+
+.subscriberContainer {
+  margin-top: 43px;
+}
+.subscriberContainer .title {
+  font-size: 0;
+  margin: 0;
+}
+.subscriberContainer .title::after {
+  content: "Produto indisponível";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+}
+.form .content {
+  display: grid;
+  grid-template-areas: "nm em" "sub sub";
+  justify-content: inherit;
+  gap: 8px;
+  width: 100%;
+  max-width: 399px;
+}
+.form .content .inputName {
+  grid-area: nm;
+  width: 100%;
+  margin: 0;
+}
+.form .content .inputName :global(.vtex-input-prefix__group) {
+  border: 1px solid #868686;
+  border-radius: 0;
+}
+.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  color: #989898;
+}
+.form .content .inputEmail {
+  grid-area: em;
+  width: 100%;
+  margin: 0;
+}
+.form .content .inputEmail :global(.vtex-input-prefix__group) {
+  border: 1px solid #868686;
+  border-radius: 0;
+}
+.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  color: #989898;
+}
+.form .content .submit {
+  grid-area: sub;
+  width: 100%;
+  margin: 0;
+  margin-top: 7px;
+}
+.form .content .submit :global(.vtex-button) {
+  height: 49px;
+  background: #000000;
+  border: none;
+  border-radius: 0;
+}
+.form .content .submit :global(.vtex-button__label) {
+  font-size: 0;
+}
+.form .content .submit :global(.vtex-button__label)::after {
+  content: "avise-me";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
 }

styles/css/vtex.styleguide.css

@@ -1,4 +1,13 @@
-.hideDecorators {
+/*
-  border-left: 0;
+0 - 600PX: Phone
-  border-right: 0;
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
+/* Grid breakpoints */
+.input {
+  border: none;
+}

styles/css/vtex.tab-layout.css

@@ -50,8 +50,8 @@
   font-weight: 400;
   font-size: 18px;
   line-height: 38px;
-  color: #292929;
+  color: #000000;
-  border-bottom: 2px solid #292929;
+  border-bottom: 2px solid #000000;
   border-radius: 0;
   text-transform: capitalize;
 }

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

@@ -4,3 +4,11 @@
   justify-content: center;
   align-items: center;
 }
+
+.brandName {
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  color: $color-black;
+}

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

@@ -16,3 +16,21 @@
   border: 0.5px solid $color-black;
   background: transparent;
 }
+
+.sliderLeftArrow--shelf {
+  visibility: hidden;
+
+  &::after {
+    visibility: visible;
+    content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png");
+  }
+}
+
+.sliderRightArrow--shelf {
+  visibility: hidden;
+
+  &::before {
+    visibility: visible;
+    content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
+  }
+}

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

@@ -264,3 +264,205 @@
 .skuSelectorOptionsList {
   margin: 0;
 }
+
+:global(.vtex-address-form-4-x-input)::placeholder {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.price_sellingPriceContainer {
+  margin-bottom: 32px;
+}
+
+.price_sellingPriceLabel {
+  display: none;
+}
+
+.price_sellingPrice {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: $color-black;
+}
+
+.newsletter--pageProduct {
+  height: 175px;
+  margin: 64px 0 32px 0;
+  background: $color-black;
+  display: flex;
+}
+
+.container--pageProduct {
+  padding: 0;
+  padding-top: 32px;
+  width: 53.75%;
+  max-width: unset;
+}
+
+.form--pageProduct {
+  max-width: unset;
+}
+
+.label--pageProduct {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: $color-white;
+}
+
+.label--pageProduct::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: $color-gray7;
+}
+
+.buttonContainer--pageProduct {
+  padding: 0;
+}
+
+.buttonContainer--pageProduct :global(.vtex-button) {
+  border: none;
+  border-bottom: 4px solid $color-gray11;
+  border-radius: 0;
+  background: transparent;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-white;
+}
+
+.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid $color-gray11;
+}
+
+.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  padding: 0;
+}
+
+.subscriberContainer {
+  margin-top: 43px;
+
+  .title {
+    font-size: 0;
+    margin: 0;
+
+    &::after {
+      content: "Produto indisponível";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray12;
+    }
+  }
+
+  .subscribeLabel {
+    font-size: 0;
+
+    &::after {
+      content: "Deseja saber quando estiver disponível?";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray12;
+    }
+  }
+}
+
+.form {
+  width: 100%;
+  margin: 0;
+
+  .content {
+    display: grid;
+    grid-template-areas:
+      "nm em"
+      "sub sub";
+    justify-content: inherit;
+    gap: 8px;
+    width: 100%;
+    max-width: 399px;
+
+    .inputName {
+      grid-area: nm;
+      width: 100%;
+      margin: 0;
+
+      & :global(.vtex-input-prefix__group) {
+        border: 1px solid $color-gray12;
+        border-radius: 0;
+      }
+
+      & :global(.vtex-styleguide-9-x-input)::placeholder {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        display: flex;
+        color: $color-gray13;
+      }
+    }
+
+    .inputEmail {
+      grid-area: em;
+      width: 100%;
+      margin: 0;
+
+      & :global(.vtex-input-prefix__group) {
+        border: 1px solid $color-gray12;
+        border-radius: 0;
+      }
+
+      & :global(.vtex-styleguide-9-x-input)::placeholder {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        display: flex;
+        color: $color-gray13;
+      }
+    }
+
+    .submit {
+      grid-area: sub;
+      width: 100%;
+      margin: 0;
+      margin-top: 7px;
+
+      & :global(.vtex-button) {
+        height: 49px;
+        background: $color-black;
+        border: none;
+        border-radius: 0;
+      }
+
+      & :global(.vtex-button__label) {
+        font-size: 0;
+
+        &::after {
+          content: "avise-me";
+          font-style: normal;
+          font-weight: 600;
+          font-size: 18px;
+          line-height: 25px;
+          color: $color-white;
+        }
+      }
+    }
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
 
-$color-black: #292929;
+$color-black: #000000;
 
 $color-white: #fff;
 
@@ -14,6 +14,9 @@ $color-gray7: #929292;
 $color-gray8: #575757;
 $color-gray9: #afafaf;
 $color-gray10: #bfbfbf;
+$color-gray11: #ffffff;
+$color-gray12: #868686;
+$color-gray13: #989898;
 
 $color-blue: #4267b2;