@financial-times/qanda-ui 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/cjs/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QandaBlock = exports.QandaUI = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const preact_1 = require("preact");
+const Qanda_1 = __importDefault(require("./components/Qanda"));
+const QandaBlock_1 = __importDefault(require("./components/QandaBlock"));
+exports.QandaBlock = QandaBlock_1.default;
+class QandaUI {
+    constructor(containerElement, options) {
+        this.containerElement = containerElement;
+        this.embedFormFieldContainer =
+            options?.embedFormFieldContainer || document.body;
+        this.countdownTimerContainer =
+            options?.countdownTimerContainer || document.body;
+        if (!options && !containerElement) {
+            throw new Error('Required properties are missing');
+        }
+        const storyId = options?.storyId ?? containerElement.dataset.qandaStoryid;
+        const useStaging = options?.useStaging ??
+            containerElement.dataset.qandaUsestaging === 'true' ??
+            false;
+        const title = options?.title ?? containerElement.dataset.qandaTitle;
+        const commentsAPIHost = options?.commentsAPIHost ?? containerElement.dataset.qandaCommentsapihost;
+        const commentsAPIVersion = options?.commentsAPIVersion ??
+            containerElement.dataset.qandaCommentsapiversion;
+        const maxQuestionLength = options?.maxQuestionLength ??
+            (containerElement.dataset.qandaMaxquestionlength
+                ? parseInt(containerElement.dataset.qandaMaxquestionlength, 10)
+                : undefined) ??
+            2000;
+        if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
+            throw new Error('Required properties are missing');
+        }
+        //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;
+        this.title = title;
+        this.commentsAPIHost = commentsAPIHost;
+        this.commentsAPIVersion = commentsAPIVersion;
+        this.maxQuestionLength = maxQuestionLength;
+    }
+    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);
+    }
+    destroy() {
+        (0, preact_1.render)(null, this.containerElement);
+    }
+}
+exports.QandaUI = QandaUI;

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

@@ -0,0 +1,152 @@
+"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;
+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 retryDelay = 1000;
+const updateTypes = {
+    QA_NEW_REPLY: 'updatedComments',
+    QA_UPDATE: 'updatedQA',
+};
+exports.eventSource = null;
+exports.nextCommentsApi = (0, react_1.createApi)({
+    reducerPath: 'nextCommentsApi',
+    refetchOnReconnect: true, // refetches all subscribed queries on regaining a network connection
+    baseQuery: (0, react_1.fetchBaseQuery)({
+        timeout: 10000,
+    }),
+    endpoints: (builder) => ({
+        // QA STREAM
+        getQandAStream: builder.query({
+            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) => {
+                return {
+                    qandas: response?.children || [],
+                    type: response.type,
+                    status: response?.status || 'pre-live',
+                    startDateTime: response?.startDateTime || '',
+                    endDateTime: response?.endDateTime || '',
+                };
+            },
+        }),
+        // UPDATES LISTENER
+        getQandAUpdates: builder.query({
+            queryFn: async ({ storyId, useStaging, commentsAPIUrl, }) => {
+                return { data: {} };
+            },
+            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
+                await cacheDataLoaded;
+                const connectToSSE = () => {
+                    const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
+                    exports.eventSource = new EventSource(sseEndpoint);
+                    exports.eventSource.onopen = () => {
+                        console.log(`Connected to SSE: ${sseEndpoint}`);
+                    };
+                    exports.eventSource.onmessage = (event) => {
+                        try {
+                            const data = JSON.parse(event.data);
+                            console.log('Received SSE update:', data);
+                            if (data && data.type) {
+                                updateCachedData((draft) => {
+                                    const updatedData = updateTypes[data.type];
+                                    draft[updatedData] = draft[updatedData] || [];
+                                    draft[updatedData].push(data.payload);
+                                });
+                            }
+                        }
+                        catch (error) {
+                            console.warn('Failed to parse SSE message:', event.data);
+                        }
+                    };
+                    exports.eventSource.onerror = (event) => {
+                        const es = event.target;
+                        if (es.readyState === EventSource.CONNECTING) {
+                            console.error('SSE connection lost. Attempting to reconnect...');
+                        }
+                        else if (es.readyState === EventSource.CLOSED) {
+                            console.error(`SSE connection closed. Will try to reconnect in ${retryDelay / 1000} seconds...`);
+                            exports.eventSource?.close();
+                            exports.eventSource = null;
+                            setTimeout(() => connectToSSE(), retryDelay);
+                        }
+                        else {
+                            console.error('SSE error occurred.', event);
+                        }
+                    };
+                };
+                try {
+                    connectToSSE();
+                }
+                catch (error) {
+                    console.error('Failed to subscribe to SSE:', error);
+                    console.error(`Reconnecting in ${retryDelay / 1000} seconds...`);
+                    exports.eventSource = null;
+                    setTimeout(() => connectToSSE(), retryDelay);
+                }
+                // cleanup when there are no subscribers to the cache anymore
+                await cacheEntryRemoved;
+                if (exports.eventSource !== null) {
+                    exports.eventSource.close();
+                    exports.eventSource = null;
+                }
+            },
+        }),
+        // USER ROLES
+        getUserRoles: builder.query({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, }) => ({
+                url: `${commentsAPIUrl}/user/user-details/story/${storyId}${useStaging ? '?staging=1' : ''}`,
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            }),
+            transformResponse: (response, meta, arg) => {
+                const allowedRoles = ['ADMIN', 'MODERATOR'];
+                const { isExpert, isStaffExpert, role } = response;
+                const expertView = isExpert || isStaffExpert || !!(role && allowedRoles.includes(role));
+                return { expertView };
+            },
+        }),
+        // POST A QUESTION
+        postQuestion: builder.mutation({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, question, 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 }),
+            }),
+            transformResponse: (response) => {
+                return response.data;
+            },
+        }),
+    }),
+});
+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, }) => {
+    return exports.nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
+        selectFromResult: ({ data }) => ({
+            updatedComments: data?.updatedComments || [],
+        }),
+    }).updatedComments;
+};
+exports.useUpdatedComments = useUpdatedComments;
+// Custom hook to get the updates on the information about the Q&A
+const useUpdatedQA = ({ storyId, useStaging, commentsAPIUrl, }) => {
+    return exports.nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
+        selectFromResult: ({ data }) => ({
+            updatedQA: (data?.updatedQA &&
+                data.updatedQA.length &&
+                data.updatedQA[data.updatedQA.length - 1]) ||
+                {},
+        }),
+    }).updatedQA;
+};
+exports.useUpdatedQA = useUpdatedQA;

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rtkQueryErrorLogger = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const reliability_1 = require("./reliability");
+// Tracking successes for updates may generate a lot of events
+// Disable it when not needed
+const endpointToOperationMap = {
+    postQuestion: { operation: 'question-submission', trackSuccess: true },
+    getUserRoles: { operation: 'profile-load', trackSuccess: true },
+    getQandAStream: { operation: 'stream-load', trackSuccess: true },
+    getQandAUpdates: { operation: 'qa-updates', trackSuccess: true },
+};
+const rtkQueryErrorLogger = () => (next) => (action) => {
+    // Log failures
+    if ((0, toolkit_1.isRejectedWithValue)(action)) {
+        const rejected = action;
+        const isHttpError = typeof rejected.payload?.status === 'number';
+        const endpointName = rejected.meta?.arg?.endpointName ?? '';
+        const mapEntry = endpointToOperationMap[endpointName];
+        const operation = mapEntry?.operation ?? 'unmapped-operation';
+        const statusCodeInfo = isHttpError
+            ? ` with status code ${rejected.payload?.status}`
+            : '';
+        const errorMessage = rejected.payload?.data?.error ||
+            rejected.payload?.error ||
+            'Unknown error';
+        const rtkNormalisedError = new Error(`Network error${statusCodeInfo}: ${errorMessage}`);
+        reliability_1.qandaReliability.failure(operation, rtkNormalisedError);
+    }
+    // Fullfilled actions
+    if (typeof action === 'object' &&
+        action !== null &&
+        'type' in action &&
+        typeof action.type === 'string' &&
+        action.type.endsWith('/fulfilled')) {
+        const meta = action.meta;
+        const endpointName = meta?.arg?.endpointName ?? '';
+        const mapEntry = endpointToOperationMap[endpointName];
+        // Send success event only if trackSucces is enabled for that particular endpoint
+        if (mapEntry?.trackSuccess) {
+            reliability_1.qandaReliability.success(mapEntry.operation);
+        }
+    }
+    return next(action);
+};
+exports.rtkQueryErrorLogger = rtkQueryErrorLogger;

package/dist/cjs/services/reliability.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reliability = exports.qandaReliability = void 0;
+/*
+ * @param outcome - success or failure
+ * @param operation - initialisation or question-submission
+ * @returns void
+ *
+ * This class is used to dispatch events to the client-metrics-web library
+ * for tracking the success or failure of operations.
+ * The class checks if the client-metrics-web library is available, if not it will log warnings
+ *
+ * For failures, it will log errors for debugging purposes
+ */
+class Reliability {
+    constructor(options) {
+        this.testOnly = options.testOnly || false;
+        this.topLevelNamespace = options.topLevelNamespace;
+        this.articleId = '';
+    }
+    setArticleId(articleId) {
+        this.articleId = articleId;
+    }
+    dispatch(outcome, operation, error = null) {
+        if (!this.articleId) {
+            console.warn('(Qanda Reliability) Article ID not set. Please call setArticleId() before dispatching events.');
+        }
+        const eventNamespace = `${this.topLevelNamespace}.${operation}.${outcome}`;
+        if (this.testOnly) {
+            console.warn(`(Reliability) Event not sent: client-metrics-web not available %c${eventNamespace}`, 'font-weight: bold;');
+        }
+        else {
+            window.dispatchEvent(new CustomEvent('ft.clientMetric', {
+                detail: {
+                    namespace: eventNamespace,
+                    operation,
+                    articleId: this.articleId,
+                    ...(error && {
+                        error: {
+                            name: error?.name,
+                            message: error?.message,
+                            stack: error?.stack,
+                        },
+                    }),
+                },
+            }));
+        }
+    }
+    normaliseError(error) {
+        let normalisedError;
+        if (error instanceof Error) {
+            normalisedError = error;
+        }
+        else if (typeof error === 'string') {
+            normalisedError = new Error(error);
+        }
+        else if (typeof error === 'object' && error !== null) {
+            normalisedError = new Error(JSON.stringify(error));
+        }
+        else {
+            normalisedError = new Error('Unknown error type: ' + JSON.stringify(error));
+        }
+        return normalisedError;
+    }
+    failure(operation, error) {
+        // Dispatch a metric for failure and log the error
+        this.dispatch('failure', operation, this.normaliseError(error));
+    }
+    success(operation) {
+        this.dispatch('success', operation);
+    }
+    // Use this method to test the error handling
+    throw(error = 'Throwing an error for testing purposes') {
+        throw new Error(error);
+    }
+}
+exports.Reliability = Reliability;
+const qandaReliability = new Reliability({ topLevelNamespace: 'live-qanda' });
+exports.qandaReliability = qandaReliability;

package/dist/cjs/store/expertSlice.js

@@ -0,0 +1,26 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setExpertView = exports.closeExpertForm = exports.openExpertForm = exports.expertSlice = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const initialState = {
+    isExpertFormOpen: false,
+    expertView: undefined,
+};
+exports.expertSlice = (0, toolkit_1.createSlice)({
+    name: 'expert',
+    initialState,
+    reducers: {
+        openExpertForm: (state) => {
+            state.isExpertFormOpen = true;
+        },
+        closeExpertForm: (state) => {
+            state.isExpertFormOpen = false;
+        },
+        setExpertView: (state, action) => {
+            state.expertView = action.payload;
+        },
+    },
+});
+_a = exports.expertSlice.actions, exports.openExpertForm = _a.openExpertForm, exports.closeExpertForm = _a.closeExpertForm, exports.setExpertView = _a.setExpertView;
+exports.default = exports.expertSlice.reducer;

package/dist/cjs/store/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.store = exports.rootReducer = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const query_1 = require("@reduxjs/toolkit/query");
+const questionSlice_1 = __importDefault(require("./questionSlice"));
+const stream_1 = require("./stream");
+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");
+exports.rootReducer = (0, toolkit_1.combineReducers)({
+    stream: stream_1.stream.reducer,
+    question: questionSlice_1.default,
+    user: user_1.user.reducer,
+    expert: expertSlice_1.default,
+    nextCommentsApi: comments_api_1.nextCommentsApi.reducer,
+});
+exports.store = (0, toolkit_1.configureStore)({
+    reducer: exports.rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+        .concat(comments_api_1.nextCommentsApi.middleware)
+        .concat(error_middleware_1.rtkQueryErrorLogger),
+});
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+(0, query_1.setupListeners)(exports.store.dispatch);

package/dist/cjs/store/questionSlice.js

@@ -0,0 +1,32 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDisplayNameError = exports.updateQuestion = exports.closeForm = exports.openForm = exports.questionSlice = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const initialState = {
+    isFormOpen: false,
+    question: '',
+    displayNameError: null,
+};
+exports.questionSlice = (0, toolkit_1.createSlice)({
+    name: 'question',
+    initialState,
+    reducers: {
+        openForm: (state) => {
+            state.isFormOpen = true;
+        },
+        closeForm: (state) => {
+            state.isFormOpen = false;
+            state.question = '';
+            state.displayNameError = null;
+        },
+        updateQuestion: (state, action) => {
+            state.question = action.payload;
+        },
+        updateDisplayNameError: (state, action) => {
+            state.displayNameError = action.payload;
+        },
+    },
+});
+_a = exports.questionSlice.actions, exports.openForm = _a.openForm, exports.closeForm = _a.closeForm, exports.updateQuestion = _a.updateQuestion, exports.updateDisplayNameError = _a.updateDisplayNameError;
+exports.default = exports.questionSlice.reducer;

package/dist/cjs/store/stream.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setLatestAnsweredQuestionId = exports.stream = exports.initialState = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+exports.initialState = {
+    latestAnsweredQuestionId: '',
+};
+exports.stream = (0, toolkit_1.createSlice)({
+    name: 'stream',
+    initialState: exports.initialState,
+    reducers: {
+        setLatestAnsweredQuestionId: (state, action) => {
+            state.latestAnsweredQuestionId = action.payload;
+        },
+    },
+});
+exports.setLatestAnsweredQuestionId = exports.stream.actions.setLatestAnsweredQuestionId;

package/dist/cjs/store/updateComments.js

@@ -0,0 +1,40 @@
+"use strict";
+// PURPOSE: move the comments saved in updatedComments into the main comments array for the stream and then clear out the updatedComments array, and update the lastAnsweredQuestionId in the store
+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 qandas_1 = require("../utils/qandas");
+const updateComments = (dispatch, updatedComments, storyId, useStaging, commentsAPIUrl) => {
+    if (!updatedComments.length) {
+        return;
+    }
+    const latestAnsweredQuestionId = (0, qandas_1.getLatestAnsweredQuestion)(updatedComments);
+    try {
+        // Update the cache with the new comments
+        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
+            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];
+                }
+                else {
+                    draft.qandas.unshift(updatedComments[c]);
+                }
+            }
+        }));
+        // Clear out the updated comments
+        dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+            draft.updatedComments = [];
+        }));
+        dispatch((0, stream_1.setLatestAnsweredQuestionId)(latestAnsweredQuestionId));
+    }
+    catch (error) {
+        console.log('error', error);
+    }
+};
+exports.updateComments = updateComments;

package/dist/cjs/store/user.js

@@ -0,0 +1,51 @@
+"use strict";
+// this will get the user token and display name from oComments library and save it to the redux store
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.user = exports.getUserProfile = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const auth_1 = __importDefault(require("../utils/auth"));
+const ACTION_ROOT = 'user';
+const ACTION_GET_USER_PROFILE = `${ACTION_ROOT}/profile`;
+const initialState = {
+    profile: {
+        token: '',
+        displayName: '',
+        isRegistered: false,
+        isTrialist: false,
+        isSubscribed: false,
+    },
+    loading: false,
+    error: '',
+};
+exports.getUserProfile = (0, toolkit_1.createAsyncThunk)(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '', commentsAPIUrl }) => {
+    const userDetails = await (0, auth_1.default)({
+        useStaging,
+        displayName,
+        commentsAPIUrl,
+    });
+    return userDetails;
+});
+exports.user = (0, toolkit_1.createSlice)({
+    name: 'user',
+    initialState,
+    reducers: {}, // No local reducers in this case
+    extraReducers: (builder) => {
+        builder
+            .addCase(exports.getUserProfile.pending, (state) => {
+            state.loading = true;
+        })
+            .addCase(exports.getUserProfile.fulfilled, (state, action) => {
+            state.loading = false;
+            state.profile = action.payload;
+            state.error = '';
+        })
+            .addCase(exports.getUserProfile.rejected, (state) => {
+            state.loading = false;
+            state.error =
+                'We could not retrieve your profile. Please try again later.';
+        });
+    },
+});

package/dist/cjs/utils/auth.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const o_comments_1 = require("@financial-times/o-comments");
+const PROD_AUTH_URL = 'https://comments-api.ft.com';
+const TEST_AUTH_URL = 'https://comments-api-test.ft.com';
+exports.default = async ({ useStaging = true, displayName = '', commentsAPIUrl = PROD_AUTH_URL, }) => {
+    const userDetails = await o_comments_1.auth.fetchJsonWebToken({
+        useStagingEnvironment: useStaging,
+        onlySubscribers: true,
+        displayName,
+        commentsAPIUrl: commentsAPIUrl === 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
+    // default values
+    if (userDetails.userHasValidSession) {
+        return {
+            token: '',
+            displayName: '',
+            isSubscribed: userDetails.userHasValidSession,
+        };
+    }
+    else {
+        return userDetails;
+    }
+};

package/dist/cjs/utils/qandas.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLatestAnsweredQuestion = void 0;
+// Returns the question UUID with the latest answer
+// eslint-disable-next-line import/prefer-default-export
+const getLatestAnsweredQuestion = (questions) => {
+    let questionId = '';
+    let latestTimestamp = 0;
+    questions.forEach((question) => {
+        question.children?.forEach((answer) => {
+            const answerTimestamp = new Date(answer.publishedDate).getTime();
+            if (answerTimestamp > latestTimestamp) {
+                questionId = question.id;
+                latestTimestamp = answerTimestamp;
+            }
+        });
+    });
+    return questionId;
+};
+exports.getLatestAnsweredQuestion = getLatestAnsweredQuestion;

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,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackEvent = void 0;
+const trackEvent = (trackingData) => {
+    const event = new CustomEvent('oTracking.event', {
+        detail: trackingData,
+        bubbles: true,
+    });
+    document.body.dispatchEvent(event);
+};
+exports.trackEvent = trackEvent;

package/dist/cjs/utils/validate-display-name.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = validateDisplayName;
+function validateDisplayName(displayName) {
+    /*
+     * Allowed Characters
+     * The below regex matches any character not in the allowed characters set
+     * All allowed characters are case insensitive
+     * Anything in the range A-Z or 0-9 is allowed
+     * Any of the below special characters are allowed
+     * !#$%'`()*+,-./:;=@[]^_{|}
+     * Spaces are allowed
+     */
+    const matchInvalidCharacters = /[^0-9a-z!#$%'`()*+,\-.\/:;=@[\]\^_{}\|\s]/gi;
+    const matchingCharacters = displayName.match(matchInvalidCharacters);
+    const uniqueMatchingCharacters = matchingCharacters && matchingCharacters.length
+        ? matchingCharacters.filter((character, position) => matchingCharacters.indexOf(character) === position)
+        : [];
+    return uniqueMatchingCharacters.length
+        ? uniqueMatchingCharacters.join('')
+        : false;
+}

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

@@ -0,0 +1,14 @@
+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/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 })] })] }));
+}
+Author.defaultProps = {
+    byline: '',
+    headshot: false,
+    prefLabel: false,
+    streamPage: '',
+};
+export default Author;