@constructor-io/constructorio-ui-quizzes 1.7.3 → 1.8.1

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

@@ -14,21 +14,18 @@ const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const { resultsPageOptions, sessionStateOptions } = props;
+    const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     (0, react_1.useEffect)(() => {
         // Respect showSessionModal if defined, else default to true.
         if ((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) !== undefined) {
-            setShowSessionPrompt((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) &&
-                hasSessionStorageState() &&
-                !state.quiz.skipToResults);
+            setShowSessionPrompt((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) && hasSessionStorageState() && !skipToResults);
         }
         else {
-            setShowSessionPrompt(hasSessionStorageState() && !state.quiz.skipToResults);
+            setShowSessionPrompt(hasSessionStorageState() && !skipToResults);
         }
-        if (state.quiz.skipToResults)
-            hydrateQuiz();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = {
@@ -65,7 +62,7 @@ function CioQuiz(props) {
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ProgressBar_1.default, null),
                 react_1.default.createElement(QuizQuestions_1.default, null),
                 react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));

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

@@ -8,7 +8,7 @@ exports.initialState = {
     quizRequestState: constants_1.RequestStates.Stale,
 };
 function apiReducer(state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     switch (action.type) {
         case actions_1.QuizAPIActionTypes.SET_IS_LOADING:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Loading, quizCurrentQuestion: undefined, quizResults: undefined });
@@ -17,16 +17,16 @@ function apiReducer(state, action) {
         case actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION: {
             const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
             const quizFirstQuestion = state.quizFirstQuestion || ((_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion);
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizCurrentQuestion: Object.assign(Object.assign({}, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizCurrentQuestion), { isFirstQuestion: (quizFirstQuestion === null || quizFirstQuestion === void 0 ? void 0 : quizFirstQuestion.next_question.id) ===
-                        ((_h = (_g = (_f = action.payload) === null || _f === void 0 ? void 0 : _f.quizCurrentQuestion) === null || _g === void 0 ? void 0 : _g.next_question) === null || _h === void 0 ? void 0 : _h.id), isOpenQuestion,
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizCurrentQuestion: Object.assign(Object.assign({}, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizCurrentQuestion), { isFirstQuestion: ((_f = quizFirstQuestion === null || quizFirstQuestion === void 0 ? void 0 : quizFirstQuestion.next_question) === null || _f === void 0 ? void 0 : _f.id) ===
+                        ((_j = (_h = (_g = action.payload) === null || _g === void 0 ? void 0 : _g.quizCurrentQuestion) === null || _h === void 0 ? void 0 : _h.next_question) === null || _j === void 0 ? void 0 : _j.id), isOpenQuestion,
                     isCoverQuestion,
                     isSingleQuestion,
                     isMultipleQuestion,
                     isSelectQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
-            const selectedOptionsWithAttributes = ((_j = action.payload) === null || _j === void 0 ? void 0 : _j.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes });
+            const selectedOptionsWithAttributes = ((_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_l = action.payload) === null || _l === void 0 ? void 0 : _l.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes });
         }
         case actions_1.QuizAPIActionTypes.RESET_QUIZ:
             return exports.initialState;

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

@@ -5,6 +5,7 @@ const actions_1 = require("./actions");
 exports.initialState = {
     answers: [],
     answerInputs: {},
+    prevAnswerInputs: {},
     isLastAnswer: false,
     isQuizCompleted: false,
 };
@@ -26,7 +27,7 @@ function quizLocalReducer(state, action) {
         case actions_1.QuestionTypes.MultipleSelect:
             return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion), isQuizCompleted: false });
         case actions_1.QuestionTypes.Next: {
-            const { answers } = state;
+            const { answers, answerInputs } = state;
             const newAnswers = [...answers];
             const lastAnswerInputIndex = answers.length;
             const currentAnswerInput = (_e = Object.values(state.answerInputs)) === null || _e === void 0 ? void 0 : _e[lastAnswerInputIndex];
@@ -46,11 +47,13 @@ function quizLocalReducer(state, action) {
                 default:
                     newAnswers.push([]);
             }
-            return Object.assign(Object.assign({}, state), { answers: newAnswers, isQuizCompleted: false });
+            return Object.assign(Object.assign({}, state), { 
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
         }
         case actions_1.QuestionTypes.Back: {
-            const newAnswerInputs = Object.assign({}, state.answerInputs);
-            return Object.assign(Object.assign({}, state), { answerInputs: newAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });
+            const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
+            return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });
         }
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);

package/lib/cjs/components/ProgressBar/ProgressBar.js

@@ -6,7 +6,7 @@ const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ProgressBar() {
     const { state } = (0, react_1.useContext)(context_1.default);
     const currentQuestion = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion;
-    if (!currentQuestion)
+    if (!(currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.next_question))
         return null;
     return (react_1.default.createElement("div", { className: 'cio-question-progress-affixed-container' },
         react_1.default.createElement("div", { className: 'cio-question-progress-progress-container' },

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -15,8 +15,8 @@ function SelectTypeQuestion() {
     let instructions;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
-        hasImages = question.options.some((option) => option.images);
-        instructions = question.type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
+        hasImages = question === null || question === void 0 ? void 0 : question.options.some((option) => option.images);
+        instructions = (question === null || question === void 0 ? void 0 : question.type) === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     if (question) {
         return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState) {
     const getNextQuestionButtonProps = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e;
-        const currentQuestionId = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
+        var _a, _b, _c, _d, _e, _f;
+        const currentQuestionId = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id;
         let buttonDisabled;
-        if (currentQuestionId && !((_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.isCoverQuestion)) {
+        if (currentQuestionId && !((_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.isCoverQuestion)) {
             buttonDisabled =
-                !((_c = quizLocalState.answerInputs[currentQuestionId]) === null || _c === void 0 ? void 0 : _c.value) ||
-                    !((_e = (_d = quizLocalState.answerInputs[currentQuestionId]) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.length);
+                !((_d = quizLocalState.answerInputs[currentQuestionId]) === null || _d === void 0 ? void 0 : _d.value) ||
+                    !((_f = (_e = quizLocalState.answerInputs[currentQuestionId]) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length);
         }
         return {
             className: buttonDisabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button',

package/lib/cjs/hooks/useQuiz.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const react_1 = require("react");
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
 const usePropsGetters_1 = tslib_1.__importDefault(require("./usePropsGetters"));
@@ -18,9 +19,15 @@ const useQuiz = (quizOptions) => {
     // Quiz callback events
     const quizEvents = (0, useQuizEvents_1.default)(quizOptions, cioClient, quizState);
     // Props getters
-    const { quizApiState, quizLocalState, skipToResults } = quizState;
+    const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
+    const { skipToResults } = quizSessionStorageState;
     const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
+    (0, react_1.useEffect)(() => {
+        if (skipToResults)
+            quizEvents.hydrateQuiz();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
@@ -30,11 +37,11 @@ const useQuiz = (quizOptions) => {
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
-                skipToResults,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
             },
+            quizSessionStorageState,
         }, events: Object.assign({}, quizEvents) }, propGetters), { primaryColorStyles });
 };
 exports.default = useQuiz;

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

@@ -12,7 +12,7 @@ const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrate
 const utils_1 = require("../../utils");
 const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToFavorites"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
-    const { quizApiState, dispatchLocalState, dispatchApiState, hasQuizStoredState, quizStateKey, quizLocalState, } = quizState;
+    const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
     // Quiz answer change
@@ -29,9 +29,9 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = (0, useQuizResetClick_1.default)((0, utils_1.resetQuizSessionStorageState)(quizStateKey), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = (0, useQuizResetClick_1.default)((0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
     // Quiz rehydrate
-    const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizStateKey, dispatchLocalState);
+    const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizSessionStorageState.key, dispatchLocalState);
     return {
         addToCart,
         addToFavorites,
@@ -41,8 +41,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         nextQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        hasSessionStorageState: hasQuizStoredState,
-        resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizStateKey),
+        resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),
     };
 };
 exports.default = useQuizEvents;

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

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
 const utils_1 = require("../../utils");
-const useHydrateQuizLocalState = (quizStateKey, dispatchLocalState) => {
-    const quizState = (0, utils_1.getStateFromSessionStorage)(quizStateKey);
+const useHydrateQuizLocalState = (quizSessionStorageStateKey, dispatchLocalState) => {
+    const sessionStorageQuizState = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
     const hydrateQuizLocalStateHandler = (0, react_1.useCallback)(() => {
-        if (quizState) {
+        if (sessionStorageQuizState) {
             dispatchLocalState({
                 type: actions_1.QuestionTypes.Hydrate,
-                payload: quizState,
+                payload: sessionStorageQuizState,
             });
         }
-    }, [dispatchLocalState, quizState]);
+    }, [dispatchLocalState, sessionStorageQuizState]);
     return hydrateQuizLocalStateHandler;
 };
 exports.default = useHydrateQuizLocalState;

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

@@ -4,43 +4,45 @@ const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
 const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
     const quizAnswerChangedHandler = (0, react_1.useCallback)((payload) => {
-        var _a;
-        const questionType = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.type;
+        var _a, _b;
+        const questionType = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.type;
         const currentQuestion = quizApiState.quizCurrentQuestion;
-        switch (questionType) {
-            case actions_1.QuestionTypes.Cover:
-                dispatchLocalState({
-                    type: actions_1.QuestionTypes.Cover,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: '',
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case actions_1.QuestionTypes.OpenText:
-                dispatchLocalState({
-                    type: actions_1.QuestionTypes.OpenText,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case actions_1.QuestionTypes.SingleSelect:
-            case actions_1.QuestionTypes.MultipleSelect:
-                dispatchLocalState({
-                    type: currentQuestion.next_question.type,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            default:
-                break;
+        if (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.next_question) {
+            switch (questionType) {
+                case actions_1.QuestionTypes.Cover:
+                    dispatchLocalState({
+                        type: actions_1.QuestionTypes.Cover,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: '',
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                case actions_1.QuestionTypes.OpenText:
+                    dispatchLocalState({
+                        type: actions_1.QuestionTypes.OpenText,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: payload,
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                case actions_1.QuestionTypes.SingleSelect:
+                case actions_1.QuestionTypes.MultipleSelect:
+                    dispatchLocalState({
+                        type: currentQuestion.next_question.type,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: payload,
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                default:
+                    break;
+            }
         }
     }, [quizApiState, dispatchLocalState]);
     return quizAnswerChangedHandler;

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

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const useQuizApiState_1 = tslib_1.__importDefault(require("./useQuizApiState"));
 const useQuizLocalState_1 = tslib_1.__importDefault(require("./useQuizLocalState"));
+const useSessionStorageState_1 = tslib_1.__importDefault(require("./useSessionStorageState"));
 const useQuizState = (quizOptions, cioClient) => {
-    const { sessionStateOptions } = quizOptions;
+    const { sessionStateOptions, enableHydration } = quizOptions;
     // Quiz Local state
-    const { quizLocalState, dispatchLocalState, hasQuizStoredState, skipToResults, quizStateKey } = (0, useQuizLocalState_1.default)(sessionStateOptions);
+    const { quizLocalState, dispatchLocalState } = (0, useQuizLocalState_1.default)();
+    // Quiz Session Storage state
+    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = (0, useSessionStorageState_1.default)(quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
     // Quiz API state
     const { quizApiState, dispatchApiState } = (0, useQuizApiState_1.default)(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {
@@ -14,9 +17,11 @@ const useQuizState = (quizOptions, cioClient) => {
         quizLocalState,
         dispatchApiState,
         dispatchLocalState,
-        hasQuizStoredState,
-        skipToResults,
-        quizStateKey,
+        quizSessionStorageState: {
+            skipToResults,
+            key: quizSessionStorageStateKey,
+            hasSessionStorageState,
+        },
     };
 };
 exports.default = useQuizState;

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

@@ -10,36 +10,39 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
 ) => {
     const [quizApiState, dispatchApiState] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
+    const dispatchQuizResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
+                answers: quizLocalState.answers,
+                resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
+                quizVersionId: quizLocalState.quizVersionId,
+                quizSessionId: quizLocalState.quizSessionId,
+            });
+            // Set quiz results state
+            dispatchApiState({
+                type: actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS,
+                payload: {
+                    quizResults,
+                },
+            });
+            if (!quizLocalState.isQuizCompleted)
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Complete,
+                });
+        }
+        catch (error) {
+            dispatchApiState({
+                type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
+            });
+        }
+    });
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
             });
             if (quizLocalState.isLastAnswer || skipToResults) {
-                try {
-                    const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
-                        answers: quizLocalState.answers,
-                        resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
-                        quizVersionId: quizLocalState.quizVersionId,
-                        quizSessionId: quizLocalState.quizSessionId,
-                    });
-                    // Set quiz results state
-                    dispatchApiState({
-                        type: actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS,
-                        payload: {
-                            quizResults,
-                        },
-                    });
-                    if (!quizLocalState.isQuizCompleted)
-                        dispatchLocalState({
-                            type: actions_1.QuestionTypes.Complete,
-                        });
-                }
-                catch (error) {
-                    dispatchApiState({
-                        type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
-                    });
-                }
+                yield dispatchQuizResults();
             }
             else {
                 try {
@@ -50,6 +53,10 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
                         quizVersionId,
                         quizSessionId,
                     });
+                    if (!questionResult.next_question) {
+                        yield dispatchQuizResults();
+                        return;
+                    }
                     // Update quizSessionId, quizVersionId
                     if ((!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) ||
                         (!quizVersionId && questionResult.quiz_version_id)) {

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

@@ -3,32 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const quizLocalReducer_1 = tslib_1.__importStar(require("../../components/CioQuiz/quizLocalReducer"));
-const constants_1 = require("../../constants");
 const utils_1 = require("../../utils");
-const useQuizLocalState = (sessionStateOptions) => {
-    var _a;
+const useQuizLocalState = () => {
     const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
-    const quizStateKey = (sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey) || constants_1.quizSessionStateKey;
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        // don't save state if initial state
-        if ((_a = quizLocalState === null || quizLocalState === void 0 ? void 0 : quizLocalState.answers) === null || _a === void 0 ? void 0 : _a.length) {
-            (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizStateKey, JSON.stringify(quizLocalState));
-        }
-    }, [quizLocalState, quizStateKey]);
-    const hasQuizStoredState = () => (0, utils_1.getStateFromSessionStorage)(quizStateKey) !== null;
-    const skipToResults = !!((_a = (0, utils_1.getStateFromSessionStorage)(quizStateKey)) === null || _a === void 0 ? void 0 : _a.isQuizCompleted) &&
-        !(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModalOnResults);
     const dispatchLocalState = (0, react_1.useCallback)((action) => {
         (0, utils_1.logger)(action);
         dispatch(action);
     }, []);
     return {
         quizLocalState,
-        hasQuizStoredState,
         dispatchLocalState,
-        skipToResults,
-        quizStateKey,
     };
 };
 exports.default = useQuizLocalState;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
+const useSessionStorageState = (quizLocalState, sessionStateOptions, enableHydration) => {
+    var _a;
+    const quizSessionStorageStateKey = (sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey) || constants_1.quizSessionStateKey;
+    // Save state to session storage
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        // don't save state if initial state
+        if (enableHydration && ((_a = quizLocalState === null || quizLocalState === void 0 ? void 0 : quizLocalState.answers) === null || _a === void 0 ? void 0 : _a.length)) {
+            (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizSessionStorageStateKey, JSON.stringify(quizLocalState));
+        }
+    }, [quizLocalState, quizSessionStorageStateKey, enableHydration]);
+    const skipToResults = !!enableHydration &&
+        !!((_a = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey)) === null || _a === void 0 ? void 0 : _a.isQuizCompleted) &&
+        !(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModalOnResults);
+    return {
+        skipToResults,
+        quizSessionStorageStateKey,
+        hasSessionStorageState: () => (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey) !== null,
+    };
+};
+exports.default = useSessionStorageState;

package/lib/cjs/stories/Quiz/tests/mocks.js

@@ -55,7 +55,6 @@ const getMockState = (question) => ({
         requestState: constants_1.RequestStates.Success,
         versionId: '',
         sessionId: '',
-        skipToResults: false,
         currentQuestion: {
             next_question: question,
             isFirstQuestion: false,
@@ -121,6 +120,11 @@ const getMockState = (question) => ({
         },
         selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
     },
+    quizSessionStorageState: {
+        key: constants_1.quizSessionStateKey,
+        skipToResults: true,
+        hasSessionStorageState: () => true,
+    },
 });
 exports.getMockState = getMockState;
 const mockElementProps = {

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

@@ -10,21 +10,18 @@ import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const { resultsPageOptions, sessionStateOptions } = props;
+    const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     useEffect(() => {
         // Respect showSessionModal if defined, else default to true.
         if (sessionStateOptions?.showSessionModal !== undefined) {
-            setShowSessionPrompt(sessionStateOptions?.showSessionModal &&
-                hasSessionStorageState() &&
-                !state.quiz.skipToResults);
+            setShowSessionPrompt(sessionStateOptions?.showSessionModal && hasSessionStorageState() && !skipToResults);
         }
         else {
-            setShowSessionPrompt(hasSessionStorageState() && !state.quiz.skipToResults);
+            setShowSessionPrompt(hasSessionStorageState() && !skipToResults);
         }
-        if (state.quiz.skipToResults)
-            hydrateQuiz();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = {
@@ -61,7 +58,7 @@ export default function CioQuiz(props) {
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
                 React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),
                 React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));

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

@@ -29,7 +29,7 @@ export default function apiReducer(state, action) {
                 quizRequestState: RequestStates.Success,
                 quizCurrentQuestion: {
                     ...action.payload?.quizCurrentQuestion,
-                    isFirstQuestion: quizFirstQuestion?.next_question.id ===
+                    isFirstQuestion: quizFirstQuestion?.next_question?.id ===
                         action.payload?.quizCurrentQuestion?.next_question?.id,
                     isOpenQuestion,
                     isCoverQuestion,

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

@@ -2,6 +2,7 @@ import { QuestionTypes } from './actions';
 export const initialState = {
     answers: [],
     answerInputs: {},
+    prevAnswerInputs: {},
     isLastAnswer: false,
     isQuizCompleted: false,
 };
@@ -45,7 +46,7 @@ export default function quizLocalReducer(state, action) {
                 isQuizCompleted: false,
             };
         case QuestionTypes.Next: {
-            const { answers } = state;
+            const { answers, answerInputs } = state;
             const newAnswers = [...answers];
             const lastAnswerInputIndex = answers.length;
             const currentAnswerInput = Object.values(state.answerInputs)?.[lastAnswerInputIndex];
@@ -67,15 +68,17 @@ export default function quizLocalReducer(state, action) {
             }
             return {
                 ...state,
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs,
                 answers: newAnswers,
                 isQuizCompleted: false,
             };
         }
         case QuestionTypes.Back: {
-            const newAnswerInputs = { ...state.answerInputs };
+            const prevAnswerInputs = { ...state.prevAnswerInputs };
             return {
                 ...state,
-                answerInputs: newAnswerInputs,
+                answerInputs: prevAnswerInputs,
                 answers: [...state.answers.slice(0, -1)],
                 isLastAnswer: false,
                 isQuizCompleted: false,

package/lib/mjs/components/ProgressBar/ProgressBar.js

@@ -3,7 +3,7 @@ import QuizContext from '../CioQuiz/context';
 export default function ProgressBar() {
     const { state } = useContext(QuizContext);
     const currentQuestion = state?.quiz.currentQuestion;
-    if (!currentQuestion)
+    if (!currentQuestion?.next_question)
         return null;
     return (React.createElement("div", { className: 'cio-question-progress-affixed-container' },
         React.createElement("div", { className: 'cio-question-progress-progress-container' },

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -11,8 +11,8 @@ function SelectTypeQuestion() {
     let instructions;
     if (state?.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
-        hasImages = question.options.some((option) => option.images);
-        instructions = question.type === QuestionTypes.MultipleSelect && 'Select one or more options';
+        hasImages = question?.options.some((option) => option.images);
+        instructions = question?.type === QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     if (question) {
         return (React.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 export default function useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState) {
     const getNextQuestionButtonProps = useCallback(() => {
-        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question.id;
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question?.id;
         let buttonDisabled;
         if (currentQuestionId && !quizApiState.quizCurrentQuestion?.isCoverQuestion) {
             buttonDisabled =