feat(home): adiciona blocos

custom/react/Teste.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+
+interface CoutdownProps {
+    endDate: string;
+}
+
+interface Time {
+    hour: number;
+    minute: number;
+    second: number;
+}
+
+const Teste = ({ endDate }: CoutdownProps) => {
+    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, //mes do newdate começa em 0
+            parseInt(day),
+            parseInt(hour),
+            parseInt(minute)
+        ).getTime();
+
+        const atualDate = new Date().getTime();
+
+        let difference = finalDate - atualDate;
+        //transformar os milissigundos
+        const hours = Math.floor(difference / (1000 * 60 * 60));
+        difference = difference - hours * 60 * 60 * 1000;
+
+        const minutes = Math.floor(difference / (1000 * 60));
+        difference = difference - minutes * 60 * 1000;
+
+        const seconds = Math.floor(difference / 1000);
+
+        if (hours <= 0) {
+            setTime({
+                hour: 0,
+                minute: 0,
+                second: 0,
+            });
+        } else {
+            setTime({
+                hour: hours,
+                minute: minutes,
+                second: seconds,
+            });
+        }
+    };
+
+    //chamar todo segundo, assim q renderizado o componente
+    useEffect(() => {
+        setInterval(UpdateTimer, 1000);
+    }, []);
+
+    return (
+        <div>
+            TESTE CUSTOM {time.hour.toString().padStart(2, "0")}:
+            {time.minute.toString().padStart(2, "0")}:
+            {time.second.toString().padStart(2, "0")}
+        </div>
+    );
+    //padstart, numero minimo de caracteres, se nao tiver, completa com 0.
+};
+
+export default Teste;
+
+//CRIAR O CAMPO PARA PODER EDITAR NO ADMIN SITE EDITOR
+
+Teste.schema = {
+    title: "Teste academy",
+    type: "object",
+    properties: {
+        endDate: {
+            title: "Data final de countdown",
+            type: "string",
+            default: "13/04/2023/13:54",
+        },
+    },
+};

custom/store/interfaces.json

@@ -23,5 +23,8 @@
         "content": {
             "$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
         }
+    },
+    "menu-teste": {
+        "component": "Teste"
     }
 }

storefront/store/blocks/pages/home/home.jsonc

@@ -9,12 +9,74 @@
             "info-card#m3-middle-card",
             "flex-layout.row#m3-brands",
             "newsletter#m3-newsletter",
+            "flex-layout.row#faixa-de-imagens",
+            "menu-teste",
             "link#whatsapp"
         ]
         // "parent": {
         //   "challenge": "challenge.trade-policy-condition"
         // }
     },
+
+    "menu-teste": {
+        "props": {
+            "endDate": "28/01/2023/00:00"
+        }
+    },
+
+    "flex-layout.row#faixa-de-imagens": {
+        "props": {
+            "blockClass": "faixa-de-imagens",
+            "colSizing": "auto" //cada elemento tem seu proprio tamanho, o default é EQUAL
+        },
+        //NOS CHILDREN, QUAIS OS BLOCOS Q VAO FICAR DENTRO
+        "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"]
+    },
+
+    "rich-text#texto-meio": {
+        "props": {
+            "text": "### teste\n # teste teste\n hahahahhaha"
+        }
+    },
+
+    "link#link-meio": {
+        "props": {
+            "href": "/",
+            "label": "RESPONDA NOSSO QUIZ E DESCUBRA"
+        }
+    },
+
+    "image#imagem-1": {
+        "props": {
+            "src": "assets/imgs/institucional-img.png"
+        }
+    },
+    "image#imagem-2": {
+        "props": {
+            "src": "assets/imgs/institucional-img.png"
+        }
+    },
+    "image#imagem-3": {
+        "props": {
+            "src": "assets/imgs/institucional-img.png"
+        }
+    },
+
     "challenge.trade-policy-condition": {
         "props": {
             "redirectPath": "/registration",

storefront/styles/sass/pages/home/vtex.flex-layout.scss

@@ -0,0 +1,3 @@
+.container--m3-shelf-title {
+    border: 1px solid red;
+}

storefront/styles/sass/partials/shelf/vtex.rich-text.scss

@@ -3,10 +3,11 @@
 .container--m3-shelf-title {
     margin-top: 80px;
     margin-bottom: 40px;
+    border: 1px solid red;
 }
 
 .heading--m3-shelf-title {
-  font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 24px;

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"