feat: add plugin slot for course end course recommendations (#1618)

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

@@ -32,7 +32,7 @@ import UpgradeFootnote from './UpgradeFootnote';
 import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
-import CourseRecommendations from './CourseRecommendations';
+import CourseRecommendationsSlot from '../../../plugin-slots/CourseRecommendationsSlot';
 
 const LINKEDIN_BLUE = '#2867B2';
 
@@ -357,7 +357,7 @@ const CourseCelebration = ({ intl }) => {
             />
           ))}
           {footnote}
-          <CourseRecommendations variant={visitEvent} />
+          <CourseRecommendationsSlot variant={visitEvent} />
         </div>
       </div>
     </>

src/plugin-slots/CourseRecommendationsSlot/README.md

@@ -0,0 +1,39 @@
+# Unit Title Slot
+
+### Slot ID: `course_recommendations_slot`
+### Props:
+* `variant`
+
+## Description
+
+This slot is used for modifying the course end recommendation 
+
+## Example
+
+The following `env.config.jsx` will replace the course recommendations with a thumbs up 
+
+![Screenshot of modified course celebration](./screenshot_custom.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_recommendations_slot: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_direct_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (<div >👍</div>),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseRecommendationsSlot/index.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseRecommendations from '../../courseware/course/course-exit/CourseRecommendations';
+
+const CourseRecommendationsSlot = ({ variant }) => (
+  <PluginSlot id="course_recommendations_slot">
+    <CourseRecommendations variant={variant} />
+  </PluginSlot>
+);
+
+CourseRecommendationsSlot.propTypes = {
+  variant: PropTypes.string.isRequired,
+};
+
+export default CourseRecommendationsSlot;