@nualang/nualang-ui-components 0.1.1410 → 0.1.1411

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -167,7 +167,7 @@ export default function AssignmentCard({
                 borderRadius: 1,
                 fontWeight: "bold"
               },
-              children: t("NEW")
+              children: t("new")
             })]
           })
         }), /*#__PURE__*/_jsx(Grid, {

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -514,7 +514,7 @@ export default function FeedbackCard({
                             setHasBeenEdited(true);
                             setIsSubmitted(false);
                           },
-                          placeholder: t("Write your feedback here")
+                          placeholder: t("write_your_feedback_here")
                         })
                       })]
                     })

package/dist/Dialogs/BotPreview/BotPreview.js

@@ -237,7 +237,7 @@ function BotPreview({
         textAlign: "center",
         mb: 1
       },
-      children: t("Preview")
+      children: t("preview")
     }), bot && bot.picture && /*#__PURE__*/_jsx(Box, {
       sx: {
         textAlign: "center"

package/dist/Dialogs/InviteDialog/InviteDialog.js

@@ -200,11 +200,11 @@ function InviteDialog({
   return /*#__PURE__*/_jsx(ResponsiveDialog, {
     open: open,
     handleClose: handleClose,
-    dialogTitle: t("Invite Students"),
+    dialogTitle: t("invite_students"),
     handleSubmit: isWaysideClassroom ? () => {
       window.open(learningSiteURL, "wayside-window");
     } : null,
-    submitText: isWaysideClassroom ? t("Visit Learning Site") : null,
+    submitText: isWaysideClassroom ? t("visit_learning_site") : null,
     children: isWaysideClassroom ? /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsxs(DialogContentText, {
         sx: {

package/dist/Editors/Bot/Bot.js

@@ -26,6 +26,7 @@ import Editor from "./Editor/Editor";
 
 // utils
 import { jsonToRivescript, rivescriptToJson } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import useDebounce from "../../hooks/useDebounce";
 import useRecognition from "../../hooks/useRecognition";
 import { botErrorMessage } from "../../utils/constants";
@@ -217,16 +218,6 @@ function Bot({
     }),
     spotlightPadding: 8,
     target: "#editorSidebar"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("bot_editor_flow_chart")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("bot_editor_flow_chart_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#editorFlowChart"
   }, {
     content: /*#__PURE__*/_jsx("h2", {
       children: t("bot_editor_share")
@@ -260,10 +251,11 @@ function Bot({
   };
   useEffect(() => {
     if (open && !localStorage.getItem("bot-editor-tour-completed")) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open]);
   useEffect(() => {
@@ -303,10 +295,11 @@ function Bot({
       }));
     }
     if (tabValue === 0 && !localStorage.getItem(`bot-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [tabValue]);
   const handleChangeTab = (event, newValue) => {
@@ -670,13 +663,14 @@ function Bot({
           }), /*#__PURE__*/_jsx("div", {
             className: "grow-1"
           }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
+            title: t("rewatch_tutorial"),
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
+              onClick: () => startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              }))),
               size: "large",
               children: /*#__PURE__*/_jsx(LightbulbIcon, {})
             })
@@ -825,6 +819,7 @@ function Bot({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Editors/Bot/Editor/Editor.js

@@ -475,7 +475,7 @@ function Editor({
           width: "100%"
         },
         children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("formatting_options"),
+          title: isDisabled ? t("please_select_a_textfield") : t("formatting_options"),
           children: /*#__PURE__*/_jsx("span", {
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
@@ -489,7 +489,7 @@ function Editor({
             })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: isDisabled ? t("Please select a textfield") : t("insert_link"),
+          title: isDisabled ? t("please_select_a_textfield") : t("insert_link"),
           children: /*#__PURE__*/_jsx("span", {
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",

package/dist/Editors/Roleplay/Roleplay.js

@@ -26,6 +26,7 @@ import useExerciseState from "../../hooks/useExerciseState";
 import useConfirm from "../../hooks/useConfirm";
 import { handleScriptDownload } from "../../hooks/handleScriptDownload";
 import { formatMarkdownNewlines } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { removeExtraWhiteSpaces } from "../../utils/index";
 import GenerateQuestion from "../../Dialogs/GenerateQuestion/GenerateQuestion";
@@ -388,18 +389,20 @@ function Roleplay({
       }));
     }
     if (tabValue === 0 && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [tabValue]);
   useEffect(() => {
     if (open && !localStorage.getItem(`roleplay-editor-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open]);
 
@@ -719,13 +722,14 @@ function Roleplay({
             },
             children: roleplay.roleplayName
           }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
+            title: t("rewatch_tutorial"),
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
+              onClick: () => startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              }))),
               size: "large",
               children: /*#__PURE__*/_jsx(LightbulbIcon, {})
             })
@@ -937,6 +941,7 @@ function Roleplay({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Bot/Bot.js

@@ -21,6 +21,7 @@ import useExerciseState from "../../hooks/useExerciseState";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import NualaSignInImage from "../../img/nuala_sign_in.svg";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { useTheme } from "@mui/material/styles";
 import config from "../../config";
 import { useNavigate } from "react-router";
@@ -393,10 +394,11 @@ function Bot({
   }, [currentPhrase, bot, isSpeaking]);
   useEffect(() => {
     if (open && !run && !localStorage.getItem(`bot-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else {
       if (open && !joyrideRewatched && !run && bot.studentInstructions && bot.studentInstructions !== "") {
         handleClickOpenInstructions();
@@ -424,15 +426,16 @@ function Bot({
 
   const topBarActions = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: t("Rewatch tutorial"),
+      title: t("rewatch_tutorial"),
       children: /*#__PURE__*/_jsx(IconButton, {
         color: "inherit",
         onClick: () => {
           setJoyrideRewatched(true);
-          setJoyrideState({
-            ...joyrideState,
-            run: true
-          });
+          startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+            ...prevState,
+            run: true,
+            steps
+          })));
         },
         size: "large",
         children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -698,6 +701,7 @@ function Bot({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.js

@@ -22,12 +22,11 @@ import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
 import useExerciseState from "../../hooks/useExerciseState";
 import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
 import useRecognition from "../../hooks/useRecognition";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
 import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
 import { removeExtraWhiteSpaces, removeAllSymbols } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import getVoiceImages from "../../utils/voiceImages";
 import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -340,16 +339,6 @@ function ListenAndSpeak({
     }),
     placement: "center",
     target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("pronunciation_exercise_speak")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listen_and_speak_exercise_speak_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#speakButton"
   }, {
     content: /*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsx("h2", {
@@ -429,10 +418,11 @@ function ListenAndSpeak({
   }, [isSpeaking, isSocketConnected]);
   useEffect(() => {
     if (open && !localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
       handlePronunciationTourFinished();
     }
@@ -524,15 +514,16 @@ function ListenAndSpeak({
             children: t("meaning")
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -950,6 +941,7 @@ function ListenAndSpeak({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Listener/Listener.js

@@ -30,6 +30,7 @@ import { Sortable, SortableGridDndContextWrapper } from "../../utils/dragAndDrop
 
 // utils
 import { capitalize, removeExtraWhiteSpaces } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import useWordBankFocus from "../../hooks/useWordBankFocus";
 import getVoiceImages from "../../utils/voiceImages";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -379,16 +380,6 @@ function Listener({
     }),
     spotlightPadding: 8,
     target: "#speakButton"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listening_exercise_voice_options")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listening_exercise_voice_options_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#voiceOptions"
   }, {
     content: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("h2", {
@@ -480,10 +471,11 @@ function Listener({
   }, [useWordBank]);
   useEffect(() => {
     if (open && !run && !localStorage.getItem(`listening-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`listening-exercise-tour-completed`)) {
       handleListeningTourFinished();
       setTimeout(() => setWordBankTooltipOpen(true), 1000);
@@ -586,15 +578,16 @@ function Listener({
           },
           children: t("listening")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -735,6 +728,7 @@ function Listener({
                 marginLeft: 1
               },
               children: learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
+                id: "speakButton",
                 sx: theme => ({
                   [theme.breakpoints.down("md")]: {
                     minWidth: 185
@@ -886,6 +880,7 @@ function Listener({
               })
             })
           }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {
+            id: "useWordBank",
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: t("use_wordbank_if_stuck"),
               enterDelay: 500,
@@ -909,10 +904,7 @@ function Listener({
                     run: false
                   }));
                 },
-                startIcon: /*#__PURE__*/_jsx(Bank, {})
-                // Commented out to fix lint warning - jsx-no-duplicate-props
-                // id="useWordBank"
-                ,
+                startIcon: /*#__PURE__*/_jsx(Bank, {}),
                 children: t("use_word_bank")
               })
             })
@@ -1010,6 +1002,7 @@ function Listener({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Meaning/Meaning.js

@@ -26,6 +26,7 @@ import { useTheme } from "@mui/material/styles";
 import getVoiceImages from "../../utils/voiceImages";
 import { useNavigate } from "react-router";
 import { removeExtraWhiteSpaces, shuffle } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   appBar: {
@@ -335,10 +336,11 @@ function Meaning({
   };
   useEffect(() => {
     if (open && !run && !localStorage.getItem("meaning-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prev => ({
         ...prev,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-exercise-tour-completed")) {
       handleTranslationTourFinished();
     }
@@ -454,15 +456,16 @@ function Meaning({
           },
           children: t("meaning")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -787,6 +790,7 @@ function Meaning({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/MeaningReadWrite/MeaningReadWriteGame.js

@@ -5,6 +5,7 @@ import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import useExerciseState from "../../hooks/useExerciseState";
 import { removeExtraWhiteSpaces } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { Grid, Slide, IconButton, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
 import { styled } from "@mui/system";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
@@ -268,19 +269,12 @@ export default function MeaningReadWrite({
     }),
     spotlightPadding: 8,
     target: "#skipButton"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("change_voice_speed")
-    }),
-    spotlightPadding: 8,
-    target: "#change-voice-speed"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_mute")
-    }),
-    spotlightPadding: 8,
-    target: "#mute"
-  }, {
+  },
+  // No change_voice_speed or exercise_mute step: this exercise has neither control.
+  // It speaks only through the answer result dialogs, and that path calls the raw
+  // handleSpeak prop rather than the muteSound-aware speak() from useExerciseState,
+  // so a mute button here would not silence anything the learner hears.
+  {
     content: /*#__PURE__*/_jsx("h2", {
       children: t("exercise_restart")
     }),
@@ -298,10 +292,11 @@ export default function MeaningReadWrite({
   } = joyrideState;
   useEffect(() => {
     if (open && !run && !localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
-      setJoyrideState(prev => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prev => ({
         ...prev,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem("meaning-read-write-exercise-tour-completed")) {
       handleTranslationTourFinished();
     }
@@ -429,10 +424,11 @@ export default function MeaningReadWrite({
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -714,6 +710,7 @@ export default function MeaningReadWrite({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -28,6 +28,7 @@ import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
 import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
 import { removeExtraWhiteSpaces, removeAllSymbols } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import getVoiceImages from "../../utils/voiceImages";
 import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -429,10 +430,11 @@ function Pronouncer({
   }, [isSpeaking, isSocketConnected]);
   useEffect(() => {
     if (open && !localStorage.getItem(`pronunciation-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`pronunciation-exercise-tour-completed`)) {
       handlePronunciationTourFinished();
     }
@@ -508,15 +510,16 @@ function Pronouncer({
           },
           children: t("pronunciation")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -723,6 +726,7 @@ function Pronouncer({
                   muteSound: muteSound,
                   t: t
                 }), learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
+                  id: "speakButton",
                   children: /*#__PURE__*/_jsx(WaveFormLite, {
                     src: pollyResult ? pollyResult : "",
                     controls: false,
@@ -959,6 +963,7 @@ function Pronouncer({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -28,6 +28,7 @@ import { formatMarkdownNewlines, randomId } from "../../utils/index";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import { removeExtraWhiteSpaces } from "../../utils";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
@@ -579,10 +580,11 @@ function Roleplay({
   };
   useEffect(() => {
     if (open && !localStorage.getItem(`roleplay-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open]);
   useEffect(() => {
@@ -922,6 +924,7 @@ function Roleplay({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Roleplay/Roleplay.js

@@ -380,6 +380,7 @@ function Roleplay({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Exercises/Translator/Translator.js

@@ -33,6 +33,7 @@ import { useNavigate } from "react-router";
 
 // utils
 import { capitalize, removeExtraWhiteSpaces, removeAllSymbols } from "../../utils/index";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import useWordBankFocus from "../../hooks/useWordBankFocus";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -475,10 +476,11 @@ function Translator({
   }, [useWordBank]);
   useEffect(() => {
     if (open && !run && !localStorage.getItem(`translation-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     } else if (open && !run && !joyrideRewatched && localStorage.getItem(`translation-exercise-tour-completed`)) {
       handleTranslationTourFinished();
       setTimeout(() => setWordBankTooltipOpen(true), 1000);
@@ -586,15 +588,16 @@ function Translator({
           },
           children: t("translation")
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
+          title: t("rewatch_tutorial"),
           children: /*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             onClick: () => {
               setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
+              startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              })));
             },
             size: "large",
             children: /*#__PURE__*/_jsx(LightbulbIcon, {})
@@ -754,6 +757,7 @@ function Translator({
                   t: t,
                   languageTag: languageTag
                 }), learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
+                  id: "speakButton",
                   children: /*#__PURE__*/_jsx(WaveFormLite, {
                     src: pollyResult ? pollyResult : "",
                     controls: false,
@@ -911,6 +915,7 @@ function Translator({
               })]
             })
           }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {
+            id: "useWordBank",
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: t("use_wordbank_if_stuck"),
               enterDelay: 500,
@@ -1009,6 +1014,7 @@ function Translator({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -48,7 +48,7 @@ function FeedbackForm({
   const theme = useTheme();
   const [allSelected, setAllSelected] = useState("false");
   const handleAttendeeChange = event => {
-    if (event.target.value === t("All")) {
+    if (event.target.value === t("all")) {
       setAllSelected(true);
       handleChange({
         target: {
@@ -305,7 +305,7 @@ function FeedbackForm({
           label: "Student",
           disabled: attendeesData?.length < 1,
           children: [{
-            username: t("All")
+            username: t("all")
           }, ...attendeesData].map((attendee, index) => /*#__PURE__*/_jsx(MenuItem, {
             value: index === 0 ? "All" : attendeesData[index - 1],
             children: /*#__PURE__*/_jsxs(Box, {

package/dist/Forms/ImageSelector/ImageSelector.js

@@ -524,7 +524,7 @@ function ImageSelector({
         children: /*#__PURE__*/_jsx(Typography, {
           component: "p",
           variant: "body1",
-          children: t("Drag and drop image from your computer")
+          children: t("Drag_and_drop_image_from_your_computer")
         })
       })]
     }), /*#__PURE__*/_jsxs("div", {
@@ -542,7 +542,7 @@ function ImageSelector({
           className: classes.button,
           onClick: () => setIsImageLibraryOpen(!isImageLibraryOpen),
           startIcon: /*#__PURE__*/_jsx(CollectionsIcon, {}),
-          children: t("Image Library")
+          children: t("image_library")
         }), /*#__PURE__*/_jsx("input", {
           accept: "image/*",
           className: classes.input,
@@ -556,7 +556,7 @@ function ImageSelector({
             className: classes.button,
             component: "span",
             startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
-            children: t("Upload Image")
+            children: t("upload_image")
           })
         }), /*#__PURE__*/_jsx(DefaultButton, {
           variant: "outlined",

package/dist/Forms/PdfUploader/PdfUploader.js

@@ -214,7 +214,7 @@ function PdfUploader({
         },
         children: [/*#__PURE__*/_jsx(Grid, {
           children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Previous"),
+            title: t("previous"),
             children: /*#__PURE__*/_jsx("span", {
               children: /*#__PURE__*/_jsx(IconButton, {
                 size: "large",
@@ -231,7 +231,7 @@ function PdfUploader({
           })
         }), /*#__PURE__*/_jsx(Grid, {
           children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Next"),
+            title: t("next"),
             children: /*#__PURE__*/_jsx("span", {
               children: /*#__PURE__*/_jsx(IconButton, {
                 size: "large",

package/dist/Forms/Settings/Settings.js

@@ -50,7 +50,7 @@ export default function Settings({
       label: t("subscription"),
       id: "Subscription"
     }, !isGenerated ? {
-      label: t("Email Notifications"),
+      label: t("email_notifications"),
       id: "EmailNotifications"
     } : null];
   } else {

package/dist/Live/Game/Game.js

@@ -24,6 +24,7 @@ import GameSettings from "../GameSettings/GameSettings";
 import FinalScoreDrawer from "../Misc/FinalScoreDrawer/FinalScoreDrawer";
 import RewardEarned from "../../Dialogs/RewardEarned/RewardEarned";
 import LiveGameTutorial from "../../Dialogs/LiveGameTutorial/LiveGameTutorial";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import HelpIcon from "@mui/icons-material/Help";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -244,10 +245,11 @@ export default function Game({
   });
   useEffect(() => {
     if (open && isCreator && !localStorage.getItem(`nualang-live-tour-completed`)) {
-      setJoyrideState(prevState => ({
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
+        run: true,
+        steps
+      })));
     }
   }, [open, isCreator]);
   const handleJoyrideCallback = data => {
@@ -368,13 +370,14 @@ export default function Game({
               children: /*#__PURE__*/_jsx(SettingsIcon, {})
             })
           }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("Rewatch tutorial"),
+            title: t("rewatch_tutorial"),
             children: /*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
-              onClick: () => setJoyrideState({
-                ...joyrideState,
-                run: true
-              }),
+              onClick: () => startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
+                ...prevState,
+                run: true,
+                steps
+              }))),
               size: "large",
               children: /*#__PURE__*/_jsx(LightbulbIcon, {})
             })
@@ -650,6 +653,7 @@ export default function Game({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/Live/GameMembers/GameMembers.js

@@ -69,7 +69,7 @@ export default function GameMembers({
         id: "search",
         name: "search",
         "data-cy": "search",
-        label: t("Search"),
+        label: t("search"),
         value: searchText,
         onChange: ev => setSearchText(ev.target.value),
         margin: "dense",
@@ -94,7 +94,7 @@ export default function GameMembers({
               setMembersInRoomOpen(!membersInRoomOpen);
             },
             children: [/*#__PURE__*/_jsx(ListItemText, {
-              primary: "In Game"
+              primary: t("in_game")
             }), /*#__PURE__*/_jsx(Typography, {
               sx: {
                 pr: 1
@@ -134,7 +134,7 @@ export default function GameMembers({
             setMembersNotInRoomOpen(!membersNotInRoomOpen);
           },
           children: [/*#__PURE__*/_jsx(ListItemText, {
-            primary: "Not In Game"
+            primary: t("not_in_game")
           }), /*#__PURE__*/_jsx(Typography, {
             sx: {
               pr: 1

package/dist/Live/GameSettings/GameSettings.js

@@ -86,7 +86,7 @@ export default function GameSettings({
           variant: "h5",
           component: "h1",
           gutterBottom: true,
-          children: "Game Settings"
+          children: t("game_settings")
         }), /*#__PURE__*/_jsx(Grid, {
           sx: {
             mt: 2

package/dist/Live/HowToJoin/HowToJoin.js

@@ -5,7 +5,20 @@ import SwipeableDrawer from "@mui/material/SwipeableDrawer";
 import { useTheme } from "@mui/material/styles";
 import { QRCode } from "react-qrcode-logo";
 import nualangImage from "../../img/nualangSquareIcon.svg";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+// Sentinel handed to i18next as the interpolation value so we can split the
+// translated sentence and drop a React node in the placeholder's position.
+// Splitting on the real value would break when it is empty or repeated, and
+// splitting on the raw "{{name}}" token would not work because i18next has
+// already substituted it.
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const PLACEHOLDER = "\u0000";
+function withNode(sentence, node) {
+  const [before, after = ""] = sentence.split(PLACEHOLDER);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [before, node, after]
+  });
+}
 export default function HowToJoin({
   t,
   classroomName,
@@ -30,11 +43,11 @@ export default function HowToJoin({
         variant: "h5",
         component: "h1",
         gutterBottom: true,
-        children: "How to Join the Game"
+        children: t("how_to_join_title")
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         gutterBottom: true,
-        children: "To join the game, follow these steps:"
+        children: t("how_to_join_intro")
       }), /*#__PURE__*/_jsxs(List, {
         sx: {
           listStyleType: "decimal",
@@ -48,20 +61,22 @@ export default function HowToJoin({
             primary: /*#__PURE__*/_jsx(Typography, {
               component: "span",
               variant: "body1",
-              children: "Sign in to your account."
+              children: t("how_to_join_sign_in")
             })
           })
         }), /*#__PURE__*/_jsx(ListItem, {
           children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsxs(Typography, {
+            primary: /*#__PURE__*/_jsx(Typography, {
               component: "span",
               variant: "body1",
-              children: ["Open the classroom", " ", /*#__PURE__*/_jsx(Link, {
+              children: withNode(t("how_to_join_open_classroom", {
+                classroom: PLACEHOLDER
+              }), /*#__PURE__*/_jsx(Link, {
                 href: classroomURL,
                 target: "_blank",
                 rel: "noreferrer",
                 children: classroomName
-              }), " ", "or scan its QR Code below", " "]
+              }))
             })
           })
         }), /*#__PURE__*/_jsx(Box, {
@@ -81,12 +96,14 @@ export default function HowToJoin({
           })
         }), /*#__PURE__*/_jsx(ListItem, {
           children: /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsxs(Typography, {
+            primary: /*#__PURE__*/_jsx(Typography, {
               component: "span",
               variant: "body1",
-              children: ["Look for the ", /*#__PURE__*/_jsx("b", {
+              children: withNode(t("how_to_join_find_button", {
+                button: PLACEHOLDER
+              }), /*#__PURE__*/_jsx("b", {
                 children: t("join_live_game")
-              }), " button and click on it."]
+              }))
             })
           })
         }), /*#__PURE__*/_jsx(ListItem, {
@@ -94,7 +111,7 @@ export default function HowToJoin({
             primary: /*#__PURE__*/_jsx(Typography, {
               component: "span",
               variant: "body1",
-              children: "Get ready to play."
+              children: t("how_to_join_get_ready")
             })
           })
         })]

package/dist/Live/LiveListener/LiveListener.js

@@ -450,10 +450,7 @@ function LiveListener({
               onClick: () => {
                 handleUseWordBank();
               },
-              startIcon: /*#__PURE__*/_jsx(Bank, {})
-              // Commented out to fix lint warning - jsx-no-duplicate-props
-              // id="useWordBank"
-              ,
+              startIcon: /*#__PURE__*/_jsx(Bank, {}),
               children: t("use_word_bank")
             })
           })

package/dist/Misc/ImageLibrary/ImageLibrary.js

@@ -104,7 +104,7 @@ const Search = ({
     className: className,
     onChange: e => setSearchText(e.target.value),
     type: "text",
-    placeholder: t("Search images"),
+    placeholder: t("search_images"),
     value: searchText,
     margin: "dense",
     variant: "outlined",
@@ -213,7 +213,7 @@ function ImageLibrary({
         id: "selectedCategory",
         name: "selectedCategory",
         "data-cy": "selectedCategory",
-        label: t("Categories"),
+        label: t("categories"),
         value: selectedCategory || "",
         onClick: event => {
           handleCategoryClick(event.target.dataset.value);
@@ -237,7 +237,7 @@ function ImageLibrary({
         className: classes.categories,
         children: [/*#__PURE__*/_jsx(Typography, {
           className: classes.categoriesTitle,
-          children: t("Categories")
+          children: t("categories")
         }), /*#__PURE__*/_jsx(List, {
           className: classes.list,
           component: "nav",

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -17,6 +17,7 @@ import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import NewText from "../../img/NewText.svg";
 import { Joyride, STATUS } from "react-joyride";
+import { startJoyrideWhenReady } from "../../utils/joyride";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TabPanel(props) {
   const {
@@ -192,25 +193,27 @@ function ResponsiveTabs({
     spotlightPadding: 8,
     target: "#discussGroupedDiscussions"
   }, {
+    // Submissions no longer have their own list — they were combined into the
+    // grouped discussions view, so this step points at the same container.
     content: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_refresh_discussions")
+        children: t("discuss_submissions")
       }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_refresh_discussions_desc")
+        children: t("discuss_submissions_desc")
       })]
     }),
     spotlightPadding: 8,
-    target: "#discussRefreshScheduled"
+    target: "#discussGroupedDiscussions"
   }, {
     content: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_submissions")
+        children: t("discuss_refresh_discussions")
       }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_submissions_desc")
+        children: t("discuss_refresh_discussions_desc")
       })]
     }),
     spotlightPadding: 8,
-    target: "#discussSubmissions"
+    target: "#discussRefreshScheduled"
   }];
   const discussTabIndex = tabs.findIndex(tab => tab.id === "Discuss");
   const [joyrideState, setJoyrideState] = useState({
@@ -229,19 +232,28 @@ function ResponsiveTabs({
     creatorRun,
     creatorSteps
   } = creatorJoyrideState;
+
+  // The video chat flags resolve async, and the creator's Discuss tab is rendered on
+  // `isCreator` alone - it does not wait for `isVideoChatEnabledInSettings`. So a
+  // creator can already be sitting on Discuss when the setting flips on, with neither
+  // `value` nor `discussTabIndex` changing. Keep the flags in the deps so the tour still
+  // starts, and guard on `run`/`creatorRun` so a flag change mid-tour does not cancel
+  // the tour's poll and restart it from the first step.
   useEffect(() => {
-    if (discussTabIndex === value && !isCreator && !localStorage.getItem(`student-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
-      setJoyrideState(prevState => ({
+    if (discussTabIndex === value && !isCreator && !run && !localStorage.getItem(`student-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
+      return startJoyrideWhenReady(joyrideSteps, steps => setJoyrideState(prevState => ({
         ...prevState,
-        run: true
-      }));
-    } else if (discussTabIndex === value && isCreator && !localStorage.getItem(`creator-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
-      setCreatorJoyrideState(prevState => ({
+        run: true,
+        steps
+      })));
+    } else if (discussTabIndex === value && isCreator && !creatorRun && !localStorage.getItem(`creator-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
+      return startJoyrideWhenReady(creatorJoyrideSteps, creatorSteps => setCreatorJoyrideState(prevState => ({
         ...prevState,
-        creatorRun: true
-      }));
+        creatorRun: true,
+        creatorSteps
+      })));
     }
-  }, [value, discussTabIndex]);
+  }, [value, discussTabIndex, isCreator, isVideoChatEnabled, isVideoChatEnabledInSettings, run, creatorRun]);
   const handleJoyrideCallback = data => {
     const {
       status,
@@ -336,6 +348,7 @@ function ResponsiveTabs({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {
@@ -358,6 +371,7 @@ function ResponsiveTabs({
         close: t("close"),
         last: t("last"),
         next: t("next"),
+        nextWithProgress: t("next_with_progress"),
         skip: t("skip")
       },
       options: {

package/dist/hooks/useConfirm.js

@@ -4,7 +4,7 @@ export default function useConfirm(t) {
     const confirmed = await ConfirmDialog({
       title: title || t("confirmation"),
       text: text || t("are_you_sure"),
-      submitText: submitText || t("Yes"),
+      submitText: submitText || t("yes"),
       isDelete: isDelete,
       isArchive: isArchive,
       isUnarchive: isUnarchive,

package/dist/utils/joyride.js

@@ -0,0 +1,127 @@
+/**
+ * Helpers for keeping react-joyride tours in sync with what is actually on screen.
+ *
+ * When a step's target is not in the DOM, react-joyride polls for it for
+ * `targetWaitTimeout` (1s by default) while showing its loading spinner, then emits
+ * TARGET_NOT_FOUND and jumps to the next step. To the user that reads as a step that
+ * "loads" and then gets skipped, and the "x of y" progress count includes steps they
+ * never see.
+ *
+ * Most of our tours target elements that are conditionally rendered - the speak button
+ * is hidden for Irish, the word bank toggle depends on course settings, the skip button
+ * is hidden in live games - so resolving the steps against the live DOM before the tour
+ * starts is what keeps the tour honest.
+ */
+
+const DEFAULT_TIMEOUT = 1000;
+const DEFAULT_INTERVAL = 50;
+
+/**
+ * Whether an element and all of its ancestors are visible.
+ *
+ * Mirrors react-joyride's own check. Being in the DOM is not enough for it: a target
+ * inside a `keepMounted` drawer or a closed MUI modal is present but hidden, and
+ * joyride treats that exactly like a missing target - spinner, then skip.
+ * @param element The element to check
+ * @returns {boolean}
+ */
+const isElementVisible = element => {
+  if (!element) return false;
+  let node = element;
+  while (node && node !== document.body) {
+    if (node instanceof HTMLElement) {
+      const {
+        display,
+        visibility
+      } = getComputedStyle(node);
+      if (display === "none" || visibility === "hidden") return false;
+    }
+    node = node.parentElement;
+  }
+  return true;
+};
+
+/**
+ * Returns true when a joyride step's target is on screen.
+ *
+ * A step with no target is never resolvable, and it is not merely useless: joyride
+ * validates the array with `steps.every(...)`, so one target-less step makes the whole
+ * array invalid, `setSteps` is skipped and the tour silently runs the stale list it
+ * already had. Those steps have to be dropped, not passed through.
+ *
+ * `body` is always present. Function targets are left for joyride to resolve, since
+ * calling one here would repeat whatever work it does.
+ * @param step A joyride step
+ * @returns {boolean}
+ */
+export const isJoyrideTargetPresent = step => {
+  const target = step && step.target;
+  if (!target) {
+    return false;
+  }
+  if (typeof target === "function") {
+    return true;
+  }
+  if (typeof target === "object") {
+    return "current" in target && isElementVisible(target.current);
+  }
+  if (typeof target !== "string") {
+    return false;
+  }
+  if (target === "body") {
+    return true;
+  }
+  try {
+    return isElementVisible(document.querySelector(target));
+  } catch (error) {
+    console.error(`Invalid joyride target selector: ${target}`, error);
+    return false;
+  }
+};
+
+/**
+ * Drops the steps whose target is not currently rendered. Only useful once the tour's
+ * targets have had a chance to mount - prefer `startJoyrideWhenReady` for that.
+ * @param steps The full list of joyride steps
+ * @returns {Array} The steps that have a target on screen
+ */
+export const resolveJoyrideSteps = (steps = []) => steps.filter(isJoyrideTargetPresent);
+
+/**
+ * Resolves a tour's steps once its targets have mounted, then hands them to `onReady`.
+ *
+ * Exercises put their tour inside a MUI `Dialog`, and a portal only renders its
+ * children on the render after the component that opens it commits. Filtering straight
+ * away in an effect would therefore drop every step, so poll until either every target
+ * has appeared or `timeout` is reached - whatever is missing by then is a target this
+ * screen does not render at all.
+ * @param steps The full list of joyride steps
+ * @param onReady Called once with the steps that have a target on screen
+ * @param options.timeout How long to wait for missing targets, in ms
+ * @param options.interval How often to re-check, in ms
+ * @returns {Function} Cancels the pending check - use it as an effect cleanup
+ */
+export const startJoyrideWhenReady = (steps = [], onReady, options = {}) => {
+  const {
+    timeout = DEFAULT_TIMEOUT,
+    interval = DEFAULT_INTERVAL
+  } = options;
+  let timeoutId = null;
+  let cancelled = false;
+  let waited = 0;
+  const check = () => {
+    if (cancelled) return;
+    const resolved = resolveJoyrideSteps(steps);
+    if (resolved.length === steps.length || waited >= timeout) {
+      onReady(resolved);
+      return;
+    }
+    waited += interval;
+    timeoutId = setTimeout(check, interval);
+  };
+  check();
+  return () => {
+    cancelled = true;
+    if (timeoutId) clearTimeout(timeoutId);
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1410",
+  "version": "0.1.1411",
   "type": "module",
   "main": "dist/index.js",
   "files": [