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

package/lib/mjs/services/index.js

@@ -43,7 +43,9 @@ export const trackQuizResultClick = (cioClient, quizResults, result, position) =
         });
     }
 };
-export const trackQuizConversion = (cioClient, quizResults, result, price) => {
+export const trackQuizConversion = (cioClient, quizResults, result, price, type
+// eslint-disable-next-line max-params
+) => {
     if (quizResults.request) {
         const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
         cioClient?.tracker.trackQuizConversion({
@@ -55,6 +57,7 @@ export const trackQuizConversion = (cioClient, quizResults, result, price) => {
             section,
             variationId: result.data?.variation_id,
             revenue: (price && String(price)) || undefined,
+            type,
         });
     }
 };

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

@@ -155,7 +155,14 @@ export const useMockContextValue = (question) => {
         getCoverQuestionProps,
         getOpenTextInputProps,
         getSelectInputProps,
-        getAddToCartButtonProps: () => ({ ...mockElementProps, className: 'cio-question-cta-button' }),
+        getAddToCartButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-result-card-cta-button',
+        }),
+        getAddToFavoritesButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-result-card-favorites-button',
+        }),
         getHydrateQuizButtonProps: () => ({
             ...mockElementProps,
             className: 'cio-question-cta-button',
@@ -178,5 +185,6 @@ export const useMockContextValue = (question) => {
             '--primary-color-l': '14',
         },
         customClickItemCallback: false,
+        customAddToFavoritesCallback: true,
     };
 };

package/lib/mjs/utils.js

@@ -39,6 +39,7 @@ ${templateCode}
 export const 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/styles.css

@@ -57,13 +57,17 @@
   min-height: 100%;
   height: 100%;
   overflow: auto;
-  display: flex;
-  justify-content: center;
   background-color: #ffffff;
   color: var(--gray-dust-500);
   font-size: 16px;
 }
 
+/* Container for the loading spinner */
+.cio-quiz.cio-quiz-loading {
+  display: flex;
+  justify-content: center;
+}
+
 .cio-quiz button {
   cursor: pointer;
 }
@@ -77,7 +81,7 @@
   width: 100%;
   position: relative;
   align-self: start;
-  min-height: calc(100% - 2rem); /* Full height - margin */
+  height: calc(100% - 2rem - var(--bottom-bar-height)); /* Full height - margin - control bar */
 }
 .cio-container--with-image {
   display: flex;
@@ -86,7 +90,15 @@
   padding-bottom: var(--bottom-bar-height);
   position: relative;
   align-self: start;
-  min-height: 100%;
+  height: calc(100% - var(--bottom-bar-height)); /* Full height - margin - control bar */
+}
+
+/* Background image */
+.cio-question-background-image {
+  height: calc(100% - 4px);
+  width: 100%;
+  position: absolute;
+  z-index: -1;
 }
 
 /* Session Prompt Modal */
@@ -163,8 +175,9 @@
   width: 100%;
   object-fit: cover;
   max-height: var(--container-image-small-height);
-  height: var(--container-image-small-height); /* Fixed height for layout shifts*/
+  height: var(--container-image-small-height); /* Fixed height for layout shifts */
   display: flex;
+  align-self: stretch;
 }
 
 /* Input */
@@ -192,7 +205,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: absolute;
+  position: sticky;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -202,7 +215,7 @@
 .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
-  border: 1px solid var(--primary-color);
+  border: 2px solid var(--primary-color);
   border-radius: 4px;
   height: 3rem;
   font-size: 1rem;
@@ -280,6 +293,7 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
+  background-color: white;
 }
 .cio-question-option-container.selected {
   outline: 3px solid var(--primary-color-variant-600);
@@ -302,12 +316,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: start;
   max-width: 1200px;
   padding: 1rem;
   margin-top: 2rem;
-  min-height: calc(100% - 3rem); /* Full height - padding - margin */
+  min-height: calc(100% - 2rem - var(--bottom-bar-height)); /* Full height - padding - margin */
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-question-options-container {
   display: flex;
@@ -337,6 +352,7 @@
   width: 100%;
   margin: auto;
   cursor: pointer;
+  background-color: white;
 }
 
 /* Option Image */
@@ -383,6 +399,8 @@
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-results-title {
   margin-top: 0;
@@ -510,10 +528,28 @@
 .cio-result-card-rating-score {
   margin-right: 5px;
 }
-.cio-result-card-discount {
-  font-weight: normal;
-  font-size: .9em;
-  margin-top: 4px;
+
+/* Result Favorites Button*/
+.cio-result-card-favorites-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  width: 25px;
+  margin-left: auto;
+  margin-bottom: 1rem;
+}
+
+.cio-result-card-favorites-button.favorited svg{
+  fill: red;
+}
+
+.cio-result-card-favorites-button svg:hover {
+  stroke: black;
+  stroke-width: 1px;
 }
 
 /* Result CTA Button */
@@ -521,7 +557,7 @@
   padding: 0.75rem 2.5rem;
   height: 3rem;
   background: var(--primary-color);
-  border: 1px solid var(--primary-color);
+  border: 2px solid var(--primary-color);
   border-radius: 4px;
   color: #ffffff;
   font-size: 1rem;
@@ -579,7 +615,6 @@
 
   /* Image */
   .cio-question-image-container {
-    height: 100%;
     flex-basis: 50%;
     flex-shrink: 0;
     border-radius: 4px;
@@ -628,6 +663,7 @@
   .cio-container {
     align-items: center;
     margin-top: 0;
+    height: calc(100% - var(--bottom-bar-height)); /* Full height - control bar */
   }
   .cio-container--with-image {
     padding: 6% 2%;
@@ -646,10 +682,8 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 100%;
-  }
-  .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
+    height: unset;
   }
 
   /* Content */
@@ -667,14 +701,6 @@
     margin-bottom: 2rem;
   }
 
-  /* CTA Button Component */
-  .cio-question-buttons-container {
-    position: sticky;
-    padding: 0;
-    margin: 0;
-    align-items: center;
-  }
-
   /* Cover Component */
   .cio-cover-question-container--with-image {
     padding: 0;
@@ -691,9 +717,11 @@
   }
   .cio-select-question-container {
     justify-content: center;
-    margin: 0;
+    margin-bottom: 0;
+    margin-top: 0;
     padding: 2rem;
     padding-bottom: 0;
+    min-height: calc(100% - var(--bottom-bar-height)); /* Full height - padding - margin */
   }
   .cio-question-option-container {
     width: calc(25% - 13px);

package/lib/types/components/CioQuiz/context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
@@ -13,10 +13,12 @@ export interface QuizContextValue {
     getResetQuizButtonProps: GetResetQuizButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
+    getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
     primaryColorStyles: PrimaryColorStyles;
     customClickItemCallback: boolean;
+    customAddToFavoritesCallback: boolean;
 }
 declare const _default: React.Context<Partial<QuizContextValue>>;
 export default _default;

package/lib/types/components/ResultFavoritesButton/ResultFavoritesButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { QuizResultDataPartial } from '../../types';
+interface ResultFavoritesButtonProps {
+    item: QuizResultDataPartial;
+    price?: number;
+}
+export interface Favorited {
+    [key: string]: boolean;
+}
+export default function ResultFavoritesButton(props: ResultFavoritesButtonProps): JSX.Element | null;
+export {};

package/lib/types/constants.d.ts

@@ -1,8 +1,8 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `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\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `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\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
-export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon is clicked\n  - `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\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `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\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";
 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";

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

@@ -1,4 +1,4 @@
-import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps } from '../../types';
+import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps } from '../../types';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
 declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState) => {
@@ -12,6 +12,7 @@ declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: Quiz
     getResetQuizButtonProps: GetResetQuizButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
+    getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
 };

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

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

package/lib/types/hooks/useQuizEvents/useQuizAddToFavorites.d.ts

@@ -0,0 +1,5 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizEventsReturn, QuizResultsEventsProps } from '../../types';
+declare const useQuizAddToFavorites: (cioClient: ConstructorIOClient, quizApiState: QuizAPIReducerState, onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick) => QuizEventsReturn.AddToFavorites;
+export default useQuizAddToFavorites;

package/lib/types/services/index.d.ts

@@ -5,4 +5,4 @@ export declare const getNextQuestion: (cioClient: ConstructorIOClient, quizId: s
 export declare const getQuizResults: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesResultsParameters) => Promise<QuizResultsResponse>;
 export declare const trackQuizResultsLoaded: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse) => void;
 export declare const trackQuizResultClick: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse, result: QuizResultDataPartial, position: number) => void;
-export declare const trackQuizConversion: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse, result: QuizResultDataPartial, price?: number) => void;
+export declare const trackQuizConversion: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse, result: QuizResultDataPartial, price?: number, type?: string) => void;

package/lib/types/types.d.ts

@@ -16,12 +16,14 @@ export declare namespace QuizResultsEventsProps {
     type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;
     type OnQuizResultClick = (result: QuizResultDataPartial, position: number) => void;
     type OnAddToCartClick = (result: QuizResultDataPartial) => void;
+    type OnAddToFavoritesClick = (result: QuizResultDataPartial) => void;
 }
 export interface ResultsPageOptions extends ResultCardProps {
     numResultsToDisplay?: number;
     onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
     onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
     onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
+    onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick;
 }
 export interface SessionStateOptions {
     showSessionModal?: boolean;
@@ -74,6 +76,7 @@ export declare namespace QuizEventsReturn {
     type ResetQuiz = () => void;
     type ResultClick = (result: QuizResultDataPartial, position: number) => void;
     type AddToCart = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number) => void;
+    type AddToFavorites = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number, sendEvent?: boolean) => void;
     type HydrateQuiz = () => void;
     type HasSessionStorageState = () => boolean;
     type ResetSessionStorageState = () => void;
@@ -85,6 +88,7 @@ export interface QuizEventsReturn {
     resetQuiz: QuizEventsReturn.ResetQuiz;
     resultClick: QuizEventsReturn.ResultClick;
     addToCart: QuizEventsReturn.AddToCart;
+    addToFavorites: QuizEventsReturn.AddToFavorites;
     hydrateQuiz: QuizEventsReturn.HydrateQuiz;
     hasSessionStorageState: QuizEventsReturn.HasSessionStorageState;
     resetSessionStorageState: QuizEventsReturn.ResetSessionStorageState;
@@ -162,6 +166,7 @@ export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
 export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
 export type GetAddToCartButtonProps = (result: QuizResultDataPartial, price?: number) => AddToCartButtonProps;
+export type GetAddToFavoritesButtonProps = (result: QuizResultDataPartial, price?: number, clickHandler?: () => void) => AddToCartButtonProps;
 export type GetQuizImageProps = () => QuizImageProps;
 export type GetSelectQuestionImageProps = (option: QuestionOption) => QuizImageProps;
 export interface QuizResultOptions<T = 'button' | 'link'> {
@@ -190,6 +195,7 @@ export interface UseQuizReturn {
     getResetQuizButtonProps: GetResetQuizButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
+    getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
     primaryColorStyles: PrimaryColorStyles;

package/lib/types/utils.d.ts

@@ -15,6 +15,7 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
 export declare const functionStrings: {
     onAddToCartClick: string;
     onQuizResultClick: string;
+    onAddToFavoritesClick: string;
     onQuizResultsLoaded: string;
     cioJsClient: string;
 };

package/package.json

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