Remove dismiss on final screen (#1988)

* Fixes * Update release date
Telefonica · Nov 29, 2024 · b9978a7 · b9978a7
1 parent f4dd900
commit b9978a7
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 43 deletions.
diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx
@@ -8,7 +8,7 @@ import {
   Text,
   Text5,
 } from "@telefonica/mistica";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { IconCompleted, IconLockOpen } from "../assets/icons/icons";
 import { CARD_STATES } from "../utils/constants";
 import styles from "./calendar-card.module.css";
@@ -27,14 +27,15 @@ const CalendarCard = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showDismiss, setShowDismiss] = useState(true);
   const dialogRef = useRef(null);
   const day = new Date(DateString).getDate();
   const today = new Date().getDate();
   const isRepeatable = repeatable && DateString === today;
 
   const handleClick = () => {
     if (status === CARD_STATES.AVAILABLE || isRepeatable) {
-      setIsModalOpen((prev) => !prev); // Toggle modal state
+      setIsModalOpen(true); // Toggle modal state
     }
   };
 
@@ -52,13 +53,26 @@ const CalendarCard = ({
 
   const handleCloseModal = () => {
     dialogRef.current.close(); // Close the modal
+    setIsModalOpen(false); // Update the state
     onEndDay(); // Notify the parent to update the state
   };
 
   const handleDismiss = () => {
     dialogRef.current.close();
+    setIsModalOpen(false);
   };
 
+  const renderContent = useCallback(
+    ({ closeModal, hideDismiss }) =>
+      typeof content === "function"
+        ? content({
+            closeModal,
+            hideDismiss: () => setShowDismiss(false), // Wrap the function to avoid immediate state updates
+          })
+        : content,
+    [content] // Dependencies for memoization
+  );
+
   let cardStatusStyles;
 
   switch (status) {
@@ -236,20 +250,21 @@ const CalendarCard = ({
           </Inline>
         </Stack>
       </button>
+
       {isModalOpen && (
         <ModalView
           ref={dialogRef}
           day={day}
           dayOfWeek={DayOfWeek}
           title={eventName}
           description={eventDescription}
-          content={
-            typeof content === "function"
-              ? content({ closeModal: handleCloseModal })
-              : content
-          }
+          content={renderContent({
+            closeModal: handleCloseModal,
+            hideDismiss: () => setShowDismiss(false), // Wrapped to avoid direct state updates
+          })}
           onClose={handleEndDay}
           onCancel={repeatable ? handleEndDay : handleDismiss}
+          showDismiss={showDismiss}
         />
       )}
     </>

diff --git a/src/pages/advent-calendar-2024/components/games/candy.jsx b/src/pages/advent-calendar-2024/components/games/candy.jsx
@@ -13,7 +13,7 @@ import "./candy.css";
 
 const candyColors = [movistar, tu, vivo, blau, telefonica, o2];
 
-const CandyCrush = ({ onFinish }) => {
+const CandyCrush = ({ onFinish, onFinalScreen }) => {
   const gameName = "candyCrush";
   const { isMobile } = useScreenSize();
   const width = 8;
@@ -38,6 +38,7 @@ const CandyCrush = ({ onFinish }) => {
       setTimeout(() => {
         document.querySelector(".grid").classList.add("locked");
         setStatus("gameover");
+        onFinalScreen();
       }, 750); // Wait 750ms before showing the gameover state
     }
   }, [movesRemaining]);

diff --git a/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx b/src/pages/advent-calendar-2024/components/games/higher-or-lower.jsx
@@ -44,7 +44,7 @@ export const HigherLowerdataSet2 = [
   { label: "Teams using the design system", value: 108 },
 ];
 
-const HigherOrLower = ({ set, data, onFinish }) => {
+const HigherOrLower = ({ set, data, onFinish, onFinalScreen }) => {
   const [index, setIndex] = useState(0);
   const [score, setScore] = useState(0);
   const [message, setMessage] = useState("");
@@ -98,6 +98,7 @@ const HigherOrLower = ({ set, data, onFinish }) => {
     } else {
       setStatus("final");
       saveGameData(`higherOrLower${set}`, score, true);
+      onFinalScreen(); // Notify the parent component
     }
   };
 

diff --git a/src/pages/advent-calendar-2024/components/games/memory.jsx b/src/pages/advent-calendar-2024/components/games/memory.jsx
@@ -42,7 +42,7 @@ const initialCards = [
   IconBusFilled,
 ];
 
-const MemoryGame = ({ onFinish }) => {
+const MemoryGame = ({ onFinish, onFinalScreen }) => {
   const gameName = "memoryGame"; // Unique identifier for this game
   const timeLimit = 60; // Time in seconds
 
@@ -79,6 +79,7 @@ const MemoryGame = ({ onFinish }) => {
     if (savedGame?.completed) {
       setScore(savedGame.score);
       setGameEnded(true);
+      onFinalScreen(); // Notify the parent component
       setStatus("completed");
     } else {
       setCards(shuffle([...initialCards]));
@@ -94,6 +95,7 @@ const MemoryGame = ({ onFinish }) => {
       return () => clearInterval(timerId);
     } else if (timeRemaining === 0 && !gameEnded) {
       setGameEnded(true);
+      onFinalScreen(); // Notify the parent component
       setStatus("completed");
     }
   }, [timerStarted, timeRemaining, gameEnded]);
@@ -146,6 +148,7 @@ const MemoryGame = ({ onFinish }) => {
     // Check if all pairs are matched
     if (matchedPairs + 1 === cards.length / 2) {
       setGameEnded(true);
+      onFinalScreen(); // Notify the parent component
       setStatus("completed");
     }
   };

diff --git a/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx b/src/pages/advent-calendar-2024/components/games/movie-emoji.jsx
@@ -85,7 +85,7 @@ export const set2Movies = [
   },
 ];
 
-const EmojiMovies = ({ set, movies, onFinish }) => {
+const EmojiMovies = ({ set, movies, onFinish, onFinalScreen }) => {
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [showResult, setShowResult] = useState(false);
   const [isCorrect, setIsCorrect] = useState(false);
@@ -131,6 +131,7 @@ const EmojiMovies = ({ set, movies, onFinish }) => {
   };
 
   if (gameOver) {
+    onFinalScreen(); // Notify the parent component
     return (
       <ContentWrapper>
         <div style={{ textAlign: "center" }}>

diff --git a/src/pages/advent-calendar-2024/components/games/simon.jsx b/src/pages/advent-calendar-2024/components/games/simon.jsx
@@ -56,7 +56,7 @@ const UnmuteIcon = () => (
   </svg>
 );
 
-const SimonSays = ({ onFinish }) => {
+const SimonSays = ({ onFinish, onFinalScreen }) => {
   const [sequence, setSequence] = useState([]);
   const [playerSequence, setPlayerSequence] = useState([]);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -154,6 +154,7 @@ const SimonSays = ({ onFinish }) => {
       }, 1000);
     } else {
       setIsGameOver(true);
+      onFinalScreen();
       setStatus("completed");
       setIsPlayerTurn(false);
       saveGameData(gameName, score, isGameOver);
@@ -198,7 +199,9 @@ const SimonSays = ({ onFinish }) => {
         newSequence[newSequence.length - 1] !== sequence[newSequence.length - 1]
       ) {
         setIsGameOver(true);
+        onFinalScreen();
         setStatus("completed");
+
         setIsPlaying(false);
         setIsPlayerTurn(false);
         saveGameData(gameName, score, isGameOver);
@@ -279,8 +282,7 @@ const SimonSays = ({ onFinish }) => {
         ) : (
           <Stack space={24}>
             <Stack space={16}>
-              <DecorationPatty text={`${score}`}></DecorationPatty>
-              <Text3>Your final score</Text3>
+              <Score score={`${score}`} isFinal />
               <Text size={32} weight="medium">
                 Congratulations! You completed the game!
               </Text>

diff --git a/src/pages/advent-calendar-2024/components/games/wordle.jsx b/src/pages/advent-calendar-2024/components/games/wordle.jsx
@@ -17,7 +17,7 @@ import { IconCompleted, IconWrong } from "../../assets/icons/icons";
 const words = ["tokens"];
 const chosenWord = words[0].toLowerCase();
 
-const WordleGame = ({ onFinish }) => {
+const WordleGame = ({ onFinish, onFinalScreen }) => {
   const [currentAttempt, setCurrentAttempt] = useState([]);
   const [attempts, setAttempts] = useState([]);
   const [message, setMessage] = useState("");
@@ -75,6 +75,7 @@ const WordleGame = ({ onFinish }) => {
     if (input === chosenWord) {
       setScore(calculateScore(attempts.length + 1));
       setMessage(`Amazing! The word was ${chosenWord.toUpperCase()}.`);
+      onFinalScreen();
       setGameStatus("completed");
     } else if (attempts.length + 1 === maxAttempts) {
       setMessage(

diff --git a/src/pages/advent-calendar-2024/components/modal-view.jsx b/src/pages/advent-calendar-2024/components/modal-view.jsx
@@ -12,7 +12,7 @@ import { DecorationSnake } from "../assets/decorations/decorations";
 
 const ModalView = forwardRef(
   (
-    { title, day, dayOfWeek, description, content, onCancel, repeatable },
+    { title, day, dayOfWeek, description, content, onCancel, showDismiss },
     ref
   ) => {
     const { isMobile, isLargeDesktop } = useScreenSize();
@@ -30,7 +30,7 @@ const ModalView = forwardRef(
           border: "none",
         }}
       >
-        {isMobile && onCancel !== null && (
+        {isMobile && showDismiss && (
           <div
             style={{ position: "absolute", top: 16, right: 16, zIndex: 999 }}
           >
@@ -104,8 +104,7 @@ const ModalView = forwardRef(
             }}
           >
             {content}
-            {}
-            {!isMobile && onCancel !== null && (
+            {!isMobile && showDismiss && (
               <div style={{ position: "fixed", top: 48, right: 48 }}>
                 <IconButton
                   type="neutral"

diff --git a/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx b/src/pages/advent-calendar-2024/components/quizzes/guess-component.jsx
@@ -66,7 +66,7 @@ export const guessComponentSet2 = [
   },
 ];
 
-const GuessTheComponent = ({ questions, onFinish, set }) => {
+const GuessTheComponent = ({ questions, onFinish, onFinalScreen, set }) => {
   const [currentStep, setCurrentStep] = useState("guessing"); // Steps: 'guessing', 'answer', 'gameOver'
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isCorrect, setIsCorrect] = useState(false);
@@ -100,6 +100,7 @@ const GuessTheComponent = ({ questions, onFinish, set }) => {
     } else {
       saveGameData(gameName, score, true); // Save the total score for the set
       setCurrentStep("gameOver");
+      onFinalScreen(); // Notify the parent component
     }
   };
 

diff --git a/src/pages/advent-calendar-2024/index.jsx b/src/pages/advent-calendar-2024/index.jsx
@@ -42,7 +42,7 @@ const AdventCalendar2024 = () => {
           <meta property="twitter:description" content="Coming soon..." />
           <meta property="twitter:card" content="summary_large_image" />
         </Helmet>
-        <ComingSoonPage targetDate={targetDate.toLocaleString()} />
+        <ComingSoonPage targetDate={targetDate} />
       </>
     );
   }

diff --git a/src/pages/advent-calendar-2024/pages/coming-soon.jsx b/src/pages/advent-calendar-2024/pages/coming-soon.jsx
@@ -13,8 +13,8 @@ import DecorationSnake from "../assets/decorations/decoration-snake";
 import CornerLayout from "../components/corner-layout.jsx";
 import Snow from "../components/snow.tsx";
 
-const ComingSoonPage = () => {
-  const defaultTargetDate = "2024-12-02";
+const ComingSoonPage = ({ targetDate }) => {
+  const defaultTargetDate = targetDate;
   const endTimestamp = new Date(defaultTargetDate).getTime();
   const [isSnackbarOpen, setSnackbarOpen] = useState(false);
 

diff --git a/src/pages/advent-calendar-2024/pages/progress-view.jsx b/src/pages/advent-calendar-2024/pages/progress-view.jsx
@@ -28,7 +28,6 @@ import {
   achievementsConfig,
   getAchievementFromLocalStorage,
 } from "../utils/achievement-config";
-import { TOTAL_CALENDAR_DAYS } from "../utils/constants";
 import { calendarDays } from "../utils/calendar-config.jsx";
 
 const ProgressView = () => {
@@ -190,7 +189,7 @@ const ProgressView = () => {
               Total progress{" "}
               {Math.round(
                 ((completedDays.length + completedAchievementsCount) /
-                  (TOTAL_CALENDAR_DAYS + totalAchievements)) *
+                  (calendarDays.length + totalAchievements)) *
                   100
               )}
               %
@@ -230,15 +229,15 @@ const ProgressView = () => {
             >
               of
             </Text>{" "}
-            {TOTAL_CALENDAR_DAYS}
+            {calendarDays.length}
           </Text>
 
           <Inline space={8} alignItems="center" fullWidth>
             <Text4 medium>
               Total progress{" "}
               {Math.round(
                 ((completedDays.length + completedAchievementsCount) /
-                  (TOTAL_CALENDAR_DAYS + totalAchievements)) *
+                  (calendarDays.length + totalAchievements)) *
                   100
               )}
               %
@@ -292,7 +291,7 @@ const ProgressView = () => {
                           <TotalProgress />
                           <ProgressBar
                             progressPercent={
-                              (completedDays.length / TOTAL_CALENDAR_DAYS) * 100
+                              (completedDays.length / calendarDays.length) * 100
                             }
                           />
                         </Stack>