@constructor-io/constructorio-ui-quizzes 1.11.2 → 1.12.1

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

@@ -8,12 +8,12 @@ exports.initialState = {
     quizRequestState: constants_1.RequestStates.Stale,
 };
 function apiReducer(state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     switch (action.type) {
         case actions_1.QuizAPIActionTypes.SET_IS_LOADING:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Loading, quizCurrentQuestion: undefined, quizResults: undefined });
         case actions_1.QuizAPIActionTypes.SET_IS_ERROR:
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizCurrentQuestion: undefined, quizResults: undefined, selectedOptionsWithAttributes: undefined });
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizCurrentQuestion: undefined, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         case actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION: {
             const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
             const quizFirstQuestion = state.quizFirstQuestion || ((_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion);
@@ -22,17 +22,19 @@ function apiReducer(state, action) {
                     isCoverQuestion,
                     isSingleQuestion,
                     isMultipleQuestion,
-                    isSelectQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined });
+                    isSelectQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
             const selectedOptionsWithAttributes = ((_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_l = action.payload) === null || _l === void 0 ? void 0 : _l.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes });
+            const matchedOptions = ((_l = action.payload) === null || _l === void 0 ? void 0 : _l.quizResults.quiz_selected_options.filter((option) => option.is_matched && option.has_attribute).map((option) => option.value)) || [];
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_m = action.payload) === null || _m === void 0 ? void 0 : _m.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes,
+                matchedOptions });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS: {
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_m = action.payload) === null || _m === void 0 ? void 0 : _m.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes: (_o = action.payload) === null || _o === void 0 ? void 0 : _o.quizResults.attributes });
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_o = action.payload) === null || _o === void 0 ? void 0 : _o.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes: (_p = action.payload) === null || _p === void 0 ? void 0 : _p.quizResults.attributes });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG: {
-            return Object.assign(Object.assign({}, state), { resultsConfig: (_p = action.payload) === null || _p === void 0 ? void 0 : _p.quizResultsConfig.results_config });
+            return Object.assign(Object.assign({}, state), { resultsConfig: (_q = action.payload) === null || _q === void 0 ? void 0 : _q.quizResultsConfig.results_config });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS_CONFIG_ERROR: {
             return Object.assign(Object.assign({}, state), { resultsConfig: null });

package/lib/cjs/components/ResultContainer/ResultContainer.js

@@ -2,64 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const RedoButton_1 = tslib_1.__importDefault(require("../RedoButton/RedoButton"));
-const ShareButton_1 = tslib_1.__importDefault(require("../ShareButton/ShareButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-const ResultFilters_1 = tslib_1.__importDefault(require("../ResultFilters/ResultFilters"));
+const ResultFiltersAndShare_1 = tslib_1.__importDefault(require("../ResultFiltersAndShare/ResultFiltersAndShare"));
 const ZeroResults_1 = tslib_1.__importDefault(require("../ZeroResults/ZeroResults"));
 const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
+const ResultsHeaderContainer_1 = tslib_1.__importDefault(require("../ResultsHeaderContainer/ResultsHeaderContainer"));
+const RedoButton_1 = tslib_1.__importDefault(require("../RedoButton/RedoButton"));
 function ResultContainer(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c;
     const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = (0, react_1.useContext)(context_1.default);
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = resultCardOptions || {};
     const numberOfResults = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length;
     const resultsConfig = state === null || state === void 0 ? void 0 : state.quiz.resultsConfig;
     const zeroResults = !numberOfResults;
-    let resultsTitle;
-    if (zeroResults) {
-        resultsTitle = '';
-    }
-    else if (resultsConfig === null) {
-        resultsTitle = 'Here are your results';
-    }
-    else if ((_d = resultsConfig === null || resultsConfig === void 0 ? void 0 : resultsConfig.desktop.title) === null || _d === void 0 ? void 0 : _d.is_active) {
-        resultsTitle = (_e = resultsConfig.desktop.title.text) !== null && _e !== void 0 ? _e : '';
-    }
-    else {
-        resultsTitle = '';
-    }
-    let resultsDescription;
-    if (zeroResults) {
-        resultsDescription = '';
-    }
-    else if (resultsConfig === null) {
-        resultsDescription = '';
-    }
-    else if ((_f = resultsConfig === null || resultsConfig === void 0 ? void 0 : resultsConfig.desktop.description) === null || _f === void 0 ? void 0 : _f.is_active) {
-        resultsDescription = (_g = resultsConfig.desktop.description.text) !== null && _g !== void 0 ? _g : '';
-    }
-    else {
-        resultsDescription = '';
-    }
     if (state === null || state === void 0 ? void 0 : state.quiz.results) {
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
-            react_1.default.createElement("div", { className: 'cio-results-title-container' },
-                react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
-                react_1.default.createElement("p", { className: 'cio-results-description' }, resultsDescription)),
-            react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container cio-results-button-group' },
-                react_1.default.createElement(ResultFilters_1.default, { hasNoResults: zeroResults }),
-                react_1.default.createElement("div", { className: 'cio-results-redo-and-share-button-group' },
-                    react_1.default.createElement(RedoButton_1.default, null),
-                    (resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.showShareResultsButton) && react_1.default.createElement(ShareButton_1.default, { onClick: onShare }))),
-            !zeroResults && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: 'cio-results-num-results' },
-                    numberOfResults,
-                    " ",
-                    numberOfResults === 1 ? 'result' : 'results'),
-                react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
-            zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
+            !zeroResults && react_1.default.createElement(ResultsHeaderContainer_1.default, { resultsConfig: resultsConfig }),
+            !zeroResults && (react_1.default.createElement(ResultFiltersAndShare_1.default, { numberOfResults: numberOfResults, onShare: onShare, showShareButton: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.showShareResultsButton) })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            zeroResults && react_1.default.createElement(ZeroResults_1.default, null),
+            !zeroResults && (react_1.default.createElement("div", { className: 'cio-redo-button-container' },
+                react_1.default.createElement(RedoButton_1.default, null)))));
     }
     return (react_1.default.createElement("div", { className: 'cio-results-container' },
         react_1.default.createElement(Spinner_1.default, null)));

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

@@ -0,0 +1,22 @@
+"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"));
+const ShareButton_1 = tslib_1.__importDefault(require("../ShareButton/ShareButton"));
+function ResultFiltersAndShare({ onShare, numberOfResults, showShareButton, }) {
+    var _a;
+    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) || [];
+    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-number-and-share-button-group' },
+            numberOfResults,
+            " ",
+            numberOfResults === 1 ? 'result' : 'results',
+            showShareButton && react_1.default.createElement(ShareButton_1.default, { onClick: onShare }))));
+}
+exports.default = ResultFiltersAndShare;

package/lib/cjs/components/ResultsHeaderContainer/ResultsHeaderContainer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ResultsHeaderContainer({ resultsConfig }) {
+    var _a, _b, _c, _d;
+    let resultsTitle = '';
+    let resultsDescription = '';
+    if (resultsConfig === null) {
+        resultsTitle = 'Here are your results';
+    }
+    if ((_a = resultsConfig === null || resultsConfig === void 0 ? void 0 : resultsConfig.desktop.title) === null || _a === void 0 ? void 0 : _a.is_active) {
+        resultsTitle = (_b = resultsConfig.desktop.title.text) !== null && _b !== void 0 ? _b : '';
+    }
+    if ((_c = resultsConfig === null || resultsConfig === void 0 ? void 0 : resultsConfig.desktop.description) === null || _c === void 0 ? void 0 : _c.is_active) {
+        resultsDescription = (_d = resultsConfig.desktop.description.text) !== null && _d !== void 0 ? _d : '';
+    }
+    const hasContent = !!(resultsTitle || resultsDescription);
+    return hasContent ? (react_1.default.createElement("div", { className: 'cio-results-title-container' },
+        react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
+        react_1.default.createElement("p", { className: 'cio-results-description' }, resultsDescription))) : null;
+}
+exports.default = ResultsHeaderContainer;

package/lib/cjs/hooks/useQuiz.js

@@ -40,6 +40,7 @@ const useQuiz = (quizOptions) => {
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
+                matchedOptions: quizApiState.matchedOptions,
                 resultsConfig: (_a = quizApiState.resultsConfig) !== null && _a !== void 0 ? _a : null,
             },
             quizSessionStorageState,

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResultHeroCard = exports.ResultFilters = exports.ResultContainer = exports.ResultCard = exports.Results = exports.SelectQuestion = exports.CoverQuestion = exports.OpenTextQuestion = exports.QuizQuestions = exports.useShareResultsLink = exports.useCioQuiz = void 0;
+exports.ResultHeroCard = exports.ResultFiltersAndShare = exports.ResultContainer = exports.ResultCard = exports.Results = exports.SelectQuestion = exports.CoverQuestion = exports.OpenTextQuestion = exports.QuizQuestions = exports.useShareResultsLink = exports.useCioQuiz = void 0;
 const tslib_1 = require("tslib");
 const CioQuiz_1 = tslib_1.__importDefault(require("./components/CioQuiz"));
 // Hook
@@ -24,8 +24,8 @@ var ResultCard_1 = require("./components/ResultCard/ResultCard");
 Object.defineProperty(exports, "ResultCard", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultCard_1).default; } });
 var ResultContainer_1 = require("./components/ResultContainer/ResultContainer");
 Object.defineProperty(exports, "ResultContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultContainer_1).default; } });
-var ResultFilters_1 = require("./components/ResultFilters/ResultFilters");
-Object.defineProperty(exports, "ResultFilters", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultFilters_1).default; } });
+var ResultFiltersAndShare_1 = require("./components/ResultFiltersAndShare/ResultFiltersAndShare");
+Object.defineProperty(exports, "ResultFiltersAndShare", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultFiltersAndShare_1).default; } });
 var ResultHeroCard_1 = require("./components/ResultHeroCard/ResultHeroCard");
 Object.defineProperty(exports, "ResultHeroCard", { enumerable: true, get: function () { return tslib_1.__importDefault(ResultHeroCard_1).default; } });
 tslib_1.__exportStar(require("./types"), exports);

package/lib/cjs/version.js

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

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

@@ -20,6 +20,7 @@ export default function apiReducer(state, action) {
                 quizCurrentQuestion: undefined,
                 quizResults: undefined,
                 selectedOptionsWithAttributes: undefined,
+                matchedOptions: undefined,
             };
         case QuizAPIActionTypes.SET_CURRENT_QUESTION: {
             const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
@@ -40,18 +41,23 @@ export default function apiReducer(state, action) {
                 quizFirstQuestion,
                 quizResults: undefined,
                 selectedOptionsWithAttributes: undefined,
+                matchedOptions: undefined,
             };
         }
         case QuizAPIActionTypes.SET_QUIZ_RESULTS: {
             const selectedOptionsWithAttributes = action.payload?.quizResults.quiz_selected_options
                 .filter((option) => option.has_attribute)
                 .map((option) => option.value) || [];
+            const matchedOptions = action.payload?.quizResults.quiz_selected_options
+                .filter((option) => option.is_matched && option.has_attribute)
+                .map((option) => option.value) || [];
             return {
                 ...state,
                 quizRequestState: RequestStates.Success,
                 quizResults: action.payload?.quizResults,
                 quizCurrentQuestion: undefined,
                 selectedOptionsWithAttributes,
+                matchedOptions,
             };
         }
         case QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS: {

package/lib/mjs/components/ResultContainer/ResultContainer.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import RedoButton from '../RedoButton/RedoButton';
-import ShareButton from '../ShareButton/ShareButton';
 import QuizContext from '../CioQuiz/context';
-import ResultFilters from '../ResultFilters/ResultFilters';
+import ResultFiltersAndShare from '../ResultFiltersAndShare/ResultFiltersAndShare';
 import ZeroResults from '../ZeroResults/ZeroResults';
 import Results from '../Results/Results';
 import Spinner from '../Spinner/Spinner';
+import ResultsHeaderContainer from '../ResultsHeaderContainer/ResultsHeaderContainer';
+import RedoButton from '../RedoButton/RedoButton';
 export default function ResultContainer(props) {
     const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = useContext(QuizContext);
@@ -13,49 +13,14 @@ export default function ResultContainer(props) {
     const numberOfResults = state?.quiz.results?.response?.results?.length;
     const resultsConfig = state?.quiz.resultsConfig;
     const zeroResults = !numberOfResults;
-    let resultsTitle;
-    if (zeroResults) {
-        resultsTitle = '';
-    }
-    else if (resultsConfig === null) {
-        resultsTitle = 'Here are your results';
-    }
-    else if (resultsConfig?.desktop.title?.is_active) {
-        resultsTitle = resultsConfig.desktop.title.text ?? '';
-    }
-    else {
-        resultsTitle = '';
-    }
-    let resultsDescription;
-    if (zeroResults) {
-        resultsDescription = '';
-    }
-    else if (resultsConfig === null) {
-        resultsDescription = '';
-    }
-    else if (resultsConfig?.desktop.description?.is_active) {
-        resultsDescription = resultsConfig.desktop.description.text ?? '';
-    }
-    else {
-        resultsDescription = '';
-    }
     if (state?.quiz.results) {
         return (React.createElement("div", { className: 'cio-results-container' },
-            React.createElement("div", { className: 'cio-results-title-container' },
-                React.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
-                React.createElement("p", { className: 'cio-results-description' }, resultsDescription)),
-            React.createElement("div", { className: 'cio-results-filter-and-redo-container cio-results-button-group' },
-                React.createElement(ResultFilters, { hasNoResults: zeroResults }),
-                React.createElement("div", { className: 'cio-results-redo-and-share-button-group' },
-                    React.createElement(RedoButton, null),
-                    resultsPageOptions?.showShareResultsButton && React.createElement(ShareButton, { onClick: onShare }))),
-            !zeroResults && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: 'cio-results-num-results' },
-                    numberOfResults,
-                    " ",
-                    numberOfResults === 1 ? 'result' : 'results'),
-                React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
-            zeroResults && React.createElement(ZeroResults, null)));
+            !zeroResults && React.createElement(ResultsHeaderContainer, { resultsConfig: resultsConfig }),
+            !zeroResults && (React.createElement(ResultFiltersAndShare, { numberOfResults: numberOfResults, onShare: onShare, showShareButton: !!resultsPageOptions?.showShareResultsButton })),
+            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            zeroResults && React.createElement(ZeroResults, null),
+            !zeroResults && (React.createElement("div", { className: 'cio-redo-button-container' },
+                React.createElement(RedoButton, null)))));
     }
     return (React.createElement("div", { className: 'cio-results-container' },
         React.createElement(Spinner, null)));

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

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+import ShareButton from '../ShareButton/ShareButton';
+function ResultFiltersAndShare({ onShare, numberOfResults, showShareButton, }) {
+    const { state } = useContext(QuizContext);
+    const matchedOptions = state?.quiz?.matchedOptions || [];
+    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-number-and-share-button-group' },
+            numberOfResults,
+            " ",
+            numberOfResults === 1 ? 'result' : 'results',
+            showShareButton && React.createElement(ShareButton, { onClick: onShare }))));
+}
+export default ResultFiltersAndShare;

package/lib/mjs/components/ResultsHeaderContainer/ResultsHeaderContainer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+export default function ResultsHeaderContainer({ resultsConfig }) {
+    let resultsTitle = '';
+    let resultsDescription = '';
+    if (resultsConfig === null) {
+        resultsTitle = 'Here are your results';
+    }
+    if (resultsConfig?.desktop.title?.is_active) {
+        resultsTitle = resultsConfig.desktop.title.text ?? '';
+    }
+    if (resultsConfig?.desktop.description?.is_active) {
+        resultsDescription = resultsConfig.desktop.description.text ?? '';
+    }
+    const hasContent = !!(resultsTitle || resultsDescription);
+    return hasContent ? (React.createElement("div", { className: 'cio-results-title-container' },
+        React.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
+        React.createElement("p", { className: 'cio-results-description' }, resultsDescription))) : null;
+}

package/lib/mjs/hooks/useQuiz.js

@@ -38,6 +38,7 @@ const useQuiz = (quizOptions) => {
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
                 selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
+                matchedOptions: quizApiState.matchedOptions,
                 resultsConfig: quizApiState.resultsConfig ?? null,
             },
             quizSessionStorageState,

package/lib/mjs/index.js

@@ -11,7 +11,7 @@ export { default as SelectQuestion } from './components/SelectTypeQuestion/Selec
 export { default as Results } from './components/Results/Results';
 export { default as ResultCard } from './components/ResultCard/ResultCard';
 export { default as ResultContainer } from './components/ResultContainer/ResultContainer';
-export { default as ResultFilters } from './components/ResultFilters/ResultFilters';
+export { default as ResultFiltersAndShare } from './components/ResultFiltersAndShare/ResultFiltersAndShare';
 export { default as ResultHeroCard } from './components/ResultHeroCard/ResultHeroCard';
 export * from './types';
 export default CioQuiz;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.11.2';
+export default '1.12.1';

package/lib/styles.css

@@ -236,6 +236,7 @@
   flex-grow: 1;
   margin-left: auto;
   width: 100%;
+  transition: background 0.2s ease-in-out;
 }
 .cio-quiz .cio-button-container {
   max-width: 10rem;
@@ -292,15 +293,19 @@
   border: 1px solid var(--primary-color);
   border-radius: 4px;
   height: 3rem;
-  width: 3rem;
   font-size: 1rem;
   margin-right: 4rem;
+  /* Rather than setting a prefix-ed width, we add padding to allow different contents to fit nicely */
+  /* 1.2rem padding + arrow ~= 48px */
+  padding: 0 1.2rem;
+  outline: 1px solid transparent;
+  transition: outline 0.2s ease-in-out;
 }
 .cio-quiz .cio-question-back-button:hover {
-  border: 2px solid var(--primary-color-variant-600);
+  outline: 1px solid var(--primary-color-variant-600);
 }
 .cio-quiz .cio-question-back-button:active {
-  border: 2px solid var(--primary-color-variant-700);
+  border: 1px solid var(--primary-color-variant-700);
 }
 .cio-quiz .cio-question-back-button:focus {
   outline: 3px solid var(--primary-color-variant-100);
@@ -474,13 +479,6 @@
   margin: 0;
   color: var(--gray-dust-500);
 }
-.cio-quiz .cio-results-filter-container {
-  margin-bottom: 1.5rem;
-}
-.cio-quiz .cio-results-filter-container p {
-  color: var(--gray-dust-500);
-  margin-bottom: 1.5rem;
-}
 .cio-quiz .cio-results-filter-options {
   display: flex;
   flex-wrap: wrap;
@@ -671,6 +669,7 @@
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  white-space: nowrap;
 }
 .cio-quiz .cio-question-redo-button:hover {
   text-decoration: underline;
@@ -739,9 +738,9 @@
   }
   .cio-quiz .cio-results-button-group {
     display: flex;
-    justify-content: space-between;
-    align-items: end;
-    margin-bottom: 1.5rem;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
   }
   .cio-quiz .cio-results-filter-container {
     margin-bottom: 0;
@@ -979,11 +978,13 @@
   gap: 1rem;
 }
 
-.cio-quiz .cio-results-redo-and-share-button-group {
+.cio-quiz .cio-results-number-and-share-button-group {
   display: flex;
   gap: 8px;
   align-items: end;
   justify-content: space-between;
+  font-size: 0.85em;
+  color: var(--gray-dust-100);
 }
 
 .cio-quiz .cio-share-results-share-button {
@@ -1072,6 +1073,13 @@
   .cio-quiz .cio-share-results-share-button {
     max-width: 100%;
   }
+
+  .cio-results-button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
 }
 
 @container (min-width: 500px) {
@@ -1093,8 +1101,27 @@
 }
 
 .cio-quiz .cio-results-title-container {
-  margin-bottom: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--gray-dust-100);
+}
+
+.cio-quiz .cio-results-explanation {
+  margin: 0;
+  font-size: 0.9em;
+}
+
+.cio-quiz .cio-results-explanation > span {
+  font-weight: bold;
+  font-size: 0.95em;
+}
+
+.cio-redo-button-container {
+  width: 100%;
+  padding-top: 1.5rem;
+  display: flex;
+  justify-content: center;
 }

package/lib/types/components/CioQuiz/quizApiReducer.d.ts

@@ -7,6 +7,7 @@ export type QuizAPIReducerState = {
     quizFirstQuestion?: NextQuestionResponse;
     quizResults?: QuizResultsResponse | QuizSharedResultsData;
     selectedOptionsWithAttributes?: string[];
+    matchedOptions?: string[];
     resultsConfig?: QuizResultsConfig | null;
 };
 export declare const initialState: QuizAPIReducerState;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ResultFiltersAndShareProps {
+    onShare: () => void;
+    numberOfResults?: number;
+    showShareButton: boolean;
+}
+declare function ResultFiltersAndShare({ onShare, numberOfResults, showShareButton, }: ResultFiltersAndShareProps): JSX.Element;
+export default ResultFiltersAndShare;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { QuizResultsConfig } from '../../types';
+export interface IResultHeaderContainerProps {
+    resultsConfig?: QuizResultsConfig | null;
+}
+export default function ResultsHeaderContainer({ resultsConfig }: IResultHeaderContainerProps): JSX.Element | null;

package/lib/types/index.d.ts

@@ -8,7 +8,7 @@ export { default as SelectQuestion } from './components/SelectTypeQuestion/Selec
 export { default as Results } from './components/Results/Results';
 export { default as ResultCard } from './components/ResultCard/ResultCard';
 export { default as ResultContainer } from './components/ResultContainer/ResultContainer';
-export { default as ResultFilters } from './components/ResultFilters/ResultFilters';
+export { default as ResultFiltersAndShare } from './components/ResultFiltersAndShare/ResultFiltersAndShare';
 export { default as ResultHeroCard } from './components/ResultHeroCard/ResultHeroCard';
 export * from './types';
 export default CioQuiz;

package/lib/types/types.d.ts

@@ -74,6 +74,7 @@ export interface QuizReturnState {
         currentQuestion?: CurrentQuestion | undefined;
         results?: QuizResultsResponse | QuizSharedResultsData | undefined;
         selectedOptionsWithAttributes?: string[];
+        matchedOptions?: string[];
         resultsConfig: QuizResultsConfig | null;
     };
     quizSessionStorageState: QuizSessionStorageState;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.11.2";
+declare const _default: "1.12.1";
 export default _default;

package/package.json

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

package/lib/cjs/components/ResultFilters/ResultFilters.js

@@ -1,13 +0,0 @@
-"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 ResultFilters({ hasNoResults }) {
-    var _a;
-    const { state } = (0, react_1.useContext)(context_1.default);
-    return (react_1.default.createElement("div", { className: 'cio-results-filter-container' },
-        react_1.default.createElement("p", null, hasNoResults ? 'Your preferences' : 'Because you answered'),
-        react_1.default.createElement("div", { className: 'cio-results-filter-options' }, (_a = state === null || state === void 0 ? void 0 : state.quiz.selectedOptionsWithAttributes) === null || _a === void 0 ? void 0 : _a.map((option) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: option }, option))))));
-}
-exports.default = ResultFilters;

package/lib/mjs/components/ResultFilters/ResultFilters.js

@@ -1,9 +0,0 @@
-import React, { useContext } from 'react';
-import QuizContext from '../CioQuiz/context';
-function ResultFilters({ hasNoResults }) {
-    const { state } = useContext(QuizContext);
-    return (React.createElement("div", { className: 'cio-results-filter-container' },
-        React.createElement("p", null, hasNoResults ? 'Your preferences' : 'Because you answered'),
-        React.createElement("div", { className: 'cio-results-filter-options' }, state?.quiz.selectedOptionsWithAttributes?.map((option) => (React.createElement("div", { className: 'cio-results-filter-option', key: option }, option))))));
-}
-export default ResultFilters;

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface ResultFiltersProps {
-    hasNoResults: boolean;
-}
-declare function ResultFilters({ hasNoResults }: ResultFiltersProps): JSX.Element;
-export default ResultFilters;