@constructor-io/constructorio-ui-quizzes 1.0.1 → 1.1.0

package/README.md

@@ -1,5 +1,8 @@
 # Constructor.io Quizzes UI Library
 
+[![npm](https://img.shields.io/npm/v/@constructor-io/constructorio-ui-quizzes)](https://www.npmjs.com/package/@constructor-io/constructorio-ui-quizzes)
+[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Constructor-io/constructorio-ui-quizzes/blob/main/LICENSE)
+
 A UI Library that provides React components to manage the fetching and rendering logic for [Constructor.io's Quizzes](https://constructor.io/products/quizzes/).
 
 ## Introduction

package/lib/cjs/components/CioQuiz/index.js

@@ -17,6 +17,14 @@ function CioQuiz(props) {
         // eslint-disable-next-line no-console
         console.error('quizId is a required field of type string');
     }
+    if (!resultsPageOptions || Object.keys(resultsPageOptions).length === 0) {
+        // eslint-disable-next-line no-console
+        console.error('resultsPageOptions is a required field of type object');
+    }
+    if (resultsPageOptions && !(resultsPageOptions === null || resultsPageOptions === void 0 ? void 0 : resultsPageOptions.addToCartCallback)) {
+        // eslint-disable-next-line no-console
+        console.error('resultsPageOptions.addToCartCallback is a required field of type function');
+    }
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState);
     const [requestState, setRequestState] = (0, react_1.useState)(constants_1.RequestStates.Stale);
@@ -44,6 +52,7 @@ function CioQuiz(props) {
         isFirstQuestion,
         quizNextHandler,
         quizBackHandler,
+        cioClient,
     };
     (0, react_1.useEffect)(() => {
         (() => tslib_1.__awaiter(this, void 0, void 0, function* () {

package/lib/cjs/components/ResultCard/ResultCard.js

@@ -1,23 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const ResultCtaButton_1 = tslib_1.__importDefault(require("../ResultCtaButton/ResultCtaButton"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCard(props) {
-    var _a, _b, _c;
-    const { result, addToCartCallback, clickItemCallback, salePriceKey, regularPriceKey } = props;
+    var _a, _b;
+    const { result, addToCartCallback, clickItemCallback: customClickItemCallback, salePriceKey, regularPriceKey, resultPosition, } = props;
+    const { resultsResponse, cioClient } = (0, react_1.useContext)(context_1.default);
     const salePrice = salePriceKey && ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a[salePriceKey]);
     const regularPrice = regularPriceKey && ((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b[regularPriceKey]);
-    const clickHandler = () => {
-        if (clickItemCallback && typeof clickItemCallback === 'function') {
-            clickItemCallback(result);
+    const clickItemCallback = () => {
+        var _a;
+        /* eslint-disable @typescript-eslint/naming-convention */
+        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+            const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = resultsResponse;
+            /* eslint-enable @typescript-eslint/naming-convention */
+            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultClick({
+                quiz_id,
+                quiz_version_id,
+                quiz_session_id,
+                item_id: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id,
+                item_name: result === null || result === void 0 ? void 0 : result.value,
+                section,
+                result_count: total_num_results,
+                result_page: page,
+                result_id,
+                result_position_on_page: resultPosition,
+                num_results_per_page,
+            });
+        }
+        if (customClickItemCallback && typeof customClickItemCallback === 'function') {
+            customClickItemCallback(result);
         }
     };
+    const clickHandler = () => {
+        clickItemCallback();
+    };
     const keyDownHandler = (event) => {
         if ((event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
-            if (clickItemCallback && typeof clickItemCallback === 'function') {
-                clickItemCallback(result);
-            }
+            clickItemCallback();
         }
     };
     const resultCardContent = () => {
@@ -34,12 +56,12 @@ function ResultCard(props) {
                     regularPrice && (react_1.default.createElement("span", { className: `cio-result-card-regular-price${salePrice ? '--strike-through' : ''}` },
                         "$",
                         regularPrice)))),
-            react_1.default.createElement(ResultCtaButton_1.default, { item: result, callback: addToCartCallback })));
+            react_1.default.createElement(ResultCtaButton_1.default, { item: result, callback: addToCartCallback, price: salePrice || regularPrice })));
+    };
+    const resultCardContentWithLink = () => {
+        var _a;
+        return (react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_a = result.data) === null || _a === void 0 ? void 0 : _a.url }, resultCardContent()));
     };
-    if (clickItemCallback) {
-        return (react_1.default.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, resultCardContent()));
-    }
-    return (react_1.default.createElement("div", { className: 'cio-result-card' },
-        react_1.default.createElement("a", { className: 'cio-result-card-anchor', href: (_c = result.data) === null || _c === void 0 ? void 0 : _c.url }, resultCardContent())));
+    return (react_1.default.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
 }
 exports.default = ResultCard;

package/lib/cjs/components/ResultContainer/ResultContainer.js

@@ -12,8 +12,7 @@ function ResultContainer(props) {
     var _a, _b, _c;
     const { options, resetQuizSessionId } = props;
     const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = options;
-    const { resultsResponse } = (0, react_1.useContext)(context_1.default);
-    const { dispatch } = (0, react_1.useContext)(context_1.default);
+    const { resultsResponse, cioClient, dispatch } = (0, react_1.useContext)(context_1.default);
     const filterExpression = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.request) === null || _a === void 0 ? void 0 : _a.collection_filter_expression;
     const zeroResults = !((_c = (_b = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length);
     const resultsTitle = zeroResults ? 'Oops, there are no results' : 'Here are your results';
@@ -25,7 +24,20 @@ function ResultContainer(props) {
             });
         }
     };
-    if (resultsResponse) {
+    if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page }, response: { total_num_results }, } = resultsResponse;
+        /* eslint-enable @typescript-eslint/naming-convention */
+        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
+            quiz_id,
+            quiz_version_id,
+            quiz_session_id,
+            url: window.location.href,
+            section,
+            result_count: total_num_results,
+            result_page: page,
+            result_id,
+        });
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
             react_1.default.createElement("h1", { className: 'cio-results-title' }, resultsTitle),
             react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },

package/lib/cjs/components/ResultCtaButton/ResultCtaButton.js

@@ -1,11 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ResultCtaButton(props) {
-    const { item, callback, className } = props;
+    const { item, callback, className, price } = props;
+    const { resultsResponse, cioClient } = (0, react_1.useContext)(context_1.default);
     const clickHandler = (e) => {
+        var _a, _b;
         e.preventDefault();
+        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+            /* eslint-disable @typescript-eslint/naming-convention */
+            const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = resultsResponse;
+            /* eslint-enable @typescript-eslint/naming-convention */
+            cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizConversion({
+                quiz_id,
+                quiz_version_id,
+                quiz_session_id,
+                item_id: (_a = item.data) === null || _a === void 0 ? void 0 : _a.id,
+                item_name: item.value,
+                section,
+                variation_id: (_b = item.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+                revenue: (price && String(price)) || undefined,
+            });
+        }
         if (callback && typeof callback === 'function') {
             e.stopPropagation();
             callback(item);

package/lib/cjs/components/Results/Results.js

@@ -8,9 +8,9 @@ function Results(props) {
     var _a, _b;
     const { addToCartCallback, clickItemCallback, resultCardSalePriceKey, resultCardRegularPriceKey, } = props;
     const { resultsResponse } = (0, react_1.useContext)(context_1.default);
-    return (react_1.default.createElement("div", { className: 'cio-results' }, (_b = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.map((result) => {
+    return (react_1.default.createElement("div", { className: 'cio-results' }, (_b = (_a = resultsResponse === null || resultsResponse === void 0 ? void 0 : resultsResponse.response) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.map((result, index) => {
         var _a;
-        return (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback }));
+        return (react_1.default.createElement(ResultCard_1.default, { result: result, key: (_a = result.data) === null || _a === void 0 ? void 0 : _a.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultPosition: index + 1 }));
     })));
 }
 exports.default = Results;

package/lib/cjs/utils.js

@@ -80,9 +80,10 @@ const getCioClient = (apiKey) => {
     if (apiKey) {
         return new constructorio_client_javascript_1.default({
             apiKey,
+            sendTrackingEvents: true,
         });
     }
-    return null;
+    return undefined;
 };
 exports.getCioClient = getCioClient;
 function getPreferredColorScheme() {

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

@@ -14,6 +14,14 @@ export default function CioQuiz(props) {
         // eslint-disable-next-line no-console
         console.error('quizId is a required field of type string');
     }
+    if (!resultsPageOptions || Object.keys(resultsPageOptions).length === 0) {
+        // eslint-disable-next-line no-console
+        console.error('resultsPageOptions is a required field of type object');
+    }
+    if (resultsPageOptions && !resultsPageOptions?.addToCartCallback) {
+        // eslint-disable-next-line no-console
+        console.error('resultsPageOptions.addToCartCallback is a required field of type function');
+    }
     const cioClient = useCioClient({ apiKey, cioJsClient });
     const [state, dispatch] = useReducer(reducer, initialState);
     const [requestState, setRequestState] = useState(RequestStates.Stale);
@@ -41,6 +49,7 @@ export default function CioQuiz(props) {
         isFirstQuestion,
         quizNextHandler,
         quizBackHandler,
+        cioClient,
     };
     useEffect(() => {
         (async () => {

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

@@ -1,19 +1,40 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import ResultCtaButton from '../ResultCtaButton/ResultCtaButton';
+import QuizContext from '../CioQuiz/context';
 export default function ResultCard(props) {
-    const { result, addToCartCallback, clickItemCallback, salePriceKey, regularPriceKey } = props;
+    const { result, addToCartCallback, clickItemCallback: customClickItemCallback, salePriceKey, regularPriceKey, resultPosition, } = props;
+    const { resultsResponse, cioClient } = useContext(QuizContext);
     const salePrice = salePriceKey && result?.data?.[salePriceKey];
     const regularPrice = regularPriceKey && result?.data?.[regularPriceKey];
-    const clickHandler = () => {
-        if (clickItemCallback && typeof clickItemCallback === 'function') {
-            clickItemCallback(result);
+    const clickItemCallback = () => {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+            const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page, num_results_per_page }, response: { total_num_results }, } = resultsResponse;
+            /* eslint-enable @typescript-eslint/naming-convention */
+            cioClient?.tracker.trackQuizResultClick({
+                quiz_id,
+                quiz_version_id,
+                quiz_session_id,
+                item_id: result.data?.id,
+                item_name: result?.value,
+                section,
+                result_count: total_num_results,
+                result_page: page,
+                result_id,
+                result_position_on_page: resultPosition,
+                num_results_per_page,
+            });
+        }
+        if (customClickItemCallback && typeof customClickItemCallback === 'function') {
+            customClickItemCallback(result);
         }
     };
+    const clickHandler = () => {
+        clickItemCallback();
+    };
     const keyDownHandler = (event) => {
         if (event?.key === ' ' || event?.key === 'Enter') {
-            if (clickItemCallback && typeof clickItemCallback === 'function') {
-                clickItemCallback(result);
-            }
+            clickItemCallback();
         }
     };
     const resultCardContent = () => (React.createElement(React.Fragment, null,
@@ -28,10 +49,7 @@ export default function ResultCard(props) {
                 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())));
+        React.createElement(ResultCtaButton, { item: result, callback: addToCartCallback, price: salePrice || regularPrice })));
+    const resultCardContentWithLink = () => (React.createElement("a", { className: 'cio-result-card-anchor', href: result.data?.url }, resultCardContent()));
+    return (React.createElement("div", { onClick: clickHandler, onKeyDown: keyDownHandler, className: 'cio-result-card', role: 'button', tabIndex: 0 }, !customClickItemCallback ? resultCardContentWithLink() : resultCardContent()));
 }

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

@@ -8,8 +8,7 @@ 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 { resultsResponse, cioClient, 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';
@@ -21,7 +20,20 @@ export default function ResultContainer(props) {
             });
         }
     };
-    if (resultsResponse) {
+    if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        const { quiz_id, quiz_session_id, quiz_version_id, result_id, request: { section, page }, response: { total_num_results }, } = resultsResponse;
+        /* eslint-enable @typescript-eslint/naming-convention */
+        cioClient?.tracker.trackQuizResultsLoaded({
+            quiz_id,
+            quiz_version_id,
+            quiz_session_id,
+            url: window.location.href,
+            section,
+            result_count: total_num_results,
+            result_page: page,
+            result_id,
+        });
         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' },

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

@@ -1,8 +1,25 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
 export default function ResultCtaButton(props) {
-    const { item, callback, className } = props;
+    const { item, callback, className, price } = props;
+    const { resultsResponse, cioClient } = useContext(QuizContext);
     const clickHandler = (e) => {
         e.preventDefault();
+        if (resultsResponse && resultsResponse.request && resultsResponse.response) {
+            /* eslint-disable @typescript-eslint/naming-convention */
+            const { quiz_id, quiz_session_id, quiz_version_id, request: { section }, } = resultsResponse;
+            /* eslint-enable @typescript-eslint/naming-convention */
+            cioClient?.tracker.trackQuizConversion({
+                quiz_id,
+                quiz_version_id,
+                quiz_session_id,
+                item_id: item.data?.id,
+                item_name: item.value,
+                section,
+                variation_id: item.data?.variation_id,
+                revenue: (price && String(price)) || undefined,
+            });
+        }
         if (callback && typeof callback === 'function') {
             e.stopPropagation();
             callback(item);

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

@@ -4,6 +4,6 @@ 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 })))));
+    return (React.createElement("div", { className: 'cio-results' }, resultsResponse?.response?.results?.map((result, index) => (React.createElement(ResultCard, { result: result, key: result.data?.id, salePriceKey: resultCardSalePriceKey, regularPriceKey: resultCardRegularPriceKey, addToCartCallback: addToCartCallback, clickItemCallback: clickItemCallback, resultPosition: index + 1 })))));
 }
 export default Results;

package/lib/mjs/utils.js

@@ -69,9 +69,10 @@ export const getCioClient = (apiKey) => {
     if (apiKey) {
         return new ConstructorIOClient({
             apiKey,
+            sendTrackingEvents: true,
         });
     }
-    return null;
+    return undefined;
 };
 export function getPreferredColorScheme() {
     let colorScheme = 'light';

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

@@ -1,17 +1,19 @@
 import React from 'react';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { RequestStates } from '../../constants';
-import { NextQuestionResponse, GetBrowseResultsResponse } from '../../types';
+import { NextQuestionResponse, QuizResultsResponse } from '../../types';
 import { ActionAnswerQuestion } from './actions';
 import { QuizReducerState } from './reducer';
 interface QuizContextValue {
     state: QuizReducerState;
     requestState: RequestStates;
     questionResponse: NextQuestionResponse;
-    resultsResponse: GetBrowseResultsResponse;
+    resultsResponse: QuizResultsResponse;
     isFirstQuestion: boolean;
     quizNextHandler: (action?: ActionAnswerQuestion) => void;
     quizBackHandler: () => void;
     dispatch: React.Dispatch<ActionAnswerQuestion>;
+    cioClient: ConstructorIOClient;
 }
 declare const _default: React.Context<Partial<QuizContextValue>>;
 export default _default;

package/lib/types/components/ResultCard/ResultCard.d.ts

@@ -6,6 +6,7 @@ interface ResultCardProps {
     clickItemCallback?: (clickedResult: Partial<BrowseResultData>) => any;
     salePriceKey?: string;
     regularPriceKey?: string;
+    resultPosition: number;
 }
 export default function ResultCard(props: ResultCardProps): JSX.Element;
 export {};

package/lib/types/components/ResultCtaButton/ResultCtaButton.d.ts

@@ -4,6 +4,7 @@ interface ResultCtaButtonProps {
     item: Partial<BrowseResultData>;
     className?: string;
     callback?: (item: Partial<BrowseResultData>) => any;
+    price?: number;
 }
 export default function ResultCtaButton(props: ResultCtaButtonProps): JSX.Element;
 export {};

package/lib/types/hooks/useCioClient.d.ts

@@ -3,6 +3,6 @@ export type CioClientConfig = {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
 };
-type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | null;
+type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | undefined;
 declare const useCioClient: UseCioClient;
 export default useCioClient;

package/lib/types/types.d.ts

@@ -1 +1 @@
-export type { QuestionOption, QuestionImages, Question, NextQuestionResponse, QuizResultsResponse, GetBrowseResultsResponse, BrowseResultData, BrowseRequestType, QuizzesParameters, QuizzesResultsParameters, } from '@constructor-io/constructorio-client-javascript/lib/types';
+export type { QuestionOption, QuestionImages, Question, NextQuestionResponse, QuizResultsResponse, BrowseResultData, BrowseRequestType, QuizzesParameters, QuizzesResultsParameters, } from '@constructor-io/constructorio-client-javascript/lib/types';

package/lib/types/utils.d.ts

@@ -27,5 +27,5 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
     isMultipleQuestion: boolean;
     isSelectQuestion: boolean;
 };
-export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
+export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | undefined;
 export declare function getPreferredColorScheme(): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause'"
   },
   "peerDependencies": {
-    "@constructor-io/constructorio-client-javascript": "^2.35.2",
+    "@constructor-io/constructorio-client-javascript": "^2.35.6",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"