@constructor-io/constructorio-ui-quizzes 1.9.9 → 1.10.0

package/lib/mjs/components/ShareResultsModal/LinkField.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import CheckMarkCircleSVG from './CheckMarkCircleSVG';
+import AlertCircleSVG from './AlertCircleSVG';
+export default function LinkField({ url }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const [isError, setIsError] = useState(false);
+    return (React.createElement("div", { className: 'cio-share-results-feature-group' },
+        React.createElement("div", { className: 'cio-share-results-description' }, "Share by link"),
+        React.createElement("div", { className: 'cio-share-results-button-group' },
+            React.createElement("input", { className: 'cio-share-results-link-input', value: url, disabled: true }),
+            React.createElement("button", { className: 'cio-share-results-share-button', type: 'button', onClick: () => {
+                    try {
+                        navigator.clipboard.writeText(url);
+                        setIsCopied(true);
+                    }
+                    catch (_e) {
+                        setIsError(true);
+                    }
+                } }, "Copy link")),
+        isCopied && (React.createElement("div", { className: 'cio-share-results-notification' },
+            React.createElement(CheckMarkCircleSVG, null),
+            React.createElement("div", null, "Link copied to clipboard"))),
+        isError && (React.createElement("div", { className: 'cio-share-results-notification' },
+            React.createElement(AlertCircleSVG, null),
+            React.createElement("div", null, "Sorry, there was an error copying. Please try again.")))));
+}

package/lib/mjs/components/ShareResultsModal/ShareResultsModal.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CloseSVG from './CloseSVG';
+import LinkField from './LinkField';
+import EmailField from './EmailField';
+import useShareResultsLink from '../../hooks/useShareResultsLink';
+export default function ShareResultsModal({ onClose, quizState, onEmailResults, }) {
+    const url = useShareResultsLink(quizState);
+    return (React.createElement("div", { className: 'cio-share-results-modal', role: 'presentation', onClick: onClose },
+        React.createElement("div", { className: 'cio-share-results-container' },
+            React.createElement("div", { className: 'cio-share-results-content', onClick: (e) => e.stopPropagation(), role: 'presentation' },
+                React.createElement("div", { className: 'cio-share-results-header' },
+                    React.createElement("div", { className: 'cio-share-results-title' }, "Share results"),
+                    React.createElement("button", { onClick: onClose, type: 'button', className: 'cio-modal-close-button', "aria-label": 'Close button' },
+                        React.createElement(CloseSVG, null))),
+                React.createElement("div", null, onEmailResults
+                    ? 'Share or save your quiz results through email or using the link below.'
+                    : 'Share or save your quiz results with this link.'),
+                onEmailResults && React.createElement(EmailField, { onSubmit: (email) => onEmailResults({ email, url }) }),
+                React.createElement(LinkField, { url: url })))));
+}

package/lib/mjs/constants.js

@@ -6,35 +6,7 @@ export const quizSessionStateKey = 'constructorIOQuizState';
 /// //////////////////////////////
 // Storybook Folder Descriptions
 /// //////////////////////////////
-export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
-- This component handles state management, data fetching, and rendering logic.
-- To use this component, \`quizId\`, \`resultsPageOptions\`, and one of \`apiKey\` or \`cioJsClient\` are required.
-- \`resultsPageOptions\` lets you configure the results page
-  - \`onAddToCartClick\` is a callback function that will be called when the "Add to cart" button is clicked
-  - \`onAddToFavoritesClick\` is an optional callback function that will be called when the "Add To Favorites" heart icon is clicked
-  - \`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 
-  - \`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 
-  - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
-- \`callbacks\` lets you pass callback functions that will be called on certain actions
-  - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
-  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
-- \`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
-  - \`sessionStateKey\` is a custom string that will be used as a session storage key
-- \`questionsPageOptions\` lets you configure the question page
-  - \`skipQuestionButtonText\` is an optional string that will be used as the skip button text
-- Use different props to configure the behavior of this component.
-- The following stories show how different props affect the component's behavior
-
-> Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
-`;
-export const hookDescription = `- import \`useCioQuiz\` and call this custom hook in a functional component.
+export const hookDescription = `- Import \`useCioQuiz\` and call this custom hook in a functional component.
 - This hook leaves rendering logic up to you, while handling:
   - state management
   - data fetching
@@ -43,7 +15,7 @@ export const hookDescription = `- import \`useCioQuiz\` and call this custom hoo
   - focus and submit event handling
 - Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure
 - 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.
-- 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
+- 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
 
 Calling the \`useCioQuiz\` hook returns an object with the following keys:
 
@@ -75,9 +47,6 @@ const {
 // Storybook Stories
 /// //////////////////////////////
 export const basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request questions and quiz results from Constructor's servers`;
-export 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
-
-> Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
 export const smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 export const changePrimaryColorDescription = `
 If you would like to use a different primary color, pass a \`primaryColor\` string in RGB format ('R, G, B').
@@ -90,14 +59,6 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 
 > Advanced Option: Instead of passing a primaryColor prop, you can also override \`--primary-color-h\`, \`--primary-color-s\`, and \`--primary-color-l\` CSS variables within a \`.cio-quiz\` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.
 `;
-export const callbacksDescription = `Pass an \`apiKey\`, a \`quizId\`, and \`callbacks\``;
-export const favoritesDescription = `
-Add \`const [favorites, setFavorites] = useState([]);\` or equivalent to manage the favorite items' state.
-
-Pass favorites as an array to \`favoriteItems\` in \`resultsPageOptions\` as a prop to CioQuiz.
-
-Pass a callback function to \`onAddToFavoritesClick\` in \`resultsPageOptions\` as a prop to CioQuiz to handle favorites state changes to update \`favorites\` array.    
-`;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates["Stale"] = "STALE";

package/lib/mjs/hooks/useConsoleErrors.js

@@ -1,19 +1,15 @@
 import { useEffect } from 'react';
 const useConsoleErrors = (quizOptions) => {
-    const { quizId, resultsPageOptions } = quizOptions;
+    const { quizId, resultsPageOptions, callbacks } = quizOptions;
     useEffect(() => {
         if (!quizId) {
             // eslint-disable-next-line no-console
             console.error('quizId is a required field of type string');
         }
-        if (!resultsPageOptions || Object.keys(resultsPageOptions).length === 0) {
+        if (!callbacks?.onAddToCartClick) {
             // eslint-disable-next-line no-console
-            console.error('resultsPageOptions is a required field of type object');
+            console.error('callbacks.onAddToCartClick is a required field of type function');
         }
-        if (resultsPageOptions && !resultsPageOptions?.onAddToCartClick) {
-            // eslint-disable-next-line no-console
-            console.error('resultsPageOptions.onAddToCartClick is a required field of type function');
-        }
-    }, [quizId, resultsPageOptions, resultsPageOptions?.onAddToCartClick]);
+    }, [quizId, resultsPageOptions, callbacks?.onAddToCartClick]);
 };
 export default useConsoleErrors;

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

@@ -19,6 +19,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         type: 'button',
         onClick: () => resetQuiz(),
     }), [resetQuiz]);
+    const getShareResultsButtonProps = useCallback(() => ({ className: 'cio-question-share-results-button' }), []);
     const getHydrateQuizButtonProps = useCallback(() => ({
         className: '',
         type: 'button',
@@ -67,6 +68,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState, favoriteItems
         getSelectInputProps,
         getCoverQuestionProps,
         getResetQuizButtonProps,
+        getShareResultsButtonProps,
         getHydrateQuizButtonProps,
         getAddToCartButtonProps,
         getAddToFavoritesButtonProps,

package/lib/mjs/hooks/useQueryParams.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+const useQueryParams = () => {
+    const getParsedQueryParam = (queryName) => {
+        const queryParams = new URLSearchParams(window.location.search);
+        const queryParam = queryParams.get(queryName);
+        if (!queryParam)
+            return [];
+        return queryParam?.split(',');
+    };
+    const queryItems = getParsedQueryParam('items');
+    const queryAttributes = getParsedQueryParam('attributes');
+    const isSharedResultsQuery = !!queryItems.length && !!queryAttributes.length;
+    const removeSharedResultsQueryParams = useCallback(() => {
+        const updatedUrl = new URL(window.location.href);
+        updatedUrl.searchParams.delete('items');
+        updatedUrl.searchParams.delete('attributes');
+        if (!updatedUrl.searchParams.toString().length) {
+            updatedUrl.search = '';
+        }
+        window.history.replaceState({}, '', updatedUrl.toString());
+    }, []);
+    return {
+        queryItems,
+        queryAttributes,
+        isSharedResultsQuery,
+        removeSharedResultsQueryParams,
+    };
+};
+export default useQueryParams;

package/lib/mjs/hooks/useQuiz.js

@@ -6,8 +6,8 @@ import usePrimaryColorStyles from './usePrimaryColorStyles';
 import useQuizEvents from './useQuizEvents';
 import useQuizState from './useQuizState';
 const useQuiz = (quizOptions) => {
-    const { apiKey, cioJsClient, primaryColor, resultsPageOptions: { favoriteItems }, } = quizOptions;
-    // Log console errors for required parameters quizId and resultsPageOptions
+    const { apiKey, cioJsClient, primaryColor, resultsPageOptions } = quizOptions;
+    // Log console errors for required parameters quizId
     useConsoleErrors(quizOptions);
     // Quiz Cio Client
     const cioClient = useCioClient({ apiKey, cioJsClient });
@@ -18,7 +18,7 @@ const useQuiz = (quizOptions) => {
     // Props getters
     const { quizApiState, quizLocalState, quizSessionStorageState } = quizState;
     const { skipToResults } = quizSessionStorageState;
-    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState, favoriteItems);
+    const propGetters = usePropsGetters(quizEvents, quizApiState, quizLocalState, resultsPageOptions?.favoriteItems);
     const primaryColorStyles = usePrimaryColorStyles(primaryColor);
     useEffect(() => {
         if (skipToResults)

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

@@ -11,13 +11,13 @@ import useQuizAddToFavorites from './useQuizAddToFavorites';
 import useQuizSkipClick from './useQuizSkipClick';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
-    const { resultsPageOptions, callbacks } = quizOptions;
-    const { onAddToCartClick, onQuizResultClick, onQuizResultsLoaded, onAddToFavoritesClick } = resultsPageOptions;
+    const { callbacks } = quizOptions;
+    const { onAddToCartClick, onAddToFavoritesClick, onQuizNextQuestion, onQuizResultClick, onQuizResultsLoaded, onQuizSkipQuestion, } = callbacks || {};
     // Quiz answer change
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
-    const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizNextQuestion);
-    const skipQuestion = useQuizSkipClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizSkipQuestion);
+    const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, onQuizNextQuestion);
+    const skipQuestion = useQuizSkipClick(quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -28,7 +28,12 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     // Quiz results loaded event
     useQuizResultsLoaded(cioClient, quizApiState, onQuizResultsLoaded);
     // Quiz reset
-    const resetQuiz = useQuizResetClick(resetQuizSessionStorageState(quizSessionStorageState.key), dispatchLocalState, dispatchApiState, quizApiState.quizResults);
+    const resetQuiz = useQuizResetClick({
+        resetQuizSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),
+        dispatchLocalState,
+        dispatchApiState,
+        quizResults: quizApiState.quizResults,
+    });
     // Quiz rehydrate
     const hydrateQuizLocalState = useHydrateQuizLocalState(quizSessionStorageState.key, dispatchLocalState);
     return {

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

@@ -1,6 +1,9 @@
 import { useCallback } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
-const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults) => {
+import useQueryParams from '../useQueryParams';
+const useQuizResetClick = (props) => {
+    const { resetQuizSessionStorageState, dispatchLocalState, dispatchApiState, quizResults } = props;
+    const { removeSharedResultsQueryParams, isSharedResultsQuery } = useQueryParams();
     const quizResetClickHandler = useCallback(() => {
         if (quizResults) {
             dispatchLocalState({
@@ -10,8 +13,17 @@ const useQuizResetClick = (resetQuizSessionStorageState, dispatchLocalState, dis
                 type: QuizAPIActionTypes.RESET_QUIZ,
             });
             resetQuizSessionStorageState();
+            if (isSharedResultsQuery)
+                removeSharedResultsQueryParams();
         }
-    }, [dispatchLocalState, dispatchApiState, resetQuizSessionStorageState, quizResults]);
+    }, [
+        dispatchLocalState,
+        dispatchApiState,
+        resetQuizSessionStorageState,
+        quizResults,
+        removeSharedResultsQueryParams,
+        isSharedResultsQuery,
+    ]);
     return quizResetClickHandler;
 };
 export default useQuizResetClick;

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

@@ -1,12 +1,14 @@
 import { useEffect, useReducer } from 'react';
 import { QuestionTypes, QuizAPIActionTypes, } from '../../components/CioQuiz/actions';
 import apiReducer, { initialState, } from '../../components/CioQuiz/quizApiReducer';
-import { getNextQuestion, getQuizResults } from '../../services';
+import { getNextQuestion, getQuizResults, getBrowseResultsForItemIds } from '../../services';
+import useQueryParams from '../useQueryParams';
 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;
+    const { queryItems, queryAttributes, isSharedResultsQuery } = useQueryParams();
     const dispatchQuizResults = async () => {
         try {
             const quizResults = await getQuizResults(cioClient, quizId, {
@@ -33,12 +35,29 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             });
         }
     };
+    const dispatchSharedQuizResults = async () => {
+        try {
+            const quizResults = await getBrowseResultsForItemIds(cioClient, queryItems);
+            dispatchApiState({
+                type: QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS,
+                payload: { quizResults: { ...quizResults, attributes: queryAttributes } },
+            });
+        }
+        catch (error) {
+            dispatchApiState({
+                type: QuizAPIActionTypes.SET_IS_ERROR,
+            });
+        }
+    };
     useEffect(() => {
         (async () => {
             dispatchApiState({
                 type: QuizAPIActionTypes.SET_IS_LOADING,
             });
-            if (skipToResults) {
+            if (isSharedResultsQuery) {
+                await dispatchSharedQuizResults();
+            }
+            else if (skipToResults) {
                 await dispatchQuizResults();
             }
             else {
@@ -81,7 +100,13 @@ const useQuizApiState = (quizOptions, cioClient, quizLocalState, skipToResults,
             }
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, quizId, quizLocalState.answers, resultsPageOptions?.numResultsToDisplay]);
+    }, [
+        cioClient,
+        quizId,
+        quizLocalState.answers,
+        resultsPageOptions?.numResultsToDisplay,
+        isSharedResultsQuery,
+    ]);
     return {
         quizApiState,
         dispatchApiState,

package/lib/mjs/hooks/useShareResultsLink.js

@@ -0,0 +1,14 @@
+export default function useShareResultsLink(quizState) {
+    const urlObj = new URL(window.location.href);
+    const existingParams = urlObj.searchParams;
+    if (!quizState.results?.response?.results) {
+        throw new Error("Can't generate share link without results");
+    }
+    existingParams.set('items', quizState.results.response.results
+        .filter((item) => item.data?.id)
+        .map((item) => item.data.id)
+        .join(',') || '');
+    existingParams.set('attributes', quizState.selectedOptionsWithAttributes?.map((option) => option).join(',') || '');
+    const value = urlObj.toString();
+    return value;
+}

package/lib/mjs/index.js

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

package/lib/mjs/services/index.js

@@ -13,6 +13,7 @@ export const getCioClient = (apiKey) => {
 };
 export const getNextQuestion = (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizNextQuestion(quizId, parameters);
 export const getQuizResults = async (cioClient, quizId, parameters) => cioClient?.quizzes.getQuizResults(quizId, parameters);
+export const getBrowseResultsForItemIds = async (cioClient, itemIds) => cioClient?.browse.getBrowseResultsForItemIds(itemIds);
 // Tracking requests
 export const trackQuizResultsLoaded = (cioClient, quizResults) => {
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;

package/lib/mjs/stories/Quiz/argTypes.js

@@ -1,32 +1,283 @@
 // eslint-disable-next-line
 export const argTypes = {
+    quizId: {
+        description: 'ID of the quiz',
+        control: {
+            type: 'text',
+        },
+    },
+    quizVersionId: {
+        description: 'Optional quiz version Id',
+    },
     apiKey: {
-        type: { name: 'string' },
-        description: 'Your Constructor API key',
+        description: 'Your Constructor API key. Either `apiKey` or `cioJsClient` are required',
+    },
+    'callbacks.onQuizNextQuestion': {
+        description: 'Callback function to be called when the next question is loaded',
+        control: false,
         table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(question) => void',
+                detail: '(question: QuestionWithAnswer) => void',
+            },
+        },
+    },
+    'callbacks.onQuizResultsLoaded': {
+        description: 'Callback function to be called when the quiz results are loaded',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(results) => void',
+                detail: '(results: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onQuizResultClick': {
+        description: 'Callback function to be called when a quiz result is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result, position: number) => void',
+                detail: '(result: QuizResultDataPartial, position: number) => void',
+            },
+        },
+    },
+    'callbacks.onAddToCartClick': {
+        description: 'Callback function to be called when the add to cart button is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => void',
+                detail: '(result: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onAddToFavoritesClick': {
+        description: 'Callback function to be called when the add to favorites button is clicked',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => void',
+                detail: '(result: QuizResultDataPartial) => void',
+            },
+        },
+    },
+    'callbacks.onEmailResults': {
+        description: 'Callback function to be called when emailing results.',
+        control: false,
+        table: {
+            subcategory: 'callbacks',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(args) => void',
+                detail: '(args: QuizEmailResults) => void',
+            },
+        },
+    },
+    cioJsClient: {
+        description: 'Optional custom constructor instance. Either `apiKey` or `cioJsClient` are required',
+    },
+    primaryColor: {
+        description: "RGB value string for quiz primary theme color ie: `'255, 82, 48'`",
+        control: {
+            type: 'text',
+        },
+        defaultValue: {
+            summary: '35, 71, 199',
+        },
+    },
+    'resultCardOptions.resultCardRegularPriceKey': {
+        description: 'Key name for the regular price in the API response',
+        control: {
+            type: 'text',
+        },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'regular_price',
+            },
             type: {
                 summary: 'string',
             },
         },
+    },
+    'resultCardOptions.resultCardSalePriceKey': {
+        description: 'Key name for the sale price in the API response',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'sale_price',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
-    quizId: {
-        type: { name: 'string' },
-        description: 'ID of the quiz',
+    'resultCardOptions.resultCardRatingCountKey': {
+        description: 'Key name for the rating count in the API response',
+        control: {
+            type: 'text',
+        },
         table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'rating_count',
+            },
             type: {
                 summary: 'string',
             },
         },
+    },
+    'resultCardOptions.resultCardRatingScoreKey': {
+        description: 'Key name for the rating score in the API response',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'rating_score',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
-    primaryColor: {
+    'resultCardOptions.renderResultCardPriceDetails': {
+        description: 'Callback function to render result card price details',
+        control: false,
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: 'null',
+            },
+            type: {
+                summary: '(result) => JSX.Element',
+                detail: '(result: QuizResultDataPartial) => JSX.Element',
+            },
+        },
+    },
+    'resultsPageOptions.numResultsToDisplay': {
+        description: 'Number of results to display on the results page',
+        control: {
+            type: 'number',
+        },
+        table: {
+            subcategory: 'resultsPageOptions',
+            defaultValue: {
+                summary: 5,
+            },
+            type: {
+                summary: 'number',
+            },
+        },
+    },
+    'resultsPageOptions.favoriteItems': {
+        description: 'Array of favorite item IDs',
+        control: false,
+        table: {
+            subcategory: 'resultsPageOptions',
+            type: {
+                summary: 'string[]',
+            },
+        },
+    },
+    'resultsPageOptions.showShareResultsButton': {
+        description: 'Boolean for whether or not to show share results button on the results page',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'resultCardOptions',
+            defaultValue: {
+                summary: true,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.showSessionModal': {
+        description: 'Boolean for whether or not to show session modal to hydrate quiz on the results page',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: false,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.showSessionModalOnResults': {
+        description: 'Boolean for whether or not to show session modal to hydrate quiz',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: false,
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    'sessionStateOptions.sessionStateKey': {
+        description: 'Key name where session storage state is saved',
         control: {
             type: 'text',
         },
+        table: {
+            subcategory: 'sessionStateOptions',
+            defaultValue: {
+                summary: 'quizState',
+            },
+            type: {
+                summary: 'string',
+            },
+        },
     },
+    enableHydration: {
+        description: 'Boolean for whether or not to hydrate quiz questions and results on page reload',
+        defaultValue: {
+            summary: 'true',
+        },
+    },
+};
+export const docsControls = {
+    sort: 'requiredFirst',
+    exclude: ['sessionStateOptions', 'callbacks', 'resultsPageOptions', 'resultCardOptions'],
+};
+export const storiesControls = {
+    include: ['apiKey', 'quizId', 'quizVersionId', 'primaryColor'],
 };