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

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const react_1 = require("react");
+const QandaProvider_1 = require("../QandaProvider");
+function LiveIndicator() {
+    return ((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" }) }));
+}
+function FloatingActionBar({ showLiveIndicator = true, }) {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const isMobile = (0, useIsMobile_1.useIsMobile)();
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const updatedComments = (0, comments_api_1.useUpdatedComments)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+    });
+    const handleShowUpdates = () => {
+        (0, updateComments_1.updateComments)(dispatch, updatedComments, storyId, useStaging, commentsAPIUrl);
+        // Scrolling to start of qanda blocks container
+        const element = document.getElementById('qanda__blocks-container');
+        if (element) {
+            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: [showLiveIndicator && (0, jsx_runtime_1.jsx)(LiveIndicator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "floating-action-bar__buttons", children: [(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',
+                                    'data-testid': 'floating-action-bar__back-to-top-button',
+                                }, label: "Back to top", type: "ghost", theme: "mono", icon: "scroll-to", iconOnly: isMobile, onClick: handleShowUpdates })] }), updatedComments?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "floating-action-bar__updates-counter o3-type-detail", children: updatedComments.length }))] })] }));
+}
+exports.default = FloatingActionBar;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+function MessageBox({ color, extraClassNames = '', text, title, id = '', }) {
+    return ((0, jsx_runtime_1.jsx)("div", { class: `o-message o-message--inner message-box__container ${extraClassNames}`, "data-o-message-close": "false", "data-o-component": "o-message", id: id, children: (0, jsx_runtime_1.jsx)("div", { class: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { class: "message-box__content", children: [(0, jsx_runtime_1.jsx)("span", { style: { color }, class: "o3-type-body-highlight", children: title }), (0, jsx_runtime_1.jsx)("span", { style: { color }, class: "o3-type-body-base", children: text })] }) }) }));
+}
+exports.default = MessageBox;

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

@@ -0,0 +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");
+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/Qanda.js

@@ -0,0 +1,37 @@
+"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_redux_1 = require("react-redux");
+const store_1 = require("../store");
+const QandaContainer_1 = __importDefault(require("./QandaContainer"));
+const QandaProvider_1 = require("./QandaProvider");
+function Qanda({ storyId, useStaging, title, commentsAPIHost, commentsAPIVersion, maxQuestionLength, embedFormFieldContainer, countdownTimerContainer, }) {
+    // check we have a valid ft.com url and remove any trailing slashes
+    const allowedHostRegx = /^[\w\-\.]+(\.ft\.com|\.ftweb\.tech)$/i;
+    const allowedVersionRegx = /^v\d+$/i;
+    const validateApiUrl = (url, version) => {
+        const baseURL = new URL(url);
+        if (!allowedHostRegx.test(baseURL.hostname) ||
+            !allowedVersionRegx.test(version)) {
+            console.error('Invalid comments API details provided');
+            return;
+        }
+        return `https://${baseURL.hostname}/qa/${version}`;
+    };
+    const cleanCommentsAPIUrl = validateApiUrl(commentsAPIHost, commentsAPIVersion);
+    if (!storyId || !title || !cleanCommentsAPIUrl) {
+        console.error('Missing required props');
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: store_1.store, children: (0, jsx_runtime_1.jsx)(QandaProvider_1.QandaContext.Provider, { value: {
+                storyId,
+                useStaging,
+                commentsAPIUrl: cleanCommentsAPIUrl,
+                title,
+                maxQuestionLength,
+            }, children: (0, jsx_runtime_1.jsx)(QandaContainer_1.default, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
+}
+exports.default = Qanda;

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

@@ -0,0 +1,78 @@
+"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 Byline_1 = __importDefault(require("@financial-times/cp-content-pipeline-ui/lib/components/Byline"));
+const RichText_1 = __importDefault(require("@financial-times/cp-content-pipeline-ui/lib/components/RichText"));
+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})`;
+                // NB: drop-shadow blur radius is not calculated the same way as box-shadow blur radius, halving it matches
+                currentBubble.style.filter = `drop-shadow(0px 2px 4px ${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)(Byline_1.default, { 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)(RichText_1.default, { 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)(Byline_1.default, { 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)(RichText_1.default, { structuredContent: child.body.structured }) }) })] }, child.id)))] }));
+}
+exports.default = QandaBlock;

package/dist/cjs/components/QandaContainer.js

@@ -0,0 +1,99 @@
+"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 user_1 = require("../store/user");
+const expertSlice_1 = require("../store/expertSlice");
+const QuestionForm_1 = __importDefault(require("./QuestionForm"));
+const Survey_1 = __importDefault(require("./Survey"));
+const ExpertDrawer_1 = __importDefault(require("./ExpertDrawer"));
+const Stream_1 = __importDefault(require("./Stream"));
+const Calendar_1 = __importDefault(require("./Calendar"));
+const CountdownTimer_1 = __importDefault(require("./CountdownTimer"));
+const FloatingActionBar_1 = __importDefault(require("./FloatingActionBar"));
+const EmbedFormField_1 = __importDefault(require("./EmbedFormField"));
+const QandaProvider_1 = require("./QandaProvider");
+const o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
+const comments_api_1 = require("../services/comments-api");
+function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
+    const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const [liveMessage, setLiveMessage] = (0, react_1.useState)('');
+    const { data, error, isLoading } = (0, comments_api_1.useGetQandAStreamQuery)({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        status: 'pre-live',
+    });
+    const [ariaMessage, setAriaMessage] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (isLoading) {
+            setAriaMessage('Loading Q&A');
+        }
+        else if (error) {
+            setAriaMessage('Error loading Q&A');
+        }
+        else if (data) {
+            setAriaMessage('Q&A stream has been updated');
+        }
+    }, [isLoading, error, data]);
+    const updatedQA = (0, comments_api_1.useUpdatedQA)({
+        storyId,
+        useStaging,
+        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 () => {
+            // ensure we reset the api state when the component is unmounted
+            dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
+        };
+    }, [dispatch, storyId]);
+    (0, react_1.useEffect)(() => {
+        if (!data || !status)
+            return;
+        o_tracking_1.default.view.init({
+            selector: '.qanda-container',
+            getContextData: () => {
+                return {
+                    component: {
+                        name: 'liveqa',
+                        type: 'container',
+                        id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
+                    },
+                    content: {
+                        asset_type: 'article',
+                        uuid: storyId,
+                    },
+                    custom: [
+                        {
+                            name: 'status',
+                            value: status,
+                        },
+                    ],
+                };
+            },
+        });
+    }, [data, status]);
+    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: status }), (0, jsx_runtime_1.jsx)(Survey_1.default, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+}
+exports.default = QandaContainer;

package/dist/cjs/components/QandaProvider.js

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

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

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuestionForm;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_redux_1 = require("react-redux");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const questionSlice_1 = require("../../store/questionSlice");
+const QandaProvider_1 = require("../QandaProvider");
+const comments_api_1 = require("../../services/comments-api");
+const Overlay_1 = __importDefault(require("../Overlay"));
+const Loader_1 = __importDefault(require("../Loader"));
+const o3_button_1 = require("@financial-times/o3-button");
+const MessageBox_1 = __importDefault(require("../MessageBox"));
+const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
+const user_1 = require("../../store/user");
+const validate_display_name_1 = __importDefault(require("../../utils/validate-display-name"));
+const messagesByUserType_1 = require("./messagesByUserType");
+const tracking_1 = require("../../utils/tracking");
+function QuestionForm() {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
+    const [postAnonymously, setPostAnonymously] = (0, react_1.useState)(false);
+    const [newDisplayName, setNewDisplayName] = (0, react_1.useState)(null);
+    const [submitEnabled, setSubmitEnabled] = (0, react_1.useState)(false);
+    const { isFormOpen, question, displayNameError } = (0, react_redux_1.useSelector)((state) => state.question);
+    const { profile, error: userDisplayNameError } = (0, react_redux_1.useSelector)((state) => state.user);
+    // NB: reset will have the effect of setting things like error to null and isSuccess to empty
+    // you use this when you want to clear the state of the usePostQuestionMutation hook as if you had just started on the page
+    // as we allow users to see things like error messages and success messages, we do not clear those until we try to send another mutation, otherwise those things will clear too early
+    const [postQuestion, { isLoading, isSuccess, error, reset }] = (0, comments_api_1.usePostQuestionMutation)();
+    (0, react_1.useEffect)(() => {
+        if (userDisplayNameError) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)('Sorry, we are unable to update display names. Please try again.'));
+        }
+    }, [userDisplayNameError]);
+    (0, react_1.useEffect)(() => {
+        setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
+            question.length >= 20));
+    }, [profile?.token, newDisplayName, question]);
+    (0, react_1.useEffect)(() => {
+        // we want to clear the display name error unless the person has attempted
+        // to post anonymously with no display name
+        if (!postAnonymously && newDisplayName && newDisplayName?.length > 0) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)(null));
+        }
+    }, [newDisplayName]);
+    const handleHideDisplayName = (e) => {
+        if (!profile?.token && !newDisplayName) {
+            dispatch((0, questionSlice_1.updateDisplayNameError)('You need a display name to ask a question, but you can still post it anonymously.'));
+        }
+        setPostAnonymously(e.target instanceof HTMLInputElement && e.target.checked);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        reset();
+        let updatedProfile;
+        if (newDisplayName) {
+            const invalidCharacters = (0, validate_display_name_1.default)(newDisplayName);
+            if (invalidCharacters) {
+                dispatch((0, questionSlice_1.updateDisplayNameError)(`The display name contains invalid characters: ${invalidCharacters}`));
+                return;
+            }
+            updatedProfile = await dispatch((0, user_1.getUserProfile)({
+                useStaging,
+                displayName: newDisplayName,
+                commentsAPIUrl,
+            })).unwrap();
+            // The user token is empty when there is no display name set
+            // if there are also no errors, we can assume the display name is taken
+            if (!updatedProfile?.token && !userDisplayNameError) {
+                dispatch((0, questionSlice_1.updateDisplayNameError)('Unfortunately that display name is taken'));
+                return;
+            }
+            if (updatedProfile?.displayName) {
+                // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
+                (0, tracking_1.trackEvent)({
+                    category: 'component',
+                    action: 'act',
+                    trigger_action: 'success_set_displayname',
+                });
+            }
+        }
+        try {
+            await postQuestion({
+                token: updatedProfile?.token || profile?.token || '',
+                storyId,
+                useStaging,
+                commentsAPIUrl,
+                question: question,
+                postAnonymously,
+            }).unwrap();
+        }
+        catch (e) {
+            dispatch((0, questionSlice_1.openForm)());
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (isSuccess) {
+            dispatch((0, questionSlice_1.updateQuestion)(''));
+        }
+    }, [isSuccess]);
+    if (!isFormOpen) {
+        return;
+    }
+    return (
+    // This form will use o-forms fields with o3 styling until o3 components
+    // are implemented by Origami team.
+    // Ticket CI-2770 was created to address this in the future.
+    (0, jsx_runtime_1.jsxs)(Overlay_1.default, { title: "Ask a question", closeCallback: () => {
+            setNewDisplayName(null);
+            dispatch((0, questionSlice_1.closeForm)());
+        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-trackable": `liveqa_submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [(0, jsx_runtime_1.jsx)("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
+                                                'question-form__displayname__input',
+                                                'o-forms-input',
+                                                'o-forms-input--text',
+                                                { 'o-forms-input--invalid': !!displayNameError },
+                                            ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
+                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": `question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}` }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }) })] }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                className: 'overlay__submit-button',
+                                type: 'submit',
+                                disabled: !submitEnabled,
+                                ariaLabel: question.length < 20
+                                    ? 'Submit button (disabled until question is at least 20 characters)'
+                                    : isLoading
+                                        ? 'Submitting...'
+                                        : 'Submit your question',
+                            }, 
+                            // @ts-expect-error - o3 Button is currently accepting a JSX element as label
+                            // but the type definition needs to be updated by Origami team
+                            label: isLoading ? (0, jsx_runtime_1.jsx)(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", extraClassNames: "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)(ErrorMessage_1.default, { error: error, storyId: storyId, errorMapping: {
+                    // Messages for specific error codes
+                    REPEAT_POST: {
+                        title: 'Question already submitted',
+                        message: "You've already submitted this question. Try asking something different and submit again.",
+                    },
+                    REJECTED: {
+                        title: 'Question rejected',
+                        message: 'This question has been rejected for language that violates our guidelines.',
+                    },
+                    RATE_LIMIT_EXCEEDED: {
+                        title: 'Too many questions',
+                        message: 'You are submitting too many questions in a short amount of time. Please wait sometime before submitting another question.',
+                    },
+                    TOXIC_COMMENT: {
+                        title: 'Question blocked',
+                        message: 'Are you sure? The language in your question might violate our community guidelines. You can edit it or submit it for moderator review.',
+                    },
+                    serverError: {
+                        title: 'Server error',
+                        message: 'There was a server error. Please try submitting your question again.',
+                    },
+                    connectionError: {
+                        title: 'Connection error',
+                        message: "You can't submit your question. Check your internet connection or browser settings and try again.",
+                    },
+                    timeoutError: {
+                        title: 'Timeout error',
+                        message: 'The request timed out. Please try submitting your question again.',
+                    },
+                }, operation: "submit-question", id: "question-form-error-message" })), (0, jsx_runtime_1.jsx)(MessageBox_1.default, { extraClassNames: "o-message--notice o-message--inform", title: (0, messagesByUserType_1.getTitleByUser)(profile), text: (0, messagesByUserType_1.getTextByUser)(profile) })] }));
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TERMS_AND_CONDITIONS_URL = exports.COMMUNITY_GUIDELINES_URL = exports.SUBSCRIBE_URL = exports.SIGN_IN_URL = void 0;
+exports.getTitleByUser = getTitleByUser;
+exports.getTextByUser = getTextByUser;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+exports.SIGN_IN_URL = 'https://www.ft.com/login';
+exports.SUBSCRIBE_URL = 'https://subs.ft.com/products';
+exports.COMMUNITY_GUIDELINES_URL = 'https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines';
+exports.TERMS_AND_CONDITIONS_URL = 'https://help.ft.com/help/legal-privacy/terms-conditions';
+function getTitleByUser(profile) {
+    if (profile.isSubscribed) {
+        return 'Q&A guidelines';
+    }
+    if (profile.isTrialist) {
+        return 'You are still on a trial period';
+    }
+    // Same title for anonymous and registered users
+    return 'Asking a question is only available to readers with an FT subscription';
+}
+function getTextByUser(profile) {
+    if (profile.isSubscribed) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__community-guidelines", "data-trackable-context-action": "Community guidelines", href: exports.COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__terms-and-conditions", "data-trackable-context-action": "Terms and conditions", href: exports.TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
+    }
+    if (profile.isTrialist) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["View our full", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-trialist", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
+    }
+    if (profile.isRegistered) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-registered", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
+    }
+    // Anonymous users
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__sign-in-anonymous", "data-trackable-context-action": "Sign in", href: exports.SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-anonymous", "data-trackable-context-action": "Subscribe", href: exports.SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
+}

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

@@ -0,0 +1,37 @@
+"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");
+const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
+function Stream({ status = 'pre-live' }) {
+    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,
+        status,
+    }, 
+    // In comments api, the stream endpoint uses different queries based on the Q&A status (live stream vs pre-live stream),
+    // If the status changes and Qanda receives an update,
+    // we need to force RTK to re-fetch the data and show the appropriate stream.
+    { refetchOnMountOrArgChange: true });
+    (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)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "loading-stream" })), data &&
+                        data.qandas &&
+                        data.qandas.map((qandaBlock) => ((0, jsx_runtime_1.jsx)(index_1.default, { id: qandaBlock.id, body: qandaBlock.body, type: "comment", publishedDate: qandaBlock.publishedDate, author: qandaBlock.author, byline: qandaBlock.byline, showAnswerTime: data.status === 'live', children: qandaBlock.children }, qandaBlock.id)))] })] }));
+}
+exports.default = Stream;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+function Survey({ storyId, status }) {
+    const trackEvent = (trackingData) => {
+        const event = new CustomEvent('oTracking.event', {
+            detail: trackingData,
+            bubbles: true,
+        });
+        document.body.dispatchEvent(event);
+    };
+    const handleClick = () => {
+        trackEvent({
+            category: 'component',
+            component: {
+                name: 'liveqa',
+                type: 'container',
+                id: '663ab2ca-77ca-4b50-873d-1fd2ff21ff08',
+            },
+            action: 'act',
+            trigger_action: 'liveqa_survey_open',
+            content: {
+                asset_type: 'article',
+                uuid: storyId,
+            },
+            custom: [
+                {
+                    name: 'status',
+                    value: status,
+                },
+            ],
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "o-message o-message--action o-message--inform o-message--survey", style: { marginBottom: 'var(--o3-spacing-l)' }, "data-o-message-close": "false", "data-o-component": "o-message", children: (0, jsx_runtime_1.jsx)("div", { className: "o-message__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "o-message__content", children: [(0, jsx_runtime_1.jsx)("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), (0, jsx_runtime_1.jsx)("div", { className: "o-message__actions", children: (0, jsx_runtime_1.jsx)("a", { href: `https://www.feedback.ft.com/c/a/6HTDVvrHSyaKLZ5281McAo?content_id=${storyId}&qa_status=${status}`, onClick: handleClick, className: "o-message__actions__primary", "data-trackable": "liveqa_survey_link", children: "Share your feedback" }) })] }) }) }));
+}
+exports.default = Survey;

package/dist/cjs/hooks/useIsMobile.js

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