diff --git a/react/PaymentPix.tsx b/react/PaymentPix.tsx new file mode 100644 index 0000000..1eb71bb --- /dev/null +++ b/react/PaymentPix.tsx @@ -0,0 +1,3 @@ +import { PaymentPix } from "./components/PaymentPix/PaymentPix"; + +export default PaymentPix; diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx deleted file mode 100644 index 9a2edfb..0000000 --- a/react/ProductDescription.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ProductDescription } from "./components/ProductDescription/ProductDescription"; - -export default ProductDescription; diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx new file mode 100644 index 0000000..60bf463 --- /dev/null +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const PaymentPix = () => { + const product = useProduct(); + const pricePix = ( + (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 + ).toFixed(2); + { + /*const imagePix =*/ + } + + const convertPrice = pricePix.toString().replace(".", ","); + + return ( +
+

R$ {convertPrice}

+

10% de desconto

+
+ ); +}; + +export { PaymentPix }; diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx deleted file mode 100644 index ca68644..0000000 --- a/react/components/ProductDescription/ProductDescription.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const ProductDescription = () => { - return
Oaswq
; -}; - -export { ProductDescription }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fa56ba1..fc0558e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,7 +2,9 @@ "store.product": { "children": [ "html#breadcrumb", + "condition-layout.product#availability", + "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -117,6 +119,7 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "product-paymentPix-component", "product-separator", "product-identifier.product", "sku-selector", diff --git a/store/interfaces.json b/store/interfaces.json index 714e4e6..1e7bec4 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-payment-component": { - "component": "ProductDescription" + "product-paymentPix-component": { + "component": "PaymentPix" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 9964bda..58f9518 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,9 +13,4 @@ .homeLink::after { content: "Home"; -} - -.link--1 { - display: flex; - order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3533ae1..b00a4d4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 0dd25c0..80c6236 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,7 +6,3 @@ content: "Home"; } } -.link--1 { - display: flex; - order: -1; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 926f0da..4f63d46 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,4 @@ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; } +*/ diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..4c6da1c 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); + $color-black: #292929; $color-white: #fff; @@ -14,18 +16,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;