Merge pull request 'feature/challenge' (#2) from feature/challenge into master

Reviewed-on: #2

react/Installment.tsx

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

react/components/Html/style.css

@@ -10,3 +10,16 @@
 [class*="html--cep"] {
   margin: 16px 0;
 }
+
+[class*="agenciamagma-store-theme-5-x-html--pix-component" ]{
+  margin: 0;
+  padding: 0;
+}
+
+[class*="agenciamagma-store-theme-5-x-html--slider-product" ]{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+}

react/components/Installment/Installment.module.css

@@ -1,15 +0,0 @@
-.installment-product {
-  font-family: 'Open Sans', sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  margin: 0;
-  padding: 0;
-  height: 22px;
-  color: #929292;
-}
-
-.installment-product__strong {
-  font-weight: 700;
-}

react/components/Installment/index.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { useProduct } from "vtex.product-context";
-import styles from "./Installment.module.css";
-
-const Installment = () => {
-  const skuProduct = useProduct();
-  console.log(skuProduct);
-
-  const productInstallment: any = {
-    numberOfInstallment:
-      skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
-        .NumberOfInstallments,
-    value:
-      skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
-        .Value,
-  };
-
-  return (
-    <p className={styles["installment-product"]}>
-      <span className={styles["installment-product__strong"]}>
-        {productInstallment.numberOfInstallment}x{" "}
-      </span>
-      de
-      <span className={styles["installment-product__strong"]}>
-        {""} R${" "}
-        {productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "}
-      </span>
-      sem juros
-    </p>
-  );
-};
-
-export default Installment;

react/components/PixDiscount/index.tsx

@@ -23,9 +23,9 @@ const PixDiscount = () => {
         className={styles["pixContainer__img"]}
       />
       <div className={styles["pixContainer__discount"]}>
-        <span className={styles["pixContainer__priceFinal"]}>
+        <p className={styles["pixContainer__priceFinal"]}>
           R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
-        </span>
+        </p>
         <span className={styles["pixContainer__discount__value"]}>
           10% de desconto
         </span>

store/blocks/pdp/product.jsonc

@@ -4,7 +4,7 @@
       "html#breadcrumb",
       "placeholder-component",
       "condition-layout.product#availability",
-      "tab-layout#description",
+      "html#product-description",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
       // "shelf.relatedProducts",
@@ -87,12 +87,12 @@
       "blockClass": "product-skus"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
       // "product-rating-summary", // avaliações
       // "flex-layout.row#list-price-savings", preço com promoção vindo vtex
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "installment-component",
+      "html#installment-component",
       "html#pix-component",
       // "product-separator", //linha que separa preço de skus
       "html#sku-selector",
@@ -106,13 +106,29 @@
     ]
   },
 
-  "flex-layout.row#product-name": {
+  "html#flex-layout.row#product-name": {
     "props": {
-      "blockClass": "product__name"
+      "blockClass": "product__name",
+      "testId": "product-name"
     },
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#codigo": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
+
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price",
+      "tag": "span"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
   "html#sku-selector": {
     "props": {
       "testId": "sku-selector"
@@ -128,10 +144,31 @@
     }
   },
 
+  "html#installment-component": {
+    "props": {
+      "tag": "span",
+      "testId": "product-installments"
+    },
+    "children": ["product-installments#installment"]
+  },
+
+  "product-installments#installment": {
+    "props": {
+      "markers": ["portion", "portion2"],
+      "installmentOptionsFilter": {
+        "paymentSystemName": "Mastercard",
+        "installmentsQuantity": 4
+      },
+    "message": "{installmentsNumber}x <portion>de</portion> {installmentValue} <portion2>sem juros</portion2>",
+    "blockClas": "installment"
+    }
+  },
+
   "html#pix-component": {
     "props": {
       "tag": "section",
-      "testId": "pix-price"
+      "testId": "pix-price",
+      "blockClass": "pix-component"
     },
     "children": ["pix-component"]
   },
@@ -179,12 +216,6 @@
   },
 
   "flex-layout.row#product-availability": {
-    "props": {
-      "colGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
-    },
     "children": [
       "flex-layout.col#stack",
       "flex-layout.col#right-col-availability"
@@ -198,7 +229,7 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
       "flex-layout.row#availability",
       "sku-selector"
     ]

store/blocks/pdp/product__carousel.jsonc

@@ -27,7 +27,8 @@
       "product-summary-image#slider-images",
       "product-summary-name",
       // "product-summary-space",
-      "product-summary-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 

store/blocks/pdp/product__description.jsonc

@@ -12,6 +12,14 @@
       "blockClass": "image-description"
     }
   },
+
+  "html#product-description": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#description"]
+  },
+
   "tab-layout#description": {
     "children": ["tab-list#description", "tab-content#description"],
     "props": {

store/interfaces.json

@@ -6,9 +6,6 @@
     "component": "html",
     "composition": "children"
   },
-  "installment-component": {
-    "component": "Installment"
-  },
   "pix-component": {
     "component": "PixDiscount"
   },

styles/css/vtex.product-price.css

@@ -15,3 +15,18 @@
   line-height: 38px;
   color: #000;
 }
+
+.installments {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  margin: 0;
+  padding: 0;
+  height: 22px;
+  color: #929292;
+}
+.installments .installments-portion, .installments .installments-portion2 {
+  font-weight: 400;
+}

styles/css/vtex.product-summary.css

@@ -40,11 +40,14 @@
     line-height: 19px;
   }
 }
-.containerNormal .clearLink .element .priceContainer {
+.containerNormal .clearLink .element .listPrice {
   padding: 0;
   margin: 0;
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer {
+.containerNormal .clearLink .element .listPrice .installmentContainer {
+  display: none;
+}
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -57,24 +60,21 @@
   margin-bottom: 8px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
-  display: none;
-}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
   font-size: 14px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
     font-size: 12px;
     line-height: 16px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
   content: "de ";
   font-family: "Open Sans", sans-serif;
   font-style: normal;
@@ -84,12 +84,12 @@
   text-align: center;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
   content: " por";
   font-family: "Open Sans", sans-serif;
   font-style: normal;
@@ -99,12 +99,12 @@
   text-align: center;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+  .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
     font-size: 12px;
     line-height: 15px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
   padding: 0;
   margin: 0;
   height: 33px;
@@ -117,28 +117,22 @@
   color: #000;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+  .containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
     font-size: 18px;
     line-height: 25px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
   font-size: 24px;
   line-height: 33px;
 }
 @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
-  .containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+  .containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
     font-size: 18px;
     line-height: 25px;
   }
 }
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) .sellingPriceValue {
-  display: none;
-}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
   padding: 0;
   margin: 0;
 }
-.containerNormal .clearLink .element .priceContainer .installmentContainer {
-  display: none;
-}

styles/sass/pages/product/vtexProduct/vtex.product-price.scss

@@ -5,3 +5,20 @@
   line-height: 38px;
   color: $color-black0;
 }
+
+.installments {
+  font-family: 'Open Sans', sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  margin: 0;
+  padding: 0;
+  height: 22px;
+  color: #929292;
+
+  .installments-portion, .installments-portion2 {
+    font-weight: 400;
+  }
+
+}

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

@@ -33,11 +33,18 @@
         }
       }
 
-      .priceContainer {
+      .listPrice {
         padding: 0;
         margin: 0;
 
-        .listPriceContainer {
+        .installmentContainer  {
+          display: none;
+        }
+      }
+    }
+  }
+
+  :global(.vtex-product-price-1-x-listPriceValue) {
     font-family: $font-family;
     font-style: normal;
     font-weight: 400;
@@ -54,11 +61,7 @@
       line-height: 15px;
     }
 
-          .listPriceLabel {
+    :global(.vtex-product-price-1-x-currencyContainer) {
-            display: none;
-          }
-
-          .currencyContainer {
       font-size: 14px;
 
       @media #{$mq-tablet}, #{$mq-mobile} {
@@ -96,10 +99,9 @@
         }
       }
     }
-
   }
 
-        .sellingPriceContainer {
+  :global(.vtex-product-price-1-x-sellingPrice) {
     padding: 0;
     margin: 0;
     height: 33px;
@@ -116,7 +118,7 @@
       line-height: 25px;
     }
 
-          .currencyContainer {
+    :global(.vtex-product-price-1-x-currencyContainer) {
       font-size: 24px;
       line-height: 33px;
 
@@ -125,22 +127,10 @@
         line-height: 25px;
       }
     }
-
-          .sellingPriceLabel  {
-            display: none;
-          }
-
     .sellingPriceValue {
       padding: 0;
       margin: 0;
     }
   }
 
-        .installmentContainer  {
-          display: none;
-        }
-      }
-    }
-  }
-
 }