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

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;

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -6,27 +6,29 @@ import { renderImages } from '../../utils';
 import { QuestionTypes } from '../CioQuiz/actions';
 import ControlBar from '../ControlBar/ControlBar';
 function SelectTypeQuestion() {
-    const { questionResponse, state, quizNextHandler, quizBackHandler, isFirstQuestion } = useContext(QuizContext);
+    const { state, nextQuestion, previousQuestion } = useContext(QuizContext);
     let question;
     let type;
     let hasImages = false;
-    if (questionResponse) {
-        question = questionResponse.next_question;
+    if (state?.quiz.currentQuestion) {
+        question = state.quiz.currentQuestion.next_question;
         type = question.type;
-        hasImages = questionResponse.next_question.options.some((option) => option.images);
+        hasImages = question.options.some((option) => option.images);
     }
     const [selected, setSelected] = useState({});
     const isDisabled = Object.keys(selected).length === 0;
     useEffect(() => {
-        if (questionResponse?.next_question?.type) {
-            const answers = state?.answerInputs?.[questionResponse.next_question.id] || [];
+        if (state?.quiz.currentQuestion?.next_question?.type) {
+            const nextQuestionId = state.quiz.currentQuestion.next_question.id;
+            const answers = state.answers?.inputs?.[nextQuestionId] || [];
             const prevSelected = {};
             answers?.forEach((answer) => {
                 prevSelected[Number(answer)] = true;
             });
             setSelected(prevSelected);
         }
-    }, [questionResponse, state?.answerInputs]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state?.quiz.currentQuestion?.next_question.id]);
     const toggleIdSelected = (id) => {
         if (type === QuestionTypes.SingleSelect) {
             setSelected({ [id]: true });
@@ -48,18 +50,9 @@ function SelectTypeQuestion() {
         }
     };
     const onNextClick = () => {
-        if (quizNextHandler && !isDisabled && questionResponse) {
-            const questionType = type === QuestionTypes.SingleSelect
-                ? QuestionTypes.SingleSelect
-                : QuestionTypes.MultipleSelect;
-            quizNextHandler({
-                type: questionType,
-                payload: {
-                    questionId: questionResponse?.next_question.id,
-                    input: Object.keys(selected).filter((key) => selected[Number(key)]),
-                    isLastQuestion: questionResponse.is_last_question,
-                },
-            });
+        if (nextQuestion && !isDisabled && state?.quiz.currentQuestion) {
+            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
+            nextQuestion(selectedAnswers);
         }
     };
     if (question) {
@@ -78,7 +71,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
                 React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question?.cta_text })));
+            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })));
     }
     return null;
 }

package/lib/mjs/components/ZeroResults/ZeroResults.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import CTAButton from '../CTAButton/CTAButton';
 function ZeroResults(props) {
-    const { onResetClick } = props;
+    const { resetQuizClickHandler } = props;
     return (React.createElement("div", { className: 'cio-zero-results' },
         React.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
         React.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.createElement(CTAButton, { ctaText: 'Try Again', onClick: onResetClick })));
+        React.createElement(CTAButton, { ctaText: 'Try Again', onClick: resetQuizClickHandler })));
 }
 export default ZeroResults;

package/lib/mjs/constants.js

@@ -8,8 +8,9 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
 - This component handles state management, data fetching, and rendering logic.
 - To use this component, \`quizId\`, \`resultsPageOptions\`, and one of \`apiKey\` or \`cioJsClient\` are required.
 - \`resultsPageOptions\` lets you configure the results page
-  - \`addToCartCallback\` is a callback function that will be called when the "Add to cart" button is clicked
-  - \`clickItemCallback\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
+  - \`onAddToCartClick\` is a callback function that will be called when the "Add to cart" button is clicked
+  - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
+  - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
   - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
   - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price
 - Use different props to configure the behavior of this component.

package/lib/mjs/hooks/useCioClient.js

@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
-import { getCioClient } from '../utils';
+import { getCioClient } from '../services';
 const useCioClient = ({ apiKey, cioJsClient }) => {
     if (!apiKey && !cioJsClient) {
-        console.error('Either apiKey or cioJsClient is required');
+        throw new Error('Either apiKey or cioJsClient is required');
     }
-    return useMemo(() => cioJsClient || getCioClient(apiKey), [apiKey, cioJsClient]);
+    const memoizedCioClient = useMemo(() => cioJsClient || getCioClient(apiKey), [apiKey, cioJsClient]);
+    return memoizedCioClient;
 };
 export default useCioClient;