@constructor-io/constructorio-ui-quizzes 1.3.2 → 1.3.4

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

@@ -10,6 +10,7 @@ var QuestionTypes;
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
+    QuestionTypes["Hydrate"] = "hydrate";
 })(QuestionTypes = exports.QuestionTypes || (exports.QuestionTypes = {}));
 // API actions
 var QuizAPIActionTypes;

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

@@ -1,16 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("./context"));
 const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
 const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
 const constants_1 = require("../../constants");
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
+const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 function CioQuiz(props) {
-    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick }, } = (0, useQuiz_1.default)(props);
-    const { resultsPageOptions } = props;
+    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick, hydrateQuiz, hasStoredState, resetStoredState, }, } = (0, useQuiz_1.default)(props);
+    const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
+    const { resultsPageOptions, sessionStateOptions } = props;
+    (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) && hasStoredState());
+        }
+        else {
+            setShowSessionPrompt(hasStoredState());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const contextValue = {
         cioClient,
         state,
@@ -27,6 +39,7 @@ function CioQuiz(props) {
     }
     if (state.quiz.requestState === constants_1.RequestStates.Success) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
+            react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetStoredState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             react_1.default.createElement(context_1.default.Provider, { value: contextValue },
                 state.quiz.results && react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions }),
                 state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null))));

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

@@ -8,20 +8,20 @@ exports.initialState = {
     quizRequestState: constants_1.RequestStates.Stale,
 };
 function apiReducer(state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     switch (action.type) {
         case actions_1.QuizAPIActionTypes.SET_IS_LOADING:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Loading });
         case actions_1.QuizAPIActionTypes.SET_IS_ERROR:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizResults: undefined });
         case actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION:
-            return Object.assign(Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizVersionId: (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizVersionId, quizSessionId: (_b = action.payload) === null || _b === void 0 ? void 0 : _b.quizSessionId, quizCurrentQuestion: (_c = action.payload) === null || _c === void 0 ? void 0 : _c.quizCurrentQuestion, quizResults: undefined }), (!state.quizCurrentQuestion && {
-                quizFirstQuestion: (_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion,
+            return Object.assign(Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizCurrentQuestion: (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion, quizResults: undefined }), (!state.quizCurrentQuestion && {
+                quizFirstQuestion: (_b = action.payload) === null || _b === void 0 ? void 0 : _b.quizCurrentQuestion,
             }));
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
-            const filterExpression = ((_g = (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizResults) === null || _f === void 0 ? void 0 : _f.request) === null || _g === void 0 ? void 0 : _g.collection_filter_expression) || null;
+            const filterExpression = ((_e = (_d = (_c = action.payload) === null || _c === void 0 ? void 0 : _c.quizResults) === null || _d === void 0 ? void 0 : _d.request) === null || _e === void 0 ? void 0 : _e.collection_filter_expression) || null;
             const quizResultsFilters = [...new Set((0, utils_1.getFilterValuesFromExpression)(filterExpression))];
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_h = action.payload) === null || _h === void 0 ? void 0 : _h.quizResults, quizResultsFilters, quizCurrentQuestion: undefined });
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_f = action.payload) === null || _f === void 0 ? void 0 : _f.quizResults, quizResultsFilters, quizCurrentQuestion: undefined });
         }
         case actions_1.QuizAPIActionTypes.RESET_QUIZ:
             return exports.initialState;

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

@@ -25,6 +25,8 @@ function quizLocalReducer(state, action) {
             return Object.assign(Object.assign({}, state), { answers: [...state.answers.slice(0, -1)], isLastAnswer: false });
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);
+        case actions_1.QuestionTypes.Hydrate:
+            return Object.assign(Object.assign({}, state), action.payload);
         default:
             return state;
     }

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -24,7 +24,7 @@ function CoverTypeQuestion() {
         return (react_1.default.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
-      ` },
+      `, "data-question-key": question.key },
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -47,7 +47,7 @@ function OpenTextQuestion(props) {
         return (react_1.default.createElement("div", { className: `
           cio-container${hasImage ? '--with-image' : ''}
           cio-open-text-question-container${hasImage ? '--with-image' : ''}
-        ` },
+        `, "data-question-key": question.key },
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),

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

@@ -61,7 +61,7 @@ function SelectTypeQuestion() {
         }
     };
     if (question) {
-        return (react_1.default.createElement("div", { className: 'cio-select-question-container' },
+        return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
             react_1.default.createElement("div", { className: 'cio-select-question-text' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
                 (question === null || question === void 0 ? void 0 : question.description) ? react_1.default.createElement(QuestionDescription_1.default, { description: question.description }) : ''),
@@ -69,7 +69,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, (_b = question === null || question === void 0 ? void 0 : question.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement("div", { className: `${!hasImages
                     ? 'cio-question-option-container-text-only'
-                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, onClick: () => {
+                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, "data-question-option-key": option.key, onClick: () => {
                     toggleIdSelected(option.id);
                 }, onKeyDown: (event) => {
                     onOptionKeyDown(event, option.id);

package/lib/cjs/components/SessionPromptModal/SessionPromptModal.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
+function SessionPromptModal({ continueSession, resetStoredState, setShowSessionPrompt, showSessionPrompt, }) {
+    const onNoClickHandler = () => {
+        resetStoredState();
+        setShowSessionPrompt(false);
+    };
+    if (showSessionPrompt)
+        return (react_1.default.createElement("div", { className: 'cio-session-prompt-modal', role: 'presentation', onClick: onNoClickHandler },
+            react_1.default.createElement("div", { className: 'cio-session-prompt-container' },
+                react_1.default.createElement("div", { className: 'cio-session-prompt-content', role: 'presentation', onClick: (e) => e.stopPropagation() },
+                    react_1.default.createElement("div", null, "Do you want to continue where you left off?"),
+                    react_1.default.createElement("div", { className: 'cio-session-prompt-controls-container' },
+                        react_1.default.createElement(CTAButton_1.default, { ctaText: 'No', type: 'button', onClick: onNoClickHandler }),
+                        react_1.default.createElement(CTAButton_1.default, { type: 'button', ctaText: 'Yes', onClick: () => {
+                                continueSession();
+                                setShowSessionPrompt(false);
+                            } }))))));
+    return null;
+}
+exports.default = SessionPromptModal;

package/lib/cjs/constants.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
+// Session Storage default key
+exports.quizSessionStateKey = 'constructorIOQuizState';
 /// //////////////////////////////
 // Storybook Folder Descriptions
 /// //////////////////////////////

package/lib/cjs/hooks/useQuiz.js

@@ -6,15 +6,15 @@ const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors")
 const useQuizApiState_1 = tslib_1.__importDefault(require("./useQuizApiState"));
 const useQuizEvents_1 = tslib_1.__importDefault(require("./useQuizEvents"));
 const useQuizLocalState_1 = tslib_1.__importDefault(require("./useQuizLocalState"));
-const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions }) => {
+const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions, sessionStateOptions, }) => {
     // Log console errors for required parameters quizId and resultsPageOptions
     (0, useConsoleErrors_1.default)(quizId, resultsPageOptions);
     // Quiz Local state
-    const { quizLocalState, resetQuizLocalState, dispatchLocalState } = (0, useQuizLocalState_1.default)();
+    const { quizLocalState, resetQuizLocalState, dispatchLocalState, hydrateQuizLocalState, hasQuizStoredState, resetQuizStoredState, } = (0, useQuizLocalState_1.default)(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey);
     // Quiz Cio Client
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
     // Quiz API state
-    const { isFirstQuestion, quizApiState, resetQuizApiState } = (0, useQuizApiState_1.default)(quizId, quizLocalState, resultsPageOptions, quizVersionId, cioClient);
+    const { isFirstQuestion, quizApiState, resetQuizApiState } = (0, useQuizApiState_1.default)(quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionId, cioClient);
     // Quiz callback events
     const quizEvents = (0, useQuizEvents_1.default)({
         cioClient,
@@ -23,6 +23,9 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
         dispatchLocalState,
         resetQuizApiState,
         resetQuizLocalState,
+        hydrateQuizLocalState,
+        resetQuizStoredState,
+        hasQuizStoredState,
     });
     return {
         cioClient,
@@ -33,8 +36,8 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,
-                versionId: quizApiState.quizVersionId,
-                sessionId: quizApiState.quizSessionId,
+                versionId: quizLocalState.quizVersionId,
+                sessionId: quizLocalState.quizSessionId,
                 firstQuestion: quizApiState.quizFirstQuestion,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,

package/lib/cjs/hooks/useQuizApiState.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const actions_1 = require("../components/CioQuiz/actions");
 const quizApiReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizApiReducer"));
 const services_1 = require("../services");
-const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
+const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
     var _a, _b;
     const [quizApiState, dispatch] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
     const firstQuestionId = (_a = quizApiState.quizFirstQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
@@ -21,8 +21,8 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
                     const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
-                        quizVersionId: quizApiState.quizVersionId,
-                        quizSessionId: quizApiState.quizSessionId,
+                        quizVersionId: quizLocalState.quizVersionId,
+                        quizSessionId: quizLocalState.quizSessionId,
                     });
                     // Set quiz results state
                     dispatch({
@@ -40,25 +40,28 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
             }
             else {
                 try {
-                    let quizVersionId = quizApiState.quizVersionId || quizVersionIdProp;
-                    let { quizSessionId } = quizApiState;
+                    const quizVersionId = quizLocalState.quizVersionId || quizVersionIdProp;
+                    const { quizSessionId } = quizLocalState;
                     const questionResult = yield (0, services_1.nextQuestion)(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         quizVersionId,
                         quizSessionId,
                     });
-                    if (!quizVersionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_version_id)) {
-                        quizVersionId = questionResult.quiz_version_id;
-                    }
-                    if (!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) {
-                        quizSessionId = questionResult.quiz_session_id;
+                    // Update quizSessionId, quizVersionId
+                    if ((!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) ||
+                        (!quizVersionId && questionResult.quiz_version_id)) {
+                        dispatchLocalState({
+                            type: actions_1.QuestionTypes.Hydrate,
+                            payload: {
+                                quizVersionId: questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_version_id,
+                                quizSessionId: questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id,
+                            },
+                        });
                     }
                     // Set current question state
                     dispatch({
                         type: actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION,
                         payload: {
-                            quizSessionId,
-                            quizVersionId,
                             quizCurrentQuestion: questionResult,
                         },
                     });
@@ -74,7 +77,7 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
     }, [
         cioClient,
         quizId,
-        quizLocalState,
+        quizLocalState.answers,
         quizLocalState.isLastAnswer,
         resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
     ]);

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

@@ -7,7 +7,7 @@ const useQuizAddToCart_1 = tslib_1.__importDefault(require("./useQuizAddToCart")
 const useQuizNextClick_1 = tslib_1.__importDefault(require("./useQuizNextClick"));
 const useQuizBackClick_1 = tslib_1.__importDefault(require("./useQuizBackClick"));
 const useQuizEvents = (options) => {
-    const { cioClient, quizApiState, resultsPageOptions, dispatchLocalState, resetQuizApiState, resetQuizLocalState, } = options;
+    const { cioClient, quizApiState, resultsPageOptions, dispatchLocalState, resetQuizApiState, resetQuizLocalState, hydrateQuizLocalState, resetQuizStoredState, hasQuizStoredState, } = options;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
     // Quiz Next button click
     const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, dispatchLocalState);
@@ -23,6 +23,7 @@ const useQuizEvents = (options) => {
         if (quizApiState.quizResults) {
             resetQuizApiState();
             resetQuizLocalState();
+            resetQuizStoredState();
         }
     };
     return {
@@ -31,6 +32,9 @@ const useQuizEvents = (options) => {
         nextQuestion,
         previousQuestion,
         resetQuiz,
+        hydrateQuiz: hydrateQuizLocalState,
+        hasStoredState: hasQuizStoredState,
+        resetStoredState: resetQuizStoredState,
     };
 };
 exports.default = useQuizEvents;

package/lib/cjs/hooks/useQuizLocalState.js

@@ -4,16 +4,50 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const actions_1 = require("../components/CioQuiz/actions");
 const quizLocalReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizLocalReducer"));
-const useQuizLocalState = () => {
+const constants_1 = require("../constants");
+const useQuizLocalState = (sessionStateKey) => {
     const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
+    const quizStateKey = sessionStateKey || constants_1.quizSessionStateKey;
+    const getStateFromSessionStorage = () => {
+        var _a;
+        const state = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(quizStateKey);
+        if (state) {
+            return JSON.parse(state);
+        }
+        return null;
+    };
+    (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 resetQuizLocalState = () => {
         dispatch({
             type: actions_1.QuestionTypes.Reset,
         });
     };
+    const hydrateQuizLocalState = () => {
+        const quizState = getStateFromSessionStorage();
+        if (quizState) {
+            dispatch({
+                type: actions_1.QuestionTypes.Hydrate,
+                payload: quizState,
+            });
+        }
+    };
+    const resetQuizStoredState = () => {
+        var _a;
+        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(quizStateKey);
+    };
+    const hasQuizStoredState = () => getStateFromSessionStorage() !== null;
     return {
         quizLocalState,
         resetQuizLocalState,
+        hydrateQuizLocalState,
+        hasQuizStoredState,
+        resetQuizStoredState,
         dispatchLocalState: dispatch,
     };
 };

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

@@ -7,6 +7,7 @@ export var QuestionTypes;
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
+    QuestionTypes["Hydrate"] = "hydrate";
 })(QuestionTypes || (QuestionTypes = {}));
 // API actions
 export var QuizAPIActionTypes;

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

@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import QuizContext from './context';
 import QuizQuestions from '../QuizQuestions';
 import ResultContainer from '../ResultContainer/ResultContainer';
 import { RequestStates } from '../../constants';
 import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
+import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick }, } = useQuiz(props);
-    const { resultsPageOptions } = props;
+    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick, hydrateQuiz, hasStoredState, resetStoredState, }, } = useQuiz(props);
+    const [showSessionPrompt, setShowSessionPrompt] = useState(false);
+    const { resultsPageOptions, sessionStateOptions } = props;
+    useEffect(() => {
+        // Respect showSessionModal if defined, else default to true.
+        if (sessionStateOptions?.showSessionModal !== undefined) {
+            setShowSessionPrompt(sessionStateOptions?.showSessionModal && hasStoredState());
+        }
+        else {
+            setShowSessionPrompt(hasStoredState());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const contextValue = {
         cioClient,
         state,
@@ -24,6 +36,7 @@ export default function CioQuiz(props) {
     }
     if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz' },
+            React.createElement(SessionPromptModal, { resetStoredState: resetStoredState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             React.createElement(QuizContext.Provider, { value: contextValue },
                 state.quiz.results && React.createElement(ResultContainer, { options: resultsPageOptions }),
                 state.quiz.currentQuestion && React.createElement(QuizQuestions, null))));

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

@@ -21,8 +21,6 @@ export default function apiReducer(state, action) {
             return {
                 ...state,
                 quizRequestState: RequestStates.Success,
-                quizVersionId: action.payload?.quizVersionId,
-                quizSessionId: action.payload?.quizSessionId,
                 quizCurrentQuestion: action.payload?.quizCurrentQuestion,
                 quizResults: undefined,
                 // If no current question set first question value

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

@@ -49,6 +49,11 @@ export default function quizLocalReducer(state, action) {
             return {
                 ...initialState,
             };
+        case QuestionTypes.Hydrate:
+            return {
+                ...state,
+                ...action.payload,
+            };
         default:
             return state;
     }

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -20,7 +20,7 @@ export default function CoverTypeQuestion() {
         return (React.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
-      ` },
+      `, "data-question-key": question.key },
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
                 React.createElement(QuestionDescription, { description: question.description }),

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -42,7 +42,7 @@ function OpenTextQuestion(props) {
         return (React.createElement("div", { className: `
           cio-container${hasImage ? '--with-image' : ''}
           cio-open-text-question-container${hasImage ? '--with-image' : ''}
-        ` },
+        `, "data-question-key": question.key },
             hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),

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

@@ -56,7 +56,7 @@ function SelectTypeQuestion() {
         }
     };
     if (question) {
-        return (React.createElement("div", { className: 'cio-select-question-container' },
+        return (React.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
             React.createElement("div", { className: 'cio-select-question-text' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 question?.description ? React.createElement(QuestionDescription, { description: question.description }) : ''),
@@ -64,7 +64,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, question?.options?.map((option) => (React.createElement("div", { className: `${!hasImages
                     ? 'cio-question-option-container-text-only'
-                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, onClick: () => {
+                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, "data-question-option-key": option.key, onClick: () => {
                     toggleIdSelected(option.id);
                 }, onKeyDown: (event) => {
                     onOptionKeyDown(event, option.id);

package/lib/mjs/components/SessionPromptModal/SessionPromptModal.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CTAButton from '../CTAButton/CTAButton';
+export default function SessionPromptModal({ continueSession, resetStoredState, setShowSessionPrompt, showSessionPrompt, }) {
+    const onNoClickHandler = () => {
+        resetStoredState();
+        setShowSessionPrompt(false);
+    };
+    if (showSessionPrompt)
+        return (React.createElement("div", { className: 'cio-session-prompt-modal', role: 'presentation', onClick: onNoClickHandler },
+            React.createElement("div", { className: 'cio-session-prompt-container' },
+                React.createElement("div", { className: 'cio-session-prompt-content', role: 'presentation', onClick: (e) => e.stopPropagation() },
+                    React.createElement("div", null, "Do you want to continue where you left off?"),
+                    React.createElement("div", { className: 'cio-session-prompt-controls-container' },
+                        React.createElement(CTAButton, { ctaText: 'No', type: 'button', onClick: onNoClickHandler }),
+                        React.createElement(CTAButton, { type: 'button', ctaText: 'Yes', onClick: () => {
+                                continueSession();
+                                setShowSessionPrompt(false);
+                            } }))))));
+    return null;
+}

package/lib/mjs/constants.js

@@ -1,6 +1,8 @@
 // Autocomplete key index
 export const apiKey = 'key_wJSdZSiesX5hiVLt';
 export const quizId = 'coffee-quiz';
+// Session Storage default key
+export const quizSessionStateKey = 'constructorIOQuizState';
 /// //////////////////////////////
 // Storybook Folder Descriptions
 /// //////////////////////////////

package/lib/mjs/hooks/useQuiz.js

@@ -3,15 +3,15 @@ import useConsoleErrors from './useConsoleErrors';
 import useQuizApiState from './useQuizApiState';
 import useQuizEvents from './useQuizEvents';
 import useQuizLocalState from './useQuizLocalState';
-const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions }) => {
+const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions, sessionStateOptions, }) => {
     // Log console errors for required parameters quizId and resultsPageOptions
     useConsoleErrors(quizId, resultsPageOptions);
     // Quiz Local state
-    const { quizLocalState, resetQuizLocalState, dispatchLocalState } = useQuizLocalState();
+    const { quizLocalState, resetQuizLocalState, dispatchLocalState, hydrateQuizLocalState, hasQuizStoredState, resetQuizStoredState, } = useQuizLocalState(sessionStateOptions?.sessionStateKey);
     // Quiz Cio Client
     const cioClient = useCioClient({ apiKey, cioJsClient });
     // Quiz API state
-    const { isFirstQuestion, quizApiState, resetQuizApiState } = useQuizApiState(quizId, quizLocalState, resultsPageOptions, quizVersionId, cioClient);
+    const { isFirstQuestion, quizApiState, resetQuizApiState } = useQuizApiState(quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionId, cioClient);
     // Quiz callback events
     const quizEvents = useQuizEvents({
         cioClient,
@@ -20,6 +20,9 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
         dispatchLocalState,
         resetQuizApiState,
         resetQuizLocalState,
+        hydrateQuizLocalState,
+        resetQuizStoredState,
+        hasQuizStoredState,
     });
     return {
         cioClient,
@@ -30,8 +33,8 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,
-                versionId: quizApiState.quizVersionId,
-                sessionId: quizApiState.quizSessionId,
+                versionId: quizLocalState.quizVersionId,
+                sessionId: quizLocalState.quizSessionId,
                 firstQuestion: quizApiState.quizFirstQuestion,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,

package/lib/mjs/hooks/useQuizApiState.js

@@ -1,8 +1,8 @@
 import { useEffect, useReducer } from 'react';
-import { QuizAPIActionTypes } from '../components/CioQuiz/actions';
+import { QuestionTypes, QuizAPIActionTypes, } from '../components/CioQuiz/actions';
 import apiReducer, { initialState } from '../components/CioQuiz/quizApiReducer';
 import { nextQuestion, getQuizResults } from '../services';
-const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
+const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
     const [quizApiState, dispatch] = useReducer(apiReducer, initialState);
     const firstQuestionId = quizApiState.quizFirstQuestion?.next_question.id;
     const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question.id;
@@ -17,8 +17,8 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
                     const quizResults = await getQuizResults(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         resultsPerPage: resultsPageOptions?.numResultsToDisplay,
-                        quizVersionId: quizApiState.quizVersionId,
-                        quizSessionId: quizApiState.quizSessionId,
+                        quizVersionId: quizLocalState.quizVersionId,
+                        quizSessionId: quizLocalState.quizSessionId,
                     });
                     // Set quiz results state
                     dispatch({
@@ -36,25 +36,28 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
             }
             else {
                 try {
-                    let quizVersionId = quizApiState.quizVersionId || quizVersionIdProp;
-                    let { quizSessionId } = quizApiState;
+                    const quizVersionId = quizLocalState.quizVersionId || quizVersionIdProp;
+                    const { quizSessionId } = quizLocalState;
                     const questionResult = await nextQuestion(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         quizVersionId,
                         quizSessionId,
                     });
-                    if (!quizVersionId && questionResult?.quiz_version_id) {
-                        quizVersionId = questionResult.quiz_version_id;
-                    }
-                    if (!quizSessionId && questionResult?.quiz_session_id) {
-                        quizSessionId = questionResult.quiz_session_id;
+                    // Update quizSessionId, quizVersionId
+                    if ((!quizSessionId && questionResult?.quiz_session_id) ||
+                        (!quizVersionId && questionResult.quiz_version_id)) {
+                        dispatchLocalState({
+                            type: QuestionTypes.Hydrate,
+                            payload: {
+                                quizVersionId: questionResult?.quiz_version_id,
+                                quizSessionId: questionResult?.quiz_session_id,
+                            },
+                        });
                     }
                     // Set current question state
                     dispatch({
                         type: QuizAPIActionTypes.SET_CURRENT_QUESTION,
                         payload: {
-                            quizSessionId,
-                            quizVersionId,
                             quizCurrentQuestion: questionResult,
                         },
                     });
@@ -70,7 +73,7 @@ const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdP
     }, [
         cioClient,
         quizId,
-        quizLocalState,
+        quizLocalState.answers,
         quizLocalState.isLastAnswer,
         resultsPageOptions?.numResultsToDisplay,
     ]);