@constructor-io/constructorio-ui-quizzes 1.17.13 → 1.17.15

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

@@ -51,6 +51,18 @@ function CioQuiz(props) {
         customAddToFavoritesCallback: !!(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onAddToFavoritesClick),
         primaryColorStyles,
     };
+    const onModalClose = () => {
+        setShowShareModal(false);
+        if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onShareResultsModalClose) {
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.onShareResultsModalClose();
+        }
+    };
+    const onModalOpen = () => {
+        setShowShareModal(true);
+        if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onShareResultsModalOpen) {
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.onShareResultsModalOpen();
+        }
+    };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
         return (react_1.default.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             react_1.default.createElement(Spinner_1.default, null)));
@@ -66,8 +78,8 @@ 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: () => 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,
+            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 })),
+            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),
                 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/ShareResultsModal/EmailField.js

@@ -8,6 +8,7 @@ const Toaster_1 = tslib_1.__importDefault(require("./Toaster"));
 function EmailField({ onSubmit }) {
     const [formError, setFormError] = (0, react_1.useState)(null);
     const [isSubmitted, setIsSubmitted] = (0, react_1.useState)(false);
+    const [isInProgress, setIsInProgress] = (0, react_1.useState)(false);
     const [email, setEmail] = (0, react_1.useState)('');
     const [showNotification, setShowNotification] = react_1.default.useState(false);
     const validate = () => {
@@ -20,10 +21,16 @@ function EmailField({ onSubmit }) {
     };
     const handleSubmit = (e) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
+        setIsSubmitted(false);
+        if (isInProgress) {
+            return;
+        }
+        setShowNotification(false);
         const isValid = validate();
         if (!isValid)
             return;
         try {
+            setIsInProgress(true);
             yield onSubmit(email);
             setIsSubmitted(true);
         }
@@ -33,6 +40,7 @@ function EmailField({ onSubmit }) {
                 message: 'Sorry, there was an error sending. Please try again.',
             });
         }
+        setIsInProgress(false);
     });
     const onCloseToaster = () => {
         setShowNotification(false);
@@ -51,7 +59,7 @@ function EmailField({ onSubmit }) {
                 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), placeholder: 'Enter an email address to receive and share the results' }),
                     (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"))),
+                react_1.default.createElement("button", { className: `cio-share-results-share-button ${isInProgress ? 'disabled' : ''}`, type: 'submit' }, "Send"))),
         showNotification && (react_1.default.createElement(Toaster_1.default, { icon: isSubmitted ? CheckMarkCircleSVG_1.default : AlertCircleSVG_1.default, message: isSubmitted ? 'Email sent' : formError === null || formError === void 0 ? void 0 : formError.message, onCloseToaster: onCloseToaster }))));
 }
 exports.default = EmailField;

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

@@ -99,6 +99,34 @@ exports.argTypes = {
             },
         },
     },
+    'callbacks.onShareResultsModalOpen': {
+        description: 'Callback function to be called when the share results modal is opened.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '() => void',
+                detail: '() => void',
+            },
+        },
+    },
+    'callbacks.onShareResultsModalClose': {
+        description: 'Callback function to be called when the share results modal is closed.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '() => void',
+                detail: '() => void',
+            },
+        },
+    },
     cioJsClient: {
         description: 'Optional custom constructor instance. Either `apiKey` or `cioJsClient` are required',
     },

package/lib/cjs/version.js

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

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

@@ -47,6 +47,18 @@ export default function CioQuiz(props) {
         customAddToFavoritesCallback: !!callbacks?.onAddToFavoritesClick,
         primaryColorStyles,
     };
+    const onModalClose = () => {
+        setShowShareModal(false);
+        if (callbacks?.onShareResultsModalClose) {
+            callbacks?.onShareResultsModalClose();
+        }
+    };
+    const onModalOpen = () => {
+        setShowShareModal(true);
+        if (callbacks?.onShareResultsModalOpen) {
+            callbacks?.onShareResultsModalOpen();
+        }
+    };
     if (state.quiz.requestState === RequestStates.Loading) {
         return (React.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             React.createElement(Spinner, null)));
@@ -62,8 +74,8 @@ 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: () => 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,
+            state.quiz && showShareModal && (React.createElement(ShareResultsModal, { onClose: onModalClose, quizState: state.quiz, onEmailResults: callbacks?.onEmailResults })),
+            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),
                 React.createElement(ControlBar, { skipQuestionButtonText: questionsPageOptions?.skipQuestionButtonText, ctaButtonText: questionData?.cta_text || undefined })))))));

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

@@ -5,6 +5,7 @@ import Toaster from './Toaster';
 export default function EmailField({ onSubmit }) {
     const [formError, setFormError] = useState(null);
     const [isSubmitted, setIsSubmitted] = useState(false);
+    const [isInProgress, setIsInProgress] = useState(false);
     const [email, setEmail] = useState('');
     const [showNotification, setShowNotification] = React.useState(false);
     const validate = () => {
@@ -17,10 +18,16 @@ export default function EmailField({ onSubmit }) {
     };
     const handleSubmit = async (e) => {
         e.preventDefault();
+        setIsSubmitted(false);
+        if (isInProgress) {
+            return;
+        }
+        setShowNotification(false);
         const isValid = validate();
         if (!isValid)
             return;
         try {
+            setIsInProgress(true);
             await onSubmit(email);
             setIsSubmitted(true);
         }
@@ -30,6 +37,7 @@ export default function EmailField({ onSubmit }) {
                 message: 'Sorry, there was an error sending. Please try again.',
             });
         }
+        setIsInProgress(false);
     };
     const onCloseToaster = () => {
         setShowNotification(false);
@@ -48,6 +56,6 @@ export default function EmailField({ onSubmit }) {
                 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), placeholder: 'Enter an email address to receive and share the results' }),
                     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"))),
+                React.createElement("button", { className: `cio-share-results-share-button ${isInProgress ? 'disabled' : ''}`, type: 'submit' }, "Send"))),
         showNotification && (React.createElement(Toaster, { icon: isSubmitted ? CheckMarkCircleSVG : AlertCircleSVG, message: isSubmitted ? 'Email sent' : formError?.message, onCloseToaster: onCloseToaster }))));
 }

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

@@ -96,6 +96,34 @@ export const argTypes = {
             },
         },
     },
+    'callbacks.onShareResultsModalOpen': {
+        description: 'Callback function to be called when the share results modal is opened.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '() => void',
+                detail: '() => void',
+            },
+        },
+    },
+    'callbacks.onShareResultsModalClose': {
+        description: 'Callback function to be called when the share results modal is closed.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '() => void',
+                detail: '() => void',
+            },
+        },
+    },
     cioJsClient: {
         description: 'Optional custom constructor instance. Either `apiKey` or `cioJsClient` are required',
     },

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.13';
+export default '1.17.15';

package/lib/styles.css

@@ -1012,6 +1012,10 @@
 .cio-quiz .cio-share-results-share-button:focus {
   outline: 3px solid var(--primary-color-variant-100);
 }
+.cio-quiz .cio-share-results-share-button.disabled {
+  background: var(--gray-dust-200);
+  border: 2px solid var(--gray-dust-200);
+}
 
 .cio-quiz .cio-share-results-notification {
   width: 100%;

package/lib/types/stories/Quiz/argTypes.d.ts

@@ -95,6 +95,34 @@ export declare const argTypes: {
             };
         };
     };
+    'callbacks.onShareResultsModalOpen': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    'callbacks.onShareResultsModalClose': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
     cioJsClient: {
         description: string;
     };

package/lib/types/types.d.ts

@@ -25,6 +25,8 @@ export declare namespace QuizResultsEventsProps {
     type OnQuizNextQuestion = (question: QuestionWithAnswer) => void;
     type OnQuizSkipQuestion = (question: QuestionWithAnswer) => void;
     type OnEmailResults = (data: QuizEmailResults) => Promise<void>;
+    type OnShareResultsModalOpen = () => void;
+    type OnShareResultsModalClose = () => void;
 }
 export type QuizResultsRequestConfigs = Omit<QuizzesResultsParameters, keyof QuizzesParameters | 'page' | 'resultsPerPage'>;
 export interface ResultsPageOptions {
@@ -52,6 +54,8 @@ export interface Callbacks {
     onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick;
     onQuizSkipQuestion?: QuizResultsEventsProps.OnQuizSkipQuestion;
     onEmailResults?: QuizResultsEventsProps.OnEmailResults;
+    onShareResultsModalOpen?: QuizResultsEventsProps.OnShareResultsModalOpen;
+    onShareResultsModalClose?: QuizResultsEventsProps.OnShareResultsModalClose;
 }
 export interface IQuizProps {
     apiKey?: string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.13";
+declare const _default: "1.17.15";
 export default _default;

package/package.json

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