@constructor-io/constructorio-ui-quizzes 1.3.11 → 1.4.0

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import BackButton from '../BackButton/BackButton';
 import CTAButton from '../CTAButton/CTAButton';
+import QuizContext from '../CioQuiz/context';
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { ctaButtonText } = props;
+    const { getNextQuestionButtonProps } = useContext(QuizContext);
     return (React.createElement("div", { className: 'cio-question-buttons-container' },
-        showBackButton && React.createElement(BackButton, { onClick: backButtonHandler }),
-        React.createElement(CTAButton, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
+        React.createElement(BackButton, null),
+        React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
 }
 export default ControlBar;

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

@@ -5,17 +5,12 @@ import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import ControlBar from '../ControlBar/ControlBar';
 export default function CoverTypeQuestion() {
-    const { state, previousQuestion, nextQuestion } = useContext(QuizContext);
+    const { state } = useContext(QuizContext);
     let question;
     if (state?.quiz.currentQuestion) {
         question = state?.quiz.currentQuestion.next_question;
     }
     const hasImage = question?.images?.primary_url;
-    const onNextClick = () => {
-        if (nextQuestion) {
-            nextQuestion();
-        }
-    };
     if (question) {
         return (React.createElement("div", { className: `
         cio-container${hasImage ? '--with-image' : ''}
@@ -25,7 +20,7 @@ export default function CoverTypeQuestion() {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement(ControlBar, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text }))));
+                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
     }
     return null;
 }

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

@@ -1,42 +1,15 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 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(props) {
-    const { initialValue = '', onChangeHandler: userDefinedHandler = null } = props;
-    const { state, previousQuestion, nextQuestion } = useContext(QuizContext);
-    const [openTextInput, setOpenTextInput] = useState(initialValue);
+function OpenTextQuestion() {
+    const { state, getOpenTextInputProps } = useContext(QuizContext);
     let question;
     if (state?.quiz.currentQuestion) {
         question = state?.quiz.currentQuestion.next_question;
     }
-    const onChangeHandler = (e) => {
-        setOpenTextInput(e.target.value);
-        if (userDefinedHandler) {
-            userDefinedHandler(e);
-        }
-    };
-    const onNextClick = () => {
-        if (nextQuestion && openTextInput) {
-            nextQuestion(openTextInput);
-        }
-    };
-    const onKeyDownHandler = (e) => {
-        const { key } = e;
-        if (key === 'Enter') {
-            onNextClick();
-        }
-    };
-    useEffect(() => {
-        if (state?.quiz.currentQuestion) {
-            const questionId = state?.quiz.currentQuestion?.next_question.id;
-            const currentAnswer = state.answers.inputs?.[questionId];
-            const openTextAnswer = currentAnswer || initialValue;
-            setOpenTextInput(openTextAnswer);
-        }
-    }, [state, initialValue]);
     if (question) {
         const hasImage = question?.images?.primary_url;
         return (React.createElement("div", { className: `
@@ -47,8 +20,8 @@ function OpenTextQuestion(props) {
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement("input", { className: 'cio-question-input-text', placeholder: question.input_placeholder || 'Answer here...', value: openTextInput, onChange: onChangeHandler, onKeyDown: onKeyDownHandler }),
-                React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: !openTextInput, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text }))));
+                getOpenTextInputProps && React.createElement("input", { ...getOpenTextInputProps() }),
+                React.createElement(ControlBar, { ctaButtonText: question?.cta_text }))));
     }
     return null;
 }

package/lib/mjs/components/RedoButton/RedoButton.js

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import RedoSVG from './RedoSVG';
+import QuizContext from '../CioQuiz/context';
 function RedoButton(props) {
     const { redoText = 'Redo Quiz', disabled, ...rest } = props;
-    return (React.createElement("button", { type: 'button', className: `${disabled ? 'cio-question-redo-button disabled' : 'cio-question-redo-button'}`, ...rest },
-        React.createElement(RedoSVG, null),
-        React.createElement("span", null, redoText)));
+    const { getResetQuizButtonProps } = useContext(QuizContext);
+    if (getResetQuizButtonProps) {
+        return (
+        // eslint-disable-next-line react/button-has-type
+        React.createElement("button", { ...rest, ...getResetQuizButtonProps() },
+            React.createElement(RedoSVG, null),
+            React.createElement("span", null, redoText)));
+    }
+    return null;
 }
 export default RedoButton;

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

@@ -3,21 +3,9 @@ import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCard(props) {
     const { result, salePriceKey, regularPriceKey, resultPosition } = props;
-    const { resultClick, customClickItemCallback } = useContext(QuizContext);
+    const { customClickItemCallback, getQuizResultButtonProps, getQuizResultLinkProps } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
-    const clickHandler = () => {
-        if (resultClick) {
-            resultClick(result, resultPosition);
-        }
-    };
-    const keyDownHandler = (event) => {
-        if (event?.key === ' ' || event?.key === 'Enter') {
-            if (resultClick) {
-                resultClick(result, resultPosition);
-            }
-        }
-    };
     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' })),
@@ -30,8 +18,8 @@ export default function ResultCard(props) {
                 regularPrice && (React.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                     "$",
                     regularPrice))))));
-    const resultCardContentWithoutLink = () => (React.createElement("div", { className: 'cio-result-card-container', onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e), role: 'button', tabIndex: 0 }, resultCardContent()));
-    const resultCardContentWithLink = () => (React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url, onClick: () => clickHandler(), onKeyDown: (e) => keyDownHandler(e) }, resultCardContent()));
+    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' },
         !customClickItemCallback ? resultCardContentWithLink() : resultCardContentWithoutLink(),
         React.createElement(ResultCtaButton, { item: result, price: salePrice || regularPrice })));

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

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

package/lib/mjs/components/ResultCtaButton/ResultCtaButton.js

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import QuizContext from '../CioQuiz/context';
 export default function ResultCtaButton(props) {
-    const { item, className, price } = props;
-    const { addToCart } = useContext(QuizContext);
-    return (React.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: (e) => {
-            if (addToCart) {
-                addToCart(e, item, price);
-            }
-        } }, "Add to Cart"));
+    const { item, price } = props;
+    const { getAddToCartButtonProps } = useContext(QuizContext);
+    if (getAddToCartButtonProps) {
+        return (
+        // eslint-disable-next-line react/button-has-type
+        React.createElement("button", { ...getAddToCartButtonProps(item, price) }, "Add to Cart"));
+    }
+    return null;
 }

package/lib/mjs/components/ResultHeroCard/ResultHeroCard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
+// const flattenRequestFilters: any = (result: any, key: any) => {
+//   return Object.keys(result).reduce((res: any, el: any) => {
+//     if (el === key) {
+//       if (typeof result[el] === 'string') {
+//         return [...res, result[el]];
+//       } else if (Array.isArray(result[el])) {
+//         return [...res, ...result[el]];
+//       }
+//     }
+//     if (typeof result[el] === 'object' && result[el] !== null) {
+//       return [...res, ...flattenRequestFilters(result[el], key)]
+//     }
+//     return res;
+//   }, [])
+// }
+// Code used to flatten facets and extract the key. TBD if we are using it for facet pills
+export default function ResultHeroCard(props) {
+    const { heroItem } = props;
+    return (React.createElement("div", { className: 'cio-hero-card' },
+        React.createElement("img", { className: 'cio-hero-card-image', src: heroItem?.data?.image_url, alt: 'product' }),
+        React.createElement("div", { className: 'cio-hero-card-contents' },
+            React.createElement("div", { className: 'cio-hero-card-title' }, "Especially Curated For You!"),
+            React.createElement("h2", { className: 'cio-hero-card-item-name' }, heroItem?.value),
+            React.createElement("div", { className: 'cio-hero-card-item-price' },
+                "$",
+                heroItem?.data?.price),
+            React.createElement("p", { className: 'cio-hero-card-item-description' }),
+            React.createElement(ResultCtaButton, { item: [heroItem] }))));
+}

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

@@ -1,63 +1,20 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import QuizContext from '../CioQuiz/context';
 import { renderImages } from '../../utils';
-import { QuestionTypes } from '../CioQuiz/actions';
 import ControlBar from '../ControlBar/ControlBar';
+import { QuestionTypes } from '../CioQuiz/actions';
 function SelectTypeQuestion() {
-    const { state, nextQuestion, previousQuestion } = useContext(QuizContext);
+    const { state, getSelectInputProps } = useContext(QuizContext);
     let question;
-    let type;
     let hasImages = false;
     let instructions;
     if (state?.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
-        type = question.type;
         hasImages = question.options.some((option) => option.images);
-        instructions = type === QuestionTypes.MultipleSelect && 'Select one or more options';
+        instructions = question.type === QuestionTypes.MultipleSelect && 'Select one or more options';
     }
-    const [selected, setSelected] = useState({});
-    const isDisabled = Object.keys(selected).length === 0;
-    useEffect(() => {
-        if (state?.quiz.currentQuestion?.next_question?.type) {
-            const nextQuestionId = state.quiz.currentQuestion.next_question.id;
-            const answers = state.answers?.inputs?.[nextQuestionId] || [];
-            const prevSelected = {};
-            answers?.forEach((answer) => {
-                prevSelected[Number(answer)] = true;
-            });
-            setSelected(prevSelected);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state?.quiz.currentQuestion?.next_question.id]);
-    const toggleIdSelected = (id) => {
-        if (type === QuestionTypes.SingleSelect && nextQuestion) {
-            setSelected({ [id]: true });
-            nextQuestion([id.toString()]);
-        }
-        else if (type === QuestionTypes.MultipleSelect) {
-            if (selected[id]) {
-                const newState = { ...selected };
-                delete newState[id];
-                setSelected(newState);
-            }
-            else {
-                setSelected({ ...selected, [id]: true });
-            }
-        }
-    };
-    const onOptionKeyDown = (event, id) => {
-        if (event?.key === ' ' || event?.key === 'Enter') {
-            toggleIdSelected(id);
-        }
-    };
-    const onNextClick = () => {
-        if (nextQuestion && !isDisabled && state?.quiz.currentQuestion) {
-            const selectedAnswers = Object.keys(selected).filter((key) => selected[Number(key)]);
-            nextQuestion(selectedAnswers);
-        }
-    };
     if (question) {
         return (React.createElement("div", { className: 'cio-select-question-container', "data-question-key": question.key },
             React.createElement("div", { className: 'cio-select-question-text' },
@@ -66,16 +23,10 @@ function SelectTypeQuestion() {
             instructions && React.createElement("div", { className: 'cio-select-question-instructions' }, instructions),
             React.createElement("div", { className: `${!hasImages
                     ? 'cio-question-options-container-text-only'
-                    : 'cio-question-options-container'}` }, question?.options?.map((option) => (React.createElement("div", { className: `${!hasImages
-                    ? 'cio-question-option-container-text-only'
-                    : 'cio-question-option-container'} ${selected[option.id] ? 'selected' : ''}`, "data-question-option-key": option.key, onClick: () => {
-                    toggleIdSelected(option.id);
-                }, onKeyDown: (event) => {
-                    onOptionKeyDown(event, option.id);
-                }, role: 'button', tabIndex: 0, key: option.id },
+                    : '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, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })));
+            React.createElement(ControlBar, { ctaButtonText: question?.cta_text || 'Continue' })));
     }
     return null;
 }

package/lib/mjs/components/SessionPromptModal/SessionPromptModal.js

@@ -5,16 +5,28 @@ export default function SessionPromptModal({ continueSession, resetStoredState,
         resetStoredState();
         setShowSessionPrompt(false);
     };
-    if (showSessionPrompt)
+    if (showSessionPrompt) {
+        const getContinueSessionButtonProps = () => ({
+            className: 'cio-question-cta-button',
+            onClick: () => {
+                continueSession();
+                setShowSessionPrompt(false);
+            },
+        });
+        const getResetSession = () => ({
+            className: 'cio-question-cta-button',
+            onClick: () => {
+                resetStoredState();
+                setShowSessionPrompt(false);
+            },
+        });
         return (React.createElement("div", { className: 'cio-session-prompt-modal', role: 'presentation', onClick: onNoClickHandler },
             React.createElement("div", { className: 'cio-session-prompt-container' },
                 React.createElement("div", { className: 'cio-session-prompt-content', role: 'presentation', onClick: (e) => e.stopPropagation() },
                     React.createElement("div", null, "Do you want to continue where you left off?"),
                     React.createElement("div", { className: 'cio-session-prompt-controls-container' },
-                        React.createElement(CTAButton, { ctaText: 'No', type: 'button', onClick: onNoClickHandler }),
-                        React.createElement(CTAButton, { type: 'button', ctaText: 'Yes', onClick: () => {
-                                continueSession();
-                                setShowSessionPrompt(false);
-                            } }))))));
+                        React.createElement(CTAButton, { ctaText: 'No', type: 'button', propsGetters: getResetSession }),
+                        React.createElement(CTAButton, { type: 'button', ctaText: 'Yes', propsGetters: getContinueSessionButtonProps }))))));
+    }
     return null;
 }

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import CTAButton from '../CTAButton/CTAButton';
-function ZeroResults(props) {
-    const { resetQuizClickHandler } = props;
+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', onClick: resetQuizClickHandler })));
+        React.createElement(CTAButton, { ctaText: 'Try Again', propsGetters: getResetQuizButtonProps })));
 }
 export default ZeroResults;

package/lib/mjs/constants.js

@@ -20,6 +20,41 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
 
 > 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.
+- This hook leaves rendering logic up to you, while handling:
+  - state management
+  - data fetching
+  - keyboard navigation
+  - mouse interactions
+  - 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
+
+Calling the \`useCioQuiz\` hook returns an object with the following keys:
+
+\`\`\`jsx
+const {
+  // must be used for a hooks integrations
+  state: QuizReturnState, // Quiz state
+  events: [{...}], // array of quiz events
+  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,
+  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
+  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
+  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
+  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
+  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,
+  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,
+  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,
+  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,
+  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,
+  cioClient, // instance of constructorio-client-javascript
+ } = useCioQuiz(args);
+\`\`\`
+
+> 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)
+`;
 /// //////////////////////////////
 // Storybook Stories
 /// //////////////////////////////
@@ -41,8 +76,8 @@ In the example below, the \`primaryColor\` prop has been used to override this c
 `;
 export var RequestStates;
 (function (RequestStates) {
-    RequestStates[RequestStates["Stale"] = 0] = "Stale";
-    RequestStates[RequestStates["Loading"] = 1] = "Loading";
-    RequestStates[RequestStates["Success"] = 2] = "Success";
-    RequestStates[RequestStates["Error"] = 3] = "Error";
+    RequestStates["Stale"] = "STALE";
+    RequestStates["Loading"] = "LOADING";
+    RequestStates["Success"] = "SUCCESS";
+    RequestStates["Error"] = "ERROR";
 })(RequestStates || (RequestStates = {}));

package/lib/mjs/hooks/useConsoleErrors.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-const useConsoleErrors = (quizId, resultsPageOptions) => {
+const useConsoleErrors = (quizOptions) => {
+    const { quizId, resultsPageOptions } = quizOptions;
     useEffect(() => {
         if (!quizId) {
             // eslint-disable-next-line no-console

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

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+import useSelectInputProps from './useSelectInputProps';
+import useCoverQuestionProps from './useCoverQuestionProps';
+import useOpenTextInputProps from './useOpenTextInputProps';
+import useNextQuestionButtonProps from './useNextQuestionButtonProps';
+import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
+const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
+    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, resultClick, } = quizEvents;
+    const getOpenTextInputProps = useOpenTextInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
+    const getCoverQuestionProps = useCoverQuestionProps(quizAnswerChanged, quizApiState.quizCurrentQuestion?.next_question);
+    const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
+    const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
+    const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
+    const getResetQuizButtonProps = useCallback(() => ({
+        className: 'cio-question-redo-button',
+        type: 'button',
+        onClick: () => resetQuiz(),
+    }), [resetQuiz]);
+    const getHydrateQuizButtonProps = useCallback(() => ({
+        className: '',
+        type: 'button',
+        onClick: () => hydrateQuiz(),
+    }), [hydrateQuiz]);
+    const getAddToCartButtonProps = useCallback((result, price) => ({
+        className: 'cio-result-card-cta-button',
+        type: 'button',
+        onClick: (e) => addToCart(e, result, price),
+    }), [addToCart]);
+    const quizResultClickDown = useCallback((event, result, position) => {
+        if (event?.key === ' ' || event?.key === 'Enter') {
+            if (resultClick) {
+                resultClick(result, position);
+            }
+        }
+    }, [resultClick]);
+    const getQuizResultButtonProps = useCallback(({ result, position }) => ({
+        className: 'cio-result-card-container',
+        role: 'button',
+        tabIndex: 0,
+        onClick: () => resultClick(result, position),
+        onKeyDown: (event) => quizResultClickDown(event, result, position),
+    }), [quizResultClickDown, resultClick]);
+    const getQuizResultLinkProps = useCallback(({ result, position }) => ({
+        href: result.data?.url,
+        onClick: () => resultClick(result, position),
+        onKeyDown: (event) => quizResultClickDown(event, result, position),
+    }), [quizResultClickDown, resultClick]);
+    const getQuizImageProps = useCallback(() => ({
+        src: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_url,
+        alt: quizApiState.quizCurrentQuestion?.next_question?.images?.primary_alt,
+    }), [quizApiState.quizCurrentQuestion]);
+    const getSelectQuestionImageProps = useCallback((option) => ({
+        className: 'cio-question-option-image',
+        src: option?.images?.primary_url,
+        alt: option?.images?.primary_alt,
+    }), []);
+    return {
+        getOpenTextInputProps,
+        getNextQuestionButtonProps,
+        getPreviousQuestionButtonProps,
+        getQuizImageProps,
+        getSelectQuestionImageProps,
+        getSelectInputProps,
+        getCoverQuestionProps,
+        getResetQuizButtonProps,
+        getHydrateQuizButtonProps,
+        getAddToCartButtonProps,
+        getQuizResultButtonProps,
+        getQuizResultLinkProps,
+    };
+};
+export default usePropsGetters;

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

@@ -0,0 +1,10 @@
+import { useCallback, useEffect } from 'react';
+export default function useCoverQuestionProps(setQuizAnswers, currentQuestionData) {
+    useEffect(() => {
+        if (currentQuestionData?.type === 'cover') {
+            setQuizAnswers('');
+        }
+    }, [setQuizAnswers, currentQuestionData]);
+    const getCoverQuestionProps = useCallback(() => ({}), []);
+    return getCoverQuestionProps;
+}

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

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+export default function useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState) {
+    const getNextQuestionButtonProps = useCallback(() => {
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question.id;
+        let buttonDisabled;
+        if (currentQuestionId && !quizApiState.quizCurrentQuestion?.isCoverQuestion) {
+            buttonDisabled =
+                !quizLocalState.answerInputs[currentQuestionId]?.value ||
+                    !quizLocalState.answerInputs[currentQuestionId]?.value?.length;
+        }
+        return {
+            className: buttonDisabled ? 'cio-question-cta-button disabled' : 'cio-question-cta-button',
+            type: 'button',
+            onClick: () => {
+                nextQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, quizLocalState.answerInputs, nextQuestion]);
+    return getNextQuestionButtonProps;
+}

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

@@ -0,0 +1,43 @@
+import { useState, useCallback, useEffect } from 'react';
+export default function useOpenTextInputProps(setQuizAnswers, nextQuestion, currentQuestionData, answerInputs) {
+    const [input, setInput] = useState('');
+    const onChangeHandler = useCallback((e) => {
+        setInput(e.target.value);
+    }, []);
+    const onKeyDownHandler = useCallback((e) => {
+        const { key } = e;
+        if (key === 'Enter') {
+            if (input && currentQuestionData?.type === 'open') {
+                nextQuestion();
+            }
+        }
+    }, [currentQuestionData?.type, input, nextQuestion]);
+    useEffect(() => {
+        if (currentQuestionData?.type === 'open') {
+            setQuizAnswers(input);
+        }
+    }, [input, currentQuestionData?.type, currentQuestionData?.id, setQuizAnswers]);
+    // Reset input for new open text questions
+    useEffect(() => {
+        if (answerInputs && currentQuestionData?.id) {
+            const questionAnswer = answerInputs[currentQuestionData.id]?.value;
+            if (questionAnswer) {
+                setInput(questionAnswer);
+            }
+            else {
+                setInput('');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentQuestionData?.id]);
+    const getOpenTextInputProps = useCallback(() => ({
+        className: 'cio-question-input-text',
+        placeholder: currentQuestionData?.input_placeholder || 'Answer here...',
+        value: input,
+        onChange: onChangeHandler,
+        onKeyDown: onKeyDownHandler,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentQuestionData?.input_placeholder, currentQuestionData?.id, input, onKeyDownHandler]);
+    return getOpenTextInputProps;
+}

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

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+export default function usePreviousQuestionButtonProps(quizApiState, previousQuestion) {
+    const getPreviousQuestionButtonProps = useCallback(() => {
+        const buttonDisabled = quizApiState.quizCurrentQuestion?.isFirstQuestion;
+        return {
+            title: 'Quiz Back Button',
+            role: 'button',
+            className: `cio-question-back-button ${buttonDisabled ? 'disabled' : ''}`,
+            type: 'button',
+            onClick: () => previousQuestion(),
+        };
+    }, [quizApiState, previousQuestion]);
+    return getPreviousQuestionButtonProps;
+}