@constructor-io/constructorio-ui-quizzes 1.4.4 → 1.4.5

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

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

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

@@ -17,11 +17,15 @@ function CioQuiz(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) && hasSessionStorageState());
+            setShowSessionPrompt((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) &&
+                hasSessionStorageState() &&
+                !state.quiz.skipToResults);
         }
         else {
-            setShowSessionPrompt(hasSessionStorageState());
+            setShowSessionPrompt(hasSessionStorageState() && !state.quiz.skipToResults);
         }
+        if (state.quiz.skipToResults)
+            hydrateQuiz();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = {
@@ -51,9 +55,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 && react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions }),
-                state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null))));
+            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(QuizQuestions_1.default, null)))));
     }
     return null;
 }

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

@@ -6,6 +6,7 @@ exports.initialState = {
     answers: [],
     answerInputs: {},
     isLastAnswer: false,
+    isQuizCompleted: false,
 };
 function answerInputReducer(state, action) {
     return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: {
@@ -17,13 +18,13 @@ function quizLocalReducer(state, action) {
     var _a, _b, _c, _d, _e;
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion), isQuizCompleted: false });
         case actions_1.QuestionTypes.Cover:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion), isQuizCompleted: false });
         case actions_1.QuestionTypes.SingleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_c = action.payload) === null || _c === void 0 ? void 0 : _c.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_c = action.payload) === null || _c === void 0 ? void 0 : _c.isLastQuestion), isQuizCompleted: false });
         case actions_1.QuestionTypes.MultipleSelect:
-            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion), isQuizCompleted: false });
         case actions_1.QuestionTypes.Next: {
             const { answers } = state;
             const newAnswers = [...answers];
@@ -45,16 +46,18 @@ function quizLocalReducer(state, action) {
                 default:
                     newAnswers.push([]);
             }
-            return Object.assign(Object.assign({}, state), { answers: newAnswers });
+            return Object.assign(Object.assign({}, state), { answers: newAnswers, isQuizCompleted: false });
         }
         case actions_1.QuestionTypes.Back: {
             const newAnswerInputs = Object.assign({}, state.answerInputs);
-            return Object.assign(Object.assign({}, state), { answerInputs: newAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: newAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });
         }
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);
         case actions_1.QuestionTypes.Hydrate:
             return Object.assign(Object.assign({}, state), action.payload);
+        case actions_1.QuestionTypes.Complete:
+            return Object.assign(Object.assign({}, state), { isQuizCompleted: true });
         default:
             return state;
     }

package/lib/cjs/components/ResultCard/ResultCard.js

@@ -37,7 +37,7 @@ function ResultCard(props) {
                             regularPrice)))))));
     };
     const resultCardContentWithoutLink = () => getQuizResultButtonProps && (react_1.default.createElement("div", Object.assign({}, getQuizResultButtonProps({ result, position: resultPosition, type: 'button' })), resultCardContent()));
-    const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));
+    const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));
     return (react_1.default.createElement("div", { className: 'cio-result-card' },
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));

package/lib/cjs/components/ResultContainer/ResultContainer.js

@@ -7,6 +7,7 @@ const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ResultFilters_1 = tslib_1.__importDefault(require("../ResultFilters/ResultFilters"));
 const ZeroResults_1 = tslib_1.__importDefault(require("../ZeroResults/ZeroResults"));
 const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
+const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 function ResultContainer(props) {
     var _a, _b, _c;
     const { options } = props;
@@ -23,6 +24,7 @@ function ResultContainer(props) {
             !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
     }
-    return react_1.default.createElement("div", null, "Loading");
+    return (react_1.default.createElement("div", { className: 'cio-results-container' },
+        react_1.default.createElement(Spinner_1.default, null)));
 }
 exports.default = ResultContainer;

package/lib/cjs/constants.js

@@ -20,6 +20,10 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price 
   - \`resultCardRatingCountKey\` is an optional parameter that specifies the metadata field name for the ratings count 
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
+- \`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
+  - \`sessionStateKey\` is a custom string that will be used as a session storage key
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/cjs/hooks/useQuiz.js

@@ -18,7 +18,7 @@ const useQuiz = (quizOptions) => {
     // Quiz callback events
     const quizEvents = (0, useQuizEvents_1.default)(quizOptions, cioClient, quizState);
     // Props getters
-    const { quizApiState, quizLocalState } = quizState;
+    const { quizApiState, quizLocalState, skipToResults } = quizState;
     const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
     return Object.assign(Object.assign({ cioClient, state: {
@@ -30,6 +30,7 @@ const useQuiz = (quizOptions) => {
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
+                skipToResults,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,

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

@@ -27,7 +27,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = (0, useQuizResetClick_1.default)(quizStateKey, dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = (0, useQuizResetClick_1.default)((0, utils_1.resetQuizSessionStorageState)(quizStateKey), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
     // Quiz rehydrate
     const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizStateKey, dispatchLocalState);
     return {

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

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
-const utils_1 = require("../../utils");
-const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, quizResults) => {
+const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults) => {
     const quizResetClickHandler = (0, react_1.useCallback)(() => {
         if (quizResults) {
             dispatchLocalState({
@@ -12,9 +11,9 @@ const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, q
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.RESET_QUIZ,
             });
-            (0, utils_1.resetQuizSessionStorageState)(quizStateKey);
+            resetQuizSessionStorageState();
         }
-    }, [dispatchLocalState, dispatchApiState, quizStateKey, quizResults]);
+    }, [dispatchLocalState, dispatchApiState, resetQuizSessionStorageState, quizResults]);
     return quizResetClickHandler;
 };
 exports.default = useQuizResetClick;

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

@@ -6,15 +6,16 @@ const useQuizLocalState_1 = tslib_1.__importDefault(require("./useQuizLocalState
 const useQuizState = (quizOptions, cioClient) => {
     const { sessionStateOptions } = quizOptions;
     // Quiz Local state
-    const { quizLocalState, dispatchLocalState, hasQuizStoredState, quizStateKey } = (0, useQuizLocalState_1.default)(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey);
+    const { quizLocalState, dispatchLocalState, hasQuizStoredState, skipToResults, quizStateKey } = (0, useQuizLocalState_1.default)(sessionStateOptions);
     // Quiz API state
-    const { quizApiState, dispatchApiState } = (0, useQuizApiState_1.default)(quizOptions, cioClient, quizLocalState, dispatchLocalState);
+    const { quizApiState, dispatchApiState } = (0, useQuizApiState_1.default)(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {
         quizApiState,
         quizLocalState,
         dispatchApiState,
         dispatchLocalState,
         hasQuizStoredState,
+        skipToResults,
         quizStateKey,
     };
 };

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

@@ -5,7 +5,9 @@ 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 useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalState) => {
+const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState
+// eslint-disable-next-line max-params
+) => {
     const [quizApiState, dispatchApiState] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
     (0, react_1.useEffect)(() => {
@@ -13,7 +15,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (quizLocalState.isLastAnswer) {
+            if (quizLocalState.isLastAnswer || skipToResults) {
                 try {
                     const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
                         answers: quizLocalState.answers,
@@ -28,6 +30,10 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
                             quizResults,
                         },
                     });
+                    if (!quizLocalState.isQuizCompleted)
+                        dispatchLocalState({
+                            type: actions_1.QuestionTypes.Complete,
+                        });
                 }
                 catch (error) {
                     dispatchApiState({

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

@@ -5,9 +5,10 @@ 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 = (sessionStateKey) => {
+const useQuizLocalState = (sessionStateOptions) => {
+    var _a;
     const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
-    const quizStateKey = sessionStateKey || constants_1.quizSessionStateKey;
+    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
@@ -16,6 +17,8 @@ const useQuizLocalState = (sessionStateKey) => {
         }
     }, [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);
@@ -24,6 +27,7 @@ const useQuizLocalState = (sessionStateKey) => {
         quizLocalState,
         hasQuizStoredState,
         dispatchLocalState,
+        skipToResults,
         quizStateKey,
     };
 };

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

@@ -55,6 +55,7 @@ const getMockState = (question) => ({
         requestState: constants_1.RequestStates.Success,
         versionId: '',
         sessionId: '',
+        skipToResults: false,
         currentQuestion: {
             next_question: question,
             isFirstQuestion: false,

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

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

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

@@ -14,11 +14,15 @@ export default function CioQuiz(props) {
     useEffect(() => {
         // Respect showSessionModal if defined, else default to true.
         if (sessionStateOptions?.showSessionModal !== undefined) {
-            setShowSessionPrompt(sessionStateOptions?.showSessionModal && hasSessionStorageState());
+            setShowSessionPrompt(sessionStateOptions?.showSessionModal &&
+                hasSessionStorageState() &&
+                !state.quiz.skipToResults);
         }
         else {
-            setShowSessionPrompt(hasSessionStorageState());
+            setShowSessionPrompt(hasSessionStorageState() && !state.quiz.skipToResults);
         }
+        if (state.quiz.skipToResults)
+            hydrateQuiz();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = {
@@ -48,9 +52,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 && React.createElement(ResultContainer, { options: resultsPageOptions }),
-                state.quiz.currentQuestion && React.createElement(QuizQuestions, null))));
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && React.createElement(QuizQuestions, null)))));
     }
     return null;
 }

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

@@ -3,6 +3,7 @@ export const initialState = {
     answers: [],
     answerInputs: {},
     isLastAnswer: false,
+    isQuizCompleted: false,
 };
 function answerInputReducer(state, action) {
     return {
@@ -20,24 +21,28 @@ export default function quizLocalReducer(state, action) {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
+                isQuizCompleted: false,
             };
         case QuestionTypes.Cover:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
+                isQuizCompleted: false,
             };
         case QuestionTypes.SingleSelect:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
+                isQuizCompleted: false,
             };
         case QuestionTypes.MultipleSelect:
             return {
                 ...state,
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
+                isQuizCompleted: false,
             };
         case QuestionTypes.Next: {
             const { answers } = state;
@@ -63,6 +68,7 @@ export default function quizLocalReducer(state, action) {
             return {
                 ...state,
                 answers: newAnswers,
+                isQuizCompleted: false,
             };
         }
         case QuestionTypes.Back: {
@@ -72,6 +78,7 @@ export default function quizLocalReducer(state, action) {
                 answerInputs: newAnswerInputs,
                 answers: [...state.answers.slice(0, -1)],
                 isLastAnswer: false,
+                isQuizCompleted: false,
             };
         }
         case QuestionTypes.Reset:
@@ -83,6 +90,11 @@ export default function quizLocalReducer(state, action) {
                 ...state,
                 ...action.payload,
             };
+        case QuestionTypes.Complete:
+            return {
+                ...state,
+                isQuizCompleted: true,
+            };
         default:
             return state;
     }

package/lib/mjs/components/ResultCard/ResultCard.js

@@ -30,7 +30,7 @@ export default function ResultCard(props) {
                         "$",
                         regularPrice)))))));
     const resultCardContentWithoutLink = () => getQuizResultButtonProps && (React.createElement("div", { ...getQuizResultButtonProps({ result, position: resultPosition, type: 'button' }) }, resultCardContent()));
-    const resultCardContentWithLink = () => getQuizResultLinkProps && (React.createElement("a", { className: 'cio-result-card-anchor', ...getQuizResultLinkProps({ result, position: resultPosition, type: 'link' }) }, resultCardContent()));
+    const resultCardContentWithLink = () => getQuizResultLinkProps && (React.createElement("a", { className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank', ...getQuizResultLinkProps({ result, position: resultPosition, type: 'link' }) }, resultCardContent()));
     return (React.createElement("div", { className: 'cio-result-card' },
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));

package/lib/mjs/components/ResultContainer/ResultContainer.js

@@ -4,6 +4,7 @@ import QuizContext from '../CioQuiz/context';
 import ResultFilters from '../ResultFilters/ResultFilters';
 import ZeroResults from '../ZeroResults/ZeroResults';
 import Results from '../Results/Results';
+import Spinner from '../Spinner/Spinner';
 export default function ResultContainer(props) {
     const { options } = props;
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, } = options;
@@ -19,5 +20,6 @@ export default function ResultContainer(props) {
             !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey })),
             zeroResults && React.createElement(ZeroResults, null)));
     }
-    return React.createElement("div", null, "Loading");
+    return (React.createElement("div", { className: 'cio-results-container' },
+        React.createElement(Spinner, null)));
 }

package/lib/mjs/constants.js

@@ -17,6 +17,10 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price 
   - \`resultCardRatingCountKey\` is an optional parameter that specifies the metadata field name for the ratings count 
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
+- \`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
+  - \`sessionStateKey\` is a custom string that will be used as a session storage key
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/mjs/hooks/useQuiz.js

@@ -15,7 +15,7 @@ const useQuiz = (quizOptions) => {
     // Quiz callback events
     const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
     // Props getters
-    const { quizApiState, quizLocalState } = quizState;
+    const { quizApiState, quizLocalState, skipToResults } = quizState;
     const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
     return {
@@ -29,6 +29,7 @@ const useQuiz = (quizOptions) => {
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
+                skipToResults,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,

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

@@ -24,7 +24,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = useQuizResetClick(quizStateKey, dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = useQuizResetClick(resetQuizSessionStorageState(quizStateKey), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
     // Quiz rehydrate
     const hydrateQuizLocalState = useHydrateQuizLocalState(quizStateKey, dispatchLocalState);
     return {

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

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
-import { resetQuizSessionStorageState } from '../../utils';
-const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, quizResults) => {
+const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults) => {
     const quizResetClickHandler = useCallback(() => {
         if (quizResults) {
             dispatchLocalState({
@@ -10,9 +9,9 @@ const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, q
             dispatchApiState({
                 type: QuizAPIActionTypes.RESET_QUIZ,
             });
-            resetQuizSessionStorageState(quizStateKey);
+            resetQuizSessionStorageState();
         }
-    }, [dispatchLocalState, dispatchApiState, quizStateKey, quizResults]);
+    }, [dispatchLocalState, dispatchApiState, resetQuizSessionStorageState, quizResults]);
     return quizResetClickHandler;
 };
 export default useQuizResetClick;

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

@@ -3,15 +3,16 @@ import useQuizLocalState from './useQuizLocalState';
 const useQuizState = (quizOptions, cioClient) => {
     const { sessionStateOptions } = quizOptions;
     // Quiz Local state
-    const { quizLocalState, dispatchLocalState, hasQuizStoredState, quizStateKey } = useQuizLocalState(sessionStateOptions?.sessionStateKey);
+    const { quizLocalState, dispatchLocalState, hasQuizStoredState, skipToResults, quizStateKey } = useQuizLocalState(sessionStateOptions);
     // Quiz API state
-    const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, dispatchLocalState);
+    const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {
         quizApiState,
         quizLocalState,
         dispatchApiState,
         dispatchLocalState,
         hasQuizStoredState,
+        skipToResults,
         quizStateKey,
     };
 };

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

@@ -2,7 +2,9 @@ import { useEffect, useReducer } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
 import apiReducer, { initialState, } from '../../components/CioQuiz/quizApiReducer';
 import { getNextQuestion, getQuizResults } from '../../services';
-const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalState) => {
+const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState
+// eslint-disable-next-line max-params
+) => {
     const [quizApiState, dispatchApiState] = useReducer(apiReducer, initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
     useEffect(() => {
@@ -10,7 +12,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (quizLocalState.isLastAnswer) {
+            if (quizLocalState.isLastAnswer || skipToResults) {
                 try {
                     const quizResults = await getQuizResults(cioClient, quizId, {
                         answers: quizLocalState.answers,
@@ -25,6 +27,10 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
                             quizResults,
                         },
                     });
+                    if (!quizLocalState.isQuizCompleted)
+                        dispatchLocalState({
+                            type: QuestionTypes.Complete,
+                        });
                 }
                 catch (error) {
                     dispatchApiState({

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

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useReducer } from 'react';
 import quizLocalReducer, { initialState } from '../../components/CioQuiz/quizLocalReducer';
 import { quizSessionStateKey } from '../../constants';
 import { getStateFromSessionStorage, logger } from '../../utils';
-const useQuizLocalState = (sessionStateKey) => {
+const useQuizLocalState = (sessionStateOptions) => {
     const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
-    const quizStateKey = sessionStateKey || quizSessionStateKey;
+    const quizStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
     useEffect(() => {
         // don't save state if initial state
         if (quizLocalState?.answers?.length) {
@@ -12,6 +12,8 @@ const useQuizLocalState = (sessionStateKey) => {
         }
     }, [quizLocalState, quizStateKey]);
     const hasQuizStoredState = () => getStateFromSessionStorage(quizStateKey) !== null;
+    const skipToResults = !!getStateFromSessionStorage(quizStateKey)?.isQuizCompleted &&
+        !sessionStateOptions?.showSessionModalOnResults;
     const dispatchLocalState = useCallback((action) => {
         logger(action);
         dispatch(action);
@@ -20,6 +22,7 @@ const useQuizLocalState = (sessionStateKey) => {
         quizLocalState,
         hasQuizStoredState,
         dispatchLocalState,
+        skipToResults,
         quizStateKey,
     };
 };

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

@@ -67,6 +67,7 @@ export const getMockState = (question) => ({
         requestState: RequestStates.Success,
         versionId: '',
         sessionId: '',
+        skipToResults: false,
         currentQuestion: {
             next_question: question,
             isFirstQuestion: false,

package/lib/types/components/CioQuiz/actions.d.ts

@@ -8,7 +8,8 @@ export declare enum QuestionTypes {
     Next = "next",
     Back = "back",
     Reset = "reset",
-    Hydrate = "hydrate"
+    Hydrate = "hydrate",
+    Complete = "complete"
 }
 export interface QuestionAnswer<Value> {
     questionId: number;
@@ -23,7 +24,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

package/lib/types/components/CioQuiz/quizLocalReducer.d.ts

@@ -5,6 +5,7 @@ export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: AnswerInputState;
     isLastAnswer: boolean;
+    isQuizCompleted: boolean;
     quizVersionId?: string;
     quizSessionId?: string;
 };

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `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\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";

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

@@ -1,4 +1,4 @@
 import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
 import { QuizEventsReturn, QuizResultsResponse } from '../../types';
-declare const useQuizResetClick: (quizStateKey: string, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
+declare const useQuizResetClick: (resetQuizSessionStorageState: () => void, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
 export default useQuizResetClick;

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

@@ -10,6 +10,7 @@ type UseQuizState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient) =>
     dispatchApiState: React.Dispatch<ActionQuizAPI>;
     dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
     hasQuizStoredState: () => boolean;
+    skipToResults: boolean;
     quizStateKey: string;
 };
 declare const useQuizState: UseQuizState;