@financial-times/qanda-ui 0.0.1-beta.32 → 0.0.1-beta.34

package/dist/cjs/components/Calendar/Apps.js

@@ -12,29 +12,43 @@ const CalendarLink = ({ href, children, }) => {
 function itemChildren(name, icon) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "live-qa-calendar-list__item__text", children: name })] }));
 }
-const description = (url) => `To join the ${qanda_1.PRODUCT_NAME} session, visit: ${url}`;
+const description = (storyId) => `To join the ${qanda_1.PRODUCT_NAME} session, visit: https://www.ft.com/content/${storyId}`;
 const apps = [
     {
         name: 'Gmail',
         icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsxs)("g", { transform: "translate(4, 3.36)", children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8514 7.64502H8.16309V10.8162H12.5564C12.3672 11.841 11.792 12.7093 10.9275 13.2906V15.3476H13.5657C15.1093 13.9204 15.9998 11.8187 15.9998 9.32193C15.9998 8.7406 15.9479 8.18163 15.8514 7.64502Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16315 17.3339C10.3672 17.3339 12.2151 16.5998 13.5658 15.3477L10.9275 13.2907C10.1966 13.7826 9.26149 14.0733 8.16315 14.0733C6.037 14.0733 4.23737 12.6311 3.59544 10.6934H0.868164V12.8174C2.21139 15.4968 4.97206 17.3339 8.16315 17.3339Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.59555 10.6933C3.43228 10.2014 3.33952 9.67595 3.33952 9.13561C3.33952 8.59527 3.43228 8.06984 3.59555 7.57795V5.45386H0.868275C0.315399 6.56062 0 7.81272 0 9.13561C0 10.4585 0.315399 11.7106 0.868275 12.8174L3.59555 10.6933Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16316 4.19816C9.36167 4.19816 10.4377 4.6118 11.2837 5.42417L13.6251 3.07277C12.2114 1.74987 10.3635 0.9375 8.16316 0.9375C4.97206 0.9375 2.21139 2.77465 0.868164 5.45399L3.59544 7.57808C4.23737 5.64031 6.037 4.19816 8.16316 4.19816Z", fill: "black" })] }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(storyId))}&location=${encodeURIComponent(storyId)}`,
     },
     {
         name: 'Outlook',
         icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M21.9979 8.49306V17.3819C22.0068 17.5304 21.987 17.6792 21.9399 17.8185C21.8927 17.9578 21.8194 18.0842 21.7247 18.1894C21.63 18.2946 21.5162 18.3761 21.3909 18.4285C21.2656 18.4809 21.1316 18.5029 20.9981 18.4931H13.9988V22.9375L2 20.9375V4.9375L13.9988 2.9375V7.38194H20.9981C21.1316 7.37212 21.2656 7.39413 21.3909 7.4465C21.5162 7.49886 21.63 7.58037 21.7247 7.68558C21.8194 7.79078 21.8927 7.91724 21.9399 8.0565C21.987 8.19576 22.0068 8.3446 21.9979 8.49306ZM20.9981 8.60417L16.9985 11.1597L13.9988 9.27083V11.0486L16.9985 12.9375L20.9981 10.3819V8.60417ZM7.91939 8.60417C5.81961 8.52639 4.78971 10.5819 4.78971 13.0486C4.78971 15.5153 5.8596 17.4931 7.91939 17.4931C9.7892 17.4931 10.9991 15.6153 10.9991 13.1708C10.9991 10.7264 10.1292 8.72639 7.91939 8.6375M7.60943 10.3819C8.44934 10.3819 9.19926 11.2042 9.19926 12.8819C9.19926 14.5597 8.44934 15.5042 7.60943 15.5042C6.76951 15.5042 6.09958 14.2708 6.09958 12.9375C6.09958 11.6042 6.77951 10.3819 7.60943 10.3819Z", fill: "black" }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${startDateTime}&enddt=${endDateTime}&body=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${startDateTime}&enddt=${endDateTime}&body=${encodeURIComponent(description(storyId))}&location=${encodeURIComponent(storyId)}`,
+    },
+    {
+        name: 'Apple',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M19.8023 9.75502C19.6851 9.84618 17.5884 11.002 17.5884 13.5675C17.5884 16.5367 20.2548 17.5851 20.3362 17.6111C20.3232 17.6762 19.9097 19.0501 18.9297 20.4501C18.0507 21.684 17.1358 22.9115 15.7424 22.9115C14.3522 22.9115 13.994 22.1236 12.3857 22.1236C10.8197 22.1236 10.263 22.9375 8.98671 22.9375C7.71371 22.9375 6.8249 21.798 5.80259 20.398C4.62076 18.7539 3.66357 16.1981 3.66357 13.7759C3.66357 9.88525 6.25189 7.82436 8.80113 7.82436C10.1523 7.82436 11.282 8.69365 12.1317 8.69365C12.9392 8.69365 14.2024 7.77227 15.7424 7.77227C16.3251 7.77227 18.4218 7.82436 19.8023 9.75502ZM15.0098 6.12487C15.6479 5.38907 16.0972 4.36351 16.0972 3.33796C16.0972 3.19796 16.0842 3.05471 16.0582 2.9375C15.0228 2.97657 13.7889 3.61144 13.0466 4.45467C12.4638 5.10257 11.9169 6.12487 11.9169 7.16345C11.9169 7.31972 11.9462 7.476 11.9559 7.52483C12.0243 7.53786 12.1285 7.55088 12.2359 7.55088C13.1671 7.55088 14.3359 6.94531 15.0098 6.12487Z", fill: "black" }) })),
+        getLink: ({ storyId, useStaging, commentsAPIUrl }) => {
+            return `${commentsAPIUrl}/story/${storyId}/invitation${useStaging ? '?staging=1' : ''}`;
+        },
     },
     {
         name: 'Yahoo',
         icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M15.3929 13.7528C15.3614 13.7513 15.3247 13.7506 15.2879 13.7506C13.8674 13.7506 12.7109 14.8793 12.6659 16.2886V16.2931C12.7049 17.6536 13.8172 18.7411 15.1837 18.7411C15.2182 18.7411 15.2519 18.7403 15.2857 18.7388H15.2812C15.3194 18.7411 15.3637 18.7418 15.4087 18.7418C16.8217 18.7418 17.9737 17.6228 18.0269 16.2226V16.2181C18.0037 14.8501 16.8892 13.7498 15.5174 13.7498C15.4739 13.7498 15.4304 13.7513 15.3869 13.7528H15.3929ZM0.75293 7.97933L5.57993 18.8138L3.84593 22.7221H8.09168L14.5214 7.97933H10.3042L7.67993 14.2868L5.08343 7.97933H0.75368H0.75293ZM18.4297 3.15308L14.1277 12.8161H18.9359L23.2469 3.15308H18.4297Z", fill: "black" }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(url))}&in_loc=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(storyId))}&in_loc=${encodeURIComponent(storyId)}`,
     },
 ];
 exports.default = apps.map(({ name, icon, getLink }) => ({
     name,
     icon,
-    link: ({ title, startDateTime, endDateTime, url, }) => {
-        const href = getLink({ title, startDateTime, endDateTime, url });
+    link: ({ title, startDateTime, endDateTime, storyId, useStaging, commentsAPIUrl, }) => {
+        const href = getLink({
+            title,
+            startDateTime,
+            endDateTime,
+            storyId,
+            useStaging,
+            commentsAPIUrl,
+        });
         return (0, jsx_runtime_1.jsx)(CalendarLink, { href: href, children: itemChildren(name, icon) });
     },
 }));

package/dist/cjs/components/Calendar/CalendarListItem.js

@@ -17,7 +17,9 @@ function CalendarListItem({ name, link }) {
                 title,
                 startDateTime: data.startDateTime,
                 endDateTime: data.endDateTime,
-                url: `https://www.ft.com/content/${storyId}`,
+                storyId,
+                useStaging,
+                commentsAPIUrl,
                 children: name,
             }) })) }));
 }

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

@@ -1,12 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("preact/jsx-runtime");
+const o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
 const react_redux_1 = require("react-redux");
 const questionSlice_1 = require("../../store/questionSlice");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const qanda_1 = require("../../config/qanda");
-function EmbedFormField({ container }) {
+const tracking_1 = require("../../utils/tracking");
+function EmbedFormField({ container, status = 'pre-live', }) {
     const dispatch = (0, react_redux_1.useDispatch)();
     const [portalTarget, setPortalTarget] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -14,12 +19,13 @@ function EmbedFormField({ container }) {
             const portalContainer = document.createElement('div');
             container.prepend(portalContainer);
             setPortalTarget(portalContainer);
+            o_tracking_1.default.click.init('cta', '[data-component=embed-form-field]');
             return () => {
                 portalContainer.remove();
             };
         }
     }, []);
-    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", qanda_1.PRODUCT_NAME, (0, jsx_runtime_1.jsxs)("div", { onClick: () => dispatch((0, questionSlice_1.openForm)()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "embed-form-field__icon", children: (0, jsx_runtime_1.jsx)("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    const portalElement = ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", qanda_1.PRODUCT_NAME, (0, jsx_runtime_1.jsxs)("div", { onClick: () => dispatch((0, questionSlice_1.openForm)()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": (0, tracking_1.trackingNS)(`embed-form-field-${status}`), "data-component": "embed-form-field", children: [(0, jsx_runtime_1.jsx)("span", { className: "embed-form-field__icon", children: (0, jsx_runtime_1.jsx)("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)(portalElement, portalTarget || document.body) });
 }
 exports.default = EmbedFormField;

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

@@ -60,8 +60,8 @@ function Expander({ className = '', children = [], expandLabel = 'Expand', colla
     const componentClassName = `${expandCollapseClass} ${className}`;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `${componentClassName}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `expander__text ${requiresExpander ? 'expander__text--multiline' : ''}`, id: expanderContentID, ref: textRef, children: (0, jsx_runtime_1.jsx)(EnsureParagraph, { children: children }) }), requiresExpander && ((0, jsx_runtime_1.jsx)(o3_button_1.Button, { label: label, type: "ghost", theme: "neutral", icon: state === 'expanded' ? 'chevron-up' : 'chevron-down', iconOnly: false, iconPosition: "end", attributes: {
                     className: 'expander__link',
-                    'data-trackable': (0, tracking_1.trackingNS)('expander'),
-                    'data-trackable-context-action': label,
+                    'data-trackable': (0, tracking_1.trackingNS)(`expander-${state}`),
+                    'data-trackable-context-trigger_action': label,
                     'aria-expanded': state === 'expanded' ? true : false,
                     'aria-controls': expanderContentID,
                     'data-action': state === 'expanded' ? 'collapse' : 'expand',

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

@@ -55,7 +55,7 @@ function FloatingActionBar({ isLive = true }) {
                                 }, label: view.description, 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': (0, tracking_1.trackingNS)('back_to_top'),
-                                    'data-trackable-context-action': 'Back to top',
+                                    'data-trackable-context-trigger_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", "aria-label": `${updatedComments.length} new ${updatedComments.length === 1 ? 'update' : 'updates'} available`, role: "status", "aria-live": "polite", children: updatedComments.length }))] })] }));
 }

package/dist/cjs/components/QandaContainer.js

@@ -17,10 +17,8 @@ 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");
 const qanda_1 = require("../config/qanda");
-const tracking_1 = require("../utils/tracking");
 function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -69,24 +67,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             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 {
-                    ...tracking_1.baseTrackingData,
-                    custom: [
-                        {
-                            name: 'status',
-                            value: status,
-                        },
-                    ],
-                };
-            },
-        });
-    }, [data, status]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " 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, { isLive: 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 })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load ", qanda_1.PRODUCT_NAME, " 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, { 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/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");
@@ -34,6 +35,19 @@ function QuestionForm() {
     // 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.'));
@@ -117,7 +131,7 @@ function QuestionForm() {
     (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": (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)' } }), 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)([
+        }, 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", { 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)' } }), 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',
@@ -146,6 +160,7 @@ function QuestionForm() {
                                     : isLoading
                                         ? 'Submitting...'
                                         : 'Submit your question',
+                                dataTrackable: (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

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

@@ -6,11 +6,13 @@ 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");
 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);
@@ -28,7 +30,26 @@ function Stream({ status = 'pre-live' }) {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });
     }, [latestAnsweredQuestionId]);
-    return ((0, jsx_runtime_1.jsxs)("section", { className: "qanda__stream", 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'
+    (0, react_1.useEffect)(() => {
+        if (!data || !status)
+            return;
+        o_tracking_1.default.view.init({
+            intersectionObserverThreshold: 0.1,
+            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'
                     ? '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 &&

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

@@ -48,18 +48,16 @@ exports.nextCommentsApi = (0, react_1.createApi)({
                         console.log(`Connected to SSE: ${sseEndpoint}`);
                         const state = getState();
                         const lastEventId = state.stream.mostRecentUpdateTime;
-                        if (lastEventId !== null && lastEventId !== undefined) {
-                            try {
-                                await dispatch(exports.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
-                                    storyId: arg.storyId,
-                                    useStaging: arg.useStaging,
-                                    commentsAPIUrl: arg.commentsAPIUrl,
-                                    lastEventId: `${lastEventId}`,
-                                }));
-                            }
-                            catch (error) {
-                                reliability_1.qandaReliability.failure('qa-updates', error);
-                            }
+                        try {
+                            await dispatch(exports.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
+                                storyId: arg.storyId,
+                                useStaging: arg.useStaging,
+                                commentsAPIUrl: arg.commentsAPIUrl,
+                                ...(lastEventId && { lastEventId: `${lastEventId}` }),
+                            }, { forceRefetch: true }));
+                        }
+                        catch (error) {
+                            reliability_1.qandaReliability.failure('qa-updates', error);
                         }
                     };
                     exports.eventSource.onmessage = (event) => {
@@ -117,14 +115,27 @@ exports.nextCommentsApi = (0, react_1.createApi)({
         }),
         // CATCHUP UPDATES
         getCatchupUpdates: builder.query({
-            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => `${commentsAPIUrl}/story/${storyId}/catchup-updates?${useStaging ? 'staging=1&' : ''}${`lastEventId=${lastEventId}`}`,
+            query: ({ storyId, useStaging, commentsAPIUrl, lastEventId, }) => {
+                const params = new URLSearchParams();
+                if (useStaging) {
+                    params.append('staging', '1');
+                }
+                if (lastEventId) {
+                    params.append('lastEventId', lastEventId);
+                }
+                const queryString = params.toString();
+                return `${commentsAPIUrl}/story/${storyId}/catchup-updates${queryString ? `?${queryString}` : ''}`;
+            },
             transformResponse: (response) => {
-                const updatedComments = response?.comments.map((comment) => {
-                    return comment.data;
-                });
+                const updatedComments = Array.isArray(response?.comments)
+                    ? response.comments.map((comment) => {
+                        return comment.data;
+                    })
+                    : [];
                 return {
                     updatedComments,
-                    lastEventId: response?.lastEventId,
+                    status: response?.status ?? null,
+                    lastEventId: response?.lastEventId ?? null,
                 };
             },
         }),

package/dist/cjs/services/listeners-middleware.js

@@ -18,7 +18,7 @@ exports.listenerMiddleware = (0, toolkit_1.createListenerMiddleware)();
  * Calculates the most recent update timestamp and answer id from a Q&A question
  *
  * @param qandas - A Comment object representing a question with nested answers
- * @returns Object containing mostRecentUpdateTime (timestamp) and mostRecentUpdateId (answer id)
+ * @returns Object containing mostRecentUpdateTime (answer timestamp) and mostRecentUpdateId (answer id)
  *
  * @example
  * const { mostRecentUpdateTime, mostRecentUpdateId } = getMostRecentUpdate(qandas);
@@ -38,6 +38,28 @@ function getMostRecentUpdate(qandaComment) {
     }
     return { mostRecentUpdateTime, mostRecentUpdateId };
 }
+/**
+ * Shallow compares two StreamStatus objects to determine if they are identical
+ *
+ * Performs a shallow comparison of all properties between the previous and new status
+ * entries. Used to prevent unnecessary updates when the status hasn't actually changed.
+ *
+ * @param previousEntry - The previous StreamStatus object to compare
+ * @param newEntry - The new StreamStatus object to compare against
+ * @returns True if all properties are identical, false otherwise
+ */
+function isSameStatus(previousEntry, newEntry) {
+    if (Object.keys(previousEntry).length !== Object.keys(newEntry).length) {
+        return false;
+    }
+    for (const key in previousEntry) {
+        const typedKey = key;
+        if (previousEntry[typedKey] !== newEntry[typedKey]) {
+            return false;
+        }
+    }
+    return true;
+}
 /**
  * Listener: Updates most recent timestamp and initiates catchup when live Q&A stream data is fetched
  *
@@ -51,12 +73,17 @@ function getMostRecentUpdate(qandaComment) {
  * @dispatches setStreamStartMostRecentAnswerId - Updates stream.streamStartMostRecentAnswerId in Redux store
  * @dispatches nextCommentsApi.endpoints.getCatchupUpdates.initiate - Triggers catchup request for missed updates
  */
+// TODO: consider when this should run now that we have state changes too.
+// consider that it will run on every live stream query, not just the first one.
+// therefore it will happen on state change, and on first load maybe twice.
 exports.listenerMiddleware.startListening({
     matcher: (0, toolkit_1.isAnyOf)(comments_api_1.nextCommentsApi.endpoints.getQandAStream.matchFulfilled),
     effect: (action, listenerApi) => {
+        const state = listenerApi.getState();
         const { payload, meta } = action;
         const { storyId, useStaging, commentsAPIUrl, status } = meta.arg.originalArgs;
-        // Check if this is a live stream QUERY, not response. If it is a live query we get questions and answers.
+        // Check if this is a live stream QUERY, not response. If it is a live QUERY we will get questions and answers. This will fire when stream starts in live mode or switches to live mode for first time.
+        const isPreLiveStream = status === 'pre-live';
         const isLiveStream = status === 'live';
         if (isLiveStream &&
             Array.isArray(payload.qandas) &&
@@ -68,54 +95,76 @@ exports.listenerMiddleware.startListening({
                 listenerApi.dispatch((0, stream_1.setMostRecentUpdateTime)(`${mostRecentUpdateTime}`));
                 listenerApi.dispatch((0, stream_1.setStreamLoadMostRecentAnswerId)(mostRecentUpdateId));
             }
+        }
+        const { mostRecentUpdateTime } = state.stream;
+        if (isPreLiveStream || isLiveStream) {
             listenerApi.dispatch(comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.initiate({
-                storyId: storyId,
-                useStaging: useStaging,
-                commentsAPIUrl: commentsAPIUrl,
-                lastEventId: `${mostRecentUpdateTime}`,
+                storyId,
+                useStaging,
+                commentsAPIUrl,
+                ...(mostRecentUpdateTime && {
+                    lastEventId: `${mostRecentUpdateTime}`,
+                }),
             }));
         }
     },
 });
 /**
- * Listener: Updates updates cache and most recent update when catchup comments are received
+ * Listener: Processes successful catchup updates and manages comment/status updates
  *
- * Responds to successful getCatchupUpdates queries and adds them to the updates list.
- * Filters out comments that match the most recent update from the stream to avoid
- * duplicates caused by latency between coral and valkey stream updates.
+ * Responds to successful getCatchupUpdates queries and processes the response:
+ * - Adds new comments to the updates cache, filtering out duplicates
+ * - Updates status when changes are detected compared to the last status
+ * - Updates the most recent timestamp for future catchup requests
  *
  * @listens nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled
  * @dispatches nextCommentsApi.util.updateQueryData - Updates the cache of updated comments in the store
  * @dispatches setMostRecentUpdateTime - Updates stream.mostRecentUpdateTime with new lastEventId
+ * @dispatches nextCommentsApi.util.updateQueryData - Updates the status if it has changed
  */
 exports.listenerMiddleware.startListening({
     matcher: comments_api_1.nextCommentsApi.endpoints.getCatchupUpdates.matchFulfilled,
     effect: (action, listenerApi) => {
         const { payload, meta } = action;
         const { storyId, useStaging, commentsAPIUrl } = meta.arg.originalArgs;
-        const { updatedComments, lastEventId } = payload;
-        if (!updatedComments)
+        const { updatedComments, status, lastEventId = null } = payload;
+        if (!updatedComments && !status)
             return;
-        console.log('Received catchup updates, new event id:', lastEventId);
-        const updateType = comments_api_1.updateTypes['QA_NEW_REPLY'];
         const state = listenerApi.getState();
-        const { streamLoadMostRecentAnswerId, mostRecentUpdateTime: mostRecentInStreamTime, } = state.stream;
-        // filter out catchup comments that are the same as the most recent update in the stream list, which can happen on first load
-        // there is latency between the comment being saved in coral and then added to our valkey stream. Updates after this will all come from valkey.
-        const filteredComments = updatedComments.filter((comment) => {
-            const { mostRecentUpdateId, mostRecentUpdateTime } = getMostRecentUpdate(comment);
-            if (streamLoadMostRecentAnswerId === mostRecentUpdateId &&
-                mostRecentInStreamTime === `${mostRecentUpdateTime}`) {
-                return false;
+        // check for new updated comments
+        if (Array.isArray(updatedComments) && updatedComments.length > 0) {
+            const updateType = comments_api_1.updateTypes['QA_NEW_REPLY'];
+            const { streamLoadMostRecentAnswerId, mostRecentUpdateTime: mostRecentInStreamTime, } = state.stream;
+            // filter out catchup comments that are the same as the most recent update in the stream list, which can happen on first load when the valkey and coral response timestamps don't match
+            // there is latency between the comment being saved in coral and then added to our valkey stream. Updates after this will all come from valkey.
+            const filteredComments = updatedComments.filter((comment) => {
+                const { mostRecentUpdateId, mostRecentUpdateTime } = getMostRecentUpdate(comment);
+                if (streamLoadMostRecentAnswerId === mostRecentUpdateId &&
+                    mostRecentInStreamTime === `${mostRecentUpdateTime}`) {
+                    return false;
+                }
+                return true;
+            });
+            if (Array.isArray(filteredComments) && filteredComments.length) {
+                listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
+                    draft[updateType] = draft[updateType] || [];
+                    draft[updateType].push(...filteredComments);
+                }));
             }
-            return true;
-        });
-        if (Array.isArray(filteredComments) && filteredComments.length) {
+            listenerApi.dispatch((0, stream_1.setMostRecentUpdateTime)(lastEventId));
+        }
+        // check for status updates
+        if (status) {
+            const updateType = comments_api_1.updateTypes['QA_UPDATE'];
             listenerApi.dispatch(comments_api_1.nextCommentsApi.util.updateQueryData('getQandAUpdates', { storyId, useStaging, commentsAPIUrl }, (draft) => {
                 draft[updateType] = draft[updateType] || [];
-                draft[updateType].push(...filteredComments);
+                // in order to avoid unnecessary updates, we check if the last update is identical to the new status. we only push changed status updates.
+                if (draft[updateType].length > 0 &&
+                    isSameStatus(draft[updateType].at(-1), status)) {
+                    return;
+                }
+                draft[updateType] = [status];
             }));
         }
-        listenerApi.dispatch((0, stream_1.setMostRecentUpdateTime)(lastEventId));
     },
 });

package/dist/cjs/store/updateComments.js

@@ -34,7 +34,7 @@ const updateComments = (dispatch, updatedComments, storyId, useStaging, comments
         dispatch((0, stream_1.setLatestAnsweredQuestionId)(latestAnsweredQuestionId));
     }
     catch (error) {
-        console.log('error', error);
+        console.error('error', error);
     }
 };
 exports.updateComments = updateComments;

package/dist/esm/components/Calendar/Apps.js

@@ -10,29 +10,43 @@ const CalendarLink = ({ href, children, }) => {
 function itemChildren(name, icon) {
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: "live-qa-calendar-list__item__icon", children: icon }), _jsx("span", { className: "live-qa-calendar-list__item__text", children: name })] }));
 }
-const description = (url) => `To join the ${PRODUCT_NAME} session, visit: ${url}`;
+const description = (storyId) => `To join the ${PRODUCT_NAME} session, visit: https://www.ft.com/content/${storyId}`;
 const apps = [
     {
         name: 'Gmail',
         icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsxs("g", { transform: "translate(4, 3.36)", children: [_jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8514 7.64502H8.16309V10.8162H12.5564C12.3672 11.841 11.792 12.7093 10.9275 13.2906V15.3476H13.5657C15.1093 13.9204 15.9998 11.8187 15.9998 9.32193C15.9998 8.7406 15.9479 8.18163 15.8514 7.64502Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16315 17.3339C10.3672 17.3339 12.2151 16.5998 13.5658 15.3477L10.9275 13.2907C10.1966 13.7826 9.26149 14.0733 8.16315 14.0733C6.037 14.0733 4.23737 12.6311 3.59544 10.6934H0.868164V12.8174C2.21139 15.4968 4.97206 17.3339 8.16315 17.3339Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.59555 10.6933C3.43228 10.2014 3.33952 9.67595 3.33952 9.13561C3.33952 8.59527 3.43228 8.06984 3.59555 7.57795V5.45386H0.868275C0.315399 6.56062 0 7.81272 0 9.13561C0 10.4585 0.315399 11.7106 0.868275 12.8174L3.59555 10.6933Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16316 4.19816C9.36167 4.19816 10.4377 4.6118 11.2837 5.42417L13.6251 3.07277C12.2114 1.74987 10.3635 0.9375 8.16316 0.9375C4.97206 0.9375 2.21139 2.77465 0.868164 5.45399L3.59544 7.57808C4.23737 5.64031 6.037 4.19816 8.16316 4.19816Z", fill: "black" })] }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(storyId))}&location=${encodeURIComponent(storyId)}`,
     },
     {
         name: 'Outlook',
         icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsx("path", { d: "M21.9979 8.49306V17.3819C22.0068 17.5304 21.987 17.6792 21.9399 17.8185C21.8927 17.9578 21.8194 18.0842 21.7247 18.1894C21.63 18.2946 21.5162 18.3761 21.3909 18.4285C21.2656 18.4809 21.1316 18.5029 20.9981 18.4931H13.9988V22.9375L2 20.9375V4.9375L13.9988 2.9375V7.38194H20.9981C21.1316 7.37212 21.2656 7.39413 21.3909 7.4465C21.5162 7.49886 21.63 7.58037 21.7247 7.68558C21.8194 7.79078 21.8927 7.91724 21.9399 8.0565C21.987 8.19576 22.0068 8.3446 21.9979 8.49306ZM20.9981 8.60417L16.9985 11.1597L13.9988 9.27083V11.0486L16.9985 12.9375L20.9981 10.3819V8.60417ZM7.91939 8.60417C5.81961 8.52639 4.78971 10.5819 4.78971 13.0486C4.78971 15.5153 5.8596 17.4931 7.91939 17.4931C9.7892 17.4931 10.9991 15.6153 10.9991 13.1708C10.9991 10.7264 10.1292 8.72639 7.91939 8.6375M7.60943 10.3819C8.44934 10.3819 9.19926 11.2042 9.19926 12.8819C9.19926 14.5597 8.44934 15.5042 7.60943 15.5042C6.76951 15.5042 6.09958 14.2708 6.09958 12.9375C6.09958 11.6042 6.77951 10.3819 7.60943 10.3819Z", fill: "black" }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${startDateTime}&enddt=${endDateTime}&body=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${startDateTime}&enddt=${endDateTime}&body=${encodeURIComponent(description(storyId))}&location=${encodeURIComponent(storyId)}`,
+    },
+    {
+        name: 'Apple',
+        icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsx("path", { d: "M19.8023 9.75502C19.6851 9.84618 17.5884 11.002 17.5884 13.5675C17.5884 16.5367 20.2548 17.5851 20.3362 17.6111C20.3232 17.6762 19.9097 19.0501 18.9297 20.4501C18.0507 21.684 17.1358 22.9115 15.7424 22.9115C14.3522 22.9115 13.994 22.1236 12.3857 22.1236C10.8197 22.1236 10.263 22.9375 8.98671 22.9375C7.71371 22.9375 6.8249 21.798 5.80259 20.398C4.62076 18.7539 3.66357 16.1981 3.66357 13.7759C3.66357 9.88525 6.25189 7.82436 8.80113 7.82436C10.1523 7.82436 11.282 8.69365 12.1317 8.69365C12.9392 8.69365 14.2024 7.77227 15.7424 7.77227C16.3251 7.77227 18.4218 7.82436 19.8023 9.75502ZM15.0098 6.12487C15.6479 5.38907 16.0972 4.36351 16.0972 3.33796C16.0972 3.19796 16.0842 3.05471 16.0582 2.9375C15.0228 2.97657 13.7889 3.61144 13.0466 4.45467C12.4638 5.10257 11.9169 6.12487 11.9169 7.16345C11.9169 7.31972 11.9462 7.476 11.9559 7.52483C12.0243 7.53786 12.1285 7.55088 12.2359 7.55088C13.1671 7.55088 14.3359 6.94531 15.0098 6.12487Z", fill: "black" }) })),
+        getLink: ({ storyId, useStaging, commentsAPIUrl }) => {
+            return `${commentsAPIUrl}/story/${storyId}/invitation${useStaging ? '?staging=1' : ''}`;
+        },
     },
     {
         name: 'Yahoo',
         icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsx("path", { d: "M15.3929 13.7528C15.3614 13.7513 15.3247 13.7506 15.2879 13.7506C13.8674 13.7506 12.7109 14.8793 12.6659 16.2886V16.2931C12.7049 17.6536 13.8172 18.7411 15.1837 18.7411C15.2182 18.7411 15.2519 18.7403 15.2857 18.7388H15.2812C15.3194 18.7411 15.3637 18.7418 15.4087 18.7418C16.8217 18.7418 17.9737 17.6228 18.0269 16.2226V16.2181C18.0037 14.8501 16.8892 13.7498 15.5174 13.7498C15.4739 13.7498 15.4304 13.7513 15.3869 13.7528H15.3929ZM0.75293 7.97933L5.57993 18.8138L3.84593 22.7221H8.09168L14.5214 7.97933H10.3042L7.67993 14.2868L5.08343 7.97933H0.75368H0.75293ZM18.4297 3.15308L14.1277 12.8161H18.9359L23.2469 3.15308H18.4297Z", fill: "black" }) })),
-        getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(url))}&in_loc=${encodeURIComponent(url)}`,
+        getLink: ({ title, startDateTime, endDateTime, storyId }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(storyId))}&in_loc=${encodeURIComponent(storyId)}`,
     },
 ];
 export default apps.map(({ name, icon, getLink }) => ({
     name,
     icon,
-    link: ({ title, startDateTime, endDateTime, url, }) => {
-        const href = getLink({ title, startDateTime, endDateTime, url });
+    link: ({ title, startDateTime, endDateTime, storyId, useStaging, commentsAPIUrl, }) => {
+        const href = getLink({
+            title,
+            startDateTime,
+            endDateTime,
+            storyId,
+            useStaging,
+            commentsAPIUrl,
+        });
         return _jsx(CalendarLink, { href: href, children: itemChildren(name, icon) });
     },
 }));

package/dist/esm/components/Calendar/CalendarListItem.js

@@ -15,7 +15,9 @@ function CalendarListItem({ name, link }) {
                 title,
                 startDateTime: data.startDateTime,
                 endDateTime: data.endDateTime,
-                url: `https://www.ft.com/content/${storyId}`,
+                storyId,
+                useStaging,
+                commentsAPIUrl,
                 children: name,
             }) })) }));
 }

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import oTracking from '@financial-times/o-tracking';
 import { useDispatch } from 'react-redux';
 import { openForm } from '../../store/questionSlice';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PRODUCT_NAME } from '../../config/qanda';
-function EmbedFormField({ container }) {
+import { trackingNS } from '../../utils/tracking';
+function EmbedFormField({ container, status = 'pre-live', }) {
     const dispatch = useDispatch();
     const [portalTarget, setPortalTarget] = useState();
     useEffect(() => {
@@ -12,12 +14,13 @@ function EmbedFormField({ container }) {
             const portalContainer = document.createElement('div');
             container.prepend(portalContainer);
             setPortalTarget(portalContainer);
+            oTracking.click.init('cta', '[data-component=embed-form-field]');
             return () => {
                 portalContainer.remove();
             };
         }
     }, []);
-    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", PRODUCT_NAME, _jsxs("div", { onClick: () => dispatch(openForm()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
+    const portalElement = (_jsxs("div", { className: "qanda-portal embed-form-field__container o3-type-body-highlight", children: ["Submit your question for ", PRODUCT_NAME, _jsxs("div", { onClick: () => dispatch(openForm()), className: "embed-form-field__text-input o3-type-body-lg", "data-testid": "embed-form-field", "data-trackable": trackingNS(`embed-form-field-${status}`), "data-component": "embed-form-field", children: [_jsx("span", { className: "embed-form-field__icon", children: _jsx("i", { style: { maskImage: 'var(--o3-icon-user)' } }) }), "Enter your question"] })] }));
     return _jsx(_Fragment, { children: createPortal(portalElement, portalTarget || document.body) });
 }
 export default EmbedFormField;