Improve repeatable logic

Telefonica · Nov 21, 2024 · 52339e7 · 52339e7
1 parent 40d3e7f
commit 52339e7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/pages/advent-calendar-2024/components/calendar-card.jsx b/src/pages/advent-calendar-2024/components/calendar-card.jsx
@@ -23,15 +23,17 @@ const CalendarCard = ({
   eventDescription,
   content,
   status,
-  forceAvailable,
   onEndDay,
   illustration,
+  repeatable,
 }) => {
   const dialogRef = useRef(null);
   const day = new Date(DateString).getDate();
+  const today = new Date().toISOString().split("T")[0];
+  const isRepeatable = repeatable && DateString === today;
 
   const handleClick = () => {
-    if (status === CARD_STATES.AVAILABLE || forceAvailable) {
+    if (status === CARD_STATES.AVAILABLE || isRepeatable) {
       dialogRef.current.showModal();
     }
   };
@@ -46,6 +48,11 @@ const CalendarCard = ({
     onEndDay(); // Notify the parent to update the state
   };
 
+  const handleDismiss = () => {
+    dialogRef.current.close();
+    isRepeatable && onEndDay();
+  };
+
   let cardStatusStyles;
 
   switch (status) {
@@ -147,7 +154,7 @@ const CalendarCard = ({
         onClick={handleClick}
         style={{
           cursor:
-            status !== CARD_STATES.AVAILABLE && !forceAvailable
+            status !== CARD_STATES.AVAILABLE && !isRepeatable
               ? "not-allowed"
               : "pointer",
 
@@ -191,7 +198,7 @@ const CalendarCard = ({
             </Text>
 
             {status === CARD_STATES.AVAILABLE ||
-              (forceAvailable && (
+              (isRepeatable && (
                 <Circle size={48} background={skinVars.colors.brand}>
                   <IconChevronRightRegular
                     size={24}
@@ -210,7 +217,7 @@ const CalendarCard = ({
         description={eventDescription}
         content={content ? content({ closeModal: handleCloseModal }) : null}
         onClose={handleEndDay}
-        onCancel={() => dialogRef.current.close()}
+        onCancel={handleDismiss}
       />
     </>
   );

diff --git a/src/pages/advent-calendar-2024/pages/calendar-view.jsx b/src/pages/advent-calendar-2024/pages/calendar-view.jsx
@@ -132,7 +132,7 @@ const CalendarView = () => {
         status={getDayStatus(date)}
         onEndDay={() => markDayAsCompleted(date)}
         illustration={contentByDate[date]?.illustration}
-        forceAvailable={contentByDate[date]?.forceAvailable}
+        repeatable={contentByDate[date]?.repeatable}
       />
     ));
   }, [completedDays, calendarDays]);

diff --git a/src/pages/advent-calendar-2024/utils/content-config.jsx b/src/pages/advent-calendar-2024/utils/content-config.jsx
@@ -13,14 +13,15 @@ import WordleGame from "../components/games/wordle";
 
 const contentByDate = {
   "2024-11-20": {
-    forceAvailable: true,
+    repeatable: true,
     illustration: <IllustrationWishesLetter />,
     content: ({ closeModal }) => <HigherOrLower onFinish={closeModal} />,
     title: "Higher or Lower",
     description:
       "Answer the question by guessing whether the number is higher or lower than the given data.",
   },
   "2024-11-21": {
+    repeatable: true,
     illustration: <IllustrationWoolClothes />,
     content: ({ closeModal }) => <MemoryGame onFinish={closeModal} />,
     title: "Memory cards",