feat(pix):adicionando pix com desconto

This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-08 22:24:47 -03:00
parent 5094293019
commit 79d494cf4d
15 changed files with 83 additions and 110 deletions

3
.eslintignore Normal file
View File

@ -0,0 +1,3 @@
node_modules/
coverage/
*.snap.ts

7
.eslintrc Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "vtex",
"root": true,
"env": {
"node": true
}
}

1
.prettierrc Normal file
View File

@ -0,0 +1 @@
"@vtex/prettier-config"

View File

@ -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
View File

@ -0,0 +1,3 @@
import Pix from "./components/ProductContext/Pix";
export default Pix;

View File

@ -1,7 +1,6 @@
import React from 'react'
const Example = () => {
console.log("olá mundo")
return (
<div>Example um</div>
)

View File

@ -24,6 +24,7 @@
background: black;
height: 49px;
max-width: 77.354%;
border: 1px solid black;
}
.html--pdp-section_descriptions{
display: flex;

View 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

View File

@ -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

View File

@ -1,3 +0,0 @@
import Section from "./components/descriptions/Sections";
export default Section;

View File

@ -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"
}
}

View File

@ -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"
]
}

View File

@ -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"

View File

@ -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",

View File

@ -2,8 +2,8 @@
"example-component": {
"component": "Example"
},
"departaments": {
"component": "departaments"
"Pix": {
"component": "Pix"
},
"html": {