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

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/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/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/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/hooks/useQuiz.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import useCioClient from './useCioClient';
 import useConsoleErrors from './useConsoleErrors';
 import usePropsGetters from './usePropsGetters';
@@ -15,9 +16,15 @@ const useQuiz = (quizOptions) => {
     // Quiz callback events
     const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
     // Props getters
-    const { quizApiState, quizLocalState, skipToResults } = quizState;
+    const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
+    const { skipToResults } = quizSessionStorageState;
     const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
+    useEffect(() => {
+        if (skipToResults)
+            quizEvents.hydrateQuiz();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return {
         cioClient,
         state: {
@@ -29,11 +36,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: {
             ...quizEvents,

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

@@ -9,7 +9,7 @@ import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
 import useQuizAddToFavorites from './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
@@ -26,9 +26,9 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = useQuizResetClick(resetQuizSessionStorageState(quizStateKey), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = useQuizResetClick(resetQuizSessionStorageState(quizSessionStorageState.key), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
     // Quiz rehydrate
-    const hydrateQuizLocalState = useHydrateQuizLocalState(quizStateKey, dispatchLocalState);
+    const hydrateQuizLocalState = useHydrateQuizLocalState(quizSessionStorageState.key, dispatchLocalState);
     return {
         addToCart,
         addToFavorites,
@@ -38,8 +38,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         nextQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        hasSessionStorageState: hasQuizStoredState,
-        resetSessionStorageState: resetQuizSessionStorageState(quizStateKey),
+        resetSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),
     };
 };
 export default useQuizEvents;

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

@@ -1,16 +1,16 @@
 import { useCallback } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
 import { getStateFromSessionStorage } from '../../utils';
-const useHydrateQuizLocalState = (quizStateKey, dispatchLocalState) => {
-    const quizState = getStateFromSessionStorage(quizStateKey);
+const useHydrateQuizLocalState = (quizSessionStorageStateKey, dispatchLocalState) => {
+    const sessionStorageQuizState = getStateFromSessionStorage(quizSessionStorageStateKey);
     const hydrateQuizLocalStateHandler = useCallback(() => {
-        if (quizState) {
+        if (sessionStorageQuizState) {
             dispatchLocalState({
                 type: QuestionTypes.Hydrate,
-                payload: quizState,
+                payload: sessionStorageQuizState,
             });
         }
-    }, [dispatchLocalState, quizState]);
+    }, [dispatchLocalState, sessionStorageQuizState]);
     return hydrateQuizLocalStateHandler;
 };
 export default useHydrateQuizLocalState;

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

@@ -1,9 +1,12 @@
 import useQuizApiState from './useQuizApiState';
 import useQuizLocalState from './useQuizLocalState';
+import useSessionStorageState from './useSessionStorageState';
 const useQuizState = (quizOptions, cioClient) => {
-    const { sessionStateOptions } = quizOptions;
+    const { sessionStateOptions, enableHydration } = quizOptions;
     // Quiz Local state
-    const { quizLocalState, dispatchLocalState, hasQuizStoredState, skipToResults, quizStateKey } = useQuizLocalState(sessionStateOptions);
+    const { quizLocalState, dispatchLocalState } = useQuizLocalState();
+    // Quiz Session Storage state
+    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = useSessionStorageState(quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
     // Quiz API state
     const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {
@@ -11,9 +14,11 @@ const useQuizState = (quizOptions, cioClient) => {
         quizLocalState,
         dispatchApiState,
         dispatchLocalState,
-        hasQuizStoredState,
-        skipToResults,
-        quizStateKey,
+        quizSessionStorageState: {
+            skipToResults,
+            key: quizSessionStorageStateKey,
+            hasSessionStorageState,
+        },
     };
 };
 export default useQuizState;

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

@@ -1,29 +1,15 @@
-import { useCallback, useEffect, useReducer } from 'react';
+import { useCallback, useReducer } from 'react';
 import quizLocalReducer, { initialState } from '../../components/CioQuiz/quizLocalReducer';
-import { quizSessionStateKey } from '../../constants';
-import { getStateFromSessionStorage, logger } from '../../utils';
-const useQuizLocalState = (sessionStateOptions) => {
+import { logger } from '../../utils';
+const useQuizLocalState = () => {
     const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
-    const quizStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
-    useEffect(() => {
-        // don't save state if initial state
-        if (quizLocalState?.answers?.length) {
-            window?.sessionStorage?.setItem(quizStateKey, JSON.stringify(quizLocalState));
-        }
-    }, [quizLocalState, quizStateKey]);
-    const hasQuizStoredState = () => getStateFromSessionStorage(quizStateKey) !== null;
-    const skipToResults = !!getStateFromSessionStorage(quizStateKey)?.isQuizCompleted &&
-        !sessionStateOptions?.showSessionModalOnResults;
     const dispatchLocalState = useCallback((action) => {
         logger(action);
         dispatch(action);
     }, []);
     return {
         quizLocalState,
-        hasQuizStoredState,
         dispatchLocalState,
-        skipToResults,
-        quizStateKey,
     };
 };
 export default useQuizLocalState;

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

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { getStateFromSessionStorage } from '../../utils';
+import { quizSessionStateKey } from '../../constants';
+const useSessionStorageState = (quizLocalState, sessionStateOptions, enableHydration) => {
+    const quizSessionStorageStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
+    // Save state to session storage
+    useEffect(() => {
+        // don't save state if initial state
+        if (enableHydration && quizLocalState?.answers?.length) {
+            window?.sessionStorage?.setItem(quizSessionStorageStateKey, JSON.stringify(quizLocalState));
+        }
+    }, [quizLocalState, quizSessionStorageStateKey, enableHydration]);
+    const skipToResults = !!enableHydration &&
+        !!getStateFromSessionStorage(quizSessionStorageStateKey)?.isQuizCompleted &&
+        !sessionStateOptions?.showSessionModalOnResults;
+    return {
+        skipToResults,
+        quizSessionStorageStateKey,
+        hasSessionStorageState: () => getStateFromSessionStorage(quizSessionStorageStateKey) !== null,
+    };
+};
+export default useSessionStorageState;

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

@@ -1,4 +1,4 @@
-import { RequestStates } from '../../../constants';
+import { quizSessionStateKey, RequestStates } from '../../../constants';
 import useOpenTextInputProps from '../../../hooks/usePropsGetters/useOpenTextInputProps';
 import useCoverQuestionProps from '../../../hooks/usePropsGetters/useCoverQuestionProps';
 import useSelectInputProps from '../../../hooks/usePropsGetters/useSelectInputProps';
@@ -67,7 +67,6 @@ export const getMockState = (question) => ({
         requestState: RequestStates.Success,
         versionId: '',
         sessionId: '',
-        skipToResults: false,
         currentQuestion: {
             next_question: question,
             isFirstQuestion: false,
@@ -133,6 +132,11 @@ export const getMockState = (question) => ({
         },
         selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
     },
+    quizSessionStorageState: {
+        key: quizSessionStateKey,
+        skipToResults: true,
+        hasSessionStorageState: () => true,
+    },
 });
 const mockElementProps = {
     className: '',

package/lib/types/hooks/useQuizEvents/useHydrateQuizLocalState.d.ts

@@ -1,4 +1,4 @@
 import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
 import { QuizEventsReturn } from '../../types';
-declare const useHydrateQuizLocalState: (quizStateKey: string, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => QuizEventsReturn.NextQuestion;
+declare const useHydrateQuizLocalState: (quizSessionStorageStateKey: string, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => QuizEventsReturn.NextQuestion;
 export default useHydrateQuizLocalState;

package/lib/types/hooks/useQuizState/index.d.ts

@@ -3,15 +3,13 @@ import ConstructorIOClient from '@constructor-io/constructorio-client-javascript
 import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-import { IQuizProps } from '../../types';
+import { IQuizProps, QuizSessionStorageState } from '../../types';
 type UseQuizState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient) => {
     quizApiState: QuizAPIReducerState;
     quizLocalState: QuizLocalReducerState;
     dispatchApiState: React.Dispatch<ActionQuizAPI>;
     dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
-    hasQuizStoredState: () => boolean;
-    skipToResults: boolean;
-    quizStateKey: string;
+    quizSessionStorageState: QuizSessionStorageState;
 };
 declare const useQuizState: UseQuizState;
 export default useQuizState;

package/lib/types/hooks/useQuizState/useQuizLocalState.d.ts

@@ -1,10 +1,6 @@
 import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
-import { SessionStateOptions } from '../../types';
-declare const useQuizLocalState: (sessionStateOptions?: SessionStateOptions) => {
+declare const useQuizLocalState: () => {
     quizLocalState: import("../../components/CioQuiz/quizLocalReducer").QuizLocalReducerState;
-    hasQuizStoredState: () => boolean;
     dispatchLocalState: (action: ActionAnswerQuestion) => void;
-    skipToResults: boolean;
-    quizStateKey: string;
 };
 export default useQuizLocalState;

package/lib/types/hooks/useQuizState/useSessionStorageState.d.ts

@@ -0,0 +1,8 @@
+import { SessionStateOptions } from '../../types';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+declare const useSessionStorageState: (quizLocalState?: QuizLocalReducerState, sessionStateOptions?: SessionStateOptions, enableHydration?: boolean) => {
+    skipToResults: boolean;
+    quizSessionStorageStateKey: string;
+    hasSessionStorageState: () => boolean;
+};
+export default useSessionStorageState;

package/lib/types/types.d.ts

@@ -45,6 +45,7 @@ export interface IQuizProps {
     resultsPageOptions: ResultsPageOptions;
     sessionStateOptions?: SessionStateOptions;
     primaryColor?: string;
+    enableHydration?: boolean;
     callbacks?: Callbacks;
 }
 export interface QuizReturnState {
@@ -58,9 +59,9 @@ export interface QuizReturnState {
         sessionId?: string;
         currentQuestion?: CurrentQuestion | undefined;
         results?: QuizResultsResponse | undefined;
-        skipToResults: boolean;
         selectedOptionsWithAttributes?: string[];
     };
+    quizSessionStorageState: QuizSessionStorageState;
 }
 export type AnswerInput = {
     type: InputQuestionsTypes;
@@ -69,6 +70,11 @@ export type AnswerInput = {
 export type AnswerInputState = {
     [key: string]: AnswerInput;
 };
+export interface QuizSessionStorageState {
+    key: string;
+    skipToResults: boolean;
+    hasSessionStorageState: () => boolean;
+}
 export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect;
 export type CurrentQuestion = NextQuestionResponse & {
     isFirstQuestion: boolean;
@@ -87,7 +93,6 @@ export declare namespace QuizEventsReturn {
     type AddToCart = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number) => void;
     type AddToFavorites = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number, sendEvent?: boolean) => void;
     type HydrateQuiz = () => void;
-    type HasSessionStorageState = () => boolean;
     type ResetSessionStorageState = () => void;
 }
 export interface QuizEventsReturn {
@@ -99,7 +104,6 @@ export interface QuizEventsReturn {
     addToCart: QuizEventsReturn.AddToCart;
     addToFavorites: QuizEventsReturn.AddToFavorites;
     hydrateQuiz: QuizEventsReturn.HydrateQuiz;
-    hasSessionStorageState: QuizEventsReturn.HasSessionStorageState;
     resetSessionStorageState: QuizEventsReturn.ResetSessionStorageState;
 }
 export interface OpenTextInputProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",