@financial-times/qanda-ui 0.0.1-beta.18 → 0.0.1-beta.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,6 +17,7 @@ const CountdownTimer_1 = __importDefault(require("./CountdownTimer"));
|
|
|
17
17
|
const FloatingActionBar_1 = __importDefault(require("./FloatingActionBar"));
|
|
18
18
|
const EmbedFormField_1 = __importDefault(require("./EmbedFormField"));
|
|
19
19
|
const QandaProvider_1 = require("./QandaProvider");
|
|
20
|
+
const o_tracking_1 = __importDefault(require("@financial-times/o-tracking"));
|
|
20
21
|
const comments_api_1 = require("../services/comments-api");
|
|
21
22
|
function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
|
|
22
23
|
const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
|
|
@@ -54,6 +55,26 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
|
|
|
54
55
|
dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
|
|
55
56
|
};
|
|
56
57
|
}, [dispatch, storyId]);
|
|
58
|
+
(0, react_1.useEffect)(() => {
|
|
59
|
+
if (!data || !status)
|
|
60
|
+
return;
|
|
61
|
+
o_tracking_1.default.view.init({
|
|
62
|
+
selector: '.qanda-container',
|
|
63
|
+
getContextData: () => {
|
|
64
|
+
return {
|
|
65
|
+
componentContentId: storyId,
|
|
66
|
+
component: 'liveqa',
|
|
67
|
+
type: 'article',
|
|
68
|
+
custom: [
|
|
69
|
+
{
|
|
70
|
+
name: 'status',
|
|
71
|
+
value: status,
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
};
|
|
75
|
+
},
|
|
76
|
+
});
|
|
77
|
+
}, [data, status]);
|
|
57
78
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), status !== 'close' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, {}) })), (status === 'live' || (status === 'pre-live' && showExpertView)) && ((0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && ((0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer }))] }))] }));
|
|
58
79
|
}
|
|
59
80
|
exports.default = QandaContainer;
|
|
@@ -140,7 +140,7 @@ function QuestionForm() {
|
|
|
140
140
|
'o-forms-input--text',
|
|
141
141
|
{ 'o-forms-input--invalid': !!displayNameError },
|
|
142
142
|
]), 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 ??
|
|
143
|
-
'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: {
|
|
143
|
+
'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": `question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}` }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", class: "o-forms-field", 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: {
|
|
144
144
|
className: 'overlay__submit-button',
|
|
145
145
|
type: 'submit',
|
|
146
146
|
disabled: !submitEnabled,
|
|
@@ -12,6 +12,7 @@ import CountdownTimer from './CountdownTimer';
|
|
|
12
12
|
import FloatingActionBar from './FloatingActionBar';
|
|
13
13
|
import EmbedFormField from './EmbedFormField';
|
|
14
14
|
import { QandaContext } from './QandaProvider';
|
|
15
|
+
import oTracking from '@financial-times/o-tracking';
|
|
15
16
|
import { useGetQandAStreamQuery, useUpdatedQA, useGetUserRolesQuery, nextCommentsApi, } from '../services/comments-api';
|
|
16
17
|
function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
|
|
17
18
|
const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
|
|
@@ -49,6 +50,26 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
|
|
|
49
50
|
dispatch(nextCommentsApi.util.resetApiState());
|
|
50
51
|
};
|
|
51
52
|
}, [dispatch, storyId]);
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (!data || !status)
|
|
55
|
+
return;
|
|
56
|
+
oTracking.view.init({
|
|
57
|
+
selector: '.qanda-container',
|
|
58
|
+
getContextData: () => {
|
|
59
|
+
return {
|
|
60
|
+
componentContentId: storyId,
|
|
61
|
+
component: 'liveqa',
|
|
62
|
+
type: 'article',
|
|
63
|
+
custom: [
|
|
64
|
+
{
|
|
65
|
+
name: 'status',
|
|
66
|
+
value: status,
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
};
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
}, [data, status]);
|
|
52
73
|
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 }), status !== 'close' && (_jsx(_Fragment, { children: _jsx(UserInfo, {}) })), (status === 'live' || (status === 'pre-live' && showExpertView)) && (_jsx(FloatingActionBar, { showLiveIndicator: status === 'live' })), status !== 'close' && !showExpertView && (_jsx(EmbedFormField, { container: embedFormFieldContainer }))] }))] }));
|
|
53
74
|
}
|
|
54
75
|
export default QandaContainer;
|
|
@@ -134,7 +134,7 @@ export default function QuestionForm() {
|
|
|
134
134
|
'o-forms-input--text',
|
|
135
135
|
{ 'o-forms-input--invalid': !!displayNameError },
|
|
136
136
|
]), 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 ??
|
|
137
|
-
'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 }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", class: "o-forms-field", 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-describedby": error ? 'question-error-message' : undefined }) })] }), _jsx(Button, { attributes: {
|
|
137
|
+
'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", 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-describedby": error ? 'question-error-message' : undefined }) })] }), _jsx(Button, { attributes: {
|
|
138
138
|
className: 'overlay__submit-button',
|
|
139
139
|
type: 'submit',
|
|
140
140
|
disabled: !submitEnabled,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/qanda-ui",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.19",
|
|
4
4
|
"description": "Components for the Live Q&A UI",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"@dotcom-reliability-kit/client-metrics-web": "^0.1.2",
|
|
99
99
|
"@financial-times/cp-content-pipeline-client": "^4.8.3",
|
|
100
100
|
"@financial-times/cp-content-pipeline-ui": "^9.2.1",
|
|
101
|
-
"@financial-times/n-tracking": "^7.
|
|
101
|
+
"@financial-times/n-tracking": "^7.7.0",
|
|
102
102
|
"@financial-times/o-colors": "^6.7",
|
|
103
103
|
"@financial-times/o-comments": "^13.0.0",
|
|
104
104
|
"@financial-times/o-forms": "^10.0.2",
|
|
@@ -106,10 +106,11 @@
|
|
|
106
106
|
"@financial-times/o-labels": "^7.0.1",
|
|
107
107
|
"@financial-times/o-loading": "^6.0.0",
|
|
108
108
|
"@financial-times/o-message": "^6.0.0",
|
|
109
|
+
"@financial-times/o-tracking": "^4.8.0",
|
|
109
110
|
"@financial-times/o3-button": "^3.7.0",
|
|
110
111
|
"@financial-times/o3-foundation": "^3.2",
|
|
111
|
-
"preact": "^10.
|
|
112
|
-
"preact-render-to-string": "^6.
|
|
112
|
+
"preact": "^10.6.6",
|
|
113
|
+
"preact-render-to-string": "^6.4.0",
|
|
113
114
|
"react": "17.x || 18.x",
|
|
114
115
|
"react-dom": "17.x || 18.x",
|
|
115
116
|
"react-redux": "^7.2.2",
|