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

package/lib/types/stories/Quiz/argTypes.d.ts

@@ -1,35 +1,282 @@
 export declare const argTypes: {
+    quizId: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    quizVersionId: {
+        description: string;
+    };
     apiKey: {
-        type: {
-            name: string;
+        description: string;
+    };
+    'callbacks.onQuizNextQuestion': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    'callbacks.onQuizResultsLoaded': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    'callbacks.onQuizResultClick': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
         };
+    };
+    'callbacks.onAddToCartClick': {
         description: string;
+        control: boolean;
         table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
             type: {
                 summary: string;
+                detail: string;
             };
         };
+    };
+    'callbacks.onAddToFavoritesClick': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    'callbacks.onEmailResults': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+                detail: string;
+            };
+        };
+    };
+    cioJsClient: {
+        description: string;
+    };
+    primaryColor: {
+        description: string;
         control: {
             type: string;
         };
+        defaultValue: {
+            summary: string;
+        };
     };
-    quizId: {
-        type: {
-            name: string;
+    'resultCardOptions.resultCardRegularPriceKey': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'resultCardOptions.resultCardSalePriceKey': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'resultCardOptions.resultCardRatingCountKey': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'resultCardOptions.resultCardRatingScoreKey': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+            };
         };
+    };
+    'resultCardOptions.renderResultCardPriceDetails': {
         description: string;
+        control: boolean;
         table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
             type: {
                 summary: string;
+                detail: string;
             };
         };
+    };
+    'resultsPageOptions.numResultsToDisplay': {
+        description: string;
         control: {
             type: string;
         };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: number;
+            };
+            type: {
+                summary: string;
+            };
+        };
     };
-    primaryColor: {
+    'resultsPageOptions.favoriteItems': {
+        description: string;
+        control: boolean;
+        table: {
+            subcategory: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'resultsPageOptions.showShareResultsButton': {
+        description: string;
         control: {
             type: string;
         };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'sessionStateOptions.showSessionModal': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
     };
+    'sessionStateOptions.showSessionModalOnResults': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'sessionStateOptions.sessionStateKey': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            subcategory: string;
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    enableHydration: {
+        description: string;
+        defaultValue: {
+            summary: string;
+        };
+    };
+};
+export declare const docsControls: {
+    sort: string;
+    exclude: string[];
+};
+export declare const storiesControls: {
+    include: string[];
 };

package/lib/types/types.d.ts

@@ -1,11 +1,15 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import { QuizResultData, NextQuestionResponse, QuizResultsResponse, QuestionOption, Question } from '@constructor-io/constructorio-client-javascript/lib/types';
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import ConstructorIOClient, { GetBrowseResultsForItemIdsResponse } from '@constructor-io/constructorio-client-javascript';
 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 ResultCardProps {
+export type QuizEmailResults = {
+    email: string;
+    url: string;
+};
+export interface ResultCardOptions {
     resultCardSalePriceKey?: string;
     resultCardRegularPriceKey?: string;
     resultCardRatingCountKey?: string;
@@ -17,14 +21,14 @@ export declare namespace QuizResultsEventsProps {
     type OnQuizResultClick = (result: QuizResultDataPartial, position: number) => void;
     type OnAddToCartClick = (result: QuizResultDataPartial) => void;
     type OnAddToFavoritesClick = (result: QuizResultDataPartial) => void;
+    type OnQuizNextQuestion = (question: QuestionWithAnswer) => void;
+    type OnQuizSkipQuestion = (question: QuestionWithAnswer) => void;
+    type OnEmailResults = (data: QuizEmailResults) => Promise<void>;
 }
-export interface ResultsPageOptions extends ResultCardProps {
+export interface ResultsPageOptions {
     numResultsToDisplay?: number;
     favoriteItems?: string[];
-    onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
-    onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
-    onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
-    onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick;
+    showShareResultsButton?: boolean;
 }
 export interface QuestionsPageOptions {
     skipQuestionButtonText?: string;
@@ -37,18 +41,22 @@ export interface SessionStateOptions {
 export type QuestionWithAnswer = Question & {
     answer: AnswerInput;
 };
-export type OnQuizNextQuestion = (question: QuestionWithAnswer) => void;
-export type OnQuizSkipQuestion = (question: QuestionWithAnswer) => void;
 export interface Callbacks {
-    onQuizNextQuestion?: OnQuizNextQuestion;
-    onQuizSkipQuestion?: OnQuizSkipQuestion;
+    onQuizNextQuestion?: QuizResultsEventsProps.OnQuizNextQuestion;
+    onQuizResultsLoaded?: QuizResultsEventsProps.OnQuizResultsLoaded;
+    onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
+    onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
+    onAddToFavoritesClick?: QuizResultsEventsProps.OnAddToFavoritesClick;
+    onQuizSkipQuestion?: QuizResultsEventsProps.OnQuizSkipQuestion;
+    onEmailResults?: QuizResultsEventsProps.OnEmailResults;
 }
 export interface IQuizProps {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
     quizId: string;
     quizVersionId?: string;
-    resultsPageOptions: ResultsPageOptions;
+    resultsPageOptions?: ResultsPageOptions;
+    resultCardOptions?: ResultCardOptions;
     sessionStateOptions?: SessionStateOptions;
     primaryColor?: string;
     enableHydration?: boolean;
@@ -64,7 +72,7 @@ export interface QuizReturnState {
         versionId?: string;
         sessionId?: string;
         currentQuestion?: CurrentQuestion | undefined;
-        results?: QuizResultsResponse | undefined;
+        results?: QuizResultsResponse | QuizSharedResultsData | undefined;
         selectedOptionsWithAttributes?: string[];
     };
     quizSessionStorageState: QuizSessionStorageState;
@@ -121,6 +129,9 @@ export interface OpenTextInputProps {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
 }
+export interface QuizSharedResultsData extends GetBrowseResultsForItemIdsResponse {
+    attributes: string[];
+}
 export interface CoverQuestionProps {
 }
 export interface NextQuestionButtonProps {
@@ -147,6 +158,11 @@ export interface ResetQuizButtonProps {
     onClick: React.MouseEventHandler<HTMLElement>;
     style?: Record<string, string>;
 }
+export interface ShareResultsButtonProps {
+    className: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    style?: CSSProperties;
+}
 export interface HydrateQuizButtonProps {
     className: string;
     type: 'submit' | 'reset' | 'button' | undefined;
@@ -192,6 +208,7 @@ export type GetNextQuestionButtonProps = () => NextQuestionButtonProps;
 export type GetSkipQuestionButtonProps = () => SkipQuestionButtonProps;
 export type GetPreviousQuestionButtonProps = () => PreviousQuestionButtonProps;
 export type GetResetQuizButtonProps = (stylesType?: 'primary' | 'secondary') => ResetQuizButtonProps;
+export type GetShareResultsButtonProps = () => ShareResultsButtonProps;
 export type GetHydrateQuizButtonProps = () => HydrateQuizButtonProps;
 export type GetAddToCartButtonProps = (result: QuizResultDataPartial, price?: number) => AddToCartButtonProps;
 export type GetAddToFavoritesButtonProps = (result: QuizResultDataPartial, price?: number, clickHandler?: () => void) => AddToCartButtonProps;
@@ -222,6 +239,7 @@ export interface UseQuizReturn {
     getSelectInputProps: GetSelectInputProps;
     getCoverQuestionProps: GetCoverQuestionProps;
     getResetQuizButtonProps: GetResetQuizButtonProps;
+    getShareResultsButtonProps: GetShareResultsButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;

package/lib/types/utils.d.ts

@@ -19,11 +19,12 @@ export declare const functionStrings: {
     onQuizResultsLoaded: string;
     onQuizNextQuestion: string;
     onQuizSkipQuestion: string;
+    onEmailResults: string;
     cioJsClient: string;
 };
 export declare const stringifyWithDefaults: (obj: {
     cioJsClient?: any;
-    resultsPageOptions: {
+    callbacks: {
         onAddToCartClick: any;
         onQuizResultClick: any;
         onQuizResultsLoaded: any;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.7";
+declare const _default: "1.10.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.9.10",
+  "version": "1.10.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -69,10 +69,10 @@
     "@cspell/eslint-plugin": "^6.18.1",
     "@storybook/addon-a11y": "^7.4.6",
     "@storybook/addon-actions": "7.4.6",
+    "@storybook/addon-docs": "7.4.6",
     "@storybook/addon-essentials": "7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "7.4.6",
-    "@storybook/addon-docs": "7.4.6",
     "@storybook/jest": "^0.2.3",
     "@storybook/react-webpack5": "7.4.6",
     "@storybook/test-runner": "0.13.0",

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

@@ -1,170 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMockContextValue = exports.getMockState = exports.questionOptions = exports.questionOptionsWithImages = exports.getMockQuestionWithImage = exports.getMockQuestion = void 0;
-const tslib_1 = require("tslib");
-const constants_1 = require("../../../constants");
-const useOpenTextInputProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useOpenTextInputProps"));
-const useCoverQuestionProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useCoverQuestionProps"));
-const useSelectInputProps_1 = tslib_1.__importDefault(require("../../../hooks/usePropsGetters/useSelectInputProps"));
-const getMockQuestion = (type) => ({
-    id: 1,
-    title: 'This is question title',
-    description: 'This is question description',
-    cta_text: 'Continue',
-    type,
-    input_placeholder: 'Answer here...',
-});
-exports.getMockQuestion = getMockQuestion;
-const getMockImages = () => ({
-    images: {
-        primary_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
-    },
-});
-const getMockQuestionWithImage = (type) => (Object.assign(Object.assign({}, (0, exports.getMockQuestion)(type)), getMockImages()));
-exports.getMockQuestionWithImage = getMockQuestionWithImage;
-const getMockOption = (id, value) => ({
-    id,
-    value,
-    attribute: {
-        name: value,
-        value,
-    },
-});
-const getMockOptionWithImage = (id, value) => (Object.assign(Object.assign({}, getMockOption(id, value)), getMockImages()));
-exports.questionOptionsWithImages = [
-    Object.assign({}, getMockOptionWithImage(0, 'coffee')),
-    Object.assign({}, getMockOptionWithImage(1, 'tea')),
-    Object.assign({}, getMockOptionWithImage(2, 'water')),
-];
-exports.questionOptions = [
-    Object.assign({}, getMockOption(0, 'coffee')),
-    Object.assign({}, getMockOption(1, 'tea')),
-    Object.assign({}, getMockOption(2, 'water')),
-];
-const getMockState = (question) => ({
-    answers: {
-        inputs: {
-            1: {
-                type: question === null || question === void 0 ? void 0 : question.type,
-                value: '',
-            },
-        }, // Key is the question Id and value is the answer input
-    },
-    quiz: {
-        requestState: constants_1.RequestStates.Success,
-        versionId: '',
-        sessionId: '',
-        currentQuestion: {
-            next_question: question,
-            isFirstQuestion: false,
-            isOpenQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'open',
-            isCoverQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'cover',
-            isSingleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
-            isMultipleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'multiple',
-            isSelectQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
-            total_questions: 1,
-        },
-        results: {
-            response: {
-                results: [
-                    {
-                        value: 'This is a result card item',
-                        data: {
-                            id: '0',
-                            price: 100,
-                            ratingCount: '12',
-                            ratingScore: '4',
-                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
-                            discount: '59.9',
-                        },
-                    },
-                    {
-                        value: 'This is a result card item',
-                        data: {
-                            id: '1',
-                            price: 200,
-                            salePrice: 150,
-                            ratingCount: '6',
-                            ratingScore: '3',
-                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
-                        },
-                    },
-                    {
-                        value: 'This is a result card item',
-                        data: {
-                            id: '2',
-                            price: 300,
-                            salePrice: 250,
-                            ratingCount: '2',
-                            ratingScore: '5',
-                            image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
-                        },
-                    },
-                ],
-                facets: [],
-                groups: [],
-                sort_options: [],
-                refined_content: [],
-                total_num_results: 10,
-                features: [],
-                result_sources: {},
-            },
-            quiz_id: '',
-            quiz_session_id: '',
-            quiz_version_id: '',
-            quiz_selected_options: [
-                { value: 'Chocolate', has_attribute: true },
-                { value: 'Medium', has_attribute: true },
-            ],
-        },
-        selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
-    },
-    quizSessionStorageState: {
-        key: constants_1.quizSessionStateKey,
-        skipToResults: true,
-        hasSessionStorageState: () => true,
-    },
-});
-exports.getMockState = getMockState;
-const mockElementProps = {
-    className: '',
-    type: 'submit',
-    onClick: () => { },
-    onChange: () => { },
-    onKeyDown: () => { },
-    role: 'button',
-    tabIndex: 0,
-    key: 0,
-    style: {},
-    placeholder: '',
-    value: '',
-};
-const useMockContextValue = (question) => {
-    const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(() => { }, () => { }, question);
-    const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(() => { }, question);
-    const getSelectInputProps = (0, useSelectInputProps_1.default)(() => { }, () => { }, question);
-    return {
-        state: (0, exports.getMockState)(question),
-        getCoverQuestionProps,
-        getOpenTextInputProps,
-        getSelectInputProps,
-        getAddToCartButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-cta-button' })),
-        getAddToFavoritesButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-favorites-button' })),
-        getHydrateQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
-        getNextQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
-        getSkipQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-skip-button' })),
-        getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
-        getQuizImageProps: () => mockElementProps,
-        getQuizResultButtonProps: () => mockElementProps,
-        getQuizResultLinkProps: () => mockElementProps,
-        getResetQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-redo-button' })),
-        primaryColorStyles: {
-            '--primary-color-h': '12',
-            '--primary-color-s': '14',
-            '--primary-color-l': '14',
-        },
-        customClickItemCallback: false,
-        customAddToFavoritesCallback: true,
-    };
-};
-exports.useMockContextValue = useMockContextValue;