@constructor-io/constructorio-ui-quizzes 1.7.1 → 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/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.callbacksDescription = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -23,6 +23,8 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
   - \`renderResultCardPriceDetails\` is an optional render function to render custom prices section in result card 
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
+- \`callbacks\` lets you pass callback functions that will be called on certain actions
+  - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -87,6 +89,7 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
+exports.callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
 var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

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,13 +12,13 @@ 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 { resultsPageOptions } = quizOptions;
+    const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
+    const { resultsPageOptions, callbacks } = quizOptions;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
     // Quiz answer change
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
-    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState);
+    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizNextQuestion);
     // Quiz Back button click callback
     const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -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/useQuizNextClick.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
-const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
+const utils_1 = require("../../utils");
+const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizNextQuestion) => {
     const quizNexClickHandler = (0, react_1.useCallback)(() => {
         var _a, _b;
         const currentQuestion = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
@@ -15,8 +16,16 @@ const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
                     payload: quizApiState.quizCurrentQuestion,
                 });
             }
+            if (currentQuestion && (0, utils_1.isFunction)(onQuizNextQuestion)) {
+                onQuizNextQuestion(Object.assign(Object.assign({}, currentQuestion), { answer: currentAnswerInput }));
+            }
         }
-    }, [dispatchLocalState, quizApiState.quizCurrentQuestion, quizLocalState.answerInputs]);
+    }, [
+        dispatchLocalState,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+        onQuizNextQuestion,
+    ]);
     return quizNexClickHandler;
 };
 exports.default = useQuizNextClick;

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/cjs/utils.js

@@ -47,6 +47,7 @@ exports.functionStrings = {
     onQuizResultClick: `(result, position) => console.dir(result, position)`,
     onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
+    onQuizNextQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 const stringifyWithDefaults = (obj) => {
@@ -121,10 +122,13 @@ const resetQuizSessionStorageState = (quizStateKey) => () => {
 };
 exports.resetQuizSessionStorageState = resetQuizSessionStorageState;
 const logger = (action) => {
-    console.group(`%cAction:%c  ${action.type}`, 'color: red; font-weight: bold;', 'color: green; font-weight: lighter;');
-    console.log('%c type:', 'color: #9E9E9E; font-weight: 700;', action.type);
-    console.log('%c payload:', 'color: #00A7F7; font-weight: 700;', action.payload);
-    console.groupEnd();
+    var _a;
+    if ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.LOGGER) {
+        console.group(`%cAction:%c  ${action.type}`, 'color: red; font-weight: bold;', 'color: green; font-weight: lighter;');
+        console.log('%c type:', 'color: #9E9E9E; font-weight: 700;', action.type);
+        console.log('%c payload:', 'color: #00A7F7; font-weight: 700;', action.payload);
+        console.groupEnd();
+    }
 };
 exports.logger = logger;
 // Function to emulate pausing between interactions

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/constants.js

@@ -20,6 +20,8 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
   - \`renderResultCardPriceDetails\` is an optional render function to render custom prices section in result card 
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
+- \`callbacks\` lets you pass callback functions that will be called on certain actions
+  - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -84,6 +86,7 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
+export const callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

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,13 +9,13 @@ 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 { resultsPageOptions } = quizOptions;
+    const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
+    const { resultsPageOptions, callbacks } = quizOptions;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
     // Quiz answer change
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
-    const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState);
+    const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizNextQuestion);
     // Quiz Back button click callback
     const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -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/useQuizEvents/useQuizNextClick.js

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
-const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
+import { isFunction } from '../../utils';
+const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizNextQuestion) => {
     const quizNexClickHandler = useCallback(() => {
         const currentQuestion = quizApiState.quizCurrentQuestion?.next_question;
         const currentQuestionId = currentQuestion?.id;
@@ -12,8 +13,16 @@ const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
                     payload: quizApiState.quizCurrentQuestion,
                 });
             }
+            if (currentQuestion && isFunction(onQuizNextQuestion)) {
+                onQuizNextQuestion({ ...currentQuestion, answer: currentAnswerInput });
+            }
         }
-    }, [dispatchLocalState, quizApiState.quizCurrentQuestion, quizLocalState.answerInputs]);
+    }, [
+        dispatchLocalState,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+        onQuizNextQuestion,
+    ]);
     return quizNexClickHandler;
 };
 export default useQuizNextClick;

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: '',