Merge pull request 'feat(pix-custom): created components and added testId in components for test' (#7) from feature/pix-custom-installments into develop

Reviewed-on: #7

react/Global.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";

react/PixCustomInstallments.ts

@@ -0,0 +1 @@
+export { PixCustomInstallments as default } from "./components/PixCustomInstallments";

react/components/PixCustomInstallments/_ComponentsFunctions.ts

@@ -0,0 +1,13 @@
+export const sanatizeColor = (color: string) => {
+  if (color) {
+    const [first] = color.split(" ");
+
+    if (first.indexOf("c-") === 0) {
+      return first;
+    }
+
+    return "c-on-base";
+  }
+
+  return "c-on-base";
+};

react/components/PixCustomInstallments/_PixCustomInstallments.module.css

@@ -0,0 +1,27 @@
+.pix {
+  gap: 26px;
+  align-items: center;
+  max-width: 197px;
+}
+
+.pix img {
+  height: 26px;
+  width: 66px;
+}
+
+.pix p {
+  margin: 0;
+  flex-grow: 2;
+}
+
+.pix .pix__priceValue {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 24.51px;
+  color: #00000094;
+}
+
+.pix .pix__label {
+  font-size: 13px;
+  line-height: 17.7px;
+}

react/components/PixCustomInstallments/_PixCustomInstallments.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+
+import styles from "./_PixCustomInstallments.module.css";
+
+import { useProduct } from "vtex.product-context";
+import { sanatizeColor } from "./_ComponentsFunctions";
+
+interface IPixCustomInstallmentsProps {
+  label: string;
+  percent: number;
+}
+
+export function PixCustomInstallments({
+  label = "de desconto",
+  percent = 10,
+}: IPixCustomInstallmentsProps) {
+  const data = useProduct();
+
+  const calculationPercent = (
+    percent: number | undefined,
+    value: number | undefined
+  ) => {
+    if (value && percent) {
+      const newPercent = percent / 100;
+
+      const discount = value * newPercent;
+
+      const newValue = value - discount;
+
+      return newValue.toFixed(2).toString().replace(".", ",");
+    }
+
+    return "";
+  };
+
+  console.log(data);
+
+  return (
+    <div className={`${styles["pix"]} flex`}>
+      <img
+        src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
+        alt="Promoção de pagamento com o PIX"
+      />
+      <p>
+        <span className={styles["pix__priceValue"]}>
+          {`R$ ${calculationPercent(
+            percent,
+            data?.product?.priceRange.sellingPrice.highPrice
+          )}`}
+        </span>
+        <div
+          className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
+        >
+          {`${percent}% ${label}`}
+        </div>
+      </p>
+    </div>
+  );
+}
+
+PixCustomInstallments.schema = {
+  title: "Promoção de pagamento com o PIX",
+  type: "object",
+  properties: {
+    label: {
+      type: "string",
+    },
+    percent: {
+      type: "number",
+    },
+  },
+};

react/components/PixCustomInstallments/index.ts

@@ -0,0 +1 @@
+export { PixCustomInstallments } from "./_PixCustomInstallments";

store/blocks/pdp/product-shelf.jsonc

@@ -46,14 +46,36 @@
     }
   },
 
-  "product-summary.shelf#pdp-shelf": {
+  "html#product-summary": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
     "children": [
       "product-summary-image#pdp-shelf",
       "product-summary-name",
-      "product-summary-price#pdp-shelf"
+      "product-list-price#product-summary",
+      "product-selling-price#product-summary"
     ]
   },
 
+  "product-list-price#product-summary": {
+    "props": {
+      "blockClass": "productSummary",
+      "markers": ["highlight"],
+      "message": "de {listPriceValue} por"
+    }
+  },
+
+  "product-selling-price#product-summary": {
+    "props": {
+      "blockClass": "productSummary"
+    }
+  },
+
+  "product-summary.shelf#pdp-shelf": {
+    "children": ["html#product-summary"]
+  },
+
   "product-summary-image#pdp-shelf": {
     "props": {
       "showBadge": false,
@@ -76,13 +98,5 @@
         "phone": "124.8px"
       }
     }
-  },
-
-  "product-summary-price#pdp-shelf": {
-    "props": {
-      "showInstallments": false,
-      "labelListPrice": "de",
-      "labelSellingPrice": "por"
-    }
   }
 }

store/blocks/pdp/product-specifications-table.jsonc

@@ -4,6 +4,13 @@
       "blockClass": "productSpecifications"
     },
 
+    "children": ["html#product-description"]
+  },
+
+  "html#product-description": {
+    "props": {
+      "testId": "product-description"
+    },
     "children": ["tab-layout#product-specification"]
   },
 

store/blocks/pdp/product.jsonc

@@ -131,16 +131,52 @@
     "children": [
       "flex-layout.row#product-name",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "html#product-installments",
+      "flex-layout.row#pix-custom-installments",
       "html#sku-selector",
-
       "product-gifts",
       "flex-layout.row#pdp-buy-actions",
       "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
 
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
+  "flex-layout.row#pix-custom-installments": {
+    "props": {
+      "marginBottom": 5
+    },
+    "children": ["html#pix-custom-installments"]
+  },
+
+  "html#pix-custom-installments": {
+    "props": {
+      "testId": "pix-price"
+    },
+
+    "children": ["pix-custom-installments"]
+  },
+
+  "pix-custom-installments": {
+    "props": {
+      "text": "de desconto"
+    }
+  },
+
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+
+    "children": ["product-installments"]
+  },
+
   "product-installments": {
     "props": {
       "markers": ["discount"],
@@ -163,10 +199,22 @@
       "rowGap": 3
     },
 
-    "children": [
-      "vtex.store-components:product-name",
-      "product-identifier.product#pdp-identifier"
-    ]
+    "children": ["html#product-name", "html#pdp-identifier"]
+  },
+
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+
+    "children": ["vtex.store-components:product-name"]
+  },
+
+  "html#pdp-identifier": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product#pdp-identifier"]
   },
 
   "product-identifier.product#pdp-identifier": {

store/blocks/product-price.jsonc

@@ -1,4 +1,12 @@
 {
+  "html#product-selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+
+    "children": ["product-selling-price"]
+  },
+
   "flex-layout.row#selling-price": {
     "props": {
       "colGap": 2,
@@ -6,7 +14,7 @@
       "preventHorizontalStretch": true,
       "marginBottom": 4
     },
-    "children": ["product-selling-price"]
+    "children": ["html#product-selling-price"]
   },
 
   "flex-layout.row#list-price-savings": {

store/interfaces.json

@@ -2,5 +2,12 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+
+  "pix-custom-installments": {
+    "component": "PixCustomInstallments",
+    "props": {
+      "text": "10 % de desconto"
+    }
   }
 }

styles/css/vtex.product-price.css

@@ -10,7 +10,14 @@
 .listPrice {
   color: #727273;
   margin-bottom: 0.25rem;
-  font-size: 1rem;
+  font-size: 0.75rem;
+  line-height: 16.34px;
+}
+@media screen and (min-width: 1025px) {
+  .listPrice {
+    font-size: 0.875rem;
+    line-height: 19.07px;
+  }
 }
 
 .sellingPrice {
@@ -19,10 +26,16 @@
 }
 
 .sellingPriceValue {
-  font-size: 1.5625rem;
-  line-height: 38px;
+  font-size: 1.125rem;
+  line-height: 24.51px;
   font-weight: 700;
 }
+@media screen and (min-width: 1025px) {
+  .sellingPriceValue {
+    font-size: 1.5rem;
+    line-height: 32.68px;
+  }
+}
 
 .installments {
   display: inline-block;
@@ -41,6 +54,10 @@
   color: #2e2e2e;
 }
 
+.sellingPriceValue--productSummary {
+  display: block;
+}
+
 .savings--summary {
   background: #8bc34a;
   border-radius: 1000px;
@@ -68,6 +85,12 @@
   font-size: 0.875rem;
 }
 
+.listPrice--productSummary {
+  display: block;
+  text-decoration: line-through;
+  margin-bottom: 8px;
+}
+
 .installments--summary {
   margin-bottom: 2rem;
   font-size: 0.875rem;

styles/css/vtex.product-summary.css

@@ -32,11 +32,19 @@
 
 .nameContainer {
   padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-bottom: 8px;
 }
 
 .brandName {
-  color: #2e2e2e;
+  color: #000000;
+  font-size: 0.875rem;
+  line-height: 19.07px;
+}
+@media screen and (min-width: 1025px) {
+  .brandName {
+    font-size: 1.125rem;
+    line-height: 24.51px;
+  }
 }
 
 .container {
@@ -58,12 +66,12 @@
 .sellingPriceContainer .currencyContainer {
   font-weight: 700;
   color: #000;
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: normal;
 }
 @media screen and (min-width: 1025px) {
   .sellingPriceContainer .currencyContainer {
-    font-size: 24px;
+    font-size: 1.5rem;
     line-height: normal;
   }
 }

styles/css/vtex.store-components.css

@@ -297,6 +297,7 @@
 .productDescriptionTitle {
   font-size: 20px;
   line-height: 32px;
+  color: #575757;
 }
 @media screen and (min-width: 1025px) {
   .productDescriptionTitle {

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

@@ -1,7 +1,13 @@
 .listPrice {
   color: #727273;
   margin-bottom: 0.25rem;
-  font-size: 1rem;
+  font-size: 0.75rem;
+  line-height: 16.34px;
+
+  @media screen and (min-width: 1025px) {
+    font-size: 0.875rem;
+    line-height: 19.07px;
+  }
 }
 
 .sellingPrice {
@@ -10,9 +16,14 @@
 }
 
 .sellingPriceValue {
-  font-size: 1.5625rem;
-  line-height: 38px;
+  font-size: 1.125rem;
+  line-height: 24.51px;
   font-weight: 700;
+
+  @media screen and (min-width: 1025px) {
+    font-size: 1.5rem;
+    line-height: 32.68px;
+  }
 }
 
 .installments {
@@ -32,6 +43,10 @@
   color: #2e2e2e;
 }
 
+.sellingPriceValue--productSummary {
+  display: block;
+}
+
 .savings--summary {
   background: #8bc34a;
   border-radius: 1000px;
@@ -60,6 +75,12 @@
   font-size: 0.875rem;
 }
 
+.listPrice--productSummary {
+  display: block;
+  text-decoration: line-through;
+  margin-bottom: 8px;
+}
+
 .installments--summary {
   margin-bottom: 2rem;
   font-size: 0.875rem;

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

@@ -24,11 +24,19 @@
 
 .nameContainer {
   padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-bottom: 8px;
 }
 
 .brandName {
-  color: #2e2e2e;
+  color: #000000;
+
+  font-size: 0.875rem;
+  line-height: 19.07px;
+
+  @media screen and (min-width: 1025px) {
+    font-size: 1.125rem;
+    line-height: 24.51px;
+  }
 }
 
 .container {
@@ -51,11 +59,11 @@
   .currencyContainer {
     font-weight: 700;
     color: #000;
-    font-size: 18px;
+    font-size: 1.125rem;
     line-height: normal;
 
     @media screen and (min-width: 1025px) {
-      font-size: 24px;
+      font-size: 1.5rem;
       line-height: normal;
     }
   }

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

@@ -332,6 +332,7 @@
 .productDescriptionTitle {
   font-size: 20px;
   line-height: 32px;
+  color: #575757;
 
   @media screen and (min-width: 1025px) {
     font-size: 24px;