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

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

@@ -4,15 +4,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const react_1 = require("react");
 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)([
+    // Trap keyboard focus within the overlay for accessibility
+    const trapFocus = (event) => {
+        if (event.key !== 'Tab')
+            return;
+        if (event.target === endFocusBtn.current) {
+            titleRef.current?.focus();
+        }
+        else if (event.target === titleRef.current && event.shiftKey) {
+            endFocusBtn.current?.focus();
+        }
+    };
+    const titleRef = (0, react_1.useRef)(null);
+    const endFocusBtn = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        titleRef.current?.focus();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "overlay-title", children: [!options.allowInteraction && (0, jsx_runtime_1.jsx)("div", { className: "overlay__outer" }), (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 })] })] }));
+                ]), 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", id: "overlay-title", tabIndex: 0, ref: titleRef, onKeyDown: trapFocus, 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 })] }), (0, jsx_runtime_1.jsx)("button", { className: "o3-visually-hidden", "aria-label": "Close", onClick: () => closeCallback(), ref: endFocusBtn, onKeyDown: trapFocus, type: "button", children: "Close" })] }));
 }
 exports.default = Overlay;

package/dist/cjs/components/Qanda.js

@@ -26,12 +26,6 @@ function Qanda({ storyId, useStaging, title, commentsAPIHost, commentsAPIVersion
         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 }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: store_1.store, children: (0, jsx_runtime_1.jsx)(QandaProvider_1.QandaProvider, { storyId: storyId, useStaging: useStaging, commentsAPIUrl: cleanCommentsAPIUrl, title: title, maxQuestionLength: maxQuestionLength, children: (0, jsx_runtime_1.jsx)(QandaContainer_1.default, { embedFormFieldContainer: embedFormFieldContainer, countdownTimerContainer: countdownTimerContainer }) }) }));
 }
 exports.default = Qanda;

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

@@ -4,11 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
-const cp_content_pipeline_ui_1 = require("@financial-times/cp-content-pipeline-ui");
+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");
+const tracking_1 = require("../../utils/tracking");
 function renderTime(publishedDate) {
     const date = new Date(publishedDate);
     return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -22,7 +24,7 @@ function interpolateColor(factor, colorStart = 'ccc1b7', colorEnd = '4d4845', al
     const alpha = alphaStart + factor * (alphaEnd - alphaStart);
     return `rgba(${rgb.join(', ')}, ${alpha})`;
 }
-function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = false, }) {
+function QandaBlock({ id, body, children, byline, summary, showAnswerTime = false, }) {
     (0, react_1.useEffect)(() => {
         let currentBubble = null;
         const factorRef = { current: 0 };
@@ -54,7 +56,8 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
                 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})`;
+                // 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;
@@ -71,6 +74,6 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
             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)))] }));
+    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": (0, tracking_1.trackingNS)('question'), children: [summary && ((0, jsx_runtime_1.jsx)("div", { className: "o3-type-headline-sm qanda-block__question-summary", children: summary })), (0, jsx_runtime_1.jsxs)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Question by " }), (0, jsx_runtime_1.jsx)(Byline_1.default, { structuredContent: byline, showEditedBy: false })] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-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": (0, tracking_1.trackingNS)('answer'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "qanda-block__answer-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "o3-type-body-highlight qanda-block__comment-byline", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Reply from " }), 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.jsxs)("span", { className: "o3-type-detail", children: [(0, jsx_runtime_1.jsx)("span", { className: "o3-visually-hidden", children: "Published at " }), renderTime(child.publishedDate)] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o3-type-body-content-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

@@ -9,15 +9,17 @@ 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 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 ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const QandaProvider_1 = require("./QandaProvider");
 const comments_api_1 = require("../services/comments-api");
+const qanda_1 = require("../config/qanda");
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -25,7 +27,20 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
         storyId,
         useStaging,
         commentsAPIUrl,
+        status: 'pre-live',
     });
+    const [ariaMessage, setAriaMessage] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (isLoading) {
+            setAriaMessage(`Loading ${qanda_1.PRODUCT_NAME}`);
+        }
+        else if (error) {
+            setAriaMessage(`Error loading ${qanda_1.PRODUCT_NAME}`);
+        }
+        else if (data) {
+            setAriaMessage(`${qanda_1.PRODUCT_NAME} stream has been updated`);
+        }
+    }, [isLoading, error, data]);
     const updatedQA = (0, comments_api_1.useUpdatedQA)({
         storyId,
         useStaging,
@@ -33,7 +48,7 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     });
     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)({
+    const { data: roleData, error: roleError } = (0, comments_api_1.useGetUserRolesQuery)({
         storyId,
         useStaging,
         commentsAPIUrl,
@@ -53,6 +68,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: [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 })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '16px' }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error, storyId: storyId, operation: "stream-load" }) })), roleError && !error && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '16px' }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: roleError, storyId: storyId, operation: "profile-load" }) })), !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, { isLive: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer, status: status }))] })), (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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QandaContext = void 0;
+exports.QandaProvider = exports.QandaContext = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
 const react_1 = require("react");
 exports.QandaContext = (0, react_1.createContext)({
     storyId: '',
@@ -9,3 +10,32 @@ exports.QandaContext = (0, react_1.createContext)({
     title: '',
     maxQuestionLength: 0,
 });
+const QandaProvider = ({ children, storyId, useStaging, commentsAPIUrl, title, maxQuestionLength = 0, }) => {
+    const dialogOpenerRef = (0, react_1.useRef)(null);
+    const setDialogOpener = (0, react_1.useCallback)((opener) => {
+        dialogOpenerRef.current = opener;
+    }, []);
+    const focusDialogOpener = (0, react_1.useCallback)(() => {
+        dialogOpenerRef.current?.focus();
+        dialogOpenerRef.current = null;
+    }, []);
+    const contextValues = (0, react_1.useMemo)(() => ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    }), [
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        title,
+        maxQuestionLength,
+        setDialogOpener,
+        focusDialogOpener,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.QandaContext.Provider, { value: contextValues, children: children }));
+};
+exports.QandaProvider = QandaProvider;

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

@@ -7,6 +7,7 @@ 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 o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
 const react_1 = require("react");
 const questionSlice_1 = require("../../store/questionSlice");
 const QandaProvider_1 = require("../QandaProvider");
@@ -14,22 +15,39 @@ 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 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 { storyId, useStaging, commentsAPIUrl, maxQuestionLength, focusDialogOpener, } = (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);
+    const MIN_QUESTION_LENGTH = 20;
+    const MAX_QUESTION_LENGTH = maxQuestionLength || 300;
     // 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 (isFormOpen) {
+            o_tracking_1.default.view.init({
+                selector: '.overlay__content-box',
+                getContextData: () => {
+                    return {
+                        ...tracking_1.baseTrackingData,
+                        trigger_action: 'open_question_form',
+                    };
+                },
+            });
+        }
+    }, [isFormOpen]);
     (0, react_1.useEffect)(() => {
         if (userDisplayNameError) {
             dispatch((0, questionSlice_1.updateDisplayNameError)('Sorry, we are unable to update display names. Please try again.'));
@@ -37,7 +55,8 @@ function QuestionForm() {
     }, [userDisplayNameError]);
     (0, react_1.useEffect)(() => {
         setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
-            question.length >= 20));
+            question.length >= MIN_QUESTION_LENGTH &&
+            question.length <= MAX_QUESTION_LENGTH));
     }, [profile?.token, newDisplayName, question]);
     (0, react_1.useEffect)(() => {
         // we want to clear the display name error unless the person has attempted
@@ -46,14 +65,6 @@ function QuestionForm() {
             dispatch((0, questionSlice_1.updateDisplayNameError)(null));
         }
     }, [newDisplayName]);
-    // HANDLING EVENTS
-    const trackEvent = (trackingData) => {
-        const event = new CustomEvent('oTracking.event', {
-            detail: trackingData,
-            bubbles: true,
-        });
-        document.body.dispatchEvent(event);
-    };
     const handleHideDisplayName = (e) => {
         if (!profile?.token && !newDisplayName) {
             dispatch((0, questionSlice_1.updateDisplayNameError)('You need a display name to ask a question, but you can still post it anonymously.'));
@@ -83,20 +94,25 @@ function QuestionForm() {
             }
             if (updatedProfile?.displayName) {
                 // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
-                trackEvent({
-                    category: 'component',
-                    action: 'act',
+                (0, tracking_1.trackEvent)({
+                    content: {
+                        uuid: storyId,
+                    },
                     trigger_action: 'success_set_displayname',
                 });
             }
         }
         try {
+            // set nudge to false if the error is a suspect word, as the user can choose to submit it for moderator review
+            const errorCode = error?.data?.error?.errorCode ?? undefined;
+            const nudge = errorCode !== 'TOXIC_COMMENT';
             await postQuestion({
                 token: updatedProfile?.token || profile?.token || '',
                 storyId,
                 useStaging,
                 commentsAPIUrl,
                 question: question,
+                nudge,
                 postAnonymously,
             }).unwrap();
         }
@@ -109,21 +125,6 @@ function QuestionForm() {
             dispatch((0, questionSlice_1.updateQuestion)(''));
         }
     }, [isSuccess]);
-    if (error) {
-        // TODO: Remove tracking if confirmed that we can use AWS RUM
-        // Note: Events related to the Product, not reliability, should still use tracking
-        trackEvent({
-            category: 'component',
-            action: 'view',
-            trigger_action: 'liveqa_question_form_submit',
-            custom: [
-                {
-                    name: 'state',
-                    value: 'error',
-                },
-            ],
-        });
-    }
     if (!isFormOpen) {
         return;
     }
@@ -132,25 +133,72 @@ function QuestionForm() {
     // 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: () => {
+            focusDialogOpener?.();
             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)([
+            reset();
+        }, children: [profile.isSubscribed && ((0, jsx_runtime_1.jsx)("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", "data-trackable-context-trigger_action": "open question form", children: (0, jsx_runtime_1.jsxs)("form", { "aria-busy": isLoading, onSubmit: handleSubmit, "data-trackable": (0, tracking_1.trackingNS)(`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)' } }), (0, jsx_runtime_1.jsxs)("span", { className: "o3-visually-hidden", children: ["Your user name is", ' '] }), profile.displayName] }) })), !profile?.displayName && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "display-name", className: "question-form__displayname-input o-forms-field", "aria-live": "polite", "aria-atomic": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)([
                                                 'question-form__displayname__input',
                                                 'o-forms-input',
                                                 'o-forms-input--text',
                                                 { 'o-forms-input--invalid': !!displayNameError },
-                                            ]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
-                                                        'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field", children: [(0, jsx_runtime_1.jsx)("span", { class: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsx)("span", { class: "o-forms-input o-forms-input--textarea", children: (0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? 'question-error-message' : undefined }) })] }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
+                                            ]), 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-describedby": "question-form-disclaimer", "aria-invalid": displayNameError ? 'true' : undefined, "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": (0, tracking_1.trackingNS)(`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", className: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
+                                        'o-forms-input',
+                                        'o-forms-input--textarea',
+                                        'input-textarea__container',
+                                        {
+                                            'input-textarea__error': question.length > MAX_QUESTION_LENGTH,
+                                        },
+                                    ]), children: [(0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", "aria-describedby": "question-form-description", placeholder: "Type your question", "aria-invalid": error ? 'true' : undefined, "aria-errormessage": error ? 'question-form-error-message' : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail input-textarea__counter", "aria-label": `Your question is ${question.length} characters long, maximum allowed is ${MAX_QUESTION_LENGTH}`, children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), (0, jsx_runtime_1.jsx)("span", { id: "question-form-description", "aria-live": "polite", className: (0, classnames_1.default)([
+                                'o3-type-detail',
+                                {
+                                    'input--textarea__error-message': question.length > MAX_QUESTION_LENGTH,
+                                },
+                            ]), children: question.length > MAX_QUESTION_LENGTH
+                                ? `Questions must not exceed ${MAX_QUESTION_LENGTH} characters.`
+                                : `Questions must be at least ${MIN_QUESTION_LENGTH} 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)'
+                                ariaLabel: question.length < MIN_QUESTION_LENGTH
+                                    ? `Submit button (disabled until question is at least ${MIN_QUESTION_LENGTH} characters)`
                                     : isLoading
                                         ? 'Submitting...'
                                         : 'Submit your question',
+                                'data-trackable': (0, tracking_1.trackingNS)('question-form__submit-button'),
                             }, 
                             // @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", 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", id: "question-form-disclaimer", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-live": "polite", children: (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." }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", role: "alert", id: "question-form-error-message", children: 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 if you submit, it will need moderator review. This could slow down a reply from our experts',
+                        },
+                        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" })) }), (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

@@ -4,13 +4,15 @@ exports.TERMS_AND_CONDITIONS_URL = exports.COMMUNITY_GUIDELINES_URL = exports.SU
 exports.getTitleByUser = getTitleByUser;
 exports.getTextByUser = getTextByUser;
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const qanda_1 = require("../../config/qanda");
+const tracking_1 = require("../../utils/tracking");
 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';
+        return `${qanda_1.PRODUCT_NAME} guidelines`;
     }
     if (profile.isTrialist) {
         return 'You are still on a trial period';
@@ -20,14 +22,14 @@ function getTitleByUser(profile) {
 }
 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" }), "."] }));
+        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": (0, tracking_1.trackingNS)('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": (0, tracking_1.trackingNS)('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."] }));
+        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": (0, tracking_1.trackingNS)('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."] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { className: "message-box__content-link", "data-trackable": (0, tracking_1.trackingNS)('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."] }));
+    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": (0, tracking_1.trackingNS)('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": (0, tracking_1.trackingNS)('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

@@ -6,25 +6,52 @@ 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 o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
 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 ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
+const tracking_1 = require("../../utils/tracking");
+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)("p", { children: "Failed to load Q&A stream" }), data &&
+    (0, react_1.useEffect)(() => {
+        if (!data || !status)
+            return;
+        o_tracking_1.default.view.init({
+            intersectionObserverThreshold: 0.0001,
+            selector: '.qanda__stream',
+            getContextData: () => {
+                return {
+                    ...tracking_1.baseTrackingData,
+                    custom: [
+                        {
+                            name: 'status',
+                            value: status,
+                        },
+                    ],
+                };
+            },
+        });
+    }, [data, status]);
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", "data-trackable-context-trigger_action": "view qanda container", children: [data && data.qandas.length > 0 && ((0, jsx_runtime_1.jsx)("h2", { className: "o3-type-title-md qanda__stream-title", id: "qanda__stream-title", children: data.status && data.status === 'pre-live'
+                    ? 'Need inspiration? A selection of reader 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)))] })] }));
 }

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const tracking_1 = require("../../utils/tracking");
+function Survey({ storyId, 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}`, className: "o-message__actions__primary", target: "_blank", rel: "noopener noreferrer", "data-trackable": (0, tracking_1.trackingNS)('survey_link'), children: "Share your feedback" }) })] }) }) }));
+}
+exports.default = Survey;

package/dist/cjs/config/qanda.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PRODUCT_NAME = void 0;
+// This file contains configuration settings for the Q&A (AKA Ask an Expert) features of the application.
+// User facing product name
+exports.PRODUCT_NAME = 'Ask an Expert';