Merge pull request 'Finalizado' (#2 ) from develop into main

Reviewed-on: #2
Merge pull request 'Finalizado' (#1 ) from feature/m3-academy-template-vtexio into develop
2023-01-19 13:46:01 +00:00 · 2023-01-19 13:44:39 +00:00 · 2023-01-18 18:31:05 -03:00 · 2023-01-18 18:19:21 -03:00 · 2023-01-18 15:31:42 -03:00
13 changed files with 397 additions and 19 deletions
--- a/custom/react/Countdown.tsx
+++ b/custom/react/Countdown.tsx
@ -0,0 +1,3 @@
+import Countdown from "./components/Countdown";
+
+export default Countdown;
--- a/custom/react/Menu.tsx
+++ b/custom/react/Menu.tsx
@ -0,0 +1,11 @@
+import React from "react";
+
+const Menu = () => {
+    return (
+        <div>
+            <h1>Menu</h1>
+        </div>
+    );
+};
+
+export default Menu;
--- a/custom/react/components/Countdown/assets/box.svg
+++ b/custom/react/components/Countdown/assets/box.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9953 5.91909C23.9673 5.66095 23.8069 5.43248 23.5671 5.32059L12.3171 0.0705918C12.1161 -0.0232051 11.8838 -0.0232051 11.6828 0.0705918L0.432797 5.32059C0.193078 5.43248 0.0326719 5.6609 0.00459375 5.91909C0.00398437 5.92448 0 5.99629 0 6.00023V18.7502C0 19.0569 0.186703 19.3327 0.471469 19.4466L11.7215 23.9466C11.8109 23.9823 11.9055 24.0002 12 24.0002C12.0945 24.0002 12.1891 23.9824 12.2785 23.9466L23.5285 19.4466C23.8133 19.3327 24 19.0569 24 18.7502V6.00023C24 5.99629 23.9959 5.92444 23.9953 5.91909ZM12 1.57786L21.363 5.94726L17.7577 7.38942L8.21845 3.34261L12 1.57786ZM6.38953 4.19611L15.7808 8.18015L12 9.69244L2.637 5.94726L6.38953 4.19611ZM1.5 7.10798L11.25 11.008V22.1424L1.5 18.2424V7.10798ZM12.75 22.1425V11.008L22.5 7.10798V18.2424L12.75 22.1425Z" fill="white"/>
+</svg>
--- a/custom/react/components/Countdown/index.tsx
+++ b/custom/react/components/Countdown/index.tsx
@ -0,0 +1,125 @@
+import React, { useState, useEffect } from "react";
+// import styles from "./styles.css";
+import clock from "./assets/box.svg";
+import { useCssHandles } from "vtex.css-handles";
+
+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) {
+            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");
+
+    const CSS__HANDLES = [
+        "CountdownWrapper",
+        "CountdownBadge",
+        "CountdownTitle",
+        "CountdownText",
+        "CountdownBadgeClock",
+        "CountdownTitleHeading1",
+        "CountdownTitleHeading2",
+        "CountdownTitleHeading3",
+    ];
+
+    const handles = useCssHandles(CSS__HANDLES);
+
+    return (
+        // <div className={styles.CountdownWrapper}>
+        //     <div className={styles.CountdownBadge}>
+        //         <img
+        //             className={styles.CountdownBadgeClock}
+        //             src={clock}
+        //             alt="clock"
+        //         />
+        //     </div>
+        //     <div className={styles.CountdownTitle}>
+        //         <h1 className={styles.CountdownTitleHeading1}>ofertas</h1>
+        //         <h3 className={styles.CountdownTitleHeading3}>
+        //             Não perca tempo,
+        //         </h3>
+        //         <h2 className={styles.CountdownTitleHeading2}>garanta agora</h2>
+        //     </div>
+        //     <div className={styles.CountdownText}>
+        //         {`${hourString}:${minuteString}:${secondString}`}
+        //     </div>
+        // </div>
+        <div className={handles.CountdownWrapper}>
+            <div className={handles.CountdownBadge}>
+                <img
+                    className={handles.CountdownBadgeClock}
+                    src={clock}
+                    alt="clock"
+                />
+            </div>
+            <div className={handles.CountdownTitle}>
+                <h1 className={handles.CountdownTitleHeading1}>ofertas</h1>
+                <h3 className={handles.CountdownTitleHeading3}>
+                    Não perca tempo,
+                </h3>
+                <h2 className={handles.CountdownTitleHeading2}>
+                    garanta agora
+                </h2>
+            </div>
+            <div className={handles.CountdownText}>
+                {`${hourString}:${minuteString}:${secondString}`}
+            </div>
+        </div>
+    );
+};
+
+export default Countdown;
+
+Countdown.schema = {
+    title: "Countdown Academy",
+    type: "object",
+    properties: {
+        endDate: {
+            title: "Data final de countdown",
+            type: "string",
+            default: "20/01/2023/00:00",
+        },
+    },
+};
--- a/custom/react/components/Countdown/styles.css
+++ b/custom/react/components/Countdown/styles.css
@ -0,0 +1,57 @@
+.CountdownWrapper{
+    background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
+    width: 414px;
+    height: 463px;
+    border-radius: 30px;
+    position: relative;
+}
+
+.CountdownTitle{
+    color: white;
+    text-align: center;
+    padding-top: 40px;
+}
+
+.CountdownTitleHeading1{
+    margin: 0;
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -0.05em;
+}
+.CountdownTitleHeading3{
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+    font-weight: 300;
+}
+.CountdownTitleHeading2{
+    margin: 0;
+    font-size: 26px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+}
+.CountdownText{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 24px;
+    font-weight: 200;
+    letter-spacing: 0.1em;
+    color: white;
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+    border: 2px solid #ffffff10;
+    display: grid;
+    place-items: center;
+}
+.CountdownBadge{
+    position: absolute;
+    top: 30px;
+    right: 0;
+    background: #47bb77;
+    border-radius: 80px 0 0 80px;
+    padding: 8px 10px 6px 34px;
+}
--- a/custom/react/index.d.ts
+++ b/custom/react/index.d.ts
@ -0,0 +1 @@
+declare module "*.svg";
--- a/custom/store/interfaces.json
+++ b/custom/store/interfaces.json
@ -23,5 +23,11 @@
        "content": {
            "$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
        }
+    },
+    "menu-academy":{
+        "component": "Menu"
+    },
+    "countdown-academy":{
+        "component": "Countdown"
    }
 }
--- a/storefront/store/blocks/pages/home/home.jsonc
+++ b/storefront/store/blocks/pages/home/home.jsonc
@ -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,64 @@
        //   "challenge": "challenge.trade-policy-condition"
        // }
    },
+    "countdown-academy": {
+        "props": {
+            "endDate": "20/01/2023/00:00",
+            "blockClass": "countdown-academy-teste"
+        }
+    },
+    "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",
--- a/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss
+++ b/storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss
@ -0,0 +1,57 @@
+.CountdownWrapper {
+    background-image: linear-gradient(to top, #4e1d52 0%, #7b049f 100%);
+    width: 414px;
+    height: 463px;
+    border-radius: 30px;
+    position: relative;
+}
+
+.CountdownTitle {
+    color: white;
+    text-align: center;
+    padding-top: 40px;
+}
+
+.CountdownTitleHeading1 {
+    margin: 0;
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -0.05em;
+}
+.CountdownTitleHeading3 {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+    font-weight: 300;
+}
+.CountdownTitleHeading2 {
+    margin: 0;
+    font-size: 26px;
+    line-height: 20px;
+    letter-spacing: -0.05em;
+}
+.CountdownText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    font-weight: 200;
+    letter-spacing: 0.1em;
+    color: white;
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+    border: 2px solid #ffffff10;
+    display: grid;
+    place-items: center;
+}
+.CountdownBadge {
+    position: absolute;
+    top: 30px;
+    right: 0;
+    background: #47bb77;
+    border-radius: 80px 0 0 80px;
+    padding: 8px 10px 6px 34px;
+}
--- a/storefront/styles/sass/pages/home/vtex.flex-layout.scss
+++ b/storefront/styles/sass/pages/home/vtex.flex-layout.scss
@ -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;
+    }
+}
--- a/storefront/styles/sass/pages/home/vtex.rich-text.scss
+++ b/storefront/styles/sass/pages/home/vtex.rich-text.scss
@ -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;
+}
--- a/storefront/styles/sass/pages/home/vtex.store-link.scss
+++ b/storefront/styles/sass/pages/home/vtex.store-link.scss
@ -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;
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -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"
Author	SHA1	Message	Date
Ana Carolina Duarte Cavalcante	3c611af417	Merge pull request 'Finalizado' (#2 ) from develop into main Reviewed-on: #2	2023-01-19 13:46:01 +00:00
Ana Carolina Duarte Cavalcante	fbad5fd3fb	Merge pull request 'Finalizado' (#1 ) from feature/m3-academy-template-vtexio into develop Reviewed-on: #1	2023-01-19 13:44:39 +00:00
devartes	90691fe542	feat: adicionando index.d.ts	2023-01-18 18:31:05 -03:00
devartes	ade8c2e423	feat: adicionando conteúdo do vídeo 7.7 até 7.9	2023-01-18 18:19:21 -03:00
devartes	ee57b132f9	feat: adicionando conteúdo do vídeo 7.0 até 7.6	2023-01-18 15:31:42 -03:00