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

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

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+export default function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = useCallback(() => {
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question?.id;
+        const isHidden = currentQuestionId &&
+            (quizApiState.quizCurrentQuestion?.isCoverQuestion ||
+                !quizApiState.quizCurrentQuestion?.next_question.is_skippable);
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}

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/hooks/useQuizEvents/index.js

@@ -8,6 +8,7 @@ import useQuizResetClick from './useQuizResetClick';
 import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
 import useQuizAddToFavorites from './useQuizAddToFavorites';
+import useQuizSkipClick from './useQuizSkipClick';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -16,6 +17,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizNextQuestion);
+    const skipQuestion = useQuizSkipClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -36,6 +38,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),

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

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
+import { isFunction } from '../../utils';
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = useCallback(() => {
+        const currentQuestion = quizApiState.quizCurrentQuestion?.next_question;
+        const currentQuestionId = currentQuestion?.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!(currentQuestion?.type === 'cover')) {
+                dispatchLocalState({
+                    type: QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = {
+                ...quizLocalState.answerInputs[currentQuestionId],
+                value: currentQuestion?.type === 'open' ? 'false' : null,
+            };
+            if (currentQuestion && isFunction(onQuizSkipQuestion)) {
+                onQuizSkipQuestion({ ...currentQuestion, answer: currentAnswerInput });
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+export default useQuizSkipClick;

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

@@ -176,6 +176,10 @@ export const useMockContextValue = (question) => {
             ...mockElementProps,
             className: 'cio-question-cta-button',
         }),
+        getSkipQuestionButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-skip-button',
+        }),
         getPreviousQuestionButtonProps: () => ({
             ...mockElementProps,
             className: 'cio-question-back-button',

package/lib/mjs/src/utils.js

@@ -39,9 +39,18 @@ ${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)`,
     cioJsClient: `cioJsClient`,
 };
 export const stringifyWithDefaults = (obj) => {

package/lib/styles.css

@@ -215,6 +215,14 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
+.cio-quiz .cio-question-buttons-group {
+  width: 20rem;
+  height: var(--bottom-bar-height);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
 .cio-quiz .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
@@ -250,7 +258,27 @@
   cursor: auto;
   outline: none;
 }
-
+.cio-quiz .cio-question-skip-button {
+  background: transparent;
+  color: var(--gray-dust-500);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  font-size: 1rem;
+  width: 100%;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s ease-in-out;
+}
+.cio-quiz .cio-question-skip-button:hover,
+.cio-quiz .cio-question-skip-button:focus {
+  text-decoration-color: var(--gray-dust-200);
+}
+.cio-quiz .cio-question-skip-button.hide {
+  visibility: hidden;
+  pointer-events: none;
+}
 /* Back Button Component */
 .cio-quiz .cio-question-back-button {
   color: var(--primary-color);
@@ -585,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;
 }
@@ -639,6 +677,12 @@
 
 /* Container Queries */
 
+@container quiz (max-width: 640px) {
+  .cio-quiz .cio-question-skip-button span {
+    display: none;
+  }
+}
+
 /* Small Tablet */
 @container quiz (min-width: 640px) {
   .cio-quiz .cio-container {

package/lib/types/src/components/CioQuiz/actions.d.ts

@@ -6,6 +6,7 @@ export declare enum QuestionTypes {
     SingleSelect = "single",
     MultipleSelect = "multiple",
     Next = "next",
+    Skip = "skip",
     Back = "back",
     Reset = "reset",
     Hydrate = "hydrate",
@@ -24,7 +25,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
     getQuizImageProps: GetQuizImageProps;
     getSelectInputProps: GetSelectInputProps;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SkipButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    propsGetters?: () => React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+declare function SkipButton(props: SkipButtonProps): JSX.Element;
+export default SkipButton;

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

@@ -1,13 +1,14 @@
 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  - `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  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\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 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  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n  - `onQuizSkipQuestion` is an optional callback function that will be called when user skips a question\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  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip 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";
 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 } from '../../types';
+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;
@@ -15,5 +15,6 @@ declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: Quiz
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
 };
 export default usePropsGetters;

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/hooks/usePropsGetters/useSkipQuestionButtonProps.d.ts

@@ -0,0 +1,3 @@
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { GetSkipQuestionButtonProps, QuizEventsReturn } from '../../types';
+export default function useSkipQuestionButtonProps(skipQuestion: QuizEventsReturn.SkipQuestion, quizApiState: QuizAPIReducerState): GetSkipQuestionButtonProps;

package/lib/types/src/hooks/useQuizEvents/useQuizSkipClick.d.ts

@@ -0,0 +1,6 @@
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+import { QuizEventsReturn, OnQuizSkipQuestion } from '../../types';
+declare const useQuizSkipClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizSkipQuestion?: OnQuizSkipQuestion) => QuizEventsReturn.NextQuestion;
+export default useQuizSkipClick;

package/lib/types/src/stories/Quiz/tests/mocks.d.ts

@@ -7,7 +7,7 @@ export declare const getMockQuestion: (type: `${QuestionTypes}`) => {
     title: string;
     description: string;
     cta_text: string;
-    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
@@ -18,7 +18,7 @@ export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
     title: string;
     description: string;
     cta_text: string;
-    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const questionOptionsWithImages: {

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;
@@ -34,8 +35,10 @@ export type QuestionWithAnswer = Question & {
     answer: AnswerInput;
 };
 export type OnQuizNextQuestion = (question: QuestionWithAnswer) => void;
+export type OnQuizSkipQuestion = (question: QuestionWithAnswer) => void;
 export interface Callbacks {
     onQuizNextQuestion?: OnQuizNextQuestion;
+    onQuizSkipQuestion?: OnQuizSkipQuestion;
 }
 export interface IQuizProps {
     apiKey?: string;
@@ -65,7 +68,7 @@ export interface QuizReturnState {
 }
 export type AnswerInput = {
     type: InputQuestionsTypes;
-    value: string | string[];
+    value: string | string[] | null;
 };
 export type AnswerInputState = {
     [key: string]: AnswerInput;
@@ -87,6 +90,7 @@ export type CurrentQuestion = NextQuestionResponse & {
 export declare namespace QuizEventsReturn {
     type QuizAnswerChanged = (payload?: string | string[]) => void;
     type NextQuestion = () => void;
+    type SkipQuestion = () => void;
     type PreviousQuestion = () => void;
     type ResetQuiz = () => void;
     type ResultClick = (result: QuizResultDataPartial, position: number) => void;
@@ -97,6 +101,7 @@ export declare namespace QuizEventsReturn {
 }
 export interface QuizEventsReturn {
     nextQuestion: QuizEventsReturn.NextQuestion;
+    skipQuestion: QuizEventsReturn.SkipQuestion;
     quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged;
     previousQuestion: QuizEventsReturn.PreviousQuestion;
     resetQuiz: QuizEventsReturn.ResetQuiz;
@@ -121,6 +126,12 @@ export interface NextQuestionButtonProps {
     disabled?: boolean;
     onClick: React.MouseEventHandler<HTMLElement>;
 }
+export interface SkipQuestionButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    disabled?: boolean;
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
 export interface PreviousQuestionButtonProps {
     className: string;
     type: 'submit' | 'reset' | 'button' | undefined;
@@ -147,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;
@@ -175,6 +186,7 @@ export type GetOpenTextInputProps = () => OpenTextInputProps;
 export type GetCoverQuestionProps = () => CoverQuestionProps;
 export type GetSelectInputProps = (option: QuestionOption) => SelectInputProps;
 export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
+export type GetSkipQuestionButtonProps = () => SkipQuestionButtonProps;
 export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
 export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
@@ -200,6 +212,7 @@ export interface UseQuizReturn {
     events: QuizEventsReturn;
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
     getQuizImageProps: GetQuizImageProps;
     getSelectQuestionImageProps: GetSelectQuestionImageProps;

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

@@ -18,6 +18,7 @@ export declare const functionStrings: {
     onAddToFavoritesClick: string;
     onQuizResultsLoaded: string;
     onQuizNextQuestion: string;
+    onQuizSkipQuestion: string;
     cioJsClient: string;
 };
 export declare const stringifyWithDefaults: (obj: {

package/package.json

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