Merge pull request #869 from openedx/sundas/INF-1016

feat: Added link to documentation on preferences UI

src/index.scss

@@ -73,6 +73,19 @@ $fa-font-path: "~font-awesome/fonts";
   padding-left: 0.625rem;
 }
 
+.notification-sub-heading {
+  font-size: 14px;
+  line-height: 28px;
+}
+
+.text-decoration-underline {
+  text-decoration: underline;
+}
+
+.pgn__hyperlink__external-icon{
+  margin-left: 4px;
+}
+
 .notification-preferences {
   input[type="checkbox"] {
     margin-right: 0;

src/notification-preferences/NotificationPreferences.jsx

@@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Container, Icon, Spinner } from '@edx/paragon';
+import {
+  Container, Icon, Spinner, Hyperlink,
+} from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 import {
   selectCourseListStatus,
@@ -56,9 +58,20 @@ const NotificationPreferences = () => {
 
   return (
     <Container size="sm" className="notification-preferences">
-      <h2 className="notification-heading mt-6 mb-5.5">
+      <h2 className="notification-heading mt-6 mb-4.5">
         {intl.formatMessage(messages.notificationHeading)}
       </h2>
+      <div className="mb-6 text-gray-700">
+        {intl.formatMessage(messages.notificationPreferenceGuideBody)}
+        <Hyperlink
+          destination="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/managing_notifications.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-decoration-underline"
+        >
+          {intl.formatMessage(messages.notificationPreferenceGuideLink)}
+        </Hyperlink>
+      </div>
       <div className="h-100">
         <div className="d-flex mb-5">
           <Link to="/notifications">

src/notification-preferences/messages.js

@@ -53,4 +53,14 @@ export const messages = defineMessages({
     defaultMessage: 'Load more courses',
     description: 'Load more button to load more courses',
   },
+  notificationPreferenceGuideLink: {
+    id: 'notification.preference.guide.link',
+    defaultMessage: 'as detailed here',
+    description: 'Link of the notification preference for learner guide',
+  },
+  notificationPreferenceGuideBody: {
+    id: 'notification.preference.guide.body',
+    defaultMessage: 'Notifications for certain activities are enabled by default, ',
+    description: 'Body of the notification preferences for learner guide',
+  },
 });