feat: aula 7.7 treinando vtex io

custom/package.json

@@ -22,6 +22,7 @@
     },
     "dependencies": {
         "husky": "^5.2.0",
-        "react": "^17.0.2"
+        "react": "^17.0.2",
+        "scss": "^0.2.4"
     }
 }

custom/react/Countdown.tsx

@@ -0,0 +1,3 @@
+/* eslint-disable linebreak-style */
+import Countdown from "./components/Countdown";
+export default Countdown;

custom/react/components/Countdown/index.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import styles from "./styles.css";
+
+interface CountdownProps {
+    // Fortmato: dd/mm/aaaa/hr:min
+    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 * 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
+            });
+        }
+    };
+    
+    useEffect(()=>{
+        setInterval(updateTimer,1000);
+    },[]);
+
+
+    return (
+
+        <div className={styles.CountdownWrapper}>
+
+            <div className={styles.CountdownTitle}>
+                <h1 className={styles.texth1}>TEXTO H1</h1>
+                <h3 className={styles.texth3}>TEXTO H3</h3>
+                <h2 className={styles.texth2}>TEXTO H2</h2>
+            </div>
+
+            <div className={styles.hora}>
+
+                {`
+                ${time.hour.toString().padStart(2, "0")}:
+                ${time.minute.toString().padStart(2, "0")}:
+                ${time.second.toString().padStart(2, "0")}
+                `}
+
+            </div>
+
+        </div>
+    );
+};
+
+export default Countdown;

custom/react/components/Countdown/styles.css

@@ -0,0 +1,43 @@
+.CountdownWrapper{
+    border-radius: 5px;
+    background-color: black;
+    color: white;
+    width: 414px ;
+    position: relative;
+    height: 463px;
+    margin-top: 30px;
+    margin-left: 15px;
+}
+.CountdownTitle{
+    color: white;
+    text-align: center;
+    padding-top: 15px;
+}
+.texth1{
+    font-size: 40px;
+    line-height: 48px;
+}
+.texth3{
+    font-size: 18px;
+    line-height: 20px;
+}
+.texth2{
+    font-size: 26px;
+    line-height: 26px;
+}
+.hora{
+    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;
+}

custom/store/interfaces.json

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

storefront/manifest.json

@@ -12,13 +12,13 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
+    "vtex.store-components": "3.x",
     "vtex.search-graphql": "0.x",
     "vtex.challenge-tp-condition": "0.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",
     "vtex.store-footer": "2.x",
-    "vtex.store-components": "3.x",
     "vtex.styleguide": "9.x",
     "vtex.slider": "0.x",
     "vtex.carousel": "2.x",

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,84 @@
         //   "challenge": "challenge.trade-policy-condition"
         // }
     },
+
+    "Countdown-academy":{
+        "props":{
+            "endDate": "20/01/2023/16: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":{
+        "props":{
+            "blockClass":"conteudo-meio",
+            "preventVerticalStretch":"auto"
+        },
+        "children":[
+            "rich-text#texto-meio",
+            "link#link-meio"
+
+        ]
+    },
+
+    "rich-text#texto-meio": {
+        "props": {
+            "blockClass":"text-meio",
+            "text": "***Sub Titulo*** \n  **Titulo** \n Descrição"
+        }
+    },
+
+    "link#link-meio": {
+        "props": {
+            "blockClass":"link-meio",
+          "href": "/",
+          "label": "link"
+        }
+    },
+
+    "image#imagem-1": {
+        "props": {
+            "blockClass": "imagem",
+          "src": "https://picsum.photos/seed/picsum/200/300"
+        }
+    },
+
+    "image#imagem-2": {
+    "props": {
+        "blockClass": "imagem",
+        "src": "https://picsum.photos/seed/picsum/200/300"
+        }
+    },
+
+    "image#imagem-3": {
+        "props": {
+            "blockClass": "imagem",
+          "src": "https://picsum.photos/seed/picsum/200/300"
+        }
+    },
+
+
     "challenge.trade-policy-condition": {
         "props": {
             "redirectPath": "/registration",

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

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

storefront/styles/sass/pages/home/vtex.rich-text.scss

@@ -0,0 +1,13 @@
+.container--text-meio{
+    justify-content: center;
+    .paragraph--text-meio{
+        color:black;
+        font-size: 15px;
+        .strong--text-meio{
+            font-size: 25px;
+        }
+        .italic--text-meio{
+            font-size: 20px;
+        }
+    }
+}

storefront/styles/sass/pages/home/vtex.store-link.scss

@@ -0,0 +1,9 @@
+.link--link-meio{
+    font-size: 25px;
+    color: black;
+    text-decoration: line-through;
+    padding: 15px;
+    border-radius: 25%;
+    background-color: white;
+    margin-top: 5px;
+}