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

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/QandaBlock/index.js

@@ -8,11 +8,69 @@ const cp_content_pipeline_ui_1 = require("@financial-times/cp-content-pipeline-u
 require("../Expander/index");
 const index_1 = __importDefault(require("../Expander/index"));
 const Author_1 = __importDefault(require("../Author"));
+const react_1 = require("react");
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
 }
+// Get shadow color based on factor
+function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', alphaStart = 0.5, alphaEnd = 0.85) {
+    const hexToRgb = (hex) => hex.match(/[0-9a-f]{2}/g).map((x) => parseInt(x, 16));
+    const startRgb = hexToRgb(colorStart);
+    const endRgb = hexToRgb(colorEnd);
+    const rgb = startRgb.map((val, i) => Math.round(val + (endRgb[i] - val) * factor));
+    const alpha = alphaStart + factor * (alphaEnd - alphaStart);
+    return `rgba(${rgb.join(', ')}, ${alpha})`;
+}
 function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+    (0, react_1.useEffect)(() => {
+        let currentBubble = null;
+        const factorRef = { current: 0 };
+        let animationFrameId;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    if (currentBubble !== entry.target) {
+                        factorRef.current = 0;
+                    }
+                    currentBubble = entry.target;
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: '-50% 0px -50% 0px',
+            threshold: 0,
+        });
+        const comments = document.querySelectorAll('.qanda-block__comment');
+        comments.forEach((comment) => observer.observe(comment));
+        const animate = () => {
+            const centerY = window.innerHeight / 2;
+            if (currentBubble) {
+                const rect = currentBubble.getBoundingClientRect();
+                const commentCenterY = rect.top + rect.height / 2;
+                const distanceRatio = Math.min(Math.abs(centerY - commentCenterY) / centerY, 1);
+                const targetFactor = (1 - distanceRatio) ** 3;
+                factorRef.current += (targetFactor - factorRef.current) * 0.1;
+                const scale = 1 + 0.04 * factorRef.current;
+                const shadow = interpolateColor(factorRef.current);
+                currentBubble.style.transform = `scale(${scale})`;
+                currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
+                if (factorRef.current < 0.001 && distanceRatio > 0.95) {
+                    currentBubble.removeAttribute('style');
+                    currentBubble = null;
+                    factorRef.current = 0;
+                }
+            }
+            animationFrameId = requestAnimationFrame(animate);
+        };
+        animationFrameId = requestAnimationFrame(animate);
+        window.addEventListener('resize', animate);
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+            window.removeEventListener('resize', animate);
+            observer.disconnect();
+        };
+    }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": "liveqa_question", children: [subtitle && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-subtitle", children: subtitle })), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: (0, jsx_runtime_1.jsx)(cp_content_pipeline_ui_1.Byline, { structuredContent: byline, showEditedBy: false }) }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: (0, jsx_runtime_1.jsx)(cp_content_pipeline_ui_1.RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": "liveqa_answer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? ((0, jsx_runtime_1.jsx)(Author_1.default, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : ((0, jsx_runtime_1.jsx)(cp_content_pipeline_ui_1.Byline, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && ((0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-base qanda-block__comment-text", children: (0, jsx_runtime_1.jsx)(index_1.default, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: (0, jsx_runtime_1.jsx)(cp_content_pipeline_ui_1.RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
 }
 exports.default = QandaBlock;

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/QandaBlock/index.js

@@ -3,11 +3,69 @@ import { RichText, Byline } from '@financial-times/cp-content-pipeline-ui';
 import '../Expander/index';
 import Expander from '../Expander/index';
 import Author from '../Author';
+import { useEffect } from 'react';
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
 }
+// Get shadow color based on factor
+function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', alphaStart = 0.5, alphaEnd = 0.85) {
+    const hexToRgb = (hex) => hex.match(/[0-9a-f]{2}/g).map((x) => parseInt(x, 16));
+    const startRgb = hexToRgb(colorStart);
+    const endRgb = hexToRgb(colorEnd);
+    const rgb = startRgb.map((val, i) => Math.round(val + (endRgb[i] - val) * factor));
+    const alpha = alphaStart + factor * (alphaEnd - alphaStart);
+    return `rgba(${rgb.join(', ')}, ${alpha})`;
+}
 function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+    useEffect(() => {
+        let currentBubble = null;
+        const factorRef = { current: 0 };
+        let animationFrameId;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    if (currentBubble !== entry.target) {
+                        factorRef.current = 0;
+                    }
+                    currentBubble = entry.target;
+                }
+            });
+        }, {
+            root: null,
+            rootMargin: '-50% 0px -50% 0px',
+            threshold: 0,
+        });
+        const comments = document.querySelectorAll('.qanda-block__comment');
+        comments.forEach((comment) => observer.observe(comment));
+        const animate = () => {
+            const centerY = window.innerHeight / 2;
+            if (currentBubble) {
+                const rect = currentBubble.getBoundingClientRect();
+                const commentCenterY = rect.top + rect.height / 2;
+                const distanceRatio = Math.min(Math.abs(centerY - commentCenterY) / centerY, 1);
+                const targetFactor = (1 - distanceRatio) ** 3;
+                factorRef.current += (targetFactor - factorRef.current) * 0.1;
+                const scale = 1 + 0.04 * factorRef.current;
+                const shadow = interpolateColor(factorRef.current);
+                currentBubble.style.transform = `scale(${scale})`;
+                currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
+                if (factorRef.current < 0.001 && distanceRatio > 0.95) {
+                    currentBubble.removeAttribute('style');
+                    currentBubble = null;
+                    factorRef.current = 0;
+                }
+            }
+            animationFrameId = requestAnimationFrame(animate);
+        };
+        animationFrameId = requestAnimationFrame(animate);
+        window.addEventListener('resize', animate);
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+            window.removeEventListener('resize', animate);
+            observer.disconnect();
+        };
+    }, []);
     return (_jsxs("div", { className: "qanda-block", children: [_jsxs("div", { className: "qanda-block__comment qanda-block__question", id: id, "data-testid": `qanda-block__question-${id}`, "data-trackable": "liveqa_question", children: [subtitle && (_jsx("div", { className: "o3-type-headline-sm qanda-block__question-subtitle", children: subtitle })), _jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: _jsx(Byline, { structuredContent: byline, showEditedBy: false }) }), _jsx("div", { className: "o3-type-body-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand question", collapseLabel: "Collapse question", id: id, children: _jsx(RichText, { structuredContent: body.structured }) }) })] }, id), children?.map((child) => child.body && (_jsxs("div", { className: "qanda-block__comment qanda-block__answer", "data-testid": `qanda-block__answer-${child.id}`, "data-trackable": "liveqa_answer", children: [_jsxs("div", { className: "qanda-block__answer-header", children: [_jsx("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: child.author ? (_jsx(Author, { byline: child.byline, headshot: child.author.headshot, prefLabel: child.author.prefLabel, role: child.author.role, streamPage: child.author.streamPage })) : (_jsx(Byline, { structuredContent: child.byline, showEditedBy: false })) }), showAnswerTime && (_jsx("span", { className: "o3-type-detail", children: renderTime(child.publishedDate) }))] }), _jsx("div", { className: "o3-type-body-base qanda-block__comment-text", children: _jsx(Expander, { className: "qanda-block__text", expandLabel: "Expand answer", collapseLabel: "Collapse answer", id: id, children: _jsx(RichText, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
 }
 export default QandaBlock;

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) })] }));
 }