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

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

@@ -0,0 +1,20 @@
+"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 useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, quizResults) => {
+    const quizResetClickHandler = (0, react_1.useCallback)(() => {
+        if (quizResults) {
+            dispatchLocalState({
+                type: actions_1.QuestionTypes.Reset,
+            });
+            dispatchApiState({
+                type: actions_1.QuizAPIActionTypes.RESET_QUIZ,
+            });
+            (0, utils_1.resetQuizSessionStorageState)(quizStateKey);
+        }
+    }, [dispatchLocalState, dispatchApiState, quizStateKey, quizResults]);
+    return quizResetClickHandler;
+};
+exports.default = useQuizResetClick;

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

@@ -4,7 +4,7 @@ const react_1 = require("react");
 const services_1 = require("../../services");
 const utils_1 = require("../../utils");
 const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
-    const resultClickHandler = (0, react_1.useCallback)((result, position) => {
+    const quizResultClickHandler = (0, react_1.useCallback)((result, position) => {
         if (quizApiState.quizResults) {
             // Tracking call
             (0, services_1.trackQuizResultClick)(cioClient, quizApiState.quizResults, result, position);
@@ -14,6 +14,6 @@ const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
             }
         }
     }, [quizApiState, cioClient, onQuizResultClick]);
-    return resultClickHandler;
+    return quizResultClickHandler;
 };
 exports.default = useQuizResultClick;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const useQuizApiState_1 = tslib_1.__importDefault(require("./useQuizApiState"));
+const useQuizLocalState_1 = tslib_1.__importDefault(require("./useQuizLocalState"));
+const 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);
+    // Quiz API state
+    const { quizApiState, dispatchApiState } = (0, useQuizApiState_1.default)(quizOptions, cioClient, quizLocalState, dispatchLocalState);
+    return {
+        quizApiState,
+        quizLocalState,
+        dispatchApiState,
+        dispatchLocalState,
+        hasQuizStoredState,
+        quizStateKey,
+    };
+};
+exports.default = useQuizState;

package/lib/cjs/hooks/{useQuizApiState.js → useQuizState/useQuizApiState.js}

@@ -2,18 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const actions_1 = require("../components/CioQuiz/actions");
-const quizApiReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizApiReducer"));
-const services_1 = require("../services");
-const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
-    var _a, _b;
-    const [quizApiState, dispatch] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
-    const firstQuestionId = (_a = quizApiState.quizFirstQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
-    const currentQuestionId = (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question.id;
-    const isFirstQuestion = firstQuestionId === currentQuestionId;
+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 [quizApiState, dispatchApiState] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
+    const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-            dispatch({
+            dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
             });
             if (quizLocalState.isLastAnswer) {
@@ -25,7 +22,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                         quizSessionId: quizLocalState.quizSessionId,
                     });
                     // Set quiz results state
-                    dispatch({
+                    dispatchApiState({
                         type: actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS,
                         payload: {
                             quizResults,
@@ -33,7 +30,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                     });
                 }
                 catch (error) {
-                    dispatch({
+                    dispatchApiState({
                         type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
                     });
                 }
@@ -42,7 +39,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                 try {
                     const quizVersionId = quizLocalState.quizVersionId || quizVersionIdProp;
                     const { quizSessionId } = quizLocalState;
-                    const questionResult = yield (0, services_1.nextQuestion)(cioClient, quizId, {
+                    const questionResult = yield (0, services_1.getNextQuestion)(cioClient, quizId, {
                         answers: quizLocalState.answers,
                         quizVersionId,
                         quizSessionId,
@@ -59,7 +56,7 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                         });
                     }
                     // Set current question state
-                    dispatch({
+                    dispatchApiState({
                         type: actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION,
                         payload: {
                             quizCurrentQuestion: questionResult,
@@ -67,28 +64,17 @@ const useFetchQuiz = (quizId, quizLocalState, dispatchLocalState, resultsPageOpt
                     });
                 }
                 catch (error) {
-                    dispatch({
+                    dispatchApiState({
                         type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
                     });
                 }
             }
         }))();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        cioClient,
-        quizId,
-        quizLocalState.answers,
-        quizLocalState.isLastAnswer,
-        resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
-    ]);
-    const resetQuizApiState = () => {
-        dispatch({ type: actions_1.QuizAPIActionTypes.RESET_QUIZ });
-    };
+    }, [cioClient, quizId, quizLocalState.answers, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay]);
     return {
-        cioClient,
         quizApiState,
-        isFirstQuestion,
-        resetQuizApiState,
+        dispatchApiState,
     };
 };
-exports.default = useFetchQuiz;
+exports.default = useQuizApiState;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const quizLocalReducer_1 = tslib_1.__importStar(require("../../components/CioQuiz/quizLocalReducer"));
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const useQuizLocalState = (sessionStateKey) => {
+    const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
+    const quizStateKey = sessionStateKey || constants_1.quizSessionStateKey;
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        // don't save state if initial state
+        if ((_a = quizLocalState === null || quizLocalState === void 0 ? void 0 : quizLocalState.answers) === null || _a === void 0 ? void 0 : _a.length) {
+            (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizStateKey, JSON.stringify(quizLocalState));
+        }
+    }, [quizLocalState, quizStateKey]);
+    const hasQuizStoredState = () => (0, utils_1.getStateFromSessionStorage)(quizStateKey) !== null;
+    const dispatchLocalState = (0, react_1.useCallback)((action) => {
+        (0, utils_1.logger)(action);
+        dispatch(action);
+    }, []);
+    return {
+        quizLocalState,
+        hasQuizStoredState,
+        dispatchLocalState,
+        quizStateKey,
+    };
+};
+exports.default = useQuizLocalState;

package/lib/cjs/index.js

@@ -1,5 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResultHeroCard = exports.ResultFilters = exports.ResultContainer = exports.ResultCard = exports.Results = exports.SelectQuestion = exports.CoverQuestion = exports.OpenTextQuestion = exports.QuizQuestions = exports.useCioQuiz = void 0;
 const tslib_1 = require("tslib");
 const CioQuiz_1 = tslib_1.__importDefault(require("./components/CioQuiz"));
+// Hook
+var useQuiz_1 = require("./hooks/useQuiz");
+Object.defineProperty(exports, "useCioQuiz", { enumerable: true, get: function () { return tslib_1.__importDefault(useQuiz_1).default; } });
+// Questions Components
+var index_1 = require("./components/QuizQuestions/index");
+Object.defineProperty(exports, "QuizQuestions", { enumerable: true, get: function () { return tslib_1.__importDefault(index_1).default; } });
+var OpenTextTypeQuestion_1 = require("./components/OpenTextTypeQuestion/OpenTextTypeQuestion");
+Object.defineProperty(exports, "OpenTextQuestion", { enumerable: true, get: function () { return tslib_1.__importDefault(OpenTextTypeQuestion_1).default; } });
+var CoverTypeQuestion_1 = require("./components/CoverTypeQuestion/CoverTypeQuestion");
+Object.defineProperty(exports, "CoverQuestion", { enumerable: true, get: function () { return tslib_1.__importDefault(CoverTypeQuestion_1).default; } });
+var SelectTypeQuestion_1 = require("./components/SelectTypeQuestion/SelectTypeQuestion");
+Object.defineProperty(exports, "SelectQuestion", { enumerable: true, get: function () { return tslib_1.__importDefault(SelectTypeQuestion_1).default; } });
+// Results Components
+var Results_1 = require("./components/Results/Results");
+Object.defineProperty(exports, "Results", { enumerable: true, get: function () { return tslib_1.__importDefault(Results_1).default; } });
+var ResultCard_1 = require("./components/ResultCard/ResultCard");
+Object.defineProperty(exports, "ResultCard", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultCard_1).default; } });
+var ResultContainer_1 = require("./components/ResultContainer/ResultContainer");
+Object.defineProperty(exports, "ResultContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultContainer_1).default; } });
+var ResultFilters_1 = require("./components/ResultFilters/ResultFilters");
+Object.defineProperty(exports, "ResultFilters", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultFilters_1).default; } });
+var ResultHeroCard_1 = require("./components/ResultHeroCard/ResultHeroCard");
+Object.defineProperty(exports, "ResultHeroCard", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultHeroCard_1).default; } });
+tslib_1.__exportStar(require("./types"), exports);
 exports.default = CioQuiz_1.default;

package/lib/cjs/services/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizResultsLoaded = exports.getQuizResults = exports.nextQuestion = exports.getCioClient = void 0;
+exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizResultsLoaded = exports.getQuizResults = exports.getNextQuestion = exports.getCioClient = void 0;
 const tslib_1 = require("tslib");
 /* eslint-disable @typescript-eslint/naming-convention */
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
@@ -14,8 +14,8 @@ const getCioClient = (apiKey) => {
     return undefined;
 };
 exports.getCioClient = getCioClient;
-const nextQuestion = (cioClient, quizId, parameters) => cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizNextQuestion(quizId, parameters);
-exports.nextQuestion = nextQuestion;
+const getNextQuestion = (cioClient, quizId, parameters) => cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizNextQuestion(quizId, parameters);
+exports.getNextQuestion = getNextQuestion;
 const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizResults(quizId, parameters); });
 exports.getQuizResults = getQuizResults;
 // Tracking requests

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

@@ -1,12 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMockContextValue = exports.getMockState = exports.questionOptions = exports.questionOptionsWithImages = exports.getMockQuestionWithImage = exports.getMockQuestion = void 0;
+exports.useMockContextValue = exports.getMockState = exports.questionOptions = exports.questionOptionsWithImages = exports.getMockQuestionWithImage = exports.getMockQuestion = void 0;
+const tslib_1 = require("tslib");
+const constants_1 = require("../../../constants");
+const useOpenTextInputProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useOpenTextInputProps"));
+const useCoverQuestionProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useCoverQuestionProps"));
+const useSelectInputProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useSelectInputProps"));
 const getMockQuestion = (type) => ({
     id: 1,
     title: 'This is question title',
     description: 'This is question description',
     cta_text: 'Continue',
     type,
+    input_placeholder: 'Answer here...',
 });
 exports.getMockQuestion = getMockQuestion;
 const getMockImages = () => ({
@@ -37,16 +43,26 @@ exports.questionOptions = [
 ];
 const getMockState = (question) => ({
     answers: {
-        inputs: { 1: '' },
+        inputs: {
+            1: {
+                type: question === null || question === void 0 ? void 0 : question.type,
+                value: '',
+            },
+        },
         isLastAnswer: false,
     },
     quiz: {
-        requestState: 1,
+        requestState: constants_1.RequestStates.Success,
         versionId: '',
         sessionId: '',
-        isFirstQuestion: false,
         currentQuestion: {
             next_question: question,
+            isFirstQuestion: false,
+            isOpenQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'open',
+            isCoverQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'cover',
+            isSingleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
+            isMultipleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'multiple',
+            isSelectQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
         },
         results: {
             response: {
@@ -78,19 +94,58 @@ const getMockState = (question) => ({
                         },
                     },
                 ],
+                facets: [],
+                groups: [],
+                sort_options: [],
+                refined_content: [],
+                total_num_results: 10,
+                features: [],
+                result_sources: {},
             },
+            quiz_id: '',
+            quiz_session_id: '',
+            quiz_version_id: '',
         },
         resultsFilters: ['Chocolate', 'Medium'],
     },
 });
 exports.getMockState = getMockState;
-const getMockContextValue = (question) => ({
-    state: (0, exports.getMockState)(question),
-    previousQuestion: () => { },
-    nextQuestion: () => { },
-    addToCart: () => { },
-    customClickItemCallback: false,
-    resetQuiz: () => { },
-    resultClick: () => { },
-});
-exports.getMockContextValue = getMockContextValue;
+const mockElementProps = {
+    className: '',
+    type: 'submit',
+    onClick: () => { },
+    onChange: () => { },
+    onKeyDown: () => { },
+    role: 'button',
+    tabIndex: 0,
+    key: 0,
+    style: {},
+    placeholder: '',
+    value: '',
+};
+const useMockContextValue = (question) => {
+    const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(() => { }, () => { }, question);
+    const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(() => { }, question);
+    const getSelectInputProps = (0, useSelectInputProps_1.default)(() => { }, () => { }, question);
+    return {
+        state: (0, exports.getMockState)(question),
+        getCoverQuestionProps,
+        getOpenTextInputProps,
+        getSelectInputProps,
+        getAddToCartButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getHydrateQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getNextQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
+        getQuizImageProps: () => mockElementProps,
+        getQuizResultButtonProps: () => mockElementProps,
+        getQuizResultLinkProps: () => mockElementProps,
+        getResetQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-redo-button' })),
+        primaryColorStyles: {
+            '--primary-color-h': '12',
+            '--primary-color-s': '14',
+            '--primary-color-l': '14',
+        },
+        customClickItemCallback: false,
+    };
+};
+exports.useMockContextValue = useMockContextValue;

package/lib/cjs/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.renderImages = void 0;
+exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.logger = exports.resetQuizSessionStorageState = exports.getStateFromSessionStorage = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
+/* eslint-disable no-console */
 const react_1 = tslib_1.__importDefault(require("react"));
 const actions_1 = require("./components/CioQuiz/actions");
 const renderImages = (images, cssClasses) => {
@@ -123,6 +124,27 @@ const getFilterValuesFromExpression = (exp) => {
     return [];
 };
 exports.getFilterValuesFromExpression = getFilterValuesFromExpression;
+const getStateFromSessionStorage = (quizStateKey) => {
+    var _a;
+    const state = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(quizStateKey);
+    if (state) {
+        return JSON.parse(state);
+    }
+    return null;
+};
+exports.getStateFromSessionStorage = getStateFromSessionStorage;
+const resetQuizSessionStorageState = (quizStateKey) => () => {
+    var _a;
+    (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(quizStateKey);
+};
+exports.resetQuizSessionStorageState = resetQuizSessionStorageState;
+const logger = (action) => {
+    console.group(`%cAction:%c  ${action.type}`, 'color: red; font-weight: bold;', 'color: green; font-weight: lighter;');
+    console.log('%c type:', 'color: #9E9E9E; font-weight: 700;', action.type);
+    console.log('%c payload:', 'color: #00A7F7; font-weight: 700;', action.payload);
+    console.groupEnd();
+};
+exports.logger = logger;
 // Function to emulate pausing between interactions
 function sleep(ms) {
     // eslint-disable-next-line

package/lib/mjs/components/BackButton/BackButton.js

@@ -1,9 +1,14 @@
-import React from 'react';
-function BackButton(props) {
-    // eslint-disable-next-line
-    const { disabled } = props;
-    return (React.createElement("button", { title: 'Quiz Back Button', type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}`, ...props },
-        React.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("path", { d: 'M6.06313 1.06268L0.964522 5.43176C0.882383 5.50218 0.816449 5.58954 0.771245 5.68785C0.726041 5.78615 0.702637 5.89306 0.702637 6.00126C0.702637 6.10946 0.726041 6.21637 0.771245 6.31467C0.816449 6.41297 0.882383 6.50033 0.964522 6.57076L6.06313 10.9398C6.5498 11.3568 7.30153 11.0111 7.30153 10.3703V1.63093C7.30153 0.990168 6.5498 0.644468 6.06313 1.06268Z', fill: 'currentColor' }))));
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+function BackButton() {
+    const { getPreviousQuestionButtonProps } = useContext(QuizContext);
+    if (getPreviousQuestionButtonProps) {
+        return (getPreviousQuestionButtonProps && (
+        // eslint-disable-next-line react/button-has-type
+        React.createElement("button", { ...getPreviousQuestionButtonProps() },
+            React.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+                React.createElement("path", { d: 'M6.06313 1.06268L0.964522 5.43176C0.882383 5.50218 0.816449 5.58954 0.771245 5.68785C0.726041 5.78615 0.702637 5.89306 0.702637 6.00126C0.702637 6.10946 0.726041 6.21637 0.771245 6.31467C0.816449 6.41297 0.882383 6.50033 0.964522 6.57076L6.06313 10.9398C6.5498 11.3568 7.30153 11.0111 7.30153 10.3703V1.63093C7.30153 0.990168 6.5498 0.644468 6.06313 1.06268Z', fill: 'currentColor' })))));
+    }
+    return null;
 }
 export default BackButton;

package/lib/mjs/components/CTAButton/CTAButton.js

@@ -1,7 +1,8 @@
 import React from 'react';
 function CTAButton(props) {
-    const { ctaText = 'Continue', disabled, className = 'cio-button-container', ...rest } = props;
-    return (React.createElement("div", { className: `${className || ''}` },
-        React.createElement("button", { type: 'button', className: `${disabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button'}`, ...rest }, ctaText || 'Continue')));
+    const { propsGetters, ctaText = 'Continue', disabled, className = 'cio-button-container', ...rest } = props;
+    return (React.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    React.createElement("button", { ...rest, ...propsGetters() }, ctaText || 'Continue'))));
 }
 export default CTAButton;

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

@@ -5,6 +5,7 @@ export var QuestionTypes;
     QuestionTypes["Cover"] = "cover";
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
+    QuestionTypes["Next"] = "next";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

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

@@ -8,28 +8,35 @@ import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString } from '../../utils';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick, hydrateQuiz, hasStoredState, resetStoredState, }, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     useEffect(() => {
         // Respect showSessionModal if defined, else default to true.
         if (sessionStateOptions?.showSessionModal !== undefined) {
-            setShowSessionPrompt(sessionStateOptions?.showSessionModal && hasStoredState());
+            setShowSessionPrompt(sessionStateOptions?.showSessionModal && hasSessionStorageState());
         }
         else {
-            setShowSessionPrompt(hasStoredState());
+            setShowSessionPrompt(hasSessionStorageState());
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = {
         cioClient,
         state,
-        nextQuestion,
-        previousQuestion,
-        resetQuiz,
-        addToCart,
-        resultClick,
+        getAddToCartButtonProps,
+        getCoverQuestionProps,
+        getHydrateQuizButtonProps,
+        getNextQuestionButtonProps,
+        getOpenTextInputProps,
+        getPreviousQuestionButtonProps,
+        getQuizImageProps,
+        getQuizResultButtonProps,
+        getQuizResultLinkProps,
+        getResetQuizButtonProps,
+        getSelectInputProps,
         customClickItemCallback: !!resultsPageOptions?.onQuizResultClick,
+        primaryColorStyles,
     };
     if (state.quiz.requestState === RequestStates.Loading) {
         return (React.createElement("div", { className: 'cio-quiz' },
@@ -40,7 +47,7 @@ export default function CioQuiz(props) {
             React.createElement("style", null,
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
-            React.createElement(SessionPromptModal, { resetStoredState: resetStoredState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
+            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))));

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

@@ -1,5 +1,5 @@
 import { RequestStates } from '../../constants';
-import { getFilterValuesFromExpression } from '../../utils';
+import { getFilterValuesFromExpression, getQuestionTypes } from '../../utils';
 import { QuizAPIActionTypes } from './actions';
 export const initialState = {
     quizRequestState: RequestStates.Stale,
@@ -10,24 +10,36 @@ export default function apiReducer(state, action) {
             return {
                 ...state,
                 quizRequestState: RequestStates.Loading,
+                quizCurrentQuestion: undefined,
+                quizResults: undefined,
             };
         case QuizAPIActionTypes.SET_IS_ERROR:
             return {
                 ...state,
                 quizRequestState: RequestStates.Error,
+                quizCurrentQuestion: undefined,
                 quizResults: undefined,
             };
-        case QuizAPIActionTypes.SET_CURRENT_QUESTION:
+        case QuizAPIActionTypes.SET_CURRENT_QUESTION: {
+            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
+            const quizFirstQuestion = state.quizFirstQuestion || action.payload?.quizCurrentQuestion;
             return {
                 ...state,
                 quizRequestState: RequestStates.Success,
-                quizCurrentQuestion: action.payload?.quizCurrentQuestion,
+                quizCurrentQuestion: {
+                    ...action.payload?.quizCurrentQuestion,
+                    isFirstQuestion: quizFirstQuestion?.next_question.id ===
+                        action.payload?.quizCurrentQuestion?.next_question?.id,
+                    isOpenQuestion,
+                    isCoverQuestion,
+                    isSingleQuestion,
+                    isMultipleQuestion,
+                    isSelectQuestion,
+                },
+                quizFirstQuestion,
                 quizResults: undefined,
-                // If no current question set first question value
-                ...(!state.quizCurrentQuestion && {
-                    quizFirstQuestion: action.payload?.quizCurrentQuestion,
-                }),
             };
+        }
         case QuizAPIActionTypes.SET_QUIZ_RESULTS: {
             const filterExpression = action.payload?.quizResults?.request?.collection_filter_expression || null;
             const quizResultsFilters = [...new Set(getFilterValuesFromExpression(filterExpression))];

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

@@ -1,4 +1,4 @@
-import { QuestionTypes, } from './actions';
+import { QuestionTypes } from './actions';
 export const initialState = {
     answers: [],
     answerInputs: {},
@@ -7,7 +7,10 @@ export const initialState = {
 function answerInputReducer(state, action) {
     return {
         ...state,
-        [String(action.payload.questionId)]: action.payload.input,
+        [String(action.payload.questionId)]: {
+            type: action.type,
+            value: action.payload.input,
+        },
     };
 }
 export default function quizLocalReducer(state, action) {
@@ -15,36 +18,62 @@ export default function quizLocalReducer(state, action) {
         case QuestionTypes.OpenText:
             return {
                 ...state,
-                answers: [...state.answers, ['true']],
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
             };
         case QuestionTypes.Cover:
             return {
                 ...state,
-                answers: [...state.answers, ['seen']],
+                answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
             };
         case QuestionTypes.SingleSelect:
             return {
                 ...state,
-                answers: [...state.answers, action.payload?.input],
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
             };
         case QuestionTypes.MultipleSelect:
             return {
                 ...state,
-                answers: [...state.answers, action.payload?.input],
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isLastAnswer: !!action.payload?.isLastQuestion,
             };
-        case QuestionTypes.Back:
+        case QuestionTypes.Next: {
+            const { answers } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)?.[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case QuestionTypes.OpenText:
+                    newAnswers.push(['true']);
+                    break;
+                case QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case QuestionTypes.SingleSelect:
+                    newAnswers.push(currentAnswerInput.value);
+                    break;
+                case QuestionTypes.MultipleSelect:
+                    newAnswers.push(currentAnswerInput.value);
+                    break;
+                default:
+                    newAnswers.push([]);
+            }
+            return {
+                ...state,
+                answers: newAnswers,
+            };
+        }
+        case QuestionTypes.Back: {
+            const newAnswerInputs = { ...state.answerInputs };
             return {
                 ...state,
+                answerInputs: newAnswerInputs,
                 answers: [...state.answers.slice(0, -1)],
                 isLastAnswer: false,
             };
+        }
         case QuestionTypes.Reset:
             return {
                 ...initialState,