@constructor-io/constructorio-ui-quizzes 1.3.5 → 1.3.7

package/lib/cjs/components/ControlBar/ControlBar.js

@@ -5,9 +5,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
         showBackButton && react_1.default.createElement(BackButton_1.default, { onClick: backButtonHandler }),
+        instructions && react_1.default.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
         react_1.default.createElement(CTAButton_1.default, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
 }
 exports.default = ControlBar;

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -14,10 +14,12 @@ function SelectTypeQuestion() {
     let question;
     let type;
     let hasImages = false;
+    let instructions;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         type = question.type;
         hasImages = question.options.some((option) => option.images);
+        instructions = type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     const [selected, setSelected] = (0, react_1.useState)({});
     const isDisabled = Object.keys(selected).length === 0;
@@ -76,7 +78,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
                 react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })));
+            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text, instructions: instructions })));
     }
     return null;
 }

package/lib/cjs/services/index.js

@@ -22,14 +22,14 @@ exports.getQuizResults = getQuizResults;
 const trackQuizResultsLoaded = (cioClient, quizResults) => {
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
     cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
-        quiz_id,
-        quiz_version_id,
-        quiz_session_id,
+        quizId: quiz_id,
+        quizVersionId: quiz_version_id,
+        quizSessionId: quiz_session_id,
         url: window.location.href,
         section: request === null || request === void 0 ? void 0 : request.section,
-        result_count: response === null || response === void 0 ? void 0 : response.total_num_results,
-        result_page: request === null || request === void 0 ? void 0 : request.page,
-        result_id,
+        resultCount: response === null || response === void 0 ? void 0 : response.total_num_results,
+        resultPage: request === null || request === void 0 ? void 0 : request.page,
+        resultId: result_id,
     });
 };
 exports.trackQuizResultsLoaded = trackQuizResultsLoaded;
@@ -38,17 +38,17 @@ const trackQuizResultClick = (cioClient, quizResults, result, position) => {
     if (quizResults.request && quizResults.response) {
         const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = quizResults;
         cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultClick({
-            quiz_id,
-            quiz_version_id,
-            quiz_session_id,
-            item_id: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
-            item_name: result === null || result === void 0 ? void 0 : result.value,
+            quizId: quiz_id,
+            quizVersionId: quiz_version_id,
+            quizSessionId: quiz_session_id,
+            itemId: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
+            itemName: result === null || result === void 0 ? void 0 : result.value,
             section,
-            result_count: total_num_results,
-            result_page: page,
-            result_id,
-            result_position_on_page: position,
-            num_results_per_page,
+            resultCount: total_num_results,
+            resultPage: page,
+            resultId: result_id,
+            resultPositionOnPage: position,
+            numResultsPerPage: num_results_per_page,
         });
     }
 };
@@ -58,13 +58,13 @@ const trackQuizConversion = (cioClient, quizResults, result, price) => {
     if (quizResults.request) {
         const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
         cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizConversion({
-            quiz_id,
-            quiz_version_id,
-            quiz_session_id,
-            item_id: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
-            item_name: result.value,
+            quizId: quiz_id,
+            quizVersionId: quiz_version_id,
+            quizSessionId: quiz_session_id,
+            itemId: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
+            itemName: result.value,
             section,
-            variation_id: (_b = result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            variationId: (_b = result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
             revenue: (price && String(price)) || undefined,
         });
     }

package/lib/cjs/stories/Quiz/tests/mocks.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMockContextValue = exports.getMockState = exports.questionOptions = exports.questionOptionsWithImages = exports.getMockQuestionWithImage = exports.getMockQuestion = void 0;
+const getMockQuestion = (type) => ({
+    id: 1,
+    title: 'This is question title',
+    description: 'This is question description',
+    cta_text: 'Continue',
+    type,
+});
+exports.getMockQuestion = getMockQuestion;
+const getMockImages = () => ({
+    images: {
+        primary_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+    },
+});
+const getMockQuestionWithImage = (type) => (Object.assign(Object.assign({}, (0, exports.getMockQuestion)(type)), getMockImages()));
+exports.getMockQuestionWithImage = getMockQuestionWithImage;
+const getMockOption = (id, value) => ({
+    id,
+    value,
+    attribute: {
+        name: value,
+        value,
+    },
+});
+const getMockOptionWithImage = (id, value) => (Object.assign(Object.assign({}, getMockOption(id, value)), getMockImages()));
+exports.questionOptionsWithImages = [
+    Object.assign({}, getMockOptionWithImage(0, 'coffee')),
+    Object.assign({}, getMockOptionWithImage(1, 'tea')),
+    Object.assign({}, getMockOptionWithImage(2, 'water')),
+];
+exports.questionOptions = [
+    Object.assign({}, getMockOption(0, 'coffee')),
+    Object.assign({}, getMockOption(1, 'tea')),
+    Object.assign({}, getMockOption(2, 'water')),
+];
+const getMockState = (question) => ({
+    answers: {
+        inputs: { 1: '' },
+        isLastAnswer: false,
+    },
+    quiz: {
+        requestState: 1,
+        versionId: '',
+        sessionId: '',
+        isFirstQuestion: false,
+        currentQuestion: {
+            next_question: question,
+        },
+        results: {
+            response: {
+                results: [
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '0',
+                            price: 100,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '1',
+                            price: 200,
+                            salePrice: 150,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '2',
+                            price: 300,
+                            salePrice: 250,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                ],
+            },
+        },
+        resultsFilters: ['Chocolate', 'Medium'],
+    },
+});
+exports.getMockState = getMockState;
+const getMockContextValue = (question) => ({
+    state: (0, exports.getMockState)(question),
+    previousQuestion: () => { },
+    nextQuestion: () => { },
+    addToCart: () => { },
+    customClickItemCallback: false,
+    resetQuiz: () => { },
+    resultClick: () => { },
+});
+exports.getMockContextValue = getMockContextValue;

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.defaultOnQuizResultsLoadedCode = exports.defaultOnQuizResultClickCode = exports.defaultOnAddToCartClickCode = exports.getStoryParams = exports.renderImages = void 0;
+exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.defaultOnQuizResultsLoadedCode = exports.defaultOnQuizResultClickCode = exports.defaultOnAddToCartClickCode = exports.getStoryParams = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const actions_1 = require("./components/CioQuiz/actions");
@@ -117,6 +117,12 @@ const getFilterValuesFromExpression = (exp) => {
     return [];
 };
 exports.getFilterValuesFromExpression = getFilterValuesFromExpression;
+// Function to emulate pausing between interactions
+function sleep(ms) {
+    // eslint-disable-next-line
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
 function rgbToHsl(r, g, b) {
     const rConverted = r / 255;
     const gConverted = g / 255;

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -2,9 +2,10 @@ import React from 'react';
 import BackButton from '../BackButton/BackButton';
 import CTAButton from '../CTAButton/CTAButton';
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
     return (React.createElement("div", { className: 'cio-question-buttons-container' },
         showBackButton && React.createElement(BackButton, { onClick: backButtonHandler }),
+        instructions && React.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
         React.createElement(CTAButton, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
 }
 export default ControlBar;

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -10,10 +10,12 @@ function SelectTypeQuestion() {
     let question;
     let type;
     let hasImages = false;
+    let instructions;
     if (state?.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         type = question.type;
         hasImages = question.options.some((option) => option.images);
+        instructions = type === QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     const [selected, setSelected] = useState({});
     const isDisabled = Object.keys(selected).length === 0;
@@ -71,7 +73,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
                 React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })));
+            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text, instructions: instructions })));
     }
     return null;
 }

package/lib/mjs/services/index.js

@@ -15,31 +15,31 @@ export const getQuizResults = async (cioClient, quizId, parameters) => cioClient
 export const trackQuizResultsLoaded = (cioClient, quizResults) => {
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
     cioClient?.tracker.trackQuizResultsLoaded({
-        quiz_id,
-        quiz_version_id,
-        quiz_session_id,
+        quizId: quiz_id,
+        quizVersionId: quiz_version_id,
+        quizSessionId: quiz_session_id,
         url: window.location.href,
         section: request?.section,
-        result_count: response?.total_num_results,
-        result_page: request?.page,
-        result_id,
+        resultCount: response?.total_num_results,
+        resultPage: request?.page,
+        resultId: result_id,
     });
 };
 export const trackQuizResultClick = (cioClient, quizResults, result, position) => {
     if (quizResults.request && quizResults.response) {
         const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = quizResults;
         cioClient?.tracker.trackQuizResultClick({
-            quiz_id,
-            quiz_version_id,
-            quiz_session_id,
-            item_id: result.data?.id,
-            item_name: result?.value,
+            quizId: quiz_id,
+            quizVersionId: quiz_version_id,
+            quizSessionId: quiz_session_id,
+            itemId: result.data?.id,
+            itemName: result?.value,
             section,
-            result_count: total_num_results,
-            result_page: page,
-            result_id,
-            result_position_on_page: position,
-            num_results_per_page,
+            resultCount: total_num_results,
+            resultPage: page,
+            resultId: result_id,
+            resultPositionOnPage: position,
+            numResultsPerPage: num_results_per_page,
         });
     }
 };
@@ -47,13 +47,13 @@ export const trackQuizConversion = (cioClient, quizResults, result, price) => {
     if (quizResults.request) {
         const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = quizResults;
         cioClient?.tracker.trackQuizConversion({
-            quiz_id,
-            quiz_version_id,
-            quiz_session_id,
-            item_id: result.data?.id,
-            item_name: result.value,
+            quizId: quiz_id,
+            quizVersionId: quiz_version_id,
+            quizSessionId: quiz_session_id,
+            itemId: result.data?.id,
+            itemName: result.value,
             section,
-            variation_id: result.data?.variation_id,
+            variationId: result.data?.variation_id,
             revenue: (price && String(price)) || undefined,
         });
     }

package/lib/mjs/stories/Quiz/tests/mocks.js

@@ -0,0 +1,107 @@
+export const getMockQuestion = (type) => ({
+    id: 1,
+    title: 'This is question title',
+    description: 'This is question description',
+    cta_text: 'Continue',
+    type,
+});
+const getMockImages = () => ({
+    images: {
+        primary_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+    },
+});
+export const getMockQuestionWithImage = (type) => ({
+    ...getMockQuestion(type),
+    ...getMockImages(),
+});
+const getMockOption = (id, value) => ({
+    id,
+    value,
+    attribute: {
+        name: value,
+        value,
+    },
+});
+const getMockOptionWithImage = (id, value) => ({
+    ...getMockOption(id, value),
+    ...getMockImages(),
+});
+export const questionOptionsWithImages = [
+    {
+        ...getMockOptionWithImage(0, 'coffee'),
+    },
+    {
+        ...getMockOptionWithImage(1, 'tea'),
+    },
+    {
+        ...getMockOptionWithImage(2, 'water'),
+    },
+];
+export const questionOptions = [
+    {
+        ...getMockOption(0, 'coffee'),
+    },
+    {
+        ...getMockOption(1, 'tea'),
+    },
+    {
+        ...getMockOption(2, 'water'),
+    },
+];
+export const getMockState = (question) => ({
+    answers: {
+        inputs: { 1: '' },
+        isLastAnswer: false,
+    },
+    quiz: {
+        requestState: 1,
+        versionId: '',
+        sessionId: '',
+        isFirstQuestion: false,
+        currentQuestion: {
+            next_question: question,
+        },
+        results: {
+            response: {
+                results: [
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '0',
+                            price: 100,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '1',
+                            price: 200,
+                            salePrice: 150,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                    {
+                        value: 'This is a result card item',
+                        data: {
+                            id: '2',
+                            price: 300,
+                            salePrice: 250,
+                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                        },
+                    },
+                ],
+            },
+        },
+        resultsFilters: ['Chocolate', 'Medium'],
+    },
+});
+export const getMockContextValue = (question) => ({
+    state: getMockState(question),
+    previousQuestion: () => { },
+    nextQuestion: () => { },
+    addToCart: () => { },
+    customClickItemCallback: false,
+    resetQuiz: () => { },
+    resultClick: () => { },
+});

package/lib/mjs/utils.js

@@ -104,6 +104,11 @@ export const getFilterValuesFromExpression = (exp) => {
     }
     return [];
 };
+// Function to emulate pausing between interactions
+export function sleep(ms) {
+    // eslint-disable-next-line
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
 export function rgbToHsl(r, g, b) {
     const rConverted = r / 255;
     const gConverted = g / 255;

package/lib/styles.css

@@ -192,6 +192,9 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
+.cio-question-buttons-container-text {
+  display: none;
+}
 .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
@@ -455,6 +458,7 @@
   height: 240px;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 10px;
 }
 .cio-result-card-image img {
   height: 100%;
@@ -593,6 +597,15 @@
   .cio-result-card {
     flex-basis: 30%;
   }
+
+  /* Control Bar Instructions */
+    .cio-question-buttons-container-text {
+    text-align: center;
+    flex-grow: 1;
+    color: var(--gray-dust-100);
+    font-size: 1.125rem;
+    display: block;
+  }
 }
 
 /* Big Tablet */

package/lib/types/components/ControlBar/ControlBar.d.ts

@@ -5,6 +5,7 @@ interface ControlBarProps {
     backButtonHandler?: () => void;
     nextButtonHandler: () => void;
     ctaButtonText?: string;
+    instructions?: string;
 }
 declare function ControlBar(props: ControlBarProps): JSX.Element;
 export default ControlBar;

package/lib/types/stories/Quiz/tests/mocks.d.ts

@@ -0,0 +1,41 @@
+import { Question } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { QuestionTypes } from '../../../components/CioQuiz/actions';
+import { QuizContextValue } from '../../../components/CioQuiz/context';
+export declare const getMockQuestion: (type: QuestionTypes) => {
+    id: number;
+    title: string;
+    description: string;
+    cta_text: string;
+    type: QuestionTypes;
+};
+export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
+    images: {
+        primary_url: string;
+    };
+    id: number;
+    title: string;
+    description: string;
+    cta_text: string;
+    type: QuestionTypes;
+};
+export declare const questionOptionsWithImages: {
+    images: {
+        primary_url: string;
+    };
+    id: any;
+    value: any;
+    attribute: {
+        name: any;
+        value: any;
+    };
+}[];
+export declare const questionOptions: {
+    id: any;
+    value: any;
+    attribute: {
+        name: any;
+        value: any;
+    };
+}[];
+export declare const getMockState: (question?: Question) => any;
+export declare const getMockContextValue: (question?: Question) => QuizContextValue;

package/lib/types/utils.d.ts

@@ -34,5 +34,6 @@ 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 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.5",
+  "version": "1.3.7",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -54,12 +54,13 @@
     "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause' --excludePackages 'picocolors@1.0.0'"
   },
   "peerDependencies": {
-    "@constructor-io/constructorio-client-javascript": "^2.35.6",
+    "@constructor-io/constructorio-client-javascript": "^2.35.12",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@axe-core/react": "^4.7.0",
     "@cspell/eslint-plugin": "^6.18.1",
     "@storybook/addon-a11y": "^7.0.11",
     "@storybook/addon-actions": "7.0.11",
@@ -91,8 +92,8 @@
     "start-server-and-test": "^2.0.0",
     "storybook": "7.0.11",
     "typescript": "^4.9.4",
-    "webpack": "^5.75.0",
     "vite": "^4.2.1",
-    "vite-plugin-css-injected-by-js": "^3.1.0"
+    "vite-plugin-css-injected-by-js": "^3.1.0",
+    "webpack": "^5.75.0"
   }
 }