@constructor-io/constructorio-ui-quizzes 1.0.1

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+const ResultCard_1 = tslib_1.__importDefault(require("../ResultCard/ResultCard"));
+function Results(props) {
+    var _a, _b;
+    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = props;
+    const { resultsResponse } = (0, react_1.useContext)(context_1.default);
+    return (react_1.default.createElement("div", { className: 'cio-results' }, (_b = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.map((result) => {
+        var _a;
+        return (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback }));
+    })));
+}
+exports.default = Results;

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/QuestionTitle"));
+const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+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);
+    let question;
+    let type;
+    let hasImages = false;
+    if (questionResponse) {
+        question = questionResponse.next_question;
+        type = question.type;
+        hasImages = questionResponse.next_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]) || [];
+            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]);
+    const toggleIdSelected = (id) => {
+        if (type === actions_1.QuestionTypes.SingleSelect) {
+            setSelected({ [id]: true });
+        }
+        else if (type === actions_1.QuestionTypes.MultipleSelect) {
+            if (selected[id]) {
+                const newState = Object.assign({}, selected);
+                delete newState[id];
+                setSelected(newState);
+            }
+            else {
+                setSelected(Object.assign(Object.assign({}, selected), { [id]: true }));
+            }
+        }
+    };
+    const onOptionKeyDown = (event, id) => {
+        if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
+            toggleIdSelected(id);
+        }
+    };
+    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 (question) {
+        return (react_1.default.createElement("div", { className: 'cio-select-question-container' },
+            react_1.default.createElement("div", { className: 'cio-select-question-text' },
+                react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
+                (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-option-container-text-only'
+                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, onClick: () => {
+                    toggleIdSelected(option.id);
+                }, onKeyDown: (event) => {
+                    onOptionKeyDown(event, option.id);
+                }, 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 })));
+    }
+    return null;
+}
+exports.default = SelectTypeQuestion;

package/lib/cjs/components/Spinner/Spinner.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function Spinner() {
+    return (react_1.default.createElement("div", { className: 'cio-spinner' },
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null)));
+}
+exports.default = Spinner;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+    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 })));
+}
+exports.default = ZeroResults;

package/lib/cjs/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequestStates = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
+// Autocomplete key index
+exports.apiKey = 'key_wJSdZSiesX5hiVLt';
+exports.quizId = 'coffee-quiz';
+/// //////////////////////////////
+// Storybook Folder Descriptions
+/// //////////////////////////////
+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
+  - \`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.
+- The following stories show how different props affect the component's behavior
+
+> Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
+`;
+/// //////////////////////////////
+// Storybook Stories
+/// //////////////////////////////
+exports.basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request questions and quiz results from Constructor's servers`;
+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)`;
+var RequestStates;
+(function (RequestStates) {
+    RequestStates[RequestStates["Stale"] = 0] = "Stale";
+    RequestStates[RequestStates["Loading"] = 1] = "Loading";
+    RequestStates[RequestStates["Success"] = 2] = "Success";
+    RequestStates[RequestStates["Error"] = 3] = "Error";
+})(RequestStates = exports.RequestStates || (exports.RequestStates = {}));

package/lib/cjs/hooks/useCioClient.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useCioClient = ({ apiKey, cioJsClient }) => {
+    if (!apiKey && !cioJsClient) {
+        console.error('Either apiKey or cioJsClient is required');
+    }
+    return (0, react_1.useMemo)(() => cioJsClient || (0, utils_1.getCioClient)(apiKey), [apiKey, cioJsClient]);
+};
+exports.default = useCioClient;

package/lib/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CioQuiz_1 = tslib_1.__importDefault(require("./components/CioQuiz"));
+exports.default = CioQuiz_1.default;

package/lib/cjs/stories/Quiz/argTypes.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypes = void 0;
+// eslint-disable-next-line
+exports.argTypes = {
+    apiKey: {
+        type: { name: 'string' },
+        description: 'Your Constructor API key',
+        table: {
+            type: {
+                summary: 'string',
+            },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+    quizId: {
+        type: { name: 'string' },
+        description: 'ID of the quiz',
+        table: {
+            type: {
+                summary: 'string',
+            },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+};

package/lib/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/utils.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreferredColorScheme = exports.getCioClient = exports.getQuestionTypes = exports.getQuizResults = exports.getNextQuestion = exports.stringify = exports.stringifyWithDefaults = exports.defaultAddToCartCallbackCode = exports.getStoryParams = exports.renderImages = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const actions_1 = require("./components/CioQuiz/actions");
+const renderImages = (images, cssClasses) => {
+    const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
+    if (primaryUrl) {
+        const windowWidth = window.innerWidth;
+        let src = primaryUrl;
+        let alt = primaryAlt || 'Quiz Image';
+        if (windowWidth > 768 && secondaryUrl) {
+            src = secondaryUrl;
+            if (secondaryAlt) {
+                alt = secondaryAlt;
+            }
+        }
+        return (react_1.default.createElement("span", { className: `${cssClasses || ''}`.trim() },
+            react_1.default.createElement("img", { className: 'cio-question-image', src: src, alt: alt })));
+    }
+    return '';
+};
+exports.renderImages = renderImages;
+// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+const getStoryParams = (storyCode, templateCode, importCode) => {
+    const code = `
+${importCode}
+${storyCode}
+${templateCode}
+`;
+    return {
+        docs: {
+            source: {
+                code,
+                language: 'jsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    };
+};
+exports.getStoryParams = getStoryParams;
+exports.defaultAddToCartCallbackCode = `"addToCartCallback": (item) => console.dir(item)`;
+const stringifyWithDefaults = (obj) => {
+    const { addToCartCallback, cioJsClient } = obj, rest = tslib_1.__rest(obj, ["addToCartCallback", "cioJsClient"]);
+    let res = JSON.stringify(rest, null, '  ');
+    if (cioJsClient) {
+        res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
+  "resultsPageOptions": {`);
+    }
+    res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${exports.defaultAddToCartCallbackCode},`);
+    return res;
+};
+exports.stringifyWithDefaults = stringifyWithDefaults;
+const stringify = (obj) => JSON.stringify(obj, null, '  ');
+exports.stringify = stringify;
+const getNextQuestion = (cioClient, quizId, parameters) => cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizNextQuestion(quizId, parameters);
+exports.getNextQuestion = getNextQuestion;
+const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizResults(quizId, parameters); });
+exports.getQuizResults = getQuizResults;
+const getQuestionTypes = (questionType) => {
+    const isOpenQuestion = questionType === actions_1.QuestionTypes.OpenText;
+    const isCoverQuestion = questionType === actions_1.QuestionTypes.Cover;
+    const isSingleQuestion = questionType === actions_1.QuestionTypes.SingleSelect;
+    const isMultipleQuestion = questionType === actions_1.QuestionTypes.MultipleSelect;
+    const isSelectQuestion = isSingleQuestion || isMultipleQuestion;
+    return {
+        isOpenQuestion,
+        isCoverQuestion,
+        isSingleQuestion,
+        isMultipleQuestion,
+        isSelectQuestion,
+    };
+};
+exports.getQuestionTypes = getQuestionTypes;
+const getCioClient = (apiKey) => {
+    if (apiKey) {
+        return new constructorio_client_javascript_1.default({
+            apiKey,
+        });
+    }
+    return null;
+};
+exports.getCioClient = getCioClient;
+function getPreferredColorScheme() {
+    var _a;
+    let colorScheme = 'light';
+    // Check if the dark-mode Media-Query matches
+    if ((_a = window.matchMedia('(prefers-color-scheme: dark)')) === null || _a === void 0 ? void 0 : _a.matches) {
+        colorScheme = 'dark';
+    }
+    return colorScheme;
+}
+exports.getPreferredColorScheme = getPreferredColorScheme;

package/lib/mjs/components/BackButton/BackButton.js

@@ -0,0 +1,9 @@
+import React from 'react';
+function BackButton(props) {
+    // eslint-disable-next-line
+    const { disabled } = props;
+    return (React.createElement("button", { type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}`, ...props },
+        React.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("path", { d: 'M6.06313 1.06268L0.964522 5.43176C0.882383 5.50218 0.816449 5.58954 0.771245 5.68785C0.726041 5.78615 0.702637 5.89306 0.702637 6.00126C0.702637 6.10946 0.726041 6.21637 0.771245 6.31467C0.816449 6.41297 0.882383 6.50033 0.964522 6.57076L6.06313 10.9398C6.5498 11.3568 7.30153 11.0111 7.30153 10.3703V1.63093C7.30153 0.990168 6.5498 0.644468 6.06313 1.06268Z', fill: 'currentColor' }))));
+}
+export default BackButton;

package/lib/mjs/components/CTAButton/CTAButton.js

@@ -0,0 +1,7 @@
+import React from 'react';
+function CTAButton(props) {
+    const { ctaText = 'Continue', disabled, className = 'cio-button-container', ...rest } = props;
+    return (React.createElement("div", { className: `${className || ''}` },
+        React.createElement("button", { type: 'button', className: `${disabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button'}`, ...rest }, ctaText || 'Continue')));
+}
+export default CTAButton;

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

@@ -0,0 +1,9 @@
+export var QuestionTypes;
+(function (QuestionTypes) {
+    QuestionTypes["OpenText"] = "open";
+    QuestionTypes["Cover"] = "cover";
+    QuestionTypes["SingleSelect"] = "single";
+    QuestionTypes["MultipleSelect"] = "multiple";
+    QuestionTypes["Back"] = "back";
+    QuestionTypes["Reset"] = "reset";
+})(QuestionTypes || (QuestionTypes = {}));

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default React.createContext({});

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

@@ -0,0 +1,111 @@
+import React, { useReducer, useState, useEffect, useCallback } 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';
+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');
+    }
+    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 contextValue = {
+        dispatch,
+        questionResponse,
+        state,
+        resultsResponse,
+        isFirstQuestion,
+        quizNextHandler,
+        quizBackHandler,
+    };
+    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) {
+        return (React.createElement("div", { className: 'cio-quiz' },
+            React.createElement(Spinner, null)));
+    }
+    if (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 }))));
+    }
+    return null;
+}

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

@@ -0,0 +1,55 @@
+import { QuestionTypes, } from './actions';
+export const initialState = {
+    answers: [],
+    answerInputs: {},
+    isLastAnswer: false,
+};
+function answerInputReducer(state, action) {
+    return {
+        ...state,
+        [String(action.payload.questionId)]: action.payload.input,
+    };
+}
+export default function reducer(state, action) {
+    switch (action.type) {
+        case QuestionTypes.OpenText:
+            return {
+                ...state,
+                answers: [...state.answers, ['true']],
+                answerInputs: answerInputReducer(state.answerInputs, action),
+                isLastAnswer: !!action.payload?.isLastQuestion,
+            };
+        case QuestionTypes.Cover:
+            return {
+                ...state,
+                answers: [...state.answers, ['seen']],
+                isLastAnswer: !!action.payload?.isLastQuestion,
+            };
+        case QuestionTypes.SingleSelect:
+            return {
+                ...state,
+                answers: [...state.answers, action.payload?.input],
+                answerInputs: answerInputReducer(state.answerInputs, action),
+                isLastAnswer: !!action.payload?.isLastQuestion,
+            };
+        case QuestionTypes.MultipleSelect:
+            return {
+                ...state,
+                answers: [...state.answers, action.payload?.input],
+                answerInputs: answerInputReducer(state.answerInputs, action),
+                isLastAnswer: !!action.payload?.isLastQuestion,
+            };
+        case QuestionTypes.Back:
+            return {
+                ...state,
+                answers: [...state.answers.slice(0, -1)],
+                isLastAnswer: false,
+            };
+        case QuestionTypes.Reset:
+            return {
+                ...initialState,
+            };
+        default:
+            return state;
+    }
+}

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import BackButton from '../BackButton/BackButton';
+import CTAButton from '../CTAButton/CTAButton';
+function ControlBar(props) {
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    return (React.createElement("div", { className: 'cio-question-buttons-container' },
+        showBackButton && React.createElement(BackButton, { onClick: backButtonHandler }),
+        React.createElement(CTAButton, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
+}
+export default ControlBar;

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

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+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);
+    let question;
+    if (questionResponse) {
+        question = questionResponse.next_question;
+    }
+    const hasImage = question?.images?.primary_url;
+    const onNextClick = () => {
+        if (quizNextHandler) {
+            quizNextHandler({
+                type: QuestionTypes.Cover,
+                payload: {
+                    isLastQuestion: questionResponse?.is_last_question,
+                },
+            });
+        }
+    };
+    if (question) {
+        return (React.createElement("div", { className: `
+        cio-container${hasImage ? '--with-image' : ''}
+        cio-cover-question-container${hasImage ? '--with-image' : ''}
+      ` },
+            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 })),
+            hasImage ? renderImages(question.images, 'cio-question-image-container') : ''));
+    }
+    return null;
+}

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

@@ -0,0 +1,61 @@
+import React, { useContext, useEffect, useState } from 'react';
+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 [openTextInput, setOpenTextInput] = useState(initialValue);
+    let question;
+    if (questionResponse) {
+        question = questionResponse.next_question;
+    }
+    const onChangeHandler = (e) => {
+        setOpenTextInput(e.target.value);
+        if (userDefinedHandler) {
+            userDefinedHandler(e);
+        }
+    };
+    const onNextClick = () => {
+        if (quizNextHandler && openTextInput && questionResponse) {
+            quizNextHandler({
+                type: QuestionTypes.OpenText,
+                payload: {
+                    questionId: questionResponse.next_question.id,
+                    input: openTextInput,
+                    isLastQuestion: questionResponse.is_last_question,
+                },
+            });
+        }
+    };
+    const onKeyDownHandler = (e) => {
+        const { key } = e;
+        if (key === 'Enter') {
+            onNextClick();
+        }
+    };
+    useEffect(() => {
+        if (questionResponse) {
+            const openTextAnswer = state?.answerInputs?.[questionResponse?.next_question.id] || initialValue;
+            setOpenTextInput(openTextAnswer);
+        }
+    }, [questionResponse, state, initialValue]);
+    if (question) {
+        const hasImage = question?.images?.primary_url;
+        return (React.createElement("div", { className: `
+          cio-container${hasImage ? '--with-image' : ''}
+          cio-open-text-question-container${hasImage ? '--with-image' : ''}
+        ` },
+            hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
+            React.createElement("div", { className: 'cio-question-content' },
+                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 }))));
+    }
+    return null;
+}
+export default OpenTextQuestion;

package/lib/mjs/components/QuestionDescription/QuestionDescription.js

@@ -0,0 +1,6 @@
+import React from 'react';
+function QuestionDescription(props) {
+    const { description } = props;
+    return React.createElement("p", { className: 'cio-question-description' }, description);
+}
+export default QuestionDescription;