@constructor-io/constructorio-ui-pia 2.8.0 → 2.10.0

package/lib/cjs/components/CioPia/CioPia.js

@@ -1,12 +1,14 @@
 "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 constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const useCioPia_1 = tslib_1.__importDefault(require("../../hooks/useCioPia"));
 const useConversation_1 = tslib_1.__importDefault(require("../../hooks/useConversation"));
+const useTracking_1 = tslib_1.__importDefault(require("../../hooks/useTracking"));
+const useViewportTracking_1 = tslib_1.__importDefault(require("../../hooks/useViewportTracking"));
 const useViewportCallbacks_1 = tslib_1.__importDefault(require("../../hooks/useViewportCallbacks"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
@@ -16,9 +18,11 @@ const PiaModal_1 = tslib_1.__importDefault(require("../PiaConversation/PiaModal"
 const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/PiaConversation"));
 // eslint-disable-next-line complexity
 function CioPia(props) {
-    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
+    var _a;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
+    const { priceCurrency } = productCardProps || {};
     const pia = (0, useCioPia_1.default)({
         apiKey,
         itemId,
@@ -28,8 +32,24 @@ function CioPia(props) {
         suggestedQuestionsParameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks });
-    const { containerRef } = (0, useViewportCallbacks_1.default)({ callbacks, context });
+    const tracking = (0, useTracking_1.default)({
+        cioClient: pia.cioClient,
+        itemId,
+        itemName,
+        variationId,
+        threadId: pia.threadId,
+    });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks, tracking });
+    const { containerRef: viewportContainerRef } = (0, useViewportTracking_1.default)({
+        tracking,
+        questions: displayedQuestions,
+    });
+    const { containerRef: callbackContainerRef } = (0, useViewportCallbacks_1.default)({ callbacks, context });
+    const containerRef = (0, react_1.useCallback)((node) => {
+        viewportContainerRef(node);
+        callbackContainerRef(node);
+    }, [viewportContainerRef, callbackContainerRef]);
+    const qnaResultId = (_a = pia.answers.data) === null || _a === void 0 ? void 0 : _a.qna_result_id;
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -55,8 +75,12 @@ function CioPia(props) {
         displayedQuestions,
         handleSubmitQuestion,
         handleQuestionClick,
+        handleFeedback,
+        onResultClick: tracking.trackResultClick,
+        qnaResultId,
         containerRef,
         onInputFocus: handleInputFocus,
+        priceCurrency,
     };
     if (type === 'modal') {
         return (react_1.default.createElement(PiaModal_1.default, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
@@ -72,7 +96,7 @@ function CioPia(props) {
             isLoading && react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }),
             !isLoading && error && react_1.default.createElement(ErrorBlock_1.default, { message: (error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error' }),
             !isLoading && !error && (react_1.default.createElement(react_1.default.Fragment, null,
-                currentAnswer && (react_1.default.createElement(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),
+                currentAnswer && (react_1.default.createElement(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
                 react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
 }
 exports.default = CioPia;

package/lib/cjs/components/CioPia/PiaCustomCarousel.js

@@ -10,10 +10,48 @@ function HtmlDescription({ product }) {
         return null;
     return (react_1.default.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.sanitizeHtml)(description) } }));
 }
-function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
+function createPriceSectionOverride(priceCurrency) {
+    return function PriceSectionOverride({ product }) {
+        const { price, salePrice } = product;
+        if (price == null)
+            return null;
+        return (react_1.default.createElement("div", { className: 'cio-product-card-price-section flex items-baseline gap-2' },
+            react_1.default.createElement("span", { className: 'text-lg font-bold' },
+                priceCurrency,
+                "\u00A0", salePrice !== null && salePrice !== void 0 ? salePrice : price),
+            salePrice != null && (react_1.default.createElement("span", { className: 'text-sm text-gray-400 line-through' },
+                priceCurrency,
+                "\u00A0",
+                price))));
+    };
+}
+function getContentDefaults(content, priceSectionOverride) {
+    const defaults = {};
+    if (!(content === null || content === void 0 ? void 0 : content.description)) {
+        defaults.description = { reactNode: HtmlDescription };
+    }
+    if (!(content === null || content === void 0 ? void 0 : content.price) && priceSectionOverride) {
+        defaults.price = { reactNode: priceSectionOverride };
+    }
+    return defaults;
+}
+function buildMergedOverrides(componentOverrides, priceSectionOverride) {
+    var _a, _b, _c;
+    const content = (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard) === null || _b === void 0 ? void 0 : _b.content;
+    const defaults = getContentDefaults(content, priceSectionOverride);
+    if (Object.keys(defaults).length === 0) {
+        return componentOverrides || {};
+    }
+    return Object.assign(Object.assign({}, componentOverrides), { item: Object.assign(Object.assign({}, componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item), { productCard: Object.assign(Object.assign({}, (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _c === void 0 ? void 0 : _c.productCard), { content: Object.assign(Object.assign({}, content), defaults) }) }) });
+}
+function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }) {
     const wrapperRef = (0, react_1.useRef)(null);
     // Determine to use user-defined click handler or default behavior
     const productClickHandler = (0, react_1.useCallback)((item) => {
+        const position = items.findIndex((i) => i.id === item.id);
+        if (onResultClick && question) {
+            onResultClick(item, position >= 0 ? position : 0, question, qnaResultId);
+        }
         const { onProductCardClick } = callbacks || {};
         if (onProductCardClick) {
             onProductCardClick(item);
@@ -21,7 +59,7 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
         else if (item === null || item === void 0 ? void 0 : item.url) {
             window.open(item.url, '_blank', 'noopener,noreferrer');
         }
-    }, [callbacks]);
+    }, [callbacks, items, onResultClick, question, qnaResultId]);
     // Set up event listener for product card clicks
     (0, react_1.useEffect)(() => {
         const el = wrapperRef.current;
@@ -38,13 +76,8 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
             el.removeEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
-    const mergedOverrides = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e, _f;
-        if ((_c = (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.description) {
-            return componentOverrides;
-        }
-        return Object.assign(Object.assign({}, componentOverrides), { item: Object.assign(Object.assign({}, componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item), { productCard: Object.assign(Object.assign({}, (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _d === void 0 ? void 0 : _d.productCard), { content: Object.assign(Object.assign({}, (_f = (_e = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _e === void 0 ? void 0 : _e.productCard) === null || _f === void 0 ? void 0 : _f.content), { description: { reactNode: HtmlDescription } }) }) }) });
-    }, [componentOverrides]);
+    const priceSectionOverride = (0, react_1.useMemo)(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
+    const mergedOverrides = (0, react_1.useMemo)(() => buildMergedOverrides(componentOverrides, priceSectionOverride), [componentOverrides, priceSectionOverride]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;

package/lib/cjs/components/ConversationHistory/ConversationHistory.js

@@ -8,7 +8,7 @@ const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
-function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
+function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = scrollContainerRef.current;
@@ -34,8 +34,8 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
                 isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
                 entry.answer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
                     react_1.default.createElement(Answer_1.default, { text: entry.answer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-                    carouselItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: carouselItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
-                    isLast && showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback }))))));
+                    carouselItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: carouselItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+                    isLast && showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback }))))));
         })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/cjs/components/PiaConversation/PiaConversation.js

@@ -7,11 +7,11 @@ const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../Sugges
 const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
 const translate_1 = require("../../utils/translate");
 const ConversationHistory_1 = tslib_1.__importDefault(require("../ConversationHistory/ConversationHistory"));
-function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, onInputFocus, }) {
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, }) {
     const hasHistory = conversationHistory.length > 0;
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations))),
-        react_1.default.createElement(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
+        react_1.default.createElement(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
             !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),

package/lib/cjs/components/PiaInlineAnswer/PiaInlineAnswer.js

@@ -6,13 +6,13 @@ const Answer_1 = tslib_1.__importDefault(require("../Answer/Answer"));
 const Feedback_1 = tslib_1.__importDefault(require("../Feedback/Feedback"));
 const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
 const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
-function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
+function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, priceCurrency, }) {
     const disclaimer = (react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }));
     return (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
         disclaimerPosition === 'top' && disclaimer,
         react_1.default.createElement(Answer_1.default, { text: currentAnswer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-        currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
-        showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
+        currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+        showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: onFeedback || (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback), componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
         disclaimerPosition === 'bottom' && disclaimer));
 }
 exports.default = PiaInlineAnswer;

package/lib/cjs/constants.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
+exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_NAME = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
 exports.DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 exports.DEMO_ITEM_ID = '149100215';
+exports.DEMO_ITEM_NAME = 'Ensure Original Nutrition Shake';
 exports.DEMO_QUESTION = 'What is the nutritional content of this shake?';
 exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = 'What alternative products are available for this item?';
 exports.MOCK_QUESTIONS = [

package/lib/cjs/hooks/useCioClient.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const version_1 = tslib_1.__importDefault(require("../version"));
-const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
 const useCioClient = ({ apiKey, cioClient, options } = {}) => {
     if (!apiKey && !cioClient) {
         throw new Error('Api Key or Constructor Client required');
@@ -12,7 +12,7 @@ const useCioClient = ({ apiKey, cioClient, options } = {}) => {
         if (cioClient)
             return cioClient;
         if (apiKey) {
-            return new MockConstructorIOClient_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-pia-${version_1.default}` }, options));
+            return new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-pia-${version_1.default}` }, options));
         }
         return null;
     }, [apiKey, cioClient, options]);

package/lib/cjs/hooks/useCioPia.js

@@ -2,15 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
+const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
 const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
-const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
+const version_1 = tslib_1.__importDefault(require("../version"));
 function useCioPia(props) {
     const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
     const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
-    const defaultClient = (0, useCioClient_1.default)({ apiKey });
-    const client = providedClient || defaultClient;
+    const client = (0, react_1.useMemo)(() => {
+        if (providedClient)
+            return providedClient;
+        return new MockConstructorIOClient_1.default({
+            apiKey,
+            sendTrackingEvents: true,
+            version: `cio-ui-pia-${version_1.default}`,
+        });
+    }, [apiKey, providedClient]);
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
         itemId,
         variationId,
@@ -26,6 +34,7 @@ function useCioPia(props) {
         formatImageUrl,
     });
     return {
+        cioClient: client,
         threadId,
         suggestedQuestions,
         answers,

package/lib/cjs/hooks/useConversation.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useConversation({ pia, itemId, isConversation, callbacks, }) {
+function useConversation({ pia, itemId, isConversation, callbacks, tracking, }) {
     var _a, _b, _c, _d;
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
@@ -11,8 +11,11 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
     const [conversationHistory, setConversationHistory] = (0, react_1.useState)([]);
     const entryIdRef = (0, react_1.useRef)(0);
     const prevAnswerValueRef = (0, react_1.useRef)((_a = answers.data) === null || _a === void 0 ? void 0 : _a.value);
+    const hasTrackedCurrentAnswerRef = (0, react_1.useRef)(false);
+    const answersRef = (0, react_1.useRef)(answers);
     const callbacksRef = (0, react_1.useRef)(callbacks);
     const contextRef = (0, react_1.useRef)(context);
+    const trackingRef = (0, react_1.useRef)(tracking);
     const lastQuestionRef = (0, react_1.useRef)('');
     const lastSourceRef = (0, react_1.useRef)('user');
     (0, react_1.useEffect)(() => {
@@ -21,9 +24,16 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
     (0, react_1.useEffect)(() => {
         contextRef.current = context;
     }, [context]);
+    (0, react_1.useEffect)(() => {
+        trackingRef.current = tracking;
+    }, [tracking]);
+    (0, react_1.useEffect)(() => {
+        answersRef.current = answers;
+    }, [answers]);
     const submitQuestion = (0, react_1.useCallback)((question, source) => {
         lastSourceRef.current = source;
         lastQuestionRef.current = question;
+        hasTrackedCurrentAnswerRef.current = false;
         setCurrentQuestion(question);
         getAnswer(question);
         if (isConversation) {
@@ -33,18 +43,26 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
         }
     }, [getAnswer, isConversation]);
     const handleSubmitQuestion = (0, react_1.useCallback)((question) => {
-        var _a, _b;
-        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onQuestionSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, question, contextRef.current, 'user');
+        var _a, _b, _c;
+        (_a = trackingRef.current) === null || _a === void 0 ? void 0 : _a.trackQuestionSubmit(question);
+        (_c = (_b = callbacksRef.current) === null || _b === void 0 ? void 0 : _b.onQuestionSubmit) === null || _c === void 0 ? void 0 : _c.call(_b, question, contextRef.current, 'user');
         submitQuestion(question, 'user');
     }, [submitQuestion]);
     const handleQuestionClick = (0, react_1.useCallback)((question) => {
-        var _a, _b;
-        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onQuestionSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, question, contextRef.current, 'suggestion');
+        var _a, _b, _c;
+        (_a = trackingRef.current) === null || _a === void 0 ? void 0 : _a.trackQuestionClick(question);
+        (_c = (_b = callbacksRef.current) === null || _b === void 0 ? void 0 : _b.onQuestionSubmit) === null || _c === void 0 ? void 0 : _c.call(_b, question, contextRef.current, 'suggestion');
         submitQuestion(question, 'suggestion');
     }, [submitQuestion]);
     const handleInputFocus = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, contextRef.current);
+        var _a, _b, _c;
+        (_a = trackingRef.current) === null || _a === void 0 ? void 0 : _a.trackFocus();
+        (_c = (_b = callbacksRef.current) === null || _b === void 0 ? void 0 : _b.onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, contextRef.current);
+    }, []);
+    const handleFeedback = (0, react_1.useCallback)((type) => {
+        var _a, _b, _c, _d;
+        (_a = trackingRef.current) === null || _a === void 0 ? void 0 : _a.trackAnswerFeedback(type, (_b = answersRef.current.data) === null || _b === void 0 ? void 0 : _b.qna_result_id);
+        (_d = (_c = callbacksRef.current) === null || _c === void 0 ? void 0 : _c.onFeedback) === null || _d === void 0 ? void 0 : _d.call(_c, type);
     }, []);
     const resetState = (0, react_1.useCallback)(() => {
         setCurrentQuestion('');
@@ -62,10 +80,14 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
         setDisplayedQuestions(suggestedQuestions.data);
     }, [suggestedQuestions.data]);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if ((_a = answers.data) === null || _a === void 0 ? void 0 : _a.follow_up_questions)
             setDisplayedQuestions(answers.data.follow_up_questions);
-    }, [answers.data]);
+        if (answers.data && lastQuestionRef.current && !hasTrackedCurrentAnswerRef.current) {
+            hasTrackedCurrentAnswerRef.current = true;
+            (_b = trackingRef.current) === null || _b === void 0 ? void 0 : _b.trackAnswerView(lastQuestionRef.current, answers.data, answers.items);
+        }
+    }, [answers.data, answers.items]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d, _e, _f;
         const answerValue = (_b = (_a = answers.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
@@ -116,6 +138,7 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
         handleSubmitQuestion,
         handleQuestionClick,
         handleInputFocus,
+        handleFeedback,
         resetState,
     };
 }

package/lib/cjs/hooks/useTracking.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const types_1 = require("../types");
+function useTracking({ cioClient, itemId, itemName, variationId, threadId, }) {
+    const tracker = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker;
+    const baseParams = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ itemId,
+        itemName }, (variationId && { variationId })), (threadId && { threadId }))), [itemId, itemName, variationId, threadId]);
+    const mapQuestions = (0, react_1.useCallback)((questions) => questions.map((q) => ({ question: q.value })), []);
+    const trackViews = (0, react_1.useCallback)((questions, viewTimespans) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentViews(Object.assign(Object.assign({}, baseParams), { questions: mapQuestions(questions), viewTimespans }));
+    }, [tracker, baseParams, mapQuestions]);
+    const trackView = (0, react_1.useCallback)((questions) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentView(Object.assign(Object.assign({}, baseParams), { questions: mapQuestions(questions) }));
+    }, [tracker, baseParams, mapQuestions]);
+    const trackOutOfView = (0, react_1.useCallback)(() => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentOutOfView(baseParams);
+    }, [tracker, baseParams]);
+    const trackFocus = (0, react_1.useCallback)(() => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentFocus(baseParams);
+    }, [tracker, baseParams]);
+    const trackQuestionClick = (0, react_1.useCallback)((question) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentQuestionClick(Object.assign(Object.assign({}, baseParams), { question }));
+    }, [tracker, baseParams]);
+    const trackQuestionSubmit = (0, react_1.useCallback)((question) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentQuestionSubmit(Object.assign(Object.assign({}, baseParams), { question }));
+    }, [tracker, baseParams]);
+    const trackAnswerView = (0, react_1.useCallback)((question, answerData, items) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentAnswerView(Object.assign(Object.assign(Object.assign(Object.assign({}, baseParams), { question, answerText: answerData.value, qnaResultId: answerData.qna_result_id }), (items &&
+            items.length > 0 && {
+            items: items.map((item) => ({
+                itemId: item.id,
+                itemName: item.name,
+            })),
+        })), (answerData.follow_up_questions &&
+            answerData.follow_up_questions.length > 0 && {
+            followUpQuestions: answerData.follow_up_questions.map((q) => ({
+                value: q.value,
+            })),
+        })));
+    }, [tracker, baseParams]);
+    const trackAnswerFeedback = (0, react_1.useCallback)((feedbackType, qnaResultId) => {
+        const feedbackLabel = feedbackType === types_1.FeedbackType.UP ? 'thumbs_up' : 'thumbs_down';
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentAnswerFeedback(Object.assign(Object.assign(Object.assign({}, baseParams), { feedbackLabel }), (qnaResultId && { qnaResultId })));
+    }, [tracker, baseParams]);
+    const trackResultClick = (0, react_1.useCallback)((clickedItem, position, question, qnaResultId) => {
+        tracker === null || tracker === void 0 ? void 0 : tracker.trackProductInsightsAgentResultClick(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemId: clickedItem.id, itemName: clickedItem.name }, (clickedItem.variationId && { variationId: clickedItem.variationId })), { question, seedItemId: itemId, seedItemName: itemName }), (variationId && { seedVariationId: variationId })), (qnaResultId && { qnaResultId })), (threadId && { threadId })), { position }));
+    }, [tracker, itemId, itemName, variationId, threadId]);
+    return (0, react_1.useMemo)(() => ({
+        trackViews,
+        trackView,
+        trackOutOfView,
+        trackFocus,
+        trackQuestionClick,
+        trackQuestionSubmit,
+        trackAnswerView,
+        trackAnswerFeedback,
+        trackResultClick,
+    }), [
+        trackViews,
+        trackView,
+        trackOutOfView,
+        trackFocus,
+        trackQuestionClick,
+        trackQuestionSubmit,
+        trackAnswerView,
+        trackAnswerFeedback,
+        trackResultClick,
+    ]);
+}
+exports.default = useTracking;

package/lib/cjs/hooks/useViewportTracking.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const FLUSH_INTERVAL_MS = 5 * 60 * 1000;
+function useViewportTracking({ tracking, questions, }) {
+    const nodeRef = (0, react_1.useRef)(null);
+    const observerRef = (0, react_1.useRef)(null);
+    const intervalRef = (0, react_1.useRef)(null);
+    const timespansRef = (0, react_1.useRef)([]);
+    const entryTimeRef = (0, react_1.useRef)(null);
+    const questionsRef = (0, react_1.useRef)(questions);
+    const trackingRef = (0, react_1.useRef)(tracking);
+    (0, react_1.useEffect)(() => {
+        const questionsJustArrived = questionsRef.current.length === 0 && questions.length > 0;
+        questionsRef.current = questions;
+        if (questionsJustArrived && entryTimeRef.current) {
+            trackingRef.current.trackView(questions);
+        }
+    }, [questions]);
+    (0, react_1.useEffect)(() => {
+        trackingRef.current = tracking;
+    }, [tracking]);
+    // Stable: only reads refs
+    const flush = (0, react_1.useCallback)(() => {
+        if (entryTimeRef.current) {
+            timespansRef.current.push({
+                start: entryTimeRef.current,
+                end: new Date().toISOString(),
+            });
+            entryTimeRef.current = null;
+        }
+        if (timespansRef.current.length > 0 && questionsRef.current.length > 0) {
+            trackingRef.current.trackViews(questionsRef.current, [...timespansRef.current]);
+            timespansRef.current = [];
+        }
+    }, []);
+    const setupObserver = (0, react_1.useCallback)((element) => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                entryTimeRef.current = new Date().toISOString();
+                if (questionsRef.current.length > 0) {
+                    trackingRef.current.trackView(questionsRef.current);
+                }
+            }
+            else if (entryTimeRef.current) {
+                timespansRef.current.push({
+                    start: entryTimeRef.current,
+                    end: new Date().toISOString(),
+                });
+                entryTimeRef.current = null;
+                trackingRef.current.trackOutOfView();
+            }
+        }, { threshold: 0.5 });
+        observer.observe(element);
+        observerRef.current = observer;
+        intervalRef.current = setInterval(flush, FLUSH_INTERVAL_MS);
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden') {
+                flush();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            observer.disconnect();
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            flush();
+        };
+    }, [flush]);
+    const cleanupRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useCallback)((node) => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+        nodeRef.current = node;
+        if (node) {
+            cleanupRef.current = setupObserver(node);
+        }
+    }, [setupObserver]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
+    return { containerRef };
+}
+exports.default = useViewportTracking;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.8.0';
+exports.default = '2.10.0';

package/lib/mjs/components/CioPia/CioPia.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
 import Input from '../Input/Input';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 import useCioPia from '../../hooks/useCioPia';
 import useConversation from '../../hooks/useConversation';
+import useTracking from '../../hooks/useTracking';
+import useViewportTracking from '../../hooks/useViewportTracking';
 import useViewportCallbacks from '../../hooks/useViewportCallbacks';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
@@ -13,9 +15,10 @@ import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
 // eslint-disable-next-line complexity
 export default function CioPia(props) {
-    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
+    const { priceCurrency } = productCardProps || {};
     const pia = useCioPia({
         apiKey,
         itemId,
@@ -25,8 +28,24 @@ export default function CioPia(props) {
         suggestedQuestionsParameters,
         formatImageUrl: formatters?.formatImageUrl,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, resetState, } = useConversation({ pia, itemId, isConversation, callbacks });
-    const { containerRef } = useViewportCallbacks({ callbacks, context });
+    const tracking = useTracking({
+        cioClient: pia.cioClient,
+        itemId,
+        itemName,
+        variationId,
+        threadId: pia.threadId,
+    });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = useConversation({ pia, itemId, isConversation, callbacks, tracking });
+    const { containerRef: viewportContainerRef } = useViewportTracking({
+        tracking,
+        questions: displayedQuestions,
+    });
+    const { containerRef: callbackContainerRef } = useViewportCallbacks({ callbacks, context });
+    const containerRef = useCallback((node) => {
+        viewportContainerRef(node);
+        callbackContainerRef(node);
+    }, [viewportContainerRef, callbackContainerRef]);
+    const qnaResultId = pia.answers.data?.qna_result_id;
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -52,8 +71,12 @@ export default function CioPia(props) {
         displayedQuestions,
         handleSubmitQuestion,
         handleQuestionClick,
+        handleFeedback,
+        onResultClick: tracking.trackResultClick,
+        qnaResultId,
         containerRef,
         onInputFocus: handleInputFocus,
+        priceCurrency,
     };
     if (type === 'modal') {
         return (React.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
@@ -69,6 +92,6 @@ export default function CioPia(props) {
             isLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
             !isLoading && !error && (React.createElement(React.Fragment, null,
-                currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),
+                currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
                 React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions }))))));
 }