feat: Modified discussions FE so that ONLY users with verified emails (#789)

* feat: Modified discussions FE so that ONLY users with verified emails can create content

* feat: added comment and response functionality

* test: fixed test cases

* refactor: refactor code and added HOC

* test: added test cases

* test: added test cases for failed and denied

* feat: added states for button

* refactor: added callback function

* test: added test case to close the dialogue

* refactor: refactor function

Author: sundasnoreen12

src/discussions/common/Confirmation.jsx

@@ -19,11 +19,13 @@ const Confirmation = ({
   onClose,
   confirmAction,
   closeButtonVariant,
+  confirmButtonState,
   confirmButtonVariant,
   confirmButtonText,
   isDataLoading,
   isConfirmButtonPending,
   pendingConfirmButtonText,
+  closeButtonText,
 }) => {
   const intl = useIntl();
 
@@ -42,22 +44,22 @@ const Confirmation = ({
               {title}
             </ModalDialog.Title>
           </ModalDialog.Header>
-          <ModalDialog.Body>
+          <ModalDialog.Body style={{ whiteSpace: 'pre-line' }}>
             {description}
             {boldDescription && <><br /><p className="font-weight-bold pt-2">{boldDescription}</p></>}
           </ModalDialog.Body>
           <ModalDialog.Footer>
             <ActionRow>
               <ModalDialog.CloseButton variant={closeButtonVariant}>
-                {intl.formatMessage(messages.confirmationCancel)}
+                {closeButtonText || intl.formatMessage(messages.confirmationCancel)}
               </ModalDialog.CloseButton>
               <StatefulButton
                 labels={{
                   default: confirmButtonText || intl.formatMessage(messages.confirmationConfirm),
                   pending: pendingConfirmButtonText || confirmButtonText
                       || intl.formatMessage(messages.confirmationConfirm),
                 }}
-                state={isConfirmButtonPending ? 'pending' : confirmButtonVariant}
+                state={isConfirmButtonPending ? 'pending' : confirmButtonState}
                 variant={confirmButtonVariant}
                 onClick={confirmAction}
               />
@@ -82,6 +84,8 @@ Confirmation.propTypes = {
   isDataLoading: PropTypes.bool,
   isConfirmButtonPending: PropTypes.bool,
   pendingConfirmButtonText: PropTypes.string,
+  closeButtonText: PropTypes.string,
+  confirmButtonState: PropTypes.string,
 };
 
 Confirmation.defaultProps = {
@@ -92,6 +96,8 @@ Confirmation.defaultProps = {
   isDataLoading: false,
   isConfirmButtonPending: false,
   pendingConfirmButtonText: '',
+  closeButtonText: '',
+  confirmButtonState: 'default',
 };
 
 export default React.memo(Confirmation);

src/discussions/common/withEmailConfirmation.jsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import { selectConfirmEmailStatus, selectOnlyVerifiedUsersCanPost } from '../data/selectors';
+import { sendAccountActivationEmail } from '../posts/data/thunks';
+import postMessages from '../posts/post-actions-bar/messages';
+import { Confirmation } from '.';
+
+const withEmailConfirmation = (WrappedComponent) => {
+  const EnhancedComponent = (props) => {
+    const intl = useIntl();
+    const dispatch = useDispatch();
+    const [isConfirming, setIsConfirming] = useState(false);
+    const onlyVerifiedUsersCanPost = useSelector(selectOnlyVerifiedUsersCanPost);
+    const confirmEmailStatus = useSelector(selectConfirmEmailStatus);
+
+    const openConfirmation = useCallback(() => {
+      setIsConfirming(true);
+    }, []);
+
+    const closeConfirmation = useCallback(() => {
+      setIsConfirming(false);
+    }, []);
+
+    const handleConfirmation = useCallback(() => {
+      dispatch(sendAccountActivationEmail());
+    }, [dispatch]);
+
+    const confirmButtonState = useMemo(() => {
+      if (confirmEmailStatus === RequestStatus.IN_PROGRESS) { return 'pending'; }
+      if (confirmEmailStatus === RequestStatus.SUCCESSFUL) { return 'complete'; }
+      return 'primary';
+    }, [confirmEmailStatus]);
+
+    return (
+      <>
+        <WrappedComponent
+          {...props}
+          openEmailConfirmation={openConfirmation}
+        />
+        {!onlyVerifiedUsersCanPost
+         && (
+         <Confirmation
+           isOpen={isConfirming}
+           title={intl.formatMessage(postMessages.confirmEmailTitle)}
+           description={intl.formatMessage(postMessages.confirmEmailDescription)}
+           onClose={closeConfirmation}
+           confirmAction={handleConfirmation}
+           closeButtonVariant="tertiary"
+           confirmButtonState={confirmButtonState}
+           confirmButtonText={intl.formatMessage(postMessages.confirmEmailButton)}
+           closeButtonText={intl.formatMessage(postMessages.closeButton)}
+           confirmButtonVariant="danger"
+         />
+         )}
+      </>
+    );
+  };
+
+  return EnhancedComponent;
+};
+
+export default withEmailConfirmation;

src/discussions/common/withEmailConfirmation.test.jsx

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import EmptyPosts from '../empty-posts/EmptyPosts';
+import messages from '../messages';
+import { sendEmailForAccountActivation } from '../posts/data/api';
+
+let store;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+jest.mock('../posts/data/api', () => ({
+  sendEmailForAccountActivation: jest.fn(),
+}));
+
+function renderComponent(location = `/${courseId}/`) {
+  return render(
+    <IntlProvider locale="en">
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <AppProvider store={store} wrapWithRouter={false}>
+          <MemoryRouter initialEntries={[location]}>
+            <EmptyPosts subTitleMessage={messages.emptyMyPosts} />
+          </MemoryRouter>
+        </AppProvider>
+      </ResponsiveContext.Provider>
+    </IntlProvider>,
+  );
+}
+
+describe('EmptyPage', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('should open the confirmation link dialogue box.', async () => {
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+
+    expect(screen.queryByText('Send confirmation link')).toBeInTheDocument();
+  });
+
+  it('dispatches sendAccountActivationEmail on confirm', async () => {
+    sendEmailForAccountActivation.mockResolvedValue({ success: true });
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+    const confirmButton = screen.getByText('Send confirmation link');
+    fireEvent.click(confirmButton);
+    expect(sendEmailForAccountActivation).toHaveBeenCalled();
+  });
+
+  it('should close the confirmation dialogue box.', async () => {
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+    const confirmButton = screen.getByText('Close');
+    fireEvent.click(confirmButton);
+
+    expect(sendEmailForAccountActivation).toHaveBeenCalled();
+
+    expect(screen.queryByText('Close')).not.toBeInTheDocument();
+  });
+});

src/discussions/data/selectors.js

@@ -37,6 +37,12 @@ export const selectIsNotifyAllLearnersEnabled = state => state.config.isNotifyAl
 
 export const selectCaptchaSettings = state => state.config.captchaSettings;
 
+export const selectIsEmailVerified = state => state.config.isEmailVerified;
+
+export const selectOnlyVerifiedUsersCanPost = state => state.config.onlyVerifiedUsersCanPost;
+
+export const selectConfirmEmailStatus = state => state.threads.confirmEmailStatus;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,

src/discussions/data/slices.js

@@ -30,6 +30,7 @@ const configSlice = createSlice({
     editReasons: [],
     postCloseReasons: [],
     enableInContext: false,
+    isEmailVerified: false,
   },
   reducers: {
     fetchConfigRequest: (state) => (

src/discussions/discussions-home/DiscussionsHome.test.jsx

@@ -207,6 +207,9 @@ describe('DiscussionsHome', () => {
   });
 
   it('should display post editor form when click on add a post button for posts', async () => {
+    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
+      enableInContext: true, provider: 'openedx', hasModerationPrivileges: true, isEmailVerified: true,
+    });
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/my-posts`);
 
@@ -221,7 +224,7 @@ describe('DiscussionsHome', () => {
 
   it('should display post editor form when click on add a post button in legacy topics view', async () => {
     axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
-      enable_in_context: false, hasModerationPrivileges: true,
+      enable_in_context: false, hasModerationPrivileges: true, isEmailVerified: true,
     });
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/topics`);

src/discussions/empty-posts/EmptyPosts.jsx

@@ -5,23 +5,29 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import withEmailConfirmation from '../common/withEmailConfirmation';
 import { useIsOnTablet } from '../data/hooks';
-import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
+import {
+  selectAreThreadsFiltered,
+  selectIsEmailVerified,
+  selectPostThreadCount,
+} from '../data/selectors';
 import messages from '../messages';
 import { showPostEditor } from '../posts/data';
 import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
-const EmptyPosts = ({ subTitleMessage }) => {
+const EmptyPosts = ({ subTitleMessage, openEmailConfirmation }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const isOnTabletorDesktop = useIsOnTablet();
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
+  const isEmailVerified = useSelector(selectIsEmailVerified);
 
-  const addPost = useCallback(() => (
-    dispatch(showPostEditor())
-  ), []);
+  const addPost = useCallback(() => {
+    if (isEmailVerified) { dispatch(showPostEditor()); } else { openEmailConfirmation(); }
+  }, [isEmailVerified, openEmailConfirmation]);
 
   let title = messages.noPostSelected;
   let subTitle = null;
@@ -58,6 +64,7 @@ EmptyPosts.propTypes = {
     defaultMessage: propTypes.string,
     description: propTypes.string,
   }).isRequired,
+  openEmailConfirmation: propTypes.func.isRequired,
 };
 
-export default React.memo(EmptyPosts);
+export default React.memo(withEmailConfirmation(EmptyPosts));

src/discussions/empty-posts/EmptyTopics.jsx

@@ -1,28 +1,33 @@
 import React, { useCallback } from 'react';
+import propTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import withEmailConfirmation from '../common/withEmailConfirmation';
 import { useIsOnTablet, useTotalTopicThreadCount } from '../data/hooks';
-import { selectTopicThreadCount } from '../data/selectors';
+import {
+  selectIsEmailVerified, selectTopicThreadCount,
+} from '../data/selectors';
 import messages from '../messages';
 import { showPostEditor } from '../posts/data';
 import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
-const EmptyTopics = () => {
+const EmptyTopics = ({ openEmailConfirmation }) => {
   const intl = useIntl();
   const { topicId } = useParams();
   const dispatch = useDispatch();
   const isOnTabletorDesktop = useIsOnTablet();
   const hasGlobalThreads = useTotalTopicThreadCount() > 0;
   const topicThreadCount = useSelector(selectTopicThreadCount(topicId));
+  const isEmailVerified = useSelector(selectIsEmailVerified);
 
-  const addPost = useCallback(() => (
-    dispatch(showPostEditor())
-  ), []);
+  const addPost = useCallback(() => {
+    if (isEmailVerified) { dispatch(showPostEditor()); } else { openEmailConfirmation(); }
+  }, [isEmailVerified, openEmailConfirmation]);
 
   let title = messages.emptyTitle;
   let fullWidth = false;
@@ -63,4 +68,8 @@ const EmptyTopics = () => {
   );
 };
 
-export default EmptyTopics;
+EmptyTopics.propTypes = {
+  openEmailConfirmation: propTypes.func.isRequired,
+};
+
+export default React.memo(withEmailConfirmation(EmptyTopics));

src/discussions/in-context-topics/components/EmptyTopics.jsx

@@ -1,19 +1,21 @@
 import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import DiscussionContext from '../../common/context';
+import withEmailConfirmation from '../../common/withEmailConfirmation';
 import { useIsOnTablet } from '../../data/hooks';
-import { selectPostThreadCount } from '../../data/selectors';
+import { selectIsEmailVerified, selectPostThreadCount } from '../../data/selectors';
 import EmptyPage from '../../empty-posts/EmptyPage';
 import messages from '../../messages';
 import { messages as postMessages, showPostEditor } from '../../posts';
 import { selectCourseWareThreadsCount, selectTotalTopicsThreadsCount } from '../data/selectors';
 
-const EmptyTopics = () => {
+const EmptyTopics = ({ openEmailConfirmation }) => {
   const intl = useIntl();
   const { category, topicId } = useParams();
   const dispatch = useDispatch();
@@ -23,10 +25,11 @@ const EmptyTopics = () => {
   const topicThreadsCount = useSelector(selectPostThreadCount);
   // hasGlobalThreads is used to determine if there are any post available in courseware and non-courseware topics
   const hasGlobalThreads = useSelector(selectTotalTopicsThreadsCount) > 0;
+  const isEmailVerified = useSelector(selectIsEmailVerified);
 
-  const addPost = useCallback(() => (
-    dispatch(showPostEditor())
-  ), []);
+  const addPost = useCallback(() => {
+    if (isEmailVerified) { dispatch(showPostEditor()); } else { openEmailConfirmation(); }
+  }, [isEmailVerified, openEmailConfirmation]);
 
   let title = messages.emptyTitle;
   let fullWidth = false;
@@ -75,4 +78,8 @@ const EmptyTopics = () => {
   );
 };
 
-export default EmptyTopics;
+EmptyTopics.propTypes = {
+  openEmailConfirmation: PropTypes.func.isRequired,
+};
+
+export default React.memo(withEmailConfirmation(EmptyTopics));