@constructor-io/constructorio-ui-quizzes 1.4.1 → 1.4.3

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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     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 });
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizCurrentQuestion: undefined, quizResults: undefined, selectedOptionsWithAttributes: 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,12 +22,11 @@ function apiReducer(state, action) {
                     isCoverQuestion,
                     isSingleQuestion,
                     isMultipleQuestion,
-                    isSelectQuestion }), quizFirstQuestion, quizResults: undefined });
+                    isSelectQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
-            const filterExpression = ((_l = (_k = (_j = action.payload) === null || _j === void 0 ? void 0 : _j.quizResults) === null || _k === void 0 ? void 0 : _k.request) === null || _l === void 0 ? void 0 : _l.collection_filter_expression) || null;
-            const quizResultsFilters = [...new Set((0, utils_1.getFilterValuesFromExpression)(filterExpression))];
-            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_m = action.payload) === null || _m === void 0 ? void 0 : _m.quizResults, quizResultsFilters, quizCurrentQuestion: undefined });
+            const selectedOptionsWithAttributes = ((_j = action.payload) === null || _j === void 0 ? void 0 : _j.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: (_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes });
         }
         case actions_1.QuizAPIActionTypes.RESET_QUIZ:
             return exports.initialState;

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

@@ -13,12 +13,12 @@ function ResultContainer(props) {
     const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
     const { state } = (0, react_1.useContext)(context_1.default);
     const zeroResults = !((_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 resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
+    const resultsTitle = zeroResults ? '' : 'Here are your results';
     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("h1", { className: 'cio-results-title' }, resultsTitle),
             react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },
-                react_1.default.createElement(ResultFilters_1.default, null),
+                react_1.default.createElement(ResultFilters_1.default, { hasNoResults: zeroResults }),
                 react_1.default.createElement(RedoButton_1.default, null)),
             !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));

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

@@ -3,11 +3,11 @@ 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() {
+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, "Because you answered"),
-        react_1.default.createElement("div", { className: 'cio-results-filter-options' }, (_a = state === null || state === void 0 ? void 0 : state.quiz.resultsFilters) === null || _a === void 0 ? void 0 : _a.map((filter) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+        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/cjs/components/ZeroResults/ZeroResults.js

@@ -7,8 +7,7 @@ const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ZeroResults() {
     const { getResetQuizButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-zero-results' },
-        react_1.default.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
-        react_1.default.createElement("p", { className: 'cio-zero-results-description' }, "This is embarrassing \uD83D\uDE22. It might be that some of the questions are not properly set up from our end. Would you give us another try?"),
-        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
+        react_1.default.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, we couldn\u2019t find products that perfectly match your preferences."),
+        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Redo Quiz', propsGetters: getResetQuizButtonProps })));
 }
 exports.default = ZeroResults;

package/lib/cjs/hooks/useQuiz.js

@@ -33,7 +33,7 @@ const useQuiz = (quizOptions) => {
                 sessionId: quizLocalState.quizSessionId,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
-                resultsFilters: quizApiState.quizResultsFilters,
+                selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
             },
         }, events: Object.assign({}, quizEvents) }, propGetters), { primaryColorStyles });
 };

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

@@ -105,8 +105,12 @@ const getMockState = (question) => ({
             quiz_id: '',
             quiz_session_id: '',
             quiz_version_id: '',
+            quiz_selected_options: [
+                { value: 'Option 1', has_attribute: true },
+                { value: 'Option 2', has_attribute: true },
+            ],
         },
-        resultsFilters: ['Chocolate', 'Medium'],
+        selectedOptionsWithAttributes: ['Option 1', 'Option 2'],
     },
 });
 exports.getMockState = getMockState;

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.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.renderImages = void 0;
+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.getStoryParams = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
 /* eslint-disable no-console */
 const react_1 = tslib_1.__importDefault(require("react"));
@@ -105,25 +105,6 @@ function isFunction(fn) {
     return fn && typeof fn === 'function';
 }
 exports.isFunction = isFunction;
-const isValueExpression = (exp) => 'name' in exp && 'value' in exp;
-const isAndFilter = (exp) => 'and' in exp;
-const isOrFilter = (exp) => 'or' in exp;
-const getFilterValuesFromExpression = (exp) => {
-    if (!exp) {
-        return [];
-    }
-    if (isAndFilter(exp)) {
-        return exp.and.flatMap((innerExpression) => (0, exports.getFilterValuesFromExpression)(innerExpression));
-    }
-    if (isOrFilter(exp)) {
-        return exp.or.flatMap((innerExpression) => (0, exports.getFilterValuesFromExpression)(innerExpression));
-    }
-    if (isValueExpression(exp)) {
-        return [exp.value];
-    }
-    return [];
-};
-exports.getFilterValuesFromExpression = getFilterValuesFromExpression;
 const getStateFromSessionStorage = (quizStateKey) => {
     var _a;
     const state = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(quizStateKey);

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

@@ -1,5 +1,5 @@
 import { RequestStates } from '../../constants';
-import { getFilterValuesFromExpression, getQuestionTypes } from '../../utils';
+import { getQuestionTypes } from '../../utils';
 import { QuizAPIActionTypes } from './actions';
 export const initialState = {
     quizRequestState: RequestStates.Stale,
@@ -19,6 +19,7 @@ export default function apiReducer(state, action) {
                 quizRequestState: RequestStates.Error,
                 quizCurrentQuestion: undefined,
                 quizResults: undefined,
+                selectedOptionsWithAttributes: undefined,
             };
         case QuizAPIActionTypes.SET_CURRENT_QUESTION: {
             const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
@@ -38,17 +39,19 @@ export default function apiReducer(state, action) {
                 },
                 quizFirstQuestion,
                 quizResults: undefined,
+                selectedOptionsWithAttributes: undefined,
             };
         }
         case QuizAPIActionTypes.SET_QUIZ_RESULTS: {
-            const filterExpression = action.payload?.quizResults?.request?.collection_filter_expression || null;
-            const quizResultsFilters = [...new Set(getFilterValuesFromExpression(filterExpression))];
+            const selectedOptionsWithAttributes = action.payload?.quizResults.quiz_selected_options
+                .filter((option) => option.has_attribute)
+                .map((option) => option.value) || [];
             return {
                 ...state,
                 quizRequestState: RequestStates.Success,
                 quizResults: action.payload?.quizResults,
-                quizResultsFilters,
                 quizCurrentQuestion: undefined,
+                selectedOptionsWithAttributes,
             };
         }
         case QuizAPIActionTypes.RESET_QUIZ:

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

@@ -9,12 +9,12 @@ export default function ResultContainer(props) {
     const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
     const { state } = useContext(QuizContext);
     const zeroResults = !state?.quiz.results?.response?.results?.length;
-    const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
+    const resultsTitle = zeroResults ? '' : 'Here are your results';
     if (state?.quiz.results) {
         return (React.createElement("div", { className: 'cio-results-container' },
             React.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
             React.createElement("div", { className: 'cio-results-filter-and-redo-container' },
-                React.createElement(ResultFilters, null),
+                React.createElement(ResultFilters, { hasNoResults: zeroResults }),
                 React.createElement(RedoButton, null)),
             !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
             zeroResults && React.createElement(ZeroResults, null)));

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
-function ResultFilters() {
+function ResultFilters({ hasNoResults }) {
     const { state } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-results-filter-container' },
-        React.createElement("p", null, "Because you answered"),
-        React.createElement("div", { className: 'cio-results-filter-options' }, state?.quiz.resultsFilters?.map((filter) => (React.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+        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/mjs/components/ZeroResults/ZeroResults.js

@@ -4,8 +4,7 @@ import QuizContext from '../CioQuiz/context';
 function ZeroResults() {
     const { getResetQuizButtonProps } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-zero-results' },
-        React.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
-        React.createElement("p", { className: 'cio-zero-results-description' }, "This is embarrassing \uD83D\uDE22. It might be that some of the questions are not properly set up from our end. Would you give us another try?"),
-        React.createElement(CTAButton, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
+        React.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, we couldn\u2019t find products that perfectly match your preferences."),
+        React.createElement(CTAButton, { ctaText: 'Redo Quiz', propsGetters: getResetQuizButtonProps })));
 }
 export default ZeroResults;

package/lib/mjs/hooks/useQuiz.js

@@ -32,7 +32,7 @@ const useQuiz = (quizOptions) => {
                 sessionId: quizLocalState.quizSessionId,
                 currentQuestion: quizApiState.quizCurrentQuestion,
                 results: quizApiState.quizResults,
-                resultsFilters: quizApiState.quizResultsFilters,
+                selectedOptionsWithAttributes: quizApiState.selectedOptionsWithAttributes,
             },
         },
         events: {

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

@@ -117,8 +117,12 @@ export const getMockState = (question) => ({
             quiz_id: '',
             quiz_session_id: '',
             quiz_version_id: '',
+            quiz_selected_options: [
+                { value: 'Option 1', has_attribute: true },
+                { value: 'Option 2', has_attribute: true },
+            ],
         },
-        resultsFilters: ['Chocolate', 'Medium'],
+        selectedOptionsWithAttributes: ['Option 1', 'Option 2'],
     },
 });
 const mockElementProps = {

package/lib/mjs/utils.js

@@ -93,24 +93,6 @@ export function getPreferredColorScheme() {
 export function isFunction(fn) {
     return fn && typeof fn === 'function';
 }
-const isValueExpression = (exp) => 'name' in exp && 'value' in exp;
-const isAndFilter = (exp) => 'and' in exp;
-const isOrFilter = (exp) => 'or' in exp;
-export const getFilterValuesFromExpression = (exp) => {
-    if (!exp) {
-        return [];
-    }
-    if (isAndFilter(exp)) {
-        return exp.and.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
-    }
-    if (isOrFilter(exp)) {
-        return exp.or.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
-    }
-    if (isValueExpression(exp)) {
-        return [exp.value];
-    }
-    return [];
-};
 export const getStateFromSessionStorage = (quizStateKey) => {
     const state = window?.sessionStorage?.getItem(quizStateKey);
     if (state) {

package/lib/styles.css

@@ -432,15 +432,10 @@
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 1.5rem;
+  margin-bottom: 2rem;
   color: var(--gray-dust-500);
   margin-top: 0;
 }
-.cio-zero-results-description {
-  color: var(--gray-dust-100);
-  line-height: 1.25rem;
-  margin-top: 0;
-}
-
 .cio-zero-results .cio-button-container {
   width: 14rem;
   margin-right: auto;
@@ -565,7 +560,6 @@
   /* Container */
   .cio-container--with-image {
     display: flex;
-    justify-content: center;
     align-items: center;
     margin-bottom: 0;
     padding-bottom: 0;
@@ -582,7 +576,6 @@
 
   /* Cover Page Component */
   .cio-cover-question-container--with-image {
-    justify-content: center;
     margin-bottom: 0;
     padding-bottom: 0;
   }
@@ -629,6 +622,7 @@
     padding: 6% 2%;
     align-items: center;
     flex-direction: row;
+    justify-content: center;
   }
   .cio-cover-question-container--with-image {
     flex-direction: row-reverse;

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

@@ -6,7 +6,7 @@ export type QuizAPIReducerState = {
     quizCurrentQuestion?: CurrentQuestion;
     quizFirstQuestion?: NextQuestionResponse;
     quizResults?: QuizResultsResponse;
-    quizResultsFilters?: string[];
+    selectedOptionsWithAttributes?: string[];
 };
 export declare const initialState: QuizAPIReducerState;
 export default function apiReducer(state: QuizAPIReducerState, action: ActionQuizAPI): QuizAPIReducerState;

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

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

package/lib/types/types.d.ts

@@ -44,7 +44,7 @@ export interface QuizReturnState {
         sessionId?: string;
         currentQuestion?: CurrentQuestion | undefined;
         results?: QuizResultsResponse | undefined;
-        resultsFilters?: string[];
+        selectedOptionsWithAttributes?: string[];
     };
 }
 export type AnswerInputState = {

package/lib/types/utils.d.ts

@@ -1,4 +1,3 @@
-import { FilterExpression } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { QuestionTypes } from './components/CioQuiz/actions';
 import { QuizLocalReducerState } from './components/CioQuiz/quizLocalReducer';
 import { PrimaryColorStyles, QuestionImages } from './types';
@@ -37,7 +36,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 const getStateFromSessionStorage: (quizStateKey: string) => QuizLocalReducerState | null;
 export declare const resetQuizSessionStorageState: (quizStateKey: string) => () => void;
 export declare const logger: (action: any) => void;

package/package.json

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