feat: prática das aulas 7.8 até 7.9

custom/react/TwoCountdown.tsx

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

custom/react/components/Countdown/index.tsx

@@ -1,4 +1,3 @@
-
 import React, { useEffect, useState } from "react";
 
 import styles from "./styles.css";
@@ -95,3 +94,15 @@ const Countdown = ({endDate}: CountdownProps) => {
 };
 
 export default Countdown;
+
+Countdown.schema = {
+    title: "Countdown Academy",
+    type: "object",
+    properties: {
+        endDate: {
+            title: "Data final de countdown",
+            type: "string",
+            default: "31/01/2023/12:30"
+        }
+    }
+};

custom/react/components/Countdown/styles.css

@@ -11,8 +11,7 @@
 
     position: relative;
 
-    margin-top: 30px;
+    margin: 30px auto 0 auto;
-    margin-left: 8px;
 }
 
 .countdownTitle {

custom/react/components/TwoCountdown/assets/clock.svg

@@ -0,0 +1,11 @@
+<?xml version='1.0' encoding='utf-8'?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="25px" width="25px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
+  <g>
+    <g>
+      <path d="m256,51.8c-112.6,0-204.2,91.6-204.2,204.2s91.6,204.2 204.2,204.2 204.2-91.6 204.2-204.2-91.6-204.2-204.2-204.2v-1.42109e-14zm0,449.2c-135.1,0-245-109.9-245-245s109.9-245 245-245 245,109.9 245,245-109.9,245-245,245z"/>
+      <path d="m344.1,276.4h-88.1c-11.3,0-20.4-9.1-20.4-20.4v-157.8c0-11.3 9.1-20.4 20.4-20.4 11.3,0 20.4,9.1 20.4,20.4v137.4h67.7c11.3,0 20.4,9.1 20.4,20.4 5.68434e-14,11.3-9.1,20.4-20.4,20.4z"/>
+    </g>
+  </g>
+</svg>

custom/react/components/TwoCountdown/indexTwo.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+
+import { useCssHandles } from "vtex.css-handles";
+
+import clock from "./assets/clock.svg";
+
+interface CountdownProps {
+    //formato: dd/mm/yyyy/hh:mm
+    endDate: string;
+}
+
+interface Time {
+    hour: number;
+    minute: number;
+    second: number;
+}
+
+const TwoCountdown = ({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);
+    }, []);
+
+    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={handles.CountdownWrapper}>
+
+            <div className={handles.CountdownBadge}>
+                <img className={handles.CountdownBadgeClock} src={clock} />
+            </div>
+
+            <div className={handles.CountdownTitle}>
+                <h1 className={handles.CountdownHeading1}>Ofertas</h1>
+                <h3 className={handles.CountdownHeading3}>Não perca tempo,</h3>
+                <h2 className={handles.CountdownHeading2}>garanta agora!</h2>
+            </div>
+
+            <div className={handles.CountdownText}>
+                {`${hourString}:${minuteString}:${secondString}`}
+            </div>
+
+        </div>
+    );
+};
+
+export default TwoCountdown;
+
+TwoCountdown.schema = {
+    title: "Countdown-2 Academy",
+    type: "object",
+    properties: {
+        endDate: {
+            title: "Data final de countdown",
+            type: "string",
+            default: "31/01/2023/12:30"
+        }
+    }
+};

custom/store/interfaces.json

@@ -27,5 +27,9 @@
 
     "countdown-academy": {
         "component": "Countdown"
+    },
+
+    "countdown-academy-2": {
+        "component": "TwoCountdown"
     }
 }

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

@@ -5,7 +5,8 @@
             "flex-layout.row#deals",
             "__fold__",
             "flex-layout.row#faixa-de-imagens",
-            "countdown-academy",
+            //"countdown-academy",
+            "countdown-academy-2",
             "rich-text#m3-shelf-title",
             "flex-layout.row#m3-shelf",
             "info-card#m3-middle-card",
@@ -18,6 +19,13 @@
         // }
     },
 
+    "countdown-academy-2": {
+        "props" : {
+            // "blockClass": "countdown-academy-teste",
+            "endDate": "31/01/2023/12:30"
+        }
+    },
+
     "countdown-academy": {
         "props" : {
             "endDate": "31/01/2023/12:30"

storefront/styles/sass/pages/home/agenciamagma.m3-custom.scss

@@ -0,0 +1,79 @@
+
+.CountdownWrapper {
+    background-image: url(assets/imgs/textura.jpg);
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    background-color: #c70042;
+    width: 414px;
+    height: 414px;
+    border-radius: 30px;
+    background-blend-mode: multiply;
+
+    position: relative;
+
+    margin: 30px auto 0 auto;
+}
+
+.CountdownTitle {
+    color: white;
+    text-align: center;
+    padding-top: 20px;
+}
+
+.CountdownHeading1 {
+    margin: 0;
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -0,05em;
+}
+
+.CountdownHeading3 {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: -0,05em;
+    font-weight: 300;
+}
+
+.CountdownHeading2 {
+    margin: 0;
+    font-size: 26px;
+    line-height: 30px;
+    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 #ffffff15;
+
+    display: grid;
+    place-items: center;
+
+    margin-top: 60px;
+}
+
+.CountdownBadge {
+    position: absolute;
+    top: 30px;
+    right: 0;
+
+    background-color: rgb(1, 185, 185);
+    border-radius: 80px 0 0 80px;
+
+    padding: 10px 10px 6px 34px;
+}