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

package/lib/cjs/components/BackButton/BackButton.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function BackButton(props) {
-    // eslint-disable-next-line
-    const { disabled } = props;
-    return (react_1.default.createElement("button", Object.assign({ title: 'Quiz Back Button', type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}` }, props),
-        react_1.default.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            react_1.default.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' }))));
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function BackButton() {
+    const { getPreviousQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
+    if (getPreviousQuestionButtonProps) {
+        return (getPreviousQuestionButtonProps && (
+        // eslint-disable-next-line react/button-has-type
+        react_1.default.createElement("button", Object.assign({}, getPreviousQuestionButtonProps()),
+            react_1.default.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+                react_1.default.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;
 }
 exports.default = BackButton;

package/lib/cjs/components/CTAButton/CTAButton.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function CTAButton(props) {
-    const { ctaText = 'Continue', disabled, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["ctaText", "disabled", "className"]);
-    return (react_1.default.createElement("div", { className: `${className || ''}` },
-        react_1.default.createElement("button", Object.assign({ 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' } = props, rest = tslib_1.__rest(props, ["propsGetters", "ctaText", "disabled", "className"]);
+    return (react_1.default.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    react_1.default.createElement("button", Object.assign({}, rest, propsGetters()), ctaText || 'Continue'))));
 }
 exports.default = CTAButton;

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

@@ -8,6 +8,7 @@ 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/cjs/components/CioQuiz/index.js

@@ -11,28 +11,35 @@ const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 const utils_1 = require("../../utils");
 function CioQuiz(props) {
-    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick, hydrateQuiz, hasStoredState, resetStoredState, }, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     (0, react_1.useEffect)(() => {
         // Respect showSessionModal if defined, else default to true.
         if ((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) !== undefined) {
-            setShowSessionPrompt((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModal) && hasStoredState());
+            setShowSessionPrompt((sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : 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 === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onQuizResultClick),
+        primaryColorStyles,
     };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
@@ -43,7 +50,7 @@ function CioQuiz(props) {
             react_1.default.createElement("style", null,
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
-            react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetStoredState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
+            react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             react_1.default.createElement(context_1.default.Provider, { value: contextValue },
                 state.quiz.results && react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions }),
                 state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null))));

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

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

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

@@ -8,21 +8,49 @@ exports.initialState = {
     isLastAnswer: false,
 };
 function answerInputReducer(state, action) {
-    return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: action.payload.input });
+    return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: {
+            type: action.type,
+            value: action.payload.input,
+        } });
 }
 function quizLocalReducer(state, action) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
-            return Object.assign(Object.assign({}, state), { answers: [...state.answers, ['true']], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion) });
         case actions_1.QuestionTypes.Cover:
-            return Object.assign(Object.assign({}, state), { answers: [...state.answers, ['seen']], isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion) });
         case actions_1.QuestionTypes.SingleSelect:
-            return Object.assign(Object.assign({}, state), { answers: [...state.answers, (_c = action.payload) === null || _c === void 0 ? void 0 : _c.input], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion) });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_c = action.payload) === null || _c === void 0 ? void 0 : _c.isLastQuestion) });
         case actions_1.QuestionTypes.MultipleSelect:
-            return Object.assign(Object.assign({}, state), { answers: [...state.answers, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.input], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_f = action.payload) === null || _f === void 0 ? void 0 : _f.isLastQuestion) });
-        case actions_1.QuestionTypes.Back:
-            return Object.assign(Object.assign({}, state), { answers: [...state.answers.slice(0, -1)], isLastAnswer: false });
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion) });
+        case actions_1.QuestionTypes.Next: {
+            const { answers } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = (_e = Object.values(state.answerInputs)) === null || _e === void 0 ? void 0 : _e[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case actions_1.QuestionTypes.OpenText:
+                    newAnswers.push(['true']);
+                    break;
+                case actions_1.QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case actions_1.QuestionTypes.SingleSelect:
+                    newAnswers.push(currentAnswerInput.value);
+                    break;
+                case actions_1.QuestionTypes.MultipleSelect:
+                    newAnswers.push(currentAnswerInput.value);
+                    break;
+                default:
+                    newAnswers.push([]);
+            }
+            return Object.assign(Object.assign({}, state), { answers: newAnswers });
+        }
+        case actions_1.QuestionTypes.Back: {
+            const newAnswerInputs = Object.assign({}, state.answerInputs);
+            return Object.assign(Object.assign({}, state), { answerInputs: newAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false });
+        }
         case actions_1.QuestionTypes.Reset:
             return Object.assign({}, exports.initialState);
         case actions_1.QuestionTypes.Hydrate:

package/lib/cjs/components/ControlBar/ControlBar.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { ctaButtonText } = props;
+    const { getNextQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
-        showBackButton && react_1.default.createElement(BackButton_1.default, { onClick: backButtonHandler }),
-        react_1.default.createElement(CTAButton_1.default, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
+        react_1.default.createElement(BackButton_1.default, null),
+        react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
 }
 exports.default = ControlBar;

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

@@ -9,17 +9,12 @@ const utils_1 = require("../../utils");
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function CoverTypeQuestion() {
     var _a;
-    const { state, previousQuestion, nextQuestion } = (0, react_1.useContext)(context_1.default);
+    const { state } = (0, react_1.useContext)(context_1.default);
     let question;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion.next_question;
     }
     const hasImage = (_a = question === null || question === void 0 ? void 0 : question.images) === null || _a === void 0 ? void 0 : _a.primary_url;
-    const onNextClick = () => {
-        if (nextQuestion) {
-            nextQuestion();
-        }
-    };
     if (question) {
         return (react_1.default.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
@@ -29,7 +24,7 @@ function CoverTypeQuestion() {
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
     }
     return null;
 }

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

@@ -7,41 +7,13 @@ const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescri
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
-function OpenTextQuestion(props) {
+function OpenTextQuestion() {
     var _a;
-    const { initialValue = '', onChangeHandler: userDefinedHandler = null } = props;
-    const { state, previousQuestion, nextQuestion } = (0, react_1.useContext)(context_1.default);
-    const [openTextInput, setOpenTextInput] = (0, react_1.useState)(initialValue);
+    const { state, getOpenTextInputProps } = (0, react_1.useContext)(context_1.default);
     let question;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion.next_question;
     }
-    const onChangeHandler = (e) => {
-        setOpenTextInput(e.target.value);
-        if (userDefinedHandler) {
-            userDefinedHandler(e);
-        }
-    };
-    const onNextClick = () => {
-        if (nextQuestion && openTextInput) {
-            nextQuestion(openTextInput);
-        }
-    };
-    const onKeyDownHandler = (e) => {
-        const { key } = e;
-        if (key === 'Enter') {
-            onNextClick();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
-            const questionId = (_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
-            const currentAnswer = (_b = state.answers.inputs) === null || _b === void 0 ? void 0 : _b[questionId];
-            const openTextAnswer = currentAnswer || initialValue;
-            setOpenTextInput(openTextAnswer);
-        }
-    }, [state, initialValue]);
     if (question) {
         const hasImage = (_a = question === null || question === void 0 ? void 0 : question.images) === null || _a === void 0 ? void 0 : _a.primary_url;
         return (react_1.default.createElement("div", { className: `
@@ -52,8 +24,8 @@ function OpenTextQuestion(props) {
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                react_1.default.createElement("input", { className: 'cio-question-input-text', placeholder: question.input_placeholder || 'Answer here...', value: openTextInput, onChange: onChangeHandler, onKeyDown: onKeyDownHandler }),
-                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: !openTextInput, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())),
+                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
     }
     return null;
 }

package/lib/cjs/components/RedoButton/RedoButton.js

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const RedoSVG_1 = tslib_1.__importDefault(require("./RedoSVG"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function RedoButton(props) {
     const { redoText = 'Redo Quiz', disabled } = props, rest = tslib_1.__rest(props, ["redoText", "disabled"]);
-    return (react_1.default.createElement("button", Object.assign({ type: 'button', className: `${disabled ? 'cio-question-redo-button disabled' : 'cio-question-redo-button'}` }, rest),
-        react_1.default.createElement(RedoSVG_1.default, null),
-        react_1.default.createElement("span", null, redoText)));
+    const { getResetQuizButtonProps } = (0, react_1.useContext)(context_1.default);
+    if (getResetQuizButtonProps) {
+        return (
+        // eslint-disable-next-line react/button-has-type
+        react_1.default.createElement("button", Object.assign({}, rest, getResetQuizButtonProps()),
+            react_1.default.createElement(RedoSVG_1.default, null),
+            react_1.default.createElement("span", null, redoText)));
+    }
+    return null;
 }
 exports.default = RedoButton;

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

@@ -7,21 +7,9 @@ const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
     var _a, _b;
     const { result, salePriceKey, regularPriceKey, resultPosition } = props;
-    const { resultClick, customClickItemCallback } = (0, react_1.useContext)(context_1.default);
+    const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = (0, react_1.useContext)(context_1.default);
     const salePrice = salePriceKey && ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[salePriceKey]);
     const regularPrice = regularPriceKey && ((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b[regularPriceKey]);
-    const clickHandler = () => {
-        if (resultClick) {
-            resultClick(result, resultPosition);
-        }
-    };
-    const keyDownHandler = (event) => {
-        if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
-            if (resultClick) {
-                resultClick(result, resultPosition);
-            }
-        }
-    };
     const resultCardContent = () => {
         var _a;
         return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -37,11 +25,8 @@ function ResultCard(props) {
                         "$",
                         regularPrice))))));
     };
-    const resultCardContentWithoutLink = () => (react_1.default.createElement("div", { className: 'cio-result-card-container', onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), role: 'button', tabIndex: 0 }, resultCardContent()));
-    const resultCardContentWithLink = () => {
-        var _a;
-        return (react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_a = result.data) === null || _a === void 0 ? void 0 : _a.url, onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e) }, resultCardContent()));
-    };
+    const resultCardContentWithoutLink = () => getQuizResultButtonProps && (react_1.default.createElement("div", Object.assign({}, getQuizResultButtonProps({ result, position: resultPosition, type: 'button' })), resultCardContent()));
+    const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));
     return (react_1.default.createElement("div", { className: 'cio-result-card' },
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));

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

@@ -11,7 +11,7 @@ function ResultContainer(props) {
     var _a, _b, _c;
     const { options } = props;
     const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
-    const { state, resetQuiz } = (0, react_1.useContext)(context_1.default);
+    const { state } = (0, react_1.useContext)(context_1.default);
     const zeroResults = !((_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length);
     const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
     if (state === null || state === void 0 ? void 0 : state.quiz.results) {
@@ -19,7 +19,7 @@ function ResultContainer(props) {
             react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
             react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },
                 react_1.default.createElement(ResultFilters_1.default, null),
-                react_1.default.createElement(RedoButton_1.default, { onClick: resetQuiz })),
+                react_1.default.createElement(RedoButton_1.default, null)),
             !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
     }

package/lib/cjs/components/ResultCtaButton/ResultCtaButton.js

@@ -4,12 +4,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCtaButton(props) {
-    const { item, className, price } = props;
-    const { addToCart } = (0, react_1.useContext)(context_1.default);
-    return (react_1.default.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: (e) => {
-            if (addToCart) {
-                addToCart(e, item, price);
-            }
-        } }, "Add to Cart"));
+    const { item, price } = props;
+    const { getAddToCartButtonProps } = (0, react_1.useContext)(context_1.default);
+    if (getAddToCartButtonProps) {
+        return (
+        // eslint-disable-next-line react/button-has-type
+        react_1.default.createElement("button", Object.assign({}, getAddToCartButtonProps(item, price)), "Add to Cart"));
+    }
+    return null;
 }
 exports.default = ResultCtaButton;

package/lib/cjs/components/ResultHeroCard/ResultHeroCard.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/ResultCtaButton"));
+// const flattenRequestFilters: any = (result: any, key: any) => {
+//   return Object.keys(result).reduce((res: any, el: any) => {
+//     if (el === key) {
+//       if (typeof result[el] === 'string') {
+//         return [...res, result[el]];
+//       } else if (Array.isArray(result[el])) {
+//         return [...res, ...result[el]];
+//       }
+//     }
+//     if (typeof result[el] === 'object' && result[el] !== null) {
+//       return [...res, ...flattenRequestFilters(result[el], key)]
+//     }
+//     return res;
+//   }, [])
+// }
+// Code used to flatten facets and extract the key. TBD if we are using it for facet pills
+function ResultHeroCard(props) {
+    var _a, _b;
+    const { heroItem } = props;
+    return (react_1.default.createElement("div", { className: 'cio-hero-card' },
+        react_1.default.createElement("img", { className: 'cio-hero-card-image', src: (_a = heroItem === null || heroItem === void 0 ? void 0 : heroItem.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: 'product' }),
+        react_1.default.createElement("div", { className: 'cio-hero-card-contents' },
+            react_1.default.createElement("div", { className: 'cio-hero-card-title' }, "Especially Curated For You!"),
+            react_1.default.createElement("h2", { className: 'cio-hero-card-item-name' }, heroItem === null || heroItem === void 0 ? void 0 : heroItem.value),
+            react_1.default.createElement("div", { className: 'cio-hero-card-item-price' },
+                "$", (_b = heroItem === null || heroItem === void 0 ? void 0 : heroItem.data) === null || _b === void 0 ? void 0 :
+                _b.price),
+            react_1.default.createElement("p", { className: 'cio-hero-card-item-description' }),
+            react_1.default.createElement(ResultCtaButton_1.default, { item: [heroItem] }))));
+}
+exports.default = ResultHeroCard;

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

@@ -6,63 +6,19 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const utils_1 = require("../../utils");
-const actions_1 = require("../CioQuiz/actions");
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
+const actions_1 = require("../CioQuiz/actions");
 function SelectTypeQuestion() {
-    var _a, _b;
-    const { state, nextQuestion, previousQuestion } = (0, react_1.useContext)(context_1.default);
+    var _a;
+    const { state, getSelectInputProps } = (0, react_1.useContext)(context_1.default);
     let question;
-    let type;
     let hasImages = false;
     let instructions;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
-        type = question.type;
         hasImages = question.options.some((option) => option.images);
-        instructions = type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
+        instructions = question.type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
     }
-    const [selected, setSelected] = (0, react_1.useState)({});
-    const isDisabled = Object.keys(selected).length === 0;
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.type) {
-            const nextQuestionId = state.quiz.currentQuestion.next_question.id;
-            const answers = ((_d = (_c = state.answers) === null || _c === void 0 ? void 0 : _c.inputs) === null || _d === void 0 ? void 0 : _d[nextQuestionId]) || [];
-            const prevSelected = {};
-            answers === null || answers === void 0 ? void 0 : answers.forEach((answer) => {
-                prevSelected[Number(answer)] = true;
-            });
-            setSelected(prevSelected);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [(_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id]);
-    const toggleIdSelected = (id) => {
-        if (type === actions_1.QuestionTypes.SingleSelect && nextQuestion) {
-            setSelected({ [id]: true });
-            nextQuestion([id.toString()]);
-        }
-        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 }));
-            }
-        }
-    };
-    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);
-        }
-    };
-    const onNextClick = () => {
-        if (nextQuestion && !isDisabled && (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion)) {
-            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
-            nextQuestion(selectedAnswers);
-        }
-    };
     if (question) {
         return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
             react_1.default.createElement("div", { className: 'cio-select-question-text' },
@@ -71,16 +27,10 @@ function SelectTypeQuestion() {
             instructions && react_1.default.createElement("div", { className: 'cio-select-question-instructions' }, instructions),
             react_1.default.createElement("div", { className: `${!hasImages
                     ? 'cio-question-options-container-text-only'
-                    : 'cio-question-options-container'}` }, (_b = question === null || question === void 0 ? void 0 : question.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement("div", { className: `${!hasImages
-                    ? 'cio-question-option-container-text-only'
-                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, "data-question-option-key": option.key, onClick: () => {
-                    toggleIdSelected(option.id);
-                }, onKeyDown: (event) => {
-                    onOptionKeyDown(event, option.id);
-                }, role: 'button', tabIndex: 0, key: option.id },
+                    : 'cio-question-options-container'}` }, (_a = question === null || question === void 0 ? void 0 : question.options) === null || _a === void 0 ? void 0 : _a.map((option) => getSelectInputProps && (react_1.default.createElement("div", Object.assign({}, getSelectInputProps(option)),
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
                 react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })));
+            react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (question === null || question === void 0 ? void 0 : question.cta_text) || 'Continue' })));
     }
     return null;
 }

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

@@ -8,17 +8,29 @@ function SessionPromptModal({ continueSession, resetStoredState, setShowSessionP
         resetStoredState();
         setShowSessionPrompt(false);
     };
-    if (showSessionPrompt)
+    if (showSessionPrompt) {
+        const getContinueSessionButtonProps = () => ({
+            className: 'cio-question-cta-button',
+            onClick: () => {
+                continueSession();
+                setShowSessionPrompt(false);
+            },
+        });
+        const getResetSession = () => ({
+            className: 'cio-question-cta-button',
+            onClick: () => {
+                resetStoredState();
+                setShowSessionPrompt(false);
+            },
+        });
         return (react_1.default.createElement("div", { className: 'cio-session-prompt-modal', role: 'presentation', onClick: onNoClickHandler },
             react_1.default.createElement("div", { className: 'cio-session-prompt-container' },
                 react_1.default.createElement("div", { className: 'cio-session-prompt-content', role: 'presentation', onClick: (e) => e.stopPropagation() },
                     react_1.default.createElement("div", null, "Do you want to continue where you left off?"),
                     react_1.default.createElement("div", { className: 'cio-session-prompt-controls-container' },
-                        react_1.default.createElement(CTAButton_1.default, { ctaText: 'No', type: 'button', onClick: onNoClickHandler }),
-                        react_1.default.createElement(CTAButton_1.default, { type: 'button', ctaText: 'Yes', onClick: () => {
-                                continueSession();
-                                setShowSessionPrompt(false);
-                            } }))))));
+                        react_1.default.createElement(CTAButton_1.default, { ctaText: 'No', type: 'button', propsGetters: getResetSession }),
+                        react_1.default.createElement(CTAButton_1.default, { type: 'button', ctaText: 'Yes', propsGetters: getContinueSessionButtonProps }))))));
+    }
     return null;
 }
 exports.default = SessionPromptModal;

package/lib/cjs/components/ZeroResults/ZeroResults.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
-function ZeroResults(props) {
-    const { resetQuizClickHandler } = props;
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function ZeroResults() {
+    const { getResetQuizButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-zero-results' },
         react_1.default.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
         react_1.default.createElement("p", { className: 'cio-zero-results-description' }, "This is embarrassing \uD83D\uDE22. It might be that some of the questions are not properly set up from our end. Would you give us another try?"),
-        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Try Again', onClick: resetQuizClickHandler })));
+        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
 }
 exports.default = ZeroResults;