@constructor-io/constructorio-ui-quizzes 1.6.0 → 1.7.1

package/lib/cjs/components/CioQuiz/index.js

@@ -11,6 +11,7 @@ const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 const utils_1 = require("../../utils");
+const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
@@ -65,6 +66,7 @@ function CioQuiz(props) {
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ProgressBar_1.default, null),
                 react_1.default.createElement(QuizQuestions_1.default, null),
                 react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }

package/lib/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function ProgressBar() {
+    const { state } = (0, react_1.useContext)(context_1.default);
+    const currentQuestion = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion;
+    if (!currentQuestion)
+        return null;
+    return (react_1.default.createElement("div", { className: 'cio-question-progress-affixed-container' },
+        react_1.default.createElement("div", { className: 'cio-question-progress-progress-container' },
+            react_1.default.createElement("div", { className: 'cio-question-progress-progress-bar', style: {
+                    width: `${((currentQuestion.next_question.id - 1) / currentQuestion.total_questions) * 100}%`,
+                } }))));
+}
+exports.default = ProgressBar;

package/lib/cjs/components/QuizQuestions/index.js

@@ -12,9 +12,12 @@ function QuizQuestions() {
     const { state } = (0, react_1.useContext)(context_1.default);
     const nextQuestion = (_a = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
     const questionTypes = (0, utils_1.getQuestionTypes)(nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.type);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        questionTypes.isOpenQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
-        questionTypes.isCoverQuestion && react_1.default.createElement(CoverTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
-        questionTypes.isSelectQuestion && react_1.default.createElement(SelectTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id })));
+    if (nextQuestion) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            questionTypes.isOpenQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
+            questionTypes.isCoverQuestion && react_1.default.createElement(CoverTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
+            questionTypes.isSelectQuestion && react_1.default.createElement(SelectTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id })));
+    }
+    return null;
 }
 exports.default = QuizQuestions;

package/lib/cjs/services/index.js

@@ -20,7 +20,16 @@ const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void
 exports.getQuizResults = getQuizResults;
 // Tracking requests
 const trackQuizResultsLoaded = (cioClient, quizResults) => {
+    var _a;
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    const items = (_a = response === null || response === void 0 ? void 0 : response.results) === null || _a === void 0 ? void 0 : _a.map((result) => {
+        var _a, _b;
+        return ({
+            itemId: (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id,
+            variationId: (_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            itemName: result === null || result === void 0 ? void 0 : result.value,
+        });
+    });
     cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
         quizId: quiz_id,
         quizVersionId: quiz_version_id,
@@ -30,6 +39,7 @@ const trackQuizResultsLoaded = (cioClient, quizResults) => {
         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,
+        items,
     });
 };
 exports.trackQuizResultsLoaded = trackQuizResultsLoaded;

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

@@ -64,6 +64,7 @@ const getMockState = (question) => ({
             isSingleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
             isMultipleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'multiple',
             isSelectQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
+            total_questions: 1,
         },
         results: {
             response: {

package/lib/mjs/components/CioQuiz/index.js

@@ -8,6 +8,7 @@ import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
+import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
@@ -61,6 +62,7 @@ export default function CioQuiz(props) {
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+                React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),
                 React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
     }

package/lib/mjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+export default function ProgressBar() {
+    const { state } = useContext(QuizContext);
+    const currentQuestion = state?.quiz.currentQuestion;
+    if (!currentQuestion)
+        return null;
+    return (React.createElement("div", { className: 'cio-question-progress-affixed-container' },
+        React.createElement("div", { className: 'cio-question-progress-progress-container' },
+            React.createElement("div", { className: 'cio-question-progress-progress-bar', style: {
+                    width: `${((currentQuestion.next_question.id - 1) / currentQuestion.total_questions) * 100}%`,
+                } }))));
+}

package/lib/mjs/components/QuizQuestions/index.js

@@ -8,8 +8,11 @@ export default function QuizQuestions() {
     const { state } = useContext(QuizContext);
     const nextQuestion = state?.quiz.currentQuestion?.next_question;
     const questionTypes = getQuestionTypes(nextQuestion?.type);
-    return (React.createElement(React.Fragment, null,
-        questionTypes.isOpenQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),
-        questionTypes.isCoverQuestion && React.createElement(CoverTypeQuestion, { key: nextQuestion?.id }),
-        questionTypes.isSelectQuestion && React.createElement(SelectTypeQuestion, { key: nextQuestion?.id })));
+    if (nextQuestion) {
+        return (React.createElement(React.Fragment, null,
+            questionTypes.isOpenQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),
+            questionTypes.isCoverQuestion && React.createElement(CoverTypeQuestion, { key: nextQuestion?.id }),
+            questionTypes.isSelectQuestion && React.createElement(SelectTypeQuestion, { key: nextQuestion?.id })));
+    }
+    return null;
 }

package/lib/mjs/services/index.js

@@ -14,6 +14,11 @@ export const getQuizResults = async (cioClient, quizId, parameters) => cioClient
 // Tracking requests
 export const trackQuizResultsLoaded = (cioClient, quizResults) => {
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    const items = response?.results?.map((result) => ({
+        itemId: result?.data?.id,
+        variationId: result?.data?.variation_id,
+        itemName: result?.value,
+    }));
     cioClient?.tracker.trackQuizResultsLoaded({
         quizId: quiz_id,
         quizVersionId: quiz_version_id,
@@ -23,6 +28,7 @@ export const trackQuizResultsLoaded = (cioClient, quizResults) => {
         resultCount: response?.total_num_results,
         resultPage: request?.page,
         resultId: result_id,
+        items,
     });
 };
 export const trackQuizResultClick = (cioClient, quizResults, result, position) => {

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

@@ -76,6 +76,7 @@ export const getMockState = (question) => ({
             isSingleQuestion: question?.type === 'single',
             isMultipleQuestion: question?.type === 'multiple',
             isSelectQuestion: question?.type === 'single',
+            total_questions: 1,
         },
         results: {
             response: {

package/lib/styles.css

@@ -284,6 +284,9 @@
   padding: 0;
   padding-bottom: var(--bottom-bar-height);
 }
+.cio-cover-question-container--with-image .cio-question-image {
+  height: auto;
+}
 
 /** Select Component */
 /* Options */
@@ -395,6 +398,35 @@
   margin-bottom: -1rem;
 }
 
+/* Affixed progress bar */
+.cio-quiz .cio-question-progress-affixed-container {
+  position: fixed;
+  top: 8px;
+  right: 16px;
+  z-index: 100;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 7px;
+  font-size: 0.75rem;
+  padding: 8px;
+  color: white;
+  mix-blend-mode: difference;
+}
+.cio-quiz .cio-question-progress-progress-container {
+  width: 100px;
+  border-color: white;
+  height: 6px;
+  border-width: 1px;
+  border-style: solid;
+  background: transparent;
+  border-radius: 4px;
+}
+.cio-quiz .cio-question-progress-progress-bar {
+  background: white;
+  height: 100%;
+}
+
 /* Results component */
 .cio-quiz .cio-results-container {
   width: 100%;
@@ -605,7 +637,7 @@
   margin-top: 1px;
 }
 
-/* Media Queries */
+/* Container Queries */
 
 /* Small Tablet */
 @container quiz (min-width: 640px) {
@@ -745,7 +777,6 @@
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 2rem;
-    margin-top: 0;
   }
   .cio-quiz .cio-question-option-container-text-only {
     margin: 0;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ProgressBar(): JSX.Element | null;

package/lib/types/components/QuizQuestions/index.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export default function QuizQuestions(): JSX.Element;
+export default function QuizQuestions(): JSX.Element | null;

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

@@ -2,12 +2,12 @@ import { Question } from '@constructor-io/constructorio-client-javascript/lib/ty
 import { QuizReturnState } from '../../../types';
 import { QuestionTypes } from '../../../components/CioQuiz/actions';
 import { QuizContextValue } from '../../../components/CioQuiz/context';
-export declare const getMockQuestion: (type: QuestionTypes) => {
+export declare const getMockQuestion: (type: `${QuestionTypes}`) => {
     id: number;
     title: string;
     description: string;
     cta_text: string;
-    type: QuestionTypes;
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
@@ -18,7 +18,7 @@ export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
     title: string;
     description: string;
     cta_text: string;
-    type: QuestionTypes;
+    type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "back" | "hydrate" | "complete";
     input_placeholder: string;
 };
 export declare const questionOptionsWithImages: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "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.14",
+    "@constructor-io/constructorio-client-javascript": "^2.35.17",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"
@@ -71,6 +71,7 @@
     "@storybook/addon-essentials": "7.0.11",
     "@storybook/addon-interactions": "^7.0.11",
     "@storybook/addon-links": "7.0.11",
+    "@storybook/addon-docs": "7.0.11",
     "@storybook/jest": "^0.1.0",
     "@storybook/react-webpack5": "7.0.11",
     "@storybook/test-runner": "0.10.0",
@@ -79,6 +80,7 @@
     "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
+    "chromatic": "^6.21.0",
     "eslint": "^8.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",