Merge branch 'feature/product-main' into development

react/Freight.tsx

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

react/components/Freight/Freight.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+
+const Freight = () => {
+  const setPlaceholder = (input: Element | null, placeholder: string) => {
+    if (input) {
+      input!.setAttribute("placeholder", placeholder);
+    }
+  };
+
+  const appendElement = (
+    parentElement: ChildNode | null | undefined,
+    childElement: ChildNode | null | undefined
+  ) => {
+    if (parentElement && childElement) {
+      parentElement!.appendChild(childElement);
+    }
+  };
+
+  useEffect(() => {
+    const cepInput = document.querySelector(".vtex-address-form-4-x-input");
+    const inputSpan = cepInput?.nextSibling;
+    const cepButton = document.querySelector(".vtex-address-form__postalCode")
+      ?.nextSibling;
+
+    console.log("cepInput: " + cepInput, typeof cepInput);
+    console.log("inputSpan: " + inputSpan, typeof inputSpan);
+    console.log("cepButton: " + cepButton, typeof cepButton);
+
+    setPlaceholder(cepInput, "Digite seu CEP");
+    appendElement(inputSpan, cepButton);
+  });
+
+  return <></>;
+};
+
+export default Freight;

react/components/Html/styles.css

@@ -10,3 +10,8 @@
   display: flex;
   flex-direction: column;
 }
+
+/* [data-testid="product-name"]
+{
+
+} */

react/components/PixDiscount/PixDiscount.tsx

@@ -15,7 +15,7 @@ const PixDiscount = () => {
     maximumFractionDigits: 2,
   });
 
-  console.log(productContextValue);
+  // console.log(productContextValue);
 
   return (
     <>

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "html#tab-layout",
+      "html#product-description",
       "html#shelf-container",
       "newsletter"
     ]
@@ -17,10 +17,10 @@
     "children": ["breadcrumb"]
   },
 
-  "html#tab-layout": {
+  "html#product-description": {
     "props": {
       "tag": "section",
-      "testId": "tab-layout"
+      "testId": "product-description"
     },
     "children": ["tab-layout#description"]
   },
@@ -170,11 +170,13 @@
       "blockClass": "right-col"
     },
     "children": [
+      // "html#product-name",
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
       // "product-rating-summary",
-      "flex-layout.row#selling-price",
+      // "flex-layout.row#selling-price",
-      "product-installments",
+      "html#selling-price",
+      "html#product-installments",
       // "flex-layout.row#list-price-savings",
       "html#pix-price",
       "html#sku-selector",
@@ -182,18 +184,40 @@
       // "product-assembly-options",
       // "product-gifts",
       "flex-layout.row#quantity-buy",
-      "availability-subscriber",
+      // "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator"
-      "share#default"
     ]
   },
 
+  "html#product-name": {
+    "props": {
+      "testId": "product-name",
+      "blockClass": "product-name"
+    },
+    "children": ["vtex.store-components:product-name"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,
       "blockClass": "product-name"
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": ["html#product-name"]
+  },
+
+  "html#codigo": {
+    "props": {
+      // "blockClass": "codigo",
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
+
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
   },
 
   "html#pix-price": {
@@ -271,7 +295,7 @@
     "props": {
       "testId": "add-to-cart-button"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["add-to-cart-button#product"]
   },
 
   "flex-layout.row#buy-button": {
@@ -279,15 +303,23 @@
       "marginTop": 4,
       "marginBottom": 7
     },
-    "children": ["add-to-cart-button"]
+    "children": ["add-to-cart-button#product"]
   },
 
-  "add-to-cart-button": {
+  "add-to-cart-button#product": {
     "props": {
       "text": "ADICIONAR À SACOLA"
     }
   },
 
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator",
+      "blockClass": "shipping-simulator"
+    },
+    "children": ["shipping-simulator", "freight"]
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "marginBottom": 5,
@@ -321,17 +353,6 @@
     "children": ["availability-subscriber"]
   },
 
-  "share#default": {
-    "props": {
-      "social": {
-        "Facebook": true,
-        "WhatsApp": true,
-        "Twitter": false,
-        "Pinterest": true
-      }
-    }
-  },
-
   "html#shelf-container": {
     "props": {
       "blockClass": "shelf-container"

store/blocks/product-price.jsonc

@@ -8,6 +8,14 @@
     "children": ["product-selling-price"]
   },
 
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price",
+      "blockClass": "selling-price"
+    },
+    "children": ["product-selling-price"]
+  },
+
   "flex-layout.row#list-price-savings": {
     "props": {
       "colGap": 2,

store/interfaces.json

@@ -8,5 +8,8 @@
   },
   "pix-discount": {
     "component": "PixDiscount"
+  },
+  "freight": {
+    "component": "Freight"
   }
 }

styles/configs/style.json

@@ -110,7 +110,7 @@
     "text": {
       "action-primary": "#0F3E99",
       "action-secondary": "#eef3f7",
-      "link": "#0F3E99",
+      "link": "#000000",
       "emphasis": "#f71963",
       "disabled": "#979899",
       "success": "#8bc34a",

styles/css/vtex.store-components.css

@@ -151,6 +151,174 @@
   color: #000000;
 }
 
+.shippingContainer {
+  width: 61.6%;
+}
+@media only screen and (min-width: 1920px) {
+  .shippingContainer {
+    width: 45.24%;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .shippingContainer {
+    width: 43.33%;
+  }
+}
+@media only screen and (max-width: 639px) {
+  .shippingContainer {
+    width: 100%;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  padding: 0;
+  display: flex;
+  gap: 32px;
+}
+@media only screen and (max-width: 639px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-size: 14px;
+  line-height: 19px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: fit-content;
+  justify-content: space-between;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  width: 82.5%;
+  height: fit-content;
+  padding: 16.5px 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+}
+.shippingContainer :global(.vtex-input__suffix) {
+  padding: 0;
+}
+.shippingContainer :global(.vtex-button) {
+  width: fit-content;
+  border: 0;
+  border-radius: 0;
+  background: #000000;
+}
+.shippingContainer :global(.vtex-button__label) {
+  padding: 15px 14.5px !important;
+  font-weight: 600;
+  font-size: 0;
+  color: #ffffff;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-size: 14px;
+  line-height: 19px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  padding-top: 27.5px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration-line: underline;
+}
+@media only screen and (max-width: 639px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    padding: 0;
+    justify-content: flex-end;
+  }
+}
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+
+.shippingTable {
+  margin-top: 16px;
+  padding: 0;
+  border: 0;
+  width: 50%;
+}
+@media only screen and (min-width: 1920px) {
+  .shippingTable {
+    width: 79.71%;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .shippingTable {
+    width: 34.54%;
+  }
+}
+@media only screen and (max-width: 639px) {
+  .shippingTable {
+    width: 100%;
+  }
+}
+.shippingTable .shippingTableHead {
+  display: table-header-group;
+  text-align: left;
+  font-size: 14px;
+  line-height: 19px;
+  text-transform: uppercase;
+  color: #202020;
+}
+.shippingTable .shippingTableCell {
+  padding: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+}
+.shippingTable .shippingTableRow {
+  padding-bottom: 15px;
+  display: grid;
+  grid-template-columns: 33.74% 24.54% 41.72%;
+  grid-template-areas: "entregaTHead freteTHead prazoTHead" "entregaTBody freteTBody prazoTBody";
+}
+.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
+  grid-area: entregaTHead;
+  font-weight: 400;
+}
+.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  grid-area: prazoTHead;
+  font-weight: 400;
+}
+.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
+  grid-area: freteTHead;
+  font-weight: 400;
+  font-size: 0;
+  position: relative;
+}
+.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after {
+  content: "FRETE";
+  width: min-content;
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: left;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryName {
+  grid-area: entregaTBody;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate {
+  grid-area: prazoTBody;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
+  grid-area: freteTBody;
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+
 /* ----- INFO-AVAILABILITY ----- */
 .subscriberContainer {
   margin-bottom: 16px;

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

@@ -57,6 +57,9 @@
 }
 
 /* ----- RIGHT-COL ----- */
+// .productNameContainer {
+
+// }
 .productBrand--quickview {
   // font-family: "Open Sans";
   font-weight: 300;
@@ -202,6 +205,219 @@
   }
 }
 
+.shippingContainer {
+  // background-color: cyan;
+  width: 61.6%;
+
+  @include mq(xl, min) {
+    width: 45.24%;
+  }
+
+  @include mq(lg, max) {
+    width: 43.33%;
+  }
+
+  @include mq(md, max) {
+    width: 100%;
+  }
+
+  :global(.vtex-address-form__postalCode) {
+    padding: 0;
+    display: flex;
+    gap: 32px;
+
+    @include mq(md, max) {
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+
+  :global(.vtex-input__label) {
+    // font-family: "Open Sans";
+    // font-weight: 400;
+    font-size: 0;
+    color: #929292;
+
+    &::after {
+      content: "CALCULAR FRETE:";
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+
+  :global(.vtex-input-prefix__group) {
+    height: fit-content;
+    justify-content: space-between;
+    border: 1px solid #cccccc;
+    border-radius: 0;
+  }
+
+  :global(.vtex-address-form-4-x-input) {
+    // background-color: yellow;
+    width: 82.5%;
+    height: fit-content;
+    padding: 16.5px 16px;
+    // font-family: "Open Sans";
+    // font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #afafaf;
+  }
+
+  :global(.vtex-input__suffix) {
+    padding: 0;
+  }
+
+  :global(.vtex-button) {
+    width: fit-content;
+    border: 0;
+    border-radius: 0;
+    background: #000000;
+  }
+
+  :global(.vtex-button__label) {
+    padding: 15px 14.5px !important;
+    // font-family: "Open Sans";
+    font-weight: 600;
+    font-size: 0;
+    color: #ffffff;
+
+    &::after {
+      content: "OK";
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    // background-color: yellow;
+    padding-top: 27.5px;
+    display: flex;
+    align-items: center;
+    // font-family: "Open Sans";
+    // font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    text-decoration-line: underline;
+
+    @include mq(md, max) {
+      padding: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  :global(.vtex__icon-external-link) {
+    display: none;
+  }
+}
+
+.shippingTable {
+  margin-top: 16px;
+  padding: 0;
+  border: 0;
+  width: 50%;
+
+  @include mq(xl, min) {
+    width: 79.71%;
+  }
+
+  @include mq(lg, max) {
+    width: 34.54%;
+  }
+
+  @include mq(md, max) {
+    width: 100%;
+  }
+
+  .shippingTableHead {
+    display: table-header-group;
+    text-align: left;
+    // font-family: "Open Sans";
+    font-size: 14px;
+    line-height: 19px;
+    text-transform: uppercase;
+    color: #202020;
+  }
+
+  // .shippingTableBody {
+  //   // background-color: orange;
+  // }
+
+  .shippingTableCell {
+    padding: 0;
+    // font-family: "Open Sans";
+    // font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #afafaf;
+    // text-align: left;
+
+    // &:last-child {
+    //   padding-right: 0;
+    // }
+  }
+
+  .shippingTableRow {
+    padding-bottom: 15px;
+
+    display: grid;
+    // grid-template-rows: auto;
+    grid-template-columns: 33.74% 24.54% 41.72%;
+    // grid-template-columns: 23.92% 14.72% 41.72%;
+    // gap: 32px;
+    grid-template-areas:
+      "entregaTHead freteTHead prazoTHead"
+      "entregaTBody freteTBody prazoTBody";
+
+    .shippingTableHeadDeliveryName {
+      // background-color: cyan;
+      grid-area: entregaTHead;
+      font-weight: 400;
+    }
+
+    .shippingTableHeadDeliveryEstimate {
+      // background-color: yellow;
+      grid-area: prazoTHead;
+      font-weight: 400;
+    }
+
+    .shippingTableHeadDeliveryPrice {
+      // background-color: magenta;
+      grid-area: freteTHead;
+      font-weight: 400;
+      font-size: 0;
+      position: relative;
+
+      &::after {
+        content: "FRETE";
+        width: min-content;
+        position: absolute;
+        bottom: 1px;
+        left: 1px;
+        font-size: 14px;
+        line-height: 19px;
+        text-align: left;
+      }
+    }
+
+    .shippingTableCellDeliveryName {
+      grid-area: entregaTBody;
+    }
+
+    .shippingTableCellDeliveryEstimate {
+      grid-area: prazoTBody;
+    }
+
+    .shippingTableCellDeliveryPrice {
+      grid-area: freteTBody;
+    }
+  }
+
+  .shippingTableRadioBtn {
+    display: none;
+  }
+}
+
 /* ----- INFO-AVAILABILITY ----- */
 .subscriberContainer {
   // background-color: red;