@constructor-io/constructorio-ui-quizzes 1.2.2 → 1.3.0

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuestionTypes = void 0;
+exports.QuizAPIActionTypes = exports.QuestionTypes = void 0;
+// Local Actions
 var QuestionTypes;
 (function (QuestionTypes) {
     QuestionTypes["OpenText"] = "open";
@@ -10,3 +11,12 @@ var QuestionTypes;
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
 })(QuestionTypes = exports.QuestionTypes || (exports.QuestionTypes = {}));
+// API actions
+var QuizAPIActionTypes;
+(function (QuizAPIActionTypes) {
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_IS_LOADING"] = 0] = "SET_IS_LOADING";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_IS_ERROR"] = 1] = "SET_IS_ERROR";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS"] = 2] = "SET_QUIZ_RESULTS";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_CURRENT_QUESTION"] = 3] = "SET_CURRENT_QUESTION";
+    QuizAPIActionTypes[QuizAPIActionTypes["RESET_QUIZ"] = 4] = "RESET_QUIZ";
+})(QuizAPIActionTypes = exports.QuizAPIActionTypes || (exports.QuizAPIActionTypes = {}));

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

@@ -1,123 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const context_1 = tslib_1.__importDefault(require("./context"));
-const reducer_1 = tslib_1.__importStar(require("./reducer"));
-const actions_1 = require("./actions");
 const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
 const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
 const constants_1 = require("../../constants");
-const utils_1 = require("../../utils");
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
-const useCioClient_1 = tslib_1.__importDefault(require("../../hooks/useCioClient"));
+const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 function CioQuiz(props) {
-    const { quizId, apiKey, cioJsClient, resultsPageOptions, quizVersionId: quizVersionIdProp, } = props;
-    if (!quizId) {
-        // eslint-disable-next-line no-console
-        console.error('quizId is a required field of type string');
-    }
-    if (!resultsPageOptions || Object.keys(resultsPageOptions).length === 0) {
-        // eslint-disable-next-line no-console
-        console.error('resultsPageOptions is a required field of type object');
-    }
-    if (resultsPageOptions && !(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.addToCartCallback)) {
-        // eslint-disable-next-line no-console
-        console.error('resultsPageOptions.addToCartCallback is a required field of type function');
-    }
-    const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
-    const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState);
-    const [requestState, setRequestState] = (0, react_1.useState)(constants_1.RequestStates.Stale);
-    const [questionResponse, setQuestionResponse] = (0, react_1.useState)();
-    const [resultsResponse, setResultsResponse] = (0, react_1.useState)();
-    const [firstQuestion, setFirstQuestion] = (0, react_1.useState)();
-    const [quizVersionId, setQuizVersionId] = (0, react_1.useState)(quizVersionIdProp || '');
-    const [quizSessionId, setQuizSessionId] = (0, react_1.useState)('');
-    const isFirstQuestion = (firstQuestion === null || firstQuestion === void 0 ? void 0 : firstQuestion.next_question.id) === (questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question.id);
-    const quizNextHandler = (0, react_1.useCallback)((action) => {
-        if (action) {
-            dispatch(action);
-        }
-    }, [dispatch]);
-    const quizBackHandler = (0, react_1.useCallback)(() => {
-        if (dispatch) {
-            dispatch({ type: actions_1.QuestionTypes.Back });
-        }
-    }, [dispatch]);
+    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick }, } = (0, useQuiz_1.default)(props);
+    const { resultsPageOptions } = props;
     const contextValue = {
-        dispatch,
-        questionResponse,
-        state,
-        resultsResponse,
-        isFirstQuestion,
-        quizNextHandler,
-        quizBackHandler,
         cioClient,
+        state,
+        nextQuestion,
+        previousQuestion,
+        resetQuiz,
+        addToCart,
+        resultClick,
+        customClickItemCallback: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onQuizResultClick),
     };
-    (0, react_1.useEffect)(() => {
-        (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            if (cioClient) {
-                setRequestState(constants_1.RequestStates.Loading);
-                if (state.isLastAnswer) {
-                    try {
-                        const quizResults = yield (0, utils_1.getQuizResults)(cioClient, quizId, {
-                            answers: state.answers,
-                            resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
-                            quizVersionId,
-                            quizSessionId,
-                        });
-                        setResultsResponse(quizResults);
-                        setRequestState(constants_1.RequestStates.Success);
-                        setQuestionResponse(undefined);
-                    }
-                    catch (error) {
-                        setResultsResponse(undefined);
-                        setRequestState(constants_1.RequestStates.Error);
-                    }
-                }
-                else {
-                    try {
-                        const questionResult = yield (0, utils_1.getNextQuestion)(cioClient, quizId, {
-                            answers: state.answers,
-                            quizVersionId,
-                            quizSessionId,
-                        });
-                        setQuestionResponse(questionResult);
-                        setRequestState(constants_1.RequestStates.Success);
-                        setResultsResponse(undefined);
-                        if (!quizVersionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_version_id)) {
-                            setQuizVersionId(questionResult.quiz_version_id);
-                        }
-                        if (!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) {
-                            setQuizSessionId(questionResult.quiz_session_id);
-                        }
-                    }
-                    catch (error) {
-                        setRequestState(constants_1.RequestStates.Error);
-                    }
-                }
-            }
-        }))();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, state, quizId, state.isLastAnswer, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay]);
-    (0, react_1.useEffect)(() => {
-        if (!firstQuestion) {
-            setFirstQuestion(questionResponse);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [questionResponse]);
-    const resetQuizSessionId = () => {
-        setQuizSessionId('');
-    };
-    if (requestState === constants_1.RequestStates.Loading) {
+    if (state.quiz.requestState === constants_1.RequestStates.Loading) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
             react_1.default.createElement(Spinner_1.default, null)));
     }
-    if (requestState === constants_1.RequestStates.Success) {
+    if (state.quiz.requestState === constants_1.RequestStates.Success) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
             react_1.default.createElement(context_1.default.Provider, { value: contextValue },
-                resultsResponse && (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions, resetQuizSessionId: resetQuizSessionId })),
-                questionResponse && react_1.default.createElement(QuizQuestions_1.default, { questionResponse: questionResponse }))));
+                state.quiz.results && react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions }),
+                state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null))));
     }
     return null;
 }

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialState = void 0;
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const actions_1 = require("./actions");
+exports.initialState = {
+    quizRequestState: constants_1.RequestStates.Stale,
+};
+function apiReducer(state, action) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    switch (action.type) {
+        case actions_1.QuizAPIActionTypes.SET_IS_LOADING:
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Loading });
+        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, quizVersionId: (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizVersionId, quizSessionId: (_b = action.payload) === null || _b === void 0 ? void 0 : _b.quizSessionId, quizCurrentQuestion: (_c = action.payload) === null || _c === void 0 ? void 0 : _c.quizCurrentQuestion, quizResults: undefined }), (!state.quizCurrentQuestion && {
+                quizFirstQuestion: (_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion,
+            }));
+        case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
+            const filterExpression = ((_g = (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizResults) === null || _f === void 0 ? void 0 : _f.request) === null || _g === void 0 ? void 0 : _g.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: (_h = action.payload) === null || _h === void 0 ? void 0 : _h.quizResults, quizResultsFilters, quizCurrentQuestion: undefined });
+        }
+        case actions_1.QuizAPIActionTypes.RESET_QUIZ:
+            return exports.initialState;
+        default:
+            return state;
+    }
+}
+exports.default = apiReducer;

package/lib/cjs/components/CioQuiz/{reducer.js → quizLocalReducer.js}

@@ -10,7 +10,7 @@ exports.initialState = {
 function answerInputReducer(state, action) {
     return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: action.payload.input });
 }
-function reducer(state, action) {
+function quizLocalReducer(state, action) {
     var _a, _b, _c, _d, _e, _f;
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
@@ -29,4 +29,4 @@ function reducer(state, action) {
             return state;
     }
 }
-exports.default = reducer;
+exports.default = quizLocalReducer;

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

@@ -6,24 +6,18 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
-const actions_1 = require("../CioQuiz/actions");
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function CoverTypeQuestion() {
     var _a;
-    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion } = (0, react_1.useContext)(context_1.default);
+    const { state, previousQuestion, nextQuestion } = (0, react_1.useContext)(context_1.default);
     let question;
-    if (questionResponse) {
-        question = questionResponse.next_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 (quizNextHandler) {
-            quizNextHandler({
-                type: actions_1.QuestionTypes.Cover,
-                payload: {
-                    isLastQuestion: questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.is_last_question,
-                },
-            });
+        if (nextQuestion) {
+            nextQuestion();
         }
     };
     if (question) {
@@ -34,7 +28,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: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })),
+                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 })),
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : ''));
     }
     return null;

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

@@ -6,16 +6,15 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-const actions_1 = require("../CioQuiz/actions");
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function OpenTextQuestion(props) {
     var _a;
     const { initialValue = '', onChangeHandler: userDefinedHandler = null } = props;
-    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion, state } = (0, react_1.useContext)(context_1.default);
+    const { state, previousQuestion, nextQuestion } = (0, react_1.useContext)(context_1.default);
     const [openTextInput, setOpenTextInput] = (0, react_1.useState)(initialValue);
     let question;
-    if (questionResponse) {
-        question = questionResponse.next_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);
@@ -24,15 +23,8 @@ function OpenTextQuestion(props) {
         }
     };
     const onNextClick = () => {
-        if (quizNextHandler && openTextInput && questionResponse) {
-            quizNextHandler({
-                type: actions_1.QuestionTypes.OpenText,
-                payload: {
-                    questionId: questionResponse.next_question.id,
-                    input: openTextInput,
-                    isLastQuestion: questionResponse.is_last_question,
-                },
-            });
+        if (nextQuestion && openTextInput) {
+            nextQuestion(openTextInput);
         }
     };
     const onKeyDownHandler = (e) => {
@@ -42,12 +34,14 @@ function OpenTextQuestion(props) {
         }
     };
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (questionResponse) {
-            const openTextAnswer = ((_a = state === null || state === void 0 ? void 0 : state.answerInputs) === null || _a === void 0 ? void 0 : _a[questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question.id]) || initialValue;
+        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);
         }
-    }, [questionResponse, state, initialValue]);
+    }, [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: `
@@ -59,7 +53,7 @@ function OpenTextQuestion(props) {
                 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: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                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 }))));
     }
     return null;
 }

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

@@ -1,13 +1,16 @@
 "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 OpenTextTypeQuestion_1 = tslib_1.__importDefault(require("../OpenTextTypeQuestion/OpenTextTypeQuestion"));
 const CoverTypeQuestion_1 = tslib_1.__importDefault(require("../CoverTypeQuestion/CoverTypeQuestion"));
 const SelectTypeQuestion_1 = tslib_1.__importDefault(require("../SelectTypeQuestion/SelectTypeQuestion"));
 const utils_1 = require("../../utils");
-function QuizQuestions(props) {
-    const { questionResponse: { next_question: nextQuestion }, } = props;
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function QuizQuestions() {
+    var _a;
+    const { state } = (0, react_1.useContext)(context_1.default);
+    const nextQuestion = (_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
     const questionTypes = (0, utils_1.getQuestionTypes)(nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.type);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         questionTypes.isOpenQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),

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

@@ -6,40 +6,20 @@ const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/Re
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
     var _a, _b;
-    const { result, addToCartCallback, clickItemCallback: customClickItemCallback, salePriceKey, regularPriceKey, resultPosition, } = props;
-    const { resultsResponse, cioClient } = (0, react_1.useContext)(context_1.default);
+    const { result, salePriceKey, regularPriceKey, resultPosition } = props;
+    const { resultClick, customClickItemCallback } = (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 clickItemCallback = () => {
-        var _a;
-        /* eslint-disable @typescript-eslint/naming-convention */
-        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
-            const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = resultsResponse;
-            /* eslint-enable @typescript-eslint/naming-convention */
-            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultClick({
-                quiz_id,
-                quiz_version_id,
-                quiz_session_id,
-                item_id: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
-                item_name: result === null || result === void 0 ? void 0 : result.value,
-                section,
-                result_count: total_num_results,
-                result_page: page,
-                result_id,
-                result_position_on_page: resultPosition,
-                num_results_per_page,
-            });
-        }
-        if (customClickItemCallback && typeof customClickItemCallback === 'function') {
-            customClickItemCallback(result);
-        }
-    };
     const clickHandler = () => {
-        clickItemCallback();
+        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') {
-            clickItemCallback();
+            if (resultClick) {
+                resultClick(result, resultPosition);
+            }
         }
     };
     const resultCardContent = () => {
@@ -56,12 +36,12 @@ function ResultCard(props) {
                     regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                         "$",
                         regularPrice)))),
-            react_1.default.createElement(ResultCtaButton_1.default, { item: result, callback: addToCartCallback, price: salePrice || regularPrice })));
+            react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));
     };
     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 }, resultCardContent()));
     };
-    return (react_1.default.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
+    return (react_1.default.createElement("div", { onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
 }
 exports.default = ResultCard;

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

@@ -3,47 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const RedoButton_1 = tslib_1.__importDefault(require("../RedoButton/RedoButton"));
-const actions_1 = require("../CioQuiz/actions");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ResultFilters_1 = tslib_1.__importDefault(require("../ResultFilters/ResultFilters"));
 const ZeroResults_1 = tslib_1.__importDefault(require("../ZeroResults/ZeroResults"));
 const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
 function ResultContainer(props) {
     var _a, _b, _c;
-    const { options, resetQuizSessionId } = props;
-    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = options;
-    const { resultsResponse, cioClient, dispatch } = (0, react_1.useContext)(context_1.default);
-    const filterExpression = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.request) === null || _a === void 0 ? void 0 : _a.collection_filter_expression;
-    const zeroResults = !((_c = (_b = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length);
+    const { options } = props;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
+    const { state, resetQuiz } = (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';
-    const onResetClick = () => {
-        if (dispatch && resultsResponse) {
-            resetQuizSessionId();
-            dispatch({
-                type: actions_1.QuestionTypes.Reset,
-            });
-        }
-    };
-    if (resultsResponse && resultsResponse.request && resultsResponse.response) {
-        /* eslint-disable @typescript-eslint/naming-convention */
-        const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page }, response: { total_num_results }, } = resultsResponse;
-        /* eslint-enable @typescript-eslint/naming-convention */
-        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
-            quiz_id,
-            quiz_version_id,
-            quiz_session_id,
-            url: window.location.href,
-            section,
-            result_count: total_num_results,
-            result_page: page,
-            result_id,
-        });
+    if (state === null || state === void 0 ? void 0 : state.quiz.results) {
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
             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, { filters: filterExpression }),
-                react_1.default.createElement(RedoButton_1.default, { onClick: onResetClick })),
-            !zeroResults && (react_1.default.createElement(Results_1.default, { addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
+                react_1.default.createElement(ResultFilters_1.default, null),
+                react_1.default.createElement(RedoButton_1.default, { onClick: resetQuiz })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
     }
     return react_1.default.createElement("div", null, "Loading");

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

@@ -4,31 +4,12 @@ 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, callback, className, price } = props;
-    const { resultsResponse, cioClient } = (0, react_1.useContext)(context_1.default);
-    const clickHandler = (e) => {
-        var _a, _b;
-        e.preventDefault();
-        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
-            /* eslint-disable @typescript-eslint/naming-convention */
-            const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = resultsResponse;
-            /* eslint-enable @typescript-eslint/naming-convention */
-            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizConversion({
-                quiz_id,
-                quiz_version_id,
-                quiz_session_id,
-                item_id: (_a = item.data) === null || _a === void 0 ? void 0 : _a.id,
-                item_name: item.value,
-                section,
-                variation_id: (_b = item.data) === null || _b === void 0 ? void 0 : _b.variation_id,
-                revenue: (price && String(price)) || undefined,
-            });
-        }
-        if (callback && typeof callback === 'function') {
-            e.stopPropagation();
-            callback(item);
-        }
-    };
-    return (react_1.default.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: clickHandler }, "Add to Cart"));
+    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"));
 }
 exports.default = ResultCtaButton;

package/lib/cjs/components/ResultFilters/ResultFilters.js

@@ -1,30 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function ResultFilters(props) {
-    const { filters } = props;
-    const isValueExpression = (exp) => 'name' in exp && 'value' in exp;
-    const isAndFilter = (exp) => 'and' in exp;
-    const isOrFilter = (exp) => 'or' in exp;
-    const getFilterValuesFromExpression = (exp) => {
-        if (!exp) {
-            return [];
-        }
-        if (isAndFilter(exp)) {
-            return exp.and.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
-        }
-        if (isOrFilter(exp)) {
-            return exp.or.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
-        }
-        if (isValueExpression(exp)) {
-            return [exp.value];
-        }
-        return [];
-    };
-    const filterValues = [...new Set(getFilterValuesFromExpression(filters))];
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function ResultFilters() {
+    var _a;
+    const { state } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-results-filter-container' },
         react_1.default.createElement("p", null, "Because you answered"),
-        react_1.default.createElement("div", { className: 'cio-results-filter-options' }, filterValues === null || filterValues === void 0 ? void 0 : filterValues.map((filter) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+        react_1.default.createElement("div", { className: 'cio-results-filter-options' }, (_a = state === null || state === void 0 ? void 0 : state.quiz.resultsFilters) === null || _a === void 0 ? void 0 : _a.map((filter) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
 }
 exports.default = ResultFilters;

package/lib/cjs/components/Results/Results.js

@@ -5,12 +5,12 @@ const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ResultCard_1 = tslib_1.__importDefault(require("../ResultCard/ResultCard"));
 function Results(props) {
-    var _a, _b;
-    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = props;
-    const { resultsResponse } = (0, react_1.useContext)(context_1.default);
-    return (react_1.default.createElement("div", { className: 'cio-results' }, (_b = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.map((result, index) => {
+    var _a, _b, _c, _d;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey } = props;
+    const { state } = (0, react_1.useContext)(context_1.default);
+    return (react_1.default.createElement("div", { className: 'cio-results' }, (_d = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.results) === null || _d === void 0 ? void 0 : _d.map((result, index) => {
         var _a;
-        return (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultPosition: index + 1 }));
+        return (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, resultPosition: index + 1 }));
     })));
 }
 exports.default = Results;