@constructor-io/constructorio-ui-quizzes 1.3.12 → 1.4.0

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

@@ -1,9 +1,14 @@
+import { RequestStates } from '../../../constants';
+import useOpenTextInputProps from '../../../hooks/usePropsGetters/useOpenTextInputProps';
+import useCoverQuestionProps from '../../../hooks/usePropsGetters/useCoverQuestionProps';
+import useSelectInputProps from '../../../hooks/usePropsGetters/useSelectInputProps';
 export const getMockQuestion = (type) => ({
     id: 1,
     title: 'This is question title',
     description: 'This is question description',
     cta_text: 'Continue',
     type,
+    input_placeholder: 'Answer here...',
 });
 const getMockImages = () => ({
     images: {
@@ -50,16 +55,26 @@ export const questionOptions = [
 ];
 export const getMockState = (question) => ({
     answers: {
-        inputs: { 1: '' },
+        inputs: {
+            1: {
+                type: question?.type,
+                value: '',
+            },
+        },
         isLastAnswer: false,
     },
     quiz: {
-        requestState: 1,
+        requestState: RequestStates.Success,
         versionId: '',
         sessionId: '',
-        isFirstQuestion: false,
         currentQuestion: {
             next_question: question,
+            isFirstQuestion: false,
+            isOpenQuestion: question?.type === 'open',
+            isCoverQuestion: question?.type === 'cover',
+            isSingleQuestion: question?.type === 'single',
+            isMultipleQuestion: question?.type === 'multiple',
+            isSelectQuestion: question?.type === 'single',
         },
         results: {
             response: {
@@ -91,17 +106,65 @@ export const getMockState = (question) => ({
                         },
                     },
                 ],
+                facets: [],
+                groups: [],
+                sort_options: [],
+                refined_content: [],
+                total_num_results: 10,
+                features: [],
+                result_sources: {},
             },
+            quiz_id: '',
+            quiz_session_id: '',
+            quiz_version_id: '',
         },
         resultsFilters: ['Chocolate', 'Medium'],
     },
 });
-export const getMockContextValue = (question) => ({
-    state: getMockState(question),
-    previousQuestion: () => { },
-    nextQuestion: () => { },
-    addToCart: () => { },
-    customClickItemCallback: false,
-    resetQuiz: () => { },
-    resultClick: () => { },
-});
+const mockElementProps = {
+    className: '',
+    type: 'submit',
+    onClick: () => { },
+    onChange: () => { },
+    onKeyDown: () => { },
+    role: 'button',
+    tabIndex: 0,
+    key: 0,
+    style: {},
+    placeholder: '',
+    value: '',
+};
+export const useMockContextValue = (question) => {
+    const getOpenTextInputProps = useOpenTextInputProps(() => { }, () => { }, question);
+    const getCoverQuestionProps = useCoverQuestionProps(() => { }, question);
+    const getSelectInputProps = useSelectInputProps(() => { }, () => { }, question);
+    return {
+        state: getMockState(question),
+        getCoverQuestionProps,
+        getOpenTextInputProps,
+        getSelectInputProps,
+        getAddToCartButtonProps: () => ({ ...mockElementProps, className: 'cio-question-cta-button' }),
+        getHydrateQuizButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-cta-button',
+        }),
+        getNextQuestionButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-cta-button',
+        }),
+        getPreviousQuestionButtonProps: () => ({
+            ...mockElementProps,
+            className: 'cio-question-back-button',
+        }),
+        getQuizImageProps: () => mockElementProps,
+        getQuizResultButtonProps: () => mockElementProps,
+        getQuizResultLinkProps: () => mockElementProps,
+        getResetQuizButtonProps: () => ({ ...mockElementProps, className: 'cio-question-redo-button' }),
+        primaryColorStyles: {
+            '--primary-color-h': '12',
+            '--primary-color-s': '14',
+            '--primary-color-l': '14',
+        },
+        customClickItemCallback: false,
+    };
+};

package/lib/mjs/utils.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { QuestionTypes } from './components/CioQuiz/actions';
 export const renderImages = (images, cssClasses) => {
@@ -110,6 +111,22 @@ export const getFilterValuesFromExpression = (exp) => {
     }
     return [];
 };
+export const getStateFromSessionStorage = (quizStateKey) => {
+    const state = window?.sessionStorage?.getItem(quizStateKey);
+    if (state) {
+        return JSON.parse(state);
+    }
+    return null;
+};
+export const resetQuizSessionStorageState = (quizStateKey) => () => {
+    window?.sessionStorage?.removeItem(quizStateKey);
+};
+export const logger = (action) => {
+    console.group(`%cAction:%c  ${action.type}`, 'color: red; font-weight: bold;', 'color: green; font-weight: lighter;');
+    console.log('%c type:', 'color: #9E9E9E; font-weight: 700;', action.type);
+    console.log('%c payload:', 'color: #00A7F7; font-weight: 700;', action.payload);
+    console.groupEnd();
+};
 // Function to emulate pausing between interactions
 export function sleep(ms) {
     // eslint-disable-next-line

package/lib/styles.css

@@ -255,6 +255,10 @@
 .cio-question-back-button:focus {
   outline: 3px solid var(--primary-color-variant-100);
 }
+.cio-question-back-button.disabled {
+  display: none;
+}
+
 .cio-question-back-button svg {
   display: inline;
 }

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

@@ -1,3 +1,3 @@
-import React from 'react';
-declare function BackButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+/// <reference types="react" />
+declare function BackButton(): JSX.Element | null;
 export default BackButton;

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

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

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

@@ -1,10 +1,11 @@
-import { NextQuestionResponse, QuizResultsResponse } from '../../types';
+import { CurrentQuestion, NextQuestionResponse, QuizResultsResponse } from '../../types';
 import type { QuizLocalReducerState } from './quizLocalReducer';
 export declare enum QuestionTypes {
     OpenText = "open",
     Cover = "cover",
     SingleSelect = "single",
     MultipleSelect = "multiple",
+    Next = "next",
     Back = "back",
     Reset = "reset",
     Hydrate = "hydrate"
@@ -16,15 +17,13 @@ export interface QuestionAnswer<Value> {
 }
 export type SelectQuestionPayload = QuestionAnswer<string[]>;
 export type OpenTextQuestionPayload = QuestionAnswer<string>;
-export type CoverQuestionPayload = {
-    isLastQuestion?: boolean;
-};
+export type CoverQuestionPayload = QuestionAnswer<string>;
 interface Action<Type, Payload = {}> {
     type: Type;
     payload?: 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> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+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.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

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

@@ -1,14 +1,21 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { QuizEventsReturn, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, 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;
+    getOpenTextInputProps: GetOpenTextInputProps;
+    getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
+    getQuizImageProps: GetQuizImageProps;
+    getSelectInputProps: GetSelectInputProps;
+    getCoverQuestionProps: GetCoverQuestionProps;
+    getResetQuizButtonProps: GetResetQuizButtonProps;
+    getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
+    getAddToCartButtonProps: GetAddToCartButtonProps;
+    getQuizResultButtonProps: GetQuizResultButtonProps;
+    getQuizResultLinkProps: GetQuizResultLinkProps;
+    primaryColorStyles: PrimaryColorStyles;
     customClickItemCallback: boolean;
 }
 declare const _default: React.Context<Partial<QuizContextValue>>;

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

@@ -1,10 +1,10 @@
 import { RequestStates } from '../../constants';
-import { NextQuestionResponse, QuizResultsResponse } from '../../types';
+import { CurrentQuestion, NextQuestionResponse, QuizResultsResponse } from '../../types';
 import { ActionQuizAPI } from './actions';
 export type QuizAPIReducerState = {
     quizRequestState: RequestStates;
+    quizCurrentQuestion?: CurrentQuestion;
     quizFirstQuestion?: NextQuestionResponse;
-    quizCurrentQuestion?: NextQuestionResponse;
     quizResults?: QuizResultsResponse;
     quizResultsFilters?: string[];
 };

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

@@ -1,14 +1,12 @@
-import { ActionAnswerQuestion, OpenTextQuestionPayload, SelectQuestionPayload } from './actions';
+import { AnswerInputState } from '../../types';
+import { ActionAnswerQuestion } from './actions';
 export type Answers = string[][];
 export type QuizLocalReducerState = {
     answers: Answers;
-    answerInputs: {};
+    answerInputs: AnswerInputState;
     isLastAnswer: boolean;
     quizVersionId?: string;
     quizSessionId?: string;
 };
-export type AnswerInputState = {
-    [key: string]: OpenTextQuestionPayload | SelectQuestionPayload;
-};
 export declare const initialState: QuizLocalReducerState;
 export default function quizLocalReducer(state: QuizLocalReducerState, action: ActionAnswerQuestion): QuizLocalReducerState;

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 interface ControlBarProps {
-    showBackButton?: boolean;
-    isNextButtonDisabled?: boolean;
-    backButtonHandler?: () => void;
-    nextButtonHandler: () => void;
     ctaButtonText?: string;
 }
 declare function ControlBar(props: ControlBarProps): JSX.Element;

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

@@ -1,7 +1,3 @@
-import React from 'react';
-interface OpenTextQuestionProps {
-    initialValue?: string;
-    onChangeHandler?: React.ChangeEventHandler<HTMLInputElement>;
-}
-declare function OpenTextQuestion(props: OpenTextQuestionProps): JSX.Element | null;
+/// <reference types="react" />
+declare function OpenTextQuestion(): JSX.Element | null;
 export default OpenTextQuestion;

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

@@ -2,5 +2,5 @@ import React from 'react';
 interface RedoButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     redoText?: string;
 }
-declare function RedoButton(props: RedoButtonProps): JSX.Element;
+declare function RedoButton(props: RedoButtonProps): JSX.Element | null;
 export default RedoButton;

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

@@ -2,8 +2,7 @@
 import { QuizResultDataPartial } from '../../types';
 interface ResultCtaButtonProps {
     item: QuizResultDataPartial;
-    className?: string;
     price?: number;
 }
-export default function ResultCtaButton(props: ResultCtaButtonProps): JSX.Element;
+export default function ResultCtaButton(props: ResultCtaButtonProps): JSX.Element | null;
 export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BrowseResultData } from '../../types';
+interface ResultHeroCardProps {
+    heroItem: Partial<BrowseResultData>;
+}
+export default function ResultHeroCard(props: ResultHeroCardProps): JSX.Element;
+export {};

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
+export interface Selected {
+    [key: number]: boolean;
+}
 declare function SelectTypeQuestion(): JSX.Element | null;
 export default SelectTypeQuestion;

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

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

package/lib/types/constants.d.ts

@@ -2,13 +2,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  - `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 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 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 enum RequestStates {
-    Stale = 0,
-    Loading = 1,
-    Success = 2,
-    Error = 3
+    Stale = "STALE",
+    Loading = "LOADING",
+    Success = "SUCCESS",
+    Error = "ERROR"
 }

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

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

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

@@ -0,0 +1,18 @@
+import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps } from '../../types';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState) => {
+    getOpenTextInputProps: GetOpenTextInputProps;
+    getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
+    getQuizImageProps: GetQuizImageProps;
+    getSelectQuestionImageProps: GetSelectQuestionImageProps;
+    getSelectInputProps: GetSelectInputProps;
+    getCoverQuestionProps: GetCoverQuestionProps;
+    getResetQuizButtonProps: GetResetQuizButtonProps;
+    getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
+    getAddToCartButtonProps: GetAddToCartButtonProps;
+    getQuizResultButtonProps: GetQuizResultButtonProps;
+    getQuizResultLinkProps: GetQuizResultLinkProps;
+};
+export default usePropsGetters;

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

@@ -0,0 +1,2 @@
+import { GetCoverQuestionProps, Question, QuizEventsReturn } from '../../types';
+export default function useCoverQuestionProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, currentQuestionData?: Question): GetCoverQuestionProps;

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

@@ -0,0 +1,4 @@
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+import { GetNextQuestionButtonProps, QuizEventsReturn } from '../../types';
+export default function useNextQuestionButtonProps(nextQuestion: QuizEventsReturn.NextQuestion, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState): GetNextQuestionButtonProps;

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

@@ -0,0 +1,2 @@
+import { AnswerInputState, GetOpenTextInputProps, Question, QuizEventsReturn } from '../../types';
+export default function useOpenTextInputProps(setQuizAnswers: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Question, answerInputs?: AnswerInputState): GetOpenTextInputProps;

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

@@ -0,0 +1,3 @@
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { GetPreviousQuestionButtonProps, QuizEventsReturn } from '../../types';
+export default function usePreviousQuestionButtonProps(quizApiState: QuizAPIReducerState, previousQuestion: QuizEventsReturn.PreviousQuestion): GetPreviousQuestionButtonProps;

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

@@ -0,0 +1,2 @@
+import { AnswerInputState, GetSelectInputProps, Question, QuizEventsReturn } from '../../types';
+export default function useSelectInputProps(quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Question, answerInputs?: AnswerInputState): GetSelectInputProps;

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

@@ -1,18 +1,6 @@
-/// <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;
-    hydrateQuizLocalState: () => void;
-    resetQuizStoredState: () => void;
-    hasQuizStoredState: () => boolean;
-};
-declare const useQuizEvents: (options: UseQuizEventOptions) => QuizEventsReturn;
+import { IQuizProps, QuizEventsReturn } from '../../types';
+import useQuizState from '../useQuizState';
+type UseQuizEvents = (quizOptions: IQuizProps, cioClient: ConstructorIOClient, quizState: ReturnType<typeof useQuizState>) => QuizEventsReturn;
+declare const useQuizEvents: UseQuizEvents;
 export default useQuizEvents;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
+import { QuizEventsReturn, QuizResultsResponse } from '../../types';
+declare const useQuizResetClick: (quizStateKey: string, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
+export default useQuizResetClick;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+import { IQuizProps } from '../../types';
+type UseQuizState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient) => {
+    quizApiState: QuizAPIReducerState;
+    quizLocalState: QuizLocalReducerState;
+    dispatchApiState: React.Dispatch<ActionQuizAPI>;
+    dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
+    hasQuizStoredState: () => boolean;
+    quizStateKey: string;
+};
+declare const useQuizState: UseQuizState;
+export default useQuizState;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+import { IQuizProps } from '../../types';
+type UseQuizApiState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => {
+    quizApiState: QuizAPIReducerState;
+    dispatchApiState: React.Dispatch<ActionQuizAPI>;
+};
+declare const useQuizApiState: UseQuizApiState;
+export default useQuizApiState;

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

@@ -0,0 +1,8 @@
+import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
+declare const useQuizLocalState: (sessionStateKey?: string) => {
+    quizLocalState: import("../../components/CioQuiz/quizLocalReducer").QuizLocalReducerState;
+    hasQuizStoredState: () => boolean;
+    dispatchLocalState: (action: ActionAnswerQuestion) => void;
+    quizStateKey: string;
+};
+export default useQuizLocalState;

package/lib/types/index.d.ts

@@ -1,2 +1,13 @@
 import CioQuiz from './components/CioQuiz';
+export { default as useCioQuiz } from './hooks/useQuiz';
+export { default as QuizQuestions } from './components/QuizQuestions/index';
+export { default as OpenTextQuestion } from './components/OpenTextTypeQuestion/OpenTextTypeQuestion';
+export { default as CoverQuestion } from './components/CoverTypeQuestion/CoverTypeQuestion';
+export { default as SelectQuestion } from './components/SelectTypeQuestion/SelectTypeQuestion';
+export { default as Results } from './components/Results/Results';
+export { default as ResultCard } from './components/ResultCard/ResultCard';
+export { default as ResultContainer } from './components/ResultContainer/ResultContainer';
+export { default as ResultFilters } from './components/ResultFilters/ResultFilters';
+export { default as ResultHeroCard } from './components/ResultHeroCard/ResultHeroCard';
+export * from './types';
 export default CioQuiz;

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

@@ -1,7 +1,7 @@
 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 getNextQuestion: (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;

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

@@ -1,4 +1,5 @@
 import { Question } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { QuizReturnState } from '../../../types';
 import { QuestionTypes } from '../../../components/CioQuiz/actions';
 import { QuizContextValue } from '../../../components/CioQuiz/context';
 export declare const getMockQuestion: (type: QuestionTypes) => {
@@ -7,6 +8,7 @@ export declare const getMockQuestion: (type: QuestionTypes) => {
     description: string;
     cta_text: string;
     type: QuestionTypes;
+    input_placeholder: string;
 };
 export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
     images: {
@@ -17,6 +19,7 @@ export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
     description: string;
     cta_text: string;
     type: QuestionTypes;
+    input_placeholder: string;
 };
 export declare const questionOptionsWithImages: {
     images: {
@@ -37,5 +40,5 @@ export declare const questionOptions: {
         value: any;
     };
 }[];
-export declare const getMockState: (question?: Question) => any;
-export declare const getMockContextValue: (question?: Question) => QuizContextValue;
+export declare const getMockState: (question?: Question) => QuizReturnState;
+export declare const useMockContextValue: (question?: Question) => QuizContextValue;