SauloKleinNery/challenge-vtex-io-saulo-klein
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:Cria área do pix

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-02 21:37:40 -03:00
parent 525b66a40a
commit d109da7760
24 changed files with 474 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Pix.tsx Normal file
View File

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

87
react/components/Pix/Pix.tsx Normal file
View File

@ -0,0 +1,87 @@
import React, { useEffect, useState } from "react";
import { useProduct } from "vtex.product-context";
import "./style.css";
const Pix = () => {
const productContext = useProduct();
const [pixValue, setPixValue] = useState(0);
const [discountValue, setDiscountValue] = useState("");
const objectPass = [
{
id: productContext?.selectedItem?.itemId,
quantity: 1,
seller: productContext?.selectedItem?.sellers[0].sellerId,
},
];
function getDiscount(discountValue: number, commonValue: number | undefined) {
let discount = 0;
if (commonValue) {
discount = Math.floor(discountValue / commonValue) - 100;
if (discount > 0) return `${discount} % de desconto`;
else return "sem desconto";
}
return null;
}
async function request() {
const response = await fetch("/api/checkout/pub/orderForms/simulation", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
items: objectPass,
country: "BRA",
postalCode: "",
}),
});
const data = await response.json();
const getPix = data.paymentData.installmentOptions.find(
(e: { paymentName: string }) => {
return e.paymentName === "Pix";
}
);
setPixValue(getPix.value);
const discountMessage = getDiscount(
getPix.value,
productContext?.product?.priceRange.sellingPrice.highPrice
);
if (discountMessage) setDiscountValue(discountMessage);
}
useEffect(() => {
request();
}, [productContext?.selectedItem]);
return (
<div className="pix-container">
<img
className="pix-image"
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
alt="Pix Icon"
/>
<div className="price-wrapper">
<span className="price-value">
{(pixValue / 100).toLocaleString("pt-br", {
style: "currency",
currency: "BRL",
})}
</span>
<span className="price-discount">{discountValue}</span>
</div>
</div>
);
};
export default Pix;

30
react/components/Pix/style.css Normal file
View File

@ -0,0 +1,30 @@
[class*="pix-container"] {
display: flex;
align-items: center;
margin: 8px 0 0;
}
[class*="price-wrapper"] {
display: flex;
flex-direction: column;
margin: 0 0 0 26px;
}
[class*="pix-image"] {
width: 66px;
height: 24px;
}
[class*="price-value"] {
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
[class*="price-discount"] {
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}

42
store/blocks/pdp/product.jsonc
View File

@ -100,6 +100,20 @@
"showPaginationDots": false
}
},
"product-installments": {
"props": {
"blockClass": "sellingInfo"
}
},
"flex-layout.row#selling-prices": {
"props": {
"blockClass": "sellingPrice"
},
"children": ["product-selling-price"]
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
@ -109,12 +123,13 @@
"flex-layout.row#product-name",
"product-rating-summary",
//"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"flex-layout.row#selling-prices",
"product-installments",
"product-separator",
"product-identifier.product",
"pix-component",
//"product-separator",
"sku-selector",
"product-quantity",
"product-identifier.product",
//"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
@ -138,12 +153,27 @@
}
},
"product-quantity": {
"props": {
"size": "large",
"showLabel": false
}
},
"add-to-cart-button": {
"props": {
"blockClass": "addToCartButton",
"text": "ADICIONAR À SACOLA"
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "quantityAndBuy"
},
"children": ["add-to-cart-button"]
"children": ["product-quantity", "add-to-cart-button"]
},
"flex-layout.row#product-availability": {

3
store/interfaces.json
View File

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

36
styles/configs/style.json
View File

@ -59,7 +59,7 @@
"background": {
"base": "#ffffff",
"base--inverted": "#03044e",
"action-primary": "#0F3E99",
"action-primary": "#000",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#f2f4f5",
@ -76,7 +76,7 @@
"muted-5": "#f2f4f5"
},
"hover-background": {
"action-primary": "#072c75",
"action-primary": "#292929",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
@ -92,7 +92,7 @@
"muted-5": "#f2f4f5"
},
"active-background": {
"action-primary": "#0c389f",
"action-primary": "#000",
"action-secondary": "#d2defc",
"emphasis": "#dd1659",
"success": "#8bc34a",
@ -108,7 +108,7 @@
"muted-5": "#f2f4f5"
},
"text": {
"action-primary": "#0F3E99",
"action-primary": "#000",
"action-secondary": "#eef3f7",
"link": "#0F3E99",
"emphasis": "#f71963",
@ -151,7 +151,7 @@
"warning--faded": "#fff6e0"
},
"border": {
"action-primary": "#0F3E99",
"action-primary": "#000",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#e3e4e6",
@ -242,7 +242,7 @@
}
},
"borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
"borderRadius": [0, 0.125, 0.25, 0.5, 1],
"borderRadius": [0, 0, 0, 0.5, 1],
"widths": [1, 2, 4, 8, 16],
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
"heights": [1, 2, 4, 8, 16],
@ -255,84 +255,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

15
styles/css/vtex.add-to-cart-button.css Normal file
View File

@ -0,0 +1,15 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.buttonText--addToCartButton {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}

1
styles/css/vtex.breadcrumb.css
View File

@ -7,6 +7,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.container {
padding: 0 40px;

15
styles/css/vtex.flex-layout.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.flexRow .flexRowContent--productPanel {
margin: 16px 0 0;
@ -14,7 +15,17 @@
}
.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child {
padding: 0;
justify-content: normal;
}
.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child .flexCol--productShowcase {
margin: 0 32px 0 0;
.flexRow .flexRowContent--productPanel .flexCol--productShowcase {
padding: 0 32px 0 0;
}
.flexRow .flexRowContent--quantityAndBuy {
margin: 0 0 16px;
}
.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth {
width: auto !important;
}
.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth:last-child {
flex: 1;
}

3
styles/css/vtex.product-identifier.css
View File

@ -6,10 +6,11 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.product-identifier {
position: absolute;
top: 65px;
top: 35px;
right: 40px;
font-weight: 400;
font-size: 14px;

32
styles/css/vtex.product-price.css
View File

@ -6,4 +6,36 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.sellingPrice--hasListPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
}
.installments--sellingInfo {
font-size: 0;
}
.installments--sellingInfo .installmentsNumber,
.installments--sellingInfo .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments--sellingInfo .installmentsNumber::after {
content: " x ";
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.installments--sellingInfo .installmentValue::before, .installments--sellingInfo .installmentValue::after {
content: "de ";
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.installments--sellingInfo .installmentValue::after {
content: " sem juros";
}

9
styles/css/agenciamagma.store-theme.css → styles/css/vtex.product-quantity.css
View File

@ -6,11 +6,8 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: blue;
.quantitySelectorContainer {
margin: 0 10px 0 0;
}

1
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */

1
styles/css/vtex.shelf.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.relatedProducts {
padding: 0 40px;

63
styles/css/vtex.store-components.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.container {
padding: 0;
@ -39,9 +40,69 @@
}
.container .productNameContainer {
text-align: right;
margin: 0 0 51px;
}
.container .productNameContainer .productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
margin: 0 0 51px;
}
.container .skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.container .skuSelectorContainer .skuSelectorSubcontainer {
margin: 0;
margin: 16px 0 10px;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer {
margin: 0 0 8px 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
margin: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0 16px 0 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .frameAround {
display: none;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #989898;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer {
margin: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child {
margin: 0 0 16px;
}
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS CORES:";
}
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorSelectorImageValue,
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorNameSeparator {
display: none;
}
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorOptionsList {
margin: 0;
}

15
styles/css/vtex.styleguide.css Normal file
View File

@ -0,0 +1,15 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.hideDecorators {
border-left: none;
border-right: none;
color: #929292;
}

5
styles/sass/pages/product/vtex.add-to-cart-button.scss Normal file
View File

@ -0,0 +1,5 @@
.buttonText--addToCartButton {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}

17
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -6,9 +6,22 @@
.stretchChildrenWidth:first-child {
padding: 0;
justify-content: normal;
}
.flexCol--productShowcase {
margin: 0 32px 0 0;
.flexCol--productShowcase {
padding: 0 32px 0 0;
}
}
.flexRowContent--quantityAndBuy {
margin: 0 0 16px;
.stretchChildrenWidth {
width: auto !important;
&:last-child {
flex: 1;
}
}
}

2
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,6 +1,6 @@
.product-identifier {
position: absolute;
top: 65px;
top: calc(27px + 8px);
right: 40px;
font-weight: 400;
font-size: 14px;

38
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,38 @@
.sellingPrice--hasListPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
}
.installments--sellingInfo {
font-size: 0;
.installmentsNumber,
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
}
.installmentsNumber::after {
content: " x ";
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.installmentValue {
&::before,
&::after {
content: "de ";
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
&::after {
content: " sem juros";
}
}
}

3
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,3 @@
.quantitySelectorContainer {
margin: 0 10px 0 0;
}

84
styles/sass/pages/product/vtex.store-components.scss
View File

@ -36,10 +36,86 @@
.productNameContainer {
text-align: right;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray7;
margin: 0 0 51px;
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray7;
}
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer {
margin: 0;
margin: 16px 0 10px;
.skuSelectorTextContainer {
margin: 0 0 8px 0;
.skuSelectorName {
font-size: 0;
&::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
}
}
.skuSelectorOptionsList {
margin: 0;
.skuSelectorItem {
margin: 0 16px 0 0;
.frameAround {
display: none;
}
.skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $color-gray9;
}
&--selected .skuSelectorInternalBox {
border: 2px solid $color-black2;
}
}
}
.skuSelectorNameContainer {
margin: 0;
}
&:first-child {
margin: 0 0 16px;
.skuSelectorTextContainer {
.skuSelectorName::before {
content: "OUTRAS CORES:";
}
.skuSelectorSelectorImageValue,
.skuSelectorNameSeparator {
display: none;
}
}
.skuSelectorOptionsList {
margin: 0;
}
}
}
}
}

5
styles/sass/pages/product/vtex.styleguide.scss Normal file
View File

@ -0,0 +1,5 @@
.hideDecorators {
border-left: none;
border-right: none;
color: $color-gray6;
}

4
styles/sass/utils/_vars.scss
View File

@ -1,4 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
$color-black: #292929;
$color-black2: #000;
$color-white: #fff;
@ -10,6 +13,7 @@ $color-gray5: #e5e5e5;
$color-gray6: #929292;
$color-gray7: #575757;
$color-gray8: #9292927a;
$color-gray9: #989898;
$color-blue: #4267b2;