@constructor-io/constructorio-ui-quizzes 1.18.0 → 1.19.0

package/lib/mjs/hooks/useQuizState/useSessionStorageState.js

@@ -1,8 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getStateFromSessionStorage } from '../../utils';
 import { quizSessionStateKey } from '../../constants';
 const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, enableHydration) => {
     const quizSessionStorageStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
+    const [quizData, setQuizData] = useState(getStateFromSessionStorage(quizSessionStorageStateKey));
     // Save state to session storage
     useEffect(() => {
         // don't save state if initial state
@@ -13,9 +14,9 @@ const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, ena
                 [quizId]: quizLocalState,
             };
             window?.sessionStorage?.setItem(quizSessionStorageStateKey, JSON.stringify(dataToSave));
+            setQuizData(data);
         }
     }, [quizLocalState, quizSessionStorageStateKey, enableHydration, quizId]);
-    const quizData = getStateFromSessionStorage(quizSessionStorageStateKey);
     const skipToResults = !!enableHydration &&
         !!quizData?.[quizId]?.isQuizCompleted &&
         !sessionStateOptions?.showSessionModalOnResults;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.18.0';
+export default '1.19.0';

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

@@ -12,7 +12,8 @@ export declare enum QuestionTypes {
     Back = "back",
     Reset = "reset",
     Hydrate = "hydrate",
-    Complete = "complete"
+    Complete = "complete",
+    JumpToQuestion = "jump_to_question"
 }
 export interface QuestionAnswer<Value> {
     questionId: number;
@@ -26,16 +27,19 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.SingleFilterValue, SelectQuestionPayload> | Action<QuestionTypes.MultipleFilterValues, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.JumpToQuestion, {
+    questionId: number;
+}> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,
     SET_QUIZ_RESULTS = 2,
     SET_CURRENT_QUESTION = 3,
     RESET_QUIZ = 4,
-    SET_QUIZ_SHARED_RESULTS = 5,
-    SET_QUIZ_RESULTS_CONFIG = 6,
-    SET_QUIZ_RESULTS_CONFIG_ERROR = 7
+    JUMP_TO_QUESTION = 5,
+    SET_QUIZ_SHARED_RESULTS = 6,
+    SET_QUIZ_RESULTS_CONFIG = 7,
+    SET_QUIZ_RESULTS_CONFIG_ERROR = 8
 }
 export type ActionSetIsLoading = Action<QuizAPIActionTypes.SET_IS_LOADING>;
 export type ActionSetIsError = Action<QuizAPIActionTypes.SET_IS_ERROR>;
@@ -50,9 +54,12 @@ export type ActionSetCurrentQuestion = Action<QuizAPIActionTypes.SET_CURRENT_QUE
     quizSessionId?: string;
     quizVersionId?: string;
 }>;
+export type ActionJumpToQuestion = Action<QuizAPIActionTypes.JUMP_TO_QUESTION, {
+    questionId: number;
+}>;
 export type ActionResetQuiz = Action<QuizAPIActionTypes.RESET_QUIZ>;
 export type ActionSetQuizResultsConfig = Action<QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG, {
     quizResultsConfig: QuizResultsConfigResponse;
 }> | Action<QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG_ERROR>;
-export type ActionQuizAPI = ActionSetIsLoading | ActionSetIsError | ActionSetQuizResults | ActionSetCurrentQuestion | ActionResetQuiz | ActionSetQuizSharedResults | ActionSetQuizResultsConfig;
+export type ActionQuizAPI = ActionSetIsLoading | ActionSetIsError | ActionSetQuizResults | ActionSetCurrentQuestion | ActionResetQuiz | ActionSetQuizSharedResults | ActionSetQuizResultsConfig | ActionJumpToQuestion;
 export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState, GetShareResultsButtonProps } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState, GetShareResultsButtonProps, GetJumpToQuestionButtonProps } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
@@ -18,6 +18,7 @@ export interface QuizContextValue {
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
+    getJumpToQuestionButtonProps: GetJumpToQuestionButtonProps;
     primaryColorStyles: PrimaryColorStyles;
     customClickItemCallback: boolean;
     customAddToFavoritesCallback: boolean;

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

@@ -1,7 +1,13 @@
-import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps, GetShareResultsButtonProps } from '../../types';
+import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps, GetShareResultsButtonProps, GetJumpToQuestionButtonProps, QuestionsPageOptions } from '../../types';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, favoriteItems?: string[]) => {
+declare const usePropsGetters: ({ questionsPageOptions, favoriteItems, quizEvents, quizApiState, quizLocalState, }: {
+    quizEvents: QuizEventsReturn;
+    quizApiState: QuizAPIReducerState;
+    quizLocalState: QuizLocalReducerState;
+    favoriteItems?: string[] | undefined;
+    questionsPageOptions?: QuestionsPageOptions | undefined;
+}) => {
     getOpenTextInputProps: GetOpenTextInputProps;
     getNextQuestionButtonProps: GetNextQuestionButtonProps;
     getPreviousQuestionButtonProps: GetPreviousQuestionButtonProps;
@@ -17,5 +23,6 @@ declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: Quiz
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
     getSkipQuestionButtonProps: GetSkipQuestionButtonProps;
+    getJumpToQuestionButtonProps: GetJumpToQuestionButtonProps;
 };
 export default usePropsGetters;

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

@@ -0,0 +1,4 @@
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+import { GetJumpToQuestionButtonProps, QuizEventsReturn } from '../../types';
+import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
+export default function useJumpToQuestionButtonProps(jumpToQuestion: QuizEventsReturn.JumpToQuestion, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState): GetJumpToQuestionButtonProps;

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

@@ -1,3 +1,3 @@
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { AnswerInputState, GetSelectInputProps, Question, QuizEventsReturn } from '../../types';
-export default function useSelectInputProps(quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Nullable<Question>, answerInputs?: AnswerInputState): GetSelectInputProps;
+export default function useSelectInputProps(quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged, nextQuestion: QuizEventsReturn.NextQuestion, currentQuestionData?: Nullable<Question>, answerInputs?: AnswerInputState, nextQuestionOnSingleSelect?: boolean): GetSelectInputProps;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
+import { QuizEventsReturn } from '../../types';
+import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
+type IUseJumpToQuestionProps = {
+    dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
+    dispatchApiState: React.Dispatch<ActionQuizAPI>;
+    quizApiState: QuizAPIReducerState;
+};
+declare const useJumpToQuestion: (props: IUseJumpToQuestionProps) => QuizEventsReturn.JumpToQuestion;
+export default useJumpToQuestion;

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

@@ -7,5 +7,5 @@ type IUseQuizResetClickProps = {
     dispatchApiState: React.Dispatch<ActionQuizAPI>;
     quizResults?: QuizResultsResponse | QuizSharedResultsData;
 };
-declare const useQuizResetClick: (props: IUseQuizResetClickProps) => QuizEventsReturn.NextQuestion;
+declare const useQuizResetClick: (props: IUseQuizResetClickProps) => QuizEventsReturn.ResetQuiz;
 export default useQuizResetClick;

package/lib/types/types.d.ts

@@ -46,6 +46,7 @@ export interface ResultsPageOptions {
 }
 export interface QuestionsPageOptions {
     skipQuestionButtonText?: string;
+    nextQuestionOnSingleSelect?: boolean;
 }
 export interface SessionStateOptions {
     showSessionModal?: boolean;
@@ -126,6 +127,7 @@ export declare namespace QuizEventsReturn {
     type SkipQuestion = () => void;
     type PreviousQuestion = () => void;
     type ResetQuiz = () => void;
+    type JumpToQuestion = (questionId: number) => void;
     type ResultClick = (result: QuizResultDataPartial, position: number) => void;
     type AddToCart = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number | string) => void;
     type AddToFavorites = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number | string, sendEvent?: boolean) => void;
@@ -135,6 +137,7 @@ export declare namespace QuizEventsReturn {
 export interface QuizEventsReturn {
     nextQuestion: QuizEventsReturn.NextQuestion;
     skipQuestion: QuizEventsReturn.SkipQuestion;
+    jumpToQuestion: QuizEventsReturn.JumpToQuestion;
     quizAnswerChanged: QuizEventsReturn.QuizAnswerChanged;
     previousQuestion: QuizEventsReturn.PreviousQuestion;
     resetQuiz: QuizEventsReturn.ResetQuiz;
@@ -225,12 +228,18 @@ export interface SelectInputProps {
     tabIndex: number;
     key: number | string;
 }
+export interface JumpToQuestionButtonProps {
+    className: string;
+    onClick: React.MouseEventHandler<HTMLElement>;
+    style?: Record<string, string>;
+}
 export type GetOpenTextInputProps = () => OpenTextInputProps;
 export type GetCoverQuestionProps = () => CoverQuestionProps;
 export type GetSelectInputProps = (option: QuestionOption) => SelectInputProps;
 export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
 export type GetSkipQuestionButtonProps = () => SkipQuestionButtonProps;
 export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
+export type GetJumpToQuestionButtonProps = (id: number) => JumpToQuestionButtonProps;
 export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
 export type GetShareResultsButtonProps = () => ShareResultsButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
@@ -269,6 +278,7 @@ export interface UseQuizReturn {
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;
     getQuizResultButtonProps: GetQuizResultButtonProps;
     getQuizResultLinkProps: GetQuizResultLinkProps;
+    getJumpToQuestionButtonProps: GetJumpToQuestionButtonProps;
     primaryColorStyles: PrimaryColorStyles;
 }
 export type UseQuiz = (quizProps: IQuizProps) => UseQuizReturn;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.18.0";
+declare const _default: "1.19.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -112,7 +112,7 @@
     "storybook": "^7.6.20",
     "ts-jest": "^29.1.2",
     "typescript": "^4.9.4",
-    "vite": "^4.2.1",
+    "vite": "^7.1.5",
     "vite-plugin-css-injected-by-js": "^3.1.0",
     "webpack": "^5.75.0",
     "whatwg-fetch": "^3.6.20"