@constructor-io/constructorio-ui-pia 2.14.0 → 2.16.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, initialConversationHistory, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -45,7 +46,14 @@ function CioPiaQna(props) {
         variationId,
         threadId: pia.threadId,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks, tracking });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = (0, useConversation_1.default)({
+        pia,
+        itemId,
+        isConversation,
+        callbacks,
+        tracking,
+        initialConversationHistory,
+    });
     const { containerRef: viewportContainerRef } = (0, useViewportTracking_1.default)({
         tracking,
         questions: displayedQuestions,
@@ -73,12 +81,15 @@ 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,
-        currentItems,
+        checkoutElement,
+        // Until a live answer arrives, a seeded last entry shows its own items. `null` would hide them.
+        currentItems: pia.answers.data ? currentItems : undefined,
         showFeedback,
         showPreviousItems,
         learnMoreUrl,
@@ -111,7 +122,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/ConversationHistory/ConversationHistory.js

@@ -22,11 +22,16 @@ function ConversationHistory({ conversationHistory, isLoading, isAnswerLoading =
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
     const lastEntry = conversationHistory[conversationHistory.length - 1];
-    const answerStatus = (0, StatusRegion_1.answerStatusMessage)(isAnswerLoading, !!(lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.answer), translations);
+    // An entry answered before mount (a restored conversation) was not just answered: announcing
+    // "Answer ready" on page load would tell the shopper something happened when nothing did.
+    const [answeredOnMountId] = (0, react_1.useState)(() => ((lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.answer) ? lastEntry.id : undefined));
+    const hasNewAnswer = !!(lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.answer) && lastEntry.id !== answeredOnMountId;
+    const answerStatus = (0, StatusRegion_1.answerStatusMessage)(isAnswerLoading, hasNewAnswer, translations);
     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-conversation-history' },
         disclaimerPosition === 'top' && disclaimer,
         react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', tabIndex: 0, "aria-label": (0, translate_1.translate)('Conversation history', translations) }, conversationHistory.map((entry, index) => {
+            var _a;
             const isLast = index === conversationHistory.length - 1;
             const previousEntryItems = showPreviousItems ? entry.items : null;
             const latestEntryItems = currentItems !== undefined ? currentItems : entry.items;
@@ -38,7 +43,7 @@ function ConversationHistory({ conversationHistory, isLoading, isAnswerLoading =
                 isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { key: error.message || (0, translate_1.translate)('Unexpected error', translations), message: error.message, translations: translations, announce: false })),
                 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, translations: translations, priceCurrency: priceCurrency })),
+                    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: (_a = entry.qnaResultId) !== null && _a !== void 0 ? _a : (isLast ? qnaResultId : undefined), 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,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/useConversation.js

@@ -1,15 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useConversation({ pia, itemId, isConversation, callbacks, tracking, }) {
+function isRestorableEntry(entry) {
+    if (typeof entry !== 'object' || entry === null)
+        return false;
+    const { question, answer, items } = entry;
+    return (typeof question === 'string' &&
+        typeof answer === 'string' &&
+        (items === undefined || items === null || Array.isArray(items)));
+}
+// The seed comes from the host's own storage, typed or not: a malformed one must not take the widget down.
+function restoreHistory(seed) {
+    if (!Array.isArray(seed)) {
+        console.warn('[CioPia] initialConversationHistory must be an array. It was ignored.');
+        return [];
+    }
+    const entries = seed.filter(isRestorableEntry);
+    if (entries.length < seed.length) {
+        console.warn(`[CioPia] ${seed.length - entries.length} initialConversationHistory entries were ignored. Each needs a string question and answer, and items must be an array.`);
+    }
+    // Seeded ids are replaced: `id` is the React key, so a caller's values cannot be trusted to be unique.
+    return entries.map((entry, index) => (Object.assign(Object.assign({}, entry), { id: index + 1 })));
+}
+function useConversation({ pia, itemId, isConversation, callbacks, tracking, initialConversationHistory, }) {
     var _a, _b, _c;
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
     const context = (0, react_1.useMemo)(() => ({ itemId, threadId }), [itemId, threadId]);
     const [currentQuestion, setCurrentQuestion] = (0, react_1.useState)('');
     const [displayedQuestions, setDisplayedQuestions] = (0, react_1.useState)([]);
-    const [conversationHistory, setConversationHistory] = (0, react_1.useState)([]);
-    const entryIdRef = (0, react_1.useRef)(0);
+    const [conversationHistory, setConversationHistory] = (0, react_1.useState)(() => isConversation && initialConversationHistory !== undefined
+        ? restoreHistory(initialConversationHistory)
+        : []);
+    const entryIdRef = (0, react_1.useRef)(conversationHistory.length);
+    const conversationHistoryRef = (0, react_1.useRef)(conversationHistory);
+    const prevItemIdRef = (0, react_1.useRef)(itemId);
     const prevAnswerDataRef = (0, react_1.useRef)(answers.data);
     const hasTrackedCurrentAnswerRef = (0, react_1.useRef)(false);
     const answersRef = (0, react_1.useRef)(answers);
@@ -33,6 +58,9 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
     (0, react_1.useEffect)(() => {
         answersRef.current = answers;
     }, [answers]);
+    (0, react_1.useEffect)(() => {
+        conversationHistoryRef.current = conversationHistory;
+    }, [conversationHistory]);
     const submitQuestion = (0, react_1.useCallback)((question, source) => {
         lastSourceRef.current = source;
         lastQuestionRef.current = question;
@@ -63,9 +91,12 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
         (_c = (_b = callbacksRef.current) === null || _b === void 0 ? void 0 : _b.onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, contextRef.current);
     }, []);
     const handleFeedback = (0, react_1.useCallback)((type) => {
-        var _a, _b, _c, _d;
-        (_a = trackingRef.current) === null || _a === void 0 ? void 0 : _a.trackAnswerFeedback(type, (_b = answersRef.current.data) === null || _b === void 0 ? void 0 : _b.qna_result_id);
-        (_d = (_c = callbacksRef.current) === null || _c === void 0 ? void 0 : _c.onFeedback) === null || _d === void 0 ? void 0 : _d.call(_c, type);
+        var _a, _b, _c, _d, _e, _f;
+        // A seeded last entry has no live response behind it; its own id is the answer rated.
+        const history = conversationHistoryRef.current;
+        const qnaResultId = (_b = (_a = answersRef.current.data) === null || _a === void 0 ? void 0 : _a.qna_result_id) !== null && _b !== void 0 ? _b : (_c = history[history.length - 1]) === null || _c === void 0 ? void 0 : _c.qnaResultId;
+        (_d = trackingRef.current) === null || _d === void 0 ? void 0 : _d.trackAnswerFeedback(type, qnaResultId);
+        (_f = (_e = callbacksRef.current) === null || _e === void 0 ? void 0 : _e.onFeedback) === null || _f === void 0 ? void 0 : _f.call(_e, type);
     }, []);
     const resetState = (0, react_1.useCallback)(() => {
         setCurrentQuestion('');
@@ -75,6 +106,10 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
         showsFollowUpsRef.current = false;
     }, [suggestedQuestions.data]);
     (0, react_1.useEffect)(() => {
+        // Skip the mount run: it would wipe the seeded history.
+        if (prevItemIdRef.current === itemId)
+            return;
+        prevItemIdRef.current = itemId;
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);

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.16.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, initialConversationHistory, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -41,7 +42,14 @@ export default function CioPiaQna(props) {
         variationId,
         threadId: pia.threadId,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = useConversation({ pia, itemId, isConversation, callbacks, tracking });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, handleFeedback, resetState, } = useConversation({
+        pia,
+        itemId,
+        isConversation,
+        callbacks,
+        tracking,
+        initialConversationHistory,
+    });
     const { containerRef: viewportContainerRef } = useViewportTracking({
         tracking,
         questions: displayedQuestions,
@@ -69,12 +77,15 @@ 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,
-        currentItems,
+        checkoutElement,
+        // Until a live answer arrives, a seeded last entry shows its own items. `null` would hide them.
+        currentItems: pia.answers.data ? currentItems : undefined,
         showFeedback,
         showPreviousItems,
         learnMoreUrl,
@@ -107,6 +118,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/ConversationHistory/ConversationHistory.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Answer from '../Answer/Answer';
 import Feedback from '../Feedback/Feedback';
 import Disclaimer from '../CioPia/Disclaimer';
@@ -19,7 +19,11 @@ export default function ConversationHistory({ conversationHistory, isLoading, is
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
     const lastEntry = conversationHistory[conversationHistory.length - 1];
-    const answerStatus = answerStatusMessage(isAnswerLoading, !!lastEntry?.answer, translations);
+    // An entry answered before mount (a restored conversation) was not just answered: announcing
+    // "Answer ready" on page load would tell the shopper something happened when nothing did.
+    const [answeredOnMountId] = useState(() => (lastEntry?.answer ? lastEntry.id : undefined));
+    const hasNewAnswer = !!lastEntry?.answer && lastEntry.id !== answeredOnMountId;
+    const answerStatus = answerStatusMessage(isAnswerLoading, hasNewAnswer, translations);
     const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     return (React.createElement("div", { className: 'cio-pia-conversation-history' },
         disclaimerPosition === 'top' && disclaimer,
@@ -35,7 +39,7 @@ export default function ConversationHistory({ conversationHistory, isLoading, is
                 isLast && !isLoading && error && (React.createElement(ErrorBlock, { key: error.message || translate('Unexpected error', translations), message: error.message, translations: translations, announce: false })),
                 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, translations: translations, priceCurrency: priceCurrency })),
+                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: entry.qnaResultId ?? (isLast ? qnaResultId : undefined), 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,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/useConversation.js

@@ -1,12 +1,37 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-export default function useConversation({ pia, itemId, isConversation, callbacks, tracking, }) {
+function isRestorableEntry(entry) {
+    if (typeof entry !== 'object' || entry === null)
+        return false;
+    const { question, answer, items } = entry;
+    return (typeof question === 'string' &&
+        typeof answer === 'string' &&
+        (items === undefined || items === null || Array.isArray(items)));
+}
+// The seed comes from the host's own storage, typed or not: a malformed one must not take the widget down.
+function restoreHistory(seed) {
+    if (!Array.isArray(seed)) {
+        console.warn('[CioPia] initialConversationHistory must be an array. It was ignored.');
+        return [];
+    }
+    const entries = seed.filter(isRestorableEntry);
+    if (entries.length < seed.length) {
+        console.warn(`[CioPia] ${seed.length - entries.length} initialConversationHistory entries were ignored. Each needs a string question and answer, and items must be an array.`);
+    }
+    // Seeded ids are replaced: `id` is the React key, so a caller's values cannot be trusted to be unique.
+    return entries.map((entry, index) => ({ ...entry, id: index + 1 }));
+}
+export default function useConversation({ pia, itemId, isConversation, callbacks, tracking, initialConversationHistory, }) {
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
     const context = useMemo(() => ({ itemId, threadId }), [itemId, threadId]);
     const [currentQuestion, setCurrentQuestion] = useState('');
     const [displayedQuestions, setDisplayedQuestions] = useState([]);
-    const [conversationHistory, setConversationHistory] = useState([]);
-    const entryIdRef = useRef(0);
+    const [conversationHistory, setConversationHistory] = useState(() => isConversation && initialConversationHistory !== undefined
+        ? restoreHistory(initialConversationHistory)
+        : []);
+    const entryIdRef = useRef(conversationHistory.length);
+    const conversationHistoryRef = useRef(conversationHistory);
+    const prevItemIdRef = useRef(itemId);
     const prevAnswerDataRef = useRef(answers.data);
     const hasTrackedCurrentAnswerRef = useRef(false);
     const answersRef = useRef(answers);
@@ -30,6 +55,9 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     useEffect(() => {
         answersRef.current = answers;
     }, [answers]);
+    useEffect(() => {
+        conversationHistoryRef.current = conversationHistory;
+    }, [conversationHistory]);
     const submitQuestion = useCallback((question, source) => {
         lastSourceRef.current = source;
         lastQuestionRef.current = question;
@@ -57,7 +85,10 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         callbacksRef.current?.onFocus?.(contextRef.current);
     }, []);
     const handleFeedback = useCallback((type) => {
-        trackingRef.current?.trackAnswerFeedback(type, answersRef.current.data?.qna_result_id);
+        // A seeded last entry has no live response behind it; its own id is the answer rated.
+        const history = conversationHistoryRef.current;
+        const qnaResultId = answersRef.current.data?.qna_result_id ?? history[history.length - 1]?.qnaResultId;
+        trackingRef.current?.trackAnswerFeedback(type, qnaResultId);
         callbacksRef.current?.onFeedback?.(type);
     }, []);
     const resetState = useCallback(() => {
@@ -68,6 +99,10 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         showsFollowUpsRef.current = false;
     }, [suggestedQuestions.data]);
     useEffect(() => {
+        // Skip the mount run: it would wipe the seeded history.
+        if (prevItemIdRef.current === itemId)
+            return;
+        prevItemIdRef.current = itemId;
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);

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.16.0';