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

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

@@ -9,29 +9,31 @@ const utils_1 = require("../../utils");
 const actions_1 = require("../CioQuiz/actions");
 const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function SelectTypeQuestion() {
-    var _a;
-    const { questionResponse, state, quizNextHandler, quizBackHandler, isFirstQuestion } = (0, react_1.useContext)(context_1.default);
+    var _a, _b;
+    const { state, nextQuestion, previousQuestion } = (0, react_1.useContext)(context_1.default);
     let question;
     let type;
     let hasImages = false;
-    if (questionResponse) {
-        question = questionResponse.next_question;
+    if (state === null || state === void 0 ? void 0 : 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] = (0, react_1.useState)({});
     const isDisabled = Object.keys(selected).length === 0;
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if ((_a = questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question) === null || _a === void 0 ? void 0 : _a.type) {
-            const answers = ((_b = state === null || state === void 0 ? void 0 : state.answerInputs) === null || _b === void 0 ? void 0 : _b[questionResponse.next_question.id]) || [];
+        var _a, _b, _c, _d;
+        if ((_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.type) {
+            const nextQuestionId = state.quiz.currentQuestion.next_question.id;
+            const answers = ((_d = (_c = state.answers) === null || _c === void 0 ? void 0 : _c.inputs) === null || _d === void 0 ? void 0 : _d[nextQuestionId]) || [];
             const prevSelected = {};
             answers === null || answers === void 0 ? void 0 : answers.forEach((answer) => {
                 prevSelected[Number(answer)] = true;
             });
             setSelected(prevSelected);
         }
-    }, [questionResponse, state === null || state === void 0 ? void 0 : state.answerInputs]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [(_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id]);
     const toggleIdSelected = (id) => {
         if (type === actions_1.QuestionTypes.SingleSelect) {
             setSelected({ [id]: true });
@@ -53,18 +55,9 @@ function SelectTypeQuestion() {
         }
     };
     const onNextClick = () => {
-        if (quizNextHandler && !isDisabled && questionResponse) {
-            const questionType = type === actions_1.QuestionTypes.SingleSelect
-                ? actions_1.QuestionTypes.SingleSelect
-                : actions_1.QuestionTypes.MultipleSelect;
-            quizNextHandler({
-                type: questionType,
-                payload: {
-                    questionId: questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question.id,
-                    input: Object.keys(selected).filter((key) => selected[Number(key)]),
-                    isLastQuestion: questionResponse.is_last_question,
-                },
-            });
+        if (nextQuestion && !isDisabled && (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion)) {
+            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
+            nextQuestion(selectedAnswers);
         }
     };
     if (question) {
@@ -74,7 +67,7 @@ function SelectTypeQuestion() {
                 (question === null || question === void 0 ? void 0 : question.description) ? react_1.default.createElement(QuestionDescription_1.default, { description: question.description }) : ''),
             react_1.default.createElement("div", { className: `${!hasImages
                     ? 'cio-question-options-container-text-only'
-                    : 'cio-question-options-container'}` }, (_a = question === null || question === void 0 ? void 0 : question.options) === null || _a === void 0 ? void 0 : _a.map((option) => (react_1.default.createElement("div", { className: `${!hasImages
+                    : 'cio-question-options-container'}` }, (_b = question === null || question === void 0 ? void 0 : question.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement("div", { className: `${!hasImages
                     ? 'cio-question-option-container-text-only'
                     : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, onClick: () => {
                     toggleIdSelected(option.id);
@@ -83,7 +76,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
                 react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })));
+            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })));
     }
     return null;
 }

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

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

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -11,8 +11,9 @@ exports.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.
@@ -27,6 +28,7 @@ exports.basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request quest
 exports.cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from Constructor's servers
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+exports.smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

package/lib/cjs/hooks/useCioClient.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const utils_1 = require("../utils");
+const services_1 = require("../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 (0, react_1.useMemo)(() => cioJsClient || (0, utils_1.getCioClient)(apiKey), [apiKey, cioJsClient]);
+    const memoizedCioClient = (0, react_1.useMemo)(() => cioJsClient || (0, services_1.getCioClient)(apiKey), [apiKey, cioJsClient]);
+    return memoizedCioClient;
 };
 exports.default = useCioClient;

package/lib/cjs/hooks/useConsoleErrors.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useConsoleErrors = (quizId, resultsPageOptions) => {
+    (0, react_1.useEffect)(() => {
+        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.onAddToCartClick)) {
+            // eslint-disable-next-line no-console
+            console.error('resultsPageOptions.onAddToCartClick is a required field of type function');
+        }
+    }, [quizId, resultsPageOptions, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onAddToCartClick]);
+};
+exports.default = useConsoleErrors;

package/lib/cjs/hooks/useQuiz.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
+const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
+const useQuizApiState_1 = tslib_1.__importDefault(require("./useQuizApiState"));
+const useQuizEvents_1 = tslib_1.__importDefault(require("./useQuizEvents"));
+const useQuizLocalState_1 = tslib_1.__importDefault(require("./useQuizLocalState"));
+const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions }) => {
+    // Log console errors for required parameters quizId and resultsPageOptions
+    (0, useConsoleErrors_1.default)(quizId, resultsPageOptions);
+    // Quiz Local state
+    const { quizLocalState, resetQuizLocalState, dispatchLocalState } = (0, useQuizLocalState_1.default)();
+    // Quiz Cio Client
+    const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
+    // Quiz API state
+    const { isFirstQuestion, quizApiState, resetQuizApiState } = (0, useQuizApiState_1.default)(quizId, quizLocalState, resultsPageOptions, quizVersionId, cioClient);
+    // Quiz callback events
+    const quizEvents = (0, useQuizEvents_1.default)({
+        cioClient,
+        quizApiState,
+        resultsPageOptions,
+        dispatchLocalState,
+        resetQuizApiState,
+        resetQuizLocalState,
+    });
+    return {
+        cioClient,
+        state: {
+            answers: {
+                inputs: quizLocalState.answerInputs,
+                isLastAnswer: quizLocalState.isLastAnswer,
+            },
+            quiz: {
+                requestState: quizApiState.quizRequestState,
+                versionId: quizApiState.quizVersionId,
+                sessionId: quizApiState.quizSessionId,
+                firstQuestion: quizApiState.quizFirstQuestion,
+                currentQuestion: quizApiState.quizCurrentQuestion,
+                results: quizApiState.quizResults,
+                resultsFilters: quizApiState.quizResultsFilters,
+                isFirstQuestion,
+            },
+        },
+        events: Object.assign({}, quizEvents),
+    };
+};
+exports.default = useQuiz;

package/lib/cjs/hooks/useQuizApiState.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const actions_1 = require("../components/CioQuiz/actions");
+const quizApiReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizApiReducer"));
+const services_1 = require("../services");
+const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
+    var _a, _b;
+    const [quizApiState, dispatch] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
+    const firstQuestionId = (_a = quizApiState.quizFirstQuestion) === null || _a === void 0 ? void 0 : _a.next_question.id;
+    const currentQuestionId = (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question.id;
+    const isFirstQuestion = firstQuestionId === currentQuestionId;
+    (0, react_1.useEffect)(() => {
+        (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            dispatch({
+                type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
+            });
+            if (quizLocalState.isLastAnswer) {
+                try {
+                    const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
+                        answers: quizLocalState.answers,
+                        resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
+                        quizVersionId: quizApiState.quizVersionId,
+                        quizSessionId: quizApiState.quizSessionId,
+                    });
+                    // Set quiz results state
+                    dispatch({
+                        type: actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS,
+                        payload: {
+                            quizResults,
+                        },
+                    });
+                }
+                catch (error) {
+                    dispatch({
+                        type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
+                    });
+                }
+            }
+            else {
+                try {
+                    let quizVersionId = quizApiState.quizVersionId || quizVersionIdProp;
+                    let { quizSessionId } = quizApiState;
+                    const questionResult = yield (0, services_1.nextQuestion)(cioClient, quizId, {
+                        answers: quizLocalState.answers,
+                        quizVersionId,
+                        quizSessionId,
+                    });
+                    if (!quizVersionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_version_id)) {
+                        quizVersionId = questionResult.quiz_version_id;
+                    }
+                    if (!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) {
+                        quizSessionId = questionResult.quiz_session_id;
+                    }
+                    // Set current question state
+                    dispatch({
+                        type: actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION,
+                        payload: {
+                            quizSessionId,
+                            quizVersionId,
+                            quizCurrentQuestion: questionResult,
+                        },
+                    });
+                }
+                catch (error) {
+                    dispatch({
+                        type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
+                    });
+                }
+            }
+        }))();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        cioClient,
+        quizId,
+        quizLocalState,
+        quizLocalState.isLastAnswer,
+        resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
+    ]);
+    const resetQuizApiState = () => {
+        dispatch({ type: actions_1.QuizAPIActionTypes.RESET_QUIZ });
+    };
+    return {
+        cioClient,
+        quizApiState,
+        isFirstQuestion,
+        resetQuizApiState,
+    };
+};
+exports.default = useFetchQuiz;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const useQuizResultsLoaded_1 = tslib_1.__importDefault(require("./useQuizResultsLoaded"));
+const useQuizResultClick_1 = tslib_1.__importDefault(require("./useQuizResultClick"));
+const useQuizAddToCart_1 = tslib_1.__importDefault(require("./useQuizAddToCart"));
+const useQuizNextClick_1 = tslib_1.__importDefault(require("./useQuizNextClick"));
+const useQuizBackClick_1 = tslib_1.__importDefault(require("./useQuizBackClick"));
+const useQuizEvents = (options) => {
+    const { cioClient, quizApiState, resultsPageOptions, dispatchLocalState, resetQuizApiState, resetQuizLocalState, } = options;
+    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
+    // Quiz Next button click
+    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, dispatchLocalState);
+    // Quiz Back button click callback
+    const previousQuestion = (0, useQuizBackClick_1.default)(dispatchLocalState);
+    // Quiz result add to cart callback
+    const addToCart = (0, useQuizAddToCart_1.default)(cioClient, quizApiState, onAddToCartClick);
+    // Quiz result click callback
+    const resultClick = (0, useQuizResultClick_1.default)(cioClient, quizApiState, onQuizResultClick);
+    // Quiz results loaded event
+    (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
+    const resetQuiz = () => {
+        if (quizApiState.quizResults) {
+            resetQuizApiState();
+            resetQuizLocalState();
+        }
+    };
+    return {
+        addToCart,
+        resultClick,
+        nextQuestion,
+        previousQuestion,
+        resetQuiz,
+    };
+};
+exports.default = useQuizEvents;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const services_1 = require("../../services");
+const utils_1 = require("../../utils");
+const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
+    const addToCartClickHandler = (0, react_1.useCallback)((e, result, price) => {
+        e.preventDefault();
+        if (quizApiState.quizResults) {
+            // Tracking call
+            (0, services_1.trackQuizConversion)(cioClient, quizApiState.quizResults, result, price);
+            // User custom callback function
+            if ((0, utils_1.isFunction)(onAddToCartClick)) {
+                onAddToCartClick(result);
+            }
+        }
+    }, [quizApiState, cioClient, onAddToCartClick]);
+    return addToCartClickHandler;
+};
+exports.default = useQuizAddToCart;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const useQuizBackClick = (dispatchLocalState) => {
+    const quizBackHandler = (0, react_1.useCallback)(() => {
+        if (dispatchLocalState) {
+            dispatchLocalState({ type: actions_1.QuestionTypes.Back });
+        }
+    }, [dispatchLocalState]);
+    return quizBackHandler;
+};
+exports.default = useQuizBackClick;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const useQuizNextClick = (quizApiState, dispatchLocalState) => {
+    const quizNextHandler = (0, react_1.useCallback)((payload) => {
+        var _a;
+        const questionType = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question.type;
+        const currentQuestion = quizApiState.quizCurrentQuestion;
+        switch (questionType) {
+            case actions_1.QuestionTypes.Cover:
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Cover,
+                    payload: {
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case actions_1.QuestionTypes.OpenText:
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.OpenText,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case actions_1.QuestionTypes.SingleSelect:
+            case actions_1.QuestionTypes.MultipleSelect:
+                dispatchLocalState({
+                    type: currentQuestion.next_question.type === actions_1.QuestionTypes.SingleSelect
+                        ? actions_1.QuestionTypes.SingleSelect
+                        : actions_1.QuestionTypes.MultipleSelect,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            default:
+                break;
+        }
+    }, [quizApiState, dispatchLocalState]);
+    return quizNextHandler;
+};
+exports.default = useQuizNextClick;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const services_1 = require("../../services");
+const utils_1 = require("../../utils");
+const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
+    const resultClickHandler = (0, react_1.useCallback)((result, position) => {
+        if (quizApiState.quizResults) {
+            // Tracking call
+            (0, services_1.trackQuizResultClick)(cioClient, quizApiState.quizResults, result, position);
+            // User custom callback function
+            if ((0, utils_1.isFunction)(onQuizResultClick)) {
+                onQuizResultClick(result, position);
+            }
+        }
+    }, [quizApiState, cioClient, onQuizResultClick]);
+    return resultClickHandler;
+};
+exports.default = useQuizResultClick;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const services_1 = require("../../services");
+const utils_1 = require("../../utils");
+const useQuizResultsLoaded = (cioClient, quizApiState, onQuizResultsLoaded) => {
+    // Quiz results loaded
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (quizApiState.quizResults) {
+            // Tracking call
+            (0, services_1.trackQuizResultsLoaded)(cioClient, quizApiState.quizResults);
+            // User custom callback function
+            if (onQuizResultsLoaded &&
+                (0, utils_1.isFunction)(onQuizResultsLoaded) &&
+                ((_a = quizApiState.quizResults.response) === null || _a === void 0 ? void 0 : _a.results)) {
+                onQuizResultsLoaded(quizApiState.quizResults.response.results);
+            }
+        }
+    }, [quizApiState, cioClient, onQuizResultsLoaded]);
+};
+exports.default = useQuizResultsLoaded;

package/lib/cjs/hooks/useQuizLocalState.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const actions_1 = require("../components/CioQuiz/actions");
+const quizLocalReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizLocalReducer"));
+const useQuizLocalState = () => {
+    const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
+    const resetQuizLocalState = () => {
+        dispatch({
+            type: actions_1.QuestionTypes.Reset,
+        });
+    };
+    return {
+        quizLocalState,
+        resetQuizLocalState,
+        dispatchLocalState: dispatch,
+    };
+};
+exports.default = useQuizLocalState;

package/lib/cjs/services/index.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizResultsLoaded = exports.getQuizResults = exports.nextQuestion = exports.getCioClient = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/naming-convention */
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const getCioClient = (apiKey) => {
+    if (apiKey) {
+        return new constructorio_client_javascript_1.default({
+            apiKey,
+            sendTrackingEvents: true,
+        });
+    }
+    return undefined;
+};
+exports.getCioClient = getCioClient;
+const nextQuestion = (cioClient, quizId, parameters) => cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizNextQuestion(quizId, parameters);
+exports.nextQuestion = nextQuestion;
+const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizResults(quizId, parameters); });
+exports.getQuizResults = getQuizResults;
+// Tracking requests
+const trackQuizResultsLoaded = (cioClient, quizResults) => {
+    const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
+        quiz_id,
+        quiz_version_id,
+        quiz_session_id,
+        url: window.location.href,
+        section: request === null || request === void 0 ? void 0 : request.section,
+        result_count: response === null || response === void 0 ? void 0 : response.total_num_results,
+        result_page: request === null || request === void 0 ? void 0 : request.page,
+        result_id,
+    });
+};
+exports.trackQuizResultsLoaded = trackQuizResultsLoaded;
+const trackQuizResultClick = (cioClient, quizResults, result, position) => {
+    var _a;
+    if (quizResults.request && quizResults.response) {
+        const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = quizResults;
+        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: position,
+            num_results_per_page,
+        });
+    }
+};
+exports.trackQuizResultClick = trackQuizResultClick;
+const trackQuizConversion = (cioClient, quizResults, result, price) => {
+    var _a, _b;
+    if (quizResults.request) {
+        const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
+        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizConversion({
+            quiz_id,
+            quiz_version_id,
+            quiz_session_id,
+            item_id: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
+            item_name: result.value,
+            section,
+            variation_id: (_b = result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            revenue: (price && String(price)) || undefined,
+        });
+    }
+};
+exports.trackQuizConversion = trackQuizConversion;