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

package/lib/types/types.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { QuizResultData, NextQuestionResponse, QuizResultsResponse } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { QuizResultData, NextQuestionResponse, QuizResultsResponse, Nullable, QuestionOption } 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';
 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 {
@@ -34,40 +35,137 @@ export interface IQuizProps {
 }
 export interface QuizReturnState {
     answers: {
-        inputs: Record<string, string | string[]>;
+        inputs: AnswerInputState;
         isLastAnswer: boolean;
     };
     quiz: {
         requestState: RequestStates;
         versionId?: string;
         sessionId?: string;
-        firstQuestion?: NextQuestionResponse;
-        currentQuestion?: NextQuestionResponse;
-        results?: QuizResultsResponse;
+        currentQuestion?: CurrentQuestion | undefined;
+        results?: QuizResultsResponse | undefined;
         resultsFilters?: string[];
-        isFirstQuestion?: boolean;
     };
 }
+export type AnswerInputState = {
+    [key: string]: {
+        type: InputQuestionsTypes;
+        value: string | string[];
+    };
+};
+export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect;
+export type CurrentQuestion = NextQuestionResponse & {
+    isFirstQuestion: boolean;
+    isOpenQuestion: boolean;
+    isCoverQuestion: boolean;
+    isSingleQuestion: boolean;
+    isMultipleQuestion: boolean;
+    isSelectQuestion: boolean;
+};
 export declare namespace QuizEventsReturn {
-    type NextQuestion = (payload?: string | string[]) => void;
+    type QuizAnswerChanged = (payload?: string | string[]) => void;
+    type NextQuestion = () => 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;
     type HydrateQuiz = () => void;
-    type HasStoredState = () => boolean;
-    type ResetStoredState = () => void;
+    type HasSessionStorageState = () => boolean;
+    type ResetSessionStorageState = () => void;
 }
 export interface QuizEventsReturn {
     nextQuestion: QuizEventsReturn.NextQuestion;
+    quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged;
     previousQuestion: QuizEventsReturn.PreviousQuestion;
     resetQuiz: QuizEventsReturn.ResetQuiz;
     resultClick: QuizEventsReturn.ResultClick;
     addToCart: QuizEventsReturn.AddToCart;
     hydrateQuiz: QuizEventsReturn.HydrateQuiz;
-    hasStoredState: QuizEventsReturn.HasStoredState;
-    resetStoredState: QuizEventsReturn.ResetStoredState;
+    hasSessionStorageState: QuizEventsReturn.HasSessionStorageState;
+    resetSessionStorageState: QuizEventsReturn.ResetSessionStorageState;
+}
+export interface OpenTextInputProps {
+    className: string;
+    placeholder: string;
+    value: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+}
+export interface CoverQuestionProps {
+}
+export interface NextQuestionButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    disabled?: boolean;
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
+export interface PreviousQuestionButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    style?: Record<string, string>;
+}
+export interface ResetQuizButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    style?: Record<string, string>;
+}
+export interface HydrateQuizButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    style?: Record<string, string>;
+}
+export interface AddToCartButtonProps {
+    className: string;
+    type: 'submit' | 'reset' | 'button' | undefined;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    style?: Record<string, string>;
+}
+export interface QuizImageProps {
+    className?: string;
+    src?: Nullable<string>;
+    alt?: Nullable<string>;
+}
+export interface QuizResultPropsLink {
+    href?: string;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+}
+export interface QuizResultPropsButton {
+    className: string;
+    role: 'button';
+    tabIndex: number;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+}
+export type QuizResultProps = QuizResultPropsLink | QuizResultPropsButton;
+export interface SelectInputProps {
+    className: string;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    role: 'button';
+    tabIndex: number;
+    key: number;
+}
+export type GetOpenTextInputProps = () => OpenTextInputProps;
+export type GetCoverQuestionProps = () => CoverQuestionProps;
+export type GetSelectInputProps = (option: QuestionOption) => SelectInputProps;
+export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
+export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
+export type GetResetQuizButtonProps = () => ResetQuizButtonProps;
+export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
+export type GetAddToCartButtonProps = (result: QuizResultDataPartial, price?: number) => AddToCartButtonProps;
+export type GetQuizImageProps = () => QuizImageProps;
+export type GetSelectQuestionImageProps = (option: QuestionOption) => QuizImageProps;
+export interface QuizResultOptions<T = 'button' | 'link'> {
+    result: QuizResultDataPartial;
+    position: number;
+    type?: T;
 }
+export type GetQuizResultButtonProps = (options: QuizResultOptions<'button'>) => QuizResultPropsButton;
+export type GetQuizResultLinkProps = (options: QuizResultOptions<'link'>) => QuizResultPropsLink;
 export interface PrimaryColorStyles {
     '--primary-color-h': string;
     '--primary-color-s': string;
@@ -77,6 +175,18 @@ export interface UseQuizReturn {
     cioClient?: ConstructorIOClient;
     state: QuizReturnState;
     events: QuizEventsReturn;
+    getOpenTextInputProps: GetOpenTextInputProps;
+    getNextQuestionButtonProps: GetNextQuestionButtonProps;
+    getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
+    getQuizImageProps: GetQuizImageProps;
+    getSelectQuestionImageProps: GetSelectQuestionImageProps;
+    getSelectInputProps: GetSelectInputProps;
+    getCoverQuestionProps: GetCoverQuestionProps;
+    getResetQuizButtonProps: GetResetQuizButtonProps;
+    getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
+    getAddToCartButtonProps: GetAddToCartButtonProps;
+    getQuizResultButtonProps: GetQuizResultButtonProps;
+    getQuizResultLinkProps: GetQuizResultLinkProps;
     primaryColorStyles: PrimaryColorStyles;
 }
 export type UseQuiz = (quizProps: IQuizProps) => UseQuizReturn;

package/lib/types/utils.d.ts

@@ -1,5 +1,6 @@
 import { FilterExpression } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { QuestionTypes } from './components/CioQuiz/actions';
+import { QuizLocalReducerState } from './components/CioQuiz/quizLocalReducer';
 import { PrimaryColorStyles, QuestionImages } from './types';
 export declare const renderImages: (images: Partial<QuestionImages>, cssClasses?: string) => JSX.Element | "";
 export declare const getStoryParams: (storyCode: any, templateCode: any, importCode: any) => {
@@ -37,6 +38,9 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
 export declare function getPreferredColorScheme(): string;
 export declare function isFunction(fn: any): boolean;
 export declare const getFilterValuesFromExpression: (exp: FilterExpression | null) => string[];
+export declare const getStateFromSessionStorage: (quizStateKey: string) => QuizLocalReducerState | null;
+export declare const resetQuizSessionStorageState: (quizStateKey: string) => () => void;
+export declare const logger: (action: any) => void;
 export declare function sleep(ms: any): Promise<unknown>;
 export declare function rgbToHsl(r: number, g: number, b: number): number[];
 export declare function convertPrimaryColorsToString(primaryColorStyles: PrimaryColorStyles): string;

package/package.json

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

package/lib/cjs/hooks/useQuizLocalState.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const actions_1 = require("../components/CioQuiz/actions");
-const quizLocalReducer_1 = tslib_1.__importStar(require("../components/CioQuiz/quizLocalReducer"));
-const constants_1 = require("../constants");
-const useQuizLocalState = (sessionStateKey) => {
-    const [quizLocalState, dispatch] = (0, react_1.useReducer)(quizLocalReducer_1.default, quizLocalReducer_1.initialState);
-    const quizStateKey = sessionStateKey || constants_1.quizSessionStateKey;
-    const getStateFromSessionStorage = () => {
-        var _a;
-        const state = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(quizStateKey);
-        if (state) {
-            return JSON.parse(state);
-        }
-        return null;
-    };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        // don't save state if initial state
-        if ((_a = quizLocalState === null || quizLocalState === void 0 ? void 0 : quizLocalState.answers) === null || _a === void 0 ? void 0 : _a.length) {
-            (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizStateKey, JSON.stringify(quizLocalState));
-        }
-    }, [quizLocalState, quizStateKey]);
-    const resetQuizLocalState = () => {
-        dispatch({
-            type: actions_1.QuestionTypes.Reset,
-        });
-    };
-    const hydrateQuizLocalState = () => {
-        const quizState = getStateFromSessionStorage();
-        if (quizState) {
-            dispatch({
-                type: actions_1.QuestionTypes.Hydrate,
-                payload: quizState,
-            });
-        }
-    };
-    const resetQuizStoredState = () => {
-        var _a;
-        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(quizStateKey);
-    };
-    const hasQuizStoredState = () => getStateFromSessionStorage() !== null;
-    return {
-        quizLocalState,
-        resetQuizLocalState,
-        hydrateQuizLocalState,
-        hasQuizStoredState,
-        resetQuizStoredState,
-        dispatchLocalState: dispatch,
-    };
-};
-exports.default = useQuizLocalState;

package/lib/mjs/hooks/useQuizLocalState.js

@@ -1,48 +0,0 @@
-import { useEffect, useReducer } from 'react';
-import { QuestionTypes } from '../components/CioQuiz/actions';
-import quizLocalReducer, { initialState, } from '../components/CioQuiz/quizLocalReducer';
-import { quizSessionStateKey } from '../constants';
-const useQuizLocalState = (sessionStateKey) => {
-    const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
-    const quizStateKey = sessionStateKey || quizSessionStateKey;
-    const getStateFromSessionStorage = () => {
-        const state = window?.sessionStorage?.getItem(quizStateKey);
-        if (state) {
-            return JSON.parse(state);
-        }
-        return null;
-    };
-    useEffect(() => {
-        // don't save state if initial state
-        if (quizLocalState?.answers?.length) {
-            window?.sessionStorage?.setItem(quizStateKey, JSON.stringify(quizLocalState));
-        }
-    }, [quizLocalState, quizStateKey]);
-    const resetQuizLocalState = () => {
-        dispatch({
-            type: QuestionTypes.Reset,
-        });
-    };
-    const hydrateQuizLocalState = () => {
-        const quizState = getStateFromSessionStorage();
-        if (quizState) {
-            dispatch({
-                type: QuestionTypes.Hydrate,
-                payload: quizState,
-            });
-        }
-    };
-    const resetQuizStoredState = () => {
-        window?.sessionStorage?.removeItem(quizStateKey);
-    };
-    const hasQuizStoredState = () => getStateFromSessionStorage() !== null;
-    return {
-        quizLocalState,
-        resetQuizLocalState,
-        hydrateQuizLocalState,
-        hasQuizStoredState,
-        resetQuizStoredState,
-        dispatchLocalState: dispatch,
-    };
-};
-export default useQuizLocalState;

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

@@ -1,11 +0,0 @@
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { ActionAnswerQuestion } from '../components/CioQuiz/actions';
-import { QuizLocalReducerState } from '../components/CioQuiz/quizLocalReducer';
-import { ResultsPageOptions } from '../types';
-declare const useFetchQuiz: (quizId: string, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, 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/useQuizLocalState.d.ts

@@ -1,10 +0,0 @@
-import { QuizLocalReducerState } from '../components/CioQuiz/quizLocalReducer';
-declare const useQuizLocalState: (sessionStateKey?: string) => {
-    quizLocalState: QuizLocalReducerState;
-    resetQuizLocalState: () => void;
-    hydrateQuizLocalState: () => void;
-    hasQuizStoredState: () => boolean;
-    resetQuizStoredState: () => void;
-    dispatchLocalState: import("react").Dispatch<import("../components/CioQuiz/actions").ActionAnswerQuestion>;
-};
-export default useQuizLocalState;