@constructor-io/constructorio-ui-quizzes 1.18.2 → 1.19.0

package/lib/cjs/components/CioQuiz/actions.js

@@ -16,6 +16,7 @@ var QuestionTypes;
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";
     QuestionTypes["Complete"] = "complete";
+    QuestionTypes["JumpToQuestion"] = "jump_to_question";
 })(QuestionTypes = exports.QuestionTypes || (exports.QuestionTypes = {}));
 // API actions
 var QuizAPIActionTypes;
@@ -25,7 +26,8 @@ var QuizAPIActionTypes;
     QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS"] = 2] = "SET_QUIZ_RESULTS";
     QuizAPIActionTypes[QuizAPIActionTypes["SET_CURRENT_QUESTION"] = 3] = "SET_CURRENT_QUESTION";
     QuizAPIActionTypes[QuizAPIActionTypes["RESET_QUIZ"] = 4] = "RESET_QUIZ";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_SHARED_RESULTS"] = 5] = "SET_QUIZ_SHARED_RESULTS";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG"] = 6] = "SET_QUIZ_RESULTS_CONFIG";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG_ERROR"] = 7] = "SET_QUIZ_RESULTS_CONFIG_ERROR";
+    QuizAPIActionTypes[QuizAPIActionTypes["JUMP_TO_QUESTION"] = 5] = "JUMP_TO_QUESTION";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_SHARED_RESULTS"] = 6] = "SET_QUIZ_SHARED_RESULTS";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG"] = 7] = "SET_QUIZ_RESULTS_CONFIG";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG_ERROR"] = 8] = "SET_QUIZ_RESULTS_CONFIG_ERROR";
 })(QuizAPIActionTypes = exports.QuizAPIActionTypes || (exports.QuizAPIActionTypes = {}));

package/lib/cjs/components/CioQuiz/index.js

@@ -16,7 +16,7 @@ const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBa
 const actions_1 = require("./actions");
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getJumpToQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const [showShareModal, setShowShareModal] = (0, react_1.useState)(false);
     const { callbacks, sessionStateOptions, questionsPageOptions, resultCardOptions, resultsPageOptions, } = props;
@@ -40,6 +40,7 @@ function CioQuiz(props) {
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
         getSkipQuestionButtonProps,
+        getJumpToQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/cjs/components/CioQuiz/quizApiReducer.js

@@ -35,6 +35,9 @@ function apiReducer(state, action) {
         case actions_1.QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS: {
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_o = action.payload) === null || _o === void 0 ? void 0 : _o.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes: (_p = action.payload) === null || _p === void 0 ? void 0 : _p.quizResults.attributes });
         }
+        case actions_1.QuizAPIActionTypes.JUMP_TO_QUESTION: {
+            return Object.assign(Object.assign({}, state), { quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
+        }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG: {
             return Object.assign(Object.assign({}, state), { metadata: (_q = action.payload) === null || _q === void 0 ? void 0 : _q.quizResultsConfig.metadata, resultsConfig: (_r = action.payload) === null || _r === void 0 ? void 0 : _r.quizResultsConfig.results_config });
         }

package/lib/cjs/components/CioQuiz/quizLocalReducer.js

@@ -8,12 +8,6 @@ exports.initialState = {
     prevAnswerInputs: {},
     isQuizCompleted: false,
 };
-function answerInputReducer(state, action) {
-    return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: {
-            type: action.type,
-            value: action.payload.input,
-        } });
-}
 function handleNextQuestion(state) {
     var _a;
     const { answers, answerInputs } = state;
@@ -40,20 +34,21 @@ function handleNextQuestion(state) {
         // We now commit current answers to prevAnswerInputs
         prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
 }
+const handleAnswerInput = (state, action) => (Object.assign(Object.assign({}, state), { answerInputs: Object.assign(Object.assign({}, state.answerInputs), { [String(action.payload.questionId)]: {
+            type: action.type,
+            value: action.payload.input,
+        } }), isQuizCompleted: false }));
+// eslint-disable-next-line complexity
 function quizLocalReducer(state, action) {
+    var _a;
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.Cover:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.SingleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.MultipleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.SingleFilterValue:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.MultipleFilterValues:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
+            return handleAnswerInput(state, action);
         case actions_1.QuestionTypes.Next: {
             return handleNextQuestion(state);
         }
@@ -84,6 +79,22 @@ function quizLocalReducer(state, action) {
             const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
             return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isQuizCompleted: false });
         }
+        case actions_1.QuestionTypes.JumpToQuestion: {
+            const questionId = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.questionId;
+            if (questionId === undefined)
+                return state;
+            const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
+            // Remove all keys greater than questionId from answerInputs
+            const filteredAnswerInputs = {};
+            Object.keys(prevAnswerInputs).forEach((key) => {
+                if (parseInt(key, 10) >= questionId)
+                    return;
+                filteredAnswerInputs[key] = prevAnswerInputs[key];
+            });
+            // Calculate the number of questions to keep (questions <= questionId)
+            const questionsToKeep = Object.keys(filteredAnswerInputs).length;
+            return Object.assign(Object.assign({}, state), { answerInputs: filteredAnswerInputs, prevAnswerInputs: filteredAnswerInputs, answers: state.answers.slice(0, questionsToKeep), isQuizCompleted: false });
+        }
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);
         case actions_1.QuestionTypes.Hydrate:

package/lib/cjs/hooks/usePropsGetters/index.js

@@ -9,14 +9,16 @@ const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQ
 const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
 const useAddToFavoritesButtonProps_1 = tslib_1.__importDefault(require("./useAddToFavoritesButtonProps"));
 const useSkipQuestionButtonProps_1 = tslib_1.__importDefault(require("./useSkipQuestionButtonProps"));
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems) => {
+const useJumpToQuestionButtonProps_1 = tslib_1.__importDefault(require("./useJumpToQuestionButtonProps"));
+const usePropsGetters = ({ questionsPageOptions, favoriteItems, quizEvents, quizApiState, quizLocalState, }) => {
     var _a, _b, _c;
-    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, jumpToQuestion, } = quizEvents;
     const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(quizAnswerChanged, nextQuestion, (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(quizAnswerChanged, (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question);
-    const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
+    const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs, questionsPageOptions === null || questionsPageOptions === void 0 ? void 0 : questionsPageOptions.nextQuestionOnSingleSelect);
     const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
     const getSkipQuestionButtonProps = (0, useSkipQuestionButtonProps_1.default)(skipQuestion, quizApiState);
+    const getJumpToQuestionButtonProps = (0, useJumpToQuestionButtonProps_1.default)(jumpToQuestion, quizApiState, quizLocalState);
     const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
     const getResetQuizButtonProps = (0, react_1.useCallback)((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -88,6 +90,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         getQuizResultButtonProps,
         getQuizResultLinkProps,
         getSkipQuestionButtonProps,
+        getJumpToQuestionButtonProps,
     };
 };
 exports.default = usePropsGetters;

package/lib/cjs/hooks/usePropsGetters/useJumpToQuestionButtonProps.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useJumpToQuestionButtonProps(jumpToQuestion, quizApiState, quizLocalState) {
+    var _a, _b;
+    const getJumpToQuestionButtonProps = (0, react_1.useCallback)((id) => {
+        var _a, _b;
+        let buttonDisabled;
+        const currentQuestionId = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id;
+        const answerIds = Object.keys(quizLocalState.prevAnswerInputs);
+        const isInvalidQuestionId = answerIds && !answerIds.includes(String(id));
+        const isCurrentOrFutureQuestionId = currentQuestionId && id >= currentQuestionId;
+        if (isInvalidQuestionId || isCurrentOrFutureQuestionId) {
+            buttonDisabled = true;
+        }
+        return {
+            className: buttonDisabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button',
+            tabIndex: buttonDisabled ? -1 : 0,
+            'aria-disabled': buttonDisabled ? 'true' : 'false',
+            'aria-describedby': buttonDisabled ? 'jump-to-button-help' : '',
+            disabled: !!buttonDisabled,
+            type: 'button',
+            onClick: () => {
+                jumpToQuestion(id);
+            },
+        };
+    }, [
+        quizLocalState.prevAnswerInputs,
+        (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id,
+        jumpToQuestion,
+    ]);
+    return getJumpToQuestionButtonProps;
+}
+exports.default = useJumpToQuestionButtonProps;

package/lib/cjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
 // eslint-disable-next-line max-params
-function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs) {
+function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs, nextQuestionOnSingleSelect = true) {
     var _a;
     const type = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type;
     const hasImages = (_a = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.options) === null || _a === void 0 ? void 0 : _a.some((option) => option.images);
@@ -79,7 +79,8 @@ function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionDat
     (0, react_1.useEffect)(() => {
         if (((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleSelect ||
             (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleFilterValue) &&
-            singleSelectClicked.current) {
+            singleSelectClicked.current &&
+            nextQuestionOnSingleSelect) {
             nextQuestion();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/cjs/hooks/useQuiz.js

@@ -20,7 +20,13 @@ const useQuiz = (quizOptions) => {
     const quizEvents = (0, useQuizEvents_1.default)(quizOptions, cioClient, quizState);
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
-    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.favoriteItems);
+    const propGetters = (0, usePropsGetters_1.default)({
+        quizEvents,
+        quizApiState,
+        quizLocalState,
+        favoriteItems: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.favoriteItems,
+        questionsPageOptions: quizOptions.questionsPageOptions,
+    });
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {

package/lib/cjs/hooks/useQuizEvents/index.js

@@ -12,6 +12,7 @@ const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrate
 const utils_1 = require("../../utils");
 const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToFavorites"));
 const useQuizSkipClick_1 = tslib_1.__importDefault(require("./useQuizSkipClick"));
+const useJumpToQuestion_1 = tslib_1.__importDefault(require("./useJumpToQuestion"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { callbacks } = quizOptions;
@@ -38,6 +39,11 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         dispatchApiState,
         quizResults: quizApiState.quizResults,
     });
+    const jumpToQuestion = (0, useJumpToQuestion_1.default)({
+        dispatchLocalState,
+        dispatchApiState,
+        quizApiState,
+    });
     // Quiz rehydrate
     const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizOptions.quizId, quizSessionStorageState, dispatchLocalState);
     return {
@@ -49,6 +55,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         nextQuestion,
         skipQuestion,
         resetQuiz,
+        jumpToQuestion,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState,
     };

package/lib/cjs/hooks/useQuizEvents/useJumpToQuestion.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const useJumpToQuestion = (props) => {
+    var _a;
+    const { dispatchLocalState, dispatchApiState, quizApiState } = props;
+    const quizJumpToQuestionClickHandler = (0, react_1.useCallback)((questionId) => {
+        var _a;
+        const currentQuestionId = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.id;
+        if (questionId >= currentQuestionId) {
+            return;
+        }
+        dispatchLocalState({
+            type: actions_1.QuestionTypes.JumpToQuestion,
+            payload: { questionId },
+        });
+        dispatchApiState({
+            type: actions_1.QuizAPIActionTypes.JUMP_TO_QUESTION,
+            payload: { questionId },
+        });
+    }, [(_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.id, dispatchLocalState, dispatchApiState]);
+    return quizJumpToQuestionClickHandler;
+};
+exports.default = useJumpToQuestion;

package/lib/cjs/hooks/useQuizState/useQuizApiState.js

@@ -81,7 +81,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             dispatchQuizResultsConfig();
             return;
         }
-        const { onQuizResultsConfigLoaded } = callbacks;
+        const { onQuizResultsConfigLoaded } = callbacks || {};
         if (onQuizResultsConfigLoaded && (0, utils_1.isFunction)(onQuizResultsConfigLoaded)) {
             onQuizResultsConfigLoaded(quizApiState.resultsConfig, quizApiState.metadata);
         }

package/lib/cjs/hooks/useQuizState/useSessionStorageState.js

@@ -6,6 +6,7 @@ const constants_1 = require("../../constants");
 const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, enableHydration) => {
     var _a;
     const quizSessionStorageStateKey = (sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey) || constants_1.quizSessionStateKey;
+    const [quizData, setQuizData] = (0, react_1.useState)((0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey));
     // Save state to session storage
     (0, react_1.useEffect)(() => {
         var _a, _b;
@@ -14,9 +15,9 @@ const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, ena
             const data = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
             const dataToSave = Object.assign(Object.assign({}, data), { [quizId]: quizLocalState });
             (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizSessionStorageStateKey, JSON.stringify(dataToSave));
+            setQuizData(data);
         }
     }, [quizLocalState, quizSessionStorageStateKey, enableHydration, quizId]);
-    const quizData = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
     const skipToResults = !!enableHydration &&
         !!((_a = quizData === null || quizData === void 0 ? void 0 : quizData[quizId]) === null || _a === void 0 ? void 0 : _a.isQuizCompleted) &&
         !(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModalOnResults);

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.18.2';
+exports.default = '1.19.0';

package/lib/mjs/components/CioQuiz/actions.js

@@ -13,6 +13,7 @@ export var QuestionTypes;
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";
     QuestionTypes["Complete"] = "complete";
+    QuestionTypes["JumpToQuestion"] = "jump_to_question";
 })(QuestionTypes || (QuestionTypes = {}));
 // API actions
 export var QuizAPIActionTypes;
@@ -22,7 +23,8 @@ export var QuizAPIActionTypes;
     QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS"] = 2] = "SET_QUIZ_RESULTS";
     QuizAPIActionTypes[QuizAPIActionTypes["SET_CURRENT_QUESTION"] = 3] = "SET_CURRENT_QUESTION";
     QuizAPIActionTypes[QuizAPIActionTypes["RESET_QUIZ"] = 4] = "RESET_QUIZ";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_SHARED_RESULTS"] = 5] = "SET_QUIZ_SHARED_RESULTS";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG"] = 6] = "SET_QUIZ_RESULTS_CONFIG";
-    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG_ERROR"] = 7] = "SET_QUIZ_RESULTS_CONFIG_ERROR";
+    QuizAPIActionTypes[QuizAPIActionTypes["JUMP_TO_QUESTION"] = 5] = "JUMP_TO_QUESTION";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_SHARED_RESULTS"] = 6] = "SET_QUIZ_SHARED_RESULTS";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG"] = 7] = "SET_QUIZ_RESULTS_CONFIG";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS_CONFIG_ERROR"] = 8] = "SET_QUIZ_RESULTS_CONFIG_ERROR";
 })(QuizAPIActionTypes || (QuizAPIActionTypes = {}));

package/lib/mjs/components/CioQuiz/index.js

@@ -12,7 +12,7 @@ import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 import { QuestionTypes } from './actions';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getJumpToQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const [showShareModal, setShowShareModal] = useState(false);
     const { callbacks, sessionStateOptions, questionsPageOptions, resultCardOptions, resultsPageOptions, } = props;
@@ -36,6 +36,7 @@ export default function CioQuiz(props) {
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
         getSkipQuestionButtonProps,
+        getJumpToQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/mjs/components/CioQuiz/quizApiReducer.js

@@ -71,6 +71,14 @@ export default function apiReducer(state, action) {
                 selectedOptionsWithAttributes: action.payload?.quizResults.attributes,
             };
         }
+        case QuizAPIActionTypes.JUMP_TO_QUESTION: {
+            return {
+                ...state,
+                quizResults: undefined,
+                selectedOptionsWithAttributes: undefined,
+                matchedOptions: undefined,
+            };
+        }
         case QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG: {
             return {
                 ...state,

package/lib/mjs/components/CioQuiz/quizLocalReducer.js

@@ -5,15 +5,6 @@ export const initialState = {
     prevAnswerInputs: {},
     isQuizCompleted: false,
 };
-function answerInputReducer(state, action) {
-    return {
-        ...state,
-        [String(action.payload.questionId)]: {
-            type: action.type,
-            value: action.payload.input,
-        },
-    };
-}
 function handleNextQuestion(state) {
     const { answers, answerInputs } = state;
     const newAnswers = [...answers];
@@ -43,44 +34,27 @@ function handleNextQuestion(state) {
         isQuizCompleted: false,
     };
 }
+const handleAnswerInput = (state, action) => ({
+    ...state,
+    answerInputs: {
+        ...state.answerInputs,
+        [String(action.payload.questionId)]: {
+            type: action.type,
+            value: action.payload.input,
+        },
+    },
+    isQuizCompleted: false,
+});
+// eslint-disable-next-line complexity
 export default function quizLocalReducer(state, action) {
     switch (action.type) {
         case QuestionTypes.OpenText:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
         case QuestionTypes.Cover:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
         case QuestionTypes.SingleSelect:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
         case QuestionTypes.MultipleSelect:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
         case QuestionTypes.SingleFilterValue:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
         case QuestionTypes.MultipleFilterValues:
-            return {
-                ...state,
-                answerInputs: answerInputReducer(state.answerInputs, action),
-                isQuizCompleted: false,
-            };
+            return handleAnswerInput(state, action);
         case QuestionTypes.Next: {
             return handleNextQuestion(state);
         }
@@ -120,6 +94,28 @@ export default function quizLocalReducer(state, action) {
                 isQuizCompleted: false,
             };
         }
+        case QuestionTypes.JumpToQuestion: {
+            const questionId = action.payload?.questionId;
+            if (questionId === undefined)
+                return state;
+            const prevAnswerInputs = { ...state.prevAnswerInputs };
+            // Remove all keys greater than questionId from answerInputs
+            const filteredAnswerInputs = {};
+            Object.keys(prevAnswerInputs).forEach((key) => {
+                if (parseInt(key, 10) >= questionId)
+                    return;
+                filteredAnswerInputs[key] = prevAnswerInputs[key];
+            });
+            // Calculate the number of questions to keep (questions <= questionId)
+            const questionsToKeep = Object.keys(filteredAnswerInputs).length;
+            return {
+                ...state,
+                answerInputs: filteredAnswerInputs,
+                prevAnswerInputs: filteredAnswerInputs,
+                answers: state.answers.slice(0, questionsToKeep),
+                isQuizCompleted: false,
+            };
+        }
         case QuestionTypes.Reset:
             return {
                 ...initialState,

package/lib/mjs/hooks/usePropsGetters/index.js

@@ -6,13 +6,15 @@ import useNextQuestionButtonProps from './useNextQuestionButtonProps';
 import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
 import useAddToFavoritesButtonProps from './useAddToFavoritesButtonProps';
 import useSkipQuestionButtonProps from './useSkipQuestionButtonProps';
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems) => {
-    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+import useJumpToQuestionButtonProps from './useJumpToQuestionButtonProps';
+const usePropsGetters = ({ questionsPageOptions, favoriteItems, quizEvents, quizApiState, quizLocalState, }) => {
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, jumpToQuestion, } = quizEvents;
     const getOpenTextInputProps = useOpenTextInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = useCoverQuestionProps(quizAnswerChanged, quizApiState.quizCurrentQuestion?.next_question);
-    const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
+    const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs, questionsPageOptions?.nextQuestionOnSingleSelect);
     const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
     const getSkipQuestionButtonProps = useSkipQuestionButtonProps(skipQuestion, quizApiState);
+    const getJumpToQuestionButtonProps = useJumpToQuestionButtonProps(jumpToQuestion, quizApiState, quizLocalState);
     const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
     const getResetQuizButtonProps = useCallback((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -75,6 +77,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         getQuizResultButtonProps,
         getQuizResultLinkProps,
         getSkipQuestionButtonProps,
+        getJumpToQuestionButtonProps,
     };
 };
 export default usePropsGetters;

package/lib/mjs/hooks/usePropsGetters/useJumpToQuestionButtonProps.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+export default function useJumpToQuestionButtonProps(jumpToQuestion, quizApiState, quizLocalState) {
+    const getJumpToQuestionButtonProps = useCallback((id) => {
+        let buttonDisabled;
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question?.id;
+        const answerIds = Object.keys(quizLocalState.prevAnswerInputs);
+        const isInvalidQuestionId = answerIds && !answerIds.includes(String(id));
+        const isCurrentOrFutureQuestionId = currentQuestionId && id >= currentQuestionId;
+        if (isInvalidQuestionId || isCurrentOrFutureQuestionId) {
+            buttonDisabled = true;
+        }
+        return {
+            className: buttonDisabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button',
+            tabIndex: buttonDisabled ? -1 : 0,
+            'aria-disabled': buttonDisabled ? 'true' : 'false',
+            'aria-describedby': buttonDisabled ? 'jump-to-button-help' : '',
+            disabled: !!buttonDisabled,
+            type: 'button',
+            onClick: () => {
+                jumpToQuestion(id);
+            },
+        };
+    }, [
+        quizLocalState.prevAnswerInputs,
+        quizApiState.quizCurrentQuestion?.next_question?.id,
+        jumpToQuestion,
+    ]);
+    return getJumpToQuestionButtonProps;
+}

package/lib/mjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
 // eslint-disable-next-line max-params
-export default function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs) {
+export default function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs, nextQuestionOnSingleSelect = true) {
     const type = currentQuestionData?.type;
     const hasImages = currentQuestionData?.options?.some((option) => option.images);
     const [selected, setSelected] = useState({});
@@ -78,7 +78,8 @@ export default function useSelectInputProps(quizAnswerChanged, nextQuestion, cur
     useEffect(() => {
         if ((currentQuestionData?.type === QuestionTypes.SingleSelect ||
             currentQuestionData?.type === QuestionTypes.SingleFilterValue) &&
-            singleSelectClicked.current) {
+            singleSelectClicked.current &&
+            nextQuestionOnSingleSelect) {
             nextQuestion();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/mjs/hooks/useQuiz.js

@@ -16,7 +16,13 @@ const useQuiz = (quizOptions) => {
     const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
-    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState, resultsPageOptions?.favoriteItems);
+    const propGetters = usePropsGetters({
+        quizEvents,
+        quizApiState,
+        quizLocalState,
+        favoriteItems: resultsPageOptions?.favoriteItems,
+        questionsPageOptions: quizOptions.questionsPageOptions,
+    });
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
     return {
         cioClient,

package/lib/mjs/hooks/useQuizEvents/index.js

@@ -9,6 +9,7 @@ import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
 import useQuizAddToFavorites from './useQuizAddToFavorites';
 import useQuizSkipClick from './useQuizSkipClick';
+import useJumpToQuestion from './useJumpToQuestion';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { callbacks } = quizOptions;
@@ -35,6 +36,11 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         dispatchApiState,
         quizResults: quizApiState.quizResults,
     });
+    const jumpToQuestion = useJumpToQuestion({
+        dispatchLocalState,
+        dispatchApiState,
+        quizApiState,
+    });
     // Quiz rehydrate
     const hydrateQuizLocalState = useHydrateQuizLocalState(quizOptions.quizId, quizSessionStorageState, dispatchLocalState);
     return {
@@ -46,6 +52,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         nextQuestion,
         skipQuestion,
         resetQuiz,
+        jumpToQuestion,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState,
     };

package/lib/mjs/hooks/useQuizEvents/useJumpToQuestion.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
+const useJumpToQuestion = (props) => {
+    const { dispatchLocalState, dispatchApiState, quizApiState } = props;
+    const quizJumpToQuestionClickHandler = useCallback((questionId) => {
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.id;
+        if (questionId >= currentQuestionId) {
+            return;
+        }
+        dispatchLocalState({
+            type: QuestionTypes.JumpToQuestion,
+            payload: { questionId },
+        });
+        dispatchApiState({
+            type: QuizAPIActionTypes.JUMP_TO_QUESTION,
+            payload: { questionId },
+        });
+    }, [quizApiState.quizCurrentQuestion?.id, dispatchLocalState, dispatchApiState]);
+    return quizJumpToQuestionClickHandler;
+};
+export default useJumpToQuestion;

package/lib/mjs/hooks/useQuizState/useQuizApiState.js

@@ -89,7 +89,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             dispatchQuizResultsConfig();
             return;
         }
-        const { onQuizResultsConfigLoaded } = callbacks;
+        const { onQuizResultsConfigLoaded } = callbacks || {};
         if (onQuizResultsConfigLoaded && isFunction(onQuizResultsConfigLoaded)) {
             onQuizResultsConfigLoaded(quizApiState.resultsConfig, quizApiState.metadata);
         }