diff --git a/src/containers/CourseCard/components/CourseCardActions/index.jsx b/src/containers/CourseCard/components/CourseCardActions/index.jsx index 51eeafe..b14f1c9 100644 --- a/src/containers/CourseCard/components/CourseCardActions/index.jsx +++ b/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 ( - {!(isEntitlement || isVerified || isExecEd2UCourse) && } + {isEntitlement && (isFulfilled ? : diff --git a/src/plugin-slots/CourseCardActionSlot/README.md b/src/plugin-slots/CourseCardActionSlot/README.md new file mode 100644 index 0000000..bbf0d5c --- /dev/null +++ b/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 `

` elements in a `

`. + +![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}) => ( +
+

📚: {cardId}

+
+ ), + }, + }, + ] + } + }, +} + +export default config; +``` \ No newline at end of file diff --git a/src/plugin-slots/CourseCardActionSlot/images/post_course_card_action.png b/src/plugin-slots/CourseCardActionSlot/images/post_course_card_action.png new file mode 100644 index 0000000..e81138a Binary files /dev/null and b/src/plugin-slots/CourseCardActionSlot/images/post_course_card_action.png differ diff --git a/src/plugin-slots/CourseCardActionSlot/index.jsx b/src/plugin-slots/CourseCardActionSlot/index.jsx new file mode 100644 index 0000000..564e803 --- /dev/null +++ b/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 ( + + {!(isEntitlement || isVerified || isExecEd2UCourse) && } + + ); +}; + +CourseCardActionSlot.propTypes = { + cardId: PropTypes.string.isRequired, +}; + +export default CourseCardActionSlot; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 5a134b9..d1f6cca 100644 --- a/src/plugin-slots/README.md +++ b/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/)