@financial-times/qanda-ui 0.0.1-beta.25 → 0.0.1-beta.27

package/README.md

@@ -94,7 +94,7 @@ import QandaBlock from '@financial-times/qanda-ui';
   body={body}
   children={answers}
   byline={byeline}
-  subtitle={lorem}
+  summary={lorem}
 />;
 ```
 

package/dist/cjs/components/Calendar/Apps.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const qanda_1 = require("../../config/qanda");
+const tracking_1 = require("../../utils/tracking");
 function formatDateForIcs(date) {
     return date.replace(/-|:|\.\d+/g, '');
 }
@@ -11,7 +12,9 @@ function createIcsFile(title, startDateTime, endDateTime, url) {
   `.trim();
     return URL.createObjectURL(new Blob([icsContent], { type: 'title/calendar' }));
 }
-const CalendarLink = ({ href, children, }) => ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: children }));
+const CalendarLink = ({ href, children, }) => {
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", role: "menuitem", "data-trackable": (0, tracking_1.trackingNS)('calendar-link'), className: "live-qa-calendar-list__item__link", children: children }));
+};
 function itemChildren(name, icon) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__text", children: name })] }));
 }
@@ -44,6 +47,6 @@ exports.default = apps.map(({ name, icon, getLink, isDownload }) => ({
     icon,
     link: ({ title, startDateTime, endDateTime, url, }) => {
         const href = getLink({ title, startDateTime, endDateTime, url });
-        return isDownload ? ((0, jsx_runtime_1.jsx)("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": "liveqa_calendar-link", className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : ((0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) }));
+        return isDownload ? ((0, jsx_runtime_1.jsx)("a", { href: href, download: "event.ics", role: "menuitem", "data-trackable": (0, tracking_1.trackingNS)('calendar-link-download'), className: "live-qa-calendar-list__item__link", children: itemChildren(name, icon) })) : ((0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) }));
     },
 }));

package/dist/cjs/components/Calendar/index.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const CalendarList_1 = __importDefault(require("./CalendarList"));
 const comments_api_1 = require("../../services/comments-api");
 const QandaProvider_1 = require("../QandaProvider");
+const tracking_1 = require("../../utils/tracking");
 function Calendar() {
     const [dropDownVisible, setDropDownVisible] = (0, react_1.useState)(false);
     const containerRef = (0, react_1.useRef)(null);
@@ -41,7 +42,7 @@ function Calendar() {
                         'aria-controls': 'menu',
                         id: 'live-qa-calendar-button-menu',
                         'data-testid': 'live-qa-calendar-button',
-                        'data-trackable': 'liveqa_add-to-calendar-button',
+                        'data-trackable': (0, tracking_1.trackingNS)('add-to-calendar-button'),
                     }, onClick: () => setDropDownVisible(!dropDownVisible) }), dropDownVisible && (0, jsx_runtime_1.jsx)(CalendarList_1.default, {})] })) }));
 }
 exports.default = Calendar;

package/dist/cjs/components/ErrorMessage/index.js

@@ -42,10 +42,7 @@ function ErrorMessage({ error, storyId, errorMapping = {}, operation = 'not-spec
         // Critical operation are tracked by the reliability service using AWS RUM
         // We still log this to monitor untracked messages to the users.
         (0, tracking_1.trackEvent)({
-            category: 'component',
-            action: 'act',
             content: {
-                asset_type: 'article',
                 uuid: storyId,
             },
             trigger_action: operation,

package/dist/cjs/components/Expander/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 const o3_button_1 = require("@financial-times/o3-button");
+const tracking_1 = require("../../utils/tracking");
 // Generic debounce function
 function debounce(func, delay) {
     let timerId;
@@ -59,7 +60,7 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
     const componentClassName = `${expandCollapseClass} ${className}`;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `${componentClassName}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `expander__text ${requiresExpander ? 'expander__text--multiline' : ''}`, id: expanderContentID, ref: textRef, children: (0, jsx_runtime_1.jsx)(EnsureParagraph, { children: children }) }), requiresExpander && ((0, jsx_runtime_1.jsx)(o3_button_1.Button, { label: label, type: "ghost", theme: "neutral", icon: state === 'expanded' ? 'chevron-up' : 'chevron-down', iconOnly: false, iconPosition: "end", attributes: {
                     className: 'expander__link',
-                    'data-trackable': `liveqa_expander`,
+                    'data-trackable': (0, tracking_1.trackingNS)('expander'),
                     'data-trackable-context-action': label,
                     'aria-expanded': state === 'expanded' ? true : false,
                     'aria-controls': expanderContentID,

package/dist/cjs/components/FloatingActionBar/index.js

@@ -10,10 +10,11 @@ const comments_api_1 = require("../../services/comments-api");
 const updateComments_1 = require("../../store/updateComments");
 const react_1 = require("react");
 const QandaProvider_1 = require("../QandaProvider");
+const tracking_1 = require("../../utils/tracking");
 function LiveIndicator() {
     return ((0, jsx_runtime_1.jsx)("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: (0, jsx_runtime_1.jsx)("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }));
 }
-function FloatingActionBar({ showLiveIndicator = true, }) {
+function FloatingActionBar({ isLive = true }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const isMobile = (0, useIsMobile_1.useIsMobile)();
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
@@ -21,39 +22,41 @@ function FloatingActionBar({ showLiveIndicator = true, }) {
         storyId,
         useStaging,
         commentsAPIUrl,
+    }, {
+        skip: !isLive,
     });
     const handleShowUpdates = () => {
         (0, updateComments_1.updateComments)(dispatch, updatedComments, storyId, useStaging, commentsAPIUrl);
-        // Scrolling to start of qanda blocks container
-        const element = document.getElementById('qanda__blocks-container');
+        // Scrolling to start of qanda stream title
+        const element = document.getElementById('qanda__stream-title');
         if (element) {
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
     const showExpertView = (0, react_redux_1.useSelector)((state) => state.expert.expertView);
     const userConfig = {
-        descripton: 'Ask a question',
+        description: 'Ask a question',
         testIdSuffix: 'ask-a-question-button',
         onClick: () => dispatch((0, questionSlice_1.openForm)()),
         dataTrackable: 'open_question_form',
     };
     const expertConfig = {
-        descripton: 'Answer Q&A',
+        description: 'Answer Q&A',
         testIdSuffix: 'answer-a-qanda-button',
         onClick: () => dispatch((0, expertSlice_1.openExpertForm)()),
         dataTrackable: 'open_expert_drawer',
     };
     const view = showExpertView ? expertConfig : userConfig;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": "floating-action-bar", children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [showLiveIndicator && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
-                                    ariaLabel: view.descripton,
-                                    'data-trackable': view.dataTrackable,
-                                    'data-trackable-context-action': view.descripton,
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": (0, tracking_1.trackingNS)('floating-action-bar'), children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [isLive && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                    ariaLabel: view.description,
+                                    'data-trackable': (0, tracking_1.trackingNS)(view.dataTrackable),
+                                    'data-trackable-context-action': view.description,
                                     'data-testid': `floating-action-bar__${view.testIdSuffix}`,
-                                }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                }, label: view.description, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: 'Back to top',
-                                    'data-trackable': 'back_to_top',
+                                    'data-trackable': (0, tracking_1.trackingNS)('back_to_top'),
                                     'data-trackable-context-action': 'Back to top',
                                     'data-testid': 'floating-action-bar__back-to-top-button',
-                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));
+                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }
 exports.default = FloatingActionBar;

package/dist/cjs/components/QandaBlock/index.js

@@ -10,6 +10,7 @@ require("../Expander/index");
 const index_1 = __importDefault(require("../Expander/index"));
 const Author_1 = __importDefault(require("../Author"));
 const react_1 = require("react");
+const tracking_1 = require("../../utils/tracking");
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -23,7 +24,7 @@ function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', al
     const alpha = alphaStart + factor * (alphaEnd - alphaStart);
     return `rgba(${rgb.join(', ')}, ${alpha})`;
 }
-function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+function QandaBlock({ id, body, children, byline, summary, showAnswerTime = false, }) {
     (0, react_1.useEffect)(() => {
         let currentBubble = null;
         const factorRef = { current: 0 };
@@ -73,6 +74,6 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
             observer.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": "liveqa_question", children: [subtitle && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-subtitle", children: subtitle })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": "liveqa_answer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
 }
 exports.default = QandaBlock;

package/dist/cjs/components/QandaContainer.js

@@ -20,10 +20,10 @@ const QandaProvider_1 = require("./QandaProvider");
 const o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
 const comments_api_1 = require("../services/comments-api");
 const qanda_1 = require("../config/qanda");
+const tracking_1 = require("../utils/tracking");
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const dispatch = (0, react_redux_1.useDispatch)();
-    const [liveMessage, setLiveMessage] = (0, react_1.useState)('');
     const { data, error, isLoading } = (0, comments_api_1.useGetQandAStreamQuery)({
         storyId,
         useStaging,
@@ -76,15 +76,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             selector: '.qanda-container',
             getContextData: () => {
                 return {
-                    component: {
-                        name: 'liveqa',
-                        type: 'container',
-                        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-                    },
-                    content: {
-                        asset_type: 'article',
-                        uuid: storyId,
-                    },
+                    ...tracking_1.baseTrackingData,
                     custom: [
                         {
                             name: 'status',
@@ -95,6 +87,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             },
         });
     }, [data, status]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { isLive: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
 }
 exports.default = QandaContainer;

package/dist/cjs/components/QuestionForm/index.js

@@ -78,8 +78,9 @@ function QuestionForm() {
             if (updatedProfile?.displayName) {
                 // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
                 (0, tracking_1.trackEvent)({
-                    category: 'component',
-                    action: 'act',
+                    content: {
+                        uuid: storyId,
+                    },
                     trigger_action: 'success_set_displayname',
                 });
             }
@@ -113,13 +114,13 @@ function QuestionForm() {
     (0, jsx_runtime_1.jsxs)(Overlay_1.default, { title: "Ask a question", closeCallback: () => {
             setNewDisplayName(null);
             dispatch((0, questionSlice_1.closeForm)());
-        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": `liveqa_submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
+        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": (0, tracking_1.trackingNS)(`submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`), children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
                                             ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
-                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": `question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}` }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": (0, tracking_1.trackingNS)(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                 className: 'overlay__submit-button',
                                 type: 'submit',
                                 disabled: !submitEnabled,

package/dist/cjs/components/QuestionForm/messagesByUserType.js

@@ -5,6 +5,7 @@ exports.getTitleByUser = getTitleByUser;
 exports.getTextByUser = getTextByUser;
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const qanda_1 = require("../../config/qanda");
+const tracking_1 = require("../../utils/tracking");
 exports.SIGN_IN_URL = 'https://www.ft.com/login';
 exports.SUBSCRIBE_URL = 'https://subs.ft.com/products';
 exports.COMMUNITY_GUIDELINES_URL = 'https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines';
@@ -21,14 +22,14 @@ function getTitleByUser(profile) {
 }
 function getTextByUser(profile) {
     if (profile.isSubscribed) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__community-guidelines", "data-trackable-context-action": "Community guidelines", href: exports.COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__terms-and-conditions", "data-trackable-context-action": "Terms and conditions", href: exports.TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__community-guidelines'), "data-trackable-context-action": "Community guidelines", href: exports.COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__terms-and-conditions'), "data-trackable-context-action": "Terms and conditions", href: exports.TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
     }
     if (profile.isTrialist) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["View our full", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-trialist", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["View our full", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-trialist'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
     }
     if (profile.isRegistered) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-registered", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-registered'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
     }
     // Anonymous users
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__sign-in-anonymous", "data-trackable-context-action": "Sign in", href: exports.SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-anonymous", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__sign-in-anonymous'), "data-trackable-context-action": "Sign in", href: exports.SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('question-form__subscribe-anonymous'), "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
 }

package/dist/cjs/components/Stream/index.js

@@ -28,7 +28,7 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", children: data.status && data.status === 'pre-live'
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", id: "qanda__stream-title", children: data.status && data.status === 'pre-live'
                     ? 'Top questions so far'
                     : 'What our readers are asking' })), (0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && ((0, jsx_runtime_1.jsx)(Loader_1.default, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
                         data.qandas &&

package/dist/cjs/components/Survey/index.js

@@ -1,36 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const tracking_1 = require("../../utils/tracking");
 function Survey({ storyId, status }) {
-    const trackEvent = (trackingData) => {
-        const event = new CustomEvent('oTracking.event', {
-            detail: trackingData,
-            bubbles: true,
-        });
-        document.body.dispatchEvent(event);
-    };
-    const handleClick = () => {
-        trackEvent({
-            category: 'component',
-            component: {
-                name: 'liveqa',
-                type: 'container',
-                id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
-            },
-            action: 'act',
-            trigger_action: 'liveqa_survey_open',
-            content: {
-                asset_type: 'article',
-                uuid: storyId,
-            },
-            custom: [
-                {
-                    name: 'status',
-                    value: status,
-                },
-            ],
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "o-message__content", children: [(0, jsx_runtime_1.jsx)("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), (0, jsx_runtime_1.jsx)("div", { className: "o-message__actions", children: (0, jsx_runtime_1.jsx)("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, onClick: handleClick, className: "o-message__actions__primary", "data-trackable": "liveqa_survey_link", children: "Share your feedback" }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "o-message__content", children: [(0, jsx_runtime_1.jsx)("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), (0, jsx_runtime_1.jsx)("div", { className: "o-message__actions", children: (0, jsx_runtime_1.jsx)("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, className: "o-message__actions__primary", "data-trackable": (0, tracking_1.trackingNS)('survey_link'), children: "Share your feedback" }) })] }) }) }));
 }
 exports.default = Survey;

package/dist/cjs/services/comments-api.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUpdatedQA = exports.useUpdatedComments = exports.usePostQuestionMutation = exports.useGetUserRolesQuery = exports.useGetQandAUpdatesQuery = exports.useGetQandAStreamQuery = exports.nextCommentsApi = exports.eventSource = void 0;
+exports.useUpdatedQA = exports.useUpdatedComments = exports.usePostQuestionMutation = exports.useGetUserRolesQuery = exports.useGetQandAUpdatesQuery = exports.useGetQandAStreamQuery = exports.nextCommentsApi = exports.eventSource = exports.updateTypes = void 0;
 const react_1 = require("@reduxjs/toolkit/query/react");
-// TODO: ensure that users don't miss out on updates in this window
-// https://financialtimes.atlassian.net/browse/CI-2715
+const stream_1 = require("../store/stream");
+const reliability_1 = require("./reliability");
+// NB: this could do with a refactor to split things out into smaller files: see https://redux-toolkit.js.org/rtk-query/usage/code-splitting
+// NB: adding retry limit would be a good idea https://financialtimes.atlassian.net/browse/CI-2715
 const retryDelay = 1000;
-const updateTypes = {
+exports.updateTypes = {
     QA_NEW_REPLY: 'updatedComments',
     QA_UPDATE: 'updatedQA',
 };
@@ -37,13 +39,28 @@ exports.nextCommentsApi = (0, react_1.createApi)({
             queryFn: async ({ storyId, useStaging, commentsAPIUrl, }) => {
                 return { data: {} };
             },
-            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
+            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved, dispatch, getState, }) {
                 await cacheDataLoaded;
                 const connectToSSE = () => {
                     const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
                     exports.eventSource = new EventSource(sseEndpoint);
-                    exports.eventSource.onopen = () => {
+                    exports.eventSource.onopen = async () => {
                         console.log(`Connected to SSE: ${sseEndpoint}`);
+                        const state = getState();
+                        const lastEventId = state.stream.mostRecentUpdate;
+                        if (lastEventId !== null && lastEventId !== undefined) {
+                            try {
+                                await dispatch(exports.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                                    storyId: arg.storyId,
+                                    useStaging: arg.useStaging,
+                                    commentsAPIUrl: arg.commentsAPIUrl,
+                                    lastEventId: `${lastEventId}`,
+                                }));
+                            }
+                            catch (error) {
+                                reliability_1.qandaReliability.failure('qa-updates', error);
+                            }
+                        }
                     };
                     exports.eventSource.onmessage = (event) => {
                         try {
@@ -51,10 +68,14 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                             console.log('Received SSE update:', data);
                             if (data && data.type) {
                                 updateCachedData((draft) => {
-                                    const updatedData = updateTypes[data.type];
+                                    const updatedData = exports.updateTypes[data.type];
                                     draft[updatedData] = draft[updatedData] || [];
                                     draft[updatedData].push(data.payload);
                                 });
+                                // Store the lastEventId for use in reconnection
+                                if (event.lastEventId) {
+                                    dispatch((0, stream_1.setMostRecentUpdate)(event.lastEventId));
+                                }
                             }
                         }
                         catch (error) {
@@ -94,6 +115,19 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                 }
             },
         }),
+        // CATCHUP UPDATES
+        getCatchupUpdates: builder.query({
+            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => `${commentsAPIUrl}/story/${storyId}/catchup-updates?${useStaging ? 'staging=1&' : ''}${`lastEventId=${lastEventId}`}`,
+            transformResponse: (response) => {
+                const updatedComments = response?.comments.map((comment) => {
+                    return comment.data;
+                });
+                return {
+                    updatedComments,
+                    lastEventId: response?.lastEventId,
+                };
+            },
+        }),
         // USER ROLES
         getUserRoles: builder.query({
             query: ({ storyId, useStaging, commentsAPIUrl, token, }) => ({
@@ -130,11 +164,12 @@ exports.nextCommentsApi = (0, react_1.createApi)({
 exports.useGetQandAStreamQuery = exports.nextCommentsApi.useGetQandAStreamQuery, exports.useGetQandAUpdatesQuery = exports.nextCommentsApi.useGetQandAUpdatesQuery, exports.useGetUserRolesQuery = exports.nextCommentsApi.useGetUserRolesQuery, exports.usePostQuestionMutation = exports.nextCommentsApi.usePostQuestionMutation;
 // UPDATES QUERY CUSTOM HOOKS
 // custom hook for getting just the updated comments from the updates, so we are more efficient
-const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl, }) => {
+const useUpdatedComments = ({ storyId, useStaging, commentsAPIUrl }, options) => {
     return exports.nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
         selectFromResult: ({ data }) => ({
             updatedComments: data?.updatedComments || [],
         }),
+        skip: options?.skip || false,
     }).updatedComments;
 };
 exports.useUpdatedComments = useUpdatedComments;

package/dist/cjs/services/listeners-middleware.js

@@ -0,0 +1,103 @@
+"use strict";
+/**
+ * @fileoverview RTK Query listener middleware for Q&A stream events
+ *
+ * This module contains Redux Toolkit listeners that respond to RTK Query events
+ * and update the application state accordingly. Currently handles:
+ * - Tracking the most recent update timestamp from live Q&A streams
+ *
+ * @see https://redux-toolkit.js.org/api/createListenerMiddleware
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listenerMiddleware = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const comments_api_1 = require("./comments-api");
+const stream_1 = require("../store/stream");
+exports.listenerMiddleware = (0, toolkit_1.createListenerMiddleware)();
+/**
+ * Calculates the most recent update timestamp from a list of Q&A questions
+ *
+ * @param qandas - Array of Comment objects representing questions with nested answers
+ * @returns The timestamp (in milliseconds) of the most recent answer, 0 if no answers found
+ *
+ * @example
+ * const timestamp = getMostRecentUpdateTime(qandas);
+ * // Returns: 167253120 (example timestamp)
+ */
+// we have a v similar functin in src/utils/qandas.ts
+function getMostRecentUpdateTime(qandas) {
+    if (!qandas.length ||
+        !Array.isArray(qandas[0].children) ||
+        !qandas[0].children.length) {
+        return 0; // no answers or no content at all
+    }
+    // we should be getting the comments back in a date desc by most recent answer from the API
+    const mostRecentUpdate = qandas[0].children.reduce((mostRecent, answer) => {
+        const publishedDateTimestamp = new Date(answer.publishedDate).getTime();
+        return publishedDateTimestamp > mostRecent
+            ? publishedDateTimestamp
+            : mostRecent;
+    }, 0);
+    return mostRecentUpdate;
+}
+/**
+ * Listener: Updates most recent timestamp when live Q&A stream data is fetched
+ *
+ * Responds to successful getQandAStream queries with status='live' and extracts
+ * the most recent answer timestamp to store in Redux state. This timestamp is
+ * used for reconnection logic and catching up on missed updates.
+ *
+ * @listens nextCommentsApi.endpoints.getQandAStream.matchFulfilled
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+exports.listenerMiddleware.startListening({
+    matcher: (0, toolkit_1.isAnyOf)(comments_api_1.nextCommentsApi.endpoints.getQandAStream.matchFulfilled),
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl, status } = meta.arg.originalArgs;
+        // Check if this is a live stream QUERY, not response. If it is a live query we get questions and answers.
+        const isLiveStream = status === 'live';
+        if (isLiveStream && payload.qandas) {
+            const mostRecentUpdate = getMostRecentUpdateTime(payload.qandas);
+            // Update the store with the most recent update as a string
+            if (mostRecentUpdate !== undefined) {
+                console.log(`Setting most recent update for story ${storyId}: ${mostRecentUpdate}`);
+                listenerApi.dispatch((0, stream_1.setMostRecentUpdate)(`${mostRecentUpdate}`));
+            }
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                storyId: storyId,
+                useStaging: useStaging,
+                commentsAPIUrl: commentsAPIUrl,
+                lastEventId: `${mostRecentUpdate}`,
+            }));
+        }
+    },
+});
+/**
+ * Listener: Updates updates cache and most recent update when catchup comments are received
+ *
+ * Responds to successful getCatchupUpdates queries and adds them to the updates list
+ *
+ * @listens nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled
+ * @dispatches  nextCommentsApi.util.updateQueryData - Updates the cache of updated comments in the store
+ * @dispatches setMostRecentUpdate - Updates stream.mostRecentUpdate in Redux store
+ */
+exports.listenerMiddleware.startListening({
+    matcher: comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled,
+    effect: (action, listenerApi) => {
+        const { payload, meta } = action;
+        const { storyId, useStaging, commentsAPIUrl } = meta.arg.originalArgs;
+        const { updatedComments, lastEventId } = payload;
+        console.log('Received catchup updates, new event id:', lastEventId);
+        const updateType = comments_api_1.updateTypes['QA_NEW_REPLY'];
+        if (Array.isArray(updatedComments) && updatedComments.length) {
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                draft[updateType] = draft[updateType] || [];
+                draft[updateType].push(...updatedComments);
+            }));
+        }
+        if (typeof lastEventId === 'string') {
+            listenerApi.dispatch((0, stream_1.setMostRecentUpdate)(lastEventId));
+        }
+    },
+});

package/dist/cjs/store/index.js

@@ -12,6 +12,7 @@ const user_1 = require("./user");
 const expertSlice_1 = __importDefault(require("./expertSlice"));
 const comments_api_1 = require("../services/comments-api");
 const error_middleware_1 = require("../services/error-middleware");
+const listeners_middleware_1 = require("../services/listeners-middleware");
 exports.rootReducer = (0, toolkit_1.combineReducers)({
     stream: stream_1.stream.reducer,
     question: questionSlice_1.default,
@@ -22,6 +23,7 @@ exports.rootReducer = (0, toolkit_1.combineReducers)({
 exports.store = (0, toolkit_1.configureStore)({
     reducer: exports.rootReducer,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+        .prepend(listeners_middleware_1.listenerMiddleware.middleware)
         .concat(comments_api_1.nextCommentsApi.middleware)
         .concat(error_middleware_1.rtkQueryErrorLogger),
 });

package/dist/cjs/store/stream.js

@@ -1,9 +1,11 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
+exports.setMostRecentUpdate = exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 exports.initialState = {
     latestAnsweredQuestionId: '',
+    mostRecentUpdate: null,
 };
 exports.stream = (0, toolkit_1.createSlice)({
     name: 'stream',
@@ -12,6 +14,9 @@ exports.stream = (0, toolkit_1.createSlice)({
         setLatestAnsweredQuestionId: (state, action) => {
             state.latestAnsweredQuestionId = action.payload;
         },
+        setMostRecentUpdate: (state, action) => {
+            state.mostRecentUpdate = action.payload;
+        },
     },
 });
-exports.setLatestAnsweredQuestionId = exports.stream.actions.setLatestAnsweredQuestionId;
+_a = exports.stream.actions, exports.setLatestAnsweredQuestionId = _a.setLatestAnsweredQuestionId, exports.setMostRecentUpdate = _a.setMostRecentUpdate;