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

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.
@@ -24,6 +25,7 @@ export const basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request
 export const 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)`;
+export const 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`;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

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;

package/lib/mjs/hooks/useConsoleErrors.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+const useConsoleErrors = (quizId, resultsPageOptions) => {
+    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?.onAddToCartClick) {
+            // eslint-disable-next-line no-console
+            console.error('resultsPageOptions.onAddToCartClick is a required field of type function');
+        }
+    }, [quizId, resultsPageOptions, resultsPageOptions?.onAddToCartClick]);
+};
+export default useConsoleErrors;

package/lib/mjs/hooks/useQuiz.js

@@ -0,0 +1,47 @@
+import useCioClient from './useCioClient';
+import useConsoleErrors from './useConsoleErrors';
+import useQuizApiState from './useQuizApiState';
+import useQuizEvents from './useQuizEvents';
+import useQuizLocalState from './useQuizLocalState';
+const useQuiz = ({ quizId, apiKey, cioJsClient, quizVersionId, resultsPageOptions }) => {
+    // Log console errors for required parameters quizId and resultsPageOptions
+    useConsoleErrors(quizId, resultsPageOptions);
+    // Quiz Local state
+    const { quizLocalState, resetQuizLocalState, dispatchLocalState } = useQuizLocalState();
+    // Quiz Cio Client
+    const cioClient = useCioClient({ apiKey, cioJsClient });
+    // Quiz API state
+    const { isFirstQuestion, quizApiState, resetQuizApiState } = useQuizApiState(quizId, quizLocalState, resultsPageOptions, quizVersionId, cioClient);
+    // Quiz callback events
+    const quizEvents = useQuizEvents({
+        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: {
+            ...quizEvents,
+        },
+    };
+};
+export default useQuiz;

package/lib/mjs/hooks/useQuizApiState.js

@@ -0,0 +1,87 @@
+import { useEffect, useReducer } from 'react';
+import { QuizAPIActionTypes } from '../components/CioQuiz/actions';
+import apiReducer, { initialState } from '../components/CioQuiz/quizApiReducer';
+import { nextQuestion, getQuizResults } from '../services';
+const useFetchQuiz = (quizId, quizLocalState, resultsPageOptions, quizVersionIdProp, cioClient) => {
+    const [quizApiState, dispatch] = useReducer(apiReducer, initialState);
+    const firstQuestionId = quizApiState.quizFirstQuestion?.next_question.id;
+    const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question.id;
+    const isFirstQuestion = firstQuestionId === currentQuestionId;
+    useEffect(() => {
+        (async () => {
+            dispatch({
+                type: QuizAPIActionTypes.SET_IS_LOADING,
+            });
+            if (quizLocalState.isLastAnswer) {
+                try {
+                    const quizResults = await getQuizResults(cioClient, quizId, {
+                        answers: quizLocalState.answers,
+                        resultsPerPage: resultsPageOptions?.numResultsToDisplay,
+                        quizVersionId: quizApiState.quizVersionId,
+                        quizSessionId: quizApiState.quizSessionId,
+                    });
+                    // Set quiz results state
+                    dispatch({
+                        type: QuizAPIActionTypes.SET_QUIZ_RESULTS,
+                        payload: {
+                            quizResults,
+                        },
+                    });
+                }
+                catch (error) {
+                    dispatch({
+                        type: QuizAPIActionTypes.SET_IS_ERROR,
+                    });
+                }
+            }
+            else {
+                try {
+                    let quizVersionId = quizApiState.quizVersionId || quizVersionIdProp;
+                    let { quizSessionId } = quizApiState;
+                    const questionResult = await nextQuestion(cioClient, quizId, {
+                        answers: quizLocalState.answers,
+                        quizVersionId,
+                        quizSessionId,
+                    });
+                    if (!quizVersionId && questionResult?.quiz_version_id) {
+                        quizVersionId = questionResult.quiz_version_id;
+                    }
+                    if (!quizSessionId && questionResult?.quiz_session_id) {
+                        quizSessionId = questionResult.quiz_session_id;
+                    }
+                    // Set current question state
+                    dispatch({
+                        type: QuizAPIActionTypes.SET_CURRENT_QUESTION,
+                        payload: {
+                            quizSessionId,
+                            quizVersionId,
+                            quizCurrentQuestion: questionResult,
+                        },
+                    });
+                }
+                catch (error) {
+                    dispatch({
+                        type: QuizAPIActionTypes.SET_IS_ERROR,
+                    });
+                }
+            }
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        cioClient,
+        quizId,
+        quizLocalState,
+        quizLocalState.isLastAnswer,
+        resultsPageOptions?.numResultsToDisplay,
+    ]);
+    const resetQuizApiState = () => {
+        dispatch({ type: QuizAPIActionTypes.RESET_QUIZ });
+    };
+    return {
+        cioClient,
+        quizApiState,
+        isFirstQuestion,
+        resetQuizApiState,
+    };
+};
+export default useFetchQuiz;

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

@@ -0,0 +1,33 @@
+import useQuizResultsLoaded from './useQuizResultsLoaded';
+import useQuizResultClick from './useQuizResultClick';
+import useQuizAddToCart from './useQuizAddToCart';
+import useQuizNextClick from './useQuizNextClick';
+import useQuizBackClick from './useQuizBackClick';
+const useQuizEvents = (options) => {
+    const { cioClient, quizApiState, resultsPageOptions, dispatchLocalState, resetQuizApiState, resetQuizLocalState, } = options;
+    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
+    // Quiz Next button click
+    const nextQuestion = useQuizNextClick(quizApiState, dispatchLocalState);
+    // Quiz Back button click callback
+    const previousQuestion = useQuizBackClick(dispatchLocalState);
+    // Quiz result add to cart callback
+    const addToCart = useQuizAddToCart(cioClient, quizApiState, onAddToCartClick);
+    // Quiz result click callback
+    const resultClick = useQuizResultClick(cioClient, quizApiState, onQuizResultClick);
+    // Quiz results loaded event
+    useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
+    const resetQuiz = () => {
+        if (quizApiState.quizResults) {
+            resetQuizApiState();
+            resetQuizLocalState();
+        }
+    };
+    return {
+        addToCart,
+        resultClick,
+        nextQuestion,
+        previousQuestion,
+        resetQuiz,
+    };
+};
+export default useQuizEvents;

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

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { trackQuizConversion } from '../../services';
+import { isFunction } from '../../utils';
+const useQuizAddToCart = (cioClient, quizApiState, onAddToCartClick) => {
+    const addToCartClickHandler = useCallback((e, result, price) => {
+        e.preventDefault();
+        if (quizApiState.quizResults) {
+            // Tracking call
+            trackQuizConversion(cioClient, quizApiState.quizResults, result, price);
+            // User custom callback function
+            if (isFunction(onAddToCartClick)) {
+                onAddToCartClick(result);
+            }
+        }
+    }, [quizApiState, cioClient, onAddToCartClick]);
+    return addToCartClickHandler;
+};
+export default useQuizAddToCart;

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

@@ -0,0 +1,11 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+const useQuizBackClick = (dispatchLocalState) => {
+    const quizBackHandler = useCallback(() => {
+        if (dispatchLocalState) {
+            dispatchLocalState({ type: QuestionTypes.Back });
+        }
+    }, [dispatchLocalState]);
+    return quizBackHandler;
+};
+export default useQuizBackClick;

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

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+const useQuizNextClick = (quizApiState, dispatchLocalState) => {
+    const quizNextHandler = useCallback((payload) => {
+        const questionType = quizApiState.quizCurrentQuestion?.next_question.type;
+        const currentQuestion = quizApiState.quizCurrentQuestion;
+        switch (questionType) {
+            case QuestionTypes.Cover:
+                dispatchLocalState({
+                    type: QuestionTypes.Cover,
+                    payload: {
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case QuestionTypes.OpenText:
+                dispatchLocalState({
+                    type: QuestionTypes.OpenText,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            case QuestionTypes.SingleSelect:
+            case QuestionTypes.MultipleSelect:
+                dispatchLocalState({
+                    type: currentQuestion.next_question.type === QuestionTypes.SingleSelect
+                        ? QuestionTypes.SingleSelect
+                        : QuestionTypes.MultipleSelect,
+                    payload: {
+                        questionId: currentQuestion.next_question.id,
+                        input: payload,
+                        isLastQuestion: currentQuestion.is_last_question,
+                    },
+                });
+                break;
+            default:
+                break;
+        }
+    }, [quizApiState, dispatchLocalState]);
+    return quizNextHandler;
+};
+export default useQuizNextClick;

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

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { trackQuizResultClick } from '../../services';
+import { isFunction } from '../../utils';
+const useQuizResultClick = (cioClient, quizApiState, onQuizResultClick) => {
+    const resultClickHandler = useCallback((result, position) => {
+        if (quizApiState.quizResults) {
+            // Tracking call
+            trackQuizResultClick(cioClient, quizApiState.quizResults, result, position);
+            // User custom callback function
+            if (isFunction(onQuizResultClick)) {
+                onQuizResultClick(result, position);
+            }
+        }
+    }, [quizApiState, cioClient, onQuizResultClick]);
+    return resultClickHandler;
+};
+export default useQuizResultClick;

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { trackQuizResultsLoaded } from '../../services';
+import { isFunction } from '../../utils';
+const useQuizResultsLoaded = (cioClient, quizApiState, onQuizResultsLoaded) => {
+    // Quiz results loaded
+    useEffect(() => {
+        if (quizApiState.quizResults) {
+            // Tracking call
+            trackQuizResultsLoaded(cioClient, quizApiState.quizResults);
+            // User custom callback function
+            if (onQuizResultsLoaded &&
+                isFunction(onQuizResultsLoaded) &&
+                quizApiState.quizResults.response?.results) {
+                onQuizResultsLoaded(quizApiState.quizResults.response.results);
+            }
+        }
+    }, [quizApiState, cioClient, onQuizResultsLoaded]);
+};
+export default useQuizResultsLoaded;

package/lib/mjs/hooks/useQuizLocalState.js

@@ -0,0 +1,17 @@
+import { useReducer } from 'react';
+import { QuestionTypes } from '../components/CioQuiz/actions';
+import quizLocalReducer, { initialState } from '../components/CioQuiz/quizLocalReducer';
+const useQuizLocalState = () => {
+    const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
+    const resetQuizLocalState = () => {
+        dispatch({
+            type: QuestionTypes.Reset,
+        });
+    };
+    return {
+        quizLocalState,
+        resetQuizLocalState,
+        dispatchLocalState: dispatch,
+    };
+};
+export default useQuizLocalState;

package/lib/mjs/services/index.js

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+export const getCioClient = (apiKey) => {
+    if (apiKey) {
+        return new ConstructorIOClient({
+            apiKey,
+            sendTrackingEvents: true,
+        });
+    }
+    return undefined;
+};
+export const nextQuestion = (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizNextQuestion(quizId, parameters);
+export const getQuizResults = async (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizResults(quizId, parameters);
+// Tracking requests
+export const trackQuizResultsLoaded = (cioClient, quizResults) => {
+    const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    cioClient?.tracker.trackQuizResultsLoaded({
+        quiz_id,
+        quiz_version_id,
+        quiz_session_id,
+        url: window.location.href,
+        section: request?.section,
+        result_count: response?.total_num_results,
+        result_page: request?.page,
+        result_id,
+    });
+};
+export const trackQuizResultClick = (cioClient, quizResults, result, position) => {
+    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?.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: position,
+            num_results_per_page,
+        });
+    }
+};
+export const trackQuizConversion = (cioClient, quizResults, result, price) => {
+    if (quizResults.request) {
+        const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
+        cioClient?.tracker.trackQuizConversion({
+            quiz_id,
+            quiz_version_id,
+            quiz_session_id,
+            item_id: result.data?.id,
+            item_name: result.value,
+            section,
+            variation_id: result.data?.variation_id,
+            revenue: (price && String(price)) || undefined,
+        });
+    }
+};

package/lib/mjs/utils.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { QuestionTypes } from './components/CioQuiz/actions';
 export const renderImages = (images, cssClasses) => {
     const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
@@ -36,21 +35,32 @@ ${templateCode}
         },
     };
 };
-export const defaultAddToCartCallbackCode = `"addToCartCallback": (item) => console.dir(item)`;
+export const defaultOnAddToCartClickCode = `"onAddToCartClick": (item) => console.dir(item)`;
+export const defaultOnQuizResultClickCode = `"onQuizResultClick": (result, position) => console.dir(result, position)`;
+export const defaultOnQuizResultsLoadedCode = `"onQuizResultsLoaded": (results) => console.dir(results)`;
 export const stringifyWithDefaults = (obj) => {
-    const { addToCartCallback, cioJsClient, ...rest } = obj;
-    let res = JSON.stringify(rest, null, '  ');
+    const { resultsPageOptions, cioJsClient, ...rest } = obj;
+    const { onAddToCartClick, onQuizResultsLoaded, onQuizResultClick } = resultsPageOptions;
+    let res = JSON.stringify({ ...rest, resultsPageOptions }, null, '  ');
     if (cioJsClient) {
         res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
   "resultsPageOptions": {`);
     }
-    res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${defaultAddToCartCallbackCode},`);
+    if (onQuizResultsLoaded) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${defaultOnQuizResultsLoadedCode},`);
+    }
+    if (onQuizResultClick) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${defaultOnQuizResultClickCode},`);
+    }
+    if (onAddToCartClick) {
+        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${defaultOnAddToCartClickCode},`);
+    }
     return res;
 };
 export const stringify = (obj) => JSON.stringify(obj, null, '  ');
-export const getNextQuestion = (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizNextQuestion(quizId, parameters);
-export const getQuizResults = async (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizResults(quizId, parameters);
 export const getQuestionTypes = (questionType) => {
     const isOpenQuestion = questionType === QuestionTypes.OpenText;
     const isCoverQuestion = questionType === QuestionTypes.Cover;
@@ -65,15 +75,6 @@ export const getQuestionTypes = (questionType) => {
         isSelectQuestion,
     };
 };
-export const getCioClient = (apiKey) => {
-    if (apiKey) {
-        return new ConstructorIOClient({
-            apiKey,
-            sendTrackingEvents: true,
-        });
-    }
-    return undefined;
-};
 export function getPreferredColorScheme() {
     let colorScheme = 'light';
     // Check if the dark-mode Media-Query matches
@@ -82,3 +83,24 @@ export function getPreferredColorScheme() {
     }
     return colorScheme;
 }
+export function isFunction(fn) {
+    return fn && typeof fn === 'function';
+}
+const isValueExpression = (exp) => 'name' in exp && 'value' in exp;
+const isAndFilter = (exp) => 'and' in exp;
+const isOrFilter = (exp) => 'or' in exp;
+export 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 [];
+};