feat(product-price):dados de parcelamento estilizado

docs/Todo.md

@@ -25,7 +25,7 @@ os Requisitos cobrados serão:
 
       - HACK 6. Newsletter.
       
-      - HACK 7. fazer o pix.
+      - HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
 
 }
 

react/components/Example/Example.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Example = () => {
   return (
-    <div>Example</div>
+    <div>Example um</div>
   )
 }
 

store/blocks/pdp/product.jsonc

@@ -80,6 +80,7 @@
   },
   "product-images": {
     "props": {
+      "testid": "product-images",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
@@ -101,7 +102,6 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
       "product-identifier.product",
       "sku-selector",
       "product-quantity",
@@ -113,6 +113,20 @@
       "share#default"
     ]
   },
+  "product-installments": {
+    "props": {
+      "message": "{installmentsNumber}  de {installmentValue} sem juros"
+    }
+  },
+
+
+  "product-identifier.product": {
+    "props": {
+      "label": "hide", //'default' | 'custom' | 'hide'
+      "customLabel": "teste", // text if label is custom
+      "idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
+    }
+  },
 
   "flex-layout.row#product-name": {
     "props": {
@@ -124,8 +138,7 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true,
-      "name": "Outro Tamanho"
+      "showValueNameForImageVariation": true
     }
   },
 

styles/css/vtex.product-price.css

@@ -90,3 +90,21 @@
   text-align: center;
   margin-bottom: 16px;
 }
+
+.savings, .listPriceValue {
+  display: none;
+}
+
+.installments {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments .installmentsNumber, .installments .installmentValue {
+  font-weight: 700;
+}
+.installments .installmentsNumber::after {
+  content: "x";
+}

styles/css/vtex.store-components.css

@@ -66,6 +66,7 @@
   border-radius: 24px;
 }
 .skuSelectorContainer .diagonalCross {
+  border: 1px solid #D5D5D5;
   border-radius: 24px;
 }
 

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

@@ -115,3 +115,4 @@
   }
 }
 
+

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

@@ -0,0 +1,19 @@
+.savings,.listPriceValue{
+  display: none;
+}
+.installments{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  // font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  .installmentsNumber,.installmentValue{
+    font-weight: 700;
+  }
+  .installmentsNumber{
+      &::after{
+        content: "x";
+      }
+  }
+}

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

@@ -70,6 +70,7 @@
       }
 
     .diagonalCross{
+      border: 1px solid #D5D5D5;
       border-radius: 24px;
     }
 }