@constructor-io/constructorio-ui-quizzes 1.0.1

package/lib/mjs/components/QuestionTitle/QuestionTitle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+function QuestionTitle(props) {
+    const { title } = props;
+    return React.createElement("h1", { className: 'cio-question-title' }, title);
+}
+export default QuestionTitle;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import OpenTextQuestion from '../OpenTextTypeQuestion/OpenTextTypeQuestion';
+import CoverTypeQuestion from '../CoverTypeQuestion/CoverTypeQuestion';
+import SelectTypeQuestion from '../SelectTypeQuestion/SelectTypeQuestion';
+import { getQuestionTypes } from '../../utils';
+export default function QuizQuestions(props) {
+    const { questionResponse: { next_question: nextQuestion }, } = props;
+    const questionTypes = getQuestionTypes(nextQuestion?.type);
+    return (React.createElement(React.Fragment, null,
+        questionTypes.isOpenQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),
+        questionTypes.isCoverQuestion && React.createElement(CoverTypeQuestion, { key: nextQuestion?.id }),
+        questionTypes.isSelectQuestion && React.createElement(SelectTypeQuestion, { key: nextQuestion?.id })));
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import RedoSVG from './RedoSVG';
+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)));
+}
+export default RedoButton;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+function RedoSVG() {
+    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("g", { clipPath: 'url(#clip0_7495_177230)' },
+            React.createElement("path", { d: 'M0.667969 2.66699V6.66699H4.66797', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+            React.createElement("path", { d: 'M15.332 13.333V9.33301H11.332', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+            React.createElement("path", { d: 'M13.6613 6.00038C13.3232 5.0449 12.7485 4.19064 11.991 3.51732C11.2334 2.844 10.3177 2.37355 9.32911 2.14988C8.34056 1.92621 7.31147 1.9566 6.33784 2.23823C5.36422 2.51985 4.4778 3.04352 3.7613 3.76038L0.667969 6.66704M15.3346 9.33371L12.2413 12.2404C11.5248 12.9572 10.6384 13.4809 9.66476 13.7625C8.69114 14.0441 7.66204 14.0745 6.67349 13.8509C5.68495 13.6272 4.76917 13.1568 4.01161 12.4834C3.25406 11.8101 2.67941 10.9559 2.3413 10.0004', stroke: '#0A0B0C', strokeWidth: '1.33333', strokeLinecap: 'round', strokeLinejoin: 'round' })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: 'clip0_7495_177230' },
+                React.createElement("rect", { width: '16', height: '16', fill: 'white' })))));
+}
+export default RedoSVG;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
+export default function ResultCard(props) {
+    const { result, addToCartCallback, clickItemCallback, salePriceKey, regularPriceKey } = props;
+    const salePrice = salePriceKey && result?.data?.[salePriceKey];
+    const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
+    const clickHandler = () => {
+        if (clickItemCallback && typeof clickItemCallback === 'function') {
+            clickItemCallback(result);
+        }
+    };
+    const keyDownHandler = (event) => {
+        if (event?.key === ' ' || event?.key === 'Enter') {
+            if (clickItemCallback && typeof clickItemCallback === 'function') {
+                clickItemCallback(result);
+            }
+        }
+    };
+    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(ResultCtaButton, { item: result, callback: addToCartCallback })));
+    if (clickItemCallback) {
+        return (React.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, resultCardContent()));
+    }
+    return (React.createElement("div", { className: 'cio-result-card' },
+        React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url }, resultCardContent())));
+}

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

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import RedoButton from '../RedoButton/RedoButton';
+import { QuestionTypes } from '../CioQuiz/actions';
+import QuizContext from '../CioQuiz/context';
+import ResultFilters from '../ResultFilters/ResultFilters';
+import ZeroResults from '../ZeroResults/ZeroResults';
+import Results from '../Results/Results';
+export default function ResultContainer(props) {
+    const { options, resetQuizSessionId } = props;
+    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = options;
+    const { resultsResponse } = useContext(QuizContext);
+    const { dispatch } = useContext(QuizContext);
+    const filterExpression = resultsResponse?.request?.collection_filter_expression;
+    const zeroResults = !resultsResponse?.response?.results?.length;
+    const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
+    const onResetClick = () => {
+        if (dispatch && resultsResponse) {
+            resetQuizSessionId();
+            dispatch({
+                type: QuestionTypes.Reset,
+            });
+        }
+    };
+    if (resultsResponse) {
+        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, { filters: filterExpression }),
+                React.createElement(RedoButton, { onClick: onResetClick })),
+            !zeroResults && (React.createElement(Results, { addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey })),
+            zeroResults && React.createElement(ZeroResults, null)));
+    }
+    return React.createElement("div", null, "Loading");
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export default function ResultCtaButton(props) {
+    const { item, callback, className } = props;
+    const clickHandler = (e) => {
+        e.preventDefault();
+        if (callback && typeof callback === 'function') {
+            e.stopPropagation();
+            callback(item);
+        }
+    };
+    return (React.createElement("button", { type: 'button', className: `cio-result-card-cta-button ${className || ''}`, onClick: clickHandler }, "Add to Cart"));
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+function ResultFilters(props) {
+    const { filters } = props;
+    const isValueExpression = (exp) => 'name' in exp && 'value' in exp;
+    const isAndFilter = (exp) => 'and' in exp;
+    const isOrFilter = (exp) => 'or' in exp;
+    const getFilterValuesFromExpression = (exp) => {
+        if (!exp) {
+            return [];
+        }
+        if (isAndFilter(exp)) {
+            return exp.and.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
+        }
+        if (isOrFilter(exp)) {
+            return exp.or.flatMap((innerExpression) => getFilterValuesFromExpression(innerExpression));
+        }
+        if (isValueExpression(exp)) {
+            return [exp.value];
+        }
+        return [];
+    };
+    const filterValues = [...new Set(getFilterValuesFromExpression(filters))];
+    return (React.createElement("div", { className: 'cio-results-filter-container' },
+        React.createElement("p", null, "Because you answered"),
+        React.createElement("div", { className: 'cio-results-filter-options' }, filterValues?.map((filter) => (React.createElement("div", { className: 'cio-results-filter-option', key: filter }, filter))))));
+}
+export default ResultFilters;

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

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+import ResultCard from '../ResultCard/ResultCard';
+function Results(props) {
+    const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = props;
+    const { resultsResponse } = useContext(QuizContext);
+    return (React.createElement("div", { className: 'cio-results' }, resultsResponse?.response?.results?.map((result) => (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback })))));
+}
+export default Results;

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

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, 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';
+function SelectTypeQuestion() {
+    const { questionResponse, state, quizNextHandler, quizBackHandler, isFirstQuestion } = useContext(QuizContext);
+    let question;
+    let type;
+    let hasImages = false;
+    if (questionResponse) {
+        question = questionResponse.next_question;
+        type = question.type;
+        hasImages = questionResponse.next_question.options.some((option) => option.images);
+    }
+    const [selected, setSelected] = useState({});
+    const isDisabled = Object.keys(selected).length === 0;
+    useEffect(() => {
+        if (questionResponse?.next_question?.type) {
+            const answers = state?.answerInputs?.[questionResponse.next_question.id] || [];
+            const prevSelected = {};
+            answers?.forEach((answer) => {
+                prevSelected[Number(answer)] = true;
+            });
+            setSelected(prevSelected);
+        }
+    }, [questionResponse, state?.answerInputs]);
+    const toggleIdSelected = (id) => {
+        if (type === QuestionTypes.SingleSelect) {
+            setSelected({ [id]: true });
+        }
+        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 (quizNextHandler && !isDisabled && questionResponse) {
+            const questionType = type === QuestionTypes.SingleSelect
+                ? QuestionTypes.SingleSelect
+                : QuestionTypes.MultipleSelect;
+            quizNextHandler({
+                type: questionType,
+                payload: {
+                    questionId: questionResponse?.next_question.id,
+                    input: Object.keys(selected).filter((key) => selected[Number(key)]),
+                    isLastQuestion: questionResponse.is_last_question,
+                },
+            });
+        }
+    };
+    if (question) {
+        return (React.createElement("div", { className: 'cio-select-question-container' },
+            React.createElement("div", { className: 'cio-select-question-text' },
+                React.createElement(QuestionTitle, { title: question.title }),
+                question?.description ? React.createElement(QuestionDescription, { description: question.description }) : ''),
+            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' : ''}`, onClick: () => {
+                    toggleIdSelected(option.id);
+                }, onKeyDown: (event) => {
+                    onOptionKeyDown(event, option.id);
+                }, role: 'button', tabIndex: 0, key: option.id },
+                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: quizBackHandler, showBackButton: !isFirstQuestion, ctaButtonText: question?.cta_text })));
+    }
+    return null;
+}
+export default SelectTypeQuestion;

package/lib/mjs/components/Spinner/Spinner.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function Spinner() {
+    return (React.createElement("div", { className: 'cio-spinner' },
+        React.createElement("div", null),
+        React.createElement("div", null),
+        React.createElement("div", null),
+        React.createElement("div", null)));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import CTAButton from '../CTAButton/CTAButton';
+function ZeroResults(props) {
+    const { onResetClick } = props;
+    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: onResetClick })));
+}
+export default ZeroResults;

package/lib/mjs/constants.js

@@ -0,0 +1,33 @@
+// Autocomplete key index
+export const apiKey = 'key_wJSdZSiesX5hiVLt';
+export const quizId = 'coffee-quiz';
+/// //////////////////////////////
+// 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
+  - \`addToCartCallback\` is a callback function that will be called when the "Add to cart" button is clicked
+  - \`clickItemCallback\` 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
+  - \`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
+- 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)
+`;
+/// //////////////////////////////
+// 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 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 || (RequestStates = {}));

package/lib/mjs/hooks/useCioClient.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { getCioClient } from '../utils';
+const useCioClient = ({ apiKey, cioJsClient }) => {
+    if (!apiKey && !cioJsClient) {
+        console.error('Either apiKey or cioJsClient is required');
+    }
+    return useMemo(() => cioJsClient || getCioClient(apiKey), [apiKey, cioJsClient]);
+};
+export default useCioClient;

package/lib/mjs/index.js

@@ -0,0 +1,2 @@
+import CioQuiz from './components/CioQuiz';
+export default CioQuiz;

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

@@ -0,0 +1,27 @@
+// eslint-disable-next-line
+export const argTypes = {
+    apiKey: {
+        type: { name: 'string' },
+        description: 'Your Constructor API key',
+        table: {
+            type: {
+                summary: 'string',
+            },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+    quizId: {
+        type: { name: 'string' },
+        description: 'ID of the quiz',
+        table: {
+            type: {
+                summary: 'string',
+            },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+};

package/lib/mjs/types.js

@@ -0,0 +1 @@
+export {};

package/lib/mjs/utils.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { QuestionTypes } from './components/CioQuiz/actions';
+export const renderImages = (images, cssClasses) => {
+    const { primary_url: primaryUrl, primary_alt: primaryAlt, secondary_url: secondaryUrl, secondary_alt: secondaryAlt, } = images;
+    if (primaryUrl) {
+        const windowWidth = window.innerWidth;
+        let src = primaryUrl;
+        let alt = primaryAlt || 'Quiz Image';
+        if (windowWidth > 768 && secondaryUrl) {
+            src = secondaryUrl;
+            if (secondaryAlt) {
+                alt = secondaryAlt;
+            }
+        }
+        return (React.createElement("span", { className: `${cssClasses || ''}`.trim() },
+            React.createElement("img", { className: 'cio-question-image', src: src, alt: alt })));
+    }
+    return '';
+};
+// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+export const getStoryParams = (storyCode, templateCode, importCode) => {
+    const code = `
+${importCode}
+${storyCode}
+${templateCode}
+`;
+    return {
+        docs: {
+            source: {
+                code,
+                language: 'jsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    };
+};
+export const defaultAddToCartCallbackCode = `"addToCartCallback": (item) => console.dir(item)`;
+export const stringifyWithDefaults = (obj) => {
+    const { addToCartCallback, cioJsClient, ...rest } = obj;
+    let res = JSON.stringify(rest, null, '  ');
+    if (cioJsClient) {
+        res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
+  "resultsPageOptions": {`);
+    }
+    res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
+    ${defaultAddToCartCallbackCode},`);
+    return res;
+};
+export const stringify = (obj) => JSON.stringify(obj, null, '  ');
+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 getQuestionTypes = (questionType) => {
+    const isOpenQuestion = questionType === QuestionTypes.OpenText;
+    const isCoverQuestion = questionType === QuestionTypes.Cover;
+    const isSingleQuestion = questionType === QuestionTypes.SingleSelect;
+    const isMultipleQuestion = questionType === QuestionTypes.MultipleSelect;
+    const isSelectQuestion = isSingleQuestion || isMultipleQuestion;
+    return {
+        isOpenQuestion,
+        isCoverQuestion,
+        isSingleQuestion,
+        isMultipleQuestion,
+        isSelectQuestion,
+    };
+};
+export const getCioClient = (apiKey) => {
+    if (apiKey) {
+        return new ConstructorIOClient({
+            apiKey,
+        });
+    }
+    return null;
+};
+export function getPreferredColorScheme() {
+    let colorScheme = 'light';
+    // Check if the dark-mode Media-Query matches
+    if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
+        colorScheme = 'dark';
+    }
+    return colorScheme;
+}