@constructor-io/constructorio-ui-quizzes 1.16.4 → 1.17.0

package/lib/cjs/components/QuizResultsSummary/QuizResultsSummary.js

@@ -28,7 +28,7 @@ const getSummaryVariables = ({ summary, matchedOptions = [] }) => {
 function QuizResultsSummary({ summary, matchedOptions = [], }) {
     const { summaryFirstPart, summaryLastPart, itemsSeparator, lastSeparator, isActiveSummary } = getSummaryVariables({ summary, matchedOptions });
     const matchedOptionsTemplate = (0, utils_1.formatMatchedOptions)(matchedOptions, itemsSeparator, lastSeparator);
-    if (!isActiveSummary)
+    if (!isActiveSummary || !matchedOptions.length)
         return null;
     return (react_1.default.createElement("p", { className: 'cio-results-explanation' },
         !!(summaryFirstPart === null || summaryFirstPart === void 0 ? void 0 : summaryFirstPart.length) && summaryFirstPart,

package/lib/cjs/hooks/usePropsGetters/useCoverQuestionProps.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
 function useCoverQuestionProps(setQuizAnswers, currentQuestionData) {
     (0, react_1.useEffect)(() => {
-        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'cover') {
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.Cover) {
             setQuizAnswers('');
         }
     }, [setQuizAnswers, currentQuestionData]);

package/lib/cjs/hooks/useQueryParams.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useQueryParams = () => {
     const getParsedQueryParam = (queryName) => {
+        if (typeof window === 'undefined')
+            return [];
         const queryParams = new URLSearchParams(window.location.search);
         const queryParam = queryParams.get(queryName);
         if (!queryParam)
@@ -13,6 +15,8 @@ const useQueryParams = () => {
     const queryAttributes = getParsedQueryParam('attributes');
     const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
     const removeSharedResultsQueryParams = (0, react_1.useCallback)(() => {
+        if (typeof window === 'undefined')
+            return;
         const updatedUrl = new URL(window.location.href);
         updatedUrl.searchParams.delete('items');
         updatedUrl.searchParams.delete('attributes');

package/lib/cjs/hooks/useShareResultsLink.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function useShareResultsLink(quizState) {
     var _a, _b, _c;
+    if (typeof window === 'undefined') {
+        return '';
+    }
     const urlObj = new URL(window.location.href);
     const existingParams = urlObj.searchParams;
     if (!((_b = (_a = quizState.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {

package/lib/cjs/utils.js

@@ -8,6 +8,9 @@ const actions_1 = require("./components/CioQuiz/actions");
 const renderImages = (images, cssClasses) => {
     const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
     if (primaryUrl) {
+        if (typeof window === 'undefined') {
+            return null;
+        }
         const windowWidth = window.innerWidth;
         let src = primaryUrl;
         let alt = primaryAlt || '';
@@ -88,18 +91,21 @@ function getPreferredColorScheme() {
     var _a;
     let colorScheme = 'light';
     // Check if the dark-mode Media-Query matches
-    if ((_a = window.matchMedia('(prefers-color-scheme: dark)')) === null || _a === void 0 ? void 0 : _a.matches) {
+    if (typeof window !== 'undefined' && ((_a = window.matchMedia('(prefers-color-scheme: dark)')) === null || _a === void 0 ? void 0 : _a.matches)) {
         colorScheme = 'dark';
     }
     return colorScheme;
 }
 exports.getPreferredColorScheme = getPreferredColorScheme;
 function isFunction(fn) {
-    return fn && typeof fn === 'function';
+    return !!(fn && typeof fn === 'function');
 }
 exports.isFunction = isFunction;
 const getStateFromSessionStorage = (quizStateKey) => {
     var _a;
+    if (typeof window === 'undefined') {
+        return null;
+    }
     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);
@@ -112,6 +118,7 @@ const resetQuizSessionStorageState = (quizStateKey) => () => {
     (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(quizStateKey);
 };
 exports.resetQuizSessionStorageState = resetQuizSessionStorageState;
+/* istanbul ignore next */
 const logger = (action) => {
     var _a;
     try {
@@ -127,6 +134,7 @@ const logger = (action) => {
     }
 };
 exports.logger = logger;
+/* istanbul ignore next */
 // Function to emulate pausing between interactions
 function sleep(ms) {
     // eslint-disable-next-line

package/lib/cjs/version.js

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

package/lib/mjs/components/QuizResultsSummary/QuizResultsSummary.js

@@ -25,7 +25,7 @@ const getSummaryVariables = ({ summary, matchedOptions = [] }) => {
 export default function QuizResultsSummary({ summary, matchedOptions = [], }) {
     const { summaryFirstPart, summaryLastPart, itemsSeparator, lastSeparator, isActiveSummary } = getSummaryVariables({ summary, matchedOptions });
     const matchedOptionsTemplate = formatMatchedOptions(matchedOptions, itemsSeparator, lastSeparator);
-    if (!isActiveSummary)
+    if (!isActiveSummary || !matchedOptions.length)
         return null;
     return (React.createElement("p", { className: 'cio-results-explanation' },
         !!summaryFirstPart?.length && summaryFirstPart,

package/lib/mjs/hooks/usePropsGetters/useCoverQuestionProps.js

@@ -1,7 +1,8 @@
 import { useCallback, useEffect } from 'react';
+import { QuestionTypes } from '../../components/CioQuiz/actions';
 export default function useCoverQuestionProps(setQuizAnswers, currentQuestionData) {
     useEffect(() => {
-        if (currentQuestionData?.type === 'cover') {
+        if (currentQuestionData?.type === QuestionTypes.Cover) {
             setQuizAnswers('');
         }
     }, [setQuizAnswers, currentQuestionData]);

package/lib/mjs/hooks/useQueryParams.js

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
 const useQueryParams = () => {
     const getParsedQueryParam = (queryName) => {
+        if (typeof window === 'undefined')
+            return [];
         const queryParams = new URLSearchParams(window.location.search);
         const queryParam = queryParams.get(queryName);
         if (!queryParam)
@@ -11,6 +13,8 @@ const useQueryParams = () => {
     const queryAttributes = getParsedQueryParam('attributes');
     const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
     const removeSharedResultsQueryParams = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
         const updatedUrl = new URL(window.location.href);
         updatedUrl.searchParams.delete('items');
         updatedUrl.searchParams.delete('attributes');

package/lib/mjs/hooks/useShareResultsLink.js

@@ -1,4 +1,7 @@
 export default function useShareResultsLink(quizState) {
+    if (typeof window === 'undefined') {
+        return '';
+    }
     const urlObj = new URL(window.location.href);
     const existingParams = urlObj.searchParams;
     if (!quizState.results?.response?.results) {

package/lib/mjs/utils.js

@@ -4,6 +4,9 @@ import { QuestionTypes } from './components/CioQuiz/actions';
 export const renderImages = (images, cssClasses) => {
     const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
     if (primaryUrl) {
+        if (typeof window === 'undefined') {
+            return null;
+        }
         const windowWidth = window.innerWidth;
         let src = primaryUrl;
         let alt = primaryAlt || '';
@@ -79,15 +82,18 @@ export const getQuestionTypes = (questionType) => {
 export function getPreferredColorScheme() {
     let colorScheme = 'light';
     // Check if the dark-mode Media-Query matches
-    if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
+    if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
         colorScheme = 'dark';
     }
     return colorScheme;
 }
 export function isFunction(fn) {
-    return fn && typeof fn === 'function';
+    return !!(fn && typeof fn === 'function');
 }
 export const getStateFromSessionStorage = (quizStateKey) => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
     const state = window?.sessionStorage?.getItem(quizStateKey);
     if (state) {
         return JSON.parse(state);
@@ -97,6 +103,7 @@ export const getStateFromSessionStorage = (quizStateKey) => {
 export const resetQuizSessionStorageState = (quizStateKey) => () => {
     window?.sessionStorage?.removeItem(quizStateKey);
 };
+/* istanbul ignore next */
 export const logger = (action) => {
     try {
         if (typeof process !== 'undefined' && process?.env?.LOGGER) {
@@ -110,6 +117,7 @@ export const logger = (action) => {
         // process variable is not available and logger should not be active
     }
 };
+/* istanbul ignore next */
 // Function to emulate pausing between interactions
 export function sleep(ms) {
     // eslint-disable-next-line

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.16.4';
+export default '1.17.0';

package/lib/types/types.d.ts

@@ -155,6 +155,8 @@ export interface PreviousQuestionButtonProps {
     type: 'submit' | 'reset' | 'button' | undefined;
     onClick: React.MouseEventHandler<HTMLElement>;
     style?: Record<string, string>;
+    role?: string;
+    title?: string;
 }
 export interface ResetQuizButtonProps {
     className: string;

package/lib/types/utils.d.ts

@@ -1,7 +1,7 @@
 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 renderImages: (images: Partial<QuestionImages>, cssClasses?: string) => JSX.Element | "" | null;
 export declare const functionStrings: {
     onAddToCartClick: string;
     onQuizResultClick: string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.16.4";
+declare const _default: "1.17.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.16.4",
+  "version": "1.17.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -98,9 +98,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^6.2.0",
+    "fishery": "^2.2.2",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fail-on-console": "^3.2.0",
     "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",