feat: adiciona pix discount

manifest.json

@@ -65,7 +65,8 @@
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
     "vtex.css-handles": "1.x",
-    "vtex.product-context": "0.x"
+    "vtex.product-context": "0.x",
+    "vtex.render-runtime": "8.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/PlaceHolderCep.ts

@@ -0,0 +1,3 @@
+import { PlaceHolderCep } from "./components/Placeholder/place-holder-cep";
+
+export default PlaceHolderCep;

react/components/Pixdiscount/pix-discount.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import style from "./styles.css";
 
 import { useProduct } from "vtex.product-context";
 
@@ -20,11 +21,11 @@ export function PixDiscount() {
     }
   }
   return (
-    <div>
+    <div className={style.pixContainer}>
       <PixIcon />
-      <div>
+      <div className={style.discountPixContainer}>
         {discount()}
-        <span>10% de desconto</span>
+        <span className={style.discountSpan}>10% de desconto</span>
       </div>
     </div>
   );
@@ -33,6 +34,7 @@ export function PixDiscount() {
 function PixIcon() {
   return (
     <svg
+      className={style.imgTeste}
       width="66"
       height="25"
       viewBox="0 0 66 25"

react/components/Pixdiscount/styles.css

@@ -0,0 +1,26 @@
+.pixContainer {
+  display: flex;
+}
+
+.discountPixContainer {
+  display: flex;
+  flex-direction: column;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.discountSpan {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  color: #929292;
+}
+
+.imgTeste {
+  margin: 18px 26px 21px 0px;
+}

react/components/Placeholder/place-holder-cep.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { canUseDOM } from "vtex.render-runtime";
+
+export function PlaceHolderCep() {
+  if (canUseDOM) {
+    const myPlaceHolder = document.querySelector(
+      ".vtex-address-form-4-x-input"
+    );
+    myPlaceHolder?.setAttribute("placeholder", "Digite seu CEP");
+  }
+
+  return <></>;
+}

store/blocks/pdp/product-description.jsonc

@@ -0,0 +1,105 @@
+{
+  "tab-layout#description": {
+    "children": ["tab-list#description", "tab-content#description"],
+    "props": {
+      "blockClass": "description",
+      "defaultActiveTabId": "description1"
+    }
+  },
+  "tab-list#description": {
+    "children": [
+      "tab-list.item#description1",
+      "tab-list.item#description2",
+      "tab-list.item#description3",
+      "tab-list.item#description4",
+      "tab-list.item#description5"
+    ]
+  },
+  "tab-list.item#description1": {
+    "props": {
+      "tabId": "description1",
+      "label": "description 1",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#description2": {
+    "props": {
+      "tabId": "description2",
+      "label": "description 2"
+    }
+  },
+
+  "tab-list.item#description3": {
+    "props": {
+      "tabId": "description3",
+      "label": "description 3"
+    }
+  },
+
+  "tab-list.item#description4": {
+    "props": {
+      "tabId": "description4",
+      "label": "description 4"
+    }
+  },
+
+  "tab-list.item#description5": {
+    "props": {
+      "tabId": "description5",
+      "label": "description 5"
+    }
+  },
+
+  "tab-content#description": {
+    "children": [
+      "tab-content.item#description1",
+      "tab-content.item#description2",
+      "tab-content.item#description3",
+      "tab-content.item#description4",
+      "tab-content.item#description5"
+    ]
+  },
+  "tab-content.item#description1": {
+    "children": ["product-description", "product-images#imagecontainer"],
+    "props": {
+      "tabId": "description1"
+    }
+  },
+  "tab-content.item#description2": {
+    "children": ["product-description", "product-images#imagecontainer"],
+    "props": {
+      "tabId": "description2"
+    }
+  },
+  "tab-content.item#description3": {
+    "children": ["product-description", "product-images#imagecontainer"],
+    "props": {
+      "tabId": "description3"
+    }
+  },
+
+  "tab-content.item#description4": {
+    "children": ["product-description", "product-images#imagecontainer"],
+    "props": {
+      "tabId": "description4"
+    }
+  },
+
+  "tab-content.item#description5": {
+    "children": ["product-images#imagecontainer", "product-description"],
+    "props": {
+      "tabId": "description5"
+    }
+  },
+
+  "product-images#imagecontainer": {
+    "props": {
+      "displayThumbnailsArrows": false,
+      "showNavigationArrows": false,
+      "contentType": "images",
+      "displayMode": "first-image"
+    }
+  }
+}
+
+/* "product-specification-group#table" */

store/blocks/pdp/product.jsonc

@@ -30,7 +30,7 @@
     "props": {
       "marginBottom": 7
     },
-    "children": ["product-description"]
+    "children": ["tab-layout#description"]
   },
   "condition-layout.product#availability": {
     "props": {
@@ -109,14 +109,15 @@
       "flex-layout.row#selling-price",
       "product-installments#summary",
       "pix-discount",
+      "place-holder",
       /* "product-separator", */
       "sku-selector",
-      "flex-layout.row#add-bag", ///// //
+      "flex-layout.row#add-bag",
-      /* "product-quantity", */ "product-assembly-options",
+      "product-assembly-options",
       "product-gifts", //
-      /* "flex-layout.row#buy-button", */ "availability-subscriber",
+      "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
+      /* "share#default" */
     ]
   },
   "flex-layout.row#add-bag": {

store/interfaces.json

@@ -8,5 +8,8 @@
   },
   "pix-discount": {
     "component": "PixDiscount"
+  },
+  "place-holder": {
+    "component": "PlaceHolderCep"
   }
 }

styles/css/vmtex.product-quantity.css

@@ -1,12 +0,0 @@
-/*
-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 */
-.quantitySelectorContainer {
-  border: 1px solid red;
-}

styles/css/vtex.numeric-stepper-container.css

@@ -1,12 +0,0 @@
-/*
-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 */
-.numeric-stepper-container {
-  border: 1px solid #cccccc;
-}

styles/css/vtex.numeric-stepper-wrapper.css

@@ -1,14 +0,0 @@
-/*
-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 */
-.numeric-stepper-container {
-  border: 1px solid #cccccc;
-  width: 128px;
-  height: 49px;
-}

styles/css/vtex.numeric-stepper.css

@@ -1,13 +0,0 @@
-/*
-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 */
-/* .numeric-stepper-wrapper {
-  width: 128px;
-}
- */

styles/css/vtex.numeric.stepper-container.css

@@ -1,12 +0,0 @@
-/*
-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 */
-.numeric-stepper-container {
-  border: 1px solid #cccccc;
-}

styles/css/vtex.store-components.css

@@ -100,7 +100,6 @@
   font-size: 0;
 }
 .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
-  /*  font-family: "Open Sans"; */
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -111,3 +110,68 @@
 .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
   font-size: 0;
 }
+
+.shippingContainer {
+  position: relative;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 231px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button) {
+  position: absolute;
+  border: 0;
+  width: 49px;
+  height: 49px;
+  top: 27px;
+  left: 229px;
+}
+.shippingContainer :global(.vtex-button__label) {
+  background-color: #000000;
+  width: 49px;
+  height: 49px;
+  font-size: 0;
+  box-sizing: b;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  padding: 0;
+  margin-top: 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  width: 280px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  display: flex;
+  align-items: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration-line: underline;
+  color: #000000;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
+}

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

@@ -95,7 +95,6 @@
       .skuSelectorName {
         font-size: 0;
         &::after {
-          /*  font-family: "Open Sans"; */
           font-style: normal;
           font-weight: 400;
           font-size: 14px;
@@ -110,3 +109,68 @@
     }
   }
 }
+
+.shippingContainer {
+  position: relative;
+  :global(.vtex-input-prefix__group) {
+    width: 231px;
+    height: 49px;
+  }
+  :global(.vtex-button) {
+    position: absolute;
+    border: 0;
+    width: 49px;
+    height: 49px;
+    top: 27px;
+    left: 229px;
+  }
+  :global(.vtex-button__label) {
+    background-color: #000000;
+    width: 49px;
+    height: 49px;
+    font-size: 0;
+    box-sizing: b;
+    &::after {
+      content: "OK";
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: #ffffff;
+    }
+  }
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    padding: 0;
+    margin-top: 16px;
+    :global(.vtex-input) {
+      width: 280px;
+    }
+    :global(.vtex-input__label) {
+      font-size: 0;
+      &::after {
+        content: "CALCULAR FRETE:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    display: flex;
+    align-items: center;
+    :first-child {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-decoration-line: underline;
+      color: #000000;
+    }
+    :global(.vtex__icon-external-link) {
+      display: none;
+    }
+  }
+}