@constructor-io/constructorio-ui-quizzes 1.19.3 → 1.19.5

package/lib/cjs/components/ResultCard/ResultCard.js

@@ -6,42 +6,62 @@ const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/Re
 const ResultFavoritesButton_1 = tslib_1.__importDefault(require("../ResultFavoritesButton/ResultFavoritesButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const utils_1 = require("../../utils");
+const ResultCardSwatches_1 = tslib_1.__importDefault(require("../ResultCardSwatches/ResultCardSwatches"));
+const useResultCard_1 = tslib_1.__importDefault(require("../../hooks/useResultCard"));
 function ResultCard(props) {
-    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, getResultCardImageUrl, } = props;
-    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps, } = (0, react_1.useContext)(context_1.default);
-    const salePrice = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(result === null || result === void 0 ? void 0 : result.data, salePriceKey));
-    const regularPrice = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(result === null || result === void 0 ? void 0 : result.data, regularPriceKey));
-    const ratingCount = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(result === null || result === void 0 ? void 0 : result.data, ratingCountKey));
-    const ratingScore = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(result === null || result === void 0 ? void 0 : result.data, ratingScoreKey));
-    const resultCardContent = () => {
-        var _a;
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: 'cio-result-card-image' },
-                react_1.default.createElement("img", { src: getResultCardImageUrl ? getResultCardImageUrl(result) : (_a = result.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: 'product' })),
-            react_1.default.createElement("div", { className: 'cio-result-card-text' },
-                react_1.default.createElement("p", { className: 'cio-result-card-title' }, result.value),
-                react_1.default.createElement("div", { className: 'cio-result-card-details' },
-                    react_1.default.createElement("div", { className: 'cio-result-card-rating' },
-                        !!ratingScore && (react_1.default.createElement("span", { className: 'cio-result-card-rating-score' },
-                            Array(Number(ratingScore)).fill('★'),
-                            Array(5 - Number(ratingScore)).fill('☆'))),
-                        !!ratingCount && react_1.default.createElement("span", { className: 'cio-result-card-rating-count' },
-                            "(",
-                            ratingCount,
-                            ")")),
-                    renderResultCardPriceDetails ? (renderResultCardPriceDetails(result)) : (react_1.default.createElement("div", { className: 'cio-result-card-prices' },
-                        !!salePrice && react_1.default.createElement("span", { className: 'cio-result-card-sale-price' },
-                            "$",
-                            salePrice),
-                        !!regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
-                            "$",
-                            regularPrice))))))));
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, swatchImageKey, renderResultCardPriceDetails, getResultCardImageUrl, renderResultCard, } = props;
+    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps, } = (0, react_1.useContext)(context_1.default);
+    const { faceOutResult, getQuizResultSwatchProps } = (0, useResultCard_1.default)(result, swatchImageKey);
+    const { data, value } = faceOutResult || {};
+    const salePrice = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(data, salePriceKey));
+    const regularPrice = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(data, regularPriceKey));
+    const ratingCount = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(data, ratingCountKey));
+    const ratingScore = (0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(data, ratingScoreKey));
+    const resultCardContent = () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: 'cio-result-card-image' },
+            react_1.default.createElement("img", { src: getResultCardImageUrl ? getResultCardImageUrl(faceOutResult) : data === null || data === void 0 ? void 0 : data.image_url, alt: 'product' })),
+        react_1.default.createElement(ResultCardSwatches_1.default, { faceOutResult: faceOutResult, getQuizResultSwatchProps: getQuizResultSwatchProps }),
+        react_1.default.createElement("div", { className: 'cio-result-card-text' },
+            react_1.default.createElement("p", { className: 'cio-result-card-title' }, value),
+            react_1.default.createElement("div", { className: 'cio-result-card-details' },
+                react_1.default.createElement("div", { className: 'cio-result-card-rating' },
+                    !!ratingScore && (react_1.default.createElement("span", { className: 'cio-result-card-rating-score' },
+                        Array(Number(ratingScore)).fill('★'),
+                        Array(5 - Number(ratingScore)).fill('☆'))),
+                    !!ratingCount && react_1.default.createElement("span", { className: 'cio-result-card-rating-count' },
+                        "(",
+                        ratingCount,
+                        ")")),
+                renderResultCardPriceDetails ? (renderResultCardPriceDetails(faceOutResult)) : (react_1.default.createElement("div", { className: 'cio-result-card-prices' },
+                    !!salePrice && react_1.default.createElement("span", { className: 'cio-result-card-sale-price' },
+                        "$",
+                        salePrice),
+                    !!regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
+                        "$",
+                        regularPrice))))))));
+    const resultCardContentWithoutLink = () => getQuizResultButtonProps && (react_1.default.createElement("div", Object.assign({}, getQuizResultButtonProps({
+        result: faceOutResult,
+        position: resultPosition,
+        type: 'button',
+    })), resultCardContent()));
+    const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank' }, getQuizResultLinkProps({
+        result: faceOutResult,
+        position: resultPosition,
+        type: 'link',
+    })), resultCardContent()));
+    const getters = {
+        getQuizResultButtonProps,
+        getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
+        getQuizResultLinkProps,
+        getQuizResultSwatchProps, // The only getter function that's not from useProgGetters
     };
-    const resultCardContentWithoutLink = () => getQuizResultButtonProps && (react_1.default.createElement("div", Object.assign({}, getQuizResultButtonProps({ result, position: resultPosition, type: 'button' })), resultCardContent()));
-    const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));
+    if (renderResultCard) {
+        return renderResultCard(faceOutResult, getters, resultPosition);
+    }
     return (react_1.default.createElement("div", { className: 'cio-result-card' },
-        customAddToFavoritesCallback && (react_1.default.createElement(ResultFavoritesButton_1.default, { item: result, price: salePrice || regularPrice })),
+        customAddToFavoritesCallback && (react_1.default.createElement(ResultFavoritesButton_1.default, { item: faceOutResult, price: salePrice || regularPrice })),
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
-        react_1.default.createElement(ResultCtaButton_1.default, { item: result, price: salePrice || regularPrice })));
+        react_1.default.createElement(ResultCtaButton_1.default, { item: faceOutResult, price: salePrice || regularPrice })));
 }
 exports.default = ResultCard;

package/lib/cjs/components/ResultCardSwatches/ResultCardSwatches.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ResultCardSwatches(props) {
+    var _a;
+    const { faceOutResult, getQuizResultSwatchProps } = props;
+    return (react_1.default.createElement("div", { className: 'result-card-swatches-container' }, (_a = faceOutResult === null || faceOutResult === void 0 ? void 0 : faceOutResult.variations) === null || _a === void 0 ? void 0 : _a.map((variation) => {
+        var _a;
+        const isSelected = ((_a = faceOutResult === null || faceOutResult === void 0 ? void 0 : faceOutResult.data) === null || _a === void 0 ? void 0 : _a.variation_id) === variation.data.variation_id;
+        return (getQuizResultSwatchProps && (react_1.default.createElement("button", Object.assign({ key: variation.data.variation_id, type: 'button' }, getQuizResultSwatchProps(variation)), isSelected && react_1.default.createElement("div", { className: 'cio-swatch-selected' }))));
+    })));
+}
+exports.default = ResultCardSwatches;

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, renderResultCard, getResultCardImageUrl, } = resultCardOptions || {};
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, swatchImageKey, renderResultCardPriceDetails, renderResultCard, getResultCardImageUrl, } = 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, renderResultCard: renderResultCard, getResultCardImageUrl: getResultCardImageUrl })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, swatchImageKey: swatchImageKey, renderResultCardPriceDetails: renderResultCardPriceDetails, renderResultCard: renderResultCard, getResultCardImageUrl: getResultCardImageUrl })),
             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,12 +6,11 @@ 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, renderResultCard, getResultCardImageUrl, } = props;
-    const { state, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps } = (0, react_1.useContext)(context_1.default);
-    const getters = { getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps };
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, swatchImageKey, renderResultCardPriceDetails, renderResultCard, getResultCardImageUrl, } = props;
+    const { state } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-results' }, (_d = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.results) === null || _d === void 0 ? void 0 : _d.map((result, index) => {
         var _a;
-        return renderResultCard ? (renderResultCard(result, getters, index)) : (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, ratingCountKey: resultCardRatingCountKey, ratingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails, getResultCardImageUrl: getResultCardImageUrl, resultPosition: index + 1 }));
+        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, swatchImageKey: swatchImageKey, renderResultCardPriceDetails: renderResultCardPriceDetails, getResultCardImageUrl: getResultCardImageUrl, resultPosition: index + 1, renderResultCard: renderResultCard }));
     })));
 }
 exports.default = Results;

package/lib/cjs/hooks/useResultCard.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useResultCard = (result, swatchImageKey) => {
+    var _a;
+    if (!result) {
+        throw new Error('The "result" parameter is required and cannot be undefined.');
+    }
+    const [faceOutResult, setFaceOutResult] = (0, react_1.useState)(result);
+    const onVariationClick = (0, react_1.useCallback)((variation) => {
+        setFaceOutResult(Object.assign(Object.assign({}, result), variation));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // The only prop getter that is not returned from useProgGetters
+    // It's state and needs to be local to the component
+    const getQuizResultSwatchProps = (0, react_1.useCallback)((variation) => {
+        var _a, _b, _c, _d;
+        const isSelected = ((_a = variation === null || variation === void 0 ? void 0 : variation.data) === null || _a === void 0 ? void 0 : _a.variation_id) === ((_b = faceOutResult === null || faceOutResult === void 0 ? void 0 : faceOutResult.data) === null || _b === void 0 ? void 0 : _b.variation_id);
+        const style = {
+            background: `url(${(0, utils_1.validateNumberOrString)((0, utils_1.getNestedValueUsingDotNotation)(variation, swatchImageKey)) ||
+                ((_c = variation === null || variation === void 0 ? void 0 : variation.data) === null || _c === void 0 ? void 0 : _c.image_url)})`,
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+        };
+        const onClick = (e) => {
+            e.stopPropagation();
+            onVariationClick(variation);
+        };
+        return {
+            key: (_d = variation === null || variation === void 0 ? void 0 : variation.data) === null || _d === void 0 ? void 0 : _d.variation_id,
+            className: `cio-result-card-swatch ${isSelected ? 'selected' : ''}`,
+            type: 'button',
+            onClick,
+            style,
+        };
+    }, [(_a = faceOutResult === null || faceOutResult === void 0 ? void 0 : faceOutResult.data) === null || _a === void 0 ? void 0 : _a.variation_id, onVariationClick, swatchImageKey]);
+    return {
+        faceOutResult,
+        onVariationClick,
+        getQuizResultSwatchProps,
+    };
+};
+exports.default = useResultCard;

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResultHeroCard = exports.ResultFiltersAndShare = exports.ResultContainer = exports.ResultCard = exports.Results = exports.SelectQuestion = exports.CoverQuestion = exports.OpenTextQuestion = exports.QuizQuestions = exports.useShareResultsLink = exports.useCioQuiz = void 0;
+exports.ResultHeroCard = exports.ResultFiltersAndShare = exports.ResultContainer = exports.ResultCard = exports.Results = exports.SelectQuestion = exports.CoverQuestion = exports.OpenTextQuestion = exports.QuizQuestions = exports.useResultCard = exports.useShareResultsLink = exports.useCioQuiz = void 0;
 const tslib_1 = require("tslib");
 const CioQuiz_1 = tslib_1.__importDefault(require("./components/CioQuiz"));
 // Hook
@@ -8,6 +8,8 @@ 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; } });
+var useResultCard_1 = require("./hooks/useResultCard");
+Object.defineProperty(exports, "useResultCard", { enumerable: true, get: function () { return tslib_1.__importDefault(useResultCard_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

@@ -59,7 +59,7 @@ const trackQuizResultClick = (cioClient, quizResults, result, position) => {
             quizSessionId: quiz_session_id,
             itemId: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
             itemName: result === null || result === void 0 ? void 0 : result.value,
-            variationId: (_b = result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            variationId: (_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
             section,
             resultCount: total_num_results,
             resultPage: page,

package/lib/cjs/version.js

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

package/lib/mjs/components/ResultCard/ResultCard.js

@@ -3,18 +3,23 @@ import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
 import ResultFavoritesButton from '../ResultFavoritesButton/ResultFavoritesButton';
 import QuizContext from '../CioQuiz/context';
 import { getNestedValueUsingDotNotation, validateNumberOrString } from '../../utils';
+import ResultCardSwatches from '../ResultCardSwatches/ResultCardSwatches';
+import useResultCard from '../../hooks/useResultCard';
 export default function ResultCard(props) {
-    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, getResultCardImageUrl, } = props;
-    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps, } = useContext(QuizContext);
-    const salePrice = validateNumberOrString(getNestedValueUsingDotNotation(result?.data, salePriceKey));
-    const regularPrice = validateNumberOrString(getNestedValueUsingDotNotation(result?.data, regularPriceKey));
-    const ratingCount = validateNumberOrString(getNestedValueUsingDotNotation(result?.data, ratingCountKey));
-    const ratingScore = validateNumberOrString(getNestedValueUsingDotNotation(result?.data, ratingScoreKey));
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, swatchImageKey, renderResultCardPriceDetails, getResultCardImageUrl, renderResultCard, } = props;
+    const { customAddToFavoritesCallback, customClickItemCallback, getQuizResultButtonProps, getAddToCartButtonProps, getAddToFavoritesButtonProps, getQuizResultLinkProps, } = useContext(QuizContext);
+    const { faceOutResult, getQuizResultSwatchProps } = useResultCard(result, swatchImageKey);
+    const { data, value } = faceOutResult || {};
+    const salePrice = validateNumberOrString(getNestedValueUsingDotNotation(data, salePriceKey));
+    const regularPrice = validateNumberOrString(getNestedValueUsingDotNotation(data, regularPriceKey));
+    const ratingCount = validateNumberOrString(getNestedValueUsingDotNotation(data, ratingCountKey));
+    const ratingScore = validateNumberOrString(getNestedValueUsingDotNotation(data, ratingScoreKey));
     const resultCardContent = () => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'cio-result-card-image' },
-            React.createElement("img", { src: getResultCardImageUrl ? getResultCardImageUrl(result) : result.data?.image_url, alt: 'product' })),
+            React.createElement("img", { src: getResultCardImageUrl ? getResultCardImageUrl(faceOutResult) : data?.image_url, alt: 'product' })),
+        React.createElement(ResultCardSwatches, { faceOutResult: faceOutResult, getQuizResultSwatchProps: getQuizResultSwatchProps }),
         React.createElement("div", { className: 'cio-result-card-text' },
-            React.createElement("p", { className: 'cio-result-card-title' }, result.value),
+            React.createElement("p", { className: 'cio-result-card-title' }, value),
             React.createElement("div", { className: 'cio-result-card-details' },
                 React.createElement("div", { className: 'cio-result-card-rating' },
                     !!ratingScore && (React.createElement("span", { className: 'cio-result-card-rating-score' },
@@ -24,17 +29,35 @@ export default function ResultCard(props) {
                         "(",
                         ratingCount,
                         ")")),
-                renderResultCardPriceDetails ? (renderResultCardPriceDetails(result)) : (React.createElement("div", { className: 'cio-result-card-prices' },
+                renderResultCardPriceDetails ? (renderResultCardPriceDetails(faceOutResult)) : (React.createElement("div", { className: 'cio-result-card-prices' },
                     !!salePrice && React.createElement("span", { className: 'cio-result-card-sale-price' },
                         "$",
                         salePrice),
                     !!regularPrice && (React.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                         "$",
                         regularPrice))))))));
-    const resultCardContentWithoutLink = () => getQuizResultButtonProps && (React.createElement("div", { ...getQuizResultButtonProps({ result, position: resultPosition, type: 'button' }) }, resultCardContent()));
-    const resultCardContentWithLink = () => getQuizResultLinkProps && (React.createElement("a", { className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank', ...getQuizResultLinkProps({ result, position: resultPosition, type: 'link' }) }, resultCardContent()));
+    const resultCardContentWithoutLink = () => getQuizResultButtonProps && (React.createElement("div", { ...getQuizResultButtonProps({
+            result: faceOutResult,
+            position: resultPosition,
+            type: 'button',
+        }) }, resultCardContent()));
+    const resultCardContentWithLink = () => getQuizResultLinkProps && (React.createElement("a", { className: 'cio-result-card-anchor', rel: 'noreferrer', target: '_blank', ...getQuizResultLinkProps({
+            result: faceOutResult,
+            position: resultPosition,
+            type: 'link',
+        }) }, resultCardContent()));
+    const getters = {
+        getQuizResultButtonProps,
+        getAddToCartButtonProps,
+        getAddToFavoritesButtonProps,
+        getQuizResultLinkProps,
+        getQuizResultSwatchProps, // The only getter function that's not from useProgGetters
+    };
+    if (renderResultCard) {
+        return renderResultCard(faceOutResult, getters, resultPosition);
+    }
     return (React.createElement("div", { className: 'cio-result-card' },
-        customAddToFavoritesCallback && (React.createElement(ResultFavoritesButton, { item: result, price: salePrice || regularPrice })),
+        customAddToFavoritesCallback && (React.createElement(ResultFavoritesButton, { item: faceOutResult, price: salePrice || regularPrice })),
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
-        React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));
+        React.createElement(ResultCtaButton, { item: faceOutResult, price: salePrice || regularPrice })));
 }

package/lib/mjs/components/ResultCardSwatches/ResultCardSwatches.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function ResultCardSwatches(props) {
+    const { faceOutResult, getQuizResultSwatchProps } = props;
+    return (React.createElement("div", { className: 'result-card-swatches-container' }, faceOutResult?.variations?.map((variation) => {
+        const isSelected = faceOutResult?.data?.variation_id === variation.data.variation_id;
+        return (getQuizResultSwatchProps && (React.createElement("button", { key: variation.data.variation_id, type: 'button', ...getQuizResultSwatchProps(variation) }, isSelected && React.createElement("div", { className: 'cio-swatch-selected' }))));
+    })));
+}

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

package/lib/mjs/hooks/useResultCard.js

@@ -0,0 +1,44 @@
+import { useCallback, useState } from 'react';
+import { getNestedValueUsingDotNotation, validateNumberOrString } from '../utils';
+const useResultCard = (result, swatchImageKey) => {
+    if (!result) {
+        throw new Error('The "result" parameter is required and cannot be undefined.');
+    }
+    const [faceOutResult, setFaceOutResult] = useState(result);
+    const onVariationClick = useCallback((variation) => {
+        setFaceOutResult({
+            ...result,
+            ...variation,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // The only prop getter that is not returned from useProgGetters
+    // It's state and needs to be local to the component
+    const getQuizResultSwatchProps = useCallback((variation) => {
+        const isSelected = variation?.data?.variation_id === faceOutResult?.data?.variation_id;
+        const style = {
+            background: `url(${validateNumberOrString(getNestedValueUsingDotNotation(variation, swatchImageKey)) ||
+                variation?.data?.image_url})`,
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+        };
+        const onClick = (e) => {
+            e.stopPropagation();
+            onVariationClick(variation);
+        };
+        return {
+            key: variation?.data?.variation_id,
+            className: `cio-result-card-swatch ${isSelected ? 'selected' : ''}`,
+            type: 'button',
+            onClick,
+            style,
+        };
+    }, [faceOutResult?.data?.variation_id, onVariationClick, swatchImageKey]);
+    return {
+        faceOutResult,
+        onVariationClick,
+        getQuizResultSwatchProps,
+    };
+};
+export default useResultCard;

package/lib/mjs/index.js

@@ -2,6 +2,7 @@ import CioQuiz from './components/CioQuiz';
 // Hook
 export { default as useCioQuiz } from './hooks/useQuiz';
 export { default as useShareResultsLink } from './hooks/useShareResultsLink';
+export { default as useResultCard } from './hooks/useResultCard';
 // Questions Components
 export { default as QuizQuestions } from './components/QuizQuestions/index';
 export { default as OpenTextQuestion } from './components/OpenTextTypeQuestion/OpenTextTypeQuestion';

package/lib/mjs/services/index.js

@@ -44,7 +44,7 @@ export const trackQuizResultClick = (cioClient, quizResults, result, position) =
             quizSessionId: quiz_session_id,
             itemId: result.data?.id,
             itemName: result?.value,
-            variationId: result.data?.variation_id,
+            variationId: result?.data?.variation_id,
             section,
             resultCount: total_num_results,
             resultPage: page,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.19.3';
+export default '1.19.5';

package/lib/styles.css

@@ -1135,3 +1135,35 @@
   display: flex;
   justify-content: center;
 }
+
+.cio-quiz .cio-result-card-swatch {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  width: 25px;
+  height: 25px;
+  outline: 1px black solid;
+  border-radius: 50%;
+}
+
+.cio-quiz .cio-swatch-selected {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  outline-offset: 4px;
+  z-index: 1000;
+  filter: opacity(0.6);
+  outline: 3px solid black;
+}
+.cio-quiz .result-card-swatches-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  gap: 10px;
+  cursor: default;
+  margin-bottom: 14px;
+}
+

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

@@ -1,14 +1,16 @@
 /// <reference types="react" />
-import { QuizResultDataPartial } from '../../types';
-interface ResultCardOptions {
+import { QuizResultDataPartial, RenderResultCard } from '../../types';
+interface ResultCardProps {
     result: QuizResultDataPartial;
     salePriceKey?: string;
     regularPriceKey?: string;
     ratingCountKey?: string;
     ratingScoreKey?: string;
+    swatchImageKey?: string;
     resultPosition: number;
     renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
     getResultCardImageUrl?: (result: QuizResultDataPartial) => string;
+    renderResultCard?: RenderResultCard;
 }
-export default function ResultCard(props: ResultCardOptions): JSX.Element;
+export default function ResultCard(props: ResultCardProps): JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { GetQuizResultSwatchProps, QuizResultDataPartial } from '../../types';
+interface ResultCardSwatchesOptions {
+    faceOutResult: QuizResultDataPartial;
+    getQuizResultSwatchProps?: GetQuizResultSwatchProps;
+}
+export default function ResultCardSwatches(props: ResultCardSwatchesOptions): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { GetQuizResultSwatchProps, QuizResultDataPartial } from '../types';
+declare const useResultCard: (result: QuizResultDataPartial, swatchImageKey?: string) => {
+    faceOutResult: Partial<import("@constructor-io/constructorio-client-javascript").QuizResultData>;
+    onVariationClick: (variation: QuizResultDataPartial) => void;
+    getQuizResultSwatchProps: GetQuizResultSwatchProps;
+};
+export default useResultCard;

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 import CioQuiz from './components/CioQuiz';
 export { default as useCioQuiz } from './hooks/useQuiz';
 export { default as useShareResultsLink } from './hooks/useShareResultsLink';
+export { default as useResultCard } from './hooks/useResultCard';
 export { default as QuizQuestions } from './components/QuizQuestions/index';
 export { default as OpenTextQuestion } from './components/OpenTextTypeQuestion/OpenTextTypeQuestion';
 export { default as CoverQuestion } from './components/CoverTypeQuestion/CoverTypeQuestion';

package/lib/types/types.d.ts

@@ -12,17 +12,21 @@ export type QuizEmailResults = {
     url: string;
     results?: Partial<QuizResultData>[];
 };
+export type RenderResultCard = (result: QuizResultDataPartial, getters: {
+    getAddToCartButtonProps?: GetAddToCartButtonProps;
+    getAddToFavoritesButtonProps?: GetAddToFavoritesButtonProps;
+    getQuizResultLinkProps?: GetQuizResultLinkProps;
+    getQuizResultButtonProps?: GetQuizResultButtonProps;
+    getQuizResultSwatchProps?: GetQuizResultSwatchProps;
+}, resultPosition: number) => JSX.Element;
 export interface ResultCardOptions {
     resultCardSalePriceKey?: string;
     resultCardRegularPriceKey?: string;
     resultCardRatingCountKey?: string;
     resultCardRatingScoreKey?: string;
+    swatchImageKey?: string;
     renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
-    renderResultCard?: (result: QuizResultDataPartial, getters: {
-        getAddToCartButtonProps?: GetAddToCartButtonProps;
-        getAddToFavoritesButtonProps?: GetAddToFavoritesButtonProps;
-        getQuizResultLinkProps?: GetQuizResultLinkProps;
-    }, index: number) => JSX.Element;
+    renderResultCard?: RenderResultCard;
     getResultCardImageUrl?: (result: QuizResultDataPartial) => string;
 }
 export declare namespace QuizResultsEventsProps {
@@ -248,6 +252,7 @@ export type GetAddToCartButtonProps = (result: QuizResultDataPartial, price?: nu
 export type GetAddToFavoritesButtonProps = (result: QuizResultDataPartial, price?: number | string, clickHandler?: () => void) => AddToCartButtonProps;
 export type GetQuizImageProps = () => QuizImageProps;
 export type GetSelectQuestionImageProps = (option: QuestionOption) => QuizImageProps;
+export type GetQuizResultSwatchProps = (variation: QuizResultDataPartial) => React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface QuizResultOptions<T = 'button' | 'link'> {
     result: QuizResultDataPartial;
     position: number;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.19.3";
+declare const _default: "1.19.5";
 export default _default;

package/package.json

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