feat(pix): adiciona logica pix)

This commit is contained in:
carloswinter 2023-01-25 17:47:56 -03:00
parent d7e6d87c0d
commit 990b517aeb
12 changed files with 107 additions and 102 deletions

3
react/Pix.tsx Normal file
View File

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

View File

@ -0,0 +1,14 @@
import React from "react";
import { useProduct } from "vtex.product-context";
// import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
console.log(product);
return <span>Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>;
// return <button className={styles.PixButton}>Pix</button>;
};
export default Pix;

View File

@ -0,0 +1,5 @@
.PixButton {
width: 40px;
height: 40px;
background: black;
}

7
react/index.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}

View File

@ -78,7 +78,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "50%",
"rowGap": 0
}
},
@ -108,6 +108,7 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"html#pix-component",
"product-separator",
"product-identifier.product",
"sku-selector",
@ -120,6 +121,12 @@
"share#default"
]
},
"html#pix-component": {
"props": {
"testId": "pix-price"
},
"children": ["pix-component"]
},
"flex-layout.row#product-name": {
"props": {

View File

@ -2,6 +2,9 @@
"example-component": {
"component": "Example"
},
"pix-component": {
"component": "Pix"
},
"html": {
"component": "html",
"composition": "children"

View File

@ -1,98 +1,9 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */

View File

@ -0,0 +1,16 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorContainer {
width: max-content;
}
.quantitySelectorContainer .quantitySelectorStepper,
.quantitySelectorContainer .quantitySelectorTitle {
width: max-content;
}

View File

@ -9,4 +9,18 @@
/* Grid breakpoints */
.newsletter {
background: red;
}
.productImageTag {
width: 664px !important;
height: 664px !important;
max-height: none !important;
}
.productImagesThumb,
.carouselThumbBorder,
.figure,
.thumbImg {
width: 90px !important;
height: 90px !important;
}

View File

@ -0,0 +1,4 @@
// .flexRow {
// width: auto;
// padding: 0 40px;
// }

View File

@ -0,0 +1,8 @@
.quantitySelectorContainer {
width: max-content;
.quantitySelectorStepper,
.quantitySelectorTitle {
width: max-content;
}
}

View File

@ -1,3 +1,16 @@
.newsletter{
background: red;
}
.newsletter {
background: red;
}
.productImageTag {
width: 664px !important;
height: 664px !important;
max-height: none !important;
}
.productImagesThumb,
.carouselThumbBorder,
.figure,
.thumbImg {
width: 90px !important;
height: 90px !important;
}