Make wizard stepping more robust

src/components/configuration/partials/wizard/NewThemeWizard.tsx

@@ -5,21 +5,20 @@ import BumperPage from "./BumperPage";
 import TitleSlidePage from "./TitleSlidePage";
 import WatermarkPage from "./WatermarkPage";
 import ThemeSummaryPage from "./ThemeSummaryPage";
-import WizardStepper from "../../../shared/wizard/WizardStepper";
+import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
 import { initialFormValuesNewThemes } from "../../../../configs/modalConfig";
 import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { NewThemeSchema } from "../../../../utils/validate";
 import { useAppDispatch } from "../../../../store";
 import { postNewTheme, ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
-import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the new theme wizard and the submission of values
  */
-const NewThemeWizard: React.FC<{
+const NewThemeWizard = ({
+	close
+}: {
 	close: () => void
-}> = ({
-	close,
 }) => {
 	const dispatch = useAppDispatch();
 	const initialValues = initialFormValuesNewThemes;
@@ -34,11 +33,13 @@ const NewThemeWizard: React.FC<{
 		setPageCompleted,
 	 } = usePageFunctions(0, initialValues);
 
+	type StepName = "generalForm" | "bumperForm" | "trailerForm" | "titleSlideForm" | "watermarkForm" | "summary";
+	type Step = WizardStep & {
+		name: StepName,
+	}
+
 	// Caption of steps used by Stepper
-	const steps: {
-		name: string
-		translation: ParseKeys
-	}[] = [
+	const steps: Step[] = [
 		{
 			name: "generalForm",
 			translation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",
@@ -66,7 +67,7 @@ const NewThemeWizard: React.FC<{
 	];
 
 	// Validation schema of current page
-	const currentValidationSchema = NewThemeSchema[page];
+	const currentValidationSchema = NewThemeSchema[steps[page].name];
 
 	const handleSubmit = (values: ThemeDetailsInitialValues) => {
 		dispatch(postNewTheme(values));
@@ -94,46 +95,46 @@ const NewThemeWizard: React.FC<{
 							{/* Stepper that shows each step of wizard as header */}
 							<WizardStepper
 								steps={steps}
-								page={page}
-								setPage={setPage}
+								activePageIndex={page}
+								setActivePage={setPage}
 								completed={pageCompleted}
 								setCompleted={setPageCompleted}
 								formik={formik}
 							/>
 							<div>
-								{page === 0 && (
+								{steps[page].name === "generalForm" && (
 									<GeneralPage formik={formik} nextPage={nextPage} />
 								)}
-								{page === 1 && (
+								{steps[page].name === "bumperForm" && (
 									<BumperPage
 										formik={formik}
 										nextPage={nextPage}
 										previousPage={previousPage}
 									/>
 								)}
-								{page === 2 && (
+								{steps[page].name === "trailerForm" && (
 									<BumperPage
 										formik={formik}
 										nextPage={nextPage}
 										previousPage={previousPage}
 										isTrailer
 									/>
 								)}
-								{page === 3 && (
+								{steps[page].name === "titleSlideForm" && (
 									<TitleSlidePage
 										formik={formik}
 										nextPage={nextPage}
 										previousPage={previousPage}
 									/>
 								)}
-								{page === 4 && (
+								{steps[page].name === "watermarkForm" && (
 									<WatermarkPage
 										formik={formik}
 										nextPage={nextPage}
 										previousPage={previousPage}
 									/>
 								)}
-								{page === 5 && (
+								{steps[page].name === "summary" && (
 									<ThemeSummaryPage
 										formik={formik}
 										previousPage={previousPage}

src/components/configuration/partials/wizard/ThemeDetails.tsx

@@ -43,7 +43,7 @@ const ThemeDetails = ({
 
 	// information about tabs
 	const tabs: {
-		name: string
+		name: "generalForm" | "bumperForm" | "trailerForm" | "titleSlideForm" | "watermarkForm" | "usage"
 		tabTranslation: ParseKeys
 		translation: ParseKeys
 		accessRole: string
@@ -87,7 +87,7 @@ const ThemeDetails = ({
 	];
 
 	// Validation schema of current page
-	const currentValidationSchema = NewThemeSchema[page];
+	const currentValidationSchema = NewThemeSchema[tabs[page].name];
 
 	// update theme
 	const handleSubmit = (values: ThemeDetailsInitialValues) => {

src/components/events/partials/modals/EditScheduledEventsModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Formik } from "formik";
 import { initialFormValuesEditScheduledEvents } from "../../../../configs/modalConfig";
-import WizardStepper from "../../../shared/wizard/WizardStepper";
+import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
 import EditScheduledEventsGeneralPage from "../ModalTabsAndPages/EditScheduledEventsGeneralPage";
 import EditScheduledEventsEditPage from "../ModalTabsAndPages/EditScheduledEventsEditPage";
 import EditScheduledEventsSummaryPage from "../ModalTabsAndPages/EditScheduledEventsSummaryPage";
@@ -21,7 +21,6 @@ import {
 } from "../../../../slices/eventSlice";
 import { fetchRecordings } from "../../../../slices/recordingSlice";
 import { Event } from "../../../../slices/eventSlice";
-import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the edit scheduled bulk action
@@ -58,10 +57,12 @@ const EditScheduledEventsModal = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const steps: {
-		translation: ParseKeys
-		name: string
-	}[] = [
+	type StepName = "general" | "edit" | "summary";
+	type Step = WizardStep & {
+		name: StepName,
+	}
+
+	const steps: Step[] = [
 		{
 			translation: "BULK_ACTIONS.EDIT_EVENTS.GENERAL.CAPTION",
 			name: "general",
@@ -137,20 +138,20 @@ const EditScheduledEventsModal = ({
 							{/* Stepper that shows each step of wizard as header */}
 							<WizardStepper
 								steps={steps}
-								page={page}
-								setPage={setPage}
+								activePageIndex={page}
+								setActivePage={setPage}
 								completed={pageCompleted}
 								setCompleted={setPageCompleted}
 								formik={formik}
 							/>
 							<div>
-								{page === 0 && (
+								{steps[page].name === "general" && (
 									<EditScheduledEventsGeneralPage
 										formik={formik}
 										nextPage={nextPage}
 									/>
 								)}
-								{page === 1 && (
+								{steps[page].name === "edit" && (
 									<EditScheduledEventsEditPage
 										formik={formik}
 										nextPage={nextPage}
@@ -160,7 +161,7 @@ const EditScheduledEventsModal = ({
 										setPageCompleted={setPageCompleted}
 									/>
 								)}
-								{page === 2 && (
+								{steps[page].name === "summary" && (
 									<EditScheduledEventsSummaryPage
 										formik={formik}
 										previousPage={previousPage}

src/components/events/partials/modals/StartTaskModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Formik } from "formik";
 import { initialFormValuesStartTask } from "../../../../configs/modalConfig";
-import WizardStepper from "../../../shared/wizard/WizardStepper";
+import WizardStepper, { WizardStep } from "../../../shared/wizard/WizardStepper";
 import StartTaskGeneralPage from "../ModalTabsAndPages/StartTaskGeneralPage";
 import StartTaskWorkflowPage from "../ModalTabsAndPages/StartTaskWorkflowPage";
 import StartTaskSummaryPage from "../ModalTabsAndPages/StartTaskSummaryPage";
@@ -11,7 +11,6 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { checkValidityStartTaskEventSelection } from "../../../../utils/bulkActionUtils";
 import { useAppDispatch } from "../../../../store";
 import { Event } from "../../../../slices/eventSlice";
-import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the task start bulk action
@@ -35,10 +34,12 @@ const StartTaskModal = ({
 		setPageCompleted,
 	} = usePageFunctions(0, initialValues);
 
-	const steps: {
-		translation: ParseKeys
-		name: string
-	}[] = [
+	type StepName = "general" | "tasks" | "summary";
+	type Step = WizardStep & {
+		name: StepName,
+	}
+
+	const steps: Step[] = [
 		{
 			translation: "BULK_ACTIONS.SCHEDULE_TASK.GENERAL.CAPTION",
 			name: "general",
@@ -103,28 +104,28 @@ const StartTaskModal = ({
 							{/* Stepper that shows each step of wizard as header */}
 							<WizardStepper
 								steps={steps}
-								page={page}
-								setPage={setPage}
+								activePageIndex={page}
+								setActivePage={setPage}
 								completed={pageCompleted}
 								setCompleted={setPageCompleted}
 								formik={formik}
 							/>
 							<div>
-								{page === 0 && (
+								{steps[page].name === "general" && (
 									<StartTaskGeneralPage
 										formik={formik}
 										nextPage={nextPage}
 									/>
 								)}
-								{page === 1 && (
+								{steps[page].name === "tasks" && (
 									<StartTaskWorkflowPage
 										formik={formik}
 										nextPage={nextPage}
 										previousPage={previousPage}
 										setPageCompleted={setPageCompleted}
 									/>
 								)}
-								{page === 2 && (
+								{steps[page].name === "summary" && (
 									<StartTaskSummaryPage
 										formik={formik}
 										previousPage={previousPage}