@constructor-io/constructorio-ui-quizzes 1.3.12 → 1.4.0

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -23,6 +23,41 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
 `;
+exports.hookDescription = `- import \`useCioQuiz\` and call this custom hook in a functional component.
+- This hook leaves rendering logic up to you, while handling:
+  - state management
+  - data fetching
+  - keyboard navigation
+  - mouse interactions
+  - focus and submit event handling
+- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure
+- 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.
+- 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
+
+Calling the \`useCioQuiz\` hook returns an object with the following keys:
+
+\`\`\`jsx
+const {
+  // must be used for a hooks integrations
+  state: QuizReturnState, // Quiz state
+  events: [{...}], // array of quiz events
+  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,
+  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
+  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
+  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
+  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
+  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,
+  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,
+  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,
+  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,
+  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,
+  cioClient, // instance of constructorio-client-javascript
+ } = useCioQuiz(args);
+\`\`\`
+
+> 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)
+`;
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
@@ -44,8 +79,8 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 `;
 var RequestStates;
 (function (RequestStates) {
-    RequestStates[RequestStates["Stale"] = 0] = "Stale";
-    RequestStates[RequestStates["Loading"] = 1] = "Loading";
-    RequestStates[RequestStates["Success"] = 2] = "Success";
-    RequestStates[RequestStates["Error"] = 3] = "Error";
+    RequestStates["Stale"] = "STALE";
+    RequestStates["Loading"] = "LOADING";
+    RequestStates["Success"] = "SUCCESS";
+    RequestStates["Error"] = "ERROR";
 })(RequestStates = exports.RequestStates || (exports.RequestStates = {}));

package/lib/cjs/hooks/useConsoleErrors.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const useConsoleErrors = (quizId, resultsPageOptions) => {
+const useConsoleErrors = (quizOptions) => {
+    const { quizId, resultsPageOptions } = quizOptions;
     (0, react_1.useEffect)(() => {
         if (!quizId) {
             // eslint-disable-next-line no-console

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useSelectInputProps_1 = tslib_1.__importDefault(require("./useSelectInputProps"));
+const useCoverQuestionProps_1 = tslib_1.__importDefault(require("./useCoverQuestionProps"));
+const useOpenTextInputProps_1 = tslib_1.__importDefault(require("./useOpenTextInputProps"));
+const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQuestionButtonProps"));
+const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
+const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
+    var _a, _b, _c;
+    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, resultClick, } = quizEvents;
+    const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(quizAnswerChanged, nextQuestion, (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question, quizLocalState.answerInputs);
+    const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(quizAnswerChanged, (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question);
+    const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
+    const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
+    const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
+    const getResetQuizButtonProps = (0, react_1.useCallback)(() => ({
+        className: 'cio-question-redo-button',
+        type: 'button',
+        onClick: () => resetQuiz(),
+    }), [resetQuiz]);
+    const getHydrateQuizButtonProps = (0, react_1.useCallback)(() => ({
+        className: '',
+        type: 'button',
+        onClick: () => hydrateQuiz(),
+    }), [hydrateQuiz]);
+    const getAddToCartButtonProps = (0, react_1.useCallback)((result, price) => ({
+        className: 'cio-result-card-cta-button',
+        type: 'button',
+        onClick: (e) => addToCart(e, result, price),
+    }), [addToCart]);
+    const quizResultClickDown = (0, react_1.useCallback)((event, result, position) => {
+        if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
+            if (resultClick) {
+                resultClick(result, position);
+            }
+        }
+    }, [resultClick]);
+    const getQuizResultButtonProps = (0, react_1.useCallback)(({ result, position }) => ({
+        className: 'cio-result-card-container',
+        role: 'button',
+        tabIndex: 0,
+        onClick: () => resultClick(result, position),
+        onKeyDown: (event) => quizResultClickDown(event, result, position),
+    }), [quizResultClickDown, resultClick]);
+    const getQuizResultLinkProps = (0, react_1.useCallback)(({ result, position }) => {
+        var _a;
+        return ({
+            href: (_a = result.data) === null || _a === void 0 ? void 0 : _a.url,
+            onClick: () => resultClick(result, position),
+            onKeyDown: (event) => quizResultClickDown(event, result, position),
+        });
+    }, [quizResultClickDown, resultClick]);
+    const getQuizImageProps = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            src: (_c = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.images) === null || _c === void 0 ? void 0 : _c.primary_url,
+            alt: (_f = (_e = (_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question) === null || _e === void 0 ? void 0 : _e.images) === null || _f === void 0 ? void 0 : _f.primary_alt,
+        });
+    }, [quizApiState.quizCurrentQuestion]);
+    const getSelectQuestionImageProps = (0, react_1.useCallback)((option) => {
+        var _a, _b;
+        return ({
+            className: 'cio-question-option-image',
+            src: (_a = option === null || option === void 0 ? void 0 : option.images) === null || _a === void 0 ? void 0 : _a.primary_url,
+            alt: (_b = option === null || option === void 0 ? void 0 : option.images) === null || _b === void 0 ? void 0 : _b.primary_alt,
+        });
+    }, []);
+    return {
+        getOpenTextInputProps,
+        getNextQuestionButtonProps,
+        getPreviousQuestionButtonProps,
+        getQuizImageProps,
+        getSelectQuestionImageProps,
+        getSelectInputProps,
+        getCoverQuestionProps,
+        getResetQuizButtonProps,
+        getHydrateQuizButtonProps,
+        getAddToCartButtonProps,
+        getQuizResultButtonProps,
+        getQuizResultLinkProps,
+    };
+};
+exports.default = usePropsGetters;

package/lib/cjs/hooks/usePropsGetters/useCoverQuestionProps.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useCoverQuestionProps(setQuizAnswers, currentQuestionData) {
+    (0, react_1.useEffect)(() => {
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'cover') {
+            setQuizAnswers('');
+        }
+    }, [setQuizAnswers, currentQuestionData]);
+    const getCoverQuestionProps = (0, react_1.useCallback)(() => ({}), []);
+    return getCoverQuestionProps;
+}
+exports.default = useCoverQuestionProps;

package/lib/cjs/hooks/usePropsGetters/useNextQuestionButtonProps.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState) {
+    const getNextQuestionButtonProps = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e;
+        const currentQuestionId = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
+        let buttonDisabled;
+        if (currentQuestionId && !((_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.isCoverQuestion)) {
+            buttonDisabled =
+                !((_c = quizLocalState.answerInputs[currentQuestionId]) === null || _c === void 0 ? void 0 : _c.value) ||
+                    !((_e = (_d = quizLocalState.answerInputs[currentQuestionId]) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.length);
+        }
+        return {
+            className: buttonDisabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button',
+            type: 'button',
+            onClick: () => {
+                nextQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, quizLocalState.answerInputs, nextQuestion]);
+    return getNextQuestionButtonProps;
+}
+exports.default = useNextQuestionButtonProps;

package/lib/cjs/hooks/usePropsGetters/useOpenTextInputProps.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useOpenTextInputProps(setQuizAnswers, nextQuestion, currentQuestionData, answerInputs) {
+    const [input, setInput] = (0, react_1.useState)('');
+    const onChangeHandler = (0, react_1.useCallback)((e) => {
+        setInput(e.target.value);
+    }, []);
+    const onKeyDownHandler = (0, react_1.useCallback)((e) => {
+        const { key } = e;
+        if (key === 'Enter') {
+            if (input && (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'open') {
+                nextQuestion();
+            }
+        }
+    }, [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type, input, nextQuestion]);
+    (0, react_1.useEffect)(() => {
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'open') {
+            setQuizAnswers(input);
+        }
+    }, [input, currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type, currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id, setQuizAnswers]);
+    // Reset input for new open text questions
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (answerInputs && (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id)) {
+            const questionAnswer = (_a = answerInputs[currentQuestionData.id]) === null || _a === void 0 ? void 0 : _a.value;
+            if (questionAnswer) {
+                setInput(questionAnswer);
+            }
+            else {
+                setInput('');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id]);
+    const getOpenTextInputProps = (0, react_1.useCallback)(() => ({
+        className: 'cio-question-input-text',
+        placeholder: (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.input_placeholder) || 'Answer here...',
+        value: input,
+        onChange: onChangeHandler,
+        onKeyDown: onKeyDownHandler,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.input_placeholder, currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id, input, onKeyDownHandler]);
+    return getOpenTextInputProps;
+}
+exports.default = useOpenTextInputProps;

package/lib/cjs/hooks/usePropsGetters/usePreviousQuestionButtonProps.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function usePreviousQuestionButtonProps(quizApiState, previousQuestion) {
+    const getPreviousQuestionButtonProps = (0, react_1.useCallback)(() => {
+        var _a;
+        const buttonDisabled = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.isFirstQuestion;
+        return {
+            title: 'Quiz Back Button',
+            role: 'button',
+            className: `cio-question-back-button ${buttonDisabled ? 'disabled' : ''}`,
+            type: 'button',
+            onClick: () => previousQuestion(),
+        };
+    }, [quizApiState, previousQuestion]);
+    return getPreviousQuestionButtonProps;
+}
+exports.default = usePreviousQuestionButtonProps;

package/lib/cjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+// eslint-disable-next-line max-params
+function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionData, answerInputs) {
+    var _a;
+    const type = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type;
+    const hasImages = (_a = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.options) === null || _a === void 0 ? void 0 : _a.some((option) => option.images);
+    const [selected, setSelected] = (0, react_1.useState)({});
+    const singleSelectClicked = (0, react_1.useRef)({});
+    const toggleIdSelected = (0, react_1.useCallback)((id) => {
+        if (type === actions_1.QuestionTypes.SingleSelect) {
+            singleSelectClicked.current = true;
+            setSelected({ [id]: true });
+        }
+        else if (type === actions_1.QuestionTypes.MultipleSelect) {
+            if (selected[id]) {
+                const newState = Object.assign({}, selected);
+                delete newState[id];
+                setSelected(newState);
+            }
+            else {
+                setSelected(Object.assign(Object.assign({}, selected), { [id]: true }));
+            }
+        }
+    }, [selected, type]);
+    const onOptionKeyDown = (event, id) => {
+        if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
+            toggleIdSelected(id);
+        }
+    };
+    // Update component local state
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) {
+            const nextQuestionId = currentQuestionData.id;
+            const currentAnswer = answerInputs === null || answerInputs === void 0 ? void 0 : answerInputs[nextQuestionId];
+            const prevSelected = {};
+            if (Array.isArray(currentAnswer === null || currentAnswer === void 0 ? void 0 : currentAnswer.value)) {
+                (_a = currentAnswer === null || currentAnswer === void 0 ? void 0 : currentAnswer.value) === null || _a === void 0 ? void 0 : _a.forEach((answer) => {
+                    prevSelected[Number(answer)] = true;
+                    setSelected(prevSelected);
+                });
+            }
+        }
+        singleSelectClicked.current = false;
+        return function clearState() {
+            setSelected({});
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id]);
+    // Update global state
+    (0, react_1.useEffect)(() => {
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'multiple' || (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'single') {
+            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
+            quizAnswerChanged(selectedAnswers);
+        }
+    }, [selected, currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id, currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type, quizAnswerChanged]);
+    // Go to next question only every time answerInputs (answers input state) changes...
+    // and it's a singleSelectQuestion and user has just clicked on an option
+    (0, react_1.useEffect)(() => {
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'single' && singleSelectClicked.current) {
+            nextQuestion();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [answerInputs]);
+    const getSelectInputProps = (0, react_1.useCallback)((option) => ({
+        className: `${!hasImages ? 'cio-question-option-container-text-only' : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`,
+        onClick: () => {
+            toggleIdSelected(option.id);
+        },
+        onKeyDown: (event) => {
+            onOptionKeyDown(event, option.id);
+        },
+        role: 'button',
+        tabIndex: 0,
+        key: option.id,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id, selected]);
+    return getSelectInputProps;
+}
+exports.default = useSelectInputProps;

package/lib/cjs/hooks/useQuiz.js

@@ -3,35 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
+const usePropsGetters_1 = tslib_1.__importDefault(require("./usePropsGetters"));
 const usePrimaryColorStyles_1 = tslib_1.__importDefault(require("./usePrimaryColorStyles"));
-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, sessionStateOptions, primaryColor, }) => {
+const useQuizState_1 = tslib_1.__importDefault(require("./useQuizState"));
+const useQuiz = (quizOptions) => {
+    const { apiKey, cioJsClient, primaryColor } = quizOptions;
     // Log console errors for required parameters quizId and resultsPageOptions
-    (0, useConsoleErrors_1.default)(quizId, resultsPageOptions);
-    // Quiz Local state
-    const { quizLocalState, resetQuizLocalState, dispatchLocalState, hydrateQuizLocalState, hasQuizStoredState, resetQuizStoredState, } = (0, useQuizLocalState_1.default)(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey);
+    (0, useConsoleErrors_1.default)(quizOptions);
     // Quiz Cio Client
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
-    // Quiz API state
-    const { isFirstQuestion, quizApiState, resetQuizApiState } = (0, useQuizApiState_1.default)(quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionId, cioClient);
+    // Quiz state (Local and API)
+    const quizState = (0, useQuizState_1.default)(quizOptions, cioClient);
     // Quiz callback events
-    const quizEvents = (0, useQuizEvents_1.default)({
-        cioClient,
-        quizApiState,
-        resultsPageOptions,
-        dispatchLocalState,
-        resetQuizApiState,
-        resetQuizLocalState,
-        hydrateQuizLocalState,
-        resetQuizStoredState,
-        hasQuizStoredState,
-    });
+    const quizEvents = (0, useQuizEvents_1.default)(quizOptions, cioClient, quizState);
+    // Props getters
+    const { quizApiState, quizLocalState } = quizState;
+    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
-    return {
-        cioClient,
-        state: {
+    console.log('quizLocalState.answerInputs', quizLocalState.answerInputs);
+    return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
                 isLastAnswer: quizLocalState.isLastAnswer,
@@ -40,15 +31,10 @@ const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOption
                 requestState: quizApiState.quizRequestState,
                 versionId: quizLocalState.quizVersionId,
                 sessionId: quizLocalState.quizSessionId,
-                firstQuestion: quizApiState.quizFirstQuestion,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 resultsFilters: quizApiState.quizResultsFilters,
-                isFirstQuestion,
             },
-        },
-        events: Object.assign({}, quizEvents),
-        primaryColorStyles,
-    };
+        }, events: Object.assign({}, quizEvents) }, propGetters), { primaryColorStyles });
 };
 exports.default = useQuiz;

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

@@ -4,37 +4,42 @@ const tslib_1 = require("tslib");
 const useQuizResultsLoaded_1 = tslib_1.__importDefault(require("./useQuizResultsLoaded"));
 const useQuizResultClick_1 = tslib_1.__importDefault(require("./useQuizResultClick"));
 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, hydrateQuizLocalState, resetQuizStoredState, hasQuizStoredState, } = options;
+const useQuizAnswerChangeHandler_1 = tslib_1.__importDefault(require("./useQuizAnswerChangeHandler"));
+const useQuizNextClick_1 = tslib_1.__importDefault(require("./useQuizNextClick"));
+const useQuizResetClick_1 = tslib_1.__importDefault(require("./useQuizResetClick"));
+const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrateQuizLocalState"));
+const utils_1 = require("../../utils");
+const useQuizEvents = (quizOptions, cioClient, quizState) => {
+    const { quizApiState, dispatchLocalState, dispatchApiState, hasQuizStoredState, quizStateKey, quizLocalState, } = quizState;
+    const { resultsPageOptions } = quizOptions;
     const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
-    // Quiz Next button click
-    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, dispatchLocalState);
+    // Quiz answer change
+    const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
+    // Quiz Next button click callback
+    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState);
     // Quiz Back button click callback
-    const previousQuestion = (0, useQuizBackClick_1.default)(dispatchLocalState);
+    const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
     const addToCart = (0, useQuizAddToCart_1.default)(cioClient, quizApiState, onAddToCartClick);
     // Quiz result click callback
     const resultClick = (0, useQuizResultClick_1.default)(cioClient, quizApiState, onQuizResultClick);
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
-    const resetQuiz = () => {
-        if (quizApiState.quizResults) {
-            resetQuizApiState();
-            resetQuizLocalState();
-            resetQuizStoredState();
-        }
-    };
+    // Quiz reset
+    const resetQuiz = (0, useQuizResetClick_1.default)(quizStateKey, dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    // Quiz rehydrate
+    const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizStateKey, dispatchLocalState);
     return {
         addToCart,
         resultClick,
-        nextQuestion,
+        quizAnswerChanged,
         previousQuestion,
+        nextQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        hasStoredState: hasQuizStoredState,
-        resetStoredState: resetQuizStoredState,
+        hasSessionStorageState: hasQuizStoredState,
+        resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizStateKey),
     };
 };
 exports.default = useQuizEvents;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const utils_1 = require("../../utils");
+const useHydrateQuizLocalState = (quizStateKey, dispatchLocalState) => {
+    const quizState = (0, utils_1.getStateFromSessionStorage)(quizStateKey);
+    const hydrateQuizLocalStateHandler = (0, react_1.useCallback)(() => {
+        if (quizState) {
+            dispatchLocalState({
+                type: actions_1.QuestionTypes.Hydrate,
+                payload: quizState,
+            });
+        }
+    }, [dispatchLocalState, quizState]);
+    return hydrateQuizLocalStateHandler;
+};
+exports.default = useHydrateQuizLocalState;

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

@@ -4,7 +4,7 @@ const react_1 = require("react");
 const services_1 = require("../../services");
 const utils_1 = require("../../utils");
 const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
-    const addToCartClickHandler = (0, react_1.useCallback)((e, result, price) => {
+    const quizAddToCartClickHandler = (0, react_1.useCallback)((e, result, price) => {
         e.preventDefault();
         if (quizApiState.quizResults) {
             // Tracking call
@@ -15,6 +15,6 @@ const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
             }
         }
     }, [quizApiState, cioClient, onAddToCartClick]);
-    return addToCartClickHandler;
+    return quizAddToCartClickHandler;
 };
 exports.default = useQuizAddToCart;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
+    const quizAnswerChangedHandler = (0, react_1.useCallback)((payload) => {
+        var _a;
+        const questionType = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.type;
+        const currentQuestion = quizApiState.quizCurrentQuestion;
+        switch (questionType) {
+            case actions_1.QuestionTypes.Cover:
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Cover,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: '',
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case actions_1.QuestionTypes.OpenText:
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.OpenText,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case actions_1.QuestionTypes.SingleSelect:
+            case actions_1.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;
+};
+exports.default = useQuizAnswerChangeHandler;

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
-const useQuizBackClick = (dispatchLocalState) => {
-    const quizBackHandler = (0, react_1.useCallback)(() => {
+const useQuizBackClick = (quizApiState, dispatchLocalState) => {
+    const quizBackClickHandler = (0, react_1.useCallback)(() => {
         if (dispatchLocalState) {
-            dispatchLocalState({ type: actions_1.QuestionTypes.Back });
+            dispatchLocalState({ type: actions_1.QuestionTypes.Back, payload: quizApiState.quizCurrentQuestion });
         }
-    }, [dispatchLocalState]);
-    return quizBackHandler;
+    }, [dispatchLocalState, quizApiState.quizCurrentQuestion]);
+    return quizBackClickHandler;
 };
 exports.default = useQuizBackClick;

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

@@ -2,47 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
-const useQuizNextClick = (quizApiState, dispatchLocalState) => {
-    const quizNextHandler = (0, react_1.useCallback)((payload) => {
-        var _a;
-        const questionType = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.type;
-        const currentQuestion = quizApiState.quizCurrentQuestion;
-        switch (questionType) {
-            case actions_1.QuestionTypes.Cover:
+const useQuizNextClick = (quizApiState, quizLocalState, dispatchLocalState) => {
+    const quizNexClickHandler = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const currentQuestion = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+        const currentQuestionId = currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id;
+        if (dispatchLocalState && currentQuestionId) {
+            const currentAnswerInput = quizLocalState.answerInputs[currentQuestionId];
+            if (((_b = currentAnswerInput === null || currentAnswerInput === void 0 ? void 0 : currentAnswerInput.value) === null || _b === void 0 ? void 0 : _b.length) || (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'cover') {
                 dispatchLocalState({
-                    type: actions_1.QuestionTypes.Cover,
-                    payload: {
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
+                    type: actions_1.QuestionTypes.Next,
+                    payload: quizApiState.quizCurrentQuestion,
                 });
-                break;
-            case actions_1.QuestionTypes.OpenText:
-                dispatchLocalState({
-                    type: actions_1.QuestionTypes.OpenText,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            case actions_1.QuestionTypes.SingleSelect:
-            case actions_1.QuestionTypes.MultipleSelect:
-                dispatchLocalState({
-                    type: currentQuestion.next_question.type === actions_1.QuestionTypes.SingleSelect
-                        ? actions_1.QuestionTypes.SingleSelect
-                        : actions_1.QuestionTypes.MultipleSelect,
-                    payload: {
-                        questionId: currentQuestion.next_question.id,
-                        input: payload,
-                        isLastQuestion: currentQuestion.is_last_question,
-                    },
-                });
-                break;
-            default:
-                break;
+            }
         }
-    }, [quizApiState, dispatchLocalState]);
-    return quizNextHandler;
+    }, [dispatchLocalState, quizApiState.quizCurrentQuestion, quizLocalState.answerInputs]);
+    return quizNexClickHandler;
 };
 exports.default = useQuizNextClick;