feat(pix/prateleira): Adiciona css na prateleira, e começo da criação do componente pix

react/Pix.tsx

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

react/Placeholder.js

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

react/Placeholder.tsx

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

react/components/pix/ValuePix.tsx

@@ -0,0 +1,19 @@
+import { useProduct } from "vtex.product-context";
+
+const Pix = () => {
+  const productContextValue = useProduct();
+  console.log(productContextValue);
+  const price = productContextValue?.product?.priceRange.listPrice.highPrice;
+  console.log(price);
+  if (price !== undefined) {
+    const pix = (price / 100) * 10;
+    console.log(pix, "valor lido");
+    const valuePix = price - pix;
+    console.log(valuePix);
+    return valuePix;
+  } else {
+    return "valor não encontrado";
+  }
+};
+
+export default Pix;

react/components/pix/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Pix from "./ValuePix";
+
+const ValuePix = () => {
+  return <p>R$ {Pix}</p>;
+};
+
+export default ValuePix;

react/components/placeholder/index.js

@@ -0,0 +1,11 @@
+const Placeholder = () => {
+  const placeholderCep = document.querySelector(".vtex-address-form-4-x-input");
+
+  if (placeholderCep) {
+    return (placeholderCep.placeholder = "Digite seu CEP");
+  } else {
+    return "";
+  }
+};
+
+export default Placeholder;

react/components/placeholder/index.tsx

@@ -1,8 +0,0 @@
-const Placeholder = () => {
-  const placeholderCep = ((document.getElementsByClassName(
-    "vtex-address-form-4-x-input"
-  )[0] as HTMLInputElement).placeholder = "Digite seu CEP");
-  return placeholderCep;
-};
-
-export { Placeholder };

react/tsconfig.json

@@ -11,6 +11,8 @@
     "./typings/*.d.ts",
     "./**/*.tsx",
     "./**/*.ts",
-    "components/placeholder/index.jsx"
+    "components/placeholder/index.js",
+    "Placeholder.js",
+    "components/placeholder/index.js"
   ]
 }

store/blocks/pdp/product.jsonc

@@ -92,6 +92,7 @@
       "product-rating-summary",
       "product-selling-price",
       "product-installments",
+      "pix",
       "html#sku-selector",
       "product-gifts",
       "html#buy-button",
@@ -166,6 +167,7 @@
 
   "html#product-availability": {
     "props": {
+      "blockClass": "product-main",
       "colGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
@@ -182,8 +184,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": {
@@ -192,72 +194,10 @@
     },
     "children": ["availability-subscriber"]
   },
-  "rich-text#prateleira": {
-    "props": {
-      "text": "Você também pode gostar:",
-      "blockClass": "title-prateleira"
-    }
-  },
 
-  "html#product-summary.shelf": {
+  "availability-subscriber": {
     "props": {
-      "testId": "vtex-product-summary",
+      "blockClass": "message-availability"
-      "blockClass": "produto-prateleira"
-    },
-    "children": ["product-summary-image", "product-summary-name", "html#price"]
-  },
-
-  "html#price": {
-    "props": {
-      "blockClass": "price"
-    },
-    "children": [
-      "product-list-price#prateleira",
-      "product-selling-price#prateleira"
-    ]
-  },
-
-  "product-list-price#prateleira": {
-    "props": {
-      "blockClass": "prateleira",
-      "message": "de {listPriceValue} por "
-    }
-  },
-
-  "product-selling-price#prateleira": {
-    "props": {
-      "blockClass": "prateleira"
-    }
-  },
-
-  "product-summary.shelf#slider": {
-    "props": {
-      "blockClass": "produto-prateleira"
-    },
-    "children": ["html#product-summary.shelf"]
-  },
-  "list-context.product-list#prateleira": {
-    "blocks": ["product-summary.shelf#slider"],
-    "children": ["slider-layout#prateleira"]
-  },
-
-  "html#list-context.product-list#prateleira": {
-    "props": {
-      "testId": "product-summary-list",
-      "blockClass": "prateleira"
-    },
-    "children": ["rich-text#prateleira", "list-context.product-list#prateleira"]
-  },
-
-  "slider-layout#prateleira": {
-    "props": {
-      "itemsPerPage": {
-        "desktop": 4,
-        "tablet": 3,
-        "phone": 2
-      },
-      "infinite": true,
-      "blockClass": "prateleira"
     }
   }
 }

store/blocks/pdp/slider-layout.jsonc

@@ -0,0 +1,70 @@
+{
+  "rich-text#prateleira": {
+    "props": {
+      "text": "Você também pode gostar:",
+      "blockClass": "title-prateleira"
+    }
+  },
+
+  "html#product-summary.shelf": {
+    "props": {
+      "testId": "vtex-product-summary",
+      "blockClass": "produto-prateleira"
+    },
+    "children": ["product-summary-image", "product-summary-name", "html#price"]
+  },
+
+  "html#price": {
+    "props": {
+      "blockClass": "price"
+    },
+    "children": [
+      "product-list-price#prateleira",
+      "product-selling-price#prateleira"
+    ]
+  },
+
+  "product-list-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira",
+      "message": "de {listPriceValue} por "
+    }
+  },
+
+  "product-selling-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira"
+    }
+  },
+
+  "product-summary.shelf#slider": {
+    "props": {
+      "blockClass": "produto-prateleira"
+    },
+    "children": ["html#product-summary.shelf"]
+  },
+  "list-context.product-list#prateleira": {
+    "blocks": ["product-summary.shelf#slider"],
+    "children": ["slider-layout#prateleira"]
+  },
+
+  "html#list-context.product-list#prateleira": {
+    "props": {
+      "testId": "product-summary-list",
+      "blockClass": "prateleira"
+    },
+    "children": ["rich-text#prateleira", "list-context.product-list#prateleira"]
+  },
+
+  "slider-layout#prateleira": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      },
+      "infinite": true,
+      "blockClass": "prateleira"
+    }
+  }
+}

store/interfaces.json

@@ -8,5 +8,8 @@
   },
   "placeholder": {
     "component": "Placeholder"
+  },
+  "pix": {
+    "component": "Pix"
   }
 }

styles/css/vtex.product-summary.css

@@ -21,8 +21,8 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  max-width: 314px;
+  max-width: 334.4px;
-  height: 314.4px;
+  height: 334.4px;
   background: #EDEDED;
 }
 .container--produto-prateleira .nameContainer {
@@ -41,3 +41,10 @@
 .container--produto-prateleira .priceContainer {
   padding: 0 0 32px;
 }
+
+@media screen and (max-width: 1024px) {
+  .container--produto-prateleira .imageContainer {
+    max-width: 317.87px;
+    height: 317.87px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -11,11 +11,14 @@
   background-color: transparent;
   justify-content: center;
 }
+.sliderLayoutContainer--prateleira .sliderTrack--prateleira {
+  gap: 16px;
+}
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
   width: 95.96%;
 }
 .sliderLayoutContainer--prateleira .slide--prateleira {
-  margin: 0 16px 0 0;
+  margin: 0;
 }
 .sliderLayoutContainer--prateleira .sliderArrows--prateleira {
   padding: 0;
@@ -23,9 +26,36 @@
 }
 .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
   left: -12px;
+  width: 11.2px;
+  height: 29.6px;
+}
+.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::after {
+  content: "";
+  position: absolute;
+  padding: 10px;
+  left: 1px;
+  box-shadow: 2px -2px 0 0px #000 inset;
+  border: solid transparent;
+  border-width: 0 0 1px 1px;
+  transform: rotate(45deg);
+}
+.sliderLayoutContainer--prateleira .caretIcon {
+  display: none;
 }
 .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
   right: -12px;
+  width: 11.2px;
+  height: 29.6px;
+}
+.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after {
+  content: "";
+  position: absolute;
+  padding: 10px;
+  right: 1px;
+  box-shadow: 2px -2px 0 0px #000 inset;
+  border: solid transparent;
+  border-width: 0 0 1px 1px;
+  transform: rotate(-135deg);
 }
 .sliderLayoutContainer--prateleira .paginationDotsContainer {
   align-items: center;

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -203,6 +204,17 @@
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   width: 0;
 }
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #AFAFAF;
+}
 .shippingContainer :global(.vtex-button) {
   width: 49px;
   height: 49px;
@@ -314,6 +326,74 @@
   color: #929292;
 }
 
+.subscriberContainer .content {
+  flex-wrap: wrap;
+  justify-content: start;
+  margin-top: 16px;
+}
+.subscriberContainer .title {
+  font-size: 0;
+}
+.subscriberContainer .title::after {
+  content: "Produto indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .input {
+  width: 195.5px;
+  height: 40px;
+  margin: 0;
+}
+.subscriberContainer .inputName {
+  margin-right: 8px;
+}
+.subscriberContainer :global(.vtex-input-prefix__group) {
+  border: 1px solid #989898;
+  border-radius: 0;
+}
+.subscriberContainer :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #989898;
+}
+.subscriberContainer :global(.vtex-button) {
+  width: 399px;
+  height: 49px;
+  margin-top: 15px;
+  border: 0;
+  background: #000000;
+}
+.subscriberContainer :global(.vtex-button__label) {
+  font-size: 0;
+  width: 100%;
+}
+.subscriberContainer :global(.vtex-button__label)::after {
+  content: "AVISE-ME";
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  display: flex;
+  align-items: center;
+  color: #FFFFFF;
+}
+
 @media screen and (max-width: 1024px) {
   .productImageTag--main {
     max-height: 994px !important;
@@ -321,7 +401,7 @@
   .productNameContainer {
     text-align: start;
   }
-  .imageElement {
+  .productImagesContainer--description {
     width: 100%;
     max-height: 944px;
   }
@@ -332,6 +412,20 @@
     padding-bottom: 16px;
     border-bottom: 1px solid #B9B9B9;
   }
+  .subscriberContainer .content {
+    max-width: 100%;
+    display: flex;
+  }
+  .subscriberContainer .submit {
+    width: 100%;
+  }
+  .subscriberContainer .input {
+    width: 49.3%;
+    max-width: 378.5px;
+  }
+  .subscriberContainer :global(.vtex-button) {
+    width: 100%;
+  }
 }
 @media screen and (max-width: 768px) {
   .shippingContainer :global(.vtex-address-form__postalCode) {

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

@@ -14,8 +14,8 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    max-width: 314px;
+    max-width: 334.4px;
-    height: 314.4px;
+    height: 334.4px;
     background: #EDEDED;
   }
 
@@ -39,3 +39,13 @@
     padding: 0 0 32px;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .container--produto-prateleira {
+    .imageContainer {
+      max-width: 317.87px;
+      height: 317.87px;
+    }
+  }
+
+}

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

@@ -2,12 +2,16 @@
   background-color: transparent;
   justify-content: center;
 
+  .sliderTrack--prateleira {
+    gap: 16px;
+  }
+
   .sliderTrackContainer--prateleira {
     width: 95.96%;
   }
 
   .slide--prateleira {
-    margin: 0 16px 0 0;
+    margin: 0;
   }
 
   .sliderArrows--prateleira {
@@ -17,10 +21,40 @@
 
   .sliderLeftArrow--prateleira {
     left: -12px;
+    width: 11.2px;
+    height: 29.6px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      padding: 10px;
+      left: 1px;
+      box-shadow: 2px -2px 0 0px #000 inset;
+      border: solid transparent;
+      border-width: 0 0 1px 1px;
+      transform: rotate(45deg);
+    }
+  }
+
+  .caretIcon {
+    display: none;
   }
 
   .sliderRightArrow--prateleira {
     right: -12px;
+    width: 11.2px;
+    height: 29.6px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      padding: 10px;
+      right: 1px;
+      box-shadow: 2px -2px 0 0px #000 inset;
+      border: solid transparent;
+      border-width: 0 0 1px 1px;
+      transform: rotate(-135deg);
+    }
   }
 
   .paginationDotsContainer {

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

@@ -219,6 +219,20 @@
 
   }
 
+  :global(.vtex-address-form-4-x-input) {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+
+    &::placeholder {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+
+      color: #AFAFAF;
+    }
+  }
+
   :global(.vtex-button) {
     width: 49px;
     height: 49px;
@@ -353,6 +367,97 @@
   color: #929292;
 }
 
+.subscriberContainer {
+  .content {
+    flex-wrap: wrap;
+    justify-content: start;
+    margin-top: 16px;
+  }
+
+  .title {
+    font-size: 0;
+
+    &::after {
+      content: "Produto indisponível";
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+
+      display: flex;
+      align-items: center;
+
+      color: #868686;
+    }
+  }
+
+  .subscribeLabel {
+    font-size: 0;
+
+    &::after {
+      content: "Deseja saber quando estiver disponível?";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+
+      display: flex;
+      align-items: center;
+
+      color: #868686;
+    }
+  }
+
+  .input {
+    width: 195.5px;
+    height: 40px;
+    margin: 0;
+
+  }
+
+  .inputName {
+    margin-right: 8px;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    border: 1px solid #989898;
+    border-radius: 0;
+  }
+
+  :global(.vtex-styleguide-9-x-input) {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+
+    color: #989898;
+  }
+
+  :global(.vtex-button) {
+    width: 399px;
+    height: 49px;
+    margin-top: 15px;
+    border: 0;
+    background: #000000;
+  }
+
+  :global(.vtex-button__label) {
+    font-size: 0;
+    width: 100%;
+
+    &::after {
+      content: "AVISE-ME";
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 25px;
+
+      display: flex;
+      align-items: center;
+
+      color: #FFFFFF;
+    }
+  }
+
+
+}
+
 @media screen and (min-width: 1920px) {}
 
 
@@ -366,7 +471,7 @@
     text-align: start;
   }
 
-  .imageElement {
+  .productImagesContainer--description {
     width: 100%;
     max-height: 944px;
   }
@@ -379,6 +484,26 @@
     padding-bottom: 16px;
     border-bottom: 1px solid #B9B9B9;
   }
+
+  .subscriberContainer {
+    .content {
+      max-width: 100%;
+      display: flex;
+    }
+
+    .submit {
+      width: 100%;
+    }
+
+    .input {
+      width: 49.3%;
+      max-width: 378.5px;
+    }
+
+    :global(.vtex-button) {
+      width: 100%;
+    }
+  }
 }
 
 @media screen and (max-width: 768px) {