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

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

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

package/dist/esm/components/QandaContainer.js

@@ -0,0 +1,94 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useState, useEffect, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getUserProfile } from '../store/user';
+import { setExpertView } from '../store/expertSlice';
+import QuestionForm from './QuestionForm';
+import Survey from './Survey';
+import ExpertDrawer from './ExpertDrawer';
+import Stream from './Stream';
+import Calendar from './Calendar';
+import CountdownTimer from './CountdownTimer';
+import FloatingActionBar from './FloatingActionBar';
+import EmbedFormField from './EmbedFormField';
+import { QandaContext } from './QandaProvider';
+import oTracking from '@financial-times/o-tracking';
+import { useGetQandAStreamQuery, useUpdatedQA, useGetUserRolesQuery, nextCommentsApi, } from '../services/comments-api';
+function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
+    const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+    const dispatch = useDispatch();
+    const [liveMessage, setLiveMessage] = useState('');
+    const { data, error, isLoading } = useGetQandAStreamQuery({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        status: 'pre-live',
+    });
+    const [ariaMessage, setAriaMessage] = useState('');
+    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 = useUpdatedQA({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+    });
+    const status = updatedQA?.status || data?.status || 'pre-live';
+    const profile = useSelector((state) => state.user.profile);
+    const { data: roleData } = useGetUserRolesQuery({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token: profile.token,
+    }, { skip: !profile.token });
+    const expertView = roleData?.expertView;
+    useEffect(() => {
+        if (expertView !== undefined) {
+            dispatch(setExpertView(expertView));
+        }
+    }, [expertView, dispatch]);
+    const showExpertView = useSelector((state) => state.expert.expertView);
+    useEffect(() => {
+        dispatch(getUserProfile({ useStaging, commentsAPIUrl }));
+        return () => {
+            // ensure we reset the api state when the component is unmounted
+            dispatch(nextCommentsApi.util.resetApiState());
+        };
+    }, [dispatch, storyId]);
+    useEffect(() => {
+        if (!data || !status)
+            return;
+        oTracking.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 (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), _jsx(Survey, { storyId: storyId, status: status }), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] })), _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "o3-visually-hidden", children: ariaMessage })] }));
+}
+export default QandaContainer;

package/dist/esm/components/QandaProvider.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const QandaContext = createContext({
+    storyId: '',
+    useStaging: true,
+    commentsAPIUrl: '',
+    title: '',
+    maxQuestionLength: 0,
+});

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { useEffect, useState, useContext } from 'react';
+import { openForm, closeForm, updateQuestion, updateDisplayNameError, } from '../../store/questionSlice';
+import { QandaContext } from '../QandaProvider';
+import { usePostQuestionMutation } from '../../services/comments-api';
+import Overlay from '../Overlay';
+import Loader from '../Loader';
+import { Button } from '@financial-times/o3-button';
+import MessageBox from '../MessageBox';
+import ErrorMessage from '../ErrorMessage';
+import { getUserProfile } from '../../store/user';
+import validateDisplayName from '../../utils/validate-display-name';
+import { getTitleByUser, getTextByUser } from './messagesByUserType';
+import { trackEvent } from '../../utils/tracking';
+export default function QuestionForm() {
+    const dispatch = useDispatch();
+    const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = useContext(QandaContext);
+    const [postAnonymously, setPostAnonymously] = useState(false);
+    const [newDisplayName, setNewDisplayName] = useState(null);
+    const [submitEnabled, setSubmitEnabled] = useState(false);
+    const { isFormOpen, question, displayNameError } = useSelector((state) => state.question);
+    const { profile, error: userDisplayNameError } = 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 }] = usePostQuestionMutation();
+    useEffect(() => {
+        if (userDisplayNameError) {
+            dispatch(updateDisplayNameError('Sorry, we are unable to update display names. Please try again.'));
+        }
+    }, [userDisplayNameError]);
+    useEffect(() => {
+        setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
+            question.length >= 20));
+    }, [profile?.token, newDisplayName, question]);
+    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(updateDisplayNameError(null));
+        }
+    }, [newDisplayName]);
+    const handleHideDisplayName = (e) => {
+        if (!profile?.token && !newDisplayName) {
+            dispatch(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 = validateDisplayName(newDisplayName);
+            if (invalidCharacters) {
+                dispatch(updateDisplayNameError(`The display name contains invalid characters: ${invalidCharacters}`));
+                return;
+            }
+            updatedProfile = await dispatch(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(updateDisplayNameError('Unfortunately that display name is taken'));
+                return;
+            }
+            if (updatedProfile?.displayName) {
+                // NB: we are using a component act event as analytics team can only support existing categories and actions at this time
+                trackEvent({
+                    category: 'component',
+                    action: 'act',
+                    trigger_action: 'success_set_displayname',
+                });
+            }
+        }
+        try {
+            await postQuestion({
+                token: updatedProfile?.token || profile?.token || '',
+                storyId,
+                useStaging,
+                commentsAPIUrl,
+                question: question,
+                postAnonymously,
+            }).unwrap();
+        }
+        catch (e) {
+            dispatch(openForm());
+        }
+    };
+    useEffect(() => {
+        if (isSuccess) {
+            dispatch(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.
+    _jsxs(Overlay, { title: "Ask a question", closeCallback: () => {
+            setNewDisplayName(null);
+            dispatch(closeForm());
+        }, children: [profile.isSubscribed && (_jsx("div", { className: "overlay__content-box overlay__form-box", "data-testid": "question-form-overlay", children: _jsxs("form", { onSubmit: handleSubmit, "data-trackable": `liveqa_submit_question_form_${postAnonymously ? 'anonymous' : 'displayname'}`, children: [_jsxs("div", { className: "overlay__user-container", children: [!postAnonymously && profile?.displayName && (_jsx(_Fragment, { children: _jsxs("span", { className: "overlay__user-container-display-name o3-type-body-highlight", children: [_jsx("i", { className: "overlay__message-icon", style: { maskImage: 'var(--o3-icon-user)' } }), profile.displayName] }) })), !profile?.displayName && (_jsxs("label", { for: "display-name", className: "question-form__displayname-input o-forms-field", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Choose a display name" }) }), _jsxs("span", { className: classNames([
+                                                'question-form__displayname__input',
+                                                'o-forms-input',
+                                                'o-forms-input--text',
+                                                { 'o-forms-input--invalid': !!displayNameError },
+                                            ]), children: [_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 && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_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'}` }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", class: "o-forms-field question-form__question__input", children: [_jsx("span", { class: "o-forms-title", children: _jsx("span", { class: "o3-type-body-highlight", children: "Enter your question" }) }), _jsx("span", { class: "o-forms-input o-forms-input--textarea", children: _jsx("textarea", { id: "question-text", name: "question", value: question, onChange: (e) => dispatch(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" }) })] }), _jsx("span", { className: "o3-type-detail", children: "Questions must be at least 20 characters long." }), _jsx(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 ? _jsx(Loader, {}) : 'Submit your question', type: "primary", theme: "mono" }), !profile?.token && (_jsx("span", { className: "o3-type-detail", children: "Submitting a question will create a community profile with FT." }))] }) })), isSuccess && (_jsx(MessageBox, { color: "#00572C", 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 && (_jsx(ErrorMessage, { 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" })), _jsx(MessageBox, { extraClassNames: "o-message--notice o-message--inform", title: getTitleByUser(profile), text: getTextByUser(profile) })] }));
+}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+export const SIGN_IN_URL = 'https://www.ft.com/login';
+export const SUBSCRIBE_URL = 'https://subs.ft.com/products';
+export const COMMUNITY_GUIDELINES_URL = 'https://help.ft.com/help/article-queries/commenting-on-an-article/commenting-guidelines';
+export const TERMS_AND_CONDITIONS_URL = 'https://help.ft.com/help/legal-privacy/terms-conditions';
+export 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';
+}
+export function getTextByUser(profile) {
+    if (profile.isSubscribed) {
+        return (_jsxs(_Fragment, { children: ["Keep your comments respectful and easy to understand for our global audience. By submitting, you agree to follow our", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__community-guidelines", "data-trackable-context-action": "Community guidelines", href: COMMUNITY_GUIDELINES_URL, target: "_parent", children: "community guidelines" }), ' ', "and", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__terms-and-conditions", "data-trackable-context-action": "Terms and conditions", href: TERMS_AND_CONDITIONS_URL, target: "_parent", children: "terms" }), "."] }));
+    }
+    if (profile.isTrialist) {
+        return (_jsxs(_Fragment, { children: ["View our full", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-trialist", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscription packages" }), ' ', "to join the conversation."] }));
+    }
+    if (profile.isRegistered) {
+        return (_jsxs(_Fragment, { children: [_jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-registered", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "Subscribe" }), ' ', "to join the conversation."] }));
+    }
+    // Anonymous users
+    return (_jsxs(_Fragment, { children: ["Please", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__sign-in-anonymous", "data-trackable-context-action": "Sign in", href: SIGN_IN_URL, target: "_parent", children: "sign in" }), ' ', "or", ' ', _jsx("a", { className: "message-box__content-link", "data-trackable": "question-form__subscribe-anonymous", "data-trackable-context-action": "Subscribe", href: SUBSCRIBE_URL, target: "_parent", children: "subscribe" }), ' ', "to join the conversation."] }));
+}

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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 (_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: _jsx("div", { className: "o-message__container", children: _jsxs("div", { className: "o-message__content", children: [_jsx("p", { className: "o-message__content-main", style: { fontSize: 'var(--o3-type-body-base-font-size)' }, children: "How was your experience?" }), _jsx("div", { className: "o-message__actions", children: _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" }) })] }) }) }));
+}
+export default Survey;

package/dist/esm/hooks/useIsMobile.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export function useIsMobile(breakpoint = 740) {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
+        const update = () => setIsMobile(mediaQuery.matches);
+        update();
+        mediaQuery.addEventListener('change', update);
+        return () => mediaQuery.removeEventListener('change', update);
+    }, [breakpoint]);
+    return isMobile;
+}

package/dist/esm/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { render } from 'preact';
+import Qanda from './components/Qanda';
+import QandaBlock from './components/QandaBlock';
+class QandaUI {
+    constructor(containerElement, options) {
+        this.containerElement = containerElement;
+        this.embedFormFieldContainer =
+            options?.embedFormFieldContainer || document.body;
+        this.countdownTimerContainer =
+            options?.countdownTimerContainer || document.body;
+        if (!options && !containerElement) {
+            throw new Error('Required properties are missing');
+        }
+        const storyId = options?.storyId ?? containerElement.dataset.qandaStoryid;
+        const useStaging = options?.useStaging ??
+            containerElement.dataset.qandaUsestaging === 'true' ??
+            false;
+        const title = options?.title ?? containerElement.dataset.qandaTitle;
+        const commentsAPIHost = options?.commentsAPIHost ?? containerElement.dataset.qandaCommentsapihost;
+        const commentsAPIVersion = options?.commentsAPIVersion ??
+            containerElement.dataset.qandaCommentsapiversion;
+        const maxQuestionLength = options?.maxQuestionLength ??
+            (containerElement.dataset.qandaMaxquestionlength
+                ? parseInt(containerElement.dataset.qandaMaxquestionlength, 10)
+                : undefined) ??
+            2000;
+        if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
+            throw new Error('Required properties are missing');
+        }
+        //TODO: test this doesn't break all the other bits of js, needs to be throw because of typescript, can't just bail out normally
+        this.storyId = storyId;
+        this.useStaging = useStaging;
+        this.title = title;
+        this.commentsAPIHost = commentsAPIHost;
+        this.commentsAPIVersion = commentsAPIVersion;
+        this.maxQuestionLength = maxQuestionLength;
+    }
+    init() {
+        render(_jsx(Qanda, { storyId: this.storyId, useStaging: this.useStaging, title: this.title, commentsAPIHost: this.commentsAPIHost, commentsAPIVersion: this.commentsAPIVersion, maxQuestionLength: this.maxQuestionLength, embedFormFieldContainer: this.embedFormFieldContainer, countdownTimerContainer: this.countdownTimerContainer }), this.containerElement);
+    }
+    destroy() {
+        render(null, this.containerElement);
+    }
+}
+export { QandaUI, QandaBlock };