@financial-times/qanda-ui 0.0.1-beta.9 → 1.0.0

package/dist/cjs/index.js

@@ -9,6 +9,7 @@ const preact_1 = require("preact");
 const Qanda_1 = __importDefault(require("./components/Qanda"));
 const QandaBlock_1 = __importDefault(require("./components/QandaBlock"));
 exports.QandaBlock = QandaBlock_1.default;
+const reliability_1 = require("./services/reliability");
 class QandaUI {
     constructor(containerElement, options) {
         this.containerElement = containerElement;
@@ -20,9 +21,8 @@ class QandaUI {
             throw new Error('Required properties are missing');
         }
         const storyId = options?.storyId ?? containerElement.dataset.qandaStoryid;
-        const useStaging = options?.useStaging ??
-            containerElement.dataset.qandaUsestaging === 'true' ??
-            false;
+        const stagingData = containerElement.dataset.qandaUsestaging === 'true' ? true : false;
+        const useStaging = options?.useStaging ?? stagingData;
         const title = options?.title ?? containerElement.dataset.qandaTitle;
         const commentsAPIHost = options?.commentsAPIHost ?? containerElement.dataset.qandaCommentsapihost;
         const commentsAPIVersion = options?.commentsAPIVersion ??
@@ -31,10 +31,15 @@ class QandaUI {
             (containerElement.dataset.qandaMaxquestionlength
                 ? parseInt(containerElement.dataset.qandaMaxquestionlength, 10)
                 : undefined) ??
-            2000;
+            300;
         if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
             throw new Error('Required properties are missing');
         }
+        // Track the articleId in every metric for reliability
+        // Do this as soon as possible
+        // as we need to set it before the first event is sent
+        // qandaReliability is a singleton, so the id is stored for future usages from other modules
+        reliability_1.qandaReliability.setArticleId(storyId);
         //TODO: test this doesn't break all the other bits of js, needs to be throw because of typescript, can't just bail out normally
         this.storyId = storyId;
         this.useStaging = useStaging;
@@ -46,7 +51,31 @@ class QandaUI {
     init() {
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(Qanda_1.default, { storyId: this.storyId, useStaging: this.useStaging, title: this.title, commentsAPIHost: this.commentsAPIHost, commentsAPIVersion: this.commentsAPIVersion, maxQuestionLength: this.maxQuestionLength, embedFormFieldContainer: this.embedFormFieldContainer, countdownTimerContainer: this.countdownTimerContainer }), this.containerElement);
     }
+    checkFooterVisibility(footerSelector) {
+        const footer = document.querySelector(footerSelector);
+        if (footer) {
+            this.footerObserver = new IntersectionObserver((entries) => {
+                const floatingActionBar = document.querySelector('.floating-action-bar__container');
+                if (floatingActionBar) {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting &&
+                            !floatingActionBar.classList.contains('o3-visually-hidden')) {
+                            floatingActionBar.classList.add('o3-visually-hidden');
+                        }
+                        else {
+                            floatingActionBar.classList.remove('o3-visually-hidden');
+                        }
+                    });
+                }
+            });
+            this.footerObserver.observe(footer);
+        }
+    }
     destroy() {
+        if (this.footerObserver) {
+            this.footerObserver.disconnect();
+            this.footerObserver = undefined;
+        }
         (0, preact_1.render)(null, this.containerElement);
     }
 }

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

@@ -1,14 +1,22 @@
 "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',
 };
+class MaintenanceModeError extends Error {
+    constructor() {
+        super('maintenanceMode');
+        this.name = 'maintenanceMode';
+    }
+}
 exports.eventSource = null;
 exports.nextCommentsApi = (0, react_1.createApi)({
     reducerPath: 'nextCommentsApi',
@@ -19,8 +27,13 @@ exports.nextCommentsApi = (0, react_1.createApi)({
     endpoints: (builder) => ({
         // QA STREAM
         getQandAStream: builder.query({
-            query: ({ storyId, useStaging, commentsAPIUrl }) => `${commentsAPIUrl}/story/${storyId}/stream${useStaging ? '?staging=1' : ''}`,
+            query: ({ storyId, useStaging, commentsAPIUrl, status, }) => 
+            // The usage of status is to create different caches (RTK and Fastly) for different statuses
+            `${commentsAPIUrl}/story/${storyId}/stream?status=${status}${useStaging ? '&staging=1' : ''}`,
             transformResponse: (response) => {
+                if (response.type === 'MAINTENANCE_MODE') {
+                    throw new MaintenanceModeError();
+                }
                 return {
                     qandas: response?.children || [],
                     type: response.type,
@@ -35,13 +48,26 @@ 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.mostRecentUpdateTime;
+                        try {
+                            await dispatch(exports.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                                storyId: arg.storyId,
+                                useStaging: arg.useStaging,
+                                commentsAPIUrl: arg.commentsAPIUrl,
+                                ...(lastEventId && { lastEventId: `${lastEventId}` }),
+                            }, { forceRefetch: true }));
+                        }
+                        catch (error) {
+                            reliability_1.qandaReliability.failure('qa-updates', error);
+                        }
                     };
                     exports.eventSource.onmessage = (event) => {
                         try {
@@ -49,10 +75,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.setMostRecentUpdateTime)(event.lastEventId));
+                                }
                             }
                         }
                         catch (error) {
@@ -92,6 +122,32 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                 }
             },
         }),
+        // CATCHUP UPDATES
+        getCatchupUpdates: builder.query({
+            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => {
+                const params = new URLSearchParams();
+                if (useStaging) {
+                    params.append('staging', '1');
+                }
+                if (lastEventId) {
+                    params.append('lastEventId', lastEventId);
+                }
+                const queryString = params.toString();
+                return `${commentsAPIUrl}/story/${storyId}/catchup-updates${queryString ? `?${queryString}` : ''}`;
+            },
+            transformResponse: (response) => {
+                const updatedComments = Array.isArray(response?.comments)
+                    ? response.comments.map((comment) => {
+                        return comment.data;
+                    })
+                    : [];
+                return {
+                    updatedComments,
+                    status: response?.status ?? null,
+                    lastEventId: response?.lastEventId ?? null,
+                };
+            },
+        }),
         // USER ROLES
         getUserRoles: builder.query({
             query: ({ storyId, useStaging, commentsAPIUrl, token, }) => ({
@@ -102,6 +158,9 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                 },
             }),
             transformResponse: (response, meta, arg) => {
+                if (response.type === 'MAINTENANCE_MODE') {
+                    throw new MaintenanceModeError();
+                }
                 const allowedRoles = ['ADMIN', 'MODERATOR'];
                 const { isExpert, isStaffExpert, role } = response;
                 const expertView = isExpert || isStaffExpert || !!(role && allowedRoles.includes(role));
@@ -110,16 +169,16 @@ exports.nextCommentsApi = (0, react_1.createApi)({
         }),
         // POST A QUESTION
         postQuestion: builder.mutation({
-            query: ({ storyId, useStaging, commentsAPIUrl, token, question, postAnonymously, }) => ({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, question, nudge = true, postAnonymously, }) => ({
                 url: `${commentsAPIUrl}/story/${storyId}/question${useStaging ? '?staging=1' : ''}`,
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     Authorization: `Bearer ${token}`,
                 },
-                body: JSON.stringify({ question, postAnonymously, token }),
+                body: JSON.stringify({ question, postAnonymously, token, nudge }),
             }),
-            transformResponse: (response, meta, arg) => {
+            transformResponse: (response) => {
                 return response.data;
             },
         }),
@@ -128,11 +187,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,170 @@
+"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 and answer id from a Q&A question
+ *
+ * @param qandas - A Comment object representing a question with nested answers
+ * @returns Object containing mostRecentUpdateTime (answer timestamp) and mostRecentUpdateId (answer id)
+ *
+ * @example
+ * const { mostRecentUpdateTime, mostRecentUpdateId } = getMostRecentUpdate(qandas);
+ * // Returns: { mostRecentUpdateTime: 167253120, mostRecentUpdateId: 'answer-123' }
+ */
+function getMostRecentUpdate(qandaComment) {
+    let mostRecentUpdateTime = 0;
+    let mostRecentUpdateId = '';
+    if (qandaComment.children && Array.isArray(qandaComment.children)) {
+        for (const answer of qandaComment?.children) {
+            const publishedDateTimestamp = new Date(answer.publishedDate).getTime();
+            if (publishedDateTimestamp > mostRecentUpdateTime) {
+                mostRecentUpdateTime = publishedDateTimestamp;
+                mostRecentUpdateId = answer.id;
+            }
+        }
+    }
+    return { mostRecentUpdateTime, mostRecentUpdateId };
+}
+/**
+ * Shallow compares two StreamStatus objects to determine if they are identical
+ *
+ * Performs a shallow comparison of all properties between the previous and new status
+ * entries. Used to prevent unnecessary updates when the status hasn't actually changed.
+ *
+ * @param previousEntry - The previous StreamStatus object to compare
+ * @param newEntry - The new StreamStatus object to compare against
+ * @returns True if all properties are identical, false otherwise
+ */
+function isSameStatus(previousEntry, newEntry) {
+    if (Object.keys(previousEntry).length !== Object.keys(newEntry).length) {
+        return false;
+    }
+    for (const key in previousEntry) {
+        const typedKey = key;
+        if (previousEntry[typedKey] !== newEntry[typedKey]) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Listener: Updates most recent timestamp and initiates catchup 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. Also automatically
+ * initiates a catchup request to get any updates that occurred since the last timestamp.
+ *
+ * @listens nextCommentsApi.endpoints.getQandAStream.matchFulfilled
+ * @dispatches setMostRecentUpdateTime - Updates stream.mostRecentUpdateTime in Redux store
+ * @dispatches setStreamStartMostRecentAnswerId - Updates stream.streamStartMostRecentAnswerId in Redux store
+ * @dispatches nextCommentsApi.endpoints.getCatchupUpdates.initiate - Triggers catchup request for missed updates
+ */
+// TODO: consider when this should run now that we have state changes too.
+// consider that it will run on every live stream query, not just the first one.
+// therefore it will happen on state change, and on first load maybe twice.
+exports.listenerMiddleware.startListening({
+    matcher: (0, toolkit_1.isAnyOf)(comments_api_1.nextCommentsApi.endpoints.getQandAStream.matchFulfilled),
+    effect: (action, listenerApi) => {
+        const state = listenerApi.getState();
+        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 will get questions and answers. This will fire when stream starts in live mode or switches to live mode for first time.
+        const isPreLiveStream = status === 'pre-live';
+        const isLiveStream = status === 'live';
+        if (isLiveStream &&
+            Array.isArray(payload.qandas) &&
+            payload.qandas.length > 0) {
+            const { mostRecentUpdateTime, mostRecentUpdateId } = getMostRecentUpdate(payload.qandas[0]);
+            // Update the store with the most recent update as a string
+            if (mostRecentUpdateTime !== undefined) {
+                console.log(`Setting most recent update for story ${storyId}: ${mostRecentUpdateTime}`);
+                listenerApi.dispatch((0, stream_1.setMostRecentUpdateTime)(`${mostRecentUpdateTime}`));
+                listenerApi.dispatch((0, stream_1.setStreamLoadMostRecentAnswerId)(mostRecentUpdateId));
+            }
+        }
+        const { mostRecentUpdateTime } = state.stream;
+        if (isPreLiveStream || isLiveStream) {
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                storyId,
+                useStaging,
+                commentsAPIUrl,
+                ...(mostRecentUpdateTime && {
+                    lastEventId: `${mostRecentUpdateTime}`,
+                }),
+            }));
+        }
+    },
+});
+/**
+ * Listener: Processes successful catchup updates and manages comment/status updates
+ *
+ * Responds to successful getCatchupUpdates queries and processes the response:
+ * - Adds new comments to the updates cache, filtering out duplicates
+ * - Updates status when changes are detected compared to the last status
+ * - Updates the most recent timestamp for future catchup requests
+ *
+ * @listens nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled
+ * @dispatches nextCommentsApi.util.updateQueryData - Updates the cache of updated comments in the store
+ * @dispatches setMostRecentUpdateTime - Updates stream.mostRecentUpdateTime with new lastEventId
+ * @dispatches nextCommentsApi.util.updateQueryData - Updates the status if it has changed
+ */
+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, status, lastEventId = null } = payload;
+        if (!updatedComments && !status)
+            return;
+        const state = listenerApi.getState();
+        // check for new updated comments
+        if (Array.isArray(updatedComments) && updatedComments.length > 0) {
+            const updateType = comments_api_1.updateTypes['QA_NEW_REPLY'];
+            const { streamLoadMostRecentAnswerId, mostRecentUpdateTime: mostRecentInStreamTime, } = state.stream;
+            // filter out catchup comments that are the same as the most recent update in the stream list, which can happen on first load when the valkey and coral response timestamps don't match
+            // there is latency between the comment being saved in coral and then added to our valkey stream. Updates after this will all come from valkey.
+            const filteredComments = updatedComments.filter((comment) => {
+                const { mostRecentUpdateId, mostRecentUpdateTime } = getMostRecentUpdate(comment);
+                if (streamLoadMostRecentAnswerId === mostRecentUpdateId &&
+                    mostRecentInStreamTime === `${mostRecentUpdateTime}`) {
+                    return false;
+                }
+                return true;
+            });
+            if (Array.isArray(filteredComments) && filteredComments.length) {
+                listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                    draft[updateType] = draft[updateType] || [];
+                    draft[updateType].push(...filteredComments);
+                }));
+            }
+            listenerApi.dispatch((0, stream_1.setMostRecentUpdateTime)(lastEventId));
+        }
+        // check for status updates
+        if (status) {
+            const updateType = comments_api_1.updateTypes['QA_UPDATE'];
+            listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                draft[updateType] = draft[updateType] || [];
+                // in order to avoid unnecessary updates, we check if the last update is identical to the new status. we only push changed status updates.
+                if (draft[updateType].length > 0 &&
+                    isSameStatus(draft[updateType].at(-1), status)) {
+                    return;
+                }
+                draft[updateType] = [status];
+            }));
+        }
+    },
+});

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,21 @@
 "use strict";
+/**
+ * Redux slice containing stream state and reducers.
+ *
+ * @remarks
+ * This slice provides actions to update:
+ * - latestAnsweredQuestionId: he ID for the question with the latest answer, used for scrolling to place
+ * - mostRecentUpdateTime: The timestamp or valkey ID of the most recent update
+ * - streamLoadMostRecentAnswerId: The ID of the most recent answer when you load the stream data
+ */
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
+exports.setStreamLoadMostRecentAnswerId = exports.setMostRecentUpdateTime = exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 exports.initialState = {
     latestAnsweredQuestionId: '',
+    mostRecentUpdateTime: null,
+    streamLoadMostRecentAnswerId: null,
 };
 exports.stream = (0, toolkit_1.createSlice)({
     name: 'stream',
@@ -12,6 +24,12 @@ exports.stream = (0, toolkit_1.createSlice)({
         setLatestAnsweredQuestionId: (state, action) => {
             state.latestAnsweredQuestionId = action.payload;
         },
+        setMostRecentUpdateTime: (state, action) => {
+            state.mostRecentUpdateTime = action.payload;
+        },
+        setStreamLoadMostRecentAnswerId: (state, action) => {
+            state.streamLoadMostRecentAnswerId = action.payload;
+        },
     },
 });
-exports.setLatestAnsweredQuestionId = exports.stream.actions.setLatestAnsweredQuestionId;
+_a = exports.stream.actions, exports.setLatestAnsweredQuestionId = _a.setLatestAnsweredQuestionId, exports.setMostRecentUpdateTime = _a.setMostRecentUpdateTime, exports.setStreamLoadMostRecentAnswerId = _a.setStreamLoadMostRecentAnswerId;

package/dist/cjs/store/updateComments.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateComments = void 0;
 const comments_api_1 = require("../services/comments-api");
-const stream_1 = require("../store/stream");
+const stream_1 = require("./stream");
 const qandas_1 = require("../utils/qandas");
 const updateComments = (dispatch, updatedComments, storyId, useStaging, commentsAPIUrl) => {
     if (!updatedComments.length) {
@@ -12,13 +12,18 @@ const updateComments = (dispatch, updatedComments, storyId, useStaging, comments
     const latestAnsweredQuestionId = (0, qandas_1.getLatestAnsweredQuestion)(updatedComments);
     try {
         // Update the cache with the new comments
-        dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAStream', { storyId, useStaging, commentsAPIUrl }, (draft) => {
-            // NB - if the same comment is updated more than once, the most recent thing added to the array will be the one that is shown
+        dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAStream', 
+        // Updates happen only for the live stream, so we pass the status as 'live' hardcoded
+        { storyId, useStaging, commentsAPIUrl, status: 'live' }, (draft) => {
+            // NB - if the same comment is updated more than once, the most recent thing added to the array will be the one that is shown, as each update is the full question and answer block
+            // this will check if a question already exists in the store, and if so, it will update the object and move to the top of the array so that we don't have duplicates and it is in the right order
             for (let c = 0; c < updatedComments.length; c++) {
                 const commentId = updatedComments[c].id;
                 const commentIndex = draft.qandas.findIndex((d) => d.id === commentId);
                 if (commentIndex > -1) {
                     draft.qandas[commentIndex] = updatedComments[c];
+                    const commentToMove = draft.qandas.splice(commentIndex, 1);
+                    draft.qandas.unshift(commentToMove[0]);
                 }
                 else {
                     draft.qandas.unshift(updatedComments[c]);
@@ -32,7 +37,7 @@ const updateComments = (dispatch, updatedComments, storyId, useStaging, comments
         dispatch((0, stream_1.setLatestAnsweredQuestionId)(latestAnsweredQuestionId));
     }
     catch (error) {
-        console.log('error', error);
+        console.error('error', error);
     }
 };
 exports.updateComments = updateComments;

package/dist/cjs/utils/auth.js

@@ -8,7 +8,9 @@ exports.default = async ({ useStaging = true, displayName = '', commentsAPIUrl =
         useStagingEnvironment: useStaging,
         onlySubscribers: true,
         displayName,
-        commentsAPIUrl: commentsAPIUrl === PROD_AUTH_URL ? PROD_AUTH_URL : TEST_AUTH_URL,
+        commentsAPIUrl: commentsAPIUrl.startsWith(PROD_AUTH_URL)
+            ? PROD_AUTH_URL
+            : TEST_AUTH_URL,
     });
     // if the JWT creation has failed, a `userHasValidSession` value will be returned
     // our application assumes the values of a JWT are saved to state, so we set the

package/dist/cjs/utils/strings.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanString = cleanString;
+/*
+ * Remove special characters and replace spaces with underscores
+ * @param {string} str - The input string to be cleaned
+ * @returns {string} - The cleaned string with special characters removed and spaces replaced with underscores
+ */
+function cleanString(str) {
+    return str
+        .normalize('NFD') // Decompose accented characters
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
+        .replace(/[^a-zA-Z0-9 ]/g, '') // Remove non-ASCII letters, numbers, and spaces
+        .trim() // Trim leading/trailing spaces
+        .replace(/\s+/g, '_'); // Replace spaces with underscores
+}

package/dist/cjs/utils/tracking.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackEvent = exports.baseTrackingData = void 0;
+exports.trackingNS = trackingNS;
+const trackingNamespace = 'askanexpert_';
+function trackingNS(string) {
+    return trackingNamespace + string;
+}
+exports.baseTrackingData = {
+    category: 'component',
+    action: 'act',
+    component: {
+        name: 'askanexpert',
+        type: 'container',
+        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
+    },
+    content: {
+        asset_type: 'article',
+    },
+};
+const trackEvent = (customTrackingData) => {
+    // Merge the base tracking data with the provided tracking data
+    const trackingData = {
+        ...exports.baseTrackingData,
+        ...customTrackingData,
+        trigger_action: trackingNamespace + customTrackingData.trigger_action,
+    };
+    const event = new CustomEvent('oTracking.event', {
+        detail: trackingData,
+        bubbles: true,
+    });
+    document.body.dispatchEvent(event);
+};
+exports.trackEvent = trackEvent;

package/dist/esm/components/Author/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import Headshot from '@financial-times/cp-content-pipeline-ui/lib/components/Headshot';
-import { Byline } from '@financial-times/cp-content-pipeline-ui';
+import Byline from '@financial-times/cp-content-pipeline-ui/lib/components/Byline';
 function Author({ byline, headshot, prefLabel, role, streamPage, }) {
     const hasHeadshot = headshot && prefLabel;
     return (_jsxs("div", { className: "qanda-block__answer__author", "data-testid": "qanda-block__answer__author", children: [hasHeadshot ? (_jsx("div", { className: "qanda-block__answer__author-headshot", children: _jsx(Headshot, { headshot: headshot, prefLabel: prefLabel, streamPage: streamPage, className: "qanda-block__answer__author-headshot" }) })) : (_jsx("div", { className: "qanda-block__answer__author-opinion-icon" })), _jsxs("div", { className: "qanda-block__answer__author-info", children: [_jsx("div", { className: "o3-type-body-highlight qanda-block__answer__author-name", children: _jsx(Byline, { structuredContent: byline, showEditedBy: false }) }), _jsx("div", { className: "o3-type-body-base", children: role })] })] }));