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

package/dist/cjs/components/QandaOComments.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const o_comments_1 = __importDefault(require("@financial-times/o-comments"));
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const QandaProvider_1 = require("./QandaProvider");
+const comments_api_1 = require("../services/comments-api");
+const reliability_1 = require("../services/reliability");
+function QandaOComments() {
+    const allowedRoles = ['ADMIN', 'MODERATOR'];
+    const { storyId, useStaging, commentsAPIUrl, title } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const profile = (0, react_redux_1.useSelector)((state) => state.user.profile);
+    if (!profile) {
+        return null;
+    }
+    const { data: userRole, error, isLoading, } = (0, comments_api_1.useGetUserRolesQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token: profile.token,
+    }, { skip: !profile.token });
+    (0, react_1.useEffect)(() => {
+        if (!userRole) {
+            return;
+        }
+        const { isExpert, isStaffExpert, role } = userRole;
+        const showCoral = isExpert || isStaffExpert || (role && allowedRoles.includes(role));
+        if (showCoral) {
+            try {
+                o_comments_1.default.init();
+            }
+            catch (error) {
+                reliability_1.qandaReliability.failure('expert-load-coral-ui', error);
+            }
+        }
+    }, [userRole]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "o-comments", id: "o-comments-stream", "data-o-component": "o-comments", "data-o-comments-article-id": storyId, "data-o-comments-article-url": `https://www.ft.com/content/${storyId}`, "data-o-comments-use-staging-environment": useStaging, "data-o-comments-title": title }));
+}
+exports.default = QandaOComments;

package/dist/cjs/components/QandaProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QandaContext = void 0;
+const react_1 = require("react");
+exports.QandaContext = (0, react_1.createContext)({
+    storyId: '',
+    useStaging: true,
+    commentsAPIUrl: '',
+    title: '',
+    maxQuestionLength: 0,
+});

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

@@ -0,0 +1,151 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuestionForm;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_redux_1 = require("react-redux");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const questionSlice_1 = require("../../store/questionSlice");
+const QandaProvider_1 = require("../QandaProvider");
+const comments_api_1 = require("../../services/comments-api");
+const Overlay_1 = __importDefault(require("../Overlay"));
+const o3_button_1 = require("@financial-times/o3-button");
+const MessageBox_1 = __importDefault(require("../Overlay/MessageBox"));
+const user_1 = require("../../store/user");
+const validate_display_name_1 = __importDefault(require("../../utils/validate-display-name"));
+const messagesByUserType_1 = require("./messagesByUserType");
+function QuestionForm() {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const [postAnonymously, setPostAnonymously] = (0, react_1.useState)(false);
+    const [newDisplayName, setNewDisplayName] = (0, react_1.useState)(null);
+    const [submitEnabled, setSubmitEnabled] = (0, react_1.useState)(false);
+    const { isFormOpen, question, displayNameError } = (0, react_redux_1.useSelector)((state) => state.question);
+    const { profile, error: userDisplayNameError } = (0, react_redux_1.useSelector)((state) => state.user);
+    // NB: reset will have the effect of setting things like error to null and isSuccess to empty
+    // you use this when you want to clear the state of the usePostQuestionMutation hook as if you had just started on the page
+    // as we allow users to see things like error messages and success messages, we do not clear those until we try to send another mutation, otherwise those things will clear too early
+    const [postQuestion, { isLoading, isSuccess, error, reset }] = (0, comments_api_1.usePostQuestionMutation)();
+    (0, react_1.useEffect)(() => {
+        if (userDisplayNameError) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)('Sorry, we are unable to update display names. Please try again.'));
+        }
+    }, [userDisplayNameError]);
+    (0, react_1.useEffect)(() => {
+        setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
+            question.length >= 20));
+    }, [profile?.token, newDisplayName, question]);
+    (0, react_1.useEffect)(() => {
+        // we want to clear the display name error unless the person has attempted
+        // to post anonymously with no display name
+        if (!postAnonymously && newDisplayName && newDisplayName?.length > 0) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)(null));
+        }
+    }, [newDisplayName]);
+    // HANDLING EVENTS
+    const trackEvent = (trackingData) => {
+        const event = new CustomEvent('oTracking.event', {
+            detail: trackingData,
+            bubbles: true,
+        });
+        document.body.dispatchEvent(event);
+    };
+    const handleHideDisplayName = (e) => {
+        if (!profile?.token && !newDisplayName) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)('You need a display name to ask a question, but you can still post it anonymously.'));
+        }
+        setPostAnonymously(e.target instanceof HTMLInputElement && e.target.checked);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        reset();
+        let updatedProfile;
+        if (newDisplayName) {
+            const invalidCharacters = (0, validate_display_name_1.default)(newDisplayName);
+            if (invalidCharacters) {
+                dispatch((0, questionSlice_1.updateDisplayNameError)(`The display name contains invalid characters: ${invalidCharacters}`));
+                return;
+            }
+            updatedProfile = await dispatch((0, user_1.getUserProfile)({ useStaging, displayName: newDisplayName })).unwrap();
+            // The user token is empty when there is no display name set
+            // if there are also no errors, we can assume the display name is taken
+            if (!updatedProfile?.token && !userDisplayNameError) {
+                dispatch((0, questionSlice_1.updateDisplayNameError)('Unfortunately that display name is taken'));
+                return;
+            }
+            if (updatedProfile?.displayName) {
+                // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
+                trackEvent({
+                    category: 'component',
+                    action: 'act',
+                    trigger_action: 'success_set_displayname',
+                });
+            }
+        }
+        try {
+            await postQuestion({
+                token: updatedProfile?.token || profile?.token || '',
+                storyId,
+                useStaging,
+                commentsAPIUrl,
+                question: question,
+                postAnonymously,
+            }).unwrap();
+        }
+        catch (e) {
+            dispatch((0, questionSlice_1.openForm)());
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (isSuccess) {
+            dispatch((0, questionSlice_1.updateQuestion)(''));
+        }
+    }, [isSuccess]);
+    if (error) {
+        // TODO: Remove tracking if confirmed that we can use AWS RUM
+        // Note: Events related to the Product, not reliability, should still use tracking
+        trackEvent({
+            category: 'component',
+            action: 'view',
+            trigger_action: 'liveqa_question_form_submit',
+            custom: [
+                {
+                    name: 'state',
+                    value: 'error',
+                },
+            ],
+        });
+    }
+    if (!isFormOpen) {
+        return;
+    }
+    return (
+    // This form will use o-forms fields with o3 styling until o3 components
+    // are implemented by Origami team.
+    // Ticket CI-2770 was created to address this in the future.
+    (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)([
+                                                '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 }), (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", 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-describedby": error ? 'question-error-message' : undefined }) })] }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                className: 'overlay__submit-button',
+                                type: 'submit',
+                                disabled: !submitEnabled,
+                                ariaLabel: question.length < 20
+                                    ? 'Submit button (disabled until question is at least 20 characters)'
+                                    : isLoading
+                                        ? 'Submitting...'
+                                        : 'Submit your question',
+                            }, 
+                            // @ts-expect-error - o3 Button is currently accepting a JSX element as label
+                            // but the type definition needs to be updated by Origami team
+                            label: isLoading ? ((0, jsx_runtime_1.jsx)("div", { class: "o-loading o-loading--light o-loading--small" })) : ('Submit your question'), type: "primary", theme: "mono" }), !profile?.token && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "#00572C", styles: "o-message--alert o-message--success", title: "Question sent", text: "Your question is in the queue and will be reviewed by our editors." })), error && ((0, jsx_runtime_1.jsx)(MessageBox_1.default, { color: "var(--o3-color-use-case-error)", styles: "o-message--alert o-message--error", title: "Connection issue", text: "Could not submit question: [error messages to come in another ticket]" })), (0, jsx_runtime_1.jsx)(MessageBox_1.default, { styles: "o-message--notice o-message--inform", title: (0, messagesByUserType_1.getTitleByUser)(profile), text: (0, messagesByUserType_1.getTextByUser)(profile) })] }));
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TERMS_AND_CONDITIONS_URL = exports.COMMUNITY_GUIDELINES_URL = exports.SUBSCRIBE_URL = exports.SIGN_IN_URL = void 0;
+exports.getTitleByUser = getTitleByUser;
+exports.getTextByUser = getTextByUser;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+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';
+exports.TERMS_AND_CONDITIONS_URL = 'https://help.ft.com/help/legal-privacy/terms-conditions';
+function getTitleByUser(profile) {
+    if (profile.isSubscribed) {
+        return 'Q&A guidelines';
+    }
+    if (profile.isTrialist) {
+        return 'You are still on a trial period';
+    }
+    // Same title for anonymous and registered users
+    return 'Asking a question is only available to readers with an FT subscription';
+}
+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" }), "."] }));
+    }
+    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."] }));
+    }
+    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."] }));
+    }
+    // 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."] }));
+}

package/dist/cjs/components/Stream.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const index_1 = __importDefault(require("./QandaBlock/index"));
+const QandaProvider_1 = require("./QandaProvider");
+const comments_api_1 = require("../services/comments-api");
+function Stream() {
+    const latestAnsweredQuestionId = (0, react_redux_1.useSelector)((state) => state.stream.latestAnsweredQuestionId);
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { data, error, isLoading } = (0, comments_api_1.useGetQandAStreamQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+    });
+    (0, react_1.useEffect)(() => {
+        const element = document.getElementById(latestAnsweredQuestionId);
+        element?.scrollIntoView({ behavior: 'smooth' });
+    }, [latestAnsweredQuestionId]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", children: [isLoading && (0, jsx_runtime_1.jsx)("p", { children: "Loading Stream for you, be patient..." }), error && (0, jsx_runtime_1.jsx)("p", { children: "Failed to load Q&A stream" }), data &&
+                data.qandas &&
+                data.qandas.map((qandaBlock) => ((0, jsx_runtime_1.jsx)(index_1.default, { id: qandaBlock.id, body: qandaBlock.body, type: "comment", publishedDate: qandaBlock.publishedDate, author: qandaBlock.author, byline: qandaBlock.byline, showAnswerTime: data.status === 'live', children: qandaBlock.children }, qandaBlock.id)))] }));
+}
+exports.default = Stream;

package/dist/cjs/components/UserInfo.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const comments_api_1 = require("../services/comments-api");
+const QandaProvider_1 = require("./QandaProvider");
+function UserInfo() {
+    const profile = (0, react_redux_1.useSelector)((state) => state.user.profile);
+    if (!profile) {
+        return null;
+    }
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { data: userRole, error, isLoading, } = (0, comments_api_1.useGetUserRolesQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token: profile.token,
+    }, { skip: !profile.token });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [isLoading && (0, jsx_runtime_1.jsx)("p", { children: "Loading your profile..." }), error && ((0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("b", { children: error }) }))] }));
+}
+exports.default = UserInfo;

package/dist/cjs/hooks/useIsMobile.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMobile = useIsMobile;
+const react_1 = require("react");
+function useIsMobile(breakpoint = 740) {
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
+        const update = () => setIsMobile(mediaQuery.matches);
+        update();
+        mediaQuery.addEventListener('change', update);
+        return () => mediaQuery.removeEventListener('change', update);
+    }, [breakpoint]);
+    return isMobile;
+}

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,144 @@
+"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 }) => `${commentsAPIUrl}/story/${storyId}/stream${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}`,
+                },
+            }),
+        }),
+        // 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, meta, arg) => {
+                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;