diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..f3dbc7f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules/
+coverage/
+*.snap.ts
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..9713dfd
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,7 @@
+{
+ "extends": "vtex",
+ "root": true,
+ "env": {
+ "node": true
+ }
+}
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..320bc0c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+"@vtex/prettier-config"
\ No newline at end of file
diff --git a/assets/pixrallenson.svg b/assets/pixrallenson.svg
new file mode 100644
index 0000000..1b5b16d
--- /dev/null
+++ b/assets/pixrallenson.svg
@@ -0,0 +1,38 @@
+
diff --git a/package.json b/package.json
index 9059458..c677787 100644
--- a/package.json
+++ b/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 ",
+ "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 ",
"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"
-}
+}
\ No newline at end of file
diff --git a/react/Pix.tsx b/react/Pix.tsx
new file mode 100644
index 0000000..ea0537f
--- /dev/null
+++ b/react/Pix.tsx
@@ -0,0 +1,3 @@
+import Pix from "./components/ProductContext/Pix";
+
+export default Pix;
diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx
index 8b5fb17..7b05f06 100644
--- a/react/components/Example/Example.tsx
+++ b/react/components/Example/Example.tsx
@@ -1,7 +1,6 @@
import React from 'react'
const Example = () => {
- console.log("olá mundo")
return (
Example um
)
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index acc6381..da001bc 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,5 +1,43 @@
/* [class*=html--pdp-breadcrumb]{
} */
+.html--pdp-pixPrice{
+ width: 100%;
+ max-width: 28.972%;
+ height: 40px;
+ margin-top: 8px;
+ margin-bottom: 16px;
+}
+.html--pdp-pixPrice div{
+ display: flex;
+ gap: 26px;
+ align-items: center;
+}
+.html--pdp-pixPrice div img{
+ width: 66px;
+ height: 24px;
+}
+.html--pdp-pixPrice div span[datatype='span_wrapper']{
+ display: flex;
+ flex-direction: column;
+}
+.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+ white-space: nowrap;
+}
+.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 18px;
+ color: #929292;
+ white-space: nowrap;
+}
.html--pdp-productMain{
padding-right: 2.778%;
padding-left: 2.778%;
@@ -24,6 +62,7 @@
background: black;
height: 49px;
max-width: 77.354%;
+ border: 1px solid black;
}
.html--pdp-section_descriptions{
display: flex;
diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx
new file mode 100644
index 0000000..4a09b0d
--- /dev/null
+++ b/react/components/ProductContext/Pix.tsx
@@ -0,0 +1,29 @@
+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 (
+
+
+
+
+ R$ {formattedNumber}
+
+ {desconto} % de desconto
+
+
+ )
+}
+
+export default Pix
diff --git a/react/components/descriptions/Sections.tsx b/react/components/descriptions/Sections.tsx
deleted file mode 100644
index df6f731..0000000
--- a/react/components/descriptions/Sections.tsx
+++ /dev/null
@@ -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 (
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
- )
-}
-
-export default Sections
diff --git a/react/departaments.tsx b/react/departaments.tsx
deleted file mode 100644
index f740ed4..0000000
--- a/react/departaments.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Section from "./components/descriptions/Sections";
-
-export default Section;
diff --git a/react/package.json b/react/package.json
index aa90575..38e7654 100644
--- a/react/package.json
+++ b/react/package.json
@@ -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"
}
}
diff --git a/react/tsconfig.json b/react/tsconfig.json
index a26a540..9ac901b 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -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"
+ ]
}
\ No newline at end of file
diff --git a/react/yarn.lock b/react/yarn.lock
index d4b6c43..50dfe93 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -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"
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 7cd91e4..d2df9f1 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -8,6 +8,12 @@
"html#carousel"
]
},
+ "html#Pix":{
+ "props": {
+ "blockClass": "pdp-pixPrice"
+ },
+ "children": ["Pix"]
+ },
"tab-layout#pdp": {
"children": [
"tab-list#pdp",
@@ -202,14 +208,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 +356,7 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
+ "html#Pix",
"sku-selector",
"product-assembly-options",
"product-gifts",
diff --git a/store/interfaces.json b/store/interfaces.json
index a3fbe3f..a4662c7 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -2,8 +2,8 @@
"example-component": {
"component": "Example"
},
- "departaments": {
- "component": "departaments"
+ "Pix": {
+ "component": "Pix"
},
"html": {
diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss
index 8a33c87..b20f1f7 100644
--- a/styles/sass/pages/product/vtex.stack-layout.scss
+++ b/styles/sass/pages/product/vtex.stack-layout.scss
@@ -1,4 +1,3 @@
.stackItem{
display: block;
}
-