feat: add plugin slot for course card action

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

@@ -5,24 +5,22 @@ import { ActionRow } from '@openedx/paragon';
 
 import { reduxHooks } from 'hooks';
 
-import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
 import ViewCourseButton from './ViewCourseButton';
+import CourseCardActionSlot from '../../../../plugin-slots/CourseCardActionSlot';
 
 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/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,5 +1,6 @@
 # `frontend-app-learner-dashboard` Plugin Slots
 
+* [`course_card_action_slot`](./CourseCardActionSlot/)
 * [`footer_slot`](./FooterSlot/)
 * [`widget_sidebar_slot`](./WidgetSidebarSlot/)
 * [`course_list_slot`](./CourseListSlot/)