@constructor-io/constructorio-ui-quizzes 1.17.14 → 1.17.16

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

@@ -13,7 +13,7 @@ function ResultContainer(props) {
     var _a, _b, _c;
     const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = (0, react_1.useContext)(context_1.default);
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = resultCardOptions || {};
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, renderResultCard, } = 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 resultsConfig = state === null || state === void 0 ? void 0 : state.quiz.resultsConfig;
     const zeroResults = !numberOfResults;
@@ -21,7 +21,7 @@ function ResultContainer(props) {
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
             !zeroResults && react_1.default.createElement(ResultsHeaderContainer_1.default, { resultsConfig: resultsConfig }),
             !zeroResults && (react_1.default.createElement(ResultFiltersAndShare_1.default, { numberOfResults: numberOfResults, onShare: onShare, showShareButton: !!(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.showShareResultsButton) })),
-            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, renderResultCard: renderResultCard })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null),
             !zeroResults && (react_1.default.createElement("div", { className: 'cio-redo-button-container' },
                 react_1.default.createElement(RedoButton_1.default, null)))));

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

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

package/lib/cjs/components/ShareResultsModal/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

@@ -213,6 +213,20 @@ exports.argTypes = {
             },
         },
     },
+    'resultCardOptions.renderResultCard': {
+        description: 'Callback function to render custom result card',
+        control: false,
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result, getters) => JSX.Element',
+                detail: '(result: QuizResultDataPartial, getters: {getAddToCartButtonProps, getAddToFavoritesButtonProps}) => JSX.Element',
+            },
+        },
+    },
     'resultsPageOptions.numResultsToDisplay': {
         description: 'Number of results to display on the results page',
         control: {

package/lib/cjs/version.js

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

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

@@ -9,7 +9,7 @@ import RedoButton from '../RedoButton/RedoButton';
 export default function ResultContainer(props) {
     const { resultCardOptions, onShare, resultsPageOptions } = props;
     const { state } = useContext(QuizContext);
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = resultCardOptions || {};
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, renderResultCard, } = resultCardOptions || {};
     const numberOfResults = state?.quiz.results?.response?.results?.length;
     const resultsConfig = state?.quiz.resultsConfig;
     const zeroResults = !numberOfResults;
@@ -17,7 +17,7 @@ export default function ResultContainer(props) {
         return (React.createElement("div", { className: 'cio-results-container' },
             !zeroResults && React.createElement(ResultsHeaderContainer, { resultsConfig: resultsConfig }),
             !zeroResults && (React.createElement(ResultFiltersAndShare, { numberOfResults: numberOfResults, onShare: onShare, showShareButton: !!resultsPageOptions?.showShareResultsButton })),
-            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, renderResultCard: renderResultCard })),
             zeroResults && React.createElement(ZeroResults, null),
             !zeroResults && (React.createElement("div", { className: 'cio-redo-button-container' },
                 React.createElement(RedoButton, null)))));

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

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

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

@@ -210,6 +210,20 @@ export const argTypes = {
             },
         },
     },
+    'resultCardOptions.renderResultCard': {
+        description: 'Callback function to render custom result card',
+        control: false,
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result, getters) => JSX.Element',
+                detail: '(result: QuizResultDataPartial, getters: {getAddToCartButtonProps, getAddToFavoritesButtonProps}) => JSX.Element',
+            },
+        },
+    },
     'resultsPageOptions.numResultsToDisplay': {
         description: 'Number of results to display on the results page',
         control: {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.14';
+export default '1.17.16';

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

@@ -209,6 +209,20 @@ export declare const argTypes: {
             };
         };
     };
+    'resultCardOptions.renderResultCard': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
     'resultsPageOptions.numResultsToDisplay': {
         description: string;
         control: {

package/lib/types/types.d.ts

@@ -16,6 +16,10 @@ export interface ResultCardOptions {
     resultCardRatingCountKey?: string;
     resultCardRatingScoreKey?: string;
     renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
+    renderResultCard?: (result: QuizResultDataPartial, getters: {
+        getAddToCartButtonProps?: GetAddToCartButtonProps;
+        getAddToFavoritesButtonProps?: GetAddToFavoritesButtonProps;
+    }) => JSX.Element;
 }
 export declare namespace QuizResultsEventsProps {
     type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.14";
+declare const _default: "1.17.16";
 export default _default;

package/package.json

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