@constructor-io/constructorio-ui-quizzes 1.4.6 → 1.5.0

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

@@ -5,12 +5,14 @@ const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("./context"));
 const QuizQuestions_1 = tslib_1.__importDefault(require("../QuizQuestions"));
 const ResultContainer_1 = tslib_1.__importDefault(require("../ResultContainer/ResultContainer"));
+const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 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 utils_1 = require("../../utils");
 function CioQuiz(props) {
+    var _a;
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const { resultsPageOptions, sessionStateOptions } = props;
@@ -46,16 +48,23 @@ function CioQuiz(props) {
         primaryColorStyles,
     };
     if (state.quiz.requestState === constants_1.RequestStates.Loading) {
-        return (react_1.default.createElement("div", { className: 'cio-quiz' },
+        return (react_1.default.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             react_1.default.createElement(Spinner_1.default, null)));
     }
+    const questionData = (_a = state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+    const questionType = questionData === null || questionData === void 0 ? void 0 : questionData.type;
+    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' },
+            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 || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && react_1.default.createElement(QuizQuestions_1.default, null)))));
+            react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(QuizQuestions_1.default, null),
+                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }
     return null;
 }

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function CoverTypeQuestion() {
     var _a;
     const { state } = (0, react_1.useContext)(context_1.default);
@@ -23,8 +22,7 @@ function CoverTypeQuestion() {
             hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
-                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                react_1.default.createElement(QuestionDescription_1.default, { description: question.description }))));
     }
     return null;
 }

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 function OpenTextQuestion() {
     var _a;
     const { state, getOpenTextInputProps } = (0, react_1.useContext)(context_1.default);
@@ -24,8 +23,7 @@ function OpenTextQuestion() {
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())),
-                react_1.default.createElement(ControlBar_1.default, { ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
+                getOpenTextInputProps && react_1.default.createElement("input", Object.assign({}, getOpenTextInputProps())))));
     }
     return null;
 }

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

@@ -6,7 +6,7 @@ const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/Re
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
     var _a, _b, _c, _d;
-    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey } = props;
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, } = props;
     const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = (0, react_1.useContext)(context_1.default);
     const salePrice = salePriceKey && ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[salePriceKey]);
     const regularPrice = regularPriceKey && ((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b[regularPriceKey]);
@@ -28,13 +28,13 @@ function ResultCard(props) {
                             "(",
                             ratingCount,
                             ")")),
-                    react_1.default.createElement("div", { className: 'cio-result-card-prices' },
+                    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)))))));
+                            regularPrice))))))));
     };
     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()));

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

@@ -11,7 +11,7 @@ const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 function ResultContainer(props) {
     var _a, _b, _c;
     const { options } = props;
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, } = options;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
     const { state } = (0, react_1.useContext)(context_1.default);
     const zeroResults = !((_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 resultsTitle = zeroResults ? '' : 'Here are your results';
@@ -21,7 +21,7 @@ function ResultContainer(props) {
             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(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey })),
+            !zeroResults && (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' },

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

@@ -6,11 +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, } = props;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = 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 (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, 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, renderResultCardPriceDetails: renderResultCardPriceDetails, resultPosition: index + 1 }));
     })));
 }
 exports.default = Results;

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -6,7 +6,6 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 const utils_1 = require("../../utils");
-const ControlBar_1 = tslib_1.__importDefault(require("../ControlBar/ControlBar"));
 const actions_1 = require("../CioQuiz/actions");
 function SelectTypeQuestion() {
     var _a;
@@ -29,8 +28,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, (_a = question === null || question === void 0 ? void 0 : question.options) === null || _a === void 0 ? void 0 : _a.map((option) => getSelectInputProps && (react_1.default.createElement("div", Object.assign({}, getSelectInputProps(option)),
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
-                react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (question === null || question === void 0 ? void 0 : question.cta_text) || 'Continue' })));
+                react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value)))))));
     }
     return null;
 }

package/lib/cjs/constants.js

@@ -20,6 +20,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`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 
 - \`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

package/lib/cjs/stories/Quiz/tests/mocks.js

@@ -76,6 +76,7 @@ const getMockState = (question) => ({
                             ratingCount: '12',
                             ratingScore: '4',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                            discount: '59.9',
                         },
                     },
                     {

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

@@ -2,11 +2,12 @@ import React, { useEffect, useState } from 'react';
 import QuizContext from './context';
 import QuizQuestions from '../QuizQuestions';
 import ResultContainer from '../ResultContainer/ResultContainer';
+import ControlBar from '../ControlBar/ControlBar';
 import { RequestStates } from '../../constants';
 import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
-import { convertPrimaryColorsToString } from '../../utils';
+import { convertPrimaryColorsToString, renderImages } from '../../utils';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
@@ -43,16 +44,23 @@ export default function CioQuiz(props) {
         primaryColorStyles,
     };
     if (state.quiz.requestState === RequestStates.Loading) {
-        return (React.createElement("div", { className: 'cio-quiz' },
+        return (React.createElement("div", { className: 'cio-quiz cio-quiz-loading' },
             React.createElement(Spinner, null)));
     }
+    const questionData = state.quiz.currentQuestion?.next_question;
+    const questionType = questionData?.type;
+    const questionImages = questionData?.images;
+    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
     if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz' },
+            displayBackgroundImage && renderImages(questionImages, 'cio-question-background-image'),
             React.createElement("style", null,
                 ".cio-quiz ",
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
-            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && React.createElement(QuizQuestions, null)))));
+            React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+                React.createElement(QuizQuestions, null),
+                React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
     }
     return null;
 }

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuizContext from '../CioQuiz/context';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 export default function CoverTypeQuestion() {
     const { state } = useContext(QuizContext);
     let question;
@@ -19,8 +18,7 @@ export default function CoverTypeQuestion() {
             hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
-                React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
+                React.createElement(QuestionDescription, { description: question.description }))));
     }
     return null;
 }

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import QuizContext from '../CioQuiz/context';
-import ControlBar from '../ControlBar/ControlBar';
 function OpenTextQuestion() {
     const { state, getOpenTextInputProps } = useContext(QuizContext);
     let question;
@@ -20,8 +19,7 @@ function OpenTextQuestion() {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }),
-                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
+                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }))));
     }
     return null;
 }

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCard(props) {
-    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey } = props;
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey, renderResultCardPriceDetails, } = props;
     const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
@@ -22,13 +22,13 @@ export default function ResultCard(props) {
                         "(",
                         ratingCount,
                         ")")),
-                React.createElement("div", { className: 'cio-result-card-prices' },
+                renderResultCardPriceDetails ? (renderResultCardPriceDetails(result)) : (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)))))));
+                        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()));
     return (React.createElement("div", { className: 'cio-result-card' },

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

@@ -7,7 +7,7 @@ import Results from '../Results/Results';
 import Spinner from '../Spinner/Spinner';
 export default function ResultContainer(props) {
     const { options } = props;
-    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, } = options;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
     const { state } = useContext(QuizContext);
     const zeroResults = !state?.quiz.results?.response?.results?.length;
     const resultsTitle = zeroResults ? '' : 'Here are your results';
@@ -17,7 +17,7 @@ export default function ResultContainer(props) {
             React.createElement("div", { className: 'cio-results-filter-and-redo-container' },
                 React.createElement(ResultFilters, { hasNoResults: zeroResults }),
                 React.createElement(RedoButton, null)),
-            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey })),
+            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
             zeroResults && React.createElement(ZeroResults, null)));
     }
     return (React.createElement("div", { className: 'cio-results-container' },

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

@@ -2,8 +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, } = 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, resultPosition: index + 1 })))));
+    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 })))));
 }
 export default Results;

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -3,7 +3,6 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import QuizContext from '../CioQuiz/context';
 import { renderImages } from '../../utils';
-import ControlBar from '../ControlBar/ControlBar';
 import { QuestionTypes } from '../CioQuiz/actions';
 function SelectTypeQuestion() {
     const { state, getSelectInputProps } = useContext(QuizContext);
@@ -25,8 +24,7 @@ function SelectTypeQuestion() {
                     ? 'cio-question-options-container-text-only'
                     : 'cio-question-options-container'}` }, question?.options?.map((option) => getSelectInputProps && (React.createElement("div", { ...getSelectInputProps(option) },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
-                React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { ctaButtonText: question?.cta_text || 'Continue' })));
+                React.createElement("div", { className: 'cio-question-option-value' }, option?.value)))))));
     }
     return null;
 }

package/lib/mjs/constants.js

@@ -17,6 +17,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`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 
 - \`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

package/lib/mjs/stories/Quiz/tests/mocks.js

@@ -88,6 +88,7 @@ export const getMockState = (question) => ({
                             ratingCount: '12',
                             ratingScore: '4',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
+                            discount: '59.9',
                         },
                     },
                     {

package/lib/styles.css

@@ -57,13 +57,17 @@
   min-height: 100%;
   height: 100%;
   overflow: auto;
-  display: flex;
-  justify-content: center;
   background-color: #ffffff;
   color: var(--gray-dust-500);
   font-size: 16px;
 }
 
+/* Container for the loading spinner */
+.cio-quiz.cio-quiz-loading {
+  display: flex;
+  justify-content: center;
+}
+
 .cio-quiz button {
   cursor: pointer;
 }
@@ -77,7 +81,9 @@
   width: 100%;
   position: relative;
   align-self: start;
-  min-height: calc(100% - 2rem); /* Full height - margin */
+  height: calc(
+    100% - 2rem - calc(var(--bottom-bar-height))
+  ); /* Full height - margin - control bar */
 }
 .cio-container--with-image {
   display: flex;
@@ -86,7 +92,15 @@
   padding-bottom: var(--bottom-bar-height);
   position: relative;
   align-self: start;
-  min-height: 100%;
+  height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - margin - control bar */
+}
+
+/* Background image */
+.cio-question-background-image {
+  height: calc(100% - 4px);
+  width: 100%;
+  position: absolute;
+  z-index: -1;
 }
 
 /* Session Prompt Modal */
@@ -163,8 +177,9 @@
   width: 100%;
   object-fit: cover;
   max-height: var(--container-image-small-height);
-  height: var(--container-image-small-height); /* Fixed height for layout shifts*/
+  height: var(--container-image-small-height); /* Fixed height for layout shifts */
   display: flex;
+  align-self: stretch;
 }
 
 /* Input */
@@ -192,7 +207,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: absolute;
+  position: sticky;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -280,6 +295,7 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
+  background-color: white;
 }
 .cio-question-option-container.selected {
   outline: 3px solid var(--primary-color-variant-600);
@@ -302,12 +318,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: start;
   max-width: 1200px;
   padding: 1rem;
   margin-top: 2rem;
-  min-height: calc(100% - 3rem); /* Full height - padding - margin */
+  min-height: calc(
+    100% - 2rem - calc(var(--bottom-bar-height))
+  ); /* Full height - padding - margin */
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-question-options-container {
   display: flex;
@@ -337,6 +356,7 @@
   width: 100%;
   margin: auto;
   cursor: pointer;
+  background-color: white;
 }
 
 /* Option Image */
@@ -383,6 +403,8 @@
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
 }
 .cio-results-title {
   margin-top: 0;
@@ -510,6 +532,11 @@
 .cio-result-card-rating-score {
   margin-right: 5px;
 }
+.cio-result-card-discount {
+  font-weight: normal;
+  font-size: .9em;
+  margin-top: 4px;
+}
 
 /* Result CTA Button */
 .cio-result-card-cta-button {
@@ -574,7 +601,6 @@
 
   /* Image */
   .cio-question-image-container {
-    height: 100%;
     flex-basis: 50%;
     flex-shrink: 0;
     border-radius: 4px;
@@ -623,6 +649,7 @@
   .cio-container {
     align-items: center;
     margin-top: 0;
+    height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - control bar */
   }
   .cio-container--with-image {
     padding: 6% 2%;
@@ -641,10 +668,8 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 100%;
-  }
-  .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
+    height: unset;
   }
 
   /* Content */
@@ -662,14 +687,6 @@
     margin-bottom: 2rem;
   }
 
-  /* CTA Button Component */
-  .cio-question-buttons-container {
-    position: sticky;
-    padding: 0;
-    margin: 0;
-    align-items: center;
-  }
-
   /* Cover Component */
   .cio-cover-question-container--with-image {
     padding: 0;
@@ -686,9 +703,11 @@
   }
   .cio-select-question-container {
     justify-content: center;
-    margin: 0;
+    margin-bottom: 0;
+    margin-top: 0;
     padding: 2rem;
     padding-bottom: 0;
+    min-height: calc(100% - calc(var(--bottom-bar-height))); /* Full height - padding - margin */
   }
   .cio-question-option-container {
     width: calc(25% - 13px);

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

@@ -7,6 +7,7 @@ interface ResultCardProps {
     ratingCountKey?: string;
     ratingScoreKey?: string;
     resultPosition: number;
+    renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
 }
 export default function ResultCard(props: ResultCardProps): JSX.Element;
 export {};

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `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\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `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\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `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\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `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\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- 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.\n- 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\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const 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\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";

package/lib/types/types.d.ts

@@ -10,6 +10,7 @@ export interface ResultCardProps {
     resultCardRegularPriceKey?: string;
     resultCardRatingCountKey?: string;
     resultCardRatingScoreKey?: string;
+    renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
 }
 export declare namespace QuizResultsEventsProps {
     type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;

package/package.json

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