diff --git a/package.json b/package.json index 4b65062..64de330 100644 --- a/package.json +++ b/package.json @@ -16,25 +16,25 @@ "keywords": [], "author": "", "devDependencies": { + "@typescript-eslint/eslint-plugin": "^4.18.0", + "@typescript-eslint/parser": "^4.18.0", + "@vtex/prettier-config": "0.1.4", + "concurrently": "^6.0.0", "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", + "eslint-config-vtex": "12.3.2", + "eslint-config-vtex-react": "^6.2.1", "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-react": "^7.23.1", "glob": "^7.1.6", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "gulp-sass": "^5.0.0", "gulp-wait": "0.0.2", - "sass": "^1.37.5", - "concurrently": "^6.0.0", - "@typescript-eslint/eslint-plugin": "^4.18.0", - "@typescript-eslint/parser": "^4.18.0", - "@vtex/prettier-config": "0.1.4", - "eslint-config-vtex": "12.3.2", - "eslint-config-vtex-react": "^6.2.1", - "eslint-plugin-react": "^7.23.1", "husky": "^5.2.0", "lint-staged": "10.1.1", "prettier": "2.0.2", + "sass": "^1.37.5", "typescript": "3.8.3" }, "dependencies": { diff --git a/react/DescontPix.tsx b/react/DescontPix.tsx new file mode 100644 index 0000000..17fdca6 --- /dev/null +++ b/react/DescontPix.tsx @@ -0,0 +1,3 @@ +import { DescontPix } from "./components/descont-pix"; + +export default DescontPix; diff --git a/react/components/descont-pix/assets/logo-pix.png b/react/components/descont-pix/assets/logo-pix.png new file mode 100644 index 0000000..fcfe58e Binary files /dev/null and b/react/components/descont-pix/assets/logo-pix.png differ diff --git a/react/components/descont-pix/assets/logo-pix.svg b/react/components/descont-pix/assets/logo-pix.svg new file mode 100644 index 0000000..1021608 --- /dev/null +++ b/react/components/descont-pix/assets/logo-pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx new file mode 100644 index 0000000..b08725c --- /dev/null +++ b/react/components/descont-pix/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react' +import { useProduct } from 'vtex.product-context' +import styles from "./styles.css"; +import logopix from "./assets/logo-pix.png"; + +export const DescontPix: FC = () => { + + const productContextValue = useProduct(); + + let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice); + sellingPrice = (sellingPrice - (sellingPrice/10)); + return ( +
+ Desconto no PIX +
+ R$ {sellingPrice.toFixed(2).replace(".", ",")} + 10 % de desconto +
+
+ ); +} diff --git a/react/components/descont-pix/styles.css b/react/components/descont-pix/styles.css new file mode 100644 index 0000000..fd310bc --- /dev/null +++ b/react/components/descont-pix/styles.css @@ -0,0 +1,30 @@ +.containerDescontPix{ + display: flex; + align-items: center; + margin-top: 8px; +} + +.containerDescontPix img { + width: 66px; + height: 24px; + margin-right: 26px; +} + +.containerDescontPixPrice{ + display: flex; + flex-direction: column; +} + +.priceDescontPix{ + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.descontDescontPix{ + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/product-reference/styles.css b/react/components/product-reference/styles.css index 1493c49..19931b9 100644 --- a/react/components/product-reference/styles.css +++ b/react/components/product-reference/styles.css @@ -1,6 +1,7 @@ .containerProductReference{ display: flex; justify-content: right; + margin-bottom: 16px; } .productReference{ diff --git a/react/types/index.d.ts b/react/types/index.d.ts index cbe652d..6db5e60 100644 --- a/react/types/index.d.ts +++ b/react/types/index.d.ts @@ -1 +1,3 @@ declare module "*.css"; +declare module "*.png"; +declare module "*.svg"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 936f99c..6a6c716 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -117,6 +117,7 @@ "product-reference", "flex-layout.row#selling-price", "installments", + "descont-pix", "product-separator", "product-identifier.product", "sku-selector", @@ -129,7 +130,6 @@ "share#default" ] }, - "product-reference": { "props": { "blockClass": "title-product-reference" diff --git a/store/interfaces.json b/store/interfaces.json index cf685ef..d6ae06d 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,6 +8,9 @@ "installments": { "component": "Installments" }, + "descont-pix": { + "component": "DescontPix" + }, "html": { "component": "html", "composition": "children" diff --git a/styles/configs/font-face.css b/styles/configs/font-faces.css similarity index 100% rename from styles/configs/font-face.css rename to styles/configs/font-faces.css index 1feca3e..f66aaa7 100644 --- a/styles/configs/font-face.css +++ b/styles/configs/font-faces.css @@ -1,5 +1,3 @@ - - @font-face { font-family: "Open Sans", sans-serif; src: url('assets/fonts/OpenSans-Light.ttf'); @@ -23,3 +21,5 @@ src: url('assets/fonts/OpenSans-Bold.ttf'); font-weight: 700; } + + diff --git a/styles/configs/style.json b/styles/configs/style.json index 9864c85..f486303 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "Open Sans, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b8a2d20..d48e47d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -24,4 +24,8 @@ } .swiper-wrapper .swiper-slide { width: 100%; +} + +.flexRowContent { + margin: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7e27fca..6e64dba 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -19,3 +19,7 @@ width: 100%; } } + +.flexRowContent{ + margin: 0; +}