@constructor-io/constructorio-ui-pia 2.14.0 → 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/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, abTest, } = 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 || {};
@@ -73,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,
@@ -111,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/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/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.14.0';
+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/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, abTest, } = 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 || {};
@@ -69,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,
@@ -107,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/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/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/mjs/version.js

@@ -1 +1 @@
-export default '2.14.0';
+export default '2.15.0';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CioPiaRenderProps } from '../../types';
+import { translate } from '../../utils/translate';
+import type { CheckoutTrigger } from './types';
+interface CheckoutTriggerBarProps {
+    triggers: CheckoutTrigger[];
+    state: CioPiaRenderProps;
+    translations?: Parameters<typeof translate>[1];
+}
+export default function CheckoutTriggerBar({ triggers, state, translations, }: CheckoutTriggerBarProps): React.JSX.Element | null;
+export {};

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

@@ -1,4 +1,4 @@
 import CioPia from './CioPia';
 export * from './CioPia';
-export type { CioPiaProps } from './types';
+export type { CioPiaProps, CheckoutTrigger } from './types';
 export default CioPia;

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

@@ -1,6 +1,43 @@
+import { ReactNode } from 'react';
 import { IncludeComponentOverrides, IncludeRenderProps } from '@constructor-io/constructorio-ui-components';
 import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaAbTest, CioPiaDisplayConfigs, CioPiaTrackingConfigs, Translations, SuggestedQuestionsParameters, AnswerRequestParameters, RecsPodParameters, Formatters, ProductCardDisplayProps } from '../../types';
 import type { CioClient } from '../../hooks/usePiaClient';
+/**
+ * A single checkout entry point rendered inside the PIA `default` mode.
+ * The merchant owns the checkout flow itself (typically the `@constructor-io/constructorio-ui-checkout`
+ * `CheckoutFlowProvider`); PIA only surfaces the button(s) that start it.
+ */
+export interface CheckoutTrigger {
+    /** Stable identifier for the trigger — used as React key and forwarded to `renderButton`. */
+    id: string;
+    /** Button label. Defaults to "Checkout". */
+    label?: string;
+    /** Disables the button. Forwarded to `renderButton`, which is responsible for applying it. */
+    disabled?: boolean;
+    /**
+     * Predicate deciding whether this trigger should render. Called with the same
+     * render-props snapshot the `children`/`componentOverrides.reactNode` render callback
+     * receives, so consumers can gate on conversation state (e.g. "at least one answer
+     * shown", "at least two turns"). Defaults to always visible.
+     *
+     * `state.conversationHistory` is only filled in `conversation` mode and the modal; in
+     * `default` mode it stays empty, so gate on `currentAnswer` there.
+     */
+    triggerWhen?: (state: CioPiaRenderProps) => boolean;
+    /** Custom button renderer. When provided, `label` / `disabled` are passed through but styling is your call. */
+    renderButton?: (props: {
+        onClick: () => void;
+        label: string;
+        disabled?: boolean;
+        id: string;
+    }) => ReactNode;
+    /**
+     * Fires when the button is clicked. The merchant wires this to their checkout entry
+     * (e.g. `flow.start()` from `useCheckoutFlow`). Receives the render-props snapshot so
+     * the handler can seed the checkout with the current answer/items/conversation.
+     */
+    onTrigger: (state: CioPiaRenderProps) => void;
+}
 export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, IncludeComponentOverrides<CioPiaComponentOverrides> {
     /** Your Constructor.io API key. */
     apiKey: string;
@@ -28,6 +65,11 @@ export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, Incl
     formatters?: Formatters;
     /** Props forwarded to the ProductCard rendered inside the carousel. */
     productCardProps?: ProductCardDisplayProps;
+    /**
+     * One or more checkout entry points. Rendered in `default` and `conversation` modes and
+     * in the modal, after the answer; ignored in `recommendations` mode.
+     */
+    checkoutTriggers?: CheckoutTrigger[];
     /** UI string translations for internationalization. */
     translations?: Translations;
     /** Parameters for the suggested questions request. */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FeedbackType, Item, Question } from '../../types';
 import { ConversationHistoryProps } from '../ConversationHistory/ConversationHistory';
 export interface PiaConversationProps extends ConversationHistoryProps {
@@ -10,5 +10,6 @@ export interface PiaConversationProps extends ConversationHistoryProps {
     onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
     qnaResultId?: string;
     onInputFocus?: () => void;
+    checkoutElement?: ReactNode;
 }
-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;
+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, }: PiaConversationProps): React.JSX.Element;

package/lib/types/index.d.ts

@@ -1,6 +1,6 @@
 import CioPia from './components/CioPia';
 export { default as CioPia } from './components/CioPia';
-export type { CioPiaProps } from './components/CioPia';
+export type { CioPiaProps, CheckoutTrigger } from './components/CioPia';
 export { sanitizeHtml, renderMarkdown } from './utils/contentTransformers';
 export type { RenderMarkdownOptions, SanitizeOptions } from './utils/contentTransformers';
 export { AgentRequestError } from './errors';

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.14.0";
+declare const _default: "2.15.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",