@constructor-io/constructorio-ui-quizzes 1.17.16 → 1.17.18

package/lib/cjs/hooks/useQuiz.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = require("react");
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
 const usePropsGetters_1 = tslib_1.__importDefault(require("./usePropsGetters"));
@@ -21,14 +20,8 @@ const useQuiz = (quizOptions) => {
     const quizEvents = (0, useQuizEvents_1.default)(quizOptions, cioClient, quizState);
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
-    const { skipToResults } = quizSessionStorageState;
     const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.favoriteItems);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
-    (0, react_1.useEffect)(() => {
-        if (skipToResults)
-            quizEvents.hydrateQuiz();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,

package/lib/cjs/hooks/useQuizEvents/index.js

@@ -30,15 +30,16 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const addToFavorites = (0, useQuizAddToFavorites_1.default)(cioClient, quizApiState, onAddToFavoritesClick);
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
+    const resetSessionStorageState = (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key, quizOptions.quizId);
     // Quiz reset
     const resetQuiz = (0, useQuizResetClick_1.default)({
-        resetQuizSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),
+        resetQuizSessionStorageState: resetSessionStorageState,
         dispatchLocalState,
         dispatchApiState,
         quizResults: quizApiState.quizResults,
     });
     // Quiz rehydrate
-    const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizSessionStorageState.key, dispatchLocalState);
+    const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizOptions.quizId, quizSessionStorageState, dispatchLocalState);
     return {
         addToCart,
         addToFavorites,
@@ -49,7 +50,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),
+        resetSessionStorageState,
     };
 };
 exports.default = useQuizEvents;

package/lib/cjs/hooks/useQuizEvents/useHydrateQuizLocalState.js

@@ -3,16 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
 const utils_1 = require("../../utils");
-const useHydrateQuizLocalState = (quizSessionStorageStateKey, dispatchLocalState) => {
+const useHydrateQuizLocalState = (quizId, quizSessionStorageState, dispatchLocalState) => {
+    const { key: quizSessionStorageStateKey, skipToResults } = quizSessionStorageState;
     const sessionStorageQuizState = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
     const hydrateQuizLocalStateHandler = (0, react_1.useCallback)(() => {
-        if (sessionStorageQuizState) {
+        const quizData = sessionStorageQuizState === null || sessionStorageQuizState === void 0 ? void 0 : sessionStorageQuizState[quizId];
+        if (quizData) {
             dispatchLocalState({
                 type: actions_1.QuestionTypes.Hydrate,
-                payload: sessionStorageQuizState,
+                payload: quizData,
             });
         }
-    }, [dispatchLocalState, sessionStorageQuizState]);
+    }, [dispatchLocalState, quizId, sessionStorageQuizState]);
+    (0, react_1.useEffect)(() => {
+        if (skipToResults)
+            hydrateQuizLocalStateHandler();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return hydrateQuizLocalStateHandler;
 };
 exports.default = useHydrateQuizLocalState;

package/lib/cjs/hooks/useQuizState/index.js

@@ -9,7 +9,7 @@ const useQuizState = (quizOptions, cioClient) => {
     // Quiz Local state
     const { quizLocalState, dispatchLocalState } = (0, useQuizLocalState_1.default)();
     // Quiz Session Storage state
-    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = (0, useSessionStorageState_1.default)(quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
+    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = (0, useSessionStorageState_1.default)(quizOptions.quizId, quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
     // Quiz API state
     const { quizApiState, dispatchApiState } = (0, useQuizApiState_1.default)(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const constants_1 = require("../../constants");
-const useSessionStorageState = (quizLocalState, sessionStateOptions, enableHydration) => {
+const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, enableHydration) => {
     var _a;
     const quizSessionStorageStateKey = (sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.sessionStateKey) || constants_1.quizSessionStateKey;
     // Save state to session storage
@@ -11,16 +11,19 @@ const useSessionStorageState = (quizLocalState, sessionStateOptions, enableHydra
         var _a, _b;
         // don't save state if initial state
         if (enableHydration && ((_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(quizSessionStorageStateKey, JSON.stringify(quizLocalState));
+            const data = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
+            const dataToSave = Object.assign(Object.assign({}, data), { [quizId]: quizLocalState });
+            (_b = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(quizSessionStorageStateKey, JSON.stringify(dataToSave));
         }
-    }, [quizLocalState, quizSessionStorageStateKey, enableHydration]);
+    }, [quizLocalState, quizSessionStorageStateKey, enableHydration, quizId]);
+    const quizData = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey);
     const skipToResults = !!enableHydration &&
-        !!((_a = (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey)) === null || _a === void 0 ? void 0 : _a.isQuizCompleted) &&
+        !!((_a = quizData === null || quizData === void 0 ? void 0 : quizData[quizId]) === null || _a === void 0 ? void 0 : _a.isQuizCompleted) &&
         !(sessionStateOptions === null || sessionStateOptions === void 0 ? void 0 : sessionStateOptions.showSessionModalOnResults);
     return {
         skipToResults,
         quizSessionStorageStateKey,
-        hasSessionStorageState: () => (0, utils_1.getStateFromSessionStorage)(quizSessionStorageStateKey) !== null,
+        hasSessionStorageState: () => !!quizData && !!quizData[quizId],
     };
 };
 exports.default = useSessionStorageState;

package/lib/cjs/utils.js

@@ -113,9 +113,13 @@ const getStateFromSessionStorage = (quizStateKey) => {
     return null;
 };
 exports.getStateFromSessionStorage = getStateFromSessionStorage;
-const resetQuizSessionStorageState = (quizStateKey) => () => {
+const resetQuizSessionStorageState = (quizStateKey, quizId) => () => {
     var _a;
-    (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(quizStateKey);
+    const quizData = (0, exports.getStateFromSessionStorage)(quizStateKey);
+    if (quizData) {
+        const updatedData = Object.assign(Object.assign({}, quizData), { [quizId]: null });
+        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(quizStateKey, JSON.stringify(updatedData));
+    }
 };
 exports.resetQuizSessionStorageState = resetQuizSessionStorageState;
 /* istanbul ignore next */
@@ -167,9 +171,9 @@ function rgbToHsl(r, g, b) {
 exports.rgbToHsl = rgbToHsl;
 function convertPrimaryColorsToString(primaryColorStyles) {
     return `{
-    --primary-color-h: ${primaryColorStyles['--primary-color-h']}; 
-    --primary-color-s: ${primaryColorStyles['--primary-color-s']}; 
-    --primary-color-l: ${primaryColorStyles['--primary-color-l']}; 
+    --primary-color-h: ${primaryColorStyles['--primary-color-h']};
+    --primary-color-s: ${primaryColorStyles['--primary-color-s']};
+    --primary-color-l: ${primaryColorStyles['--primary-color-l']};
   }`;
 }
 exports.convertPrimaryColorsToString = convertPrimaryColorsToString;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.17.16';
+exports.default = '1.17.18';

package/lib/mjs/hooks/useQuiz.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import useCioClient from './useCioClient';
 import useConsoleErrors from './useConsoleErrors';
 import usePropsGetters from './usePropsGetters';
@@ -17,14 +16,8 @@ const useQuiz = (quizOptions) => {
     const quizEvents = useQuizEvents(quizOptions, cioClient, quizState);
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
-    const { skipToResults } = quizSessionStorageState;
     const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState, resultsPageOptions?.favoriteItems);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
-    useEffect(() => {
-        if (skipToResults)
-            quizEvents.hydrateQuiz();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     return {
         cioClient,
         state: {

package/lib/mjs/hooks/useQuizEvents/index.js

@@ -27,15 +27,16 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const addToFavorites = useQuizAddToFavorites(cioClient, quizApiState, onAddToFavoritesClick);
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
+    const resetSessionStorageState = resetQuizSessionStorageState(quizSessionStorageState.key, quizOptions.quizId);
     // Quiz reset
     const resetQuiz = useQuizResetClick({
-        resetQuizSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),
+        resetQuizSessionStorageState: resetSessionStorageState,
         dispatchLocalState,
         dispatchApiState,
         quizResults: quizApiState.quizResults,
     });
     // Quiz rehydrate
-    const hydrateQuizLocalState = useHydrateQuizLocalState(quizSessionStorageState.key, dispatchLocalState);
+    const hydrateQuizLocalState = useHydrateQuizLocalState(quizOptions.quizId, quizSessionStorageState, dispatchLocalState);
     return {
         addToCart,
         addToFavorites,
@@ -46,7 +47,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
-        resetSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),
+        resetSessionStorageState,
     };
 };
 export default useQuizEvents;

package/lib/mjs/hooks/useQuizEvents/useHydrateQuizLocalState.js

@@ -1,16 +1,23 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { QuestionTypes } from '../../components/CioQuiz/actions';
 import { getStateFromSessionStorage } from '../../utils';
-const useHydrateQuizLocalState = (quizSessionStorageStateKey, dispatchLocalState) => {
+const useHydrateQuizLocalState = (quizId, quizSessionStorageState, dispatchLocalState) => {
+    const { key: quizSessionStorageStateKey, skipToResults } = quizSessionStorageState;
     const sessionStorageQuizState = getStateFromSessionStorage(quizSessionStorageStateKey);
     const hydrateQuizLocalStateHandler = useCallback(() => {
-        if (sessionStorageQuizState) {
+        const quizData = sessionStorageQuizState?.[quizId];
+        if (quizData) {
             dispatchLocalState({
                 type: QuestionTypes.Hydrate,
-                payload: sessionStorageQuizState,
+                payload: quizData,
             });
         }
-    }, [dispatchLocalState, sessionStorageQuizState]);
+    }, [dispatchLocalState, quizId, sessionStorageQuizState]);
+    useEffect(() => {
+        if (skipToResults)
+            hydrateQuizLocalStateHandler();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return hydrateQuizLocalStateHandler;
 };
 export default useHydrateQuizLocalState;

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

@@ -6,7 +6,7 @@ const useQuizState = (quizOptions, cioClient) => {
     // Quiz Local state
     const { quizLocalState, dispatchLocalState } = useQuizLocalState();
     // Quiz Session Storage state
-    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = useSessionStorageState(quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
+    const { skipToResults, quizSessionStorageStateKey, hasSessionStorageState } = useSessionStorageState(quizOptions.quizId, quizLocalState, sessionStateOptions, enableHydration === undefined ? true : enableHydration);
     // Quiz API state
     const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {

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

@@ -1,22 +1,28 @@
 import { useEffect } from 'react';
 import { getStateFromSessionStorage } from '../../utils';
 import { quizSessionStateKey } from '../../constants';
-const useSessionStorageState = (quizLocalState, sessionStateOptions, enableHydration) => {
+const useSessionStorageState = (quizId, quizLocalState, sessionStateOptions, enableHydration) => {
     const quizSessionStorageStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
     // Save state to session storage
     useEffect(() => {
         // don't save state if initial state
         if (enableHydration && quizLocalState?.answers?.length) {
-            window?.sessionStorage?.setItem(quizSessionStorageStateKey, JSON.stringify(quizLocalState));
+            const data = getStateFromSessionStorage(quizSessionStorageStateKey);
+            const dataToSave = {
+                ...data,
+                [quizId]: quizLocalState,
+            };
+            window?.sessionStorage?.setItem(quizSessionStorageStateKey, JSON.stringify(dataToSave));
         }
-    }, [quizLocalState, quizSessionStorageStateKey, enableHydration]);
+    }, [quizLocalState, quizSessionStorageStateKey, enableHydration, quizId]);
+    const quizData = getStateFromSessionStorage(quizSessionStorageStateKey);
     const skipToResults = !!enableHydration &&
-        !!getStateFromSessionStorage(quizSessionStorageStateKey)?.isQuizCompleted &&
+        !!quizData?.[quizId]?.isQuizCompleted &&
         !sessionStateOptions?.showSessionModalOnResults;
     return {
         skipToResults,
         quizSessionStorageStateKey,
-        hasSessionStorageState: () => getStateFromSessionStorage(quizSessionStorageStateKey) !== null,
+        hasSessionStorageState: () => !!quizData && !!quizData[quizId],
     };
 };
 export default useSessionStorageState;

package/lib/mjs/utils.js

@@ -100,8 +100,12 @@ export const getStateFromSessionStorage = (quizStateKey) => {
     }
     return null;
 };
-export const resetQuizSessionStorageState = (quizStateKey) => () => {
-    window?.sessionStorage?.removeItem(quizStateKey);
+export const resetQuizSessionStorageState = (quizStateKey, quizId) => () => {
+    const quizData = getStateFromSessionStorage(quizStateKey);
+    if (quizData) {
+        const updatedData = { ...quizData, [quizId]: null };
+        window?.sessionStorage?.setItem(quizStateKey, JSON.stringify(updatedData));
+    }
 };
 /* istanbul ignore next */
 export const logger = (action) => {
@@ -148,9 +152,9 @@ export function rgbToHsl(r, g, b) {
 }
 export function convertPrimaryColorsToString(primaryColorStyles) {
     return `{
-    --primary-color-h: ${primaryColorStyles['--primary-color-h']}; 
-    --primary-color-s: ${primaryColorStyles['--primary-color-s']}; 
-    --primary-color-l: ${primaryColorStyles['--primary-color-l']}; 
+    --primary-color-h: ${primaryColorStyles['--primary-color-h']};
+    --primary-color-s: ${primaryColorStyles['--primary-color-s']};
+    --primary-color-l: ${primaryColorStyles['--primary-color-l']};
   }`;
 }
 export function formatMatchedOptions(options, separator, lastSeparator) {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.16';
+export default '1.17.18';

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

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

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

@@ -1,6 +1,6 @@
 import { SessionStateOptions } from '../../types';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-declare const useSessionStorageState: (quizLocalState?: QuizLocalReducerState, sessionStateOptions?: SessionStateOptions, enableHydration?: boolean) => {
+declare const useSessionStorageState: (quizId: string, quizLocalState?: QuizLocalReducerState, sessionStateOptions?: SessionStateOptions, enableHydration?: boolean) => {
     skipToResults: boolean;
     quizSessionStorageStateKey: string;
     hasSessionStorageState: () => boolean;

package/lib/types/utils.d.ts

@@ -31,7 +31,7 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
 export declare function getPreferredColorScheme(): string;
 export declare function isFunction(fn: any): boolean;
 export declare const getStateFromSessionStorage: (quizStateKey: string) => QuizLocalReducerState | null;
-export declare const resetQuizSessionStorageState: (quizStateKey: string) => () => void;
+export declare const resetQuizSessionStorageState: (quizStateKey: string, quizId: 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[];

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.16";
+declare const _default: "1.17.18";
 export default _default;

package/package.json

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