anacarolinaduartecavalcante/m3-academy-template-vtexio-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-vtexio
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finalizado #2

Merged
anacarolinaduartecavalcante merged 4 commits from develop into main 2023-01-19 13:46:02 +00:00
Conversation 0 Commits 4 Files Changed 13 +209 -19
9 changed files with 209 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ee57b132f9 - Show all commits

3
custom/react/Countdown.tsx Normal file
View File

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

11
custom/react/Menu.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const Menu = () => {
return (
<div>
<h1>Menu</h1>
</div>
);
};
export default Menu;

56
custom/react/components/Countdown/index.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { useState, useEffect } from "react";
interface CountdownProps {
//formato: dd/mm/yyyy/hh:mm
endDate: string;
}
interface Time {
hour: number;
minute: number;
second: number;
}
const Countdown = ({ endDate }: CountdownProps) => {
const [time, setTime] = useState<Time>({ hour: 0, minute: 0, second: 0 });
const [day, month, year, hourMinute] = endDate.split("/");
const [hour, minute] = hourMinute.split(":");
const UpdateTimer = () => {
const finalDate = new Date(
parseInt(year),
parseInt(month) - 1,
parseInt(day),
parseInt(hour),
parseInt(minute)
).getTime();
const atualDate = new Date().getTime();
let difference = finalDate - atualDate;
const hours = Math.floor(difference / (1000 * 60 * 60));
difference = difference - hours * 1000 * 60 * 60;
const minutes = Math.floor(difference / (1000 * 60));
difference = difference - minutes * 1000 * 60;
const seconds = Math.floor(difference / 1000);
if (hours <= 0 && minutes <= 0 && seconds <= 0) {
setTime({ hour: 0, minute: 0, second: 0 });
} else {
setTime({ hour: hours, minute: minutes, second: seconds });
}
};
useEffect(() => {
setInterval(UpdateTimer, 1000);
}, []);
const hourString = time.hour.toString().padStart(2, "0");
const minuteString = time.minute.toString().padStart(2, "0");
const secondString = time.second.toString().padStart(2, "0");
return <div>{`${hourString}:${minuteString}:${secondString}`}</div>;
};
export default Countdown;

6
custom/store/interfaces.json
View File

@ -23,5 +23,11 @@
"content": {
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
}
},
"menu-academy":{
"component": "Menu"
},
"countdown-academy":{
"component": "Countdown"
}
}

59
storefront/store/blocks/pages/home/home.jsonc
View File

@ -4,6 +4,8 @@
"list-context.image-list#demo",
"flex-layout.row#deals",
"__fold__",
"flex-layout.row#faixa-de-imagens",
"countdown-academy",
"rich-text#m3-shelf-title",
"flex-layout.row#m3-shelf",
"info-card#m3-middle-card",
@ -15,6 +17,63 @@
// "challenge": "challenge.trade-policy-condition"
// }
},
"countdown-academy":{
"props":{
"endDate": "20/01/2023/00:00"
}
},
"flex-layout.row#faixa-de-imagens": {
"props": {
"blockClass": "faixa-de-imagens"
},
"children": [
"image#imagem-1",
"flex-layout.col#imagem-meio",
"image#imagem-3"
]
},
"flex-layout.col#imagem-meio": {
"props": {
"blockClass": "faixa-de-imagens"
},
"children": ["image#imagem-2", "flex-layout.col#conteudo-meio"]
},
"flex-layout.col#conteudo-meio": {
"children": ["rich-text#texto-meio", "link#link-meio"],
"props": {
"blockClass": "conteudo-meio",
"preventVerticalStreetch": "auto"
}
},
"rich-text#texto-meio": {
"props": {
"text": "### Qual produto\n # ideal pra você?\n Lorem ipsum dolor sit amet, consectetur",
"blockClass": "texto-meio"
}
},
"link#link-meio": {
"props": {
"href": "/",
"label": "RESPONDA NOSSO QUIZ E DESCUBRA",
"blockClass": "link-meio"
}
},
"image#imagem-1": {
"props": {
"src": "assets/imgs/mosaic01.png"
}
},
"image#imagem-2": {
"props": {
"src": "assets/imgs/mosaic01.png",
"height": "439.12px"
}
},
"image#imagem-3": {
"props": {
"src": "assets/imgs/mosaic01.png"
}
},
"challenge.trade-policy-condition": {
"props": {
"redirectPath": "/registration",

25
storefront/styles/sass/pages/home/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,25 @@
.flexRow--faixa-de-imagens {
margin-top: 5rem;
:global(.vtex-store-components-3-x-imageElement) {
height: 100%;
width: 100%;
}
.stretchChildrenWidth {
margin: 0 8px;
height: 439.12px;
}
}
.flexCol--faixa-de-imagens {
position: relative;
}
.flexCol--conteudo-meio {
position: absolute;
inset: 0;
justify-content: center;
.flexColChild--conteudo-meio{
height: unset !important;
}
}

33
storefront/styles/sass/pages/home/vtex.rich-text.scss Normal file
View File

@ -0,0 +1,33 @@
.container--texto-meio {
justify-content: center;
color: white;
}
.headingLevel3--texto-meio,
.headingLevel1--texto-meio,
.paragraph--texto-meio {
margin: 0;
}
.headingLevel3--texto-meio{
font-size: 32px;
font-weight: 600;
letter-spacing: -0.05em;
}
.headingLevel1--texto-meio{
font-size: 56px;
font-weight: 600;
letter-spacing: -0.05em;
}
.paragraph--texto-meio{
font-size: 18px;
letter-spacing: 0.05em;
font-weight: 300;
}
.wrapper--texto-meio{
width: 100%;
margin: 0 24px;
}

11
storefront/styles/sass/pages/home/vtex.store-link.scss Normal file
View File

@ -0,0 +1,11 @@
.link--link-meio{
padding: 16px 22px;
background-color: #4E1D52;
color: white;
border-radius: 30px;
display: block;
width: fit-content;
margin: 2rem 24px;
letter-spacing: 0.05em;
font-size: 14px;
}

24
yarn.lock
View File

@ -2,13 +2,6 @@
# yarn lockfile v1
"@agenciam3/pkg@^1.1.13":
version "1.1.13"
resolved "https://gitlab.com/api/v4/projects/21631951/packages/npm/@agenciam3/pkg/-/@agenciam3/pkg-1.1.13.tgz#1e5c0e831d325f46bfbfd65e3347949b6be69c5d"
integrity sha1-HlwOgx0yX0a/v9ZeM0eUm2vmnF0=
dependencies:
"@types/jquery" "^3.5.1"
"@babel/code-frame@7.12.11":
version "7.12.11"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@ -2041,13 +2034,6 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
"@types/jquery@^3.5.1":
version "3.5.6"
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.6.tgz#97ac8e36dccd8ad8ed3f3f3b48933614d9fd8cf0"
integrity sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==
dependencies:
"@types/sizzle" "*"
"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
version "7.0.9"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@ -2083,11 +2069,6 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
"@types/sizzle@*":
version "2.3.3"
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
"@typescript-eslint/eslint-plugin@^2.17.0":
version "2.34.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
@ -6687,6 +6668,11 @@ lru-queue@^0.1.0:
dependencies:
es5-ext "~0.10.2"
m3-utils@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8"
integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ==
make-dir@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"