From 8a6fa937ea8cd5b0d0c773ec3c250c98b0b0bd58 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 11 Dec 2024 07:24:33 -0500
Subject: [PATCH] feat: add progress certificate status plugin slot (#1551)
---
.../certificate-status/CertificateStatus.jsx | 59 +++++++++---------
.../ProgressCertificateStatusSlot/README.md | 53 ++++++++++++++++
.../ProgressCertificateStatusSlot/index.jsx | 18 ++++++
.../screenshot_custom.png | Bin 0 -> 27065 bytes
.../screenshot_default.png | Bin 0 -> 59561 bytes
5 files changed, 100 insertions(+), 30 deletions(-)
create mode 100644 src/plugin-slots/ProgressCertificateStatusSlot/README.md
create mode 100644 src/plugin-slots/ProgressCertificateStatusSlot/index.jsx
create mode 100644 src/plugin-slots/ProgressCertificateStatusSlot/screenshot_custom.png
create mode 100644 src/plugin-slots/ProgressCertificateStatusSlot/screenshot_default.png
diff --git a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
index 03837ee1c9..0d157184d7 100644
--- a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
+++ b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -1,10 +1,8 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
- FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { Button, Card } from '@openedx/paragon';
import { getConfig } from '@edx/frontend-platform';
@@ -13,8 +11,10 @@ import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course
import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
import { requestCert } from '../../data/thunks';
import messages from './messages';
+import ProgressCertificateStatusSlot from '../../../plugin-slots/ProgressCertificateStatusSlot';
-const CertificateStatus = ({ intl }) => {
+const CertificateStatus = () => {
+ const intl = useIntl();
const {
courseId,
} = useSelector(state => state.courseHome);
@@ -215,7 +215,6 @@ const CertificateStatus = ({ intl }) => {
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
-
if (!certCase) {
return null;
}
@@ -243,32 +242,32 @@ const CertificateStatus = ({ intl }) => {
return (
` element. + +### Default content +![Certificate Status slot with default content](./screenshot_default.png) + +### Replaced with custom component +![Default content id showing in trigger slot](./screenshot_custom.png) + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const modifyWidget = (widget) => { + const { RenderWidget } = widget; + if (RenderWidget.props.id.includes('upgrade')) { + widget.RenderWidget = ( +
{RenderWidget.props.id}
+(zKB;uSyUUH_>$K0`