andreamatsunaga/challenge-vtex-io-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main): cria shipping simulator e ajusta data-testId's

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-10 19:03:36 -03:00
parent 82f42bb4d7
commit 6ba524e136
11 changed files with 486 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Freight.tsx Normal file
View File

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

36
react/components/Freight/Freight.tsx Normal file
View File

@ -0,0 +1,36 @@
import React, { useEffect } from "react";
const Freight = () => {
const setPlaceholder = (input: Element | null, placeholder: string) => {
if (input) {
input!.setAttribute("placeholder", placeholder);
}
};
const appendElement = (
parentElement: ChildNode | null | undefined,
childElement: ChildNode | null | undefined
) => {
if (parentElement && childElement) {
parentElement!.appendChild(childElement);
}
};
useEffect(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
const inputSpan = cepInput?.nextSibling;
const cepButton = document.querySelector(".vtex-address-form__postalCode")
?.nextSibling;
console.log("cepInput: " + cepInput, typeof cepInput);
console.log("inputSpan: " + inputSpan, typeof inputSpan);
console.log("cepButton: " + cepButton, typeof cepButton);
setPlaceholder(cepInput, "Digite seu CEP");
appendElement(inputSpan, cepButton);
});
return <></>;
};
export default Freight;

0
react/components/Freight/styles.css Normal file
View File

5
react/components/Html/styles.css
View File

@ -10,3 +10,8 @@
display: flex;
flex-direction: column;
}
/* [data-testid="product-name"]
{
} */

2
react/components/PixDiscount/PixDiscount.tsx
View File

@ -15,7 +15,7 @@ const PixDiscount = () => {
maximumFractionDigits: 2,
});
console.log(productContextValue);
// console.log(productContextValue);
return (
<>

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"html#tab-layout",
"html#product-description",
"html#shelf-container",
"newsletter"
]
@ -17,10 +17,10 @@
"children": ["breadcrumb"]
},
"html#tab-layout": {
"html#product-description": {
"props": {
"tag": "section",
"testId": "tab-layout"
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
@ -170,11 +170,13 @@
"blockClass": "right-col"
},
"children": [
// "html#product-name",
"flex-layout.row#product-name",
"product-identifier.product",
"html#codigo",
// "product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
// "flex-layout.row#selling-price",
"html#selling-price",
"html#product-installments",
// "flex-layout.row#list-price-savings",
"html#pix-price",
"html#sku-selector",
@ -182,18 +184,40 @@
// "product-assembly-options",
// "product-gifts",
"flex-layout.row#quantity-buy",
"availability-subscriber",
"shipping-simulator",
"share#default"
// "availability-subscriber",
"html#shipping-simulator"
]
},
"html#product-name": {
"props": {
"testId": "product-name",
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
"children": ["html#product-name"]
},
"html#codigo": {
"props": {
// "blockClass": "codigo",
"testId": "product-code"
},
"children": ["product-identifier.product"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"html#pix-price": {
@ -271,7 +295,7 @@
"props": {
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button"]
"children": ["add-to-cart-button#product"]
},
"flex-layout.row#buy-button": {
@ -279,15 +303,23 @@
"marginTop": 4,
"marginBottom": 7
},
"children": ["add-to-cart-button"]
"children": ["add-to-cart-button#product"]
},
"add-to-cart-button": {
"add-to-cart-button#product": {
"props": {
"text": "ADICIONAR À SACOLA"
}
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator",
"blockClass": "shipping-simulator"
},
"children": ["shipping-simulator", "freight"]
},
"flex-layout.row#product-availability": {
"props": {
"marginBottom": 5,
@ -321,17 +353,6 @@
"children": ["availability-subscriber"]
},
"share#default": {
"props": {
"social": {
"Facebook": true,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
}
}
},
"html#shelf-container": {
"props": {
"blockClass": "shelf-container"

8
store/blocks/product-price.jsonc
View File

@ -8,6 +8,14 @@
"children": ["product-selling-price"]
},
"html#selling-price": {
"props": {
"testId": "product-price",
"blockClass": "selling-price"
},
"children": ["product-selling-price"]
},
"flex-layout.row#list-price-savings": {
"props": {
"colGap": 2,

3
store/interfaces.json
View File

@ -8,5 +8,8 @@
},
"pix-discount": {
"component": "PixDiscount"
},
"freight": {
"component": "Freight"
}
}

2
styles/configs/style.json
View File

@ -110,7 +110,7 @@
"text": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
"link": "#0F3E99",
"link": "#000000",
"emphasis": "#f71963",
"disabled": "#979899",
"success": "#8bc34a",

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

@ -151,6 +151,174 @@
color: #000000;
}
.shippingContainer {
width: 61.6%;
}
@media only screen and (min-width: 1920px) {
.shippingContainer {
width: 45.24%;
}
}
@media only screen and (max-width: 1024px) {
.shippingContainer {
width: 43.33%;
}
}
@media only screen and (max-width: 639px) {
.shippingContainer {
width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
padding: 0;
display: flex;
gap: 32px;
}
@media only screen and (max-width: 639px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
flex-direction: column;
gap: 8px;
}
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
color: #929292;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: fit-content;
justify-content: space-between;
border: 1px solid #cccccc;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
width: 82.5%;
height: fit-content;
padding: 16.5px 16px;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingContainer :global(.vtex-input__suffix) {
padding: 0;
}
.shippingContainer :global(.vtex-button) {
width: fit-content;
border: 0;
border-radius: 0;
background: #000000;
}
.shippingContainer :global(.vtex-button__label) {
padding: 15px 14.5px !important;
font-weight: 600;
font-size: 0;
color: #ffffff;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-size: 14px;
line-height: 19px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding-top: 27.5px;
display: flex;
align-items: center;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
}
@media only screen and (max-width: 639px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
justify-content: flex-end;
}
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
.shippingTable {
margin-top: 16px;
padding: 0;
border: 0;
width: 50%;
}
@media only screen and (min-width: 1920px) {
.shippingTable {
width: 79.71%;
}
}
@media only screen and (max-width: 1024px) {
.shippingTable {
width: 34.54%;
}
}
@media only screen and (max-width: 639px) {
.shippingTable {
width: 100%;
}
}
.shippingTable .shippingTableHead {
display: table-header-group;
text-align: left;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #202020;
}
.shippingTable .shippingTableCell {
padding: 0;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTable .shippingTableRow {
padding-bottom: 15px;
display: grid;
grid-template-columns: 33.74% 24.54% 41.72%;
grid-template-areas: "entregaTHead freteTHead prazoTHead" "entregaTBody freteTBody prazoTBody";
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
grid-area: entregaTHead;
font-weight: 400;
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
grid-area: prazoTHead;
font-weight: 400;
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
grid-area: freteTHead;
font-weight: 400;
font-size: 0;
position: relative;
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after {
content: "FRETE";
width: min-content;
position: absolute;
bottom: 1px;
left: 1px;
font-size: 14px;
line-height: 19px;
text-align: left;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryName {
grid-area: entregaTBody;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate {
grid-area: prazoTBody;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
grid-area: freteTBody;
}
.shippingTable .shippingTableRadioBtn {
display: none;
}
/* ----- INFO-AVAILABILITY ----- */
.subscriberContainer {
margin-bottom: 16px;

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

@ -57,6 +57,9 @@
}
/* ----- RIGHT-COL ----- */
// .productNameContainer {
// }
.productBrand--quickview {
// font-family: "Open Sans";
font-weight: 300;
@ -202,6 +205,219 @@
}
}
.shippingContainer {
// background-color: cyan;
width: 61.6%;
@include mq(xl, min) {
width: 45.24%;
}
@include mq(lg, max) {
width: 43.33%;
}
@include mq(md, max) {
width: 100%;
}
:global(.vtex-address-form__postalCode) {
padding: 0;
display: flex;
gap: 32px;
@include mq(md, max) {
flex-direction: column;
gap: 8px;
}
}
:global(.vtex-input__label) {
// font-family: "Open Sans";
// font-weight: 400;
font-size: 0;
color: #929292;
&::after {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
}
}
:global(.vtex-input-prefix__group) {
height: fit-content;
justify-content: space-between;
border: 1px solid #cccccc;
border-radius: 0;
}
:global(.vtex-address-form-4-x-input) {
// background-color: yellow;
width: 82.5%;
height: fit-content;
padding: 16.5px 16px;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
:global(.vtex-input__suffix) {
padding: 0;
}
:global(.vtex-button) {
width: fit-content;
border: 0;
border-radius: 0;
background: #000000;
}
:global(.vtex-button__label) {
padding: 15px 14.5px !important;
// font-family: "Open Sans";
font-weight: 600;
font-size: 0;
color: #ffffff;
&::after {
content: "OK";
font-size: 14px;
line-height: 19px;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
// background-color: yellow;
padding-top: 27.5px;
display: flex;
align-items: center;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
@include mq(md, max) {
padding: 0;
justify-content: flex-end;
}
}
:global(.vtex__icon-external-link) {
display: none;
}
}
.shippingTable {
margin-top: 16px;
padding: 0;
border: 0;
width: 50%;
@include mq(xl, min) {
width: 79.71%;
}
@include mq(lg, max) {
width: 34.54%;
}
@include mq(md, max) {
width: 100%;
}
.shippingTableHead {
display: table-header-group;
text-align: left;
// font-family: "Open Sans";
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #202020;
}
// .shippingTableBody {
// // background-color: orange;
// }
.shippingTableCell {
padding: 0;
// font-family: "Open Sans";
// font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
// text-align: left;
// &:last-child {
// padding-right: 0;
// }
}
.shippingTableRow {
padding-bottom: 15px;
display: grid;
// grid-template-rows: auto;
grid-template-columns: 33.74% 24.54% 41.72%;
// grid-template-columns: 23.92% 14.72% 41.72%;
// gap: 32px;
grid-template-areas:
"entregaTHead freteTHead prazoTHead"
"entregaTBody freteTBody prazoTBody";
.shippingTableHeadDeliveryName {
// background-color: cyan;
grid-area: entregaTHead;
font-weight: 400;
}
.shippingTableHeadDeliveryEstimate {
// background-color: yellow;
grid-area: prazoTHead;
font-weight: 400;
}
.shippingTableHeadDeliveryPrice {
// background-color: magenta;
grid-area: freteTHead;
font-weight: 400;
font-size: 0;
position: relative;
&::after {
content: "FRETE";
width: min-content;
position: absolute;
bottom: 1px;
left: 1px;
font-size: 14px;
line-height: 19px;
text-align: left;
}
}
.shippingTableCellDeliveryName {
grid-area: entregaTBody;
}
.shippingTableCellDeliveryEstimate {
grid-area: prazoTBody;
}
.shippingTableCellDeliveryPrice {
grid-area: freteTBody;
}
}
.shippingTableRadioBtn {
display: none;
}
}
/* ----- INFO-AVAILABILITY ----- */
.subscriberContainer {
// background-color: red;