PatrickReisSantos/challenge-vtex-io-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona pix discount

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-06 19:16:28 -03:00
parent a33e77d2e9
commit 412b87720c
16 changed files with 294 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

@ -65,7 +65,8 @@
"vtex.tab-layout": "0.x",
"vtex.condition-layout": "2.x",
"vtex.css-handles": "1.x",
"vtex.product-context": "0.x"
"vtex.product-context": "0.x",
"vtex.render-runtime": "8.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

3
react/PlaceHolderCep.ts Normal file
View File

@ -0,0 +1,3 @@
import { PlaceHolderCep } from "./components/Placeholder/place-holder-cep";
export default PlaceHolderCep;

0
react/components/Pixdiscount/pix-discount.module.scss
View File

8
react/components/Pixdiscount/pix-discount.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import style from "./styles.css";
import { useProduct } from "vtex.product-context";
@ -20,11 +21,11 @@ export function PixDiscount() {
}
}
return (
<div>
<div className={style.pixContainer}>
<PixIcon />
<div>
<div className={style.discountPixContainer}>
{discount()}
<span>10% de desconto</span>
<span className={style.discountSpan}>10% de desconto</span>
</div>
</div>
);
@ -33,6 +34,7 @@ export function PixDiscount() {
function PixIcon() {
return (
<svg
className={style.imgTeste}
width="66"
height="25"
viewBox="0 0 66 25"

26
react/components/Pixdiscount/styles.css Normal file
View File

@ -0,0 +1,26 @@
.pixContainer {
display: flex;
}
.discountPixContainer {
display: flex;
flex-direction: column;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.discountSpan {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 13px;
color: #929292;
}
.imgTeste {
margin: 18px 26px 21px 0px;
}

13
react/components/Placeholder/place-holder-cep.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import { canUseDOM } from "vtex.render-runtime";
export function PlaceHolderCep() {
if (canUseDOM) {
const myPlaceHolder = document.querySelector(
".vtex-address-form-4-x-input"
);
myPlaceHolder?.setAttribute("placeholder", "Digite seu CEP");
}
return <></>;
}

105
store/blocks/pdp/product-description.jsonc Normal file
View File

@ -0,0 +1,105 @@
{
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
}
},
"tab-list#description": {
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "description 1",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "description 2"
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "description 3"
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "description 4"
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "description 5"
}
},
"tab-content#description": {
"children": [
"tab-content.item#description1",
"tab-content.item#description2",
"tab-content.item#description3",
"tab-content.item#description4",
"tab-content.item#description5"
]
},
"tab-content.item#description1": {
"children": ["product-description", "product-images#imagecontainer"],
"props": {
"tabId": "description1"
}
},
"tab-content.item#description2": {
"children": ["product-description", "product-images#imagecontainer"],
"props": {
"tabId": "description2"
}
},
"tab-content.item#description3": {
"children": ["product-description", "product-images#imagecontainer"],
"props": {
"tabId": "description3"
}
},
"tab-content.item#description4": {
"children": ["product-description", "product-images#imagecontainer"],
"props": {
"tabId": "description4"
}
},
"tab-content.item#description5": {
"children": ["product-images#imagecontainer", "product-description"],
"props": {
"tabId": "description5"
}
},
"product-images#imagecontainer": {
"props": {
"displayThumbnailsArrows": false,
"showNavigationArrows": false,
"contentType": "images",
"displayMode": "first-image"
}
}
}
/* "product-specification-group#table" */

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

@ -30,7 +30,7 @@
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"children": ["tab-layout#description"]
},
"condition-layout.product#availability": {
"props": {
@ -109,14 +109,15 @@
"flex-layout.row#selling-price",
"product-installments#summary",
"pix-discount",
"place-holder",
/* "product-separator", */
"sku-selector",
"flex-layout.row#add-bag", ///// //
/* "product-quantity", */ "product-assembly-options",
"flex-layout.row#add-bag",
"product-assembly-options",
"product-gifts", //
/* "flex-layout.row#buy-button", */ "availability-subscriber",
"shipping-simulator",
"share#default"
"availability-subscriber",
"shipping-simulator"
/* "share#default" */
]
},
"flex-layout.row#add-bag": {

3
store/interfaces.json
View File

@ -8,5 +8,8 @@
},
"pix-discount": {
"component": "PixDiscount"
},
"place-holder": {
"component": "PlaceHolderCep"
}
}

12
styles/css/vmtex.product-quantity.css
View File

@ -1,12 +0,0 @@
/*
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 {
border: 1px solid red;
}

12
styles/css/vtex.numeric-stepper-container.css
View File

@ -1,12 +0,0 @@
/*
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 */
.numeric-stepper-container {
border: 1px solid #cccccc;
}

14
styles/css/vtex.numeric-stepper-wrapper.css
View File

@ -1,14 +0,0 @@
/*
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 */
.numeric-stepper-container {
border: 1px solid #cccccc;
width: 128px;
height: 49px;
}

13
styles/css/vtex.numeric-stepper.css
View File

@ -1,13 +0,0 @@
/*
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 */
/* .numeric-stepper-wrapper {
width: 128px;
}
*/

12
styles/css/vtex.numeric.stepper-container.css
View File

@ -1,12 +0,0 @@
/*
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 */
.numeric-stepper-container {
border: 1px solid #cccccc;
}

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

@ -100,7 +100,6 @@
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -110,4 +109,69 @@
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.shippingContainer {
position: relative;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
}
.shippingContainer :global(.vtex-button) {
position: absolute;
border: 0;
width: 49px;
height: 49px;
top: 27px;
left: 229px;
}
.shippingContainer :global(.vtex-button__label) {
background-color: #000000;
width: 49px;
height: 49px;
font-size: 0;
box-sizing: b;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
margin-top: 16px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
width: 280px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
align-items: center;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
color: #000000;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}

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

@ -95,7 +95,6 @@
.skuSelectorName {
font-size: 0;
&::after {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -110,3 +109,68 @@
}
}
}
.shippingContainer {
position: relative;
:global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
}
:global(.vtex-button) {
position: absolute;
border: 0;
width: 49px;
height: 49px;
top: 27px;
left: 229px;
}
:global(.vtex-button__label) {
background-color: #000000;
width: 49px;
height: 49px;
font-size: 0;
box-sizing: b;
&::after {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
}
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
margin-top: 16px;
:global(.vtex-input) {
width: 280px;
}
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
align-items: center;
:first-child {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
color: #000000;
}
:global(.vtex__icon-external-link) {
display: none;
}
}
}