Merge pull request 'Finalizado' (#1 ) from feature/m3-academy-template-vtexio into develop

Reviewed-on: #1
feat: adicionando index.d.ts
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	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