@constructor-io/constructorio-ui-quizzes 1.8.3 → 1.9.1

package/lib/cjs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@constructor-io/constructorio-ui-quizzes",
-    "version": "1.8.3",
+    "version": "1.9.1",
     "description": "Constructor.io Quizzes UI library for web applications",
     "author": "constructor.io",
     "license": "MIT",

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

@@ -9,6 +9,7 @@ var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

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

@@ -14,7 +14,7 @@ const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -36,6 +36,7 @@ function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/cjs/src/components/CioQuiz/quizLocalReducer.js

@@ -51,6 +51,27 @@ function quizLocalReducer(state, action) {
                 // We now commit current answers to prevAnswerInputs
                 prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
         }
+        case actions_1.QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case actions_1.QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case actions_1.QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case actions_1.QuestionTypes.SingleSelect:
+                case actions_1.QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return Object.assign(Object.assign({}, state), { 
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
+        }
         case actions_1.QuestionTypes.Back: {
             const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
             return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });

package/lib/cjs/src/components/ControlBar/ControlBar.js

@@ -4,12 +4,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
+const SkipButton_1 = tslib_1.__importDefault(require("../SkipButton/SkipButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ControlBar(props) {
     const { ctaButtonText } = props;
-    const { getNextQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
+    const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
         react_1.default.createElement(BackButton_1.default, null),
-        react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
+        react_1.default.createElement("div", { className: 'cio-question-buttons-group' },
+            react_1.default.createElement(SkipButton_1.default, { propsGetters: getSkipQuestionButtonProps }),
+            react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 exports.default = ControlBar;

package/lib/cjs/src/components/ResultFavoritesButton/ResultFavoritesButton.js

@@ -10,8 +10,8 @@ function ResultFavoritesButton(props) {
         return (
         // eslint-disable-next-line react/button-has-type
         react_1.default.createElement("button", Object.assign({}, getAddToFavoritesButtonProps(item, price)),
-            react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '-2 -2 35 35' },
-                react_1.default.createElement("path", { d: 'M 15 28.925781 L 14.808594 28.8125 C 14.789062 28.800781 12.699219 27.566406 10.136719 25.472656 C 7.765625 23.539062 4.488281 20.453125 2.335938 16.730469 C 0.785156 14.046875 0 11.367188 0 8.765625 C 0 7.632812 0.203125 6.570312 0.601562 5.601562 C 0.988281 4.675781 1.542969 3.855469 2.257812 3.171875 C 3.664062 1.820312 5.589844 1.074219 7.6875 1.074219 C 8.960938 1.074219 10.109375 1.277344 11.105469 1.675781 C 12.054688 2.058594 12.867188 2.617188 13.523438 3.339844 C 14.195312 4.085938 14.691406 4.992188 15 6.027344 C 15.308594 4.992188 15.804688 4.085938 16.476562 3.339844 C 17.132812 2.617188 17.945312 2.058594 18.894531 1.675781 C 19.890625 1.277344 21.039062 1.074219 22.3125 1.074219 C 24.410156 1.074219 26.339844 1.820312 27.742188 3.171875 C 28.457031 3.855469 29.011719 4.675781 29.398438 5.601562 C 29.796875 6.570312 30 7.632812 30 8.765625 C 30 11.371094 29.214844 14.046875 27.664062 16.730469 C 26.710938 18.375 25.460938 20.035156 23.949219 21.664062 C 22.746094 22.960938 21.371094 24.242188 19.863281 25.472656 C 17.300781 27.566406 15.210938 28.800781 15.191406 28.8125 Z M 7.6875 1.832031 C 5.789062 1.832031 4.042969 2.5 2.78125 3.714844 C 1.457031 4.988281 0.757812 6.734375 0.757812 8.765625 C 0.757812 11.234375 1.507812 13.785156 2.992188 16.351562 C 4.144531 18.347656 6.40625 21.449219 10.601562 24.878906 C 12.679688 26.574219 14.433594 27.695312 15 28.042969 C 15.566406 27.695312 17.324219 26.574219 19.398438 24.878906 C 21.714844 22.984375 24.914062 19.96875 27.007812 16.351562 C 28.492188 13.785156 29.242188 11.234375 29.242188 8.765625 C 29.246094 6.734375 28.542969 4.988281 27.21875 3.714844 C 25.957031 2.5 24.210938 1.832031 22.3125 1.832031 C 20.023438 1.832031 18.25 2.507812 17.039062 3.847656 C 15.953125 5.050781 15.378906 6.75 15.378906 8.765625 L 14.621094 8.765625 C 14.621094 6.75 14.046875 5.050781 12.960938 3.847656 C 11.75 2.507812 9.976562 1.832031 7.6875 1.832031 Z M 7.6875 1.832031' }))));
+            react_1.default.createElement("svg", { width: '21', height: '21', viewBox: '0 0 24 24', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
+                react_1.default.createElement("path", { d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' }))));
     }
     return null;
 }

package/lib/cjs/src/components/SkipButton/SkipButton.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"));
+function SkipButton(props) {
+    const { propsGetters, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["propsGetters", "className"]);
+    return (react_1.default.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    react_1.default.createElement("button", Object.assign({}, rest, propsGetters()),
+        "Skip",
+        react_1.default.createElement("span", null, " question")))));
+}
+exports.default = SkipButton;

package/lib/cjs/src/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.callbacksDescription = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.favoritesDescription = exports.callbacksDescription = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -25,6 +25,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -57,6 +58,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,
@@ -90,6 +92,13 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
 exports.callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
+exports.favoritesDescription = `
+Add \`const [favorites, setFavorites] = useState([]);\` or equivalent to manage the favorite items' state.
+
+Pass favorites as an array to \`favoriteItems\` in \`resultsPageOptions\` as a prop to CioQuiz.
+
+Pass a callback function to \`onAddToFavoritesClick\` in \`resultsPageOptions\` as a prop to CioQuiz to handle favorites state changes to update \`favorites\` array.    
+`;
 var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

package/lib/cjs/src/hooks/usePropsGetters/index.js

@@ -8,13 +8,15 @@ const useOpenTextInputProps_1 = tslib_1.__importDefault(require("./useOpenTextIn
 const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQuestionButtonProps"));
 const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
 const useAddToFavoritesButtonProps_1 = tslib_1.__importDefault(require("./useAddToFavoritesButtonProps"));
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
+const useSkipQuestionButtonProps_1 = tslib_1.__importDefault(require("./useSkipQuestionButtonProps"));
+const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems) => {
     var _a, _b, _c;
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(quizAnswerChanged, nextQuestion, (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(quizAnswerChanged, (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question);
     const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = (0, useSkipQuestionButtonProps_1.default)(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
     const getResetQuizButtonProps = (0, react_1.useCallback)((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -31,7 +33,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         type: 'button',
         onClick: (e) => addToCart(e, result, price),
     }), [addToCart]);
-    const getAddToFavoritesButtonProps = (0, useAddToFavoritesButtonProps_1.default)(addToFavorites);
+    const getAddToFavoritesButtonProps = (0, useAddToFavoritesButtonProps_1.default)(addToFavorites, favoriteItems);
     const quizResultClickDown = (0, react_1.useCallback)((event, result, position) => {
         if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
             if (resultClick) {
@@ -57,16 +59,16 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
     const getQuizImageProps = (0, react_1.useCallback)(() => {
         var _a, _b, _c, _d, _e, _f;
         return ({
-            src: (_c = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.images) === null || _c === void 0 ? void 0 : _c.primary_url,
-            alt: (_f = (_e = (_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question) === null || _e === void 0 ? void 0 : _e.images) === null || _f === void 0 ? void 0 : _f.primary_alt,
+            src: ((_c = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.images) === null || _c === void 0 ? void 0 : _c.primary_url) || undefined,
+            alt: ((_f = (_e = (_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question) === null || _e === void 0 ? void 0 : _e.images) === null || _f === void 0 ? void 0 : _f.primary_alt) || undefined,
         });
     }, [quizApiState.quizCurrentQuestion]);
     const getSelectQuestionImageProps = (0, react_1.useCallback)((option) => {
         var _a, _b;
         return ({
             className: 'cio-question-option-image',
-            src: (_a = option === null || option === void 0 ? void 0 : option.images) === null || _a === void 0 ? void 0 : _a.primary_url,
-            alt: (_b = option === null || option === void 0 ? void 0 : option.images) === null || _b === void 0 ? void 0 : _b.primary_alt,
+            src: ((_a = option === null || option === void 0 ? void 0 : option.images) === null || _a === void 0 ? void 0 : _a.primary_url) || undefined,
+            alt: ((_b = option === null || option === void 0 ? void 0 : option.images) === null || _b === void 0 ? void 0 : _b.primary_alt) || undefined,
         });
     }, []);
     return {
@@ -83,6 +85,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 exports.default = usePropsGetters;

package/lib/cjs/src/hooks/usePropsGetters/useAddToFavoritesButtonProps.js

@@ -1,25 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useAddToFavoritesButtonProps(addToFavorites) {
-    const [favorited, setFavorited] = (0, react_1.useState)({});
-    const toggleIdFavorited = (0, react_1.useCallback)((id) => {
-        setFavorited(Object.assign(Object.assign({}, favorited), { [id]: !(favorited === null || favorited === void 0 ? void 0 : favorited[id]) }));
-    }, [favorited]);
-    const getAddToFavoritesButtonProps = (0, react_1.useCallback)((result, price) => {
-        var _a;
-        return ({
-            className: `${'cio-result-card-favorites-button'} ${(favorited === null || favorited === void 0 ? void 0 : favorited[((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id) || '0']) ? 'favorited' : ''}`,
-            onClick: (e) => {
-                var _a, _b;
-                addToFavorites(e, result, price, !(favorited === null || favorited === void 0 ? void 0 : favorited[((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id) || '0']));
-                toggleIdFavorited(((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.id) || '0');
-            },
-            type: 'button',
-        });
-    }, 
+function useAddToFavoritesButtonProps(addToFavorites, favoriteItems) {
+    const isResultFavorited = (result) => { var _a, _b; return ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id) && (favoriteItems === null || favoriteItems === void 0 ? void 0 : favoriteItems.includes((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.id)); };
+    const getAddToFavoritesButtonProps = (0, react_1.useCallback)((result, price) => ({
+        className: `${'cio-result-card-favorites-button'} ${isResultFavorited(result) ? 'favorited' : ''}`,
+        onClick: (e) => {
+            addToFavorites(e, result, price, !isResultFavorited(result));
+        },
+        type: 'button',
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [favorited, addToFavorites]);
+    [addToFavorites]);
     return getAddToFavoritesButtonProps;
 }
 exports.default = useAddToFavoritesButtonProps;

package/lib/cjs/src/hooks/usePropsGetters/useSkipQuestionButtonProps.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        const currentQuestionId = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id;
+        const isHidden = currentQuestionId &&
+            (((_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.isCoverQuestion) ||
+                !((_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question.is_skippable));
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}
+exports.default = useSkipQuestionButtonProps;

package/lib/cjs/src/hooks/useQuiz.js

@@ -9,7 +9,7 @@ const usePrimaryColorStyles_1 = tslib_1.__importDefault(require("./usePrimaryCol
 const useQuizEvents_1 = tslib_1.__importDefault(require("./useQuizEvents"));
 const useQuizState_1 = tslib_1.__importDefault(require("./useQuizState"));
 const useQuiz = (quizOptions) => {
-    const { apiKey, cioJsClient, primaryColor } = quizOptions;
+    const { apiKey, cioJsClient, primaryColor, resultsPageOptions: { favoriteItems }, } = quizOptions;
     // Log console errors for required parameters quizId and resultsPageOptions
     (0, useConsoleErrors_1.default)(quizOptions);
     // Quiz Cio Client
@@ -21,7 +21,7 @@ const useQuiz = (quizOptions) => {
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
     const { skipToResults } = quizSessionStorageState;
-    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState);
+    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState, favoriteItems);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
     (0, react_1.useEffect)(() => {
         if (skipToResults)

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

@@ -11,6 +11,7 @@ const useQuizResetClick_1 = tslib_1.__importDefault(require("./useQuizResetClick
 const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrateQuizLocalState"));
 const utils_1 = require("../../utils");
 const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToFavorites"));
+const useQuizSkipClick_1 = tslib_1.__importDefault(require("./useQuizSkipClick"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -19,6 +20,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizNextQuestion);
+    const skipQuestion = (0, useQuizSkipClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -39,6 +41,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),

package/lib/cjs/src/hooks/useQuizEvents/useQuizSkipClick.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const utils_1 = require("../../utils");
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = (0, react_1.useCallback)(() => {
+        var _a;
+        const currentQuestion = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+        const currentQuestionId = currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!((currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'cover')) {
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = Object.assign(Object.assign({}, quizLocalState.answerInputs[currentQuestionId]), { value: (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'open' ? 'false' : null });
+            if (currentQuestion && (0, utils_1.isFunction)(onQuizSkipQuestion)) {
+                onQuizSkipQuestion(Object.assign(Object.assign({}, currentQuestion), { answer: currentAnswerInput }));
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+exports.default = useQuizSkipClick;

package/lib/cjs/src/stories/Quiz/tests/mocks.js

@@ -153,6 +153,7 @@ const useMockContextValue = (question) => {
         getAddToFavoritesButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-favorites-button' })),
         getHydrateQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
         getNextQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getSkipQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-skip-button' })),
         getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
         getQuizImageProps: () => mockElementProps,
         getQuizResultButtonProps: () => mockElementProps,

package/lib/cjs/src/utils.js

@@ -45,9 +45,18 @@ exports.getStoryParams = getStoryParams;
 exports.functionStrings = {
     onAddToCartClick: `(item) => console.dir(item)`,
     onQuizResultClick: `(result, position) => console.dir(result, position)`,
-    onAddToFavoritesClick: `(item) => console.dir(item)`,
+    onAddToFavoritesClick: `(result) => {
+      if (result.data) {
+        if (!favorites.includes(result.data.id)) {
+          setFavorites([...favorites, result.data.id]);
+        } else {
+          setFavorites(favorites.filter((id) => id !== result.data?.id));
+        }
+      }
+    }`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
+    onQuizSkipQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 const stringifyWithDefaults = (obj) => {

package/lib/mjs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@constructor-io/constructorio-ui-quizzes",
-    "version": "1.8.3",
+    "version": "1.9.1",
     "description": "Constructor.io Quizzes UI library for web applications",
     "author": "constructor.io",
     "license": "MIT",

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

@@ -6,6 +6,7 @@ export var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

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

@@ -10,7 +10,7 @@ import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -32,6 +32,7 @@ export default function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/mjs/src/components/CioQuiz/quizLocalReducer.js

@@ -74,6 +74,31 @@ export default function quizLocalReducer(state, action) {
                 isQuizCompleted: false,
             };
         }
+        case QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case QuestionTypes.SingleSelect:
+                case QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return {
+                ...state,
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs,
+                answers: newAnswers,
+                isQuizCompleted: false,
+            };
+        }
         case QuestionTypes.Back: {
             const prevAnswerInputs = { ...state.prevAnswerInputs };
             return {

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

@@ -1,12 +1,15 @@
 import React, { useContext } from 'react';
 import BackButton from '../BackButton/BackButton';
 import CTAButton from '../CTAButton/CTAButton';
+import SkipButton from '../SkipButton/SkipButton';
 import QuizContext from '../CioQuiz/context';
 function ControlBar(props) {
     const { ctaButtonText } = props;
-    const { getNextQuestionButtonProps } = useContext(QuizContext);
+    const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-question-buttons-container' },
         React.createElement(BackButton, null),
-        React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
+        React.createElement("div", { className: 'cio-question-buttons-group' },
+            React.createElement(SkipButton, { propsGetters: getSkipQuestionButtonProps }),
+            React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 export default ControlBar;

package/lib/mjs/src/components/ResultFavoritesButton/ResultFavoritesButton.js

@@ -7,8 +7,8 @@ export default function ResultFavoritesButton(props) {
         return (
         // eslint-disable-next-line react/button-has-type
         React.createElement("button", { ...getAddToFavoritesButtonProps(item, price) },
-            React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '-2 -2 35 35' },
-                React.createElement("path", { d: 'M 15 28.925781 L 14.808594 28.8125 C 14.789062 28.800781 12.699219 27.566406 10.136719 25.472656 C 7.765625 23.539062 4.488281 20.453125 2.335938 16.730469 C 0.785156 14.046875 0 11.367188 0 8.765625 C 0 7.632812 0.203125 6.570312 0.601562 5.601562 C 0.988281 4.675781 1.542969 3.855469 2.257812 3.171875 C 3.664062 1.820312 5.589844 1.074219 7.6875 1.074219 C 8.960938 1.074219 10.109375 1.277344 11.105469 1.675781 C 12.054688 2.058594 12.867188 2.617188 13.523438 3.339844 C 14.195312 4.085938 14.691406 4.992188 15 6.027344 C 15.308594 4.992188 15.804688 4.085938 16.476562 3.339844 C 17.132812 2.617188 17.945312 2.058594 18.894531 1.675781 C 19.890625 1.277344 21.039062 1.074219 22.3125 1.074219 C 24.410156 1.074219 26.339844 1.820312 27.742188 3.171875 C 28.457031 3.855469 29.011719 4.675781 29.398438 5.601562 C 29.796875 6.570312 30 7.632812 30 8.765625 C 30 11.371094 29.214844 14.046875 27.664062 16.730469 C 26.710938 18.375 25.460938 20.035156 23.949219 21.664062 C 22.746094 22.960938 21.371094 24.242188 19.863281 25.472656 C 17.300781 27.566406 15.210938 28.800781 15.191406 28.8125 Z M 7.6875 1.832031 C 5.789062 1.832031 4.042969 2.5 2.78125 3.714844 C 1.457031 4.988281 0.757812 6.734375 0.757812 8.765625 C 0.757812 11.234375 1.507812 13.785156 2.992188 16.351562 C 4.144531 18.347656 6.40625 21.449219 10.601562 24.878906 C 12.679688 26.574219 14.433594 27.695312 15 28.042969 C 15.566406 27.695312 17.324219 26.574219 19.398438 24.878906 C 21.714844 22.984375 24.914062 19.96875 27.007812 16.351562 C 28.492188 13.785156 29.242188 11.234375 29.242188 8.765625 C 29.246094 6.734375 28.542969 4.988281 27.21875 3.714844 C 25.957031 2.5 24.210938 1.832031 22.3125 1.832031 C 20.023438 1.832031 18.25 2.507812 17.039062 3.847656 C 15.953125 5.050781 15.378906 6.75 15.378906 8.765625 L 14.621094 8.765625 C 14.621094 6.75 14.046875 5.050781 12.960938 3.847656 C 11.75 2.507812 9.976562 1.832031 7.6875 1.832031 Z M 7.6875 1.832031' }))));
+            React.createElement("svg", { width: '21', height: '21', viewBox: '0 0 24 24', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
+                React.createElement("path", { d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' }))));
     }
     return null;
 }

package/lib/mjs/src/components/SkipButton/SkipButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+function SkipButton(props) {
+    const { propsGetters, className = 'cio-button-container', ...rest } = props;
+    return (React.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    React.createElement("button", { ...rest, ...propsGetters() },
+        "Skip",
+        React.createElement("span", null, " question")))));
+}
+export default SkipButton;

package/lib/mjs/src/constants.js

@@ -22,6 +22,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -54,6 +55,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,
@@ -87,6 +89,13 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
 export const callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
+export const favoritesDescription = `
+Add \`const [favorites, setFavorites] = useState([]);\` or equivalent to manage the favorite items' state.
+
+Pass favorites as an array to \`favoriteItems\` in \`resultsPageOptions\` as a prop to CioQuiz.
+
+Pass a callback function to \`onAddToFavoritesClick\` in \`resultsPageOptions\` as a prop to CioQuiz to handle favorites state changes to update \`favorites\` array.    
+`;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

package/lib/mjs/src/hooks/usePropsGetters/index.js

@@ -5,12 +5,14 @@ import useOpenTextInputProps from './useOpenTextInputProps';
 import useNextQuestionButtonProps from './useNextQuestionButtonProps';
 import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
 import useAddToFavoritesButtonProps from './useAddToFavoritesButtonProps';
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+import useSkipQuestionButtonProps from './useSkipQuestionButtonProps';
+const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems) => {
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = useOpenTextInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = useCoverQuestionProps(quizAnswerChanged, quizApiState.quizCurrentQuestion?.next_question);
     const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = useSkipQuestionButtonProps(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
     const getResetQuizButtonProps = useCallback((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -27,7 +29,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         type: 'button',
         onClick: (e) => addToCart(e, result, price),
     }), [addToCart]);
-    const getAddToFavoritesButtonProps = useAddToFavoritesButtonProps(addToFavorites);
+    const getAddToFavoritesButtonProps = useAddToFavoritesButtonProps(addToFavorites, favoriteItems);
     const quizResultClickDown = useCallback((event, result, position) => {
         if (event?.key === ' ' || event?.key === 'Enter') {
             if (resultClick) {
@@ -48,13 +50,13 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         onKeyDown: (event) => quizResultClickDown(event, result, position),
     }), [quizResultClickDown, resultClick]);
     const getQuizImageProps = useCallback(() => ({
-        src: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_url,
-        alt: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_alt,
+        src: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_url || undefined,
+        alt: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_alt || undefined,
     }), [quizApiState.quizCurrentQuestion]);
     const getSelectQuestionImageProps = useCallback((option) => ({
         className: 'cio-question-option-image',
-        src: option?.images?.primary_url,
-        alt: option?.images?.primary_alt,
+        src: option?.images?.primary_url || undefined,
+        alt: option?.images?.primary_alt || undefined,
     }), []);
     return {
         getOpenTextInputProps,
@@ -70,6 +72,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 export default usePropsGetters;

package/lib/mjs/src/hooks/usePropsGetters/useAddToFavoritesButtonProps.js

@@ -1,18 +1,14 @@
-import { useState, useCallback } from 'react';
-export default function useAddToFavoritesButtonProps(addToFavorites) {
-    const [favorited, setFavorited] = useState({});
-    const toggleIdFavorited = useCallback((id) => {
-        setFavorited({ ...favorited, [id]: !favorited?.[id] });
-    }, [favorited]);
+import { useCallback } from 'react';
+export default function useAddToFavoritesButtonProps(addToFavorites, favoriteItems) {
+    const isResultFavorited = (result) => result?.data?.id && favoriteItems?.includes(result?.data?.id);
     const getAddToFavoritesButtonProps = useCallback((result, price) => ({
-        className: `${'cio-result-card-favorites-button'} ${favorited?.[result?.data?.id || '0'] ? 'favorited' : ''}`,
+        className: `${'cio-result-card-favorites-button'} ${isResultFavorited(result) ? 'favorited' : ''}`,
         onClick: (e) => {
-            addToFavorites(e, result, price, !favorited?.[result?.data?.id || '0']);
-            toggleIdFavorited(result?.data?.id || '0');
+            addToFavorites(e, result, price, !isResultFavorited(result));
         },
         type: 'button',
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [favorited, addToFavorites]);
+    [addToFavorites]);
     return getAddToFavoritesButtonProps;
 }