From 068ab52a1ce2e36db08ec2d2893014661d9f5d25 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Sun, 22 Jan 2023 22:53:11 -0300 Subject: [PATCH] feat: Component Desconto no PIX finalizado --- package.json | 16 ++++---- react/DescontPix.tsx | 3 ++ .../descont-pix/assets/logo-pix.png | Bin 0 -> 1411 bytes .../descont-pix/assets/logo-pix.svg | 38 ++++++++++++++++++ react/components/descont-pix/index.tsx | 21 ++++++++++ react/components/descont-pix/styles.css | 30 ++++++++++++++ react/components/product-reference/styles.css | 1 + react/types/index.d.ts | 2 + store/blocks/pdp/product.jsonc | 2 +- store/interfaces.json | 3 ++ .../configs/{font-face.css => font-faces.css} | 4 +- styles/configs/style.json | 24 +++++------ styles/css/vtex.flex-layout.css | 4 ++ .../sass/pages/product/vtex.flex-layout.scss | 4 ++ 14 files changed, 129 insertions(+), 23 deletions(-) create mode 100644 react/DescontPix.tsx create mode 100644 react/components/descont-pix/assets/logo-pix.png create mode 100644 react/components/descont-pix/assets/logo-pix.svg create mode 100644 react/components/descont-pix/index.tsx create mode 100644 react/components/descont-pix/styles.css rename styles/configs/{font-face.css => font-faces.css} (100%) 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 0000000000000000000000000000000000000000..fcfe58ee42aa30e82f0b2a2e606b2e8809da20c2 GIT binary patch literal 1411 zcmV-}1$_F6P)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPKPJ-Dt$odH^`vr_D@gXNeB{}4TbPLD?=?N^JKmq|WC&VdLNu`8OsY+6X zbWhpK6R>&$i*js0yE~Jfl~xhbY9$d>fs?;#i)FTFH1o|&ch4YvL`v2UOA2{ROqGf;yk(rWx_b&DL~wo~?3-#Ks# zdi?v(1)jb7pHIK7!weM*q6^`KUkB;W1V*t^u?EZXYirI(yURo?pU<=={WeV>MuJHG z`lCg2#v2%h5b8!Sip4`yo4ZIOk|l&3>NpXa+^I#kEw}Rd4wUV3r4W2Wup~+QhxPSR z*cR!Rx&HdXgKAhWPCL8%IVrI>wnz|N2x=u*5U;6Wl=olOJe2vUneW#wcN9_9v)QcO zU#_4CFHwq`eKotfz@pdY_G4gd?{OO-j`MwO4>`*zASea4s?G$qJPQZ8Ngyaaf4*Ll zpluG8qXcJe!C#E3quTY_^BH{}4~xa&ZKo7~9DtxS1VYX3>o324z-uJ~hz`U_!j{nJ z(WEOvqO>M~(6bl#s$8xt!4y&}g<)rO1B+_w^nX(mA!rzaQV)ch)yIGQa>kG3=PiHw zTo9&s4x$~9fDFg;Gx9}P=WOiCi0}z<@^oQKInm0zreI}|%r=vguR)vUwp&$@)A7vH(ai*PZGUNDuQ}x5x-mO&QASh9+Pf##4cyW9);$S=~wugg^+GB=3F>?tsdB2QLf~rcY4s-zHH~ zTO&QTMFoSzCdb_;aS(b!ScO?gXeNiysgoon1%W^`v)Q$3xJ~AatKuko8tDuNC85dI z%}MNW(l*CvPRdnJM|;|O{Sd-31;Zt|Ro?3)XM-XM;uVZjH$w2Hkde-FKx}pd|57Rs z5ac(f3Aaj75JGiU22`V9=u*>iDC86Fy%pK=HRp)H{-Pj!Oc4P)SUI%k*zV}f({D;} zL#chN8|_U_dXQ7;!Zh_%y3G)rC3dfU!{X%VxHm9~C7ug+_TK^=*X&}mtL9n}Gq-tqtoa0jJ_ zFFXK;|0LBd5F|{K46#a*Y9nhR6bVID2tN()-#hk7W+o2uwxkc0m<&Nk-X;^JwrP#@ zq;Hxj_{cSU=;DSQ#Ut z34>x_kEVeT`iQV2hVj8_3o^k2N7pF{-~(#fqI)G8y3Us{yefS^ajfj*{QO&a;Xc@4 zC#nEwzFd}wraDsVpg-eTIpylgnJ#jW=bQ&0Ze+jT-r1?7{e{G_{-MoBdfDQXyQ!gX zA!!arOUd0>;&6XH^71xzWpp4+y%LbX30@MHCh*{bcZOgX!X)w>@3VV#7e#{&S{|4C zKA#a3ETWeC&P7#L-alAYUSH!&8zG=>s5XRu>RoYtZbK5BvjbO=r`hQ$|K?wpNf4sp zwfzQo!bXX<=Zlu>%2QWj12nS7U*7hj2|Nr6Bs4fWq`S`b|0f1wst5j~`WydE@+nTa R7T*8>002ovPDHLkV1kTrg}wj) literal 0 HcmV?d00001 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; +}