@constructor-io/constructorio-ui-quizzes 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Constructor.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# Constructor.io Quizzes UI Library
+
+A UI Library that provides React components to manage the fetching and rendering logic for [Constructor.io's Quizzes](https://constructor.io/products/quizzes/).
+
+## Introduction
+
+[Constructor.io's Quizzes](https://constructor.io/products/quizzes/) are interactive experiences that personalizes the shopping journey for each of your customers. This UI library simplifies the integration process by providing React Components that handle the fetching and rendering logic for Quizzes. Typescript support is available.
+
+[Our storybook docs](https://constructor-io.github.io/constructorio-ui-quizzes) are the best place to explore the behavior and the available configuration options for this UI Library.
+
+![Quizzes-UI-Example](assets/coffee-quiz.gif)
+
+## How to use this UI Library
+
+### Install
+
+```bash
+npm i @constructor-io/constructorio-ui-quizzes
+```
+
+The `CioQuiz` component handles state management, data fetching, and rendering logic for the entire quiz.
+
+```jsx
+import CioQuiz from '@constructor-io/constructorio-ui-quizzes';
+
+function YourComponent() {
+  return (
+    <div>
+      <CioQuiz quizId="coffee-quiz" apiKey="key_wJSdZSiesX5hiVLt" />
+    </div>
+  );
+```
+
+## Custom Styling
+
+### Library defaults
+
+By default, importing React components from this library does not pull any css into your project.
+
+If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
+
+```js
+import '@constructor-io/constructorio-ui-quizzes/styles.css';
+```
+
+ - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
+ - To opt out of all default styling, do not import the `styles.css` stylesheet.
+ - All starter styles in this library are scoped within the `.cio-quiz` css selector.
+ - These starter styles are intended to be extended by layering in your own css rules
+ - If you import the starter styles, `CioQuiz` component will take up the full width and height of its parent container
+
+## Troubleshooting
+
+### Known Issues
+
+**ESLint**
+
+There is a known issue with ESLint where it fails to resolve the paths exposed in the `exports` statement of NPM packages. If you are receiving the following error, you can safely disable ESLint using `// eslint-disable-line` for that line.
+
+`Unable to resolve path to module '@constructor-io/constructorio-ui-quizzes/styles.css'`
+
+Relevant open issues:
+
+[Issue 1868](https://github.com/import-js/eslint-plugin-import/issues/1868)
+
+[Issue 1810](https://github.com/import-js/eslint-plugin-import/issues/1810)
+
+## Local Development
+
+### Development scripts
+
+```bash
+npm ci                  # install dependencies for local dev
+npm run dev             # start a local dev server for Storybook
+npm run lint            # run linter
+```
+
+### Maintain Library
+
+```bash
+npm run compile           # generate lib folder for publishing to npm
+npm run build-storybook   # generate storybook static bundle for deploy with GH Pages
+```
+
+## Supporting Docs
+
+- [Storybook 7 Introduction](https://storybook.js.org/docs/7.0/react/get-started/introduction)
+- [Typescript Docs](https://www.typescriptlang.org/docs/)

package/lib/cjs/components/BackButton/BackButton.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 BackButton(props) {
+    // eslint-disable-next-line
+    const { disabled } = props;
+    return (react_1.default.createElement("button", Object.assign({ type: 'button', className: `cio-question-back-button ${disabled ? 'disabled' : ''}` }, props),
+        react_1.default.createElement("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            react_1.default.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' }))));
+}
+exports.default = BackButton;

package/lib/cjs/components/CTAButton/CTAButton.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CTAButton(props) {
+    const { ctaText = 'Continue', disabled, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["ctaText", "disabled", "className"]);
+    return (react_1.default.createElement("div", { className: `${className || ''}` },
+        react_1.default.createElement("button", Object.assign({ type: 'button', className: `${disabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button'}` }, rest), ctaText || 'Continue')));
+}
+exports.default = CTAButton;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuestionTypes = void 0;
+var QuestionTypes;
+(function (QuestionTypes) {
+    QuestionTypes["OpenText"] = "open";
+    QuestionTypes["Cover"] = "cover";
+    QuestionTypes["SingleSelect"] = "single";
+    QuestionTypes["MultipleSelect"] = "multiple";
+    QuestionTypes["Back"] = "back";
+    QuestionTypes["Reset"] = "reset";
+})(QuestionTypes = exports.QuestionTypes || (exports.QuestionTypes = {}));

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

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

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

@@ -0,0 +1,115 @@
+"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("./context"));
+const reducer_1 = tslib_1.__importStar(require("./reducer"));
+const actions_1 = require("./actions");
+const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
+const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
+const useCioClient_1 = tslib_1.__importDefault(require("../../hooks/useCioClient"));
+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 = (0, useCioClient_1.default)({ apiKey, cioJsClient });
+    const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState);
+    const [requestState, setRequestState] = (0, react_1.useState)(constants_1.RequestStates.Stale);
+    const [questionResponse, setQuestionResponse] = (0, react_1.useState)();
+    const [resultsResponse, setResultsResponse] = (0, react_1.useState)();
+    const [firstQuestion, setFirstQuestion] = (0, react_1.useState)();
+    const [quizVersionId, setQuizVersionId] = (0, react_1.useState)(quizVersionIdProp || '');
+    const [quizSessionId, setQuizSessionId] = (0, react_1.useState)('');
+    const isFirstQuestion = (firstQuestion === null || firstQuestion === void 0 ? void 0 : firstQuestion.next_question.id) === (questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question.id);
+    const quizNextHandler = (0, react_1.useCallback)((action) => {
+        if (action) {
+            dispatch(action);
+        }
+    }, [dispatch]);
+    const quizBackHandler = (0, react_1.useCallback)(() => {
+        if (dispatch) {
+            dispatch({ type: actions_1.QuestionTypes.Back });
+        }
+    }, [dispatch]);
+    const contextValue = {
+        dispatch,
+        questionResponse,
+        state,
+        resultsResponse,
+        isFirstQuestion,
+        quizNextHandler,
+        quizBackHandler,
+    };
+    (0, react_1.useEffect)(() => {
+        (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (cioClient) {
+                setRequestState(constants_1.RequestStates.Loading);
+                if (state.isLastAnswer) {
+                    try {
+                        const quizResults = yield (0, utils_1.getQuizResults)(cioClient, quizId, {
+                            answers: state.answers,
+                            resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
+                            quizVersionId,
+                            quizSessionId,
+                        });
+                        setResultsResponse(quizResults);
+                        setRequestState(constants_1.RequestStates.Success);
+                        setQuestionResponse(undefined);
+                    }
+                    catch (error) {
+                        setResultsResponse(undefined);
+                        setRequestState(constants_1.RequestStates.Error);
+                    }
+                }
+                else {
+                    try {
+                        const questionResult = yield (0, utils_1.getNextQuestion)(cioClient, quizId, {
+                            answers: state.answers,
+                            quizVersionId,
+                            quizSessionId,
+                        });
+                        setQuestionResponse(questionResult);
+                        setRequestState(constants_1.RequestStates.Success);
+                        setResultsResponse(undefined);
+                        if (!quizVersionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_version_id)) {
+                            setQuizVersionId(questionResult.quiz_version_id);
+                        }
+                        if (!quizSessionId && (questionResult === null || questionResult === void 0 ? void 0 : questionResult.quiz_session_id)) {
+                            setQuizSessionId(questionResult.quiz_session_id);
+                        }
+                    }
+                    catch (error) {
+                        setRequestState(constants_1.RequestStates.Error);
+                    }
+                }
+            }
+        }))();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cioClient, state, quizId, state.isLastAnswer, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay]);
+    (0, react_1.useEffect)(() => {
+        if (!firstQuestion) {
+            setFirstQuestion(questionResponse);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [questionResponse]);
+    const resetQuizSessionId = () => {
+        setQuizSessionId('');
+    };
+    if (requestState === constants_1.RequestStates.Loading) {
+        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+            react_1.default.createElement(Spinner_1.default, null)));
+    }
+    if (requestState === constants_1.RequestStates.Success) {
+        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue },
+                resultsResponse && (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions, resetQuizSessionId: resetQuizSessionId })),
+                questionResponse && react_1.default.createElement(QuizQuestions_1.default, { questionResponse: questionResponse }))));
+    }
+    return null;
+}
+exports.default = CioQuiz;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialState = void 0;
+const actions_1 = require("./actions");
+exports.initialState = {
+    answers: [],
+    answerInputs: {},
+    isLastAnswer: false,
+};
+function answerInputReducer(state, action) {
+    return Object.assign(Object.assign({}, state), { [String(action.payload.questionId)]: action.payload.input });
+}
+function reducer(state, action) {
+    var _a, _b, _c, _d, _e, _f;
+    switch (action.type) {
+        case actions_1.QuestionTypes.OpenText:
+            return Object.assign(Object.assign({}, state), { answers: [...state.answers, ['true']], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.isLastQuestion) });
+        case actions_1.QuestionTypes.Cover:
+            return Object.assign(Object.assign({}, state), { answers: [...state.answers, ['seen']], isLastAnswer: !!((_b = action.payload) === null || _b === void 0 ? void 0 : _b.isLastQuestion) });
+        case actions_1.QuestionTypes.SingleSelect:
+            return Object.assign(Object.assign({}, state), { answers: [...state.answers, (_c = action.payload) === null || _c === void 0 ? void 0 : _c.input], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_d = action.payload) === null || _d === void 0 ? void 0 : _d.isLastQuestion) });
+        case actions_1.QuestionTypes.MultipleSelect:
+            return Object.assign(Object.assign({}, state), { answers: [...state.answers, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.input], answerInputs: answerInputReducer(state.answerInputs, action), isLastAnswer: !!((_f = action.payload) === null || _f === void 0 ? void 0 : _f.isLastQuestion) });
+        case actions_1.QuestionTypes.Back:
+            return Object.assign(Object.assign({}, state), { answers: [...state.answers.slice(0, -1)], isLastAnswer: false });
+        case actions_1.QuestionTypes.Reset:
+            return Object.assign({}, exports.initialState);
+        default:
+            return state;
+    }
+}
+exports.default = reducer;

package/lib/cjs/components/ControlBar/ControlBar.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 BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
+const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
+function ControlBar(props) {
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
+        showBackButton && react_1.default.createElement(BackButton_1.default, { onClick: backButtonHandler }),
+        react_1.default.createElement(CTAButton_1.default, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
+}
+exports.default = ControlBar;

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -0,0 +1,42 @@
+"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 context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
+const utils_1 = require("../../utils");
+const actions_1 = require("../CioQuiz/actions");
+const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
+function CoverTypeQuestion() {
+    var _a;
+    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion } = (0, react_1.useContext)(context_1.default);
+    let question;
+    if (questionResponse) {
+        question = questionResponse.next_question;
+    }
+    const hasImage = (_a = question === null || question === void 0 ? void 0 : question.images) === null || _a === void 0 ? void 0 : _a.primary_url;
+    const onNextClick = () => {
+        if (quizNextHandler) {
+            quizNextHandler({
+                type: actions_1.QuestionTypes.Cover,
+                payload: {
+                    isLastQuestion: questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.is_last_question,
+                },
+            });
+        }
+    };
+    if (question) {
+        return (react_1.default.createElement("div", { className: `
+        cio-container${hasImage ? '--with-image' : ''}
+        cio-cover-question-container${hasImage ? '--with-image' : ''}
+      ` },
+            react_1.default.createElement("div", { className: 'cio-question-content' },
+                react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
+                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
+                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })),
+            hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : ''));
+    }
+    return null;
+}
+exports.default = CoverTypeQuestion;

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -0,0 +1,66 @@
+"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 utils_1 = require("../../utils");
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+const actions_1 = require("../CioQuiz/actions");
+const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
+function OpenTextQuestion(props) {
+    var _a;
+    const { initialValue = '', onChangeHandler: userDefinedHandler = null } = props;
+    const { questionResponse, quizBackHandler, quizNextHandler, isFirstQuestion, state } = (0, react_1.useContext)(context_1.default);
+    const [openTextInput, setOpenTextInput] = (0, react_1.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: actions_1.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();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (questionResponse) {
+            const openTextAnswer = ((_a = state === null || state === void 0 ? void 0 : state.answerInputs) === null || _a === void 0 ? void 0 : _a[questionResponse === null || questionResponse === void 0 ? void 0 : questionResponse.next_question.id]) || initialValue;
+            setOpenTextInput(openTextAnswer);
+        }
+    }, [questionResponse, state, initialValue]);
+    if (question) {
+        const hasImage = (_a = question === null || question === void 0 ? void 0 : question.images) === null || _a === void 0 ? void 0 : _a.primary_url;
+        return (react_1.default.createElement("div", { className: `
+          cio-container${hasImage ? '--with-image' : ''}
+          cio-open-text-question-container${hasImage ? '--with-image' : ''}
+        ` },
+            hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
+            react_1.default.createElement("div", { className: 'cio-question-content' },
+                react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
+                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
+                react_1.default.createElement("input", { className: 'cio-question-input-text', placeholder: question.input_placeholder || 'Answer here...', value: openTextInput, onChange: onChangeHandler, onKeyDown: onKeyDownHandler }),
+                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: !openTextInput, backButtonHandler: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+    }
+    return null;
+}
+exports.default = OpenTextQuestion;

package/lib/cjs/components/QuestionDescription/QuestionDescription.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function QuestionDescription(props) {
+    const { description } = props;
+    return react_1.default.createElement("p", { className: 'cio-question-description' }, description);
+}
+exports.default = QuestionDescription;

package/lib/cjs/components/QuestionTitle/QuestionTitle.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function QuestionTitle(props) {
+    const { title } = props;
+    return react_1.default.createElement("h1", { className: 'cio-question-title' }, title);
+}
+exports.default = QuestionTitle;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const OpenTextTypeQuestion_1 = tslib_1.__importDefault(require("../OpenTextTypeQuestion/OpenTextTypeQuestion"));
+const CoverTypeQuestion_1 = tslib_1.__importDefault(require("../CoverTypeQuestion/CoverTypeQuestion"));
+const SelectTypeQuestion_1 = tslib_1.__importDefault(require("../SelectTypeQuestion/SelectTypeQuestion"));
+const utils_1 = require("../../utils");
+function QuizQuestions(props) {
+    const { questionResponse: { next_question: nextQuestion }, } = props;
+    const questionTypes = (0, utils_1.getQuestionTypes)(nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.type);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        questionTypes.isOpenQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
+        questionTypes.isCoverQuestion && react_1.default.createElement(CoverTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
+        questionTypes.isSelectQuestion && react_1.default.createElement(SelectTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id })));
+}
+exports.default = QuizQuestions;

package/lib/cjs/components/RedoButton/RedoButton.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"));
+const RedoSVG_1 = tslib_1.__importDefault(require("./RedoSVG"));
+function RedoButton(props) {
+    const { redoText = 'Redo Quiz', disabled } = props, rest = tslib_1.__rest(props, ["redoText", "disabled"]);
+    return (react_1.default.createElement("button", Object.assign({ type: 'button', className: `${disabled ? 'cio-question-redo-button disabled' : 'cio-question-redo-button'}` }, rest),
+        react_1.default.createElement(RedoSVG_1.default, null),
+        react_1.default.createElement("span", null, redoText)));
+}
+exports.default = RedoButton;

package/lib/cjs/components/RedoButton/RedoSVG.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function RedoSVG() {
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("g", { clipPath: 'url(#clip0_7495_177230)' },
+            react_1.default.createElement("path", { d: 'M0.667969 2.66699V6.66699H4.66797', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+            react_1.default.createElement("path", { d: 'M15.332 13.333V9.33301H11.332', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+            react_1.default.createElement("path", { d: 'M13.6613 6.00038C13.3232 5.0449 12.7485 4.19064 11.991 3.51732C11.2334 2.844 10.3177 2.37355 9.32911 2.14988C8.34056 1.92621 7.31147 1.9566 6.33784 2.23823C5.36422 2.51985 4.4778 3.04352 3.7613 3.76038L0.667969 6.66704M15.3346 9.33371L12.2413 12.2404C11.5248 12.9572 10.6384 13.4809 9.66476 13.7625C8.69114 14.0441 7.66204 14.0745 6.67349 13.8509C5.68495 13.6272 4.76917 13.1568 4.01161 12.4834C3.25406 11.8101 2.67941 10.9559 2.3413 10.0004', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: 'clip0_7495_177230' },
+                react_1.default.createElement("rect", { width: '16', height: '16', fill: 'white' })))));
+}
+exports.default = RedoSVG;

package/lib/cjs/components/ResultCard/ResultCard.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/ResultCtaButton"));
+function ResultCard(props) {
+    var _a, _b, _c;
+    const { result, addToCartCallback, clickItemCallback, salePriceKey, regularPriceKey } = props;
+    const salePrice = salePriceKey && ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[salePriceKey]);
+    const regularPrice = regularPriceKey && ((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b[regularPriceKey]);
+    const clickHandler = () => {
+        if (clickItemCallback && typeof clickItemCallback === 'function') {
+            clickItemCallback(result);
+        }
+    };
+    const keyDownHandler = (event) => {
+        if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
+            if (clickItemCallback && typeof clickItemCallback === 'function') {
+                clickItemCallback(result);
+            }
+        }
+    };
+    const resultCardContent = () => {
+        var _a;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: 'cio-result-card-image' },
+                react_1.default.createElement("img", { src: (_a = result.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: 'product' })),
+            react_1.default.createElement("div", { className: 'cio-result-card-text' },
+                react_1.default.createElement("p", { className: 'cio-result-card-title' }, result.value),
+                react_1.default.createElement("div", { className: 'cio-result-card-prices' },
+                    salePrice && react_1.default.createElement("span", { className: 'cio-result-card-sale-price' },
+                        "$",
+                        salePrice),
+                    regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
+                        "$",
+                        regularPrice)))),
+            react_1.default.createElement(ResultCtaButton_1.default, { item: result, callback: addToCartCallback })));
+    };
+    if (clickItemCallback) {
+        return (react_1.default.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, resultCardContent()));
+    }
+    return (react_1.default.createElement("div", { className: 'cio-result-card' },
+        react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_c = result.data) === null || _c === void 0 ? void 0 : _c.url }, resultCardContent())));
+}
+exports.default = ResultCard;

package/lib/cjs/components/ResultContainer/ResultContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const RedoButton_1 = tslib_1.__importDefault(require("../RedoButton/RedoButton"));
+const actions_1 = require("../CioQuiz/actions");
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+const ResultFilters_1 = tslib_1.__importDefault(require("../ResultFilters/ResultFilters"));
+const ZeroResults_1 = tslib_1.__importDefault(require("../ZeroResults/ZeroResults"));
+const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
+function ResultContainer(props) {
+    var _a, _b, _c;
+    const { options, resetQuizSessionId } = props;
+    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = options;
+    const { resultsResponse } = (0, react_1.useContext)(context_1.default);
+    const { dispatch } = (0, react_1.useContext)(context_1.default);
+    const filterExpression = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.request) === null || _a === void 0 ? void 0 : _a.collection_filter_expression;
+    const zeroResults = !((_c = (_b = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length);
+    const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
+    const onResetClick = () => {
+        if (dispatch && resultsResponse) {
+            resetQuizSessionId();
+            dispatch({
+                type: actions_1.QuestionTypes.Reset,
+            });
+        }
+    };
+    if (resultsResponse) {
+        return (react_1.default.createElement("div", { className: 'cio-results-container' },
+            react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
+            react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },
+                react_1.default.createElement(ResultFilters_1.default, { filters: filterExpression }),
+                react_1.default.createElement(RedoButton_1.default, { onClick: onResetClick })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
+            zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
+    }
+    return react_1.default.createElement("div", null, "Loading");
+}
+exports.default = ResultContainer;

package/lib/cjs/components/ResultCtaButton/ResultCtaButton.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ResultCtaButton(props) {
+    const { item, callback, className } = props;
+    const clickHandler = (e) => {
+        e.preventDefault();
+        if (callback && typeof callback === 'function') {
+            e.stopPropagation();
+            callback(item);
+        }
+    };
+    return (react_1.default.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: clickHandler }, "Add to Cart"));
+}
+exports.default = ResultCtaButton;

package/lib/cjs/components/ResultFilters/ResultFilters.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("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))];
+    return (react_1.default.createElement("div", { className: 'cio-results-filter-container' },
+        react_1.default.createElement("p", null, "Because you answered"),
+        react_1.default.createElement("div", { className: 'cio-results-filter-options' }, filterValues === null || filterValues === void 0 ? void 0 : filterValues.map((filter) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+}
+exports.default = ResultFilters;