@constructor-io/constructorio-ui-quizzes 1.4.7 → 1.5.1

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

@@ -5,13 +5,15 @@ const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("./context"));
 const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
 const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
+const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 const constants_1 = require("../../constants");
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 const utils_1 = require("../../utils");
 function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    var _a;
+    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, 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;
     (0, react_1.useEffect)(() => {
@@ -32,6 +34,7 @@ function CioQuiz(props) {
         cioClient,
         state,
         getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
@@ -43,19 +46,27 @@ function CioQuiz(props) {
         getResetQuizButtonProps,
         getSelectInputProps,
         customClickItemCallback: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onQuizResultClick),
+        customAddToFavoritesCallback: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onAddToFavoritesClick),
         primaryColorStyles,
     };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
-        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+        return (react_1.default.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             react_1.default.createElement(Spinner_1.default, null)));
     }
+    const questionData = (_a = state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+    const questionType = questionData === null || questionData === void 0 ? void 0 : questionData.type;
+    const questionImages = questionData === null || questionData === void 0 ? void 0 : questionData.images;
+    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === constants_1.RequestStates.Success) {
         return (react_1.default.createElement("div", { className: 'cio-quiz' },
+            displayBackgroundImage && (0, utils_1.renderImages)(questionImages, 'cio-question-background-image'),
             react_1.default.createElement("style", null,
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null)))));
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(QuizQuestions_1.default, null),
+                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }
     return null;
 }

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

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function CoverTypeQuestion() {
     var _a;
     const { state } = (0, react_1.useContext)(context_1.default);
@@ -23,8 +22,7 @@ function CoverTypeQuestion() {
             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 === 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, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }))));
     }
     return null;
 }

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

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function OpenTextQuestion() {
     var _a;
     const { state, getOpenTextInputProps } = (0, react_1.useContext)(context_1.default);
@@ -24,8 +23,7 @@ function OpenTextQuestion() {
             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 }),
-                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())))));
     }
     return null;
 }

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

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/ResultCtaButton"));
+const ResultFavoritesButton_1 = tslib_1.__importDefault(require("../ResultFavoritesButton/ResultFavoritesButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
     var _a, _b, _c, _d;
     const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, } = props;
-    const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = (0, react_1.useContext)(context_1.default);
+    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps, } = (0, react_1.useContext)(context_1.default);
     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 ratingCount = ratingCountKey && ((_c = result === null || result === void 0 ? void 0 : result.data) === null || _c === void 0 ? void 0 : _c[ratingCountKey]);
@@ -39,6 +40,7 @@ function ResultCard(props) {
     const resultCardContentWithoutLink = () => getQuizResultButtonProps && (react_1.default.createElement("div", Object.assign({}, getQuizResultButtonProps({ result, position: resultPosition, type: 'button' })), resultCardContent()));
     const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));
     return (react_1.default.createElement("div", { className: 'cio-result-card' },
+        customAddToFavoritesCallback && (react_1.default.createElement(ResultFavoritesButton_1.default, { item: result, price: salePrice || regularPrice })),
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));
 }

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

@@ -0,0 +1,18 @@
+"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"));
+function ResultFavoritesButton(props) {
+    const { item, price } = props;
+    const { getAddToFavoritesButtonProps } = (0, react_1.useContext)(context_1.default);
+    if (getAddToFavoritesButtonProps) {
+        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' }))));
+    }
+    return null;
+}
+exports.default = ResultFavoritesButton;

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

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 const actions_1 = require("../CioQuiz/actions");
 function SelectTypeQuestion() {
     var _a;
@@ -29,8 +28,7 @@ function SelectTypeQuestion() {
                     ? '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) => getSelectInputProps && (react_1.default.createElement("div", Object.assign({}, getSelectInputProps(option)),
                 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, { ctaButtonText: (question === null || question === void 0 ? void 0 : question.cta_text) || 'Continue' })));
+                react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value)))))));
     }
     return null;
 }

package/lib/cjs/constants.js

@@ -14,6 +14,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
 - To use this component, \`quizId\`, \`resultsPageOptions\`, and one of \`apiKey\` or \`cioJsClient\` are required.
 - \`resultsPageOptions\` lets you configure the results page
   - \`onAddToCartClick\` is a callback function that will be called when the "Add to cart" button is clicked
+  - \`onAddToFavoritesClick\` is an optional callback function that will be called when the "Add To Favorites" heart icon is clicked
   - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
   - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
   - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
@@ -49,6 +50,7 @@ const {
   state: QuizReturnState, // Quiz state
   events: [{...}], // array of quiz events
   getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,
+  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,
   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,

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

@@ -7,9 +7,10 @@ const useCoverQuestionProps_1 = tslib_1.__importDefault(require("./useCoverQuest
 const useOpenTextInputProps_1 = tslib_1.__importDefault(require("./useOpenTextInputProps"));
 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) => {
     var _a, _b, _c;
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, 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);
@@ -30,6 +31,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         type: 'button',
         onClick: (e) => addToCart(e, result, price),
     }), [addToCart]);
+    const getAddToFavoritesButtonProps = (0, useAddToFavoritesButtonProps_1.default)(addToFavorites);
     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) {
@@ -78,6 +80,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getResetQuizButtonProps,
         getHydrateQuizButtonProps,
         getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
     };

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

@@ -0,0 +1,25 @@
+"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',
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [favorited, addToFavorites]);
+    return getAddToFavoritesButtonProps;
+}
+exports.default = useAddToFavoritesButtonProps;

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

@@ -10,10 +10,11 @@ const useQuizNextClick_1 = tslib_1.__importDefault(require("./useQuizNextClick")
 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 useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, hasQuizStoredState, quizStateKey, quizLocalState, } = quizState;
     const { resultsPageOptions } = quizOptions;
-    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
+    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
     // Quiz answer change
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
@@ -24,6 +25,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const addToCart = (0, useQuizAddToCart_1.default)(cioClient, quizApiState, onAddToCartClick);
     // Quiz result click callback
     const resultClick = (0, useQuizResultClick_1.default)(cioClient, quizApiState, onQuizResultClick);
+    const addToFavorites = (0, useQuizAddToFavorites_1.default)(cioClient, quizApiState, onAddToFavoritesClick);
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
@@ -32,6 +34,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizStateKey, dispatchLocalState);
     return {
         addToCart,
+        addToFavorites,
         resultClick,
         quizAnswerChanged,
         previousQuestion,

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

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

package/lib/cjs/services/index.js

@@ -53,7 +53,9 @@ const trackQuizResultClick = (cioClient, quizResults, result, position) => {
     }
 };
 exports.trackQuizResultClick = trackQuizResultClick;
-const trackQuizConversion = (cioClient, quizResults, result, price) => {
+const trackQuizConversion = (cioClient, quizResults, result, price, type
+// eslint-disable-next-line max-params
+) => {
     var _a, _b;
     if (quizResults.request) {
         const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
@@ -66,6 +68,7 @@ const trackQuizConversion = (cioClient, quizResults, result, price) => {
             section,
             variationId: (_b = result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
             revenue: (price && String(price)) || undefined,
+            type,
         });
     }
 };

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

@@ -144,7 +144,8 @@ const useMockContextValue = (question) => {
         getCoverQuestionProps,
         getOpenTextInputProps,
         getSelectInputProps,
-        getAddToCartButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getAddToCartButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-cta-button' })),
+        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' })),
         getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
@@ -158,6 +159,7 @@ const useMockContextValue = (question) => {
             '--primary-color-l': '14',
         },
         customClickItemCallback: false,
+        customAddToFavoritesCallback: true,
     };
 };
 exports.useMockContextValue = useMockContextValue;

package/lib/cjs/utils.js

@@ -45,6 +45,7 @@ exports.getStoryParams = getStoryParams;
 exports.functionStrings = {
     onAddToCartClick: `(item) => console.dir(item)`,
     onQuizResultClick: `(result, position) => console.dir(result, position)`,
+    onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     cioJsClient: `cioJsClient`,
 };

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

@@ -2,13 +2,14 @@ import React, { useEffect, useState } from 'react';
 import QuizContext from './context';
 import QuizQuestions from '../QuizQuestions';
 import ResultContainer from '../ResultContainer/ResultContainer';
+import ControlBar from '../ControlBar/ControlBar';
 import { RequestStates } from '../../constants';
 import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
-import { convertPrimaryColorsToString } from '../../utils';
+import { convertPrimaryColorsToString, renderImages } from '../../utils';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     useEffect(() => {
@@ -29,6 +30,7 @@ export default function CioQuiz(props) {
         cioClient,
         state,
         getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
@@ -40,19 +42,27 @@ export default function CioQuiz(props) {
         getResetQuizButtonProps,
         getSelectInputProps,
         customClickItemCallback: !!resultsPageOptions?.onQuizResultClick,
+        customAddToFavoritesCallback: !!resultsPageOptions?.onAddToFavoritesClick,
         primaryColorStyles,
     };
     if (state.quiz.requestState === RequestStates.Loading) {
-        return (React.createElement("div", { className: 'cio-quiz' },
+        return (React.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             React.createElement(Spinner, null)));
     }
+    const questionData = state.quiz.currentQuestion?.next_question;
+    const questionType = questionData?.type;
+    const questionImages = questionData?.images;
+    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz' },
+            displayBackgroundImage && renderImages(questionImages, 'cio-question-background-image'),
             React.createElement("style", null,
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && React.createElement(QuizQuestions, null)))));
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+                React.createElement(QuizQuestions, null),
+                React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
     }
     return null;
 }

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

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuizContext from '../CioQuiz/context';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 export default function CoverTypeQuestion() {
     const { state } = useContext(QuizContext);
     let question;
@@ -19,8 +18,7 @@ export default function CoverTypeQuestion() {
             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(ControlBar, { ctaButtonText: question?.cta_text }))));
+                React.createElement(QuestionDescription, { description: question.description }))));
     }
     return null;
 }

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

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import QuizContext from '../CioQuiz/context';
-import ControlBar from '../ControlBar/ControlBar';
 function OpenTextQuestion() {
     const { state, getOpenTextInputProps } = useContext(QuizContext);
     let question;
@@ -20,8 +19,7 @@ function OpenTextQuestion() {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }),
-                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
+                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }))));
     }
     return null;
 }

package/lib/mjs/components/ResultCard/ResultCard.js

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
+import ResultFavoritesButton from '../ResultFavoritesButton/ResultFavoritesButton';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCard(props) {
     const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, } = props;
-    const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = useContext(QuizContext);
+    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps, } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
     const ratingCount = ratingCountKey && result?.data?.[ratingCountKey];
@@ -32,6 +33,7 @@ export default function ResultCard(props) {
     const resultCardContentWithoutLink = () => getQuizResultButtonProps && (React.createElement("div", { ...getQuizResultButtonProps({ result, position: resultPosition, type: 'button' }) }, resultCardContent()));
     const resultCardContentWithLink = () => getQuizResultLinkProps && (React.createElement("a", { className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank', ...getQuizResultLinkProps({ result, position: resultPosition, type: 'link' }) }, resultCardContent()));
     return (React.createElement("div", { className: 'cio-result-card' },
+        customAddToFavoritesCallback && (React.createElement(ResultFavoritesButton, { item: result, price: salePrice || regularPrice })),
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));
 }

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

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+export default function ResultFavoritesButton(props) {
+    const { item, price } = props;
+    const { getAddToFavoritesButtonProps } = useContext(QuizContext);
+    if (getAddToFavoritesButtonProps) {
+        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' }))));
+    }
+    return null;
+}

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import QuizContext from '../CioQuiz/context';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 import { QuestionTypes } from '../CioQuiz/actions';
 function SelectTypeQuestion() {
     const { state, getSelectInputProps } = useContext(QuizContext);
@@ -25,8 +24,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, question?.options?.map((option) => getSelectInputProps && (React.createElement("div", { ...getSelectInputProps(option) },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
-                React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { ctaButtonText: question?.cta_text || 'Continue' })));
+                React.createElement("div", { className: 'cio-question-option-value' }, option?.value)))))));
     }
     return null;
 }

package/lib/mjs/constants.js

@@ -11,6 +11,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
 - To use this component, \`quizId\`, \`resultsPageOptions\`, and one of \`apiKey\` or \`cioJsClient\` are required.
 - \`resultsPageOptions\` lets you configure the results page
   - \`onAddToCartClick\` is a callback function that will be called when the "Add to cart" button is clicked
+  - \`onAddToFavoritesClick\` is an optional callback function that will be called when the "Add To Favorites" heart icon is clicked
   - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
   - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
   - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
@@ -46,6 +47,7 @@ const {
   state: QuizReturnState, // Quiz state
   events: [{...}], // array of quiz events
   getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,
+  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,
   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,

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

@@ -4,8 +4,9 @@ import useCoverQuestionProps from './useCoverQuestionProps';
 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, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, 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);
@@ -26,6 +27,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         type: 'button',
         onClick: (e) => addToCart(e, result, price),
     }), [addToCart]);
+    const getAddToFavoritesButtonProps = useAddToFavoritesButtonProps(addToFavorites);
     const quizResultClickDown = useCallback((event, result, position) => {
         if (event?.key === ' ' || event?.key === 'Enter') {
             if (resultClick) {
@@ -65,6 +67,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getResetQuizButtonProps,
         getHydrateQuizButtonProps,
         getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
     };

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

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

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

@@ -7,10 +7,11 @@ import useQuizNextClick from './useQuizNextClick';
 import useQuizResetClick from './useQuizResetClick';
 import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
+import useQuizAddToFavorites from './useQuizAddToFavorites';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, hasQuizStoredState, quizStateKey, quizLocalState, } = quizState;
     const { resultsPageOptions } = quizOptions;
-    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded } = resultsPageOptions;
+    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
     // Quiz answer change
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
@@ -21,6 +22,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const addToCart = useQuizAddToCart(cioClient, quizApiState, onAddToCartClick);
     // Quiz result click callback
     const resultClick = useQuizResultClick(cioClient, quizApiState, onQuizResultClick);
+    const addToFavorites = useQuizAddToFavorites(cioClient, quizApiState, onAddToFavoritesClick);
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
@@ -29,6 +31,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const hydrateQuizLocalState = useHydrateQuizLocalState(quizStateKey, dispatchLocalState);
     return {
         addToCart,
+        addToFavorites,
         resultClick,
         quizAnswerChanged,
         previousQuestion,

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

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