@constructor-io/constructorio-ui-quizzes 1.5.0 → 1.5.2

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.5.0",
+  "version": "1.5.2",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",