Merge branch 'feature/availability' into desenvolvimento

react/components/Html/styles.css

@@ -38,12 +38,12 @@
     color: #929292;
     white-space: nowrap;
 }
-.html--pdp-productMain{
+.html--pdp-productMain,.html--availability{
   padding-right: 2.778%;
   padding-left: 2.778%;
   display: flex;
 }
-.html--StackLayout,.html--pdp-InfoBuy{
+.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
   width: 50%;
 }
 
@@ -54,8 +54,8 @@
   margin-bottom: 16px;
   margin-top: 16px;
 }
-.html--pdp-productMain :global(.vtex-button){
+.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
-  display: none;
+  display: block;
 }
 .html--buy-button :global(.vtex-button){
   display: block;
@@ -75,7 +75,7 @@
       max-width: 766px;
       width: 80.126%;
     }
-    .html--pdp-productMain{
+    .html--pdp-productMain,.html--availability{
       padding-right: 12.5393%;
       padding-left: 12.5393%;
       margin: 0;
@@ -123,7 +123,7 @@
 :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
   margin-bottom: 20px;
 }
-.html--pdp-productMain :global(.vtex-store-components-3-x-container){
+.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){
   max-width: 100%;
 }
 :global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
@@ -160,11 +160,11 @@
     padding-top: 12px !important;
     padding-bottom: 12px  !important;
   }
-  .html--pdp-productMain{
+  .html--pdp-productMain,.html--availability{
     flex-direction: column;
     align-items: center;
   }
-  .html--StackLayout,.html--pdp-InfoBuy{
+  .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
     width: 89.23%;
   }
   .html--pdp-descriptions :global(.vtex-store-components-3-x-container){

react/components/ProductContext/Pix.tsx

@@ -1,7 +1,14 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import {  useProduct  } from 'vtex.product-context';
 
-const Pix = () => {
+const Pix: React.FC = () => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.innerHTML = 'Novo texto';
+      buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
+    }
+  }, []);
   const { product } = useProduct()
 
   let pixprice = product?.priceRange.sellingPrice.lowPrice

store/blocks/pdp/product.jsonc

@@ -239,7 +239,7 @@
         }
       ],
       "Then": "html#product-main",
-      "Else": "flex-layout.row#product-availability"
+      "Else": "html#product-availability"
     }
   },
 
@@ -428,28 +428,23 @@
     }
   },
 
-  "flex-layout.row#product-availability": {
+  "html#product-availability": {
     "props": {
-      "colGap": 7,
+      "blockClass": "availability"
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
     },
     "children": [
       "html#stack",
-      "flex-layout.col#right-col-availability"
+      "html#right-col-availability"
     ]
   },
-  "flex-layout.col#right-col-availability": {
+  "html#right-col-availability": {
     "props": {
-      "preventVerticalStretch": true,
-      "rowGap": 0,
       "blockClass": "info-availability"
     },
     "children": [
       "flex-layout.row#product-name",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
   "flex-layout.row#availability": {
@@ -459,6 +454,12 @@
     "children": ["availability-subscriber"]
   },
 
+  "availability-subscriber":{
+    "props": {
+      "blockClass": "message-availability"
+    }
+  },
+
   "share#default": {
     "props": {
       "social": {

styles/css/vtex.flex-layout.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -200,4 +201,29 @@
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
+}
+
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-title) {
+  font-size: 0;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-title)::after {
+  content: "Produto indisponível";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 900;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
+  font-size: 0;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
 }

styles/css/vtex.store-components.css

@@ -241,4 +241,57 @@
     font-size: 14px !important;
     line-height: 19px !important;
   }
+}
+
+.form {
+  width: max-content;
+}
+.form .content {
+  width: 65.532%;
+  height: 108px;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr 1fr;
+  gap: 8px;
+}
+.form .content .inputName, .form .content .inputEmail {
+  width: 100%;
+  height: 40px;
+  min-width: 150px;
+  margin-right: 0;
+  margin-bottom: 7px;
+}
+.form .submit {
+  width: 100%;
+  justify-content: center;
+  grid-column: span 2;
+  grid-row: 2;
+}
+.form .submit :global(.vtex-button) {
+  width: 100%;
+  background: #000000;
+  width: 308px;
+  height: 49px;
+}
+.form .submit :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.form .submit :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "AVISE-ME";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  color: #FFFFFF;
+}
+.form :global(.vtex-styleguide-9-x-input) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 28px;
+  padding: 14px 14px 16px;
+  color: #989898;
 }

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

@@ -194,4 +194,29 @@
     line-height: 38px;
   }
 }
-
+.flexRowContent--message-availability{
+  :global(.vtex-store-components-3-x-title){
+    font-size: 0;
+    &::after{
+      content: "Produto indisponível";
+      font-family: 'Open Sans',sans-serif;
+      font-style: normal;
+      font-weight: 900;
+      font-size: 14px;
+      line-height: 19px;
+      color: #868686;
+    }
+  }
+  :global(.vtex-store-components-3-x-subscribeLabel){
+    font-size: 0;
+    &::after{
+      content: "Deseja saber quando estiver disponível?";
+      font-family: 'Open Sans',sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      color: #868686;
+    }
+  }
+}

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

@@ -216,4 +216,57 @@
   }
 }
 
+.form{
+  width: max-content;
+  .content{
+    width: 65.532%;
+    height: 108px;
+    display: grid;
+    justify-items: center;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr 1fr;
+    gap: 8px;
+    .inputName,.inputEmail{
+      width: 100%;
+      height: 40px;
+      min-width: 150px;
+      margin-right: 0;
+      margin-bottom: 7px;
+    }
+  }
+  .submit{
+    width: 100%;
+    justify-content: center;
+    grid-column: span 2;
+    grid-row: 2;
+    :global(.vtex-button){
+      width: 100%;
+      background: #000000;
+      width: 308px;
+      height: 49px;
+      :global(.vtex-button__label){
+        font-size: 0;
+        &::after{
+          content: "AVISE-ME";
+          font-family: 'Open Sans',sans-serif;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 18px;
+          line-height: 25px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+  :global(.vtex-styleguide-9-x-input ){
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 28px;
+    padding: 14px 14px 16px;
+    color: #989898;
+  }
+}
+