@constructor-io/constructorio-ui-quizzes 1.2.3 → 1.3.1

package/lib/cjs/utils.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreferredColorScheme = exports.getCioClient = exports.getQuestionTypes = exports.getQuizResults = exports.getNextQuestion = exports.stringify = exports.stringifyWithDefaults = exports.defaultAddToCartCallbackCode = exports.getStoryParams = exports.renderImages = void 0;
+exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.defaultOnQuizResultsLoadedCode = exports.defaultOnQuizResultClickCode = exports.defaultOnAddToCartClickCode = exports.getStoryParams = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const actions_1 = require("./components/CioQuiz/actions");
 const renderImages = (images, cssClasses) => {
     const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
@@ -42,25 +41,34 @@ ${templateCode}
     };
 };
 exports.getStoryParams = getStoryParams;
-exports.defaultAddToCartCallbackCode = `"addToCartCallback": (item) => console.dir(item)`;
+exports.defaultOnAddToCartClickCode = `"onAddToCartClick": (item) => console.dir(item)`;
+exports.defaultOnQuizResultClickCode = `"onQuizResultClick": (result, position) => console.dir(result, position)`;
+exports.defaultOnQuizResultsLoadedCode = `"onQuizResultsLoaded": (results) => console.dir(results)`;
 const stringifyWithDefaults = (obj) => {
-    const { addToCartCallback, cioJsClient } = obj, rest = tslib_1.__rest(obj, ["addToCartCallback", "cioJsClient"]);
-    let res = JSON.stringify(rest, null, '  ');
+    const { resultsPageOptions, cioJsClient } = obj, rest = tslib_1.__rest(obj, ["resultsPageOptions", "cioJsClient"]);
+    const { onAddToCartClick, onQuizResultsLoaded, onQuizResultClick } = resultsPageOptions;
+    let res = JSON.stringify(Object.assign(Object.assign({}, rest), { resultsPageOptions }), null, '  ');
     if (cioJsClient) {
         res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
   "resultsPageOptions": {`);
     }
-    res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${exports.defaultAddToCartCallbackCode},`);
+    if (onQuizResultsLoaded) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${exports.defaultOnQuizResultsLoadedCode},`);
+    }
+    if (onQuizResultClick) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${exports.defaultOnQuizResultClickCode},`);
+    }
+    if (onAddToCartClick) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${exports.defaultOnAddToCartClickCode},`);
+    }
     return res;
 };
 exports.stringifyWithDefaults = stringifyWithDefaults;
 const stringify = (obj) => JSON.stringify(obj, null, '  ');
 exports.stringify = stringify;
-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;
 const getQuestionTypes = (questionType) => {
     const isOpenQuestion = questionType === actions_1.QuestionTypes.OpenText;
     const isCoverQuestion = questionType === actions_1.QuestionTypes.Cover;
@@ -76,16 +84,6 @@ const getQuestionTypes = (questionType) => {
     };
 };
 exports.getQuestionTypes = getQuestionTypes;
-const getCioClient = (apiKey) => {
-    if (apiKey) {
-        return new constructorio_client_javascript_1.default({
-            apiKey,
-            sendTrackingEvents: true,
-        });
-    }
-    return undefined;
-};
-exports.getCioClient = getCioClient;
 function getPreferredColorScheme() {
     var _a;
     let colorScheme = 'light';
@@ -96,3 +94,26 @@ function getPreferredColorScheme() {
     return colorScheme;
 }
 exports.getPreferredColorScheme = getPreferredColorScheme;
+function isFunction(fn) {
+    return fn && typeof fn === 'function';
+}
+exports.isFunction = isFunction;
+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) => (0, exports.getFilterValuesFromExpression)(innerExpression));
+    }
+    if (isOrFilter(exp)) {
+        return exp.or.flatMap((innerExpression) => (0, exports.getFilterValuesFromExpression)(innerExpression));
+    }
+    if (isValueExpression(exp)) {
+        return [exp.value];
+    }
+    return [];
+};
+exports.getFilterValuesFromExpression = getFilterValuesFromExpression;

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

@@ -1,3 +1,4 @@
+// Local Actions
 export var QuestionTypes;
 (function (QuestionTypes) {
     QuestionTypes["OpenText"] = "open";
@@ -7,3 +8,12 @@ export var QuestionTypes;
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
 })(QuestionTypes || (QuestionTypes = {}));
+// API actions
+export 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 || (QuizAPIActionTypes = {}));

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

@@ -1,120 +1,32 @@
-import React, { useReducer, useState, useEffect, useCallback } from 'react';
+import React from 'react';
 import QuizContext from './context';
-import reducer, { initialState } from './reducer';
-import { QuestionTypes } from './actions';
 import QuizQuestions from '../QuizQuestions';
 import ResultContainer from '../ResultContainer/ResultContainer';
 import { RequestStates } from '../../constants';
-import { getNextQuestion, getQuizResults } from '../../utils';
 import Spinner from '../Spinner/Spinner';
-import useCioClient from '../../hooks/useCioClient';
+import useQuiz from '../../hooks/useQuiz';
 export default 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?.addToCartCallback) {
-        // eslint-disable-next-line no-console
-        console.error('resultsPageOptions.addToCartCallback is a required field of type function');
-    }
-    const cioClient = useCioClient({ apiKey, cioJsClient });
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const [requestState, setRequestState] = useState(RequestStates.Stale);
-    const [questionResponse, setQuestionResponse] = useState();
-    const [resultsResponse, setResultsResponse] = useState();
-    const [firstQuestion, setFirstQuestion] = useState();
-    const [quizVersionId, setQuizVersionId] = useState(quizVersionIdProp || '');
-    const [quizSessionId, setQuizSessionId] = useState('');
-    const isFirstQuestion = firstQuestion?.next_question.id === questionResponse?.next_question.id;
-    const quizNextHandler = useCallback((action) => {
-        if (action) {
-            dispatch(action);
-        }
-    }, [dispatch]);
-    const quizBackHandler = useCallback(() => {
-        if (dispatch) {
-            dispatch({ type: QuestionTypes.Back });
-        }
-    }, [dispatch]);
+    const { cioClient, state, events: { nextQuestion, previousQuestion, resetQuiz, addToCart, resultClick }, } = useQuiz(props);
+    const { resultsPageOptions } = props;
     const contextValue = {
-        dispatch,
-        questionResponse,
-        state,
-        resultsResponse,
-        isFirstQuestion,
-        quizNextHandler,
-        quizBackHandler,
         cioClient,
+        state,
+        nextQuestion,
+        previousQuestion,
+        resetQuiz,
+        addToCart,
+        resultClick,
+        customClickItemCallback: !!resultsPageOptions?.onQuizResultClick,
     };
-    useEffect(() => {
-        (async () => {
-            if (cioClient) {
-                setRequestState(RequestStates.Loading);
-                if (state.isLastAnswer) {
-                    try {
-                        const quizResults = await getQuizResults(cioClient, quizId, {
-                            answers: state.answers,
-                            resultsPerPage: resultsPageOptions?.numResultsToDisplay,
-                            quizVersionId,
-                            quizSessionId,
-                        });
-                        setResultsResponse(quizResults);
-                        setRequestState(RequestStates.Success);
-                        setQuestionResponse(undefined);
-                    }
-                    catch (error) {
-                        setResultsResponse(undefined);
-                        setRequestState(RequestStates.Error);
-                    }
-                }
-                else {
-                    try {
-                        const questionResult = await getNextQuestion(cioClient, quizId, {
-                            answers: state.answers,
-                            quizVersionId,
-                            quizSessionId,
-                        });
-                        setQuestionResponse(questionResult);
-                        setRequestState(RequestStates.Success);
-                        setResultsResponse(undefined);
-                        if (!quizVersionId && questionResult?.quiz_version_id) {
-                            setQuizVersionId(questionResult.quiz_version_id);
-                        }
-                        if (!quizSessionId && questionResult?.quiz_session_id) {
-                            setQuizSessionId(questionResult.quiz_session_id);
-                        }
-                    }
-                    catch (error) {
-                        setRequestState(RequestStates.Error);
-                    }
-                }
-            }
-        })();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, state, quizId, state.isLastAnswer, resultsPageOptions?.numResultsToDisplay]);
-    useEffect(() => {
-        if (!firstQuestion) {
-            setFirstQuestion(questionResponse);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [questionResponse]);
-    const resetQuizSessionId = () => {
-        setQuizSessionId('');
-    };
-    if (requestState === RequestStates.Loading) {
+    if (state.quiz.requestState === RequestStates.Loading) {
         return (React.createElement("div", { className: 'cio-quiz' },
             React.createElement(Spinner, null)));
     }
-    if (requestState === RequestStates.Success) {
+    if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz' },
             React.createElement(QuizContext.Provider, { value: contextValue },
-                resultsResponse && (React.createElement(ResultContainer, { options: resultsPageOptions, resetQuizSessionId: resetQuizSessionId })),
-                questionResponse && React.createElement(QuizQuestions, { questionResponse: questionResponse }))));
+                state.quiz.results && React.createElement(ResultContainer, { options: resultsPageOptions }),
+                state.quiz.currentQuestion && React.createElement(QuizQuestions, null))));
     }
     return null;
 }

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

@@ -0,0 +1,49 @@
+import { RequestStates } from '../../constants';
+import { getFilterValuesFromExpression } from '../../utils';
+import { QuizAPIActionTypes } from './actions';
+export const initialState = {
+    quizRequestState: RequestStates.Stale,
+};
+export default function apiReducer(state, action) {
+    switch (action.type) {
+        case QuizAPIActionTypes.SET_IS_LOADING:
+            return {
+                ...state,
+                quizRequestState: RequestStates.Loading,
+            };
+        case QuizAPIActionTypes.SET_IS_ERROR:
+            return {
+                ...state,
+                quizRequestState: RequestStates.Error,
+                quizResults: undefined,
+            };
+        case QuizAPIActionTypes.SET_CURRENT_QUESTION:
+            return {
+                ...state,
+                quizRequestState: RequestStates.Success,
+                quizVersionId: action.payload?.quizVersionId,
+                quizSessionId: action.payload?.quizSessionId,
+                quizCurrentQuestion: action.payload?.quizCurrentQuestion,
+                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))];
+            return {
+                ...state,
+                quizRequestState: RequestStates.Success,
+                quizResults: action.payload?.quizResults,
+                quizResultsFilters,
+                quizCurrentQuestion: undefined,
+            };
+        }
+        case QuizAPIActionTypes.RESET_QUIZ:
+            return initialState;
+        default:
+            return state;
+    }
+}

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

@@ -10,7 +10,7 @@ function answerInputReducer(state, action) {
         [String(action.payload.questionId)]: action.payload.input,
     };
 }
-export default function reducer(state, action) {
+export default function quizLocalReducer(state, action) {
     switch (action.type) {
         case QuestionTypes.OpenText:
             return {

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -3,23 +3,17 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuizContext from '../CioQuiz/context';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
-import { QuestionTypes } from '../CioQuiz/actions';
 import ControlBar from '../ControlBar/ControlBar';
 export default function CoverTypeQuestion() {
-    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion } = useContext(QuizContext);
+    const { state, previousQuestion, nextQuestion } = useContext(QuizContext);
     let question;
-    if (questionResponse) {
-        question = questionResponse.next_question;
+    if (state?.quiz.currentQuestion) {
+        question = state?.quiz.currentQuestion.next_question;
     }
     const hasImage = question?.images?.primary_url;
     const onNextClick = () => {
-        if (quizNextHandler) {
-            quizNextHandler({
-                type: QuestionTypes.Cover,
-                payload: {
-                    isLastQuestion: questionResponse?.is_last_question,
-                },
-            });
+        if (nextQuestion) {
+            nextQuestion();
         }
     };
     if (question) {
@@ -30,7 +24,7 @@ export default function CoverTypeQuestion() {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement(ControlBar, { nextButtonHandler: onNextClick, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question?.cta_text })),
+                React.createElement(ControlBar, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })),
             hasImage ? renderImages(question.images, 'cio-question-image-container') : ''));
     }
     return null;

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -3,15 +3,14 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import QuizContext from '../CioQuiz/context';
-import { QuestionTypes } from '../CioQuiz/actions';
 import ControlBar from '../ControlBar/ControlBar';
 function OpenTextQuestion(props) {
     const { initialValue = '', onChangeHandler: userDefinedHandler = null } = props;
-    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion, state } = useContext(QuizContext);
+    const { state, previousQuestion, nextQuestion } = useContext(QuizContext);
     const [openTextInput, setOpenTextInput] = useState(initialValue);
     let question;
-    if (questionResponse) {
-        question = questionResponse.next_question;
+    if (state?.quiz.currentQuestion) {
+        question = state?.quiz.currentQuestion.next_question;
     }
     const onChangeHandler = (e) => {
         setOpenTextInput(e.target.value);
@@ -20,15 +19,8 @@ function OpenTextQuestion(props) {
         }
     };
     const onNextClick = () => {
-        if (quizNextHandler && openTextInput && questionResponse) {
-            quizNextHandler({
-                type: QuestionTypes.OpenText,
-                payload: {
-                    questionId: questionResponse.next_question.id,
-                    input: openTextInput,
-                    isLastQuestion: questionResponse.is_last_question,
-                },
-            });
+        if (nextQuestion && openTextInput) {
+            nextQuestion(openTextInput);
         }
     };
     const onKeyDownHandler = (e) => {
@@ -38,11 +30,13 @@ function OpenTextQuestion(props) {
         }
     };
     useEffect(() => {
-        if (questionResponse) {
-            const openTextAnswer = state?.answerInputs?.[questionResponse?.next_question.id] || initialValue;
+        if (state?.quiz.currentQuestion) {
+            const questionId = state?.quiz.currentQuestion?.next_question.id;
+            const currentAnswer = state.answers.inputs?.[questionId];
+            const openTextAnswer = currentAnswer || initialValue;
             setOpenTextInput(openTextAnswer);
         }
-    }, [questionResponse, state, initialValue]);
+    }, [state, initialValue]);
     if (question) {
         const hasImage = question?.images?.primary_url;
         return (React.createElement("div", { className: `
@@ -54,7 +48,7 @@ function OpenTextQuestion(props) {
                 React.createElement(QuestionTitle, { title: question.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
                 React.createElement("input", { className: 'cio-question-input-text', placeholder: question.input_placeholder || 'Answer here...', value: openTextInput, onChange: onChangeHandler, onKeyDown: onKeyDownHandler }),
-                React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: !openTextInput, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question?.cta_text }))));
+                React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: !openTextInput, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text }))));
     }
     return null;
 }

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

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import OpenTextQuestion from '../OpenTextTypeQuestion/OpenTextTypeQuestion';
 import CoverTypeQuestion from '../CoverTypeQuestion/CoverTypeQuestion';
 import SelectTypeQuestion from '../SelectTypeQuestion/SelectTypeQuestion';
 import { getQuestionTypes } from '../../utils';
-export default function QuizQuestions(props) {
-    const { questionResponse: { next_question: nextQuestion }, } = props;
+import QuizContext from '../CioQuiz/context';
+export default function QuizQuestions() {
+    const { state } = useContext(QuizContext);
+    const nextQuestion = state?.quiz.currentQuestion?.next_question;
     const questionTypes = getQuestionTypes(nextQuestion?.type);
     return (React.createElement(React.Fragment, null,
         questionTypes.isOpenQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),

package/lib/mjs/components/ResultCard/ResultCard.js

@@ -2,39 +2,20 @@ import React, { useContext } from 'react';
 import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCard(props) {
-    const { result, addToCartCallback, clickItemCallback: customClickItemCallback, salePriceKey, regularPriceKey, resultPosition, } = props;
-    const { resultsResponse, cioClient } = useContext(QuizContext);
+    const { result, salePriceKey, regularPriceKey, resultPosition } = props;
+    const { resultClick, customClickItemCallback } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
-    const clickItemCallback = () => {
-        /* 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?.tracker.trackQuizResultClick({
-                quiz_id,
-                quiz_version_id,
-                quiz_session_id,
-                item_id: result.data?.id,
-                item_name: 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?.key === ' ' || event?.key === 'Enter') {
-            clickItemCallback();
+            if (resultClick) {
+                resultClick(result, resultPosition);
+            }
         }
     };
     const resultCardContent = () => (React.createElement(React.Fragment, null,
@@ -49,7 +30,7 @@ export default function ResultCard(props) {
                 regularPrice && (React.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                     "$",
                     regularPrice)))),
-        React.createElement(ResultCtaButton, { item: result, callback: addToCartCallback, price: salePrice || regularPrice })));
+        React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));
     const resultCardContentWithLink = () => (React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url }, resultCardContent()));
-    return (React.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
+    return (React.createElement("div", { onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
 }

package/lib/mjs/components/ResultContainer/ResultContainer.js

@@ -1,45 +1,22 @@
 import React, { useContext } from 'react';
 import RedoButton from '../RedoButton/RedoButton';
-import { QuestionTypes } from '../CioQuiz/actions';
 import QuizContext from '../CioQuiz/context';
 import ResultFilters from '../ResultFilters/ResultFilters';
 import ZeroResults from '../ZeroResults/ZeroResults';
 import Results from '../Results/Results';
 export default function ResultContainer(props) {
-    const { options, resetQuizSessionId } = props;
-    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = options;
-    const { resultsResponse, cioClient, dispatch } = useContext(QuizContext);
-    const filterExpression = resultsResponse?.request?.collection_filter_expression;
-    const zeroResults = !resultsResponse?.response?.results?.length;
+    const { options } = props;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
+    const { state, resetQuiz } = useContext(QuizContext);
+    const zeroResults = !state?.quiz.results?.response?.results?.length;
     const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
-    const onResetClick = () => {
-        if (dispatch && resultsResponse) {
-            resetQuizSessionId();
-            dispatch({
-                type: 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?.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?.quiz.results) {
         return (React.createElement("div", { className: 'cio-results-container' },
             React.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
             React.createElement("div", { className: 'cio-results-filter-and-redo-container' },
-                React.createElement(ResultFilters, { filters: filterExpression }),
-                React.createElement(RedoButton, { onClick: onResetClick })),
-            !zeroResults && (React.createElement(Results, { addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
+                React.createElement(ResultFilters, null),
+                React.createElement(RedoButton, { onClick: resetQuiz })),
+            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
             zeroResults && React.createElement(ZeroResults, null)));
     }
     return React.createElement("div", null, "Loading");

package/lib/mjs/components/ResultCtaButton/ResultCtaButton.js

@@ -1,29 +1,11 @@
 import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCtaButton(props) {
-    const { item, callback, className, price } = props;
-    const { resultsResponse, cioClient } = useContext(QuizContext);
-    const clickHandler = (e) => {
-        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?.tracker.trackQuizConversion({
-                quiz_id,
-                quiz_version_id,
-                quiz_session_id,
-                item_id: item.data?.id,
-                item_name: item.value,
-                section,
-                variation_id: item.data?.variation_id,
-                revenue: (price && String(price)) || undefined,
-            });
-        }
-        if (callback && typeof callback === 'function') {
-            e.stopPropagation();
-            callback(item);
-        }
-    };
-    return (React.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: clickHandler }, "Add to Cart"));
+    const { item, className, price } = props;
+    const { addToCart } = useContext(QuizContext);
+    return (React.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: (e) => {
+            if (addToCart) {
+                addToCart(e, item, price);
+            }
+        } }, "Add to Cart"));
 }

package/lib/mjs/components/ResultFilters/ResultFilters.js

@@ -1,27 +1,9 @@
-import React from '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))];
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+function ResultFilters() {
+    const { state } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-results-filter-container' },
         React.createElement("p", null, "Because you answered"),
-        React.createElement("div", { className: 'cio-results-filter-options' }, filterValues?.map((filter) => (React.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+        React.createElement("div", { className: 'cio-results-filter-options' }, state?.quiz.resultsFilters?.map((filter) => (React.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
 }
 export default ResultFilters;

package/lib/mjs/components/Results/Results.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
 import ResultCard from '../ResultCard/ResultCard';
 function Results(props) {
-    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = props;
-    const { resultsResponse } = useContext(QuizContext);
-    return (React.createElement("div", { className: 'cio-results' }, resultsResponse?.response?.results?.map((result, index) => (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultPosition: index + 1 })))));
+    const { resultCardSalePriceKey, resultCardRegularPriceKey } = props;
+    const { state } = useContext(QuizContext);
+    return (React.createElement("div", { className: 'cio-results' }, state?.quiz?.results?.response?.results?.map((result, index) => (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, resultPosition: index + 1 })))));
 }
 export default Results;