@constructor-io/constructorio-ui-quizzes 1.9.0 → 1.9.2

package/lib/cjs/package.json

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

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

@@ -6,8 +6,6 @@ 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")))));
+    react_1.default.createElement("button", Object.assign({}, rest, propsGetters()), "Skip 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';
@@ -92,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

@@ -9,7 +9,7 @@ const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQ
 const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
 const useAddToFavoritesButtonProps_1 = tslib_1.__importDefault(require("./useAddToFavoritesButtonProps"));
 const useSkipQuestionButtonProps_1 = tslib_1.__importDefault(require("./useSkipQuestionButtonProps"));
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
+const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems) => {
     var _a, _b, _c;
     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);
@@ -33,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) {
@@ -59,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 {

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/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/utils.js

@@ -45,7 +45,15 @@ 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)`,

package/lib/mjs/package.json

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

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

@@ -3,8 +3,6 @@ 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")))));
+    React.createElement("button", { ...rest, ...propsGetters() }, "Skip question"))));
 }
 export default SkipButton;

package/lib/mjs/src/constants.js

@@ -89,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

@@ -6,7 +6,7 @@ import useNextQuestionButtonProps from './useNextQuestionButtonProps';
 import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
 import useAddToFavoritesButtonProps from './useAddToFavoritesButtonProps';
 import useSkipQuestionButtonProps from './useSkipQuestionButtonProps';
-const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
+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);
@@ -29,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) {
@@ -50,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,

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;
 }

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

@@ -6,7 +6,7 @@ import usePrimaryColorStyles from './usePrimaryColorStyles';
 import useQuizEvents from './useQuizEvents';
 import useQuizState from './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
     useConsoleErrors(quizOptions);
     // Quiz Cio Client
@@ -18,7 +18,7 @@ const useQuiz = (quizOptions) => {
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
     const { skipToResults } = quizSessionStorageState;
-    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
+    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState, favoriteItems);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
     useEffect(() => {
         if (skipToResults)

package/lib/mjs/src/utils.js

@@ -39,7 +39,15 @@ ${templateCode}
 export const 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)`,

package/lib/styles.css

@@ -613,11 +613,21 @@
   margin-bottom: 1rem;
 }
 
+.cio-quiz .cio-result-card-favorites-button svg {
+  fill: none;
+}
+
+.cio-quiz .cio-result-card-favorites-button:hover svg {
+  fill: rgb(255, 51, 51);
+  stroke: rgb(255, 51, 51);
+}
+
 .cio-quiz .cio-result-card-favorites-button.favorited svg {
-  fill: red;
+  fill: rgb(255, 51, 51);
+  stroke: transparent;
 }
 
-.cio-quiz .cio-result-card-favorites-button svg:hover {
+.cio-quiz .cio-result-card-favorites-button svg {
   stroke: black;
   stroke-width: 1px;
 }

package/lib/types/src/constants.d.ts

@@ -8,6 +8,7 @@ export declare const cioJsClientDescription = "If you are already using an insta
 export declare const smallContainerDescription = "If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions";
 export declare const changePrimaryColorDescription = "\nIf you would like to use a different primary color, pass a `primaryColor` string in RGB format ('R, G, B').\n\nAccent colors for borders and different states (hover, focus, active) will be calculated automatically based on the primary color you provided.\n\nBy default, the primary color has a value of \"35, 71, 199\" (Constructor Blue).\n\nIn the example below, the `primaryColor` prop has been used to override this color to \"255, 82, 48\" (Orange).\n\n> 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.\n";
 export declare const callbacksDescription = "Pass an `apiKey`, a `quizId`, and `callbacks`";
+export declare const favoritesDescription = "\nAdd `const [favorites, setFavorites] = useState([]);` or equivalent to manage the favorite items' state.\n\nPass favorites as an array to `favoriteItems` in `resultsPageOptions` as a prop to CioQuiz.\n\nPass a callback function to `onAddToFavoritesClick` in `resultsPageOptions` as a prop to CioQuiz to handle favorites state changes to update `favorites` array.    \n";
 export declare enum RequestStates {
     Stale = "STALE",
     Loading = "LOADING",

package/lib/types/src/hooks/usePropsGetters/index.d.ts

@@ -1,7 +1,7 @@
 import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps } from '../../types';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState) => {
+declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, favoriteItems?: string[]) => {
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;

package/lib/types/src/hooks/usePropsGetters/useAddToFavoritesButtonProps.d.ts

@@ -1,2 +1,2 @@
 import { GetAddToFavoritesButtonProps, QuizEventsReturn } from '../../types';
-export default function useAddToFavoritesButtonProps(addToFavorites: QuizEventsReturn.AddToFavorites): GetAddToFavoritesButtonProps;
+export default function useAddToFavoritesButtonProps(addToFavorites: QuizEventsReturn.AddToFavorites, favoriteItems?: string[]): GetAddToFavoritesButtonProps;

package/lib/types/src/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QuizResultData, NextQuestionResponse, QuizResultsResponse, Nullable, QuestionOption, Question } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { QuizResultData, NextQuestionResponse, QuizResultsResponse, QuestionOption, Question } from '@constructor-io/constructorio-client-javascript/lib/types';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { RequestStates } from './constants';
 import { QuestionTypes } from './components/CioQuiz/actions';
@@ -20,6 +20,7 @@ export declare namespace QuizResultsEventsProps {
 }
 export interface ResultsPageOptions extends ResultCardProps {
     numResultsToDisplay?: number;
+    favoriteItems?: string[];
     onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
     onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
     onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
@@ -157,8 +158,8 @@ export interface AddToCartButtonProps {
 }
 export interface QuizImageProps {
     className?: string;
-    src?: Nullable<string>;
-    alt?: Nullable<string>;
+    src?: string;
+    alt?: string;
 }
 export interface QuizResultPropsLink {
     href?: string;

package/package.json

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