feat: added product tour to notify all learners (#783)

* feat: added product tour to notify all learners

* fix: removed unused function

Author: sundasnoreen12

src/discussions/data/hooks.js

@@ -224,10 +224,6 @@ export const useUserPostingEnabled = () => {
   return (isPostingEnabled || isPrivileged);
 };
 
-function camelToConstant(string) {
-  return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
-}
-
 export const useTourConfiguration = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -252,7 +248,7 @@ export const useTourConfiguration = () => {
         enabled: tour && Boolean(tour.enabled && tour.showTour && !enableInContextSidebar),
         onDismiss: () => handleOnDismiss(tour.id),
         onEnd: () => handleOnEnd(tour.id),
-        checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
+        checkpoints: tourCheckpoints(intl)[tour.tourName],
       }
     ))
   ), [tours, enableInContextSidebar]);

src/discussions/posts/post-editor/PostEditor.jsx

@@ -43,6 +43,7 @@ import {
   selectNonCoursewareTopics as inContextNonCourseware,
 } from '../../in-context-topics/data/selectors';
 import { selectCoursewareTopics, selectNonCoursewareIds, selectNonCoursewareTopics } from '../../topics/data/selectors';
+import { updateUserDiscussionsTourByName } from '../../tours/data';
 import {
   discussionsPath, formikCompatibleHandler, isFormikFieldInvalid, useCommentsPagePath,
 } from '../../utils';
@@ -91,6 +92,21 @@ const PostEditor = ({
     editReasonCode: Yup.string().required(intl.formatMessage(messages.editReasonCodeError)),
   };
 
+  const enableNotifyAllLearnersTour = useCallback((enabled) => {
+    const data = {
+      enabled,
+      tourName: 'notify_all_learners',
+    };
+    dispatch(updateUserDiscussionsTourByName(data));
+  }, []);
+
+  useEffect(() => {
+    enableNotifyAllLearnersTour(true);
+    return () => {
+      enableNotifyAllLearnersTour(false);
+    };
+  }, []);
+
   const canSelectCohort = useCallback((tId) => {
     // If the user isn't privileged, they can't edit the cohort.
     // If the topic is being edited the cohort can't be changed.
@@ -427,6 +443,7 @@ const PostEditor = ({
             <Form.Group>
               <Form.Checkbox
                 name="notifyAllLearners"
+                id="notify-learners"
                 checked={values.notifyAllLearners}
                 onChange={handleChange}
                 onBlur={handleBlur}

src/discussions/tours/constants.js

@@ -7,11 +7,11 @@ import messages from './messages';
  */
 export default function tourCheckpoints(intl) {
   return {
-    EXAMPLE_TOUR: [
+    notify_all_learners: [
       {
-        title: intl.formatMessage(messages.exampleTourTitle),
-        body: intl.formatMessage(messages.exampleTourBody),
-        target: '#example-tour-target',
+        title: intl.formatMessage(messages.notifyAllLearnersTourTitle),
+        body: intl.formatMessage(messages.notifyAllLearnersTourBody),
+        target: '#notify-learners',
         placement: 'bottom',
       },
     ],

src/discussions/tours/messages.js

@@ -16,15 +16,15 @@ const messages = defineMessages({
     defaultMessage: 'Okay',
     description: 'Action to end current tour',
   },
-  exampleTourTitle: {
-    id: 'tour.example.title',
-    defaultMessage: 'Example Tour',
-    description: 'Title for example tour',
+  notifyAllLearnersTourTitle: {
+    id: 'tour.title.notifyAllLearners',
+    defaultMessage: 'Let your learners know.',
+    description: 'Title of the tour to notify all learners',
   },
-  exampleTourBody: {
-    id: 'tour.example.body',
-    defaultMessage: 'This is an example tour',
-    description: 'Body for example tour',
+  notifyAllLearnersTourBody: {
+    id: 'tour.body.notifyAllLearners',
+    defaultMessage: 'Check this box to notify all learners.',
+    description: 'Body of the tour to notify all learners',
   },
 });