@constructor-io/constructorio-ui-pia 2.9.0 → 2.10.1

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

@@ -19,9 +19,10 @@ const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/Pi
 // eslint-disable-next-line complexity
 function CioPia(props) {
     var _a;
-    const { apiKey, itemId, itemName, 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 = (0, useCioPia_1.default)({
         apiKey,
         itemId,
@@ -79,6 +80,7 @@ function CioPia(props) {
         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 },
@@ -94,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, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId })),
+                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

@@ -4,14 +4,53 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
 const contentTransformers_1 = require("../../utils/contentTransformers");
+const translate_1 = require("../../utils/translate");
 function HtmlDescription({ product }) {
     const { description } = product;
     if (!description)
         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, onResultClick, question, qnaResultId, }) {
+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, translations, priceCurrency, }) {
     const wrapperRef = (0, react_1.useRef)(null);
+    const { onAddToCart } = callbacks || {};
+    const addToCartHandler = (0, react_1.useCallback)((event, product) => {
+        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, event);
+    }, [onAddToCart]);
     // 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);
@@ -42,13 +81,19 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick
             el.removeEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
+    const priceSectionOverride = (0, react_1.useMemo)(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
     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;
+        var _a;
+        const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        const cardOverrides = (_a = baseOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard;
+        // The carousel never passes onAddToCart down and the card hides the button without it, so
+        // re-render the card with the handler. A full card override owns its own layout - skip it.
+        if (!onAddToCart || (cardOverrides === null || cardOverrides === void 0 ? void 0 : cardOverrides.reactNode)) {
+            return baseOverrides;
         }
-        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 addToCartText = (0, translate_1.translate)('Add to Cart', translations);
+        return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { productCard: Object.assign(Object.assign({}, cardOverrides), { reactNode: ({ product }) => (react_1.default.createElement(constructorio_ui_components_1.ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })) }) }) });
+    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
     // 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, handleFeedback, onResultClick, qnaResultId, }) {
+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,7 +34,7 @@ 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, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId })),
+                    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, translations: translations, 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, handleFeedback, onResultClick, qnaResultId, 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, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId }),
+        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,12 +6,12 @@ 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, onFeedback, onResultClick, question, qnaResultId, }) {
+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, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId })),
+        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, translations: translations, 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));
 }

package/lib/cjs/hooks/mocks/MockConstructorIOClient.js

@@ -6,14 +6,19 @@ const agent_1 = tslib_1.__importDefault(require("./agent"));
 const version_1 = tslib_1.__importDefault(require("../../version"));
 class MockConstructorIOClient {
     constructor(options) {
-        this.options = Object.assign({ version: options.version || `cio-ui-pia-${version_1.default}`, serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com', quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com', agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com', sessionId: options.sessionId || 0, clientId: options.clientId || 'this-is-a-random-client-id', sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true, beaconMode: options.beaconMode !== undefined ? options.beaconMode : true, networkParameters: options.networkParameters || {} }, options);
-        const cioClient = new constructorio_client_javascript_1.default(this.options);
+        const isServer = typeof window === 'undefined' || typeof document === 'undefined';
+        const clientOptions = Object.assign(Object.assign(Object.assign({ version: options.version || `cio-ui-pia-${version_1.default}`, serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com', quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com', agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com' }, (isServer && {
+            clientId: options.clientId || 'this-is-a-random-client-id',
+        })), { sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true, beaconMode: options.beaconMode !== undefined ? options.beaconMode : true, networkParameters: options.networkParameters || {} }), options);
+        const cioClient = new constructorio_client_javascript_1.default(clientOptions);
+        const { clientId, sessionId } = cioClient.agent.options;
+        this.options = Object.assign(Object.assign({}, clientOptions), { clientId, sessionId });
         this.search = cioClient.search;
         this.browse = cioClient.browse;
         this.recommendations = cioClient.recommendations;
         this.tracker = cioClient.tracker;
         this.quizzes = cioClient.quizzes;
-        this.agent = new agent_1.default(Object.assign(Object.assign({}, this.options), { clientId: options.clientId, sessionId: options.sessionId }));
+        this.agent = new agent_1.default(this.options);
     }
 }
 exports.default = MockConstructorIOClient;

package/lib/cjs/utils/translate.js

@@ -10,6 +10,7 @@ const defaultTranslations = {
     'Is this answer useful?': 'Is this answer useful?',
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
+    'Add to Cart': 'Add to Cart',
 };
 /**
  * Translates a word using the provided translations object.

package/lib/cjs/version.js

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

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

@@ -15,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, itemName, 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,
@@ -75,6 +76,7 @@ export default function CioPia(props) {
         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 },
@@ -90,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, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId })),
+                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 }))))));
 }

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

@@ -1,14 +1,65 @@
 import React, { useCallback, useRef, useEffect, useMemo } from 'react';
-import { Carousel, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
+import { Carousel, ProductCard, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
 import { sanitizeHtml } from '../../utils/contentTransformers';
+import { translate } from '../../utils/translate';
 function HtmlDescription({ product }) {
     const { description } = product;
     if (!description)
         return null;
     return (React.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: sanitizeHtml(description) } }));
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, }) {
+function createPriceSectionOverride(priceCurrency) {
+    return function PriceSectionOverride({ product }) {
+        const { price, salePrice } = product;
+        if (price == null)
+            return null;
+        return (React.createElement("div", { className: 'cio-product-card-price-section flex items-baseline gap-2' },
+            React.createElement("span", { className: 'text-lg font-bold' },
+                priceCurrency,
+                "\u00A0",
+                salePrice ?? price),
+            salePrice != null && (React.createElement("span", { className: 'text-sm text-gray-400 line-through' },
+                priceCurrency,
+                "\u00A0",
+                price))));
+    };
+}
+function getContentDefaults(content, priceSectionOverride) {
+    const defaults = {};
+    if (!content?.description) {
+        defaults.description = { reactNode: HtmlDescription };
+    }
+    if (!content?.price && priceSectionOverride) {
+        defaults.price = { reactNode: priceSectionOverride };
+    }
+    return defaults;
+}
+function buildMergedOverrides(componentOverrides, priceSectionOverride) {
+    const content = componentOverrides?.item?.productCard?.content;
+    const defaults = getContentDefaults(content, priceSectionOverride);
+    if (Object.keys(defaults).length === 0) {
+        return componentOverrides || {};
+    }
+    return {
+        ...componentOverrides,
+        item: {
+            ...componentOverrides?.item,
+            productCard: {
+                ...componentOverrides?.item?.productCard,
+                content: {
+                    ...content,
+                    ...defaults,
+                },
+            },
+        },
+    };
+}
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }) {
     const wrapperRef = useRef(null);
+    const { onAddToCart } = callbacks || {};
+    const addToCartHandler = useCallback((event, product) => {
+        onAddToCart?.(product, event);
+    }, [onAddToCart]);
     // Determine to use user-defined click handler or default behavior
     const productClickHandler = useCallback((item) => {
         const position = items.findIndex((i) => i.id === item.id);
@@ -39,24 +90,27 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
             el.removeEventListener(CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
+    const priceSectionOverride = useMemo(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
     const mergedOverrides = useMemo(() => {
-        if (componentOverrides?.item?.productCard?.content?.description) {
-            return componentOverrides;
+        const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        const cardOverrides = baseOverrides.item?.productCard;
+        // The carousel never passes onAddToCart down and the card hides the button without it, so
+        // re-render the card with the handler. A full card override owns its own layout - skip it.
+        if (!onAddToCart || cardOverrides?.reactNode) {
+            return baseOverrides;
         }
+        const addToCartText = translate('Add to Cart', translations);
         return {
-            ...componentOverrides,
+            ...baseOverrides,
             item: {
-                ...componentOverrides?.item,
+                ...baseOverrides.item,
                 productCard: {
-                    ...componentOverrides?.item?.productCard,
-                    content: {
-                        ...componentOverrides?.item?.productCard?.content,
-                        description: { reactNode: HtmlDescription },
-                    },
+                    ...cardOverrides,
+                    reactNode: ({ product }) => (React.createElement(ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })),
                 },
             },
         };
-    }, [componentOverrides]);
+    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;

package/lib/mjs/components/ConversationHistory/ConversationHistory.js

@@ -5,7 +5,7 @@ import Disclaimer from '../CioPia/Disclaimer';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, }) {
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
     const scrollContainerRef = useRef(null);
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -31,7 +31,7 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
                 isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
                 entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
                     React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
-                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId })),
+                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
                     isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides?.feedback }))))));
         })),
         disclaimerPosition === 'bottom' && disclaimer));

package/lib/mjs/components/PiaConversation/PiaConversation.js

@@ -4,11 +4,11 @@ import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/Suggeste
 import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
 import { translate } from '../../utils/translate';
 import ConversationHistory from '../ConversationHistory/ConversationHistory';
-export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, }) {
+export default 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.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations))),
-        React.createElement(ConversationHistory, { 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 }),
+        React.createElement(ConversationHistory, { 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.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
             !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),

package/lib/mjs/components/PiaInlineAnswer/PiaInlineAnswer.js

@@ -3,12 +3,12 @@ import Answer from '../Answer/Answer';
 import Feedback from '../Feedback/Feedback';
 import Disclaimer from '../CioPia/Disclaimer';
 import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
-export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, }) {
+export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, priceCurrency, }) {
     const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     return (React.createElement("div", { className: 'cio-pia-answer-container' },
         disclaimerPosition === 'top' && disclaimer,
         React.createElement(Answer, { text: currentAnswer, componentOverride: componentOverrides?.answer }),
-        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId })),
+        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
         showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: onFeedback || callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/mjs/hooks/mocks/MockConstructorIOClient.js

@@ -10,29 +10,29 @@ class MockConstructorIOClient {
     quizzes;
     agent;
     constructor(options) {
-        this.options = {
+        const isServer = typeof window === 'undefined' || typeof document === 'undefined';
+        const clientOptions = {
             version: options.version || `cio-ui-pia-${version}`,
             serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com',
             quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com',
             agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com',
-            sessionId: options.sessionId || 0,
-            clientId: options.clientId || 'this-is-a-random-client-id',
+            ...(isServer && {
+                clientId: options.clientId || 'this-is-a-random-client-id',
+            }),
             sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true,
             beaconMode: options.beaconMode !== undefined ? options.beaconMode : true,
             networkParameters: options.networkParameters || {},
             ...options,
         };
-        const cioClient = new ConstructorioClient(this.options);
+        const cioClient = new ConstructorioClient(clientOptions);
+        const { clientId, sessionId } = cioClient.agent.options;
+        this.options = { ...clientOptions, clientId, sessionId };
         this.search = cioClient.search;
         this.browse = cioClient.browse;
         this.recommendations = cioClient.recommendations;
         this.tracker = cioClient.tracker;
         this.quizzes = cioClient.quizzes;
-        this.agent = new MockAgent({
-            ...this.options,
-            clientId: options.clientId,
-            sessionId: options.sessionId,
-        });
+        this.agent = new MockAgent(this.options);
     }
 }
 export default MockConstructorIOClient;

package/lib/mjs/utils/translate.js

@@ -7,6 +7,7 @@ const defaultTranslations = {
     'Is this answer useful?': 'Is this answer useful?',
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
+    'Add to Cart': 'Add to Cart',
 };
 /**
  * Translates a word using the provided translations object.

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.9.0';
+export default '2.10.1';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IncludeComponentOverrides, IncludeRenderProps } from '@constructor-io/constructorio-ui-components';
 import MockConstructorIOClient from '../../hooks/mocks/MockConstructorIOClient';
-import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters } from '../../types';
+import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters, ProductCardDisplayProps } from '../../types';
 export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, IncludeComponentOverrides<CioPiaComponentOverrides> {
     /** Your Constructor.io API key. */
     apiKey: string;
@@ -23,6 +23,8 @@ export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, Incl
     componentOverrides?: CioPiaComponentOverrides;
     /** Formatter functions for transforming data before display. */
     formatters?: Formatters;
+    /** Props forwarded to the ProductCard rendered inside the carousel. */
+    productCardProps?: ProductCardDisplayProps;
     /** UI string translations for internationalization. */
     translations?: Translations;
     /** Parameters for the suggested questions request. */

package/lib/types/components/CioPia/PiaCustomCarousel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CarouselOverrides } from '@constructor-io/constructorio-ui-components';
-import { Callbacks, Item } from '../../types';
+import { Callbacks, Item, Translations } from '../../types';
 interface PiaCustomCarouselProps {
     items: Array<Item>;
     componentOverrides?: CarouselOverrides<Item>;
@@ -8,6 +8,8 @@ interface PiaCustomCarouselProps {
     onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
     question?: string;
     qnaResultId?: string;
+    translations?: Translations;
+    priceCurrency?: string;
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, }: PiaCustomCarouselProps): React.JSX.Element | null;
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }: PiaCustomCarouselProps): React.JSX.Element | null;
 export {};

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

@@ -25,5 +25,6 @@ export interface ConversationHistoryProps {
     handleFeedback?: (type: FeedbackType) => void;
     onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
     qnaResultId?: string;
+    priceCurrency?: string;
 }
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, }: ConversationHistoryProps): React.JSX.Element;
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }: ConversationHistoryProps): React.JSX.Element;

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

@@ -11,4 +11,4 @@ export interface PiaConversationProps extends ConversationHistoryProps {
     qnaResultId?: string;
     onInputFocus?: () => void;
 }
-export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, }: PiaConversationProps): React.JSX.Element;
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, }: PiaConversationProps): React.JSX.Element;

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

@@ -13,6 +13,7 @@ interface PiaInlineAnswerProps {
     onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
     question?: string;
     qnaResultId?: string;
+    priceCurrency?: string;
 }
-export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, }: PiaInlineAnswerProps): React.JSX.Element;
+export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, priceCurrency, }: PiaInlineAnswerProps): React.JSX.Element;
 export {};

package/lib/types/types.d.ts

@@ -59,6 +59,7 @@ export type Translations = {
     'Is this answer useful?'?: string;
     'Learn More.'?: string;
     'Ask about this product'?: string;
+    'Add to Cart'?: string;
 };
 export type QuestionSource = 'user' | 'suggestion';
 export interface PiaCallbackContext {
@@ -70,6 +71,12 @@ export interface Callbacks {
     onQuestionSubmit?: (question: string, context: PiaCallbackContext, source: QuestionSource) => void;
     /** Called when a product card in the carousel is clicked. */
     onProductCardClick?: (item: Item) => void;
+    /**
+     * Called when the "Add to Cart" button on a product card is clicked.
+     * Providing this callback is what renders the button.
+     * Clicking the button does not fire `onProductCardClick`.
+     */
+    onAddToCart?: (item: Item, event: React.MouseEvent) => void;
     /** Called when the user submits positive or negative feedback on an answer. */
     onFeedback?: (type: FeedbackType) => void;
     /** Called when a new answer is received. Passes the full conversation history. */
@@ -86,6 +93,14 @@ export interface Formatters {
     /** Transforms image URLs before rendering (e.g., prepend a CDN base URL). */
     formatImageUrl?: (url: string) => string;
 }
+/** Props forwarded to the ProductCard rendered inside the carousel. */
+export interface ProductCardDisplayProps {
+    /**
+     * Currency symbol to display next to product prices (e.g., "€", "£").
+     * When omitted, the default ProductCard price rendering is used.
+     */
+    priceCurrency?: string;
+}
 /** Extends Product type to include PIA-specific fields */
 export interface Item extends Product, Record<string, any> {
     url?: string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.9.0";
+declare const _default: "2.10.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -26,8 +26,10 @@
   "module": "lib/mjs/index.js",
   "exports": {
     "./styles.css": {
+      "style": "./lib/mjs/styles.css",
       "import": "./lib/mjs/styles.css",
-      "require": "./lib/cjs/styles.css"
+      "require": "./lib/cjs/styles.css",
+      "default": "./lib/mjs/styles.css"
     },
     "./constructorio-ui-pia-bundled": {
       "import": "./dist/constructorio-ui-pia-bundled.js",