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

package/lib/mjs/hooks/useQuiz.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import useCioClient from './useCioClient';
 import useConsoleErrors from './useConsoleErrors';
 import usePropsGetters from './usePropsGetters';
@@ -15,9 +16,15 @@ const useQuiz = (quizOptions) => {
     // Quiz callback events
     const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
     // Props getters
-    const { quizApiState, quizLocalState, skipToResults } = quizState;
+    const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
+    const { skipToResults } = quizSessionStorageState;
     const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
+    useEffect(() => {
+        if (skipToResults)
+            quizEvents.hydrateQuiz();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return {
         cioClient,
         state: {
@@ -29,11 +36,11 @@ const useQuiz = (quizOptions) => {
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
-                skipToResults,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
             },
+            quizSessionStorageState,
         },
         events: {
             ...quizEvents,

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

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

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

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

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

@@ -2,42 +2,44 @@ import { useCallback } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
 const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
     const quizAnswerChangedHandler = useCallback((payload) => {
-        const questionType = quizApiState.quizCurrentQuestion?.next_question.type;
+        const questionType = quizApiState.quizCurrentQuestion?.next_question?.type;
         const currentQuestion = quizApiState.quizCurrentQuestion;
-        switch (questionType) {
-            case QuestionTypes.Cover:
-                dispatchLocalState({
-                    type: QuestionTypes.Cover,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: '',
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case QuestionTypes.OpenText:
-                dispatchLocalState({
-                    type: QuestionTypes.OpenText,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case QuestionTypes.SingleSelect:
-            case QuestionTypes.MultipleSelect:
-                dispatchLocalState({
-                    type: currentQuestion.next_question.type,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            default:
-                break;
+        if (currentQuestion?.next_question) {
+            switch (questionType) {
+                case QuestionTypes.Cover:
+                    dispatchLocalState({
+                        type: QuestionTypes.Cover,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: '',
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                case QuestionTypes.OpenText:
+                    dispatchLocalState({
+                        type: QuestionTypes.OpenText,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: payload,
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                case QuestionTypes.SingleSelect:
+                case QuestionTypes.MultipleSelect:
+                    dispatchLocalState({
+                        type: currentQuestion.next_question.type,
+                        payload: {
+                            questionId: currentQuestion.next_question.id,
+                            input: payload,
+                            isLastQuestion: currentQuestion.is_last_question,
+                        },
+                    });
+                    break;
+                default:
+                    break;
+            }
         }
     }, [quizApiState, dispatchLocalState]);
     return quizAnswerChangedHandler;

package/lib/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/useQuizApiState.js

@@ -7,36 +7,39 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
 ) => {
     const [quizApiState, dispatchApiState] = useReducer(apiReducer, initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
+    const dispatchQuizResults = async () => {
+        try {
+            const quizResults = await getQuizResults(cioClient, quizId, {
+                answers: quizLocalState.answers,
+                resultsPerPage: resultsPageOptions?.numResultsToDisplay,
+                quizVersionId: quizLocalState.quizVersionId,
+                quizSessionId: quizLocalState.quizSessionId,
+            });
+            // Set quiz results state
+            dispatchApiState({
+                type: QuizAPIActionTypes.SET_QUIZ_RESULTS,
+                payload: {
+                    quizResults,
+                },
+            });
+            if (!quizLocalState.isQuizCompleted)
+                dispatchLocalState({
+                    type: QuestionTypes.Complete,
+                });
+        }
+        catch (error) {
+            dispatchApiState({
+                type: QuizAPIActionTypes.SET_IS_ERROR,
+            });
+        }
+    };
     useEffect(() => {
         (async () => {
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
             if (quizLocalState.isLastAnswer || skipToResults) {
-                try {
-                    const quizResults = await getQuizResults(cioClient, quizId, {
-                        answers: quizLocalState.answers,
-                        resultsPerPage: resultsPageOptions?.numResultsToDisplay,
-                        quizVersionId: quizLocalState.quizVersionId,
-                        quizSessionId: quizLocalState.quizSessionId,
-                    });
-                    // Set quiz results state
-                    dispatchApiState({
-                        type: QuizAPIActionTypes.SET_QUIZ_RESULTS,
-                        payload: {
-                            quizResults,
-                        },
-                    });
-                    if (!quizLocalState.isQuizCompleted)
-                        dispatchLocalState({
-                            type: QuestionTypes.Complete,
-                        });
-                }
-                catch (error) {
-                    dispatchApiState({
-                        type: QuizAPIActionTypes.SET_IS_ERROR,
-                    });
-                }
+                await dispatchQuizResults();
             }
             else {
                 try {
@@ -47,6 +50,10 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
                         quizVersionId,
                         quizSessionId,
                     });
+                    if (!questionResult.next_question) {
+                        await dispatchQuizResults();
+                        return;
+                    }
                     // Update quizSessionId, quizVersionId
                     if ((!quizSessionId && questionResult?.quiz_session_id) ||
                         (!quizVersionId && questionResult.quiz_version_id)) {

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@ export type Answers = string[][];
 export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: AnswerInputState;
+    prevAnswerInputs: AnswerInputState;
     isLastAnswer: boolean;
     isQuizCompleted: boolean;
     quizVersionId?: string;

package/lib/types/hooks/usePropsGetters/useCoverQuestionProps.d.ts

@@ -1,2 +1,3 @@
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { GetCoverQuestionProps, Question, QuizEventsReturn } from '../../types';
-export default function useCoverQuestionProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, currentQuestionData?: Question): GetCoverQuestionProps;
+export default function useCoverQuestionProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, currentQuestionData?: Nullable<Question>): GetCoverQuestionProps;

package/lib/types/hooks/usePropsGetters/useOpenTextInputProps.d.ts

@@ -1,2 +1,3 @@
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { AnswerInputState, GetOpenTextInputProps, Question, QuizEventsReturn } from '../../types';
-export default function useOpenTextInputProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Question, answerInputs?: AnswerInputState): GetOpenTextInputProps;
+export default function useOpenTextInputProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Nullable<Question>, answerInputs?: AnswerInputState): GetOpenTextInputProps;

package/lib/types/hooks/usePropsGetters/useSelectInputProps.d.ts

@@ -1,2 +1,3 @@
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { AnswerInputState, GetSelectInputProps, Question, QuizEventsReturn } from '../../types';
-export default function useSelectInputProps(quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Question, answerInputs?: AnswerInputState): GetSelectInputProps;
+export default function useSelectInputProps(quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Nullable<Question>, answerInputs?: AnswerInputState): GetSelectInputProps;

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

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

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

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

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

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

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

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

package/lib/types/types.d.ts

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

package/package.json

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