@constructor-io/constructorio-ui-quizzes 1.9.10 → 1.10.0

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

@@ -5,11 +5,13 @@ const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
 const quizApiReducer_1 = tslib_1.__importStar(require("../../components/CioQuiz/quizApiReducer"));
 const services_1 = require("../../services");
+const useQueryParams_1 = tslib_1.__importDefault(require("../useQueryParams"));
 const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState
 // eslint-disable-next-line max-params
 ) => {
     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 dispatchQuizResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         try {
             const quizResults = yield (0, services_1.getQuizResults)(cioClient, quizId, {
@@ -36,12 +38,29 @@ 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);
+            dispatchApiState({
+                type: actions_1.QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS,
+                payload: { quizResults: Object.assign(Object.assign({}, quizResults), { attributes: queryAttributes }) },
+            });
+        }
+        catch (error) {
+            dispatchApiState({
+                type: actions_1.QuizAPIActionTypes.SET_IS_ERROR,
+            });
+        }
+    });
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
             dispatchApiState({
                 type: actions_1.QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (skipToResults) {
+            if (isSharedResultsQuery) {
+                yield dispatchSharedQuizResults();
+            }
+            else if (skipToResults) {
                 yield dispatchQuizResults();
             }
             else {
@@ -84,7 +103,13 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             }
         }))();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, quizId, quizLocalState.answers, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay]);
+    }, [
+        cioClient,
+        quizId,
+        quizLocalState.answers,
+        resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.numResultsToDisplay,
+        isSharedResultsQuery,
+    ]);
     return {
         quizApiState,
         dispatchApiState,

package/lib/cjs/hooks/useShareResultsLink.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function useShareResultsLink(quizState) {
+    var _a, _b, _c;
+    const urlObj = new URL(window.location.href);
+    const existingParams = urlObj.searchParams;
+    if (!((_b = (_a = quizState.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {
+        throw new Error("Can't generate share link without results");
+    }
+    existingParams.set('items', quizState.results.response.results
+        .filter((item) => { var _a; return (_a = item.data) === null || _a === void 0 ? void 0 : _a.id; })
+        .map((item) => item.data.id)
+        .join(',') || '');
+    existingParams.set('attributes', ((_c = quizState.selectedOptionsWithAttributes) === null || _c === void 0 ? void 0 : _c.map((option) => option).join(',')) || '');
+    const value = urlObj.toString();
+    return value;
+}
+exports.default = useShareResultsLink;

package/lib/cjs/index.js

@@ -1,11 +1,13 @@
 "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.useCioQuiz = void 0;
+exports.ResultHeroCard = exports.ResultFilters = 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
 var useQuiz_1 = require("./hooks/useQuiz");
 Object.defineProperty(exports, "useCioQuiz", { enumerable: true, get: function () { return tslib_1.__importDefault(useQuiz_1).default; } });
+var useShareResultsLink_1 = require("./hooks/useShareResultsLink");
+Object.defineProperty(exports, "useShareResultsLink", { enumerable: true, get: function () { return tslib_1.__importDefault(useShareResultsLink_1).default; } });
 // Questions Components
 var index_1 = require("./components/QuizQuestions/index");
 Object.defineProperty(exports, "QuizQuestions", { enumerable: true, get: function () { return tslib_1.__importDefault(index_1).default; } });

package/lib/cjs/services/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizResultsLoaded = exports.getQuizResults = exports.getNextQuestion = exports.getCioClient = void 0;
+exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizResultsLoaded = exports.getBrowseResultsForItemIds = exports.getQuizResults = exports.getNextQuestion = exports.getCioClient = void 0;
 const tslib_1 = require("tslib");
 /* eslint-disable @typescript-eslint/naming-convention */
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
@@ -20,6 +20,8 @@ const getNextQuestion = (cioClient, quizId, parameters) => cioClient === null ||
 exports.getNextQuestion = getNextQuestion;
 const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return cioClient === null || cioClient === void 0 ? void 0 : cioClient.quizzes.getQuizResults(quizId, parameters); });
 exports.getQuizResults = getQuizResults;
+const getBrowseResultsForItemIds = (cioClient, itemIds) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return cioClient === null || cioClient === void 0 ? void 0 : cioClient.browse.getBrowseResultsForItemIds(itemIds); });
+exports.getBrowseResultsForItemIds = getBrowseResultsForItemIds;
 // Tracking requests
 const trackQuizResultsLoaded = (cioClient, quizResults) => {
     var _a;

package/lib/cjs/stories/Quiz/argTypes.js

@@ -1,35 +1,286 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.argTypes = void 0;
+exports.storiesControls = exports.docsControls = exports.argTypes = void 0;
 // eslint-disable-next-line
 exports.argTypes = {
+    quizId: {
+        description: 'ID of the quiz',
+        control: {
+            type: 'text',
+        },
+    },
+    quizVersionId: {
+        description: 'Optional quiz version Id',
+    },
     apiKey: {
-        type: { name: 'string' },
-        description: 'Your Constructor API key',
+        description: 'Your Constructor API key. Either `apiKey` or `cioJsClient` are required',
+    },
+    'callbacks.onQuizNextQuestion': {
+        description: 'Callback function to be called when the next question is loaded',
+        control: false,
         table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(question) => void',
+                detail: '(question: QuestionWithAnswer) => void',
+            },
+        },
+    },
+    'callbacks.onQuizResultsLoaded': {
+        description: 'Callback function to be called when the quiz results are loaded',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(results) => void',
+                detail: '(results: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onQuizResultClick': {
+        description: 'Callback function to be called when a quiz result is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result, position: number) => void',
+                detail: '(result: QuizResultDataPartial, position: number) => void',
+            },
+        },
+    },
+    'callbacks.onAddToCartClick': {
+        description: 'Callback function to be called when the add to cart button is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => void',
+                detail: '(result: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onAddToFavoritesClick': {
+        description: 'Callback function to be called when the add to favorites button is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => void',
+                detail: '(result: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onEmailResults': {
+        description: 'Callback function to be called when emailing results.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(args) => void',
+                detail: '(args: QuizEmailResults) => void',
+            },
+        },
+    },
+    cioJsClient: {
+        description: 'Optional custom constructor instance. Either `apiKey` or `cioJsClient` are required',
+    },
+    primaryColor: {
+        description: "RGB value string for quiz primary theme color ie: `'255, 82, 48'`",
+        control: {
+            type: 'text',
+        },
+        defaultValue: {
+            summary: '35, 71, 199',
+        },
+    },
+    'resultCardOptions.resultCardRegularPriceKey': {
+        description: 'Key name for the regular price in the API response',
+        control: {
+            type: 'text',
+        },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'regular_price',
+            },
             type: {
                 summary: 'string',
             },
         },
+    },
+    'resultCardOptions.resultCardSalePriceKey': {
+        description: 'Key name for the sale price in the API response',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'sale_price',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
-    quizId: {
-        type: { name: 'string' },
-        description: 'ID of the quiz',
+    'resultCardOptions.resultCardRatingCountKey': {
+        description: 'Key name for the rating count in the API response',
+        control: {
+            type: 'text',
+        },
         table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'rating_count',
+            },
             type: {
                 summary: 'string',
             },
         },
+    },
+    'resultCardOptions.resultCardRatingScoreKey': {
+        description: 'Key name for the rating score in the API response',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'rating_score',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
-    primaryColor: {
+    'resultCardOptions.renderResultCardPriceDetails': {
+        description: 'Callback function to render result card price details',
+        control: false,
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => JSX.Element',
+                detail: '(result: QuizResultDataPartial) => JSX.Element',
+            },
+        },
+    },
+    'resultsPageOptions.numResultsToDisplay': {
+        description: 'Number of results to display on the results page',
+        control: {
+            type: 'number',
+        },
+        table: {
+            subcategory: 'resultsPageOptions',
+            defaultValue: {
+                summary: 5,
+            },
+            type: {
+                summary: 'number',
+            },
+        },
+    },
+    'resultsPageOptions.favoriteItems': {
+        description: 'Array of favorite item IDs',
+        control: false,
+        table: {
+            subcategory: 'resultsPageOptions',
+            type: {
+                summary: 'string[]',
+            },
+        },
+    },
+    'resultsPageOptions.showShareResultsButton': {
+        description: 'Boolean for whether or not to show share results button on the results page',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: true,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.showSessionModal': {
+        description: 'Boolean for whether or not to show session modal to hydrate quiz on the results page',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: false,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.showSessionModalOnResults': {
+        description: 'Boolean for whether or not to show session modal to hydrate quiz',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: false,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.sessionStateKey': {
+        description: 'Key name where session storage state is saved',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: 'quizState',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
+    enableHydration: {
+        description: 'Boolean for whether or not to hydrate quiz questions and results on page reload',
+        defaultValue: {
+            summary: 'true',
+        },
+    },
+};
+exports.docsControls = {
+    sort: 'requiredFirst',
+    exclude: ['sessionStateOptions', 'callbacks', 'resultsPageOptions', 'resultCardOptions'],
+};
+exports.storiesControls = {
+    include: ['apiKey', 'quizId', 'quizVersionId', 'primaryColor'],
 };

package/lib/cjs/utils.js

@@ -57,6 +57,7 @@ exports.functionStrings = {
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
     onQuizSkipQuestion: `(question) => console.dir(question)`,
+    onEmailResults: `(data) => console.dir(data)`,
     cioJsClient: `cioJsClient`,
 };
 const stringifyWithDefaults = (obj) => {

package/lib/cjs/version.js

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

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

@@ -20,4 +20,5 @@ export var QuizAPIActionTypes;
     QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_RESULTS"] = 2] = "SET_QUIZ_RESULTS";
     QuizAPIActionTypes[QuizAPIActionTypes["SET_CURRENT_QUESTION"] = 3] = "SET_CURRENT_QUESTION";
     QuizAPIActionTypes[QuizAPIActionTypes["RESET_QUIZ"] = 4] = "RESET_QUIZ";
+    QuizAPIActionTypes[QuizAPIActionTypes["SET_QUIZ_SHARED_RESULTS"] = 5] = "SET_QUIZ_SHARED_RESULTS";
 })(QuizAPIActionTypes || (QuizAPIActionTypes = {}));

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

@@ -7,12 +7,14 @@ import { RequestStates } from '../../constants';
 import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
+import ShareResultsModal from '../ShareResultsModal/ShareResultsModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
-    const { resultsPageOptions, sessionStateOptions, questionsPageOptions } = props;
+    const [showShareModal, setShowShareModal] = useState(false);
+    const { callbacks, sessionStateOptions, questionsPageOptions, resultCardOptions, resultsPageOptions, } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     useEffect(() => {
         // Respect showSessionModal if defined, else default to true.
@@ -39,9 +41,10 @@ export default function CioQuiz(props) {
         getQuizResultButtonProps,
         getQuizResultLinkProps,
         getResetQuizButtonProps,
+        getShareResultsButtonProps,
         getSelectInputProps,
-        customClickItemCallback: !!resultsPageOptions?.onQuizResultClick,
-        customAddToFavoritesCallback: !!resultsPageOptions?.onAddToFavoritesClick,
+        customClickItemCallback: !!callbacks?.onQuizResultClick,
+        customAddToFavoritesCallback: !!callbacks?.onAddToFavoritesClick,
         primaryColorStyles,
     };
     if (state.quiz.requestState === RequestStates.Loading) {
@@ -53,13 +56,14 @@ export default function CioQuiz(props) {
     const questionImages = questionData?.images;
     const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === RequestStates.Success) {
-        return (React.createElement("div", { className: 'cio-quiz' },
+        return (React.createElement("div", { className: 'cio-quiz', style: { overflow: showShareModal || showSessionPrompt ? 'hidden' : undefined } },
             displayBackgroundImage && renderImages(questionImages, 'cio-question-background-image'),
             React.createElement("style", null,
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+            state.quiz && showShareModal && (React.createElement(ShareResultsModal, { onClose: () => setShowShareModal(false), quizState: state.quiz, onEmailResults: callbacks?.onEmailResults })),
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (React.createElement(ResultContainer, { resultCardOptions: resultCardOptions, onShare: () => setShowShareModal(true), resultsPageOptions: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
                 React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),
                 React.createElement(ControlBar, { skipQuestionButtonText: questionsPageOptions?.skipQuestionButtonText, ctaButtonText: questionData?.cta_text || undefined })))))));

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

@@ -54,6 +54,15 @@ export default function apiReducer(state, action) {
                 selectedOptionsWithAttributes,
             };
         }
+        case QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS: {
+            return {
+                ...state,
+                quizRequestState: RequestStates.Success,
+                quizResults: action.payload?.quizResults,
+                quizCurrentQuestion: undefined,
+                selectedOptionsWithAttributes: action.payload?.quizResults.attributes,
+            };
+        }
         case QuizAPIActionTypes.RESET_QUIZ:
             return initialState;
         default:

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

@@ -1,31 +1,37 @@
 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 ZeroResults from '../ZeroResults/ZeroResults';
 import Results from '../Results/Results';
 import Spinner from '../Spinner/Spinner';
 export default function ResultContainer(props) {
-    const { options } = props;
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
+    const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = useContext(QuizContext);
-    const numberOfResults = state?.quiz.results?.response?.results?.length;
-    const zeroResults = !numberOfResults;
-    const resultsTitle = zeroResults ? '' : 'Here are your results';
-    if (state?.quiz.results) {
+    if (resultCardOptions) {
+        const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = resultCardOptions;
+        const numberOfResults = state?.quiz.results?.response?.results?.length;
+        const zeroResults = !numberOfResults;
+        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 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)));
+        }
         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, { hasNoResults: zeroResults }),
-                React.createElement(RedoButton, null)),
-            !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)));
+            React.createElement(Spinner, null)));
     }
-    return (React.createElement("div", { className: 'cio-results-container' },
-        React.createElement(Spinner, null)));
+    return null;
 }

package/lib/mjs/components/ShareButton/ShareButton.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import ShareSVG from './ShareSVG';
+import QuizContext from '../CioQuiz/context';
+function ShareButton(props) {
+    const { shareText = 'Share Results', disabled, onClick, ...rest } = props;
+    const { getShareResultsButtonProps } = useContext(QuizContext);
+    if (getShareResultsButtonProps) {
+        return (React.createElement("button", { ...rest, ...getShareResultsButtonProps(), type: 'button', onClick: onClick },
+            React.createElement(ShareSVG, null),
+            React.createElement("span", null, shareText)));
+    }
+    return null;
+}
+export default ShareButton;

package/lib/mjs/components/ShareButton/ShareSVG.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function ShareSVG() {
+    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M10.5026 6.00201H11.7529C12.0845 6.00201 12.4025 6.13374 12.637 6.36821C12.8714 6.60268 13.0032 6.92069 13.0032 7.25229V13.2536C13.0032 13.5852 12.8714 13.9032 12.637 14.1377C12.4025 14.3721 12.0845 14.5039 11.7529 14.5039H4.25125C3.91966 14.5039 3.60164 14.3721 3.36717 14.1377C3.1327 13.9032 3.00098 13.5852 3.00098 13.2536V7.25229C3.00098 6.92069 3.1327 6.60268 3.36717 6.36821C3.60164 6.13374 3.91966 6.00201 4.25125 6.00201H5.50152', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+        React.createElement("path", { d: 'M10.5026 4.00116L8.00201 1.50061L5.50146 4.00116', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+        React.createElement("path", { d: 'M8.00146 10.0337V1.50061', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function AlertCircleSVG() {
+    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M21.0009 11.9995C21.0009 7.03076 16.9697 2.99951 12.0009 2.99951C7.03217 2.99951 3.00092 7.03076 3.00092 11.9995C3.00092 16.9683 7.03217 20.9995 12.0009 20.9995C16.9697 20.9995 21.0009 16.9683 21.0009 11.9995Z', stroke: '#101010', strokeWidth: '1.33', strokeMiterlimit: '10' }),
+        React.createElement("path", { d: 'M11.7311 7.78322L12.0002 13.4996L12.2688 7.78322C12.2705 7.74667 12.2646 7.71017 12.2517 7.67595C12.2388 7.64173 12.219 7.6105 12.1936 7.58418C12.1682 7.55785 12.1377 7.53699 12.104 7.52285C12.0702 7.50872 12.034 7.50161 11.9974 7.50197V7.50197C11.9612 7.50231 11.9255 7.50993 11.8924 7.52437C11.8593 7.53882 11.8294 7.55979 11.8045 7.58604C11.7797 7.61229 11.7604 7.64328 11.7478 7.67716C11.7352 7.71104 11.7295 7.74711 11.7311 7.78322V7.78322Z', stroke: '#101010', strokeWidth: '1.00189', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+        React.createElement("path", { d: 'M12.0028 17.2505C11.8168 17.2505 11.6351 17.1954 11.4805 17.0921C11.3259 16.9888 11.2054 16.8419 11.1342 16.6702C11.0631 16.4984 11.0444 16.3093 11.0807 16.127C11.117 15.9446 11.2065 15.7771 11.338 15.6456C11.4695 15.5141 11.637 15.4246 11.8194 15.3883C12.0017 15.352 12.1908 15.3706 12.3626 15.4418C12.5343 15.513 12.6812 15.6335 12.7845 15.7881C12.8878 15.9427 12.9429 16.1244 12.9429 16.3104C12.9429 16.5597 12.8439 16.7988 12.6676 16.9752C12.4913 17.1515 12.2521 17.2505 12.0028 17.2505Z', fill: '#101010' })));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function CheckMarkCircleSVG() {
+    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M21.001 12.0001C21.001 7.03137 16.9697 3.00012 12.001 3.00012C7.03223 3.00012 3.00098 7.03137 3.00098 12.0001C3.00098 16.9689 7.03223 21.0001 12.001 21.0001C16.9697 21.0001 21.001 16.9689 21.001 12.0001Z', stroke: '#101010', strokeWidth: '1.33', strokeMiterlimit: '10' }),
+        React.createElement("path", { d: 'M16.5005 8.24963L10.2005 15.7496L7.50049 12.7496', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function CloseSVG() {
+    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M18.4748 4.11089C18.8653 3.72036 19.4985 3.72036 19.889 4.11089C20.2795 4.50141 20.2795 5.13458 19.889 5.5251L5.52503 19.8891C5.13451 20.2796 4.50134 20.2796 4.11082 19.8891C3.72029 19.4985 3.72029 18.8654 4.11082 18.4748L18.4748 4.11089Z', fill: '#505A75' }),
+        React.createElement("path", { d: 'M4.11076 5.5251C3.72024 5.13458 3.72024 4.50141 4.11076 4.11089C4.50129 3.72036 5.13445 3.72036 5.52498 4.11089L19.8889 18.4748C20.2795 18.8654 20.2795 19.4985 19.8889 19.8891C19.4984 20.2796 18.8652 20.2796 18.4747 19.8891L4.11076 5.5251Z', fill: '#505A75' })));
+}

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import CheckMarkCircleSVG from './CheckMarkCircleSVG';
+import AlertCircleSVG from './AlertCircleSVG';
+export default function EmailField({ onSubmit }) {
+    const [formError, setFormError] = useState(null);
+    const [isSubmitted, setIsSubmitted] = useState(false);
+    const [email, setEmail] = useState('');
+    const validate = () => {
+        if (email.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+            setFormError(null);
+            return true;
+        }
+        setFormError({ type: 'validate', message: 'Please enter a valid email address' });
+        return false;
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const isValid = validate();
+        if (!isValid)
+            return;
+        try {
+            await onSubmit(email);
+            setIsSubmitted(true);
+        }
+        catch (_e) {
+            setFormError({
+                type: 'callback',
+                message: 'Sorry, there was an error sending. Please try again.',
+            });
+        }
+    };
+    return (React.createElement("div", { className: 'cio-share-results-feature-group' },
+        React.createElement("form", { onSubmit: handleSubmit },
+            React.createElement("div", { className: 'cio-share-results-description' }, "Share by email"),
+            React.createElement("div", { className: 'cio-share-results-button-group' },
+                React.createElement("div", { className: 'cio-share-results-email-input-group' },
+                    React.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value) }),
+                    formError?.type === 'validate' && (React.createElement("div", { className: 'cio-share-results-email-input-error-message' }, formError.message))),
+                React.createElement("button", { className: 'cio-share-results-share-button', type: 'submit' }, "Send"))),
+        isSubmitted && (React.createElement("div", { className: 'cio-share-results-notification' },
+            React.createElement(CheckMarkCircleSVG, null),
+            React.createElement("div", null, "Email sent"))),
+        formError?.type === 'callback' && (React.createElement("div", { className: 'cio-share-results-notification' },
+            React.createElement(AlertCircleSVG, null),
+            React.createElement("div", null, formError.message)))));
+}