forked from M3-Academy/challenge-vtex-io
feat(pix):adicionando pix com desconto
This commit is contained in:
parent
5094293019
commit
79d494cf4d
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
coverage/
|
||||
*.snap.ts
|
7
.eslintrc
Normal file
7
.eslintrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "vtex",
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
}
|
||||
}
|
1
.prettierrc
Normal file
1
.prettierrc
Normal file
@ -0,0 +1 @@
|
||||
"@vtex/prettier-config"
|
36
package.json
36
package.json
@ -1,17 +1,27 @@
|
||||
{
|
||||
"name": "challenge-vtex-io-Gustavo-Rallenson",
|
||||
"private": true,
|
||||
"license": "UNLICENSED",
|
||||
"main": "gulpfile.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
||||
"lint": "eslint ./ --fix",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
|
||||
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
||||
"scss": "gulp storefront"
|
||||
},
|
||||
"repository": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git",
|
||||
"keywords": [],
|
||||
"author": "Rallenson <Rallenson900@gmail.com>",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,js,tsx,jsx}": [
|
||||
"eslint --fix",
|
||||
"prettier --write"
|
||||
],
|
||||
"*.{json,graphql,gql}": [
|
||||
"prettier --write"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
@ -34,12 +44,18 @@
|
||||
"sass": "^1.37.5",
|
||||
"typescript": "3.8.3"
|
||||
},
|
||||
"main": "gulpfile.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"repository": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git",
|
||||
"keywords": [],
|
||||
"author": "Rallenson <Rallenson900@gmail.com>",
|
||||
"dependencies": {
|
||||
"husky": "^5.2.0",
|
||||
"react": "^17.0.2",
|
||||
"vtex": "^3.0.0"
|
||||
},
|
||||
"name": "challenge-vtex-io-Gustavo-Rallenson",
|
||||
"version": "1.0.0",
|
||||
"description": "Desafio-VtexIO"
|
||||
}
|
||||
}
|
3
react/Pix.tsx
Normal file
3
react/Pix.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import Pix from "./components/ProductContext/Pix";
|
||||
|
||||
export default Pix;
|
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
const Example = () => {
|
||||
console.log("olá mundo")
|
||||
return (
|
||||
<div>Example um</div>
|
||||
)
|
||||
|
@ -24,6 +24,7 @@
|
||||
background: black;
|
||||
height: 49px;
|
||||
max-width: 77.354%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.html--pdp-section_descriptions{
|
||||
display: flex;
|
||||
|
26
react/components/ProductContext/Pix.tsx
Normal file
26
react/components/ProductContext/Pix.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { useProduct } from 'vtex.product-context';
|
||||
|
||||
const Pix = () => {
|
||||
const { product } = useProduct()
|
||||
|
||||
let pixprice = product?.priceRange.sellingPrice.lowPrice
|
||||
let desconto = 10
|
||||
let finalprice = pixprice - (pixprice/desconto)
|
||||
let RoundedNumber = Number(Math.round(finalprice * 100) / 100);
|
||||
const formattedNumber = RoundedNumber.toLocaleString('pt-BR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
console.log('productContex',product)
|
||||
return (
|
||||
<span>
|
||||
<span>
|
||||
R$ {formattedNumber}
|
||||
</span>
|
||||
<span> {desconto}% de desconto</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default Pix
|
@ -1,53 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const Sections = () => {
|
||||
|
||||
const [activeSection, setActiveSection] = useState("descrição1");
|
||||
const handleClick = (section:string) => {
|
||||
setActiveSection(section);
|
||||
}
|
||||
console.log(activeSection)
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<button onClick={() => handleClick("descrição1")}
|
||||
className={activeSection === "descrição1" ? "open" : "close"}
|
||||
>
|
||||
Descrição
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => handleClick("descrição2")}
|
||||
className={activeSection === "descrição2" ? "open" : "close"}
|
||||
>
|
||||
Descrição
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => handleClick("descrição3")}
|
||||
className={activeSection === "descrição3" ? "open" : "close"}
|
||||
>
|
||||
Descrição
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => handleClick("descrição4")}
|
||||
className={activeSection === "descrição4" ? "open" : "close"}
|
||||
>
|
||||
Descrição
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => handleClick("descrição5")}
|
||||
className={activeSection === "descrição5" ? "open" : "close"}
|
||||
>
|
||||
Descrição
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sections
|
@ -1,3 +0,0 @@
|
||||
import Section from "./components/descriptions/Sections";
|
||||
|
||||
export default Section;
|
@ -23,12 +23,6 @@
|
||||
"@types/react": "^16.9.31",
|
||||
"@vtex/tsconfig": "^0.4.4",
|
||||
"graphql": "^14.6.0",
|
||||
"typescript": "3.9.7",
|
||||
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
|
||||
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
|
||||
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
|
||||
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
|
||||
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
|
||||
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
|
||||
"typescript": "3.9.7"
|
||||
}
|
||||
}
|
||||
|
@ -2,10 +2,16 @@
|
||||
"extends": "@vtex/tsconfig",
|
||||
"compilerOptions": {
|
||||
"noEmitOnError": false,
|
||||
"lib": ["dom"],
|
||||
"lib": [
|
||||
"dom"
|
||||
],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"target": "es2017"
|
||||
},
|
||||
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
|
||||
"include": [
|
||||
"./typings/*.d.ts",
|
||||
"./**/*.tsx",
|
||||
"./**/*.ts"
|
||||
]
|
||||
}
|
@ -774,30 +774,6 @@ use-isomorphic-layout-effect@^1.1.2:
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
|
||||
version "1.0.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
|
||||
|
||||
"vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
|
||||
version "0.10.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
|
||||
|
||||
"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime":
|
||||
version "8.130.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98"
|
||||
|
||||
"vtex.responsive-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout":
|
||||
version "0.1.2"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout#e33f23a78afb3ffb8ff8aedc77b1ca6728583e72"
|
||||
|
||||
"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text":
|
||||
version "0.14.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text#fd31249116da1e0f1caeaa00a44035afa9c91703"
|
||||
|
||||
"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide":
|
||||
version "9.145.0"
|
||||
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide#41dfb32af8756eb5528dbd452e47003a8f67fe8c"
|
||||
|
||||
yaml@^1.10.0:
|
||||
version "1.10.2"
|
||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
||||
|
@ -8,6 +8,9 @@
|
||||
"html#carousel"
|
||||
]
|
||||
},
|
||||
"html#Pix":{
|
||||
"children": ["Pix"]
|
||||
},
|
||||
"tab-layout#pdp": {
|
||||
"children": [
|
||||
"tab-list#pdp",
|
||||
@ -202,14 +205,7 @@
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
|
||||
"html#Sections": {
|
||||
"props": {
|
||||
"tag": "nav",
|
||||
"testId": "departaments",
|
||||
"blockClass": "pdp-departamens"
|
||||
},
|
||||
"children": ["departaments"]
|
||||
},
|
||||
|
||||
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
@ -357,6 +353,7 @@
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"html#Pix",
|
||||
"sku-selector",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
|
@ -2,8 +2,8 @@
|
||||
"example-component": {
|
||||
"component": "Example"
|
||||
},
|
||||
"departaments": {
|
||||
"component": "departaments"
|
||||
"Pix": {
|
||||
"component": "Pix"
|
||||
},
|
||||
|
||||
"html": {
|
||||
|
Loading…
Reference in New Issue
Block a user