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

package/lib/types/constants.d.ts

@@ -1,6 +1,6 @@
 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 enum RequestStates {

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