@financial-times/qanda-ui 0.0.1-beta.6 → 0.0.1-beta.8

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

@@ -8,6 +8,10 @@ const react_dom_1 = require("react-dom");
 function EmbedFormField({ container }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const [portalTarget, setPortalTarget] = (0, react_1.useState)();
+    const expertView = (0, react_redux_1.useSelector)((state) => state.expert.expertView);
+    if (expertView) {
+        return null;
+    }
     (0, react_1.useEffect)(() => {
         if (container) {
             const portalContainer = document.createElement('div');

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

@@ -0,0 +1,36 @@
+"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 expertSlice_1 = require("../../store/expertSlice");
+const QandaProvider_1 = require("../QandaProvider");
+const reliability_1 = require("../../services/reliability");
+const Overlay_1 = __importDefault(require("../Overlay"));
+function ExpertDrawer() {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const { storyId, useStaging, title } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const { isExpertFormOpen, expertView } = (0, react_redux_1.useSelector)((state) => state.expert);
+    (0, react_1.useEffect)(() => {
+        if (isExpertFormOpen) {
+            try {
+                o_comments_1.default.init();
+            }
+            catch (error) {
+                reliability_1.qandaReliability.failure('expert-load-coral-ui', error);
+            }
+        }
+    }, [isExpertFormOpen]);
+    if (!isExpertFormOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.default, { title: "Live Q&A", closeCallback: () => dispatch((0, expertSlice_1.closeExpertForm)()), options: {
+            shadow: true,
+            noBackground: true,
+        }, children: (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 = ExpertDrawer;

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

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const o3_button_1 = require("@financial-times/o3-button");
 const questionSlice_1 = require("../../store/questionSlice");
+const expertSlice_1 = require("../../store/expertSlice");
 const useIsMobile_1 = require("../../hooks/useIsMobile");
 const comments_api_1 = require("../../services/comments-api");
 const updateComments_1 = require("../../store/updateComments");
@@ -26,12 +27,26 @@ function FloatingActionBar() {
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
+    const showExpertView = (0, react_redux_1.useSelector)((state) => state.expert.expertView);
+    const userConfig = {
+        descripton: 'Ask a question',
+        testIdSuffix: 'ask-a-question-button',
+        onClick: () => dispatch((0, questionSlice_1.openForm)()),
+        dataTrackable: 'open_question_form',
+    };
+    const expertConfig = {
+        descripton: 'Answer Q&A',
+        testIdSuffix: 'answer-a-qanda-button',
+        onClick: () => dispatch((0, expertSlice_1.openExpertForm)()),
+        dataTrackable: 'open_expert_drawer',
+    };
+    const view = showExpertView ? expertConfig : userConfig;
     return ((0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__container", "data-trackable": "floating-action-bar", children: [(0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__fade-overlay" }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [(0, jsx_runtime_1.jsx)("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: (0, jsx_runtime_1.jsx)("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
-                                    ariaLabel: 'Ask a question',
-                                    'data-trackable': 'open_question_form',
-                                    'data-trackable-context-action': 'Ask a question',
-                                    'data-testid': 'floating-action-bar__ask-a-question-button',
-                                }, label: "Ask a question", type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: () => dispatch((0, questionSlice_1.openForm)()) }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                    ariaLabel: view.descripton,
+                                    'data-trackable': view.dataTrackable,
+                                    'data-trackable-context-action': view.descripton,
+                                    'data-testid': `floating-action-bar__${view.testIdSuffix}`,
+                                }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': 'back_to_top',
                                     'data-trackable-context-action': 'Back to top',

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Loader;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+function Loader({ size = 'small', theme = 'light', extraClassNames = '', }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `o-loading o-loading--${theme} o-loading--${size} ${extraClassNames}`, role: "progressbar", "aria-label": "Loading content" }));
+}

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

@@ -1,8 +1,18 @@
 "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 o3_button_1 = require("@financial-times/o3-button");
-function Overlay({ title, children, closeCallback }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__outer" }), (0, jsx_runtime_1.jsxs)("div", { className: "overlay__inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__header", children: (0, jsx_runtime_1.jsxs)("div", { className: "overlay__header-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overlay__content", children: children })] })] }));
+const classnames_1 = __importDefault(require("classnames"));
+function Overlay({ title, children, closeCallback, options = {}, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)([
+                    'overlay__outer',
+                    { 'overlay__outer--no-background': options.noBackground },
+                ]) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
+                    'overlay__inner',
+                    { 'overlay__inner--shadow': options.shadow },
+                ]), children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay__header", children: (0, jsx_runtime_1.jsxs)("div", { className: "overlay__header-bar", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overlay__content", children: children })] })] }));
 }
 exports.default = Overlay;

package/dist/cjs/components/QandaContainer.js

@@ -7,9 +7,10 @@ const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
 const user_1 = require("../store/user");
+const expertSlice_1 = require("../store/expertSlice");
 const QuestionForm_1 = __importDefault(require("./QuestionForm"));
 const UserInfo_1 = __importDefault(require("./UserInfo"));
-const QandaOComments_1 = __importDefault(require("./QandaOComments"));
+const ExpertDrawer_1 = __importDefault(require("./ExpertDrawer"));
 const Stream_1 = __importDefault(require("./Stream"));
 const Calendar_1 = __importDefault(require("./Calendar"));
 const CountdownTimer_1 = __importDefault(require("./CountdownTimer"));
@@ -31,6 +32,20 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
         commentsAPIUrl,
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
+    const profile = (0, react_redux_1.useSelector)((state) => state.user.profile);
+    const { data: roleData } = (0, comments_api_1.useGetUserRolesQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token: profile.token,
+    }, { skip: !profile.token });
+    const expertView = roleData?.expertView;
+    (0, react_1.useEffect)(() => {
+        if (expertView !== undefined) {
+            dispatch((0, expertSlice_1.setExpertView)(expertView));
+        }
+    }, [expertView, dispatch]);
+    const showExpertView = (0, react_redux_1.useSelector)((state) => state.expert.expertView);
     (0, react_1.useEffect)(() => {
         dispatch((0, user_1.getUserProfile)({ useStaging, commentsAPIUrl }));
         return () => {
@@ -38,6 +53,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, {}), status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UserInfo_1.default, {}), (0, jsx_runtime_1.jsx)(QandaOComments_1.default, {})] })), data?.status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, {}), status !== 'close' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, {}) })), data?.status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
 }
 exports.default = QandaContainer;

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

@@ -12,6 +12,7 @@ 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 Loader_1 = __importDefault(require("../Loader"));
 const o3_button_1 = require("@financial-times/o3-button");
 const MessageBox_1 = __importDefault(require("../Overlay/MessageBox"));
 const user_1 = require("../../store/user");
@@ -151,5 +152,5 @@ function QuestionForm() {
                             }, 
                             // @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) })] }));
+                            label: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, {}) : '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/Stream/index.js

@@ -0,0 +1,31 @@
+"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 Loader_1 = __importDefault(require("../Loader"));
+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)("section", { className: "qanda__stream", children: [(0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", children: data && data.status && data.status === 'pre-live'
+                    ? 'Top questions so far'
+                    : 'What our readers are asking' }), (0, jsx_runtime_1.jsxs)("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && ((0, jsx_runtime_1.jsx)(Loader_1.default, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && (0, jsx_runtime_1.jsx)("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/services/comments-api.js

@@ -101,6 +101,12 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                     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({

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

@@ -9,12 +9,14 @@ 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)({

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { openForm } from '../../store/questionSlice';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 function EmbedFormField({ container }) {
     const dispatch = useDispatch();
     const [portalTarget, setPortalTarget] = useState();
+    const expertView = useSelector((state) => state.expert.expertView);
+    if (expertView) {
+        return null;
+    }
     useEffect(() => {
         if (container) {
             const portalContainer = document.createElement('div');

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import OComments from '@financial-times/o-comments';
+import { useEffect, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { closeExpertForm } from '../../store/expertSlice';
+import { QandaContext } from '../QandaProvider';
+import { qandaReliability } from '../../services/reliability';
+import Overlay from '../Overlay';
+function ExpertDrawer() {
+    const dispatch = useDispatch();
+    const { storyId, useStaging, title } = useContext(QandaContext);
+    const { isExpertFormOpen, expertView } = useSelector((state) => state.expert);
+    useEffect(() => {
+        if (isExpertFormOpen) {
+            try {
+                OComments.init();
+            }
+            catch (error) {
+                qandaReliability.failure('expert-load-coral-ui', error);
+            }
+        }
+    }, [isExpertFormOpen]);
+    if (!isExpertFormOpen) {
+        return null;
+    }
+    return (_jsx(Overlay, { title: "Live Q&A", closeCallback: () => dispatch(closeExpertForm()), options: {
+            shadow: true,
+            noBackground: true,
+        }, children: _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 }) }));
+}
+export default ExpertDrawer;

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '@financial-times/o3-button';
 import { openForm } from '../../store/questionSlice';
+import { openExpertForm } from '../../store/expertSlice';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useUpdatedComments } from '../../services/comments-api';
 import { updateComments } from '../../store/updateComments';
@@ -24,12 +25,26 @@ function FloatingActionBar() {
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
     };
+    const showExpertView = useSelector((state) => state.expert.expertView);
+    const userConfig = {
+        descripton: 'Ask a question',
+        testIdSuffix: 'ask-a-question-button',
+        onClick: () => dispatch(openForm()),
+        dataTrackable: 'open_question_form',
+    };
+    const expertConfig = {
+        descripton: 'Answer Q&A',
+        testIdSuffix: 'answer-a-qanda-button',
+        onClick: () => dispatch(openExpertForm()),
+        dataTrackable: 'open_expert_drawer',
+    };
+    const view = showExpertView ? expertConfig : userConfig;
     return (_jsxs("div", { className: "floating-action-bar__container", "data-trackable": "floating-action-bar", children: [_jsx("div", { className: "floating-action-bar__fade-overlay" }), _jsxs("div", { className: "floating-action-bar", "data-testid": "floating-action-bar", children: [_jsx("div", { className: "o-labels-indicator--live o3-type-label floating-action-bar__live-container", children: _jsx("span", { className: "o-labels-indicator__status floating-action-bar__live-label", children: "Live" }) }), _jsxs("div", { className: "floating-action-bar__buttons", children: [_jsx(Button, { attributes: {
-                                    ariaLabel: 'Ask a question',
-                                    'data-trackable': 'open_question_form',
-                                    'data-trackable-context-action': 'Ask a question',
-                                    'data-testid': 'floating-action-bar__ask-a-question-button',
-                                }, label: "Ask a question", type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: () => dispatch(openForm()) }), _jsx(Button, { attributes: {
+                                    ariaLabel: view.descripton,
+                                    'data-trackable': view.dataTrackable,
+                                    'data-trackable-context-action': view.descripton,
+                                    'data-testid': `floating-action-bar__${view.testIdSuffix}`,
+                                }, label: view.descripton, type: "ghost", theme: "mono", icon: "edit", iconOnly: isMobile, onClick: view.onClick }), _jsx(Button, { attributes: {
                                     ariaLabel: 'Back to top',
                                     'data-trackable': 'back_to_top',
                                     'data-trackable-context-action': 'Back to top',

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export default function Loader({ size = 'small', theme = 'light', extraClassNames = '', }) {
+    return (_jsx("div", { className: `o-loading o-loading--${theme} o-loading--${size} ${extraClassNames}`, role: "progressbar", "aria-label": "Loading content" }));
+}

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

@@ -1,6 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Button } from '@financial-times/o3-button';
-function Overlay({ title, children, closeCallback }) {
-    return (_jsxs("div", { className: "overlay", children: [_jsx("div", { className: "overlay__outer" }), _jsxs("div", { className: "overlay__inner", children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), _jsx(Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), _jsx("div", { className: "overlay__content", children: children })] })] }));
+import classNames from 'classnames';
+function Overlay({ title, children, closeCallback, options = {}, }) {
+    return (_jsxs("div", { className: "overlay", children: [_jsx("div", { className: classNames([
+                    'overlay__outer',
+                    { 'overlay__outer--no-background': options.noBackground },
+                ]) }), _jsxs("div", { className: classNames([
+                    'overlay__inner',
+                    { 'overlay__inner--shadow': options.shadow },
+                ]), children: [_jsx("div", { className: "overlay__header", children: _jsxs("div", { className: "overlay__header-bar", children: [_jsx("span", { className: "o3-type-body-highlight overlay__header-title", children: title }), _jsx(Button, { attributes: { className: 'overlay__header-close' }, iconOnly: true, icon: "cross", label: "Close", type: "ghost", theme: "mono", onClick: () => closeCallback() })] }) }), _jsx("div", { className: "overlay__content", children: children })] })] }));
 }
 export default Overlay;

package/dist/esm/components/QandaContainer.js

@@ -1,17 +1,18 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useContext } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getUserProfile } from '../store/user';
+import { setExpertView } from '../store/expertSlice';
 import QuestionForm from './QuestionForm';
 import UserInfo from './UserInfo';
-import QandaOComments from './QandaOComments';
+import ExpertDrawer from './ExpertDrawer';
 import Stream from './Stream';
 import Calendar from './Calendar';
 import CountdownTimer from './CountdownTimer';
 import FloatingActionBar from './FloatingActionBar';
 import EmbedFormField from './EmbedFormField';
 import { QandaContext } from './QandaProvider';
-import { useGetQandAStreamQuery, useUpdatedQA, nextCommentsApi, } from '../services/comments-api';
+import { useGetQandAStreamQuery, useUpdatedQA, useGetUserRolesQuery, nextCommentsApi, } from '../services/comments-api';
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
     const dispatch = useDispatch();
@@ -26,6 +27,20 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
         commentsAPIUrl,
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
+    const profile = useSelector((state) => state.user.profile);
+    const { data: roleData } = useGetUserRolesQuery({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token: profile.token,
+    }, { skip: !profile.token });
+    const expertView = roleData?.expertView;
+    useEffect(() => {
+        if (expertView !== undefined) {
+            dispatch(setExpertView(expertView));
+        }
+    }, [expertView, dispatch]);
+    const showExpertView = useSelector((state) => state.expert.expertView);
     useEffect(() => {
         dispatch(getUserProfile({ useStaging, commentsAPIUrl }));
         return () => {
@@ -33,6 +48,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [_jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, {}), status !== 'close' && (_jsxs(_Fragment, { children: [_jsx(UserInfo, {}), _jsx(QandaOComments, {})] })), data?.status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
+    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, {}), status !== 'close' && (_jsx(_Fragment, { children: _jsx(UserInfo, {}) })), data?.status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
 }
 export default QandaContainer;

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

@@ -6,6 +6,7 @@ import { openForm, closeForm, updateQuestion, updateDisplayNameError, } from '..
 import { QandaContext } from '../QandaProvider';
 import { usePostQuestionMutation } from '../../services/comments-api';
 import Overlay from '../Overlay';
+import Loader from '../Loader';
 import { Button } from '@financial-times/o3-button';
 import MessageBox from '../Overlay/MessageBox';
 import { getUserProfile } from '../../store/user';
@@ -145,5 +146,5 @@ export default function QuestionForm() {
                             }, 
                             // @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 ? (_jsx("div", { class: "o-loading o-loading--light o-loading--small" })) : ('Submit your question'), type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx(MessageBox, { 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 && (_jsx(MessageBox, { 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]" })), _jsx(MessageBox, { styles: "o-message--notice o-message--inform", title: getTitleByUser(profile), text: getTextByUser(profile) })] }));
+                            label: isLoading ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx(MessageBox, { 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 && (_jsx(MessageBox, { 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]" })), _jsx(MessageBox, { styles: "o-message--notice o-message--inform", title: getTitleByUser(profile), text: getTextByUser(profile) })] }));
 }

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import QandaBlock from '../QandaBlock/index';
+import { QandaContext } from '../QandaProvider';
+import Loader from '../Loader';
+import { useGetQandAStreamQuery } from '../../services/comments-api';
+function Stream() {
+    const latestAnsweredQuestionId = useSelector((state) => state.stream.latestAnsweredQuestionId);
+    const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+    const { data, error, isLoading } = useGetQandAStreamQuery({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+    });
+    useEffect(() => {
+        const element = document.getElementById(latestAnsweredQuestionId);
+        element?.scrollIntoView({ behavior: 'smooth' });
+    }, [latestAnsweredQuestionId]);
+    return (_jsxs("section", { className: "qanda__stream", children: [_jsx("h2", { className: "o3-type-title-md qanda__stream-title", children: data && data.status && data.status === 'pre-live'
+                    ? 'Top questions so far'
+                    : 'What our readers are asking' }), _jsxs("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", "aria-busy": isLoading, children: [isLoading && (_jsx(Loader, { theme: "dark", extraClassNames: "qanda__stream-loader" })), error && _jsx("p", { children: "Failed to load Q&A stream" }), data &&
+                        data.qandas &&
+                        data.qandas.map((qandaBlock) => (_jsx(QandaBlock, { 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)))] })] }));
+}
+export default Stream;

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

@@ -98,6 +98,12 @@ export const nextCommentsApi = createApi({
                     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({

package/dist/esm/store/expertSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+const initialState = {
+    isExpertFormOpen: false,
+    expertView: undefined,
+};
+export const expertSlice = createSlice({
+    name: 'expert',
+    initialState,
+    reducers: {
+        openExpertForm: (state) => {
+            state.isExpertFormOpen = true;
+        },
+        closeExpertForm: (state) => {
+            state.isExpertFormOpen = false;
+        },
+        setExpertView: (state, action) => {
+            state.expertView = action.payload;
+        },
+    },
+});
+export const { openExpertForm, closeExpertForm, setExpertView } = expertSlice.actions;
+export default expertSlice.reducer;

package/dist/esm/store/index.js

@@ -3,12 +3,14 @@ import { setupListeners } from '@reduxjs/toolkit/query';
 import questionReducer from './questionSlice';
 import { stream } from './stream';
 import { user } from './user';
+import expertReducer from './expertSlice';
 import { nextCommentsApi } from '../services/comments-api';
 import { rtkQueryErrorLogger } from '../services/error-middleware';
 export const rootReducer = combineReducers({
     stream: stream.reducer,
     question: questionReducer,
     user: user.reducer,
+    expert: expertReducer,
     nextCommentsApi: nextCommentsApi.reducer,
 });
 export const store = configureStore({

package/dist/qanda.scss

@@ -6,7 +6,6 @@ $app-header-color: #007acc;
 @import '@financial-times/o-forms/main';
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-labels/main';
-@import '@financial-times/o-loading/main';
 @import '@financial-times/o-message/main';
 @import '@financial-times/o3-foundation/css/core.css';
 /* Inlined from ../components/Author/styles.css */
@@ -171,6 +170,11 @@ $app-header-color: #007acc;
     left: 0;
     right: 0;
     display: flex;
+    /* Ensure FAB is on top of ...
+    1. some dinamically loaded teasers at the bottom of the article
+    2. the sharing bar on mobile
+    */
+    z-index: 7;
   }
 
   .floating-action-bar__fade-overlay {
@@ -306,6 +310,24 @@ $app-header-color: #007acc;
   margin-top: var(--o3-spacing-2xs);
 }
 
+/* Inlined from ../components/Loader/styles.scss */
+@import '@financial-times/o-loading/main';
+
+@include oLoading(
+  $opts: (
+    'themes': (
+      'light',
+      'dark',
+    ),
+    'sizes': (
+      'mini',
+      'small',
+      'medium',
+      'large',
+    ),
+  )
+);
+
 /* Inlined from ../components/Overlay/styles.css */
 @import '@financial-times/o3-button/css/core.css';
 
@@ -345,7 +367,8 @@ $app-header-color: #007acc;
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 18;
+    /* Just going on top of the main navigation */
+    z-index: 100;
   }
 
   .overlay__outer {
@@ -359,6 +382,10 @@ $app-header-color: #007acc;
     background: var(--o3-color-palette-black-90);
   }
 
+  .overlay__outer--no-background {
+    background: none;
+  }
+
   .overlay__inner {
     border-radius: var(--o3-spacing-2xs) var(--o3-spacing-2xs) 0 0;
     background: var(--o3-color-use-case-page-background);
@@ -377,6 +404,15 @@ $app-header-color: #007acc;
     }
   }
 
+  .overlay__inner--shadow {
+    @media (min-width: 740px) {
+      width: 420px;
+      box-shadow:
+        -4px 6px 10px 0 rgba(0, 0, 0, 0.15),
+        -4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    }
+  }
+
   .overlay__header {
     border-bottom: 1px solid var(--o3-color-palette-black-10);
     display: flex;
@@ -487,15 +523,6 @@ $app-header-color: #007acc;
 }
 
 .qanda-container {
-  .qanda__blocks-container {
-    max-width: 1220px;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--o3-spacing-l);
-    margin-bottom: var(--o3-spacing-l);
-  }
-
   .qanda-block {
     display: flex;
     flex-direction: column;
@@ -646,6 +673,32 @@ $app-header-color: #007acc;
   }
 }
 
+/* Inlined from ../components/Stream/styles.css */
+@import '@financial-times/o3-foundation/css/core.css';
+
+.qanda-container {
+  .qanda__stream {
+    margin-top: var(--o3-spacing-l);
+  }
+
+  .qanda__stream-title {
+    margin: 0 0 var(--o3-spacing-s);
+  }
+
+  .qanda__stream-loader {
+    align-self: center;
+  }
+
+  .qanda__blocks-container {
+    max-width: 1220px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--o3-spacing-l);
+    margin-bottom: var(--o3-spacing-l);
+  }
+}
+
 
 @include oForms(
   $opts: (
@@ -671,17 +724,6 @@ $app-header-color: #007acc;
   )
 );
 
-@include oLoading(
-  $opts: (
-    'themes': (
-      'light',
-    ),
-    'sizes': (
-      'small',
-    ),
-  )
-);
-
 @include oMessage(
   $opts: (
     'types': (

package/dist/types/components/EmbedFormField/index.d.ts

@@ -1,5 +1,5 @@
 type EmbedFormFieldProps = {
     container?: HTMLElement;
 };
-declare function EmbedFormField({ container }: EmbedFormFieldProps): import("react").JSX.Element;
+declare function EmbedFormField({ container }: EmbedFormFieldProps): import("react").JSX.Element | null;
 export default EmbedFormField;

package/dist/types/components/ExpertDrawer/index.d.ts

@@ -0,0 +1,2 @@
+declare function ExpertDrawer(): import("react").JSX.Element | null;
+export default ExpertDrawer;

package/dist/types/components/Loader/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Loader component that shows the o-loading spinner, defaults to small light variant
+ * @typedef {Object} LoaderProps
+ * @property {('mini'|'small'|'medium'|'large')} [size] - Size variant of the loader.
+ * @property {('dark'|'light')} [theme] - Theme variant of the loader.
+
+ * @property {string} [extraClassNames] - Additional CSS class names to be applied to the loader component for custom styling.
+ */
+export type LoaderProps = {
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    theme?: 'dark' | 'light';
+    extraClassNames?: string;
+};
+export default function Loader({ size, theme, extraClassNames, }: LoaderProps): import("react-dom/src").JSX.Element;

package/dist/types/components/Overlay/index.d.ts

@@ -1,7 +1,12 @@
+type OverlayOptions = {
+    noBackground?: boolean;
+    shadow?: boolean;
+};
 type OverlayProps = {
     title: String;
     children: React.ReactNode;
     closeCallback: () => void;
+    options?: OverlayOptions;
 };
-declare function Overlay({ title, children, closeCallback }: OverlayProps): import("react-dom/src").JSX.Element;
+declare function Overlay({ title, children, closeCallback, options, }: OverlayProps): import("react-dom/src").JSX.Element;
 export default Overlay;

package/dist/types/services/comments-api.d.ts

@@ -30,10 +30,13 @@ type CachedData = {
     updateQA?: QA;
     [key: string]: any;
 };
+type UserRolesTransformed = {
+    expertView: boolean;
+};
 export declare const nextCommentsApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, {
     getQandAStream: import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">;
     getQandAUpdates: import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">;
-    getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
+    getUserRoles: import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">;
     postQuestion: import("@reduxjs/toolkit/query").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
 }, "nextCommentsApi", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
 export declare const useGetQandAStreamQuery: <R extends Record<string, any> = import("@reduxjs/toolkit/query").TSHelpersId<(Omit<{
@@ -310,7 +313,7 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
     startedTimeStamp?: undefined | undefined;
     fulfilledTimeStamp?: undefined | undefined;
 } & {
-    currentData?: any;
+    currentData?: UserRolesTransformed | undefined;
     isUninitialized: false;
     isLoading: false;
     isFetching: false;
@@ -318,8 +321,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
     isError: false;
 }, "isUninitialized"> & {
     isUninitialized: true;
-}) | import("@reduxjs/toolkit/query").TSHelpersOverride<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-    currentData?: any;
+}) | import("@reduxjs/toolkit/query").TSHelpersOverride<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+    currentData?: UserRolesTransformed | undefined;
     isUninitialized: false;
     isLoading: false;
     isFetching: false;
@@ -333,8 +336,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
     isSuccess: true;
     isFetching: true;
     error: undefined;
-} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-    currentData?: any;
+} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+    currentData?: UserRolesTransformed | undefined;
     isUninitialized: false;
     isLoading: false;
     isFetching: false;
@@ -344,8 +347,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
     isSuccess: true;
     isFetching: false;
     error: undefined;
-} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-    currentData?: any;
+} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+    currentData?: UserRolesTransformed | undefined;
     isUninitialized: false;
     isLoading: false;
     isFetching: false;
@@ -353,8 +356,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
     isError: false;
 }, "data" | "fulfilledTimeStamp" | "currentData">>) | ({
     isError: true;
-} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-    currentData?: any;
+} & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+    currentData?: UserRolesTransformed | undefined;
     isUninitialized: false;
     isLoading: false;
     isFetching: false;
@@ -377,7 +380,7 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         startedTimeStamp?: undefined | undefined;
         fulfilledTimeStamp?: undefined | undefined;
     } & {
-        currentData?: any;
+        currentData?: UserRolesTransformed | undefined;
         isUninitialized: false;
         isLoading: false;
         isFetching: false;
@@ -385,8 +388,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         isError: false;
     }, "isUninitialized"> & {
         isUninitialized: true;
-    }) | import("@reduxjs/toolkit/query").TSHelpersOverride<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-        currentData?: any;
+    }) | import("@reduxjs/toolkit/query").TSHelpersOverride<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+        currentData?: UserRolesTransformed | undefined;
         isUninitialized: false;
         isLoading: false;
         isFetching: false;
@@ -400,8 +403,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         isSuccess: true;
         isFetching: true;
         error: undefined;
-    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-        currentData?: any;
+    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+        currentData?: UserRolesTransformed | undefined;
         isUninitialized: false;
         isLoading: false;
         isFetching: false;
@@ -411,8 +414,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         isSuccess: true;
         isFetching: false;
         error: undefined;
-    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-        currentData?: any;
+    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+        currentData?: UserRolesTransformed | undefined;
         isUninitialized: false;
         isLoading: false;
         isFetching: false;
@@ -420,8 +423,8 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         isError: false;
     }, "data" | "fulfilledTimeStamp" | "currentData">>) | ({
         isError: true;
-    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">> & {
-        currentData?: any;
+    } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">> & {
+        currentData?: UserRolesTransformed | undefined;
         isUninitialized: false;
         isLoading: false;
         isFetching: false;
@@ -431,7 +434,7 @@ export declare const useGetQandAStreamQuery: <R extends Record<string, any> = im
         status: import("@reduxjs/toolkit/query").QueryStatus;
     }) => R) | undefined;
 }) | undefined) => [R][R extends any ? 0 : never] & {
-    refetch: () => import("@reduxjs/toolkit/query").QueryActionCreatorResult<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">>;
+    refetch: () => import("@reduxjs/toolkit/query").QueryActionCreatorResult<import("@reduxjs/toolkit/query").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">>;
 }, usePostQuestionMutation: <R extends Record<string, any> = ({
     requestId?: undefined;
     status: import("@reduxjs/toolkit/query").QueryStatus.uninitialized;

package/dist/types/store/expertSlice.d.ts

@@ -0,0 +1,15 @@
+export interface ExpertState {
+    isExpertFormOpen: boolean;
+    expertView?: boolean;
+}
+export declare const expertSlice: import("@reduxjs/toolkit").Slice<ExpertState, {
+    openExpertForm: (state: import("immer").WritableDraft<ExpertState>) => void;
+    closeExpertForm: (state: import("immer").WritableDraft<ExpertState>) => void;
+    setExpertView: (state: import("immer").WritableDraft<ExpertState>, action: {
+        payload: any;
+        type: string;
+    }) => void;
+}, "expert", "expert", import("@reduxjs/toolkit").SliceSelectors<ExpertState>>;
+export declare const openExpertForm: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"expert/openExpertForm">, closeExpertForm: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"expert/closeExpertForm">, setExpertView: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "expert/setExpertView">;
+declare const _default: import("redux").Reducer<ExpertState>;
+export default _default;

package/dist/types/store/index.d.ts

@@ -2,10 +2,12 @@ import { ThunkAction, Action } from '@reduxjs/toolkit';
 import { QuestionState } from './questionSlice';
 import { StreamState } from './stream';
 import { UserState } from './user';
+import { ExpertState } from './expertSlice';
 export declare const rootReducer: import("redux").Reducer<{
     stream: StreamState;
     question: QuestionState;
     user: UserState;
+    expert: ExpertState;
     nextCommentsApi: import("@reduxjs/toolkit/query").CombinedState<{
         getQandAStream: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
@@ -35,7 +37,9 @@ export declare const rootReducer: import("redux").Reducer<{
             commentsAPIUrl: string;
         } & {
             token: string;
-        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            expertView: boolean;
+        }, "nextCommentsApi">;
         postQuestion: import("@reduxjs/toolkit/query").MutationDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -51,6 +55,7 @@ export declare const rootReducer: import("redux").Reducer<{
     stream: StreamState | undefined;
     question: QuestionState | undefined;
     user: UserState | undefined;
+    expert: ExpertState | undefined;
     nextCommentsApi: import("@reduxjs/toolkit/query").CombinedState<{
         getQandAStream: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
@@ -80,7 +85,9 @@ export declare const rootReducer: import("redux").Reducer<{
             commentsAPIUrl: string;
         } & {
             token: string;
-        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            expertView: boolean;
+        }, "nextCommentsApi">;
         postQuestion: import("@reduxjs/toolkit/query").MutationDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -97,11 +104,13 @@ export type RootState = {
     stream: StreamState;
     question: QuestionState;
     user: UserState;
+    expert: ExpertState;
 };
 export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     stream: StreamState;
     question: QuestionState;
     user: UserState;
+    expert: ExpertState;
     nextCommentsApi: import("@reduxjs/toolkit/query").CombinedState<{
         getQandAStream: import("@reduxjs/toolkit/query").QueryDefinition<{
             storyId: string;
@@ -131,7 +140,9 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
             commentsAPIUrl: string;
         } & {
             token: string;
-        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
+        }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+            expertView: boolean;
+        }, "nextCommentsApi">;
         postQuestion: import("@reduxjs/toolkit/query").MutationDefinition<{
             storyId: string;
             useStaging: boolean;
@@ -148,6 +159,7 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
         stream: StreamState;
         question: QuestionState;
         user: UserState;
+        expert: ExpertState;
         nextCommentsApi: import("@reduxjs/toolkit/query").CombinedState<{
             getQandAStream: import("@reduxjs/toolkit/query").QueryDefinition<{
                 storyId: string;
@@ -177,7 +189,9 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
                 commentsAPIUrl: string;
             } & {
                 token: string;
-            }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
+            }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, {
+                expertView: boolean;
+            }, "nextCommentsApi">;
             postQuestion: import("@reduxjs/toolkit/query").MutationDefinition<{
                 storyId: string;
                 useStaging: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "description": "Components for the Live Q&A UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/dist/cjs/components/QandaOComments.js

@@ -1,43 +0,0 @@
-"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/Stream.js

@@ -1,28 +0,0 @@
-"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/esm/components/QandaOComments.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import OComments from '@financial-times/o-comments';
-import { useEffect, useContext } from 'react';
-import { useSelector } from 'react-redux';
-import { QandaContext } from './QandaProvider';
-import { useGetUserRolesQuery } from '../services/comments-api';
-import { qandaReliability } from '../services/reliability';
-function QandaOComments() {
-    const allowedRoles = ['ADMIN', 'MODERATOR'];
-    const { storyId, useStaging, commentsAPIUrl, title } = useContext(QandaContext);
-    const profile = useSelector((state) => state.user.profile);
-    if (!profile) {
-        return null;
-    }
-    const { data: userRole, error, isLoading, } = useGetUserRolesQuery({
-        storyId,
-        useStaging,
-        commentsAPIUrl,
-        token: profile.token,
-    }, { skip: !profile.token });
-    useEffect(() => {
-        if (!userRole) {
-            return;
-        }
-        const { isExpert, isStaffExpert, role } = userRole;
-        const showCoral = isExpert || isStaffExpert || (role && allowedRoles.includes(role));
-        if (showCoral) {
-            try {
-                OComments.init();
-            }
-            catch (error) {
-                qandaReliability.failure('expert-load-coral-ui', error);
-            }
-        }
-    }, [userRole]);
-    return (_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 }));
-}
-export default QandaOComments;

package/dist/esm/components/Stream.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useContext } from 'react';
-import { useSelector } from 'react-redux';
-import QandaBlock from './QandaBlock/index';
-import { QandaContext } from './QandaProvider';
-import { useGetQandAStreamQuery } from '../services/comments-api';
-function Stream() {
-    const latestAnsweredQuestionId = useSelector((state) => state.stream.latestAnsweredQuestionId);
-    const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
-    const { data, error, isLoading } = useGetQandAStreamQuery({
-        storyId,
-        useStaging,
-        commentsAPIUrl,
-    });
-    useEffect(() => {
-        const element = document.getElementById(latestAnsweredQuestionId);
-        element?.scrollIntoView({ behavior: 'smooth' });
-    }, [latestAnsweredQuestionId]);
-    return (_jsxs("div", { className: "qanda__blocks-container", "data-testid": "qanda__blocks-container", id: "qanda__blocks-container", children: [isLoading && _jsx("p", { children: "Loading Stream for you, be patient..." }), error && _jsx("p", { children: "Failed to load Q&A stream" }), data &&
-                data.qandas &&
-                data.qandas.map((qandaBlock) => (_jsx(QandaBlock, { 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)))] }));
-}
-export default Stream;

package/dist/types/components/QandaOComments.d.ts

@@ -1,2 +0,0 @@
-declare function QandaOComments(): import("react").JSX.Element | null;
-export default QandaOComments;