feat: add dashboard footnote plugin slot

Author: jansenk

src/courseware/course/course-exit/CourseCelebration.jsx

@@ -27,12 +27,12 @@ import messages from './messages';
 import { useModel } from '../../../generic/model-store';
 import { requestCert } from '../../../course-home/data/thunks';
 import ProgramCompletion from './ProgramCompletion';
-import DashboardFootnote from './DashboardFootnote';
 import UpgradeFootnote from './UpgradeFootnote';
 import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
 import CourseRecommendationsSlot from '../../../plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot';
+import DashboardFootnotePluginSlot from '../../../plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot';
 
 const LINKEDIN_BLUE = '#2867B2';
 
@@ -119,7 +119,7 @@ const CourseCelebration = ({ intl }) => {
       }
       buttonEvent = 'view_cert';
       visitEvent = 'celebration_with_cert';
-      footnote = <DashboardFootnote variant={visitEvent} />;
+      footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
       break;
     case 'earned_but_not_available': {
       const endDate = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
@@ -142,7 +142,7 @@ const CourseCelebration = ({ intl }) => {
         </>
       );
       visitEvent = 'celebration_with_unavailable_cert';
-      footnote = <DashboardFootnote variant={visitEvent} />;
+      footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
       break;
     }
     case 'requesting':
@@ -163,12 +163,12 @@ const CourseCelebration = ({ intl }) => {
       certHeader = intl.formatMessage(messages.certificateHeaderRequestable);
       message = (<p>{intl.formatMessage(messages.requestCertificateBodyText)}</p>);
       visitEvent = 'celebration_with_requestable_cert';
-      footnote = <DashboardFootnote variant={visitEvent} />;
+      footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
       break;
     case 'unverified':
       certHeader = intl.formatMessage(messages.certificateHeaderUnverified);
       visitEvent = 'celebration_unverified';
-      footnote = <DashboardFootnote variant={visitEvent} />;
+      footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
       if (verificationStatus === 'pending') {
         message = (<p>{intl.formatMessage(messages.verificationPending)}</p>);
       } else {
@@ -240,7 +240,7 @@ const CourseCelebration = ({ intl }) => {
         if (verifiedMode.accessExpirationDate) {
           footnote = <UpgradeFootnote deadline={verifiedMode.accessExpirationDate} href={verifiedMode.upgradeUrl} />;
         } else {
-          footnote = <DashboardFootnote variant={visitEvent} />;
+          footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
         }
       } else {
         visitEvent = 'celebration_audit_no_upgrade';

src/courseware/course/course-exit/CourseInProgress.jsx

@@ -10,7 +10,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { useModel } from '../../../generic/model-store';
 
 import CatalogSuggestion from './CatalogSuggestion';
-import DashboardFootnote from './DashboardFootnote';
+import DashboardFootnotePluginSlot from '../../../plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
 
@@ -53,7 +53,7 @@ const CourseInProgress = ({ intl }) => {
             )}
           </div>
         </Alert>
-        <DashboardFootnote variant="in_progress" />
+        <DashboardFootnotePluginSlot variant="in_progress" />
         <CatalogSuggestion variant="in_progress" />
       </div>
     </>

src/courseware/course/course-exit/CourseNonPassing.jsx

@@ -10,7 +10,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { useModel } from '../../../generic/model-store';
 
 import CatalogSuggestion from './CatalogSuggestion';
-import DashboardFootnote from './DashboardFootnote';
+import DashboardFootnotePluginSlot from '../../../plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
 
@@ -53,7 +53,7 @@ const CourseNonPassing = ({ intl }) => {
             )}
           </div>
         </Alert>
-        <DashboardFootnote variant="nonpassing" />
+        <DashboardFootnotePluginSlot variant="nonpassing" />
         <CatalogSuggestion variant="nonpassing" />
       </div>
     </>

src/courseware/course/course-exit/DashboardFootnote.jsx

@@ -1,30 +1,27 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-
+import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
-import { getConfig } from '@edx/frontend-platform';
 
 import { useModel } from '../../../generic/model-store';
 
 import Footnote from './Footnote';
 import messages from './messages';
 import { logClick } from './utils';
 
-const DashboardFootnote = ({ intl, variant }) => {
+const DashboardFootnote = ({ variant, content }) => {
+  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const { org } = useModel('courseHomeMeta', courseId);
   const { administrator } = getAuthenticatedUser();
 
   const dashboardLink = (
     <Hyperlink
       style={{ textDecoration: 'underline' }}
-      destination={`${getConfig().LMS_BASE_URL}/dashboard`}
+      destination={content?.dashboardFootnoteUrl || `${getConfig().LMS_BASE_URL}/dashboard`}
       className="text-reset"
       onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
     >
@@ -35,21 +32,16 @@ const DashboardFootnote = ({ intl, variant }) => {
   return (
     <Footnote
       icon={faCalendarAlt}
-      text={(
-        <FormattedMessage
-          id="courseCelebration.dashboardInfo" // for historical reasons
-          defaultMessage="You can access this course and its materials on your {dashboardLink}."
-          description="Text that precedes link to learner's dashboard"
-          values={{ dashboardLink }}
-        />
-      )}
+      text={intl.formatMessage(messages.dashboardInfo, { dashboardLink })}
     />
   );
 };
 
 DashboardFootnote.propTypes = {
-  intl: intlShape.isRequired,
+  content: PropTypes.shape({
+    dashboardFootnoteUrl: PropTypes.string,
+  }),
   variant: PropTypes.string.isRequired,
 };
 
-export default injectIntl(DashboardFootnote);
+export default DashboardFootnote;

src/courseware/course/course-exit/messages.ts

@@ -76,6 +76,11 @@ const messages = defineMessages({
     defaultMessage: 'Dashboard',
     description: 'Link to user’s dashboard',
   },
+  dashboardInfo: {
+    id: 'courseCelebration.dashboardInfo', // for historical reasons
+    defaultMessage: 'You can access this course and its materials on your {dashboardLink}.',
+    description: "Text that precedes link to learner's dashboard",
+  },
   endOfCourseDescription: {
     id: 'courseExit.endOfCourseDescription',
     defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',

src/plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot/README.md

@@ -0,0 +1,39 @@
+# Course Exit Dashboard Footnote Plugin Slot
+
+### Slot ID: `course_exit_dashboard_footnote_slot`
+### Props:
+* `variant`
+
+## Description
+
+This slot is used for modifying the footnote on the course exit page that links to the learner dashboard
+
+## Example
+
+The following `env.config.jsx` will change the link to point to `example.com` 
+
+![Screenshot of modified course celebration](./screenshot_custom.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_exit_dashboard_footnote_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: (widget) => {
+            widget.content.dashboardFootnoteUrl = 'http://www.example.com';
+            return widget;
+          }
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot/index.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DashboardFootnote from '../../../courseware/course/course-exit/DashboardFootnote';
+
+const DashboardFootnotePluginSlot = ({ variant }) => {
+  const dashboardFootnoteUrl = `${getConfig().LMS_BASE_URL}/dashboard`;
+  return (
+    <PluginSlot id="course_exit_dashboard_footnote_slot">
+      <DashboardFootnote
+        variant={variant}
+        content={{ dashboardFootnoteUrl }}
+      />
+    </PluginSlot>
+  );
+};
+
+DashboardFootnotePluginSlot.propTypes = {
+  variant: PropTypes.string.isRequired,
+};
+export default DashboardFootnotePluginSlot;