@constructor-io/constructorio-ui-quizzes 1.2.3 → 1.3.1

package/lib/styles.css

@@ -31,6 +31,7 @@
   --bottom-bar-height: 80px;
   --primary-color: var(--blue-denim-400);
   --container-image-small-height: 250px;
+  container: quiz / inline-size;
 }
 
 /* Mobile + global styles */
@@ -40,8 +41,11 @@
   font-family: 'Inter', sans-serif;
 }
 .cio-quiz {
+  position: relative;
   min-width: 100%;
   min-height: 100%;
+  height: 100%;
+  overflow: auto;
   display: flex;
   justify-content: center;
   background-color: #ffffff;
@@ -128,7 +132,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: fixed;
+  position: absolute;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -223,14 +227,15 @@
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
 }
 .cio-select-question-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  align-self: start;
   max-width: 1200px;
-  margin-bottom: var(--bottom-bar-height);
   padding: 1rem;
   margin-top: 2rem;
+  min-height: calc(100% - 3rem); /* Full height - padding - margin */
   width: 100%;
 }
 .cio-question-options-container {
@@ -239,7 +244,7 @@
   flex-wrap: wrap;
   gap: 1rem;
   width: 100%;
-  margin-bottom: auto;
+  margin-bottom: var(--bottom-bar-height);
   margin-top: 2rem;
 }
 .cio-question-options-container-text-only {
@@ -464,13 +469,18 @@
 /* Media Queries */
 
 /* Small Tablet */
-@media screen and (min-width: 640px) {
-   /* Container */
+@container quiz (min-width: 640px) {
+  .cio-container {
+    padding-bottom: 0;
+  }
+
+  /* Container */
   .cio-container--with-image {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Image */
@@ -485,6 +495,7 @@
   .cio-cover-question-container--with-image {
     justify-content: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Select Component */
@@ -519,23 +530,18 @@
 }
 
 /* Big Tablet */
-@media screen and (min-width: 768px) {
-  /* Quiz */
-  .cio-quiz {
-    font-size: 18px;
-  }
-
+@container quiz (min-width: 768px) {
   /* Container */
   .cio-container {
     align-items: center;
     margin-top: 0;
   }
   .cio-container--with-image {
-    padding: 6rem 2rem;
+    padding: 6% 2%;
     align-items: center;
     flex-direction: row;
   }
-  
+
   /* Input */
   .cio-question-input-text {
     margin-bottom: 1rem;
@@ -543,7 +549,7 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 1000px;
+    max-height: 100%;
   }
   .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
@@ -587,6 +593,7 @@
     padding: 1rem 5rem;
   }
   .cio-select-question-container {
+    justify-content: center;
     margin: 0;
     padding: 2rem;
     padding-bottom: 0;
@@ -612,11 +619,8 @@
 }
 
 /* Desktop */
-@media screen and (min-width: 1280px) {
+@container quiz (min-width: 1280px) {
   /* Container */
-  .cio-container--with-image {
-    padding: 6rem 2rem;
-  }
   .cio-cover-question-container--with-image {
     padding: 0;
   }
@@ -632,7 +636,6 @@
     padding: 2.5rem 0rem;
   }
 
-
   /* Results component */
   .cio-results-container {
     margin-top: 3rem;

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

@@ -1,3 +1,4 @@
+import { NextQuestionResponse, QuizResultsResponse } from '../../types';
 export declare enum QuestionTypes {
     OpenText = "open",
     Cover = "cover",
@@ -22,4 +23,23 @@ interface Action<Type, Payload = {}> {
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload>;
 export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Cover, CoverQuestionPayload> | Action<QuestionTypes.Back> | Action<QuestionTypes.Reset>;
+export declare enum QuizAPIActionTypes {
+    SET_IS_LOADING = 0,
+    SET_IS_ERROR = 1,
+    SET_QUIZ_RESULTS = 2,
+    SET_CURRENT_QUESTION = 3,
+    RESET_QUIZ = 4
+}
+export type ActionSetIsLoading = Action<QuizAPIActionTypes.SET_IS_LOADING>;
+export type ActionSetIsError = Action<QuizAPIActionTypes.SET_IS_ERROR>;
+export type ActionSetQuizResults = Action<QuizAPIActionTypes.SET_QUIZ_RESULTS, {
+    quizResults: QuizResultsResponse;
+}>;
+export type ActionSetCurrentQuestion = Action<QuizAPIActionTypes.SET_CURRENT_QUESTION, {
+    quizCurrentQuestion: NextQuestionResponse;
+    quizSessionId?: string;
+    quizVersionId?: string;
+}>;
+export type ActionResetQuiz = Action<QuizAPIActionTypes.RESET_QUIZ>;
+export type ActionQuizAPI = ActionSetIsLoading | ActionSetIsError | ActionSetQuizResults | ActionSetCurrentQuestion | ActionResetQuiz;
 export {};

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

@@ -1,19 +1,15 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { RequestStates } from '../../constants';
-import { NextQuestionResponse, QuizResultsResponse } from '../../types';
-import { ActionAnswerQuestion } from './actions';
-import { QuizReducerState } from './reducer';
-interface QuizContextValue {
-    state: QuizReducerState;
-    requestState: RequestStates;
-    questionResponse: NextQuestionResponse;
-    resultsResponse: QuizResultsResponse;
-    isFirstQuestion: boolean;
-    quizNextHandler: (action?: ActionAnswerQuestion) => void;
-    quizBackHandler: () => void;
-    dispatch: React.Dispatch<ActionAnswerQuestion>;
-    cioClient: ConstructorIOClient;
+import { QuizEventsReturn, QuizReturnState } from '../../types';
+export interface QuizContextValue {
+    cioClient?: ConstructorIOClient;
+    state?: QuizReturnState;
+    resetQuiz: QuizEventsReturn.ResetQuiz;
+    nextQuestion?: QuizEventsReturn.NextQuestion;
+    previousQuestion?: QuizEventsReturn.PreviousQuestion;
+    addToCart: QuizEventsReturn.AddToCart;
+    resultClick: QuizEventsReturn.ResultClick;
+    customClickItemCallback: boolean;
 }
 declare const _default: React.Context<Partial<QuizContextValue>>;
 export default _default;

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

@@ -1,14 +1,3 @@
 /// <reference types="react" />
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { ResultsProps } from '../Results/Results';
-export interface ResultsPageOptions extends ResultsProps {
-    numResultsToDisplay?: number;
-}
-export interface IQuizProps {
-    quizId: string;
-    apiKey?: string;
-    cioJsClient?: ConstructorIOClient;
-    resultsPageOptions: ResultsPageOptions;
-    quizVersionId?: string;
-}
+import { IQuizProps } from '../../types';
 export default function CioQuiz(props: IQuizProps): JSX.Element | null;

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

@@ -0,0 +1,14 @@
+import { RequestStates } from '../../constants';
+import { NextQuestionResponse, QuizResultsResponse } from '../../types';
+import { ActionQuizAPI } from './actions';
+export type QuizAPIReducerState = {
+    quizRequestState: RequestStates;
+    quizVersionId?: string;
+    quizSessionId?: string;
+    quizFirstQuestion?: NextQuestionResponse;
+    quizCurrentQuestion?: NextQuestionResponse;
+    quizResults?: QuizResultsResponse;
+    quizResultsFilters?: string[];
+};
+export declare const initialState: QuizAPIReducerState;
+export default function apiReducer(state: QuizAPIReducerState, action: ActionQuizAPI): QuizAPIReducerState;

package/lib/types/components/CioQuiz/{reducer.d.ts → quizLocalReducer.d.ts}

@@ -1,6 +1,6 @@
 import { ActionAnswerQuestion, OpenTextQuestionPayload, SelectQuestionPayload } from './actions';
 export type Answers = string[][];
-export type QuizReducerState = {
+export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: {};
     isLastAnswer: boolean;
@@ -8,5 +8,5 @@ export type QuizReducerState = {
 export type AnswerInputState = {
     [key: string]: OpenTextQuestionPayload | SelectQuestionPayload;
 };
-export declare const initialState: QuizReducerState;
-export default function reducer(state: QuizReducerState, action: ActionAnswerQuestion): QuizReducerState;
+export declare const initialState: QuizLocalReducerState;
+export default function quizLocalReducer(state: QuizLocalReducerState, action: ActionAnswerQuestion): QuizLocalReducerState;

package/lib/types/components/QuizQuestions/index.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-import { NextQuestionResponse } from '../../types';
-export default function QuizQuestions(props: {
-    questionResponse: NextQuestionResponse;
-}): JSX.Element;
+export default function QuizQuestions(): JSX.Element;

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { BrowseResultData } from '../../types';
+import { QuizResultDataPartial } from '../../types';
 interface ResultCardProps {
-    result: Partial<BrowseResultData>;
-    addToCartCallback: (clickedResult: Partial<BrowseResultData>) => any;
-    clickItemCallback?: (clickedResult: Partial<BrowseResultData>) => any;
+    result: QuizResultDataPartial;
     salePriceKey?: string;
     regularPriceKey?: string;
     resultPosition: number;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { ResultsProps } from '../Results/Results';
+import { ResultsProps } from '../../types';
 export interface IResultContainerProps {
     options: ResultsProps;
-    resetQuizSessionId: () => void;
 }
 export default function ResultContainer(props: IResultContainerProps): JSX.Element;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { BrowseResultData } from '../../types';
+import { QuizResultDataPartial } from '../../types';
 interface ResultCtaButtonProps {
-    item: Partial<BrowseResultData>;
+    item: QuizResultDataPartial;
     className?: string;
-    callback?: (item: Partial<BrowseResultData>) => any;
     price?: number;
 }
 export default function ResultCtaButton(props: ResultCtaButtonProps): JSX.Element;

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

@@ -1,6 +1,3 @@
-import React from 'react';
-interface ResultFiltersProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    filters?: any;
-}
-declare function ResultFilters(props: ResultFiltersProps): JSX.Element;
+/// <reference types="react" />
+declare function ResultFilters(): JSX.Element;
 export default ResultFilters;

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

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import { BrowseResultData } from '../../types';
-export interface ResultsProps {
-    addToCartCallback: (item: Partial<BrowseResultData>) => any;
-    clickItemCallback?: (item: Partial<BrowseResultData>) => any;
-    resultCardSalePriceKey?: string;
-    resultCardRegularPriceKey?: string;
-}
+import { ResultsProps } from '../../types';
 declare function Results(props: ResultsProps): JSX.Element;
 export default Results;

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

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

package/lib/types/constants.d.ts

@@ -1,8 +1,9 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
-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  - `addToCartCallback` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `clickItemCallback` 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  - `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- 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 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- 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 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 enum RequestStates {
     Stale = 0,
     Loading = 1,

package/lib/types/hooks/useCioClient.d.ts

@@ -3,6 +3,6 @@ export type CioClientConfig = {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
 };
-type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | undefined;
+type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | never;
 declare const useCioClient: UseCioClient;
 export default useCioClient;

package/lib/types/hooks/useConsoleErrors.d.ts

@@ -0,0 +1,3 @@
+import { ResultsPageOptions } from '../types';
+declare const useConsoleErrors: (quizId: string, resultsPageOptions: ResultsPageOptions) => void;
+export default useConsoleErrors;

package/lib/types/hooks/useQuiz.d.ts

@@ -0,0 +1,3 @@
+import { UseQuiz } from '../types';
+declare const useQuiz: UseQuiz;
+export default useQuiz;

package/lib/types/hooks/useQuizApiState.d.ts

@@ -0,0 +1,10 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { QuizLocalReducerState } from '../components/CioQuiz/quizLocalReducer';
+import { ResultsPageOptions } from '../types';
+declare const useFetchQuiz: (quizId: string, quizLocalState: QuizLocalReducerState, resultsPageOptions: ResultsPageOptions, quizVersionIdProp: string | undefined, cioClient: ConstructorIOClient) => {
+    cioClient: ConstructorIOClient;
+    quizApiState: import("../components/CioQuiz/quizApiReducer").QuizAPIReducerState;
+    isFirstQuestion: boolean;
+    resetQuizApiState: () => void;
+};
+export default useFetchQuiz;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizEventsReturn, ResultsPageOptions } from '../../types';
+export type UseQuizEventOptions = {
+    cioClient: ConstructorIOClient;
+    quizApiState: QuizAPIReducerState;
+    resultsPageOptions: ResultsPageOptions;
+    dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
+    resetQuizApiState: () => void;
+    resetQuizLocalState: () => void;
+};
+declare const useQuizEvents: (options: UseQuizEventOptions) => QuizEventsReturn;
+export default useQuizEvents;

package/lib/types/hooks/useQuizEvents/useQuizAddToCart.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 useQuizAddToCart: (cioClient: ConstructorIOClient, quizApiState: QuizAPIReducerState, onAddToCartClick?: QuizResultsEventsProps.OnAddToCartClick) => QuizEventsReturn.AddToCart;
+export default useQuizAddToCart;

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

@@ -0,0 +1,4 @@
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+import { QuizEventsReturn } from '../../types';
+declare const useQuizBackClick: (dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => QuizEventsReturn.PreviousQuestion;
+export default useQuizBackClick;

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

@@ -0,0 +1,5 @@
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizEventsReturn } from '../../types';
+declare const useQuizNextClick: (quizApiState: QuizAPIReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => QuizEventsReturn.NextQuestion;
+export default useQuizNextClick;

package/lib/types/hooks/useQuizEvents/useQuizResultClick.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 useQuizResultClick: (cioClient: ConstructorIOClient, quizApiState: QuizAPIReducerState, onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick) => QuizEventsReturn.ResultClick;
+export default useQuizResultClick;

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

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

package/lib/types/hooks/useQuizLocalState.d.ts

@@ -0,0 +1,6 @@
+declare const useQuizLocalState: () => {
+    quizLocalState: import("../components/CioQuiz/quizLocalReducer").QuizLocalReducerState;
+    resetQuizLocalState: () => void;
+    dispatchLocalState: import("react").Dispatch<import("../components/CioQuiz/actions").ActionAnswerQuestion>;
+};
+export default useQuizLocalState;

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

@@ -0,0 +1,8 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { QuizzesParameters, QuizzesResultsParameters, NextQuestionResponse, QuizResultsResponse, QuizResultDataPartial } from '../types';
+export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | undefined;
+export declare const nextQuestion: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesParameters) => Promise<NextQuestionResponse>;
+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;

package/lib/types/types.d.ts

@@ -1 +1,64 @@
+/// <reference types="react" />
+import { QuizResultData, NextQuestionResponse, QuizResultsResponse } from '@constructor-io/constructorio-client-javascript/lib/types';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { RequestStates } from './constants';
 export type { QuestionOption, QuestionImages, Question, NextQuestionResponse, QuizResultsResponse, BrowseResultData, BrowseRequestType, QuizzesParameters, QuizzesResultsParameters, } from '@constructor-io/constructorio-client-javascript/lib/types';
+export type QuizResultDataPartial = Partial<QuizResultData>;
+export interface ResultsProps {
+    resultCardSalePriceKey?: string;
+    resultCardRegularPriceKey?: string;
+}
+export declare namespace QuizResultsEventsProps {
+    type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;
+    type OnQuizResultClick = (result: QuizResultDataPartial, position: number) => void;
+    type OnAddToCartClick = (result: QuizResultDataPartial) => void;
+}
+export interface ResultsPageOptions extends ResultsProps {
+    numResultsToDisplay?: number;
+    onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
+    onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
+    onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
+}
+export interface IQuizProps {
+    apiKey?: string;
+    cioJsClient?: ConstructorIOClient;
+    quizId: string;
+    quizVersionId?: string;
+    resultsPageOptions: ResultsPageOptions;
+}
+export interface QuizReturnState {
+    answers: {
+        inputs: Record<string, string | string[]>;
+        isLastAnswer: boolean;
+    };
+    quiz: {
+        requestState: RequestStates;
+        versionId?: string;
+        sessionId?: string;
+        firstQuestion?: NextQuestionResponse;
+        currentQuestion?: NextQuestionResponse;
+        results?: QuizResultsResponse;
+        resultsFilters?: string[];
+        isFirstQuestion?: boolean;
+    };
+}
+export declare namespace QuizEventsReturn {
+    type NextQuestion = (payload?: string | string[]) => void;
+    type PreviousQuestion = () => void;
+    type ResetQuiz = () => void;
+    type ResultClick = (result: QuizResultDataPartial, position: number) => void;
+    type AddToCart = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number) => void;
+}
+export interface QuizEventsReturn {
+    nextQuestion: QuizEventsReturn.NextQuestion;
+    previousQuestion: QuizEventsReturn.PreviousQuestion;
+    resetQuiz: QuizEventsReturn.ResetQuiz;
+    resultClick: QuizEventsReturn.ResultClick;
+    addToCart: QuizEventsReturn.AddToCart;
+}
+export interface UseQuizReturn {
+    cioClient?: ConstructorIOClient;
+    state: QuizReturnState;
+    events: QuizEventsReturn;
+}
+export type UseQuiz = (quizProps: IQuizProps) => UseQuizReturn;

package/lib/types/utils.d.ts

@@ -1,6 +1,6 @@
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { FilterExpression } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { QuestionTypes } from './components/CioQuiz/actions';
-import { QuestionImages, QuizzesParameters, QuizzesResultsParameters, NextQuestionResponse, QuizResultsResponse } from './types';
+import { QuestionImages } from './types';
 export declare const renderImages: (images: Partial<QuestionImages>, cssClasses?: string) => JSX.Element | "";
 export declare const getStoryParams: (storyCode: any, templateCode: any, importCode: any) => {
     docs: {
@@ -12,14 +12,18 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
         };
     };
 };
-export declare const defaultAddToCartCallbackCode = "\"addToCartCallback\": (item) => console.dir(item)";
+export declare const defaultOnAddToCartClickCode = "\"onAddToCartClick\": (item) => console.dir(item)";
+export declare const defaultOnQuizResultClickCode = "\"onQuizResultClick\": (result, position) => console.dir(result, position)";
+export declare const defaultOnQuizResultsLoadedCode = "\"onQuizResultsLoaded\": (results) => console.dir(results)";
 export declare const stringifyWithDefaults: (obj: {
     cioJsClient?: any;
-    addToCartCallback: any;
+    resultsPageOptions: {
+        onAddToCartClick: any;
+        onQuizResultClick: any;
+        onQuizResultsLoaded: any;
+    };
 }) => string;
 export declare const stringify: (obj: any) => string;
-export declare const getNextQuestion: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesParameters) => Promise<NextQuestionResponse>;
-export declare const getQuizResults: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesResultsParameters) => Promise<QuizResultsResponse>;
 export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
     isOpenQuestion: boolean;
     isCoverQuestion: boolean;
@@ -27,5 +31,6 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
     isMultipleQuestion: boolean;
     isSelectQuestion: boolean;
 };
-export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | undefined;
 export declare function getPreferredColorScheme(): string;
+export declare function isFunction(fn: any): boolean;
+export declare const getFilterValuesFromExpression: (exp: FilterExpression | null) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -61,15 +61,15 @@
   },
   "devDependencies": {
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^7.0.0-beta.40",
-    "@storybook/addon-actions": "7.0.0-beta.40",
-    "@storybook/addon-essentials": "7.0.0-beta.40",
-    "@storybook/addon-interactions": "^7.0.0-beta.40",
-    "@storybook/addon-links": "7.0.0-beta.40",
-    "@storybook/jest": "^0.0.11-next.0",
-    "@storybook/react-webpack5": "7.0.0-beta.40",
-    "@storybook/test-runner": "0.10.0-next.8",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "7.0.11",
+    "@storybook/addon-essentials": "7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "7.0.11",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react-webpack5": "7.0.11",
+    "@storybook/test-runner": "0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -83,13 +83,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.1",
     "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.0-beta.40",
+    "storybook": "7.0.11",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",
     "vite": "^4.2.1",