@constructor-io/constructorio-ui-quizzes 1.4.2 → 1.4.4

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

@@ -5,11 +5,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/ResultCtaButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
-    var _a, _b;
-    const { result, salePriceKey, regularPriceKey, resultPosition } = props;
+    var _a, _b, _c, _d;
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey } = 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]);
+    const ratingCount = ratingCountKey && ((_c = result === null || result === void 0 ? void 0 : result.data) === null || _c === void 0 ? void 0 : _c[ratingCountKey]);
+    const ratingScore = ratingScoreKey && ((_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d[ratingScoreKey]);
     const resultCardContent = () => {
         var _a;
         return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -17,13 +19,22 @@ function ResultCard(props) {
                 react_1.default.createElement("img", { src: (_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-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))))));
+                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,
+                            ")")),
+                    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, position: resultPosition, type: 'button' })), resultCardContent()));
     const resultCardContentWithLink = () => getQuizResultLinkProps && (react_1.default.createElement("a", Object.assign({ className: 'cio-result-card-anchor' }, getQuizResultLinkProps({ result, position: resultPosition, type: 'link' })), resultCardContent()));

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

@@ -10,17 +10,17 @@ const Results_1 = tslib_1.__importDefault(require("../Results/Results"));
 function ResultContainer(props) {
     var _a, _b, _c;
     const { options } = props;
-    const { resultCardSalePriceKey, resultCardRegularPriceKey } = options;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, } = 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 ? 'Oops, there are no results' : 'Here are your results';
+    const resultsTitle = zeroResults ? '' : 'Here are your results';
     if (state === null || state === void 0 ? void 0 : state.quiz.results) {
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
             react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
             react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },
-                react_1.default.createElement(ResultFilters_1.default, null),
+                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 })),
+            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey })),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
     }
     return react_1.default.createElement("div", null, "Loading");

package/lib/cjs/components/ResultFilters/ResultFilters.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
-function ResultFilters() {
+function ResultFilters({ hasNoResults }) {
     var _a;
     const { state } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-results-filter-container' },
-        react_1.default.createElement("p", null, "Because you answered"),
+        react_1.default.createElement("p", null, hasNoResults ? 'Your preferences' : 'Because you answered'),
         react_1.default.createElement("div", { className: 'cio-results-filter-options' }, (_a = state === null || state === void 0 ? void 0 : state.quiz.selectedOptionsWithAttributes) === null || _a === void 0 ? void 0 : _a.map((option) => (react_1.default.createElement("div", { className: 'cio-results-filter-option', key: option }, option))))));
 }
 exports.default = ResultFilters;

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

package/lib/cjs/components/ZeroResults/ZeroResults.js

@@ -7,8 +7,7 @@ const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ZeroResults() {
     const { getResetQuizButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-zero-results' },
-        react_1.default.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
-        react_1.default.createElement("p", { className: 'cio-zero-results-description' }, "This is embarrassing \uD83D\uDE22. It might be that some of the questions are not properly set up from our end. Would you give us another try?"),
-        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
+        react_1.default.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, we couldn\u2019t find products that perfectly match your preferences."),
+        react_1.default.createElement(CTAButton_1.default, { ctaText: 'Redo Quiz', propsGetters: getResetQuizButtonProps })));
 }
 exports.default = ZeroResults;

package/lib/cjs/constants.js

@@ -17,7 +17,9 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
   - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
   - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
-  - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price
+  - \`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 
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/cjs/hooks/useQuiz.js

@@ -21,7 +21,6 @@ const useQuiz = (quizOptions) => {
     const { quizApiState, quizLocalState } = quizState;
     const propGetters = (0, usePropsGetters_1.default)(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = (0, usePrimaryColorStyles_1.default)(primaryColor);
-    console.log('quizLocalState.answerInputs', quizLocalState.answerInputs);
     return Object.assign(Object.assign({ cioClient, state: {
             answers: {
                 inputs: quizLocalState.answerInputs,

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

@@ -72,6 +72,8 @@ const getMockState = (question) => ({
                         data: {
                             id: '0',
                             price: 100,
+                            ratingCount: '12',
+                            ratingScore: '4',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -81,6 +83,8 @@ const getMockState = (question) => ({
                             id: '1',
                             price: 200,
                             salePrice: 150,
+                            ratingCount: '6',
+                            ratingScore: '3',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -90,6 +94,8 @@ const getMockState = (question) => ({
                             id: '2',
                             price: 300,
                             salePrice: 250,
+                            ratingCount: '2',
+                            ratingScore: '5',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -106,11 +112,11 @@ const getMockState = (question) => ({
             quiz_session_id: '',
             quiz_version_id: '',
             quiz_selected_options: [
-                { value: 'Option 1', has_attribute: true },
-                { value: 'Option 2', has_attribute: true },
+                { value: 'Chocolate', has_attribute: true },
+                { value: 'Medium', has_attribute: true },
             ],
         },
-        selectedOptionsWithAttributes: ['Option 1', 'Option 2'],
+        selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
     },
 });
 exports.getMockState = getMockState;

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

@@ -2,22 +2,33 @@ 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 } = props;
+    const { result, salePriceKey, regularPriceKey, resultPosition, ratingCountKey, ratingScoreKey } = props;
     const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
+    const ratingCount = ratingCountKey && result?.data?.[ratingCountKey];
+    const ratingScore = ratingScoreKey && result?.data?.[ratingScoreKey];
     const resultCardContent = () => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'cio-result-card-image' },
             React.createElement("img", { src: result.data?.image_url, alt: 'product' })),
         React.createElement("div", { className: 'cio-result-card-text' },
             React.createElement("p", { className: 'cio-result-card-title' }, result.value),
-            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))))));
+            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' },
+                        Array(Number(ratingScore)).fill('★'),
+                        Array(5 - Number(ratingScore)).fill('☆'))),
+                    ratingCount && React.createElement("span", { className: 'cio-result-card-rating-count' },
+                        "(",
+                        ratingCount,
+                        ")")),
+                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', ...getQuizResultLinkProps({ result, position: resultPosition, type: 'link' }) }, resultCardContent()));
     return (React.createElement("div", { className: 'cio-result-card' },

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

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

package/lib/mjs/components/ResultFilters/ResultFilters.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
-function ResultFilters() {
+function ResultFilters({ hasNoResults }) {
     const { state } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-results-filter-container' },
-        React.createElement("p", null, "Because you answered"),
+        React.createElement("p", null, hasNoResults ? 'Your preferences' : 'Because you answered'),
         React.createElement("div", { className: 'cio-results-filter-options' }, state?.quiz.selectedOptionsWithAttributes?.map((option) => (React.createElement("div", { className: 'cio-results-filter-option', key: option }, option))))));
 }
 export default ResultFilters;

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 } = props;
+    const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, } = 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, 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, resultPosition: index + 1 })))));
 }
 export default Results;

package/lib/mjs/components/ZeroResults/ZeroResults.js

@@ -4,8 +4,7 @@ import QuizContext from '../CioQuiz/context';
 function ZeroResults() {
     const { getResetQuizButtonProps } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-zero-results' },
-        React.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, it seems like we couldn\u2019t find results based on your answers."),
-        React.createElement("p", { className: 'cio-zero-results-description' }, "This is embarrassing \uD83D\uDE22. It might be that some of the questions are not properly set up from our end. Would you give us another try?"),
-        React.createElement(CTAButton, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
+        React.createElement("h3", { className: 'cio-zero-results-subtitle' }, "Sorry, we couldn\u2019t find products that perfectly match your preferences."),
+        React.createElement(CTAButton, { ctaText: 'Redo Quiz', propsGetters: getResetQuizButtonProps })));
 }
 export default ZeroResults;

package/lib/mjs/constants.js

@@ -14,7 +14,9 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`onQuizResultClick\` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL
   - \`onQuizResultsLoaded\` is an optional callback function that will be called when the quiz results are loaded
   - \`resultCardRegularPriceKey\` is a parameter that specifies the metadata field name for the regular price
-  - \`resultCardSalePriceKey\` is an optional parameter that specifies the metadata field name for the sale price
+  - \`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 
 - Use different props to configure the behavior of this component.
 - The following stories show how different props affect the component's behavior
 

package/lib/mjs/hooks/useQuiz.js

@@ -18,7 +18,6 @@ const useQuiz = (quizOptions) => {
     const { quizApiState, quizLocalState } = quizState;
     const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
-    console.log('quizLocalState.answerInputs', quizLocalState.answerInputs);
     return {
         cioClient,
         state: {

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

@@ -84,6 +84,8 @@ export const getMockState = (question) => ({
                         data: {
                             id: '0',
                             price: 100,
+                            ratingCount: '12',
+                            ratingScore: '4',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -93,6 +95,8 @@ export const getMockState = (question) => ({
                             id: '1',
                             price: 200,
                             salePrice: 150,
+                            ratingCount: '6',
+                            ratingScore: '3',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -102,6 +106,8 @@ export const getMockState = (question) => ({
                             id: '2',
                             price: 300,
                             salePrice: 250,
+                            ratingCount: '2',
+                            ratingScore: '5',
                             image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
                         },
                     },
@@ -118,11 +124,11 @@ export const getMockState = (question) => ({
             quiz_session_id: '',
             quiz_version_id: '',
             quiz_selected_options: [
-                { value: 'Option 1', has_attribute: true },
-                { value: 'Option 2', has_attribute: true },
+                { value: 'Chocolate', has_attribute: true },
+                { value: 'Medium', has_attribute: true },
             ],
         },
-        selectedOptionsWithAttributes: ['Option 1', 'Option 2'],
+        selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
     },
 });
 const mockElementProps = {

package/lib/styles.css

@@ -432,15 +432,10 @@
   font-weight: 500;
   font-size: 1.25rem;
   line-height: 1.5rem;
+  margin-bottom: 2rem;
   color: var(--gray-dust-500);
   margin-top: 0;
 }
-.cio-zero-results-description {
-  color: var(--gray-dust-100);
-  line-height: 1.25rem;
-  margin-top: 0;
-}
-
 .cio-zero-results .cio-button-container {
   width: 14rem;
   margin-right: auto;
@@ -509,6 +504,12 @@
 .cio-result-card-regular-price--strike-through {
   text-decoration: line-through;
 }
+.cio-result-card-rating {
+  margin-bottom: 10px;
+}
+.cio-result-card-rating-score {
+  margin-right: 5px;
+}
 
 /* Result CTA Button */
 .cio-result-card-cta-button {

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

@@ -4,6 +4,8 @@ interface ResultCardProps {
     result: QuizResultDataPartial;
     salePriceKey?: string;
     regularPriceKey?: string;
+    ratingCountKey?: string;
+    ratingScoreKey?: string;
     resultPosition: number;
 }
 export default function ResultCard(props: ResultCardProps): JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ResultsProps } from '../../types';
+import { ResultCardProps } from '../../types';
 export interface IResultContainerProps {
-    options: ResultsProps;
+    options: ResultCardProps;
 }
 export default function ResultContainer(props: IResultContainerProps): JSX.Element;

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare function ResultFilters(): JSX.Element;
+interface ResultFiltersProps {
+    hasNoResults: boolean;
+}
+declare function ResultFilters({ hasNoResults }: ResultFiltersProps): JSX.Element;
 export default ResultFilters;

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-import { ResultsProps } from '../../types';
+import { ResultCardProps } from '../../types';
+interface ResultsProps extends ResultCardProps {
+}
 declare function Results(props: ResultsProps): JSX.Element;
 export default Results;

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- 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- 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

@@ -5,16 +5,18 @@ import { RequestStates } from './constants';
 import { QuestionTypes } from './components/CioQuiz/actions';
 export type { QuestionOption, QuestionImages, Question, NextQuestionResponse, QuizResultsResponse, BrowseResultData, BrowseRequestType, QuizzesParameters, QuizzesResultsParameters, } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type QuizResultDataPartial = Partial<QuizResultData>;
-export interface ResultsProps {
+export interface ResultCardProps {
     resultCardSalePriceKey?: string;
     resultCardRegularPriceKey?: string;
+    resultCardRatingCountKey?: string;
+    resultCardRatingScoreKey?: string;
 }
 export declare namespace QuizResultsEventsProps {
     type OnQuizResultsLoaded = (results: QuizResultDataPartial) => void;
     type OnQuizResultClick = (result: QuizResultDataPartial, position: number) => void;
     type OnAddToCartClick = (result: QuizResultDataPartial) => void;
 }
-export interface ResultsPageOptions extends ResultsProps {
+export interface ResultsPageOptions extends ResultCardProps {
     numResultsToDisplay?: number;
     onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
     onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;

package/package.json

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