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"
|
34
package.json
34
package.json
@ -1,17 +1,27 @@
|
|||||||
{
|
{
|
||||||
|
"name": "challenge-vtex-io-Gustavo-Rallenson",
|
||||||
|
"private": true,
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"main": "gulpfile.js",
|
|
||||||
"directories": {
|
|
||||||
"doc": "docs"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
|
||||||
"lint": "eslint ./ --fix",
|
"lint": "eslint ./ --fix",
|
||||||
|
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
|
||||||
|
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
||||||
"scss": "gulp storefront"
|
"scss": "gulp storefront"
|
||||||
},
|
},
|
||||||
"repository": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git",
|
"husky": {
|
||||||
"keywords": [],
|
"hooks": {
|
||||||
"author": "Rallenson <Rallenson900@gmail.com>",
|
"pre-commit": "lint-staged"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{ts,js,tsx,jsx}": [
|
||||||
|
"eslint --fix",
|
||||||
|
"prettier --write"
|
||||||
|
],
|
||||||
|
"*.{json,graphql,gql}": [
|
||||||
|
"prettier --write"
|
||||||
|
]
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||||
"@typescript-eslint/parser": "^4.18.0",
|
"@typescript-eslint/parser": "^4.18.0",
|
||||||
@ -34,12 +44,18 @@
|
|||||||
"sass": "^1.37.5",
|
"sass": "^1.37.5",
|
||||||
"typescript": "3.8.3"
|
"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": {
|
"dependencies": {
|
||||||
"husky": "^5.2.0",
|
"husky": "^5.2.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"vtex": "^3.0.0"
|
"vtex": "^3.0.0"
|
||||||
},
|
},
|
||||||
"name": "challenge-vtex-io-Gustavo-Rallenson",
|
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Desafio-VtexIO"
|
"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'
|
import React from 'react'
|
||||||
|
|
||||||
const Example = () => {
|
const Example = () => {
|
||||||
console.log("olá mundo")
|
|
||||||
return (
|
return (
|
||||||
<div>Example um</div>
|
<div>Example um</div>
|
||||||
)
|
)
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
background: black;
|
background: black;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
max-width: 77.354%;
|
max-width: 77.354%;
|
||||||
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
.html--pdp-section_descriptions{
|
.html--pdp-section_descriptions{
|
||||||
display: flex;
|
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",
|
"@types/react": "^16.9.31",
|
||||||
"@vtex/tsconfig": "^0.4.4",
|
"@vtex/tsconfig": "^0.4.4",
|
||||||
"graphql": "^14.6.0",
|
"graphql": "^14.6.0",
|
||||||
"typescript": "3.9.7",
|
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,10 +2,16 @@
|
|||||||
"extends": "@vtex/tsconfig",
|
"extends": "@vtex/tsconfig",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"noEmitOnError": false,
|
"noEmitOnError": false,
|
||||||
"lib": ["dom"],
|
"lib": [
|
||||||
|
"dom"
|
||||||
|
],
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"target": "es2017"
|
"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"
|
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==
|
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:
|
yaml@^1.10.0:
|
||||||
version "1.10.2"
|
version "1.10.2"
|
||||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
||||||
|
@ -8,6 +8,9 @@
|
|||||||
"html#carousel"
|
"html#carousel"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"html#Pix":{
|
||||||
|
"children": ["Pix"]
|
||||||
|
},
|
||||||
"tab-layout#pdp": {
|
"tab-layout#pdp": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-list#pdp",
|
"tab-list#pdp",
|
||||||
@ -202,14 +205,7 @@
|
|||||||
"children": ["breadcrumb"]
|
"children": ["breadcrumb"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"html#Sections": {
|
|
||||||
"props": {
|
|
||||||
"tag": "nav",
|
|
||||||
"testId": "departaments",
|
|
||||||
"blockClass": "pdp-departamens"
|
|
||||||
},
|
|
||||||
"children": ["departaments"]
|
|
||||||
},
|
|
||||||
|
|
||||||
"flex-layout.row#specifications-title": {
|
"flex-layout.row#specifications-title": {
|
||||||
"children": ["rich-text#specifications"]
|
"children": ["rich-text#specifications"]
|
||||||
@ -357,6 +353,7 @@
|
|||||||
"flex-layout.row#list-price-savings",
|
"flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
|
"html#Pix",
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
"product-assembly-options",
|
"product-assembly-options",
|
||||||
"product-gifts",
|
"product-gifts",
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
"example-component": {
|
"example-component": {
|
||||||
"component": "Example"
|
"component": "Example"
|
||||||
},
|
},
|
||||||
"departaments": {
|
"Pix": {
|
||||||
"component": "departaments"
|
"component": "Pix"
|
||||||
},
|
},
|
||||||
|
|
||||||
"html": {
|
"html": {
|
||||||
|
Loading…
Reference in New Issue
Block a user