feat: add plugin slot for course card action

src/containers/CourseCard/components/CourseCardActions/index.jsx

@@ -5,7 +5,7 @@ import { ActionRow } from '@openedx/paragon';
 
 import { reduxHooks } from 'hooks';
 
-import UpgradeButton from './UpgradeButton';
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -14,15 +14,13 @@ import ViewCourseButton from './ViewCourseButton';
 export const CourseCardActions = ({ cardId }) => {
   const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
   const {
-    isVerified,
     hasStarted,
-    isExecEd2UCourse,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
 
   return (
     <ActionRow data-test-id="CourseCardActions">
-      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
+      <CourseCardActionSlot cardId={cardId} />
       {isEntitlement && (isFulfilled
         ? <ViewCourseButton cardId={cardId} />
         : <SelectSessionButton cardId={cardId} />

src/containers/CourseCard/components/CourseCardActions/index.test.jsx

@@ -2,6 +2,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
@@ -19,6 +20,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('plugin-slots/CourseCardActionSlot', () => 'CustomActionButton');
 jest.mock('./UpgradeButton', () => 'UpgradeButton');
 jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
 jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
@@ -88,26 +90,26 @@ describe('CourseCardActions', () => {
         expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
       });
     });
-    describe('not entielement, verified, or exec ed', () => {
+    describe('not entitlement, verified, or exec ed', () => {
       it('renders UpgradeButton and ViewCourseButton for archived courses', () => {
         mockHooks({ isArchived: true });
         render();
-        expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
         expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
       });
       describe('unstarted courses', () => {
         it('renders UpgradeButton and BeginCourseButton', () => {
           mockHooks();
           render();
-          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
           expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
         });
       });
       describe('active courses (started, and not archived)', () => {
         it('renders UpgradeButton and ResumeButton', () => {
           mockHooks({ hasStarted: true });
           render();
-          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
           expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
         });
       });

src/plugin-slots/CourseCardActionSlot/README.md

@@ -0,0 +1,44 @@
+# Course Card Action Slot
+
+### Slot ID: `course_card_action_slot`
+### Props:
+* `cardId`
+
+## Description
+
+This slot is used for adding content in the Action buttons section of each Course Card.
+
+## Example
+
+The following `env.config.jsx` will render the `cardId` of the course as `<p>` elements in a `<div>`.
+
+![Screenshot of Content added after the Sequence Container](./images/post_course_card_action.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_card_action_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          // Insert custom content after course card buttons
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_card_action',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({cardId}) => (
+              <div>
+                <p>📚: {cardId}</p>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseCardActionSlot/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import { reduxHooks } from 'hooks';
+import UpgradeButton from 'containers/CourseCard/components/CourseCardActions/UpgradeButton';
+
+const CourseCardActionSlot = ({ cardId }) => {
+  const { isEntitlement } = reduxHooks.useCardEntitlementData(cardId);
+  const {
+    isVerified,
+    isExecEd2UCourse,
+  } = reduxHooks.useCardEnrollmentData(cardId);
+
+  return (
+    <PluginSlot
+      id="course_card_action_slot"
+      pluginProps={{
+        cardId,
+      }}
+    >
+      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
+    </PluginSlot>
+  );
+};
+
+CourseCardActionSlot.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCardActionSlot;

src/plugin-slots/README.md

@@ -1,3 +1,4 @@
 # `frontend-app-learner-dashboard` Plugin Slots
 
+* [`course_card_action_slot`](./CourseCardActionSlot/)
 * [`footer_slot`](./FooterSlot/)