@constructor-io/constructorio-ui-quizzes 1.12.6 → 1.13.1

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -18,7 +18,7 @@ function CoverTypeQuestion() {
         return (react_1.default.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
-      `, "data-question-key": question.key },
+      `, "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -18,7 +18,7 @@ function OpenTextQuestion() {
         return (react_1.default.createElement("div", { className: `
           cio-container${hasImage ? '--with-image' : ''}
           cio-open-text-question-container${hasImage ? '--with-image' : ''}
-        `, "data-question-key": question.key },
+        `, "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const getSummaryVariables = ({ summary, matchedOptions = [] }) => {
+    if (summary === null) {
+        return {
+            summaryFirstPart: 'Based on your answers ',
+            summaryLastPart: ' we recommend these matches.',
+            itemsSeparator: ', ',
+            lastSeparator: ' and ',
+            isActiveSummary: true,
+        };
+    }
+    const { text = '', is_active: isActive, items_separator: itemsSeparator, last_separator: lastSeparator, } = summary;
+    const isActiveSummary = !!isActive && !!matchedOptions.length && !!(text === null || text === void 0 ? void 0 : text.length);
+    const [summaryFirstPart, summaryLastPart] = (text === null || text === void 0 ? void 0 : text.split(constants_1.MATCHED_OPTIONS_PLACEHOLDER)) || [];
+    return {
+        summaryFirstPart,
+        summaryLastPart,
+        itemsSeparator,
+        lastSeparator,
+        isActiveSummary,
+    };
+};
+function QuizResultsSummary({ summary, matchedOptions = [], }) {
+    const { summaryFirstPart, summaryLastPart, itemsSeparator, lastSeparator, isActiveSummary } = getSummaryVariables({ summary, matchedOptions });
+    const matchedOptionsTemplate = (0, utils_1.formatMatchedOptions)(matchedOptions, itemsSeparator, lastSeparator);
+    if (!isActiveSummary)
+        return null;
+    return (react_1.default.createElement("p", { className: 'cio-results-explanation' },
+        !!(summaryFirstPart === null || summaryFirstPart === void 0 ? void 0 : summaryFirstPart.length) && summaryFirstPart,
+        !!matchedOptionsTemplate.length && react_1.default.createElement("span", null, matchedOptionsTemplate),
+        !!(summaryLastPart === null || summaryLastPart === void 0 ? void 0 : summaryLastPart.length) && summaryLastPart));
+}
+exports.default = QuizResultsSummary;

package/lib/cjs/components/ResultFiltersAndShare/ResultFiltersAndShare.js

@@ -4,15 +4,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ShareButton_1 = tslib_1.__importDefault(require("../ShareButton/ShareButton"));
+const QuizResultsSummary_1 = tslib_1.__importDefault(require("../QuizResultsSummary/QuizResultsSummary"));
 function ResultFiltersAndShare({ onShare, numberOfResults, showShareButton, }) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { state } = (0, react_1.useContext)(context_1.default);
-    const matchedOptions = ((_a = state === null || state === void 0 ? void 0 : state.quiz) === null || _a === void 0 ? void 0 : _a.matchedOptions) || [];
+    const matchedOptions = (_a = state === null || state === void 0 ? void 0 : state.quiz) === null || _a === void 0 ? void 0 : _a.matchedOptions;
+    const summary = (_e = (_d = (_c = (_b = state === null || state === void 0 ? void 0 : state.quiz) === null || _b === void 0 ? void 0 : _b.resultsConfig) === null || _c === void 0 ? void 0 : _c.desktop) === null || _d === void 0 ? void 0 : _d.response_summary) !== null && _e !== void 0 ? _e : null;
     return (react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container cio-results-button-group' },
-        react_1.default.createElement("div", { className: 'cio-results-filter-container' }, !!matchedOptions.length && (react_1.default.createElement("p", { className: 'cio-results-explanation' },
-            "Based on your answers ",
-            react_1.default.createElement("span", null, matchedOptions.join(', ')),
-            " we recommend these matches."))),
+        react_1.default.createElement("div", { className: 'cio-results-filter-container' },
+            react_1.default.createElement(QuizResultsSummary_1.default, { summary: summary, matchedOptions: matchedOptions })),
         react_1.default.createElement("div", { className: 'cio-results-number-and-share-button-group' },
             numberOfResults,
             " ",

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

@@ -19,7 +19,7 @@ function SelectTypeQuestion() {
         instructions = (question === null || question === void 0 ? void 0 : question.type) === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     if (question) {
-        return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
+        return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             react_1.default.createElement("div", { className: 'cio-select-question-text' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
                 (question === null || question === void 0 ? void 0 : question.description) ? react_1.default.createElement(QuestionDescription_1.default, { description: question.description }) : ''),

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
+exports.MATCHED_OPTIONS_PLACEHOLDER = exports.RequestStates = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_n4SkMH5PFWLdStQZ';
 exports.quizId = 'coffee-quiz';
@@ -13,3 +13,4 @@ var RequestStates;
     RequestStates["Success"] = "SUCCESS";
     RequestStates["Error"] = "ERROR";
 })(RequestStates = exports.RequestStates || (exports.RequestStates = {}));
+exports.MATCHED_OPTIONS_PLACEHOLDER = '@matched_options';

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.logger = exports.resetQuizSessionStorageState = exports.getStateFromSessionStorage = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.renderImages = void 0;
+exports.formatMatchedOptions = exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.logger = exports.resetQuizSessionStorageState = exports.getStateFromSessionStorage = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
 /* eslint-disable no-console */
 const react_1 = tslib_1.__importDefault(require("react"));
@@ -165,3 +165,11 @@ function convertPrimaryColorsToString(primaryColorStyles) {
   }`;
 }
 exports.convertPrimaryColorsToString = convertPrimaryColorsToString;
+function formatMatchedOptions(options, separator, lastSeparator) {
+    if (!options.length || !separator || !lastSeparator) {
+        return '';
+    }
+    const firstPart = options.slice(0, -1).join(separator);
+    return [firstPart, lastSeparator, options.at(-1)].join('');
+}
+exports.formatMatchedOptions = formatMatchedOptions;

package/lib/cjs/version.js

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

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -14,7 +14,7 @@ export default function CoverTypeQuestion() {
         return (React.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
-      `, "data-question-key": question.key },
+      `, "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -14,7 +14,7 @@ function OpenTextQuestion() {
         return (React.createElement("div", { className: `
           cio-container${hasImage ? '--with-image' : ''}
           cio-open-text-question-container${hasImage ? '--with-image' : ''}
-        `, "data-question-key": question.key },
+        `, "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { MATCHED_OPTIONS_PLACEHOLDER } from '../../constants';
+import { formatMatchedOptions } from '../../utils';
+const getSummaryVariables = ({ summary, matchedOptions = [] }) => {
+    if (summary === null) {
+        return {
+            summaryFirstPart: 'Based on your answers ',
+            summaryLastPart: ' we recommend these matches.',
+            itemsSeparator: ', ',
+            lastSeparator: ' and ',
+            isActiveSummary: true,
+        };
+    }
+    const { text = '', is_active: isActive, items_separator: itemsSeparator, last_separator: lastSeparator, } = summary;
+    const isActiveSummary = !!isActive && !!matchedOptions.length && !!text?.length;
+    const [summaryFirstPart, summaryLastPart] = text?.split(MATCHED_OPTIONS_PLACEHOLDER) || [];
+    return {
+        summaryFirstPart,
+        summaryLastPart,
+        itemsSeparator,
+        lastSeparator,
+        isActiveSummary,
+    };
+};
+export default function QuizResultsSummary({ summary, matchedOptions = [], }) {
+    const { summaryFirstPart, summaryLastPart, itemsSeparator, lastSeparator, isActiveSummary } = getSummaryVariables({ summary, matchedOptions });
+    const matchedOptionsTemplate = formatMatchedOptions(matchedOptions, itemsSeparator, lastSeparator);
+    if (!isActiveSummary)
+        return null;
+    return (React.createElement("p", { className: 'cio-results-explanation' },
+        !!summaryFirstPart?.length && summaryFirstPart,
+        !!matchedOptionsTemplate.length && React.createElement("span", null, matchedOptionsTemplate),
+        !!summaryLastPart?.length && summaryLastPart));
+}

package/lib/mjs/components/ResultFiltersAndShare/ResultFiltersAndShare.js

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
 import ShareButton from '../ShareButton/ShareButton';
+import QuizResultsSummary from '../QuizResultsSummary/QuizResultsSummary';
 function ResultFiltersAndShare({ onShare, numberOfResults, showShareButton, }) {
     const { state } = useContext(QuizContext);
-    const matchedOptions = state?.quiz?.matchedOptions || [];
+    const matchedOptions = state?.quiz?.matchedOptions;
+    const summary = state?.quiz?.resultsConfig?.desktop?.response_summary ?? null;
     return (React.createElement("div", { className: 'cio-results-filter-and-redo-container cio-results-button-group' },
-        React.createElement("div", { className: 'cio-results-filter-container' }, !!matchedOptions.length && (React.createElement("p", { className: 'cio-results-explanation' },
-            "Based on your answers ",
-            React.createElement("span", null, matchedOptions.join(', ')),
-            " we recommend these matches."))),
+        React.createElement("div", { className: 'cio-results-filter-container' },
+            React.createElement(QuizResultsSummary, { summary: summary, matchedOptions: matchedOptions })),
         React.createElement("div", { className: 'cio-results-number-and-share-button-group' },
             numberOfResults,
             " ",

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

@@ -15,7 +15,7 @@ function SelectTypeQuestion() {
         instructions = question?.type === QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     if (question) {
-        return (React.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
+        return (React.createElement("div", { className: 'cio-select-question-container', "data-cnstrc-question-type": question.type, "data-question-key": question.key },
             React.createElement("div", { className: 'cio-select-question-text' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 question?.description ? React.createElement(QuestionDescription, { description: question.description }) : ''),

package/lib/mjs/constants.js

@@ -10,3 +10,4 @@ export var RequestStates;
     RequestStates["Success"] = "SUCCESS";
     RequestStates["Error"] = "ERROR";
 })(RequestStates || (RequestStates = {}));
+export const MATCHED_OPTIONS_PLACEHOLDER = '@matched_options';

package/lib/mjs/utils.js

@@ -145,3 +145,10 @@ export function convertPrimaryColorsToString(primaryColorStyles) {
     --primary-color-l: ${primaryColorStyles['--primary-color-l']}; 
   }`;
 }
+export function formatMatchedOptions(options, separator, lastSeparator) {
+    if (!options.length || !separator || !lastSeparator) {
+        return '';
+    }
+    const firstPart = options.slice(0, -1).join(separator);
+    return [firstPart, lastSeparator, options.at(-1)].join('');
+}

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.12.6';
+export default '1.13.1';

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { QuizResultsConfig } from '../../types';
+interface QuizResultsSummaryProps {
+    summary: QuizResultsConfig['desktop']['response_summary'];
+    matchedOptions?: string[];
+}
+export default function QuizResultsSummary({ summary, matchedOptions, }: QuizResultsSummaryProps): JSX.Element | null;
+export {};

package/lib/types/constants.d.ts

@@ -7,3 +7,4 @@ export declare enum RequestStates {
     Success = "SUCCESS",
     Error = "ERROR"
 }
+export declare const MATCHED_OPTIONS_PLACEHOLDER = "@matched_options";

package/lib/types/utils.d.ts

@@ -36,3 +36,4 @@ 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[];
 export declare function convertPrimaryColorsToString(primaryColorStyles: PrimaryColorStyles): string;
+export declare function formatMatchedOptions(options: string[], separator?: string | null, lastSeparator?: string | null): string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.6";
+declare const _default: "1.13.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.12.6",
+  "version": "1.13.1",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -61,7 +61,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.42.0",
+    "@constructor-io/constructorio-client-javascript": "^2.42.1",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"