@financial-times/qanda-ui 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/cjs/components/QandaContainer.js

@@ -11,6 +11,7 @@ const QuestionForm_1 = __importDefault(require("./QuestionForm"));
 const UserInfo_1 = __importDefault(require("./UserInfo"));
 const QandaOComments_1 = __importDefault(require("./QandaOComments"));
 const Stream_1 = __importDefault(require("./Stream"));
+const Calendar_1 = __importDefault(require("./Calendar"));
 const CountdownTimer_1 = __importDefault(require("./CountdownTimer"));
 const FloatingActionBar_1 = __importDefault(require("./FloatingActionBar"));
 const EmbedFormField_1 = __importDefault(require("./EmbedFormField"));
@@ -31,12 +32,12 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
     (0, react_1.useEffect)(() => {
-        dispatch((0, user_1.getUserProfile)({ useStaging }));
+        dispatch((0, user_1.getUserProfile)({ useStaging, commentsAPIUrl }));
         return () => {
             // ensure we reset the api state when the component is unmounted
             dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    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: [(0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), (0, jsx_runtime_1.jsx)(Stream_1.default, {}), status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UserInfo_1.default, {}), (0, jsx_runtime_1.jsx)(QandaOComments_1.default, {})] })), data?.status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "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: [(0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, {}), status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UserInfo_1.default, {}), (0, jsx_runtime_1.jsx)(QandaOComments_1.default, {})] })), data?.status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
 }
 exports.default = QandaContainer;

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

@@ -69,7 +69,11 @@ function QuestionForm() {
                 dispatch((0, questionSlice_1.updateDisplayNameError)(`The display name contains invalid characters: ${invalidCharacters}`));
                 return;
             }
-            updatedProfile = await dispatch((0, user_1.getUserProfile)({ useStaging, displayName: newDisplayName })).unwrap();
+            updatedProfile = await dispatch((0, user_1.getUserProfile)({
+                useStaging,
+                displayName: newDisplayName,
+                commentsAPIUrl,
+            })).unwrap();
             // The user token is empty when there is no display name set
             // if there are also no errors, we can assume the display name is taken
             if (!updatedProfile?.token && !userDisplayNameError) {

package/dist/cjs/store/user.js

@@ -20,8 +20,12 @@ const initialState = {
     loading: false,
     error: '',
 };
-exports.getUserProfile = (0, toolkit_1.createAsyncThunk)(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '' }) => {
-    const userDetails = await (0, auth_1.default)({ useStaging, displayName });
+exports.getUserProfile = (0, toolkit_1.createAsyncThunk)(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '', commentsAPIUrl }) => {
+    const userDetails = await (0, auth_1.default)({
+        useStaging,
+        displayName,
+        commentsAPIUrl,
+    });
     return userDetails;
 });
 exports.user = (0, toolkit_1.createSlice)({

package/dist/cjs/utils/auth.js

@@ -1,16 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line import/no-extraneous-dependencies
-const auth_1 = __importDefault(require("@financial-times/o-comments/src/js/utils/auth"));
-// TODO: make these options settable, but for now we want to use staging
-exports.default = async ({ useStaging = true, displayName = '', }) => {
-    const userDetails = await auth_1.default.fetchJsonWebToken({
+const o_comments_1 = require("@financial-times/o-comments");
+const PROD_AUTH_URL = 'https://comments-api.ft.com';
+const TEST_AUTH_URL = 'https://comments-api-test.ft.com';
+exports.default = async ({ useStaging = true, displayName = '', commentsAPIUrl = PROD_AUTH_URL, }) => {
+    const userDetails = await o_comments_1.auth.fetchJsonWebToken({
         useStagingEnvironment: useStaging,
         onlySubscribers: true,
         displayName,
+        commentsAPIUrl: commentsAPIUrl === PROD_AUTH_URL ? PROD_AUTH_URL : TEST_AUTH_URL,
     });
     // if the JWT creation has failed, a `userHasValidSession` value will be returned
     // our application assumes the values of a JWT are saved to state, so we set the

package/dist/esm/components/QandaContainer.js

@@ -6,6 +6,7 @@ import QuestionForm from './QuestionForm';
 import UserInfo from './UserInfo';
 import QandaOComments from './QandaOComments';
 import Stream from './Stream';
+import Calendar from './Calendar';
 import CountdownTimer from './CountdownTimer';
 import FloatingActionBar from './FloatingActionBar';
 import EmbedFormField from './EmbedFormField';
@@ -26,12 +27,12 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
     });
     const status = updatedQA?.status || data?.status || 'pre-live';
     useEffect(() => {
-        dispatch(getUserProfile({ useStaging }));
+        dispatch(getUserProfile({ useStaging, commentsAPIUrl }));
         return () => {
             // ensure we reset the api state when the component is unmounted
             dispatch(nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    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: [_jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), _jsx(Stream, {}), status !== 'close' && (_jsxs(_Fragment, { children: [_jsx(UserInfo, {}), _jsx(QandaOComments, {})] })), data?.status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
+    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: [_jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, {}), status !== 'close' && (_jsxs(_Fragment, { children: [_jsx(UserInfo, {}), _jsx(QandaOComments, {})] })), data?.status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
 }
 export default QandaContainer;

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

@@ -63,7 +63,11 @@ export default function QuestionForm() {
                 dispatch(updateDisplayNameError(`The display name contains invalid characters: ${invalidCharacters}`));
                 return;
             }
-            updatedProfile = await dispatch(getUserProfile({ useStaging, displayName: newDisplayName })).unwrap();
+            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) {

package/dist/esm/store/user.js

@@ -14,8 +14,12 @@ const initialState = {
     loading: false,
     error: '',
 };
-export const getUserProfile = createAsyncThunk(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '' }) => {
-    const userDetails = await auth({ useStaging, displayName });
+export const getUserProfile = createAsyncThunk(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '', commentsAPIUrl }) => {
+    const userDetails = await auth({
+        useStaging,
+        displayName,
+        commentsAPIUrl,
+    });
     return userDetails;
 });
 export const user = createSlice({

package/dist/esm/utils/auth.js

@@ -1,11 +1,12 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import auth from '@financial-times/o-comments/src/js/utils/auth';
-// TODO: make these options settable, but for now we want to use staging
-export default async ({ useStaging = true, displayName = '', }) => {
+import { auth } from '@financial-times/o-comments';
+const PROD_AUTH_URL = 'https://comments-api.ft.com';
+const TEST_AUTH_URL = 'https://comments-api-test.ft.com';
+export default async ({ useStaging = true, displayName = '', commentsAPIUrl = PROD_AUTH_URL, }) => {
     const userDetails = await auth.fetchJsonWebToken({
         useStagingEnvironment: useStaging,
         onlySubscribers: true,
         displayName,
+        commentsAPIUrl: commentsAPIUrl === PROD_AUTH_URL ? PROD_AUTH_URL : TEST_AUTH_URL,
     });
     // if the JWT creation has failed, a `userHasValidSession` value will be returned
     // our application assumes the values of a JWT are saved to state, so we set the

package/dist/types/store/user.d.ts

@@ -1,9 +1,9 @@
 export type UserDetails = {
     token: string;
     displayName: string;
-    isRegistered: boolean;
-    isTrialist: boolean;
-    isSubscribed: boolean;
+    isRegistered?: boolean;
+    isTrialist?: boolean;
+    isSubscribed?: boolean;
 };
 export type UserState = {
     profile: UserDetails;
@@ -11,6 +11,7 @@ export type UserState = {
 export declare const getUserProfile: import("@reduxjs/toolkit").AsyncThunk<UserDetails, {
     useStaging: boolean;
     displayName?: string;
+    commentsAPIUrl: string;
 }, {
     state?: unknown;
     dispatch?: import("redux-thunk").ThunkDispatch<unknown, unknown, import("redux").UnknownAction>;

package/dist/types/utils/auth.d.ts

@@ -1,5 +1,6 @@
-declare const _default: ({ useStaging, displayName, }: {
+declare const _default: ({ useStaging, displayName, commentsAPIUrl, }: {
     useStaging: boolean;
     displayName: string;
-}) => Promise<any>;
+    commentsAPIUrl?: string;
+}) => Promise<import("@financial-times/o-comments").AuthResponse>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "Components for the Live Q&A UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -105,17 +105,17 @@
     "webpack-merge": "^6.0.1"
   },
   "peerDependencies": {
+    "@dotcom-reliability-kit/client-metrics-web": "^0.1.2",
     "@financial-times/n-tracking": "^7.6.0",
     "@financial-times/o-colors": "^6.7",
-    "@financial-times/o-comments": "^12.0.0",
+    "@financial-times/o-comments": "^13.0.0",
     "@financial-times/o-forms": "^10.0.2",
     "@financial-times/o-icons": "^7.8",
-    "@financial-times/o-labels": "^6.5.8",
+    "@financial-times/o-labels": "^7.0.1",
     "@financial-times/o-loading": "^6.0.0",
     "@financial-times/o-message": "^6.0.0",
     "@financial-times/o3-button": "^3.7.0",
-    "@financial-times/o3-foundation": "^3.2",
-    "@dotcom-reliability-kit/client-metrics-web": "^0.1.2"
+    "@financial-times/o3-foundation": "^3.2"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"