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

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

@@ -23,4 +23,5 @@ 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 = exports.QuizAPIActionTypes || (exports.QuizAPIActionTypes = {}));

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

@@ -10,13 +10,15 @@ const constants_1 = require("../../constants");
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
+const ShareResultsModal_1 = tslib_1.__importDefault(require("../ShareResultsModal/ShareResultsModal"));
 const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
-    const { resultsPageOptions, sessionStateOptions, questionsPageOptions } = props;
+    const [showShareModal, setShowShareModal] = (0, react_1.useState)(false);
+    const { callbacks, sessionStateOptions, questionsPageOptions, resultCardOptions, resultsPageOptions, } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
     (0, react_1.useEffect)(() => {
         // Respect showSessionModal if defined, else default to true.
@@ -43,9 +45,10 @@ function CioQuiz(props) {
         getQuizResultButtonProps,
         getQuizResultLinkProps,
         getResetQuizButtonProps,
+        getShareResultsButtonProps,
         getSelectInputProps,
-        customClickItemCallback: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onQuizResultClick),
-        customAddToFavoritesCallback: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onAddToFavoritesClick),
+        customClickItemCallback: !!(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizResultClick),
+        customAddToFavoritesCallback: !!(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAddToFavoritesClick),
         primaryColorStyles,
     };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
@@ -57,13 +60,14 @@ function CioQuiz(props) {
     const questionImages = questionData === null || questionData === void 0 ? void 0 : questionData.images;
     const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === constants_1.RequestStates.Success) {
-        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+        return (react_1.default.createElement("div", { className: 'cio-quiz', style: { overflow: showShareModal || showSessionPrompt ? 'hidden' : undefined } },
             displayBackgroundImage && (0, utils_1.renderImages)(questionImages, 'cio-question-background-image'),
             react_1.default.createElement("style", null,
                 ".cio-quiz ",
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+            state.quiz && showShareModal && (react_1.default.createElement(ShareResultsModal_1.default, { onClose: () => setShowShareModal(false), quizState: state.quiz, onEmailResults: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onEmailResults })),
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { resultCardOptions: resultCardOptions, onShare: () => setShowShareModal(true), 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),
                 react_1.default.createElement(ControlBar_1.default, { skipQuestionButtonText: questionsPageOptions === null || questionsPageOptions === void 0 ? void 0 : questionsPageOptions.skipQuestionButtonText, ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));

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

@@ -8,7 +8,7 @@ exports.initialState = {
     quizRequestState: constants_1.RequestStates.Stale,
 };
 function apiReducer(state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     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 });
@@ -28,6 +28,9 @@ function apiReducer(state, action) {
             const selectedOptionsWithAttributes = ((_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_l = action.payload) === null || _l === void 0 ? void 0 : _l.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes });
         }
+        case actions_1.QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS: {
+            return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizResults: (_m = action.payload) === null || _m === void 0 ? void 0 : _m.quizResults, quizCurrentQuestion: undefined, selectedOptionsWithAttributes: (_o = action.payload) === null || _o === void 0 ? void 0 : _o.quizResults.attributes });
+        }
         case actions_1.QuizAPIActionTypes.RESET_QUIZ:
             return exports.initialState;
         default:

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const RedoButton_1 = tslib_1.__importDefault(require("../RedoButton/RedoButton"));
+const ShareButton_1 = tslib_1.__importDefault(require("../ShareButton/ShareButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const ResultFilters_1 = tslib_1.__importDefault(require("../ResultFilters/ResultFilters"));
 const ZeroResults_1 = tslib_1.__importDefault(require("../ZeroResults/ZeroResults"));
@@ -10,27 +11,32 @@ const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
 const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 function ResultContainer(props) {
     var _a, _b, _c;
-    const { options } = props;
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
+    const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = (0, react_1.useContext)(context_1.default);
-    const numberOfResults = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length;
-    const zeroResults = !numberOfResults;
-    const resultsTitle = zeroResults ? '' : 'Here are your results';
-    if (state === null || state === void 0 ? void 0 : state.quiz.results) {
+    if (resultCardOptions) {
+        const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = resultCardOptions;
+        const numberOfResults = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length;
+        const zeroResults = !numberOfResults;
+        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 cio-results-button-group' },
+                    react_1.default.createElement(ResultFilters_1.default, { hasNoResults: zeroResults }),
+                    react_1.default.createElement("div", { className: 'cio-results-redo-and-share-button-group' },
+                        react_1.default.createElement(RedoButton_1.default, null),
+                        (resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.showShareResultsButton) && react_1.default.createElement(ShareButton_1.default, { onClick: onShare }))),
+                !zeroResults && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: 'cio-results-num-results' },
+                        numberOfResults,
+                        " ",
+                        numberOfResults === 1 ? 'result' : 'results'),
+                    react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
+                zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
+        }
         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, { hasNoResults: zeroResults }),
-                react_1.default.createElement(RedoButton_1.default, null)),
-            !zeroResults && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: 'cio-results-num-results' },
-                    numberOfResults,
-                    " ",
-                    numberOfResults === 1 ? 'result' : 'results'),
-                react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
-            zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
+            react_1.default.createElement(Spinner_1.default, null)));
     }
-    return (react_1.default.createElement("div", { className: 'cio-results-container' },
-        react_1.default.createElement(Spinner_1.default, null)));
+    return null;
 }
 exports.default = ResultContainer;

package/lib/cjs/components/ShareButton/ShareButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ShareSVG_1 = tslib_1.__importDefault(require("./ShareSVG"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function ShareButton(props) {
+    const { shareText = 'Share Results', disabled, onClick } = props, rest = tslib_1.__rest(props, ["shareText", "disabled", "onClick"]);
+    const { getShareResultsButtonProps } = (0, react_1.useContext)(context_1.default);
+    if (getShareResultsButtonProps) {
+        return (react_1.default.createElement("button", Object.assign({}, rest, getShareResultsButtonProps(), { type: 'button', onClick: onClick }),
+            react_1.default.createElement(ShareSVG_1.default, null),
+            react_1.default.createElement("span", null, shareText)));
+    }
+    return null;
+}
+exports.default = ShareButton;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ShareSVG() {
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.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_1.default.createElement("path", { d: 'M10.5026 4.00116L8.00201 1.50061L5.50146 4.00116', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+        react_1.default.createElement("path", { d: 'M8.00146 10.0337V1.50061', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}
+exports.default = ShareSVG;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function AlertCircleSVG() {
+    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.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_1.default.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_1.default.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' })));
+}
+exports.default = AlertCircleSVG;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CheckMarkCircleSVG() {
+    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.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_1.default.createElement("path", { d: 'M16.5005 8.24963L10.2005 15.7496L7.50049 12.7496', stroke: '#101010', strokeWidth: '1.33', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}
+exports.default = CheckMarkCircleSVG;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CloseSVG() {
+    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.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_1.default.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' })));
+}
+exports.default = CloseSVG;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const CheckMarkCircleSVG_1 = tslib_1.__importDefault(require("./CheckMarkCircleSVG"));
+const AlertCircleSVG_1 = tslib_1.__importDefault(require("./AlertCircleSVG"));
+function EmailField({ onSubmit }) {
+    const [formError, setFormError] = (0, react_1.useState)(null);
+    const [isSubmitted, setIsSubmitted] = (0, react_1.useState)(false);
+    const [email, setEmail] = (0, react_1.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 = (e) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        e.preventDefault();
+        const isValid = validate();
+        if (!isValid)
+            return;
+        try {
+            yield onSubmit(email);
+            setIsSubmitted(true);
+        }
+        catch (_e) {
+            setFormError({
+                type: 'callback',
+                message: 'Sorry, there was an error sending. Please try again.',
+            });
+        }
+    });
+    return (react_1.default.createElement("div", { className: 'cio-share-results-feature-group' },
+        react_1.default.createElement("form", { onSubmit: handleSubmit },
+            react_1.default.createElement("div", { className: 'cio-share-results-description' }, "Share by email"),
+            react_1.default.createElement("div", { className: 'cio-share-results-button-group' },
+                react_1.default.createElement("div", { className: 'cio-share-results-email-input-group' },
+                    react_1.default.createElement("input", { className: `cio-share-results-email-input ${formError ? 'cio-share-results-email-input--error' : ''}`, onChange: (e) => setEmail(e.target.value) }),
+                    (formError === null || formError === void 0 ? void 0 : formError.type) === 'validate' && (react_1.default.createElement("div", { className: 'cio-share-results-email-input-error-message' }, formError.message))),
+                react_1.default.createElement("button", { className: 'cio-share-results-share-button', type: 'submit' }, "Send"))),
+        isSubmitted && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
+            react_1.default.createElement(CheckMarkCircleSVG_1.default, null),
+            react_1.default.createElement("div", null, "Email sent"))),
+        (formError === null || formError === void 0 ? void 0 : formError.type) === 'callback' && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
+            react_1.default.createElement(AlertCircleSVG_1.default, null),
+            react_1.default.createElement("div", null, formError.message)))));
+}
+exports.default = EmailField;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const CheckMarkCircleSVG_1 = tslib_1.__importDefault(require("./CheckMarkCircleSVG"));
+const AlertCircleSVG_1 = tslib_1.__importDefault(require("./AlertCircleSVG"));
+function LinkField({ url }) {
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: 'cio-share-results-feature-group' },
+        react_1.default.createElement("div", { className: 'cio-share-results-description' }, "Share by link"),
+        react_1.default.createElement("div", { className: 'cio-share-results-button-group' },
+            react_1.default.createElement("input", { className: 'cio-share-results-link-input', value: url, disabled: true }),
+            react_1.default.createElement("button", { className: 'cio-share-results-share-button', type: 'button', onClick: () => {
+                    try {
+                        navigator.clipboard.writeText(url);
+                        setIsCopied(true);
+                    }
+                    catch (_e) {
+                        setIsError(true);
+                    }
+                } }, "Copy link")),
+        isCopied && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
+            react_1.default.createElement(CheckMarkCircleSVG_1.default, null),
+            react_1.default.createElement("div", null, "Link copied to clipboard"))),
+        isError && (react_1.default.createElement("div", { className: 'cio-share-results-notification' },
+            react_1.default.createElement(AlertCircleSVG_1.default, null),
+            react_1.default.createElement("div", null, "Sorry, there was an error copying. Please try again.")))));
+}
+exports.default = LinkField;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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, }) {
+    const url = (0, useShareResultsLink_1.default)(quizState);
+    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' },
+            react_1.default.createElement("div", { className: 'cio-share-results-content', onClick: (e) => e.stopPropagation(), role: 'presentation' },
+                react_1.default.createElement("div", { className: 'cio-share-results-header' },
+                    react_1.default.createElement("div", { className: 'cio-share-results-title' }, "Share results"),
+                    react_1.default.createElement("button", { onClick: onClose, type: 'button', className: 'cio-modal-close-button', "aria-label": 'Close button' },
+                        react_1.default.createElement(CloseSVG_1.default, null))),
+                react_1.default.createElement("div", null, onEmailResults
+                    ? 'Share or save your quiz results through email or using the link below.'
+                    : 'Share or save your quiz results with this link.'),
+                onEmailResults && react_1.default.createElement(EmailField_1.default, { onSubmit: (email) => onEmailResults({ email, url }) }),
+                react_1.default.createElement(LinkField_1.default, { url: url })))));
+}
+exports.default = ShareResultsModal;

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.favoritesDescription = exports.callbacksDescription = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.hookDescription = exports.componentDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.changePrimaryColorDescription = exports.smallContainerDescription = exports.basicDescription = exports.hookDescription = exports.quizSessionStateKey = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -9,35 +9,7 @@ exports.quizSessionStateKey = 'constructorIOQuizState';
 /// //////////////////////////////
 // Storybook Folder Descriptions
 /// //////////////////////////////
-exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
-- This component handles state management, data fetching, and rendering logic.
-- To use this component, \`quizId\`, \`resultsPageOptions\`, and one of \`apiKey\` or \`cioJsClient\` are required.
-- \`resultsPageOptions\` lets you configure the results page
-  - \`onAddToCartClick\` is a callback function that will be called when the "Add to cart" button is clicked
-  - \`onAddToFavoritesClick\` is an optional callback function that will be called when the "Add To Favorites" heart icon is clicked
-  - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
-  - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
-  - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
-  - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price 
-  - \`resultCardRatingCountKey\` is an optional parameter that specifies the metadata field name for the ratings count 
-  - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
-  - \`renderResultCardPriceDetails\` is an optional render function to render custom prices section in result card 
-  - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
-- \`callbacks\` lets you pass callback functions that will be called on certain actions
-  - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
-  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
-- \`sessionStateOptions\` lets you configure the session modal behavior
-  - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
-  - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
-  - \`sessionStateKey\` is a custom string that will be used as a session storage key
-- \`questionsPageOptions\` lets you configure the question page
-  - \`skipQuestionButtonText\` is an optional string that will be used as the skip button text
-- Use different props to configure the behavior of this component.
-- The following stories show how different props affect the component's behavior
-
-> Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
-`;
-exports.hookDescription = `- import \`useCioQuiz\` and call this custom hook in a functional component.
+exports.hookDescription = `- Import \`useCioQuiz\` and call this custom hook in a functional component.
 - This hook leaves rendering logic up to you, while handling:
   - state management
   - data fetching
@@ -46,7 +18,7 @@ exports.hookDescription = `- import \`useCioQuiz\` and call this custom hook in
   - focus and submit event handling
 - Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure
 - To use this hook, an \`apiKey\` and \`quizId\` are required, and \`resultsPageOptions\` must be passed to the \`useCioQuiz\` hook to configure behavior. All other values are optional.
-- use the <a href="https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters" target="__blank">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions
+- Use the <a href="https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters" target="__blank">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions
 
 Calling the \`useCioQuiz\` hook returns an object with the following keys:
 
@@ -78,9 +50,6 @@ const {
 // Storybook Stories
 /// //////////////////////////////
 exports.basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request questions and quiz results from Constructor's servers`;
-exports.cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from Constructor's servers
-
-> Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
 exports.smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 exports.changePrimaryColorDescription = `
 If you would like to use a different primary color, pass a \`primaryColor\` string in RGB format ('R, G, B').
@@ -93,14 +62,6 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
-exports.callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
-exports.favoritesDescription = `
-Add \`const [favorites, setFavorites] = useState([]);\` or equivalent to manage the favorite items' state.
-
-Pass favorites as an array to \`favoriteItems\` in \`resultsPageOptions\` as a prop to CioQuiz.
-
-Pass a callback function to \`onAddToFavoritesClick\` in \`resultsPageOptions\` as a prop to CioQuiz to handle favorites state changes to update \`favorites\` array.    
-`;
 var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

package/lib/cjs/hooks/useConsoleErrors.js

@@ -2,20 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useConsoleErrors = (quizOptions) => {
-    const { quizId, resultsPageOptions } = quizOptions;
+    const { quizId, resultsPageOptions, callbacks } = quizOptions;
     (0, react_1.useEffect)(() => {
         if (!quizId) {
             // eslint-disable-next-line no-console
             console.error('quizId is a required field of type string');
         }
-        if (!resultsPageOptions || Object.keys(resultsPageOptions).length === 0) {
+        if (!(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAddToCartClick)) {
             // eslint-disable-next-line no-console
-            console.error('resultsPageOptions is a required field of type object');
+            console.error('callbacks.onAddToCartClick is a required field of type function');
         }
-        if (resultsPageOptions && !(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onAddToCartClick)) {
-            // eslint-disable-next-line no-console
-            console.error('resultsPageOptions.onAddToCartClick is a required field of type function');
-        }
-    }, [quizId, resultsPageOptions, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.onAddToCartClick]);
+    }, [quizId, resultsPageOptions, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAddToCartClick]);
 };
 exports.default = useConsoleErrors;

package/lib/cjs/hooks/usePropsGetters/index.js

@@ -23,6 +23,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         type: 'button',
         onClick: () => resetQuiz(),
     }), [resetQuiz]);
+    const getShareResultsButtonProps = (0, react_1.useCallback)(() => ({ className: 'cio-question-share-results-button' }), []);
     const getHydrateQuizButtonProps = (0, react_1.useCallback)(() => ({
         className: '',
         type: 'button',
@@ -80,6 +81,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         getSelectInputProps,
         getCoverQuestionProps,
         getResetQuizButtonProps,
+        getShareResultsButtonProps,
         getHydrateQuizButtonProps,
         getAddToCartButtonProps,
         getAddToFavoritesButtonProps,

package/lib/cjs/hooks/useQueryParams.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useQueryParams = () => {
+    const getParsedQueryParam = (queryName) => {
+        const queryParams = new URLSearchParams(window.location.search);
+        const queryParam = queryParams.get(queryName);
+        if (!queryParam)
+            return [];
+        return queryParam === null || queryParam === void 0 ? void 0 : queryParam.split(',');
+    };
+    const queryItems = getParsedQueryParam('items');
+    const queryAttributes = getParsedQueryParam('attributes');
+    const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
+    const removeSharedResultsQueryParams = (0, react_1.useCallback)(() => {
+        const updatedUrl = new URL(window.location.href);
+        updatedUrl.searchParams.delete('items');
+        updatedUrl.searchParams.delete('attributes');
+        if (!updatedUrl.searchParams.toString().length) {
+            updatedUrl.search = '';
+        }
+        window.history.replaceState({}, '', updatedUrl.toString());
+    }, []);
+    return {
+        queryItems,
+        queryAttributes,
+        isSharedResultsQuery,
+        removeSharedResultsQueryParams,
+    };
+};
+exports.default = useQueryParams;

package/lib/cjs/hooks/useQuiz.js

@@ -9,8 +9,8 @@ const usePrimaryColorStyles_1 = tslib_1.__importDefault(require("./usePrimaryCol
 const useQuizEvents_1 = tslib_1.__importDefault(require("./useQuizEvents"));
 const useQuizState_1 = tslib_1.__importDefault(require("./useQuizState"));
 const useQuiz = (quizOptions) => {
-    const { apiKey, cioJsClient, primaryColor, resultsPageOptions: { favoriteItems }, } = quizOptions;
-    // Log console errors for required parameters quizId and resultsPageOptions
+    const { apiKey, cioJsClient, primaryColor, resultsPageOptions } = quizOptions;
+    // Log console errors for required parameters quizId
     (0, useConsoleErrors_1.default)(quizOptions);
     // Quiz Cio Client
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
@@ -21,7 +21,7 @@ const useQuiz = (quizOptions) => {
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
     const { skipToResults } = quizSessionStorageState;
-    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState, favoriteItems);
+    const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState, resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.favoriteItems);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
     (0, react_1.useEffect)(() => {
         if (skipToResults)

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

@@ -14,13 +14,13 @@ const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToF
 const useQuizSkipClick_1 = tslib_1.__importDefault(require("./useQuizSkipClick"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
-    const { resultsPageOptions, callbacks } = quizOptions;
-    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
+    const { callbacks } = quizOptions;
+    const { onAddToCartClick, onAddToFavoritesClick, onQuizNextQuestion, onQuizResultClick, onQuizResultsLoaded, onQuizSkipQuestion, } = callbacks || {};
     // Quiz answer change
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
-    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizNextQuestion);
-    const skipQuestion = (0, useQuizSkipClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizSkipQuestion);
+    const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, onQuizNextQuestion);
+    const skipQuestion = (0, useQuizSkipClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -31,7 +31,12 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     (0, useQuizResultsLoaded_1.default)(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = (0, useQuizResetClick_1.default)((0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = (0, useQuizResetClick_1.default)({
+        resetQuizSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),
+        dispatchLocalState,
+        dispatchApiState,
+        quizResults: quizApiState.quizResults,
+    });
     // Quiz rehydrate
     const hydrateQuizLocalState = (0, useHydrateQuizLocalState_1.default)(quizSessionStorageState.key, dispatchLocalState);
     return {

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const react_1 = require("react");
 const actions_1 = require("../../components/CioQuiz/actions");
-const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults) => {
+const useQueryParams_1 = tslib_1.__importDefault(require("../useQueryParams"));
+const useQuizResetClick = (props) => {
+    const { resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults } = props;
+    const { removeSharedResultsQueryParams, isSharedResultsQuery } = (0, useQueryParams_1.default)();
     const quizResetClickHandler = (0, react_1.useCallback)(() => {
         if (quizResults) {
             dispatchLocalState({
@@ -12,8 +16,17 @@ const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dis
                 type: actions_1.QuizAPIActionTypes.RESET_QUIZ,
             });
             resetQuizSessionStorageState();
+            if (isSharedResultsQuery)
+                removeSharedResultsQueryParams();
         }
-    }, [dispatchLocalState, dispatchApiState, resetQuizSessionStorageState, quizResults]);
+    }, [
+        dispatchLocalState,
+        dispatchApiState,
+        resetQuizSessionStorageState,
+        quizResults,
+        removeSharedResultsQueryParams,
+        isSharedResultsQuery,
+    ]);
     return quizResetClickHandler;
 };
 exports.default = useQuizResetClick;