@constructor-io/constructorio-ui-quizzes 1.4.3 → 1.4.5

package/lib/mjs/hooks/useQuizEvents/useQuizResetClick.js

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
-import { resetQuizSessionStorageState } from '../../utils';
-const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, quizResults) => {
+const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults) => {
     const quizResetClickHandler = useCallback(() => {
         if (quizResults) {
             dispatchLocalState({
@@ -10,9 +9,9 @@ const useQuizResetClick = (quizStateKey, dispatchLocalState, dispatchApiState, q
             dispatchApiState({
                 type: QuizAPIActionTypes.RESET_QUIZ,
             });
-            resetQuizSessionStorageState(quizStateKey);
+            resetQuizSessionStorageState();
         }
-    }, [dispatchLocalState, dispatchApiState, quizStateKey, quizResults]);
+    }, [dispatchLocalState, dispatchApiState, resetQuizSessionStorageState, quizResults]);
     return quizResetClickHandler;
 };
 export default useQuizResetClick;

package/lib/mjs/hooks/useQuizState/index.js

@@ -3,15 +3,16 @@ import useQuizLocalState from './useQuizLocalState';
 const useQuizState = (quizOptions, cioClient) => {
     const { sessionStateOptions } = quizOptions;
     // Quiz Local state
-    const { quizLocalState, dispatchLocalState, hasQuizStoredState, quizStateKey } = useQuizLocalState(sessionStateOptions?.sessionStateKey);
+    const { quizLocalState, dispatchLocalState, hasQuizStoredState, skipToResults, quizStateKey } = useQuizLocalState(sessionStateOptions);
     // Quiz API state
-    const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, dispatchLocalState);
+    const { quizApiState, dispatchApiState } = useQuizApiState(quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState);
     return {
         quizApiState,
         quizLocalState,
         dispatchApiState,
         dispatchLocalState,
         hasQuizStoredState,
+        skipToResults,
         quizStateKey,
     };
 };

package/lib/mjs/hooks/useQuizState/useQuizApiState.js

@@ -2,7 +2,9 @@ import { useEffect, useReducer } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
 import apiReducer, { initialState, } from '../../components/CioQuiz/quizApiReducer';
 import { getNextQuestion, getQuizResults } from '../../services';
-const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalState) => {
+const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults, dispatchLocalState
+// eslint-disable-next-line max-params
+) => {
     const [quizApiState, dispatchApiState] = useReducer(apiReducer, initialState);
     const { quizId, quizVersionId: quizVersionIdProp, resultsPageOptions } = quizOptions;
     useEffect(() => {
@@ -10,7 +12,7 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (quizLocalState.isLastAnswer) {
+            if (quizLocalState.isLastAnswer || skipToResults) {
                 try {
                     const quizResults = await getQuizResults(cioClient, quizId, {
                         answers: quizLocalState.answers,
@@ -25,6 +27,10 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, dispatchLocalSt
                             quizResults,
                         },
                     });
+                    if (!quizLocalState.isQuizCompleted)
+                        dispatchLocalState({
+                            type: QuestionTypes.Complete,
+                        });
                 }
                 catch (error) {
                     dispatchApiState({

package/lib/mjs/hooks/useQuizState/useQuizLocalState.js

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useReducer } from 'react';
 import quizLocalReducer, { initialState } from '../../components/CioQuiz/quizLocalReducer';
 import { quizSessionStateKey } from '../../constants';
 import { getStateFromSessionStorage, logger } from '../../utils';
-const useQuizLocalState = (sessionStateKey) => {
+const useQuizLocalState = (sessionStateOptions) => {
     const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
-    const quizStateKey = sessionStateKey || quizSessionStateKey;
+    const quizStateKey = sessionStateOptions?.sessionStateKey || quizSessionStateKey;
     useEffect(() => {
         // don't save state if initial state
         if (quizLocalState?.answers?.length) {
@@ -12,6 +12,8 @@ const useQuizLocalState = (sessionStateKey) => {
         }
     }, [quizLocalState, quizStateKey]);
     const hasQuizStoredState = () => getStateFromSessionStorage(quizStateKey) !== null;
+    const skipToResults = !!getStateFromSessionStorage(quizStateKey)?.isQuizCompleted &&
+        !sessionStateOptions?.showSessionModalOnResults;
     const dispatchLocalState = useCallback((action) => {
         logger(action);
         dispatch(action);
@@ -20,6 +22,7 @@ const useQuizLocalState = (sessionStateKey) => {
         quizLocalState,
         hasQuizStoredState,
         dispatchLocalState,
+        skipToResults,
         quizStateKey,
     };
 };

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

@@ -67,6 +67,7 @@ export const getMockState = (question) => ({
         requestState: RequestStates.Success,
         versionId: '',
         sessionId: '',
+        skipToResults: false,
         currentQuestion: {
             next_question: question,
             isFirstQuestion: false,
@@ -84,6 +85,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 +96,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 +107,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 +125,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

@@ -504,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/CioQuiz/actions.d.ts

@@ -8,7 +8,8 @@ export declare enum QuestionTypes {
     Next = "next",
     Back = "back",
     Reset = "reset",
-    Hydrate = "hydrate"
+    Hydrate = "hydrate",
+    Complete = "complete"
 }
 export interface QuestionAnswer<Value> {
     questionId: number;
@@ -23,7 +24,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

package/lib/types/components/CioQuiz/quizLocalReducer.d.ts

@@ -5,6 +5,7 @@ export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: AnswerInputState;
     isLastAnswer: boolean;
+    isQuizCompleted: boolean;
     quizVersionId?: string;
     quizSessionId?: string;
 };

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/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- `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/hooks/useQuizEvents/useQuizResetClick.d.ts

@@ -1,4 +1,4 @@
 import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
 import { QuizEventsReturn, QuizResultsResponse } from '../../types';
-declare const useQuizResetClick: (quizStateKey: string, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
+declare const useQuizResetClick: (resetQuizSessionStorageState: () => void, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
 export default useQuizResetClick;

package/lib/types/hooks/useQuizState/index.d.ts

@@ -10,6 +10,7 @@ type UseQuizState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient) =>
     dispatchApiState: React.Dispatch<ActionQuizAPI>;
     dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
     hasQuizStoredState: () => boolean;
+    skipToResults: boolean;
     quizStateKey: string;
 };
 declare const useQuizState: UseQuizState;

package/lib/types/hooks/useQuizState/useQuizApiState.d.ts

@@ -4,7 +4,7 @@ import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/ac
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
 import { IQuizProps } from '../../types';
-type UseQuizApiState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => {
+type UseQuizApiState = (quizOptions: IQuizProps, cioClient: ConstructorIOClient, quizLocalState: QuizLocalReducerState, skipToResults: boolean, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>) => {
     quizApiState: QuizAPIReducerState;
     dispatchApiState: React.Dispatch<ActionQuizAPI>;
 };

package/lib/types/hooks/useQuizState/useQuizLocalState.d.ts

@@ -1,8 +1,10 @@
 import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
-declare const useQuizLocalState: (sessionStateKey?: string) => {
+import { SessionStateOptions } from '../../types';
+declare const useQuizLocalState: (sessionStateOptions?: SessionStateOptions) => {
     quizLocalState: import("../../components/CioQuiz/quizLocalReducer").QuizLocalReducerState;
     hasQuizStoredState: () => boolean;
     dispatchLocalState: (action: ActionAnswerQuestion) => void;
+    skipToResults: boolean;
     quizStateKey: string;
 };
 export default useQuizLocalState;

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;
@@ -22,6 +24,7 @@ export interface ResultsPageOptions extends ResultsProps {
 }
 export interface SessionStateOptions {
     showSessionModal?: boolean;
+    showSessionModalOnResults?: boolean;
     sessionStateKey?: string;
 }
 export interface IQuizProps {
@@ -44,6 +47,7 @@ export interface QuizReturnState {
         sessionId?: string;
         currentQuestion?: CurrentQuestion | undefined;
         results?: QuizResultsResponse | undefined;
+        skipToResults: boolean;
         selectedOptionsWithAttributes?: string[];
     };
 }

package/package.json

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