m3-academy-template-vtexio-sabrina-miranda/custom/react/components/TwoCountdown/indexTwo.tsx

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"
        }
    }
};