Refactor disabled illustrations logic and fix JS errors

src/pages/advent-calendar-2024/components/calendar-card.jsx

@@ -22,8 +22,7 @@ const CalendarCard = ({
   content,
   status,
   onEndDay,
-  illustration,
-  illustrationDimmed,
+  Illustration,
   repeatable,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -84,11 +83,7 @@ const CalendarCard = ({
     }
   }
 
-  const IllustrationWrapper = ({
-    illustration,
-    illustrationDimmed,
-    status,
-  }) => {
+  const IllustrationWrapper = ({ Illustration, status }) => {
     return (
       <div
         style={{
@@ -97,7 +92,7 @@ const CalendarCard = ({
           justifyContent: "center",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     );
   };
@@ -213,12 +208,8 @@ const CalendarCard = ({
             <StatusIndicator />
           </Stack>
 
-          {(illustration || illustrationDimmed) && (
-            <IllustrationWrapper
-              illustration={illustration}
-              illustrationDimmed={illustrationDimmed}
-              status={status}
-            />
+          {Illustration && (
+            <IllustrationWrapper Illustration={Illustration} status={status} />
           )}
 
           <Inline space="between" alignItems="center">

src/pages/advent-calendar-2024/components/corner-layout.jsx

@@ -11,13 +11,9 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
 import RotatingSVG from "./label-rotate";
 
 const CornerLayout = () => {
-  const navigate = useNavigate();
-  const location = useLocation(); // Get the current location
   const { isLargeDesktop, isTabletOrBigger } = useScreenSize();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
   const [showLogo, setShowLogo] = useState(false);

src/pages/advent-calendar-2024/components/navbar.jsx

@@ -17,8 +17,7 @@ import {
   useScreenSize,
 } from "@telefonica/mistica";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { base64Encode } from "../utils/url-encoder";
+import { useLocation } from "react-router-dom";
 import RotatingSVG from "./label-rotate";
 
 const SheetView = ({ isOpen, onClose }) => {
@@ -100,7 +99,6 @@ const SheetView = ({ isOpen, onClose }) => {
 };
 
 const NavBar = () => {
-  const navigate = useNavigate();
   const location = useLocation(); // Get the current location
   const { isMobile, isTabletOrSmaller } = useScreenSize();
   const [isSheetOpen, setIsSheetOpen] = useState(false);

src/pages/advent-calendar-2024/components/progress-grid.jsx

@@ -16,7 +16,7 @@ import { CARD_STATES } from "../utils/constants"; // Importa CARD_STATES si no l
 import contentByDate from "../utils/content-config"; // Asegúrate de importar tu configuración de contenido
 
 // IllustrationWrapper Component
-const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
+const IllustrationWrapper = ({ Illustration, status }) => {
   return (
     <Align x="center">
       <div
@@ -28,7 +28,7 @@ const IllustrationWrapper = ({ illustration, illustrationDimmed, status }) => {
           height: "100px",
         }}
       >
-        {status === CARD_STATES.BLOCKED ? illustrationDimmed : illustration}
+        <Illustration disabled={status === CARD_STATES.BLOCKED} />
       </div>
     </Align>
   );
@@ -62,7 +62,7 @@ const ProgressGrid = ({ completedDays }) => {
     <Grid columns={isMobile ? 2 : 4} gap={isMobile ? 8 : 24}>
       {calendarDays.map((day) => {
         // Accede a la ilustración para cada día
-        const illustration = contentByDate[day.date]?.illustration;
+        const Illustration = contentByDate[day.date]?.Illustration;
 
         // Determina el estado del día
         const status = isDayCompleted(day.dayNumber)
@@ -88,12 +88,9 @@ const ProgressGrid = ({ completedDays }) => {
                 </div>
 
                 {/* Renderiza la ilustración usando IllustrationWrapper */}
-                {illustration ? (
+                {Illustration ? (
                   <IllustrationWrapper
-                    illustration={illustration}
-                    illustrationDimmed={
-                      contentByDate[day.date]?.illustrationDimmed
-                    }
+                    Illustration={Illustration}
                     status={status}
                   />
                 ) : (

src/pages/advent-calendar-2024/components/score.jsx

@@ -1,6 +1,5 @@
 import {
   IconAlarmClockFilled,
-  Inline,
   skinVars,
   Tag,
   Text4,
@@ -16,7 +15,12 @@ const Score = ({ score, time, timeRunning, movements, isFinal }) => {
           style={{ display: "inline-flex", flexDirection: "column", gap: 8 }}
         >
           <Text5>Your final score is</Text5>
-          <DecorationPatty size={128} text={score} stroke="0.75" color={skinVars.colors.brand} />
+          <DecorationPatty
+            size={128}
+            text={score}
+            stroke="0.75"
+            color={skinVars.colors.brand}
+          />
         </div>
       ) : (
         <div style={{ display: "flex", gap: 24 }}>

src/pages/advent-calendar-2024/components/snow.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import Snowfall from "react-snowfall";
 import { useEffect, useState } from "react";
 import snowflakeSrc1 from "../assets/decorations/snowflake-1.svg";
 import snowflakeSrc2 from "../assets/decorations/snowflake-2.svg";
 import { useScreenSize } from "@telefonica/mistica";
 
-const Snow = () => {
+const Snow = (): JSX.Element => {
   const [images, setImages] = useState<HTMLImageElement[]>([]);
   const { isTabletOrSmaller } = useScreenSize();
 
@@ -49,31 +48,17 @@ const Snow = () => {
     };
   }, []);
 
-  return isTabletOrSmaller ? (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[30, 30]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={8}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  ) : (
-    <Snowfall
-      style={{
-        position: "fixed",
-        zIndex: "9999999",
-      }}
-      color="#EEF0FB"
-      radius={[50, 50]}
-      speed={[1.0, 2.0]} // Velocidad de los copos
-      snowflakeCount={20}
-      images={images} // Pasamos las imágenes cargadas al componente
-    />
-  );
+  return Snowfall({
+    style: {
+      position: "fixed",
+      zIndex: "9999999",
+    },
+    color: "#EEF0FB",
+    radius: isTabletOrSmaller ? [30, 30] : [50, 50],
+    speed: [1, 2], // Velocidad de los copos
+    snowflakeCount: isTabletOrSmaller ? 8 : 20,
+    images, // Pasamos las imágenes cargadas al componente
+  });
 };
 
 export default Snow;

src/pages/advent-calendar-2024/components/static-content/christmas-greetings.jsx

@@ -3,10 +3,11 @@ import ContentWrapper from "../content-wrapper";
 import contentByDate from "../../utils/content-config";
 
 const ChristmasGreetings = () => {
+  const FinalIllustration = contentByDate["2024-12-25"].Illustration;
   return (
     <ContentWrapper textAlign={"center"}>
       <Stack space={52}>
-        <div>{contentByDate["2024-12-25"].illustration}</div>
+        <FinalIllustration />
         <Text5>
           Thanks for joining us these past days.
           <br></br>

src/pages/advent-calendar-2024/components/toast-wrapper.jsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import Toast from "./toast"; // Assuming your Toast component is already implemented
 import { Stack, useScreenSize } from "@telefonica/mistica";
 
@@ -17,8 +16,6 @@ const ToastWrapper = ({ toasts, removeToast }) => {
     >
       <Stack space={8}>
         {toasts.map((toast, index) => {
-          const scaleValue = 1 - index * 0.2;
-
           return (
             <Toast
               id={toast.id}

src/pages/advent-calendar-2024/components/toast.jsx

@@ -36,16 +36,16 @@ const Toast = ({
     }
   };
 
-  const startHideTimeout = () => {
-    clearHideTimeout();
-    timeoutRef.current = setTimeout(() => {
-      setFadeOut(true); // Trigger fade-out before setting visible to false
-      onClose?.(); // Trigger onClose callback to remove toast
-    }, duration);
-  };
-
   // Handle visibility change when hovered or not
   useEffect(() => {
+    const startHideTimeout = () => {
+      clearHideTimeout();
+      timeoutRef.current = setTimeout(() => {
+        setFadeOut(true); // Trigger fade-out before setting visible to false
+        onClose?.(); // Trigger onClose callback to remove toast
+      }, duration);
+    };
+
     const handleTimeout = () => {
       if (!isHovered) {
         setTimeout(startHideTimeout, delay); // Delay before auto-dismissing
@@ -57,7 +57,7 @@ const Toast = ({
     handleTimeout();
 
     return () => clearHideTimeout(); // Cleanup timeout on unmount
-  }, [isHovered, delay, duration]);
+  }, [isHovered, delay, duration, onClose]);
 
   useEffect(() => {
     if (fadeOut) {

src/pages/advent-calendar-2024/index.jsx

@@ -4,9 +4,9 @@ import CalendarView from "./pages/calendar-view";
 
 import { RELEASE_DATE } from "./utils/constants";
 
-const AdventCalendar2024 = () => {
-  const targetDate = new Date(RELEASE_DATE);
+const targetDate = new Date(RELEASE_DATE);
 
+const AdventCalendar2024 = () => {
   const [isReleased, setIsReleased] = useState(false);
 
   useLayoutEffect(() => {
@@ -23,7 +23,7 @@ const AdventCalendar2024 = () => {
     }, timeToRelease);
 
     return () => clearTimeout(timeout);
-  }, [targetDate]);
+  }, []);
 
   if (!isReleased) {
     return <ComingSoonPage targetDate={targetDate.toLocaleString()} />;

src/pages/advent-calendar-2024/pages/calendar-view.jsx

@@ -18,8 +18,7 @@ import {
   skinVars,
   useScreenSize,
 } from "@telefonica/mistica";
-import { useMemo, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import DecorationPatty from "../assets/decorations/decoration-patty.jsx";
 import DecorationSnake from "../assets/decorations/decoration-snake.jsx";
 import CalendarCard from "../components/calendar-card";
@@ -36,7 +35,6 @@ import { calendarDays } from "../utils/calendar-config.jsx";
 import { CARD_STATES } from "../utils/constants";
 import contentByDate from "../utils/content-config";
 import { updateCompletedDays } from "../utils/state-manager";
-import { base64Encode } from "../utils/url-encoder.jsx";
 
 const CalendarView = () => {
   const { isMobile } = useScreenSize();
@@ -123,26 +121,20 @@ const CalendarView = () => {
     }
   };
 
-  const calendarItems = useMemo(() => {
-    return calendarDays.map(({ date, dayOfWeek }) => (
-      <CalendarCard
-        key={date}
-        DateString={date}
-        DayOfWeek={dayOfWeek}
-        eventName={contentByDate[date]?.title}
-        eventDescription={contentByDate[date]?.description}
-        content={contentByDate[date]?.content}
-        status={getDayStatus(date)} // Ensure status is updated based on availability
-        onEndDay={() => markDayAsCompleted(date)}
-        illustration={contentByDate[date]?.illustration}
-        illustrationDimmed={
-          contentByDate[date]?.illustrationDimmed ||
-          contentByDate[date]?.illustration
-        }
-        repeatable={contentByDate[date]?.repeatable}
-      />
-    ));
-  }, [completedDays, availableDays, calendarDays]);
+  const calendarItems = calendarDays.map(({ date, dayOfWeek }) => (
+    <CalendarCard
+      key={date}
+      DateString={date}
+      DayOfWeek={dayOfWeek}
+      eventName={contentByDate[date]?.title}
+      eventDescription={contentByDate[date]?.description}
+      content={contentByDate[date]?.content}
+      status={getDayStatus(date)} // Ensure status is updated based on availability
+      onEndDay={() => markDayAsCompleted(date)}
+      Illustration={contentByDate[date]?.Illustration}
+      repeatable={contentByDate[date]?.repeatable}
+    />
+  ));
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
   const SheetView = ({ isOpen, onClose }) => {

src/pages/advent-calendar-2024/pages/coming-soon.jsx

@@ -6,7 +6,6 @@ import {
   Text5,
   Stack,
   Text,
-  Text2,
   Timer,
 } from "@telefonica/mistica";
 import { useState } from "react";
@@ -19,17 +18,6 @@ const ComingSoonPage = () => {
   const endTimestamp = new Date(defaultTargetDate).getTime();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
 
-  const copyToClipboard = () => {
-    const url = window.location.href; // Get the current URL
-
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        setSnackbarOpen(true); // Show the snackbar on success
-      })
-      .catch((err) => console.error("Failed to copy: ", err));
-  };
-
   return (
     <>
       <ResponsiveLayout variant="inverse">
@@ -59,7 +47,7 @@ const ComingSoonPage = () => {
                 weight="bold"
               >
                 Something special is on its way...
-              </Text> 
+              </Text>
               <div
                 style={{
                   maxWidth: 600,
@@ -69,10 +57,7 @@ const ComingSoonPage = () => {
                   margin: "auto",
                 }}
               >
-                <Text5>
-                  Keep an eye out!
-
-                </Text5>
+                <Text5>Keep an eye out!</Text5>
               </div>
               <div
                 style={{

src/pages/advent-calendar-2024/pages/games-view.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import MemoryGame from "../components/games/memory";
 import WordleGame from "../components/games/wordle";
 import CandyCrush from "../components/games/candy";
-import { Box, ButtonPrimary } from "@telefonica/mistica";
+import { Box } from "@telefonica/mistica";
 import SimonSays from "../components/games/simon";
 
 const GamesView = ({ game }) => {