@constructor-io/constructorio-ui-quizzes 1.17.18 → 1.17.20

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

@@ -78,7 +78,7 @@ function CioQuiz(props) {
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            state.quiz && showShareModal && (react_1.default.createElement(ShareResultsModal_1.default, { onClose: onModalClose, quizState: state.quiz, onEmailResults: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onEmailResults })),
+            state.quiz && showShareModal && (react_1.default.createElement(ShareResultsModal_1.default, { onClose: onModalClose, quizState: state.quiz, onEmailResults: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onEmailResults, answers: state.answers.payload })),
             react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { resultCardOptions: resultCardOptions, onShare: onModalOpen, resultsPageOptions: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ProgressBar_1.default, null),
                 react_1.default.createElement(QuizQuestions_1.default, null),

package/lib/cjs/components/Results/Results.js

@@ -7,11 +7,11 @@ const ResultCard_1 = tslib_1.__importDefault(require("../ResultCard/ResultCard")
 function Results(props) {
     var _a, _b, _c, _d;
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, renderResultCard, } = props;
-    const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps } = (0, react_1.useContext)(context_1.default);
-    const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps };
+    const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps } = (0, react_1.useContext)(context_1.default);
+    const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps };
     return (react_1.default.createElement("div", { className: 'cio-results' }, (_d = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.results) === null || _d === void 0 ? void 0 : _d.map((result, index) => {
         var _a;
-        return renderResultCard ? (renderResultCard(result, getters)) : (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, ratingCountKey: resultCardRatingCountKey, ratingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, resultPosition: index + 1 }));
+        return renderResultCard ? (renderResultCard(result, getters, index)) : (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, ratingCountKey: resultCardRatingCountKey, ratingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, resultPosition: index + 1 }));
     })));
 }
 exports.default = Results;

package/lib/cjs/components/ShareResultsModal/ShareResultsModal.js

@@ -6,9 +6,9 @@ const CloseSVG_1 = tslib_1.__importDefault(require("./CloseSVG"));
 const LinkField_1 = tslib_1.__importDefault(require("./LinkField"));
 const EmailField_1 = tslib_1.__importDefault(require("./EmailField"));
 const useShareResultsLink_1 = tslib_1.__importDefault(require("../../hooks/useShareResultsLink"));
-function ShareResultsModal({ onClose, quizState, onEmailResults, }) {
+function ShareResultsModal({ onClose, quizState, answers, onEmailResults, }) {
     var _a, _b;
-    const url = (0, useShareResultsLink_1.default)(quizState);
+    const url = (0, useShareResultsLink_1.default)(quizState, answers);
     const results = (_b = (_a = quizState === null || quizState === void 0 ? void 0 : quizState.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results;
     return (react_1.default.createElement("div", { className: 'cio-share-results-modal', role: 'presentation', onClick: onClose },
         react_1.default.createElement("div", { className: 'cio-share-results-container' },

package/lib/cjs/hooks/useQueryParams.js

@@ -13,6 +13,13 @@ const useQueryParams = () => {
     };
     const queryItems = getParsedQueryParam('items');
     const queryAttributes = getParsedQueryParam('attributes');
+    const answers = (() => {
+        const ans = getParsedQueryParam('a');
+        if (!ans.length)
+            return [];
+        return ans.map((a) => a.split('-'));
+    })();
+    const quizVersionId = getParsedQueryParam('quiz_version_id')[0];
     const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
     const removeSharedResultsQueryParams = (0, react_1.useCallback)(() => {
         if (typeof window === 'undefined')
@@ -20,12 +27,16 @@ const useQueryParams = () => {
         const updatedUrl = new URL(window.location.href);
         updatedUrl.searchParams.delete('items');
         updatedUrl.searchParams.delete('attributes');
+        updatedUrl.searchParams.delete('quiz_version_id');
+        updatedUrl.searchParams.delete('a');
         if (!updatedUrl.searchParams.toString().length) {
             updatedUrl.search = '';
         }
         window.history.replaceState({}, '', updatedUrl.toString());
     }, []);
     return {
+        answers,
+        quizVersionId,
         queryItems,
         queryAttributes,
         isSharedResultsQuery,

package/lib/cjs/hooks/useQuiz.js

@@ -25,6 +25,7 @@ const useQuiz = (quizOptions) => {
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
+                payload: quizLocalState.answers,
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,

package/lib/cjs/hooks/useQuizEvents/useHydrateQuizLocalState.js

@@ -19,7 +19,7 @@ const useHydrateQuizLocalState = (quizId, quizSessionStorageState, dispatchLocal
         if (skipToResults)
             hydrateQuizLocalStateHandler();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [quizId]);
     return hydrateQuizLocalStateHandler;
 };
 exports.default = useHydrateQuizLocalState;

package/lib/cjs/hooks/useQuizState/useQuizApiState.js

@@ -11,7 +11,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
 ) => {
     const [quizApiState, dispatchApiState] = (0, react_1.useReducer)(quizApiReducer_1.default, quizApiReducer_1.initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
-    const { queryItems, queryAttributes, isSharedResultsQuery } = (0, useQueryParams_1.default)();
+    const { queryItems, queryAttributes, isSharedResultsQuery, answers, quizVersionId: quizVersionIdFromParam, } = (0, useQueryParams_1.default)();
     const dispatchQuizResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         try {
             const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, Object.assign({ answers: quizLocalState.answers, resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay, quizVersionId: quizLocalState.quizVersionId, quizSessionId: quizLocalState.quizSessionId }, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.requestConfigs));
@@ -52,7 +52,18 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
     });
     const dispatchSharedQuizResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         try {
-            const quizResults = yield (0, services_1.getBrowseResultsForItemIds)(cioClient, queryItems);
+            let quizResults;
+            if (quizVersionIdFromParam && answers && answers.length) {
+                try {
+                    quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, Object.assign({ answers, resultsPerPage: resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay, quizVersionId: quizVersionIdFromParam }, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.requestConfigs));
+                }
+                catch (error) {
+                    quizResults = yield (0, services_1.getBrowseResultsForItemIds)(cioClient, queryItems);
+                }
+            }
+            else {
+                quizResults = yield (0, services_1.getBrowseResultsForItemIds)(cioClient, queryItems);
+            }
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS,
                 payload: { quizResults: Object.assign(Object.assign({}, quizResults), { attributes: queryAttributes }) },

package/lib/cjs/hooks/useShareResultsLink.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function useShareResultsLink(quizState) {
+function useShareResultsLink(quizState, answers) {
     var _a, _b, _c;
     if (typeof window === 'undefined') {
         return '';
@@ -15,6 +15,12 @@ function useShareResultsLink(quizState) {
         .map((item) => item.data.id)
         .join(',') || '');
     existingParams.set('attributes', ((_c = quizState.selectedOptionsWithAttributes) === null || _c === void 0 ? void 0 : _c.map((option) => option).join(',')) || '');
+    if (quizState.versionId) {
+        existingParams.set('quiz_version_id', quizState.versionId);
+    }
+    if (answers && answers.length) {
+        existingParams.set('a', answers.map((ans) => ans.join('-')).join(',') || '');
+    }
     const value = urlObj.toString();
     return value;
 }

package/lib/cjs/version.js

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

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

@@ -74,7 +74,7 @@ export default function CioQuiz(props) {
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            state.quiz && showShareModal && (React.createElement(ShareResultsModal, { onClose: onModalClose, quizState: state.quiz, onEmailResults: callbacks?.onEmailResults })),
+            state.quiz && showShareModal && (React.createElement(ShareResultsModal, { onClose: onModalClose, quizState: state.quiz, onEmailResults: callbacks?.onEmailResults, answers: state.answers.payload })),
             React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (React.createElement(ResultContainer, { resultCardOptions: resultCardOptions, onShare: onModalOpen, resultsPageOptions: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
                 React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),

package/lib/mjs/components/Results/Results.js

@@ -3,8 +3,8 @@ import QuizContext from '../CioQuiz/context';
 import ResultCard from '../ResultCard/ResultCard';
 function Results(props) {
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, renderResultCard, } = props;
-    const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps } = useContext(QuizContext);
-    const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps };
-    return (React.createElement("div", { className: 'cio-results' }, state?.quiz?.results?.response?.results?.map((result, index) => renderResultCard ? (renderResultCard(result, getters)) : (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, ratingCountKey: resultCardRatingCountKey, ratingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, resultPosition: index + 1 })))));
+    const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps } = useContext(QuizContext);
+    const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps };
+    return (React.createElement("div", { className: 'cio-results' }, state?.quiz?.results?.response?.results?.map((result, index) => renderResultCard ? (renderResultCard(result, getters, index)) : (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, ratingCountKey: resultCardRatingCountKey, ratingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, resultPosition: index + 1 })))));
 }
 export default Results;

package/lib/mjs/components/ShareResultsModal/ShareResultsModal.js

@@ -3,8 +3,8 @@ import CloseSVG from './CloseSVG';
 import LinkField from './LinkField';
 import EmailField from './EmailField';
 import useShareResultsLink from '../../hooks/useShareResultsLink';
-export default function ShareResultsModal({ onClose, quizState, onEmailResults, }) {
-    const url = useShareResultsLink(quizState);
+export default function ShareResultsModal({ onClose, quizState, answers, onEmailResults, }) {
+    const url = useShareResultsLink(quizState, answers);
     const results = quizState?.results?.response?.results;
     return (React.createElement("div", { className: 'cio-share-results-modal', role: 'presentation', onClick: onClose },
         React.createElement("div", { className: 'cio-share-results-container' },

package/lib/mjs/hooks/useQueryParams.js

@@ -11,6 +11,13 @@ const useQueryParams = () => {
     };
     const queryItems = getParsedQueryParam('items');
     const queryAttributes = getParsedQueryParam('attributes');
+    const answers = (() => {
+        const ans = getParsedQueryParam('a');
+        if (!ans.length)
+            return [];
+        return ans.map((a) => a.split('-'));
+    })();
+    const quizVersionId = getParsedQueryParam('quiz_version_id')[0];
     const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
     const removeSharedResultsQueryParams = useCallback(() => {
         if (typeof window === 'undefined')
@@ -18,12 +25,16 @@ const useQueryParams = () => {
         const updatedUrl = new URL(window.location.href);
         updatedUrl.searchParams.delete('items');
         updatedUrl.searchParams.delete('attributes');
+        updatedUrl.searchParams.delete('quiz_version_id');
+        updatedUrl.searchParams.delete('a');
         if (!updatedUrl.searchParams.toString().length) {
             updatedUrl.search = '';
         }
         window.history.replaceState({}, '', updatedUrl.toString());
     }, []);
     return {
+        answers,
+        quizVersionId,
         queryItems,
         queryAttributes,
         isSharedResultsQuery,

package/lib/mjs/hooks/useQuiz.js

@@ -23,6 +23,7 @@ const useQuiz = (quizOptions) => {
         state: {
             answers: {
                 inputs: quizLocalState.answerInputs,
+                payload: quizLocalState.answers,
             },
             quiz: {
                 requestState: quizApiState.quizRequestState,

package/lib/mjs/hooks/useQuizEvents/useHydrateQuizLocalState.js

@@ -17,7 +17,7 @@ const useHydrateQuizLocalState = (quizId, quizSessionStorageState, dispatchLocal
         if (skipToResults)
             hydrateQuizLocalStateHandler();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [quizId]);
     return hydrateQuizLocalStateHandler;
 };
 export default useHydrateQuizLocalState;

package/lib/mjs/hooks/useQuizState/useQuizApiState.js

@@ -8,7 +8,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
 ) => {
     const [quizApiState, dispatchApiState] = useReducer(apiReducer, initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
-    const { queryItems, queryAttributes, isSharedResultsQuery } = useQueryParams();
+    const { queryItems, queryAttributes, isSharedResultsQuery, answers, quizVersionId: quizVersionIdFromParam, } = useQueryParams();
     const dispatchQuizResults = async () => {
         try {
             const quizResults = await getQuizResults(cioClient, quizId, {
@@ -55,7 +55,23 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
     };
     const dispatchSharedQuizResults = async () => {
         try {
-            const quizResults = await getBrowseResultsForItemIds(cioClient, queryItems);
+            let quizResults;
+            if (quizVersionIdFromParam && answers && answers.length) {
+                try {
+                    quizResults = await getQuizResults(cioClient, quizId, {
+                        answers,
+                        resultsPerPage: resultsPageOptions?.numResultsToDisplay,
+                        quizVersionId: quizVersionIdFromParam,
+                        ...resultsPageOptions?.requestConfigs,
+                    });
+                }
+                catch (error) {
+                    quizResults = await getBrowseResultsForItemIds(cioClient, queryItems);
+                }
+            }
+            else {
+                quizResults = await getBrowseResultsForItemIds(cioClient, queryItems);
+            }
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS,
                 payload: { quizResults: { ...quizResults, attributes: queryAttributes } },

package/lib/mjs/hooks/useShareResultsLink.js

@@ -1,4 +1,4 @@
-export default function useShareResultsLink(quizState) {
+export default function useShareResultsLink(quizState, answers) {
     if (typeof window === 'undefined') {
         return '';
     }
@@ -12,6 +12,12 @@ export default function useShareResultsLink(quizState) {
         .map((item) => item.data.id)
         .join(',') || '');
     existingParams.set('attributes', quizState.selectedOptionsWithAttributes?.map((option) => option).join(',') || '');
+    if (quizState.versionId) {
+        existingParams.set('quiz_version_id', quizState.versionId);
+    }
+    if (answers && answers.length) {
+        existingParams.set('a', answers.map((ans) => ans.join('-')).join(',') || '');
+    }
     const value = urlObj.toString();
     return value;
 }

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.18';
+export default '1.17.20';

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

@@ -4,6 +4,7 @@ interface ShareResultsModalProps {
     onClose: () => void;
     quizState: QuizReturnState['quiz'];
     onEmailResults?: QuizResultsEventsProps.OnEmailResults;
+    answers: string[][];
 }
-export default function ShareResultsModal({ onClose, quizState, onEmailResults, }: ShareResultsModalProps): JSX.Element;
+export default function ShareResultsModal({ onClose, quizState, answers, onEmailResults, }: ShareResultsModalProps): JSX.Element;
 export {};

package/lib/types/hooks/useQueryParams.d.ts

@@ -1,4 +1,6 @@
 declare const useQueryParams: () => {
+    answers: string[][];
+    quizVersionId: string;
     queryItems: string[];
     queryAttributes: string[];
     isSharedResultsQuery: boolean;

package/lib/types/hooks/useShareResultsLink.d.ts

@@ -1,2 +1,2 @@
 import { QuizReturnState } from '../types';
-export default function useShareResultsLink(quizState: QuizReturnState['quiz']): string;
+export default function useShareResultsLink(quizState: QuizReturnState['quiz'], answers: string[][]): string;

package/lib/types/types.d.ts

@@ -19,7 +19,8 @@ export interface ResultCardOptions {
     renderResultCard?: (result: QuizResultDataPartial, getters: {
         getAddToCartButtonProps?: GetAddToCartButtonProps;
         getAddToFavoritesButtonProps?: GetAddToFavoritesButtonProps;
-    }) => JSX.Element;
+        getQuizResultLinkProps?: GetQuizResultLinkProps;
+    }, index: number) => JSX.Element;
 }
 export declare namespace QuizResultsEventsProps {
     type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;
@@ -77,6 +78,7 @@ export interface IQuizProps {
 export interface QuizReturnState {
     answers: {
         inputs: AnswerInputState;
+        payload: string[][];
     };
     quiz: {
         requestState: RequestStates;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.18";
+declare const _default: "1.17.20";
 export default _default;

package/package.json

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