@constructor-io/constructorio-ui-pia 2.13.1 → 2.15.0

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const translate_1 = require("../../utils/translate");
+function CheckoutTriggerBar({ triggers, state, translations, }) {
+    const visible = triggers.filter((t) => (t.triggerWhen ? t.triggerWhen(state) : true));
+    if (visible.length === 0)
+        return null;
+    return (react_1.default.createElement("div", { className: 'cio-pia-checkout-triggers', "data-testid": 'cio-pia-checkout-triggers' }, visible.map((trigger) => {
+        var _a;
+        const label = (_a = trigger.label) !== null && _a !== void 0 ? _a : (0, translate_1.translate)('Checkout', translations);
+        const onClick = () => trigger.onTrigger(state);
+        if (trigger.renderButton) {
+            return (react_1.default.createElement(react_1.default.Fragment, { key: trigger.id }, trigger.renderButton({
+                onClick,
+                label,
+                disabled: trigger.disabled,
+                id: trigger.id,
+            })));
+        }
+        return (react_1.default.createElement("button", { key: trigger.id, type: 'button', className: 'cio-pia-checkout-trigger', "data-testid": `cio-pia-checkout-trigger-${trigger.id}`, disabled: trigger.disabled, onClick: onClick }, label));
+    })));
+}
+exports.default = CheckoutTriggerBar;

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

@@ -4,9 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const CioPiaQna_1 = tslib_1.__importDefault(require("./CioPiaQna"));
 const CioPiaRecs_1 = tslib_1.__importDefault(require("../CioPiaRecs/CioPiaRecs"));
+const CioPiaControl_1 = tslib_1.__importDefault(require("../CioPiaControl/CioPiaControl"));
 function CioPia(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const mode = (_b = (_a = props.displayConfigs) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : 'default';
+    // Before the mode dispatch: a control shopper gets no widget in any mode.
+    if ((_c = props.abTest) === null || _c === void 0 ? void 0 : _c.isControl) {
+        return react_1.default.createElement(CioPiaControl_1.default, Object.assign({}, props));
+    }
     if (mode === 'recommendations') {
         return react_1.default.createElement(CioPiaRecs_1.default, Object.assign({}, props));
     }

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

@@ -18,11 +18,12 @@ const PiaInlineAnswer_1 = tslib_1.__importDefault(require("../PiaInlineAnswer/Pi
 const PiaModal_1 = tslib_1.__importDefault(require("../PiaConversation/PiaModal"));
 const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/PiaConversation"));
 const StatusRegion_1 = tslib_1.__importStar(require("../StatusRegion/StatusRegion"));
+const CheckoutTriggerBar_1 = tslib_1.__importDefault(require("./CheckoutTriggerBar"));
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // eslint-disable-next-line complexity
 function CioPiaQna(props) {
     var _a;
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, checkoutTriggers, abTest, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -36,6 +37,7 @@ function CioPiaQna(props) {
         answerParameters,
         parameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
+        testCells: abTest === null || abTest === void 0 ? void 0 : abTest.testCells,
     });
     const tracking = (0, useTracking_1.default)({
         cioClient: pia.cioClient,
@@ -72,11 +74,13 @@ function CioPiaQna(props) {
         handleSubmitQuestion,
         conversationHistory,
     };
+    const checkoutElement = checkoutTriggers && checkoutTriggers.length > 0 ? (react_1.default.createElement(CheckoutTriggerBar_1.default, { triggers: checkoutTriggers, state: renderProps, translations: translations })) : null;
     const conversationHistoryProps = {
         conversationHistory,
         isLoading,
         isAnswerLoading,
         error,
+        checkoutElement,
         currentItems,
         showFeedback,
         showPreviousItems,
@@ -110,7 +114,8 @@ function CioPiaQna(props) {
             !isAnswerLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { key: error.message || (0, translate_1.translate)('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && 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 })),
             isLoading && 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 }))),
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            checkoutElement),
         react_1.default.createElement(StatusRegion_1.default, { message: answerStatus, "data-testid": 'answer-status' })));
 }
 exports.default = CioPiaQna;

package/lib/cjs/components/CioPia/CioPiaStyles.css

@@ -54,3 +54,36 @@
   outline: 2px solid #0f1324;
   outline-offset: 2px;
 }
+
+.cio-pia-checkout-triggers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.cio-pia-checkout-trigger {
+  background: #0f1324;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.cio-pia-checkout-trigger:hover {
+  opacity: 0.9;
+}
+
+.cio-pia-checkout-trigger:focus-visible {
+  outline: 2px solid #0f1324;
+  outline-offset: 2px;
+}
+
+.cio-pia-checkout-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/lib/cjs/components/CioPiaControl/CioPiaControl.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const usePiaClient_1 = tslib_1.__importDefault(require("../../hooks/usePiaClient"));
+const useTracking_1 = tslib_1.__importDefault(require("../../hooks/useTracking"));
+const useViewportTracking_1 = tslib_1.__importDefault(require("../../hooks/useViewportTracking"));
+const NO_QUESTIONS = [];
+/**
+ * What a control-group shopper gets instead of the widget: nothing to look at, but a node the
+ * view event can be tied to, so both arms of an A/B test are measured the same way.
+ *
+ * None of the question or answer hooks mount here, so the control arm cannot issue a request.
+ */
+function CioPiaControl(props) {
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, abTest, trackingConfigs } = props;
+    const { cioClient: client, threadId: resolvedThreadId } = (0, usePiaClient_1.default)({
+        apiKey,
+        threadId,
+        cioClient,
+        testCells: abTest === null || abTest === void 0 ? void 0 : abTest.testCells,
+    });
+    const tracking = (0, useTracking_1.default)({
+        cioClient: client,
+        itemId,
+        itemName,
+        variationId,
+        threadId: resolvedThreadId,
+    });
+    const { containerRef } = (0, useViewportTracking_1.default)({
+        tracking,
+        questions: NO_QUESTIONS,
+        viewThreshold: trackingConfigs === null || trackingConfigs === void 0 ? void 0 : trackingConfigs.viewThreshold,
+        awaitQuestions: false,
+    });
+    return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-control-placeholder', "data-testid": 'cio-pia-control-placeholder', style: { width: 1, height: 1, padding: 0, border: 0, margin: 0, overflow: 'hidden' }, "aria-hidden": 'true' }));
+}
+exports.default = CioPiaControl;

package/lib/cjs/components/CioPiaRecs/CioPiaRecs.js

@@ -20,8 +20,9 @@ const classNames_1 = require("../../utils/classNames");
  * that supplied its own root — `children` or `componentOverrides.reactNode` — still gets it in that
  * state, with `error` available, and decides what belongs there.
  */
+// eslint-disable-next-line complexity
 function CioPiaRecs(props) {
-    const { apiKey, itemId, threadId, variationId, cioClient, componentOverrides, callbacks, formatters, productCardProps, children, translations, recsPodParameters, } = props;
+    const { apiKey, itemId, threadId, variationId, cioClient, componentOverrides, callbacks, formatters, productCardProps, children, translations, recsPodParameters, abTest, } = props;
     const { priceCurrency } = productCardProps || {};
     const { showInput = true, numResults } = recsPodParameters || {};
     const { answer: answerOverride, carousel: carouselOverride, loading: loadingOverride, reactNode: rootOverride, } = componentOverrides || {};
@@ -29,6 +30,7 @@ function CioPiaRecs(props) {
         apiKey,
         threadId,
         cioClient,
+        testCells: abTest === null || abTest === void 0 ? void 0 : abTest.testCells,
     });
     const { title, items, refinement, isLoading, error, inputError, lastShopperInput, refine } = (0, useRecsPod_1.default)({
         itemId,

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

@@ -7,11 +7,12 @@ 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, priceCurrency, }) {
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     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, priceCurrency: priceCurrency }),
+        checkoutElement && react_1.default.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         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/PiaConversation/PiaConversationStyles.css

@@ -2,6 +2,11 @@
   max-height: var(--cio-pia-conversation-max-height);
 }
 
+.cio-pia-conversation-checkout {
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+
 .cio-pia-conversation-footer {
   display: flex;
   flex-direction: column;

package/lib/cjs/hooks/useCioPia.js

@@ -40,11 +40,12 @@ function mapDeprecatedParameters(params) {
     return hasEntries ? mapped : undefined;
 }
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, testCells, } = props;
     const { cioClient: client, threadId } = (0, usePiaClient_1.default)({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
+        testCells,
     });
     const mappedDeprecated = mapDeprecatedParameters(parameters);
     const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters

package/lib/cjs/hooks/usePiaClient.js

@@ -4,18 +4,25 @@ 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"));
-function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, }) {
+function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, testCells, }) {
     const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
+    const serializedTestCells = (0, react_1.useMemo)(() => JSON.stringify(testCells !== null && testCells !== void 0 ? testCells : null), [testCells]);
     const client = (0, react_1.useMemo)(() => {
         if (providedClient)
             return providedClient;
-        return new constructorio_client_javascript_1.default({
-            apiKey,
-            sendTrackingEvents: true,
-            version: `cio-ui-pia-${version_1.default}`,
-        });
-    }, [apiKey, providedClient]);
+        return new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-pia-${version_1.default}` }, (testCells && { testCells })));
+        // testCells is compared by serializedTestCells so an inline object does not rebuild the client
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiKey, providedClient, serializedTestCells]);
+    // A caller's client owns its own options, so say so rather than dropping these silently.
+    (0, react_1.useEffect)(() => {
+        if (!providedClient || !testCells || Object.keys(testCells).length === 0)
+            return;
+        console.warn('[CioPia] abTest.testCells is ignored when you supply your own cioClient. Set testCells on that client instead.');
+        // serializedTestCells stands in for testCells here too
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [providedClient, serializedTestCells]);
     return { cioClient: client, threadId };
 }
 exports.default = usePiaClient;

package/lib/cjs/hooks/useViewportTracking.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const FLUSH_INTERVAL_MS = 5 * 60 * 1000;
 const DEFAULT_VIEW_THRESHOLD = 0.5;
-function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW_THRESHOLD, }) {
+function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW_THRESHOLD, awaitQuestions = true, }) {
     const nodeRef = (0, react_1.useRef)(null);
     const observerRef = (0, react_1.useRef)(null);
     const intervalRef = (0, react_1.useRef)(null);
@@ -11,10 +11,14 @@ function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW
     const entryTimeRef = (0, react_1.useRef)(null);
     const questionsRef = (0, react_1.useRef)(questions);
     const trackingRef = (0, react_1.useRef)(tracking);
+    const awaitQuestionsRef = (0, react_1.useRef)(awaitQuestions);
+    (0, react_1.useEffect)(() => {
+        awaitQuestionsRef.current = awaitQuestions;
+    }, [awaitQuestions]);
     (0, react_1.useEffect)(() => {
         const questionsJustArrived = questionsRef.current.length === 0 && questions.length > 0;
         questionsRef.current = questions;
-        if (questionsJustArrived && entryTimeRef.current) {
+        if (awaitQuestionsRef.current && questionsJustArrived && entryTimeRef.current) {
             trackingRef.current.trackView(questions);
         }
     }, [questions]);
@@ -30,7 +34,8 @@ function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW
             });
             entryTimeRef.current = null;
         }
-        if (timespansRef.current.length > 0 && questionsRef.current.length > 0) {
+        const hasPayload = !awaitQuestionsRef.current || questionsRef.current.length > 0;
+        if (timespansRef.current.length > 0 && hasPayload) {
             trackingRef.current.trackViews(questionsRef.current, [...timespansRef.current]);
             timespansRef.current = [];
         }
@@ -39,7 +44,7 @@ function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW
         const observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 entryTimeRef.current = new Date().toISOString();
-                if (questionsRef.current.length > 0) {
+                if (!awaitQuestionsRef.current || questionsRef.current.length > 0) {
                     trackingRef.current.trackView(questionsRef.current);
                 }
             }

package/lib/cjs/stories/assets/storybook-styles.css

@@ -25,8 +25,8 @@ div.link-list {
   }
 }
 
-@media all and (-ms-high-contrast:none) {
-div.link-list {
+@media all and (-ms-high-contrast: none) {
+  div.link-list {
     display: -ms-grid;
     -ms-grid-columns: 1fr 1fr;
     -ms-grid-rows: 1fr 1fr;
@@ -38,20 +38,23 @@ a.link-item {
   padding: 20px;
   border: 1px solid #00000010;
   border-radius: 5px;
-  transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+  transition:
+    background 150ms ease-out,
+    border 150ms ease-out,
+    transform 150ms ease-out;
   color: #333333;
   display: flex;
   align-items: flex-start;
 }
 
 a.link-item:hover {
-  border-color: #1EA7FD50;
+  border-color: #1ea7fd50;
   transform: translate3d(0, -3px, 0);
   box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
 }
 
 a.link-item:active {
-  border-color: #1EA7FD;
+  border-color: #1ea7fd;
   transform: translate3d(0, 0, 0);
 }
 
@@ -81,8 +84,8 @@ span.badge {
   font-size: 11px;
   line-height: 12px;
   font-weight: 700;
-  background: #E7FDD8;
-  color: #66BF3C;
+  background: #e7fdd8;
+  color: #66bf3c;
   padding: 4px 12px;
   margin-right: 10px;
   vertical-align: top;
@@ -100,10 +103,9 @@ div.badge-wrapper code {
   display: inline-block;
 }
 
-
 .badge.tip {
-  background: #E7FDD8;
-  color: #66BF3C;
+  background: #e7fdd8;
+  color: #66bf3c;
 }
 
 .badge.note {

package/lib/cjs/version.js

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { translate } from '../../utils/translate';
+export default function CheckoutTriggerBar({ triggers, state, translations, }) {
+    const visible = triggers.filter((t) => (t.triggerWhen ? t.triggerWhen(state) : true));
+    if (visible.length === 0)
+        return null;
+    return (React.createElement("div", { className: 'cio-pia-checkout-triggers', "data-testid": 'cio-pia-checkout-triggers' }, visible.map((trigger) => {
+        const label = trigger.label ?? translate('Checkout', translations);
+        const onClick = () => trigger.onTrigger(state);
+        if (trigger.renderButton) {
+            return (React.createElement(React.Fragment, { key: trigger.id }, trigger.renderButton({
+                onClick,
+                label,
+                disabled: trigger.disabled,
+                id: trigger.id,
+            })));
+        }
+        return (React.createElement("button", { key: trigger.id, type: 'button', className: 'cio-pia-checkout-trigger', "data-testid": `cio-pia-checkout-trigger-${trigger.id}`, disabled: trigger.disabled, onClick: onClick }, label));
+    })));
+}

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import CioPiaQna from './CioPiaQna';
 import CioPiaRecs from '../CioPiaRecs/CioPiaRecs';
+import CioPiaControl from '../CioPiaControl/CioPiaControl';
 export default function CioPia(props) {
     const mode = props.displayConfigs?.mode ?? 'default';
+    // Before the mode dispatch: a control shopper gets no widget in any mode.
+    if (props.abTest?.isControl) {
+        return React.createElement(CioPiaControl, { ...props });
+    }
     if (mode === 'recommendations') {
         return React.createElement(CioPiaRecs, { ...props });
     }

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

@@ -15,10 +15,11 @@ import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
 import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
 import StatusRegion, { answerStatusMessage } from '../StatusRegion/StatusRegion';
+import CheckoutTriggerBar from './CheckoutTriggerBar';
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // eslint-disable-next-line complexity
 export default function CioPiaQna(props) {
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, checkoutTriggers, abTest, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -32,6 +33,7 @@ export default function CioPiaQna(props) {
         answerParameters,
         parameters,
         formatImageUrl: formatters?.formatImageUrl,
+        testCells: abTest?.testCells,
     });
     const tracking = useTracking({
         cioClient: pia.cioClient,
@@ -68,11 +70,13 @@ export default function CioPiaQna(props) {
         handleSubmitQuestion,
         conversationHistory,
     };
+    const checkoutElement = checkoutTriggers && checkoutTriggers.length > 0 ? (React.createElement(CheckoutTriggerBar, { triggers: checkoutTriggers, state: renderProps, translations: translations })) : null;
     const conversationHistoryProps = {
         conversationHistory,
         isLoading,
         isAnswerLoading,
         error,
+        checkoutElement,
         currentItems,
         showFeedback,
         showPreviousItems,
@@ -106,6 +110,7 @@ export default function CioPiaQna(props) {
             !isAnswerLoading && error && (React.createElement(ErrorBlock, { key: error.message || translate('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && 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 })),
             isLoading && React.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions }))),
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
+            checkoutElement),
         React.createElement(StatusRegion, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/mjs/components/CioPia/CioPiaStyles.css

@@ -54,3 +54,36 @@
   outline: 2px solid #0f1324;
   outline-offset: 2px;
 }
+
+.cio-pia-checkout-triggers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.cio-pia-checkout-trigger {
+  background: #0f1324;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.cio-pia-checkout-trigger:hover {
+  opacity: 0.9;
+}
+
+.cio-pia-checkout-trigger:focus-visible {
+  outline: 2px solid #0f1324;
+  outline-offset: 2px;
+}
+
+.cio-pia-checkout-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/lib/mjs/components/CioPiaControl/CioPiaControl.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import usePiaClient from '../../hooks/usePiaClient';
+import useTracking from '../../hooks/useTracking';
+import useViewportTracking from '../../hooks/useViewportTracking';
+const NO_QUESTIONS = [];
+/**
+ * What a control-group shopper gets instead of the widget: nothing to look at, but a node the
+ * view event can be tied to, so both arms of an A/B test are measured the same way.
+ *
+ * None of the question or answer hooks mount here, so the control arm cannot issue a request.
+ */
+export default function CioPiaControl(props) {
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, abTest, trackingConfigs } = props;
+    const { cioClient: client, threadId: resolvedThreadId } = usePiaClient({
+        apiKey,
+        threadId,
+        cioClient,
+        testCells: abTest?.testCells,
+    });
+    const tracking = useTracking({
+        cioClient: client,
+        itemId,
+        itemName,
+        variationId,
+        threadId: resolvedThreadId,
+    });
+    const { containerRef } = useViewportTracking({
+        tracking,
+        questions: NO_QUESTIONS,
+        viewThreshold: trackingConfigs?.viewThreshold,
+        awaitQuestions: false,
+    });
+    return (React.createElement("div", { ref: containerRef, className: 'cio-pia-control-placeholder', "data-testid": 'cio-pia-control-placeholder', style: { width: 1, height: 1, padding: 0, border: 0, margin: 0, overflow: 'hidden' }, "aria-hidden": 'true' }));
+}

package/lib/mjs/components/CioPiaRecs/CioPiaRecs.js

@@ -17,8 +17,9 @@ import { cx } from '../../utils/classNames';
  * that supplied its own root — `children` or `componentOverrides.reactNode` — still gets it in that
  * state, with `error` available, and decides what belongs there.
  */
+// eslint-disable-next-line complexity
 export default function CioPiaRecs(props) {
-    const { apiKey, itemId, threadId, variationId, cioClient, componentOverrides, callbacks, formatters, productCardProps, children, translations, recsPodParameters, } = props;
+    const { apiKey, itemId, threadId, variationId, cioClient, componentOverrides, callbacks, formatters, productCardProps, children, translations, recsPodParameters, abTest, } = props;
     const { priceCurrency } = productCardProps || {};
     const { showInput = true, numResults } = recsPodParameters || {};
     const { answer: answerOverride, carousel: carouselOverride, loading: loadingOverride, reactNode: rootOverride, } = componentOverrides || {};
@@ -26,6 +27,7 @@ export default function CioPiaRecs(props) {
         apiKey,
         threadId,
         cioClient,
+        testCells: abTest?.testCells,
     });
     const { title, items, refinement, isLoading, error, inputError, lastShopperInput, refine } = useRecsPod({
         itemId,

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

@@ -4,11 +4,12 @@ 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, priceCurrency, }) {
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     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, priceCurrency: priceCurrency }),
+        checkoutElement && React.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         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/PiaConversation/PiaConversationStyles.css

@@ -2,6 +2,11 @@
   max-height: var(--cio-pia-conversation-max-height);
 }
 
+.cio-pia-conversation-checkout {
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+
 .cio-pia-conversation-footer {
   display: flex;
   flex-direction: column;

package/lib/mjs/hooks/useCioPia.js

@@ -37,11 +37,12 @@ function mapDeprecatedParameters(params) {
     return hasEntries ? mapped : undefined;
 }
 export default function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, testCells, } = props;
     const { cioClient: client, threadId } = usePiaClient({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
+        testCells,
     });
     const mappedDeprecated = mapDeprecatedParameters(parameters);
     const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters

package/lib/mjs/hooks/usePiaClient.js

@@ -1,9 +1,10 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import version from '../version';
-export default function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, }) {
+export default function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, testCells, }) {
     const [generatedThreadId] = useState(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
+    const serializedTestCells = useMemo(() => JSON.stringify(testCells ?? null), [testCells]);
     const client = useMemo(() => {
         if (providedClient)
             return providedClient;
@@ -11,7 +12,18 @@ export default function usePiaClient({ apiKey, threadId: providedThreadId, cioCl
             apiKey,
             sendTrackingEvents: true,
             version: `cio-ui-pia-${version}`,
+            ...(testCells && { testCells }),
         });
-    }, [apiKey, providedClient]);
+        // testCells is compared by serializedTestCells so an inline object does not rebuild the client
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiKey, providedClient, serializedTestCells]);
+    // A caller's client owns its own options, so say so rather than dropping these silently.
+    useEffect(() => {
+        if (!providedClient || !testCells || Object.keys(testCells).length === 0)
+            return;
+        console.warn('[CioPia] abTest.testCells is ignored when you supply your own cioClient. Set testCells on that client instead.');
+        // serializedTestCells stands in for testCells here too
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [providedClient, serializedTestCells]);
     return { cioClient: client, threadId };
 }