@constructor-io/constructorio-ui-quizzes 1.4.0 → 1.4.2

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/RedoButton/RedoButton.js

@@ -10,7 +10,7 @@ function RedoButton(props) {
     if (getResetQuizButtonProps) {
         return (
         // eslint-disable-next-line react/button-has-type
-        react_1.default.createElement("button", Object.assign({}, rest, getResetQuizButtonProps()),
+        react_1.default.createElement("button", Object.assign({}, rest, getResetQuizButtonProps('secondary')),
             react_1.default.createElement(RedoSVG_1.default, null),
             react_1.default.createElement("span", null, redoText)));
     }

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

@@ -8,6 +8,6 @@ function ResultFilters() {
     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("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/hooks/usePropsGetters/index.js

@@ -15,8 +15,8 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
     const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
     const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
-    const getResetQuizButtonProps = (0, react_1.useCallback)(() => ({
-        className: 'cio-question-redo-button',
+    const getResetQuizButtonProps = (0, react_1.useCallback)((stylesType = 'primary') => ({
+        className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
         type: 'button',
         onClick: () => resetQuiz(),
     }), [resetQuiz]);

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/RedoButton/RedoButton.js

@@ -7,7 +7,7 @@ function RedoButton(props) {
     if (getResetQuizButtonProps) {
         return (
         // eslint-disable-next-line react/button-has-type
-        React.createElement("button", { ...rest, ...getResetQuizButtonProps() },
+        React.createElement("button", { ...rest, ...getResetQuizButtonProps('secondary') },
             React.createElement(RedoSVG, null),
             React.createElement("span", null, redoText)));
     }

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

@@ -4,6 +4,6 @@ function ResultFilters() {
     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("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/hooks/usePropsGetters/index.js

@@ -11,8 +11,8 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
     const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
     const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
-    const getResetQuizButtonProps = useCallback(() => ({
-        className: 'cio-question-redo-button',
+    const getResetQuizButtonProps = useCallback((stylesType = 'primary') => ({
+        className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
         type: 'button',
         onClick: () => resetQuiz(),
     }), [resetQuiz]);

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

@@ -565,7 +565,6 @@
   /* Container */
   .cio-container--with-image {
     display: flex;
-    justify-content: center;
     align-items: center;
     margin-bottom: 0;
     padding-bottom: 0;
@@ -582,7 +581,6 @@
 
   /* Cover Page Component */
   .cio-cover-question-container--with-image {
-    justify-content: center;
     margin-bottom: 0;
     padding-bottom: 0;
   }
@@ -629,6 +627,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/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 = {
@@ -154,7 +154,7 @@ export type GetCoverQuestionProps = () => CoverQuestionProps;
 export type GetSelectInputProps = (option: QuestionOption) => SelectInputProps;
 export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
 export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
-export type GetResetQuizButtonProps = () => ResetQuizButtonProps;
+export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
 export type GetAddToCartButtonProps = (result: QuizResultDataPartial, price?: number) => AddToCartButtonProps;
 export type GetQuizImageProps = () => QuizImageProps;

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.0",
+  "version": "1.4.2",
   "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"