Skip to content

Commit a4a1c83

Browse files
jansenkjansenk
committed
refactor: simplify footnot link
1 parent 8a62a38 commit a4a1c83

8 files changed

Lines changed: 83 additions & 62 deletions

File tree

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import UpgradeFootnote from './UpgradeFootnote';
3131
import SocialIcons from '../../social-share/SocialIcons';
3232
import { logClick, logVisit } from './utils';
3333
import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
34-
import { CourseRecommendationsSlot, DashboardFootnotePluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
34+
import DashboardFootnote from './DashboardFootnote';
35+
import { CourseRecommendationsSlot } from '../../../plugin-slots/CourseExitPluginSlots';
3536

3637
const LINKEDIN_BLUE = '#2867B2';
3738

@@ -53,11 +54,20 @@ const CourseCelebration = ({ intl }) => {
5354

5455
const {
5556
org,
56-
verifiedMode,
57+
// verifiedMode,
5758
canViewCertificate,
5859
userTimezone,
5960
} = useModel('courseHomeMeta', courseId);
6061

62+
const verifiedMode = {
63+
accessExpirationDate: null,
64+
currency: 'USD',
65+
currencySymbol: '$',
66+
price: 99,
67+
sku: '765F6C2',
68+
upgradeUrl: 'https://commerce-coordinator.edx.org/lms/payment_page_redirect/?sku=765F6C2&course_run_key=course-v1%3AIBM%2BPY0101EN%2B2T2023',
69+
};
70+
6171
const {
6272
certStatus,
6373
certWebViewUrl,
@@ -83,7 +93,7 @@ const CourseCelebration = ({ intl }) => {
8393
let certHeader;
8494
let visitEvent = 'celebration_generic';
8595
// These cases are taken from the edx-platform `get_cert_data` function found in lms/courseware/views/views.py
86-
switch (certStatus) {
96+
switch ('audit_passing') {
8797
case 'downloadable':
8898
certHeader = intl.formatMessage(messages.certificateHeaderDownloadable);
8999
message = (
@@ -118,7 +128,7 @@ const CourseCelebration = ({ intl }) => {
118128
}
119129
buttonEvent = 'view_cert';
120130
visitEvent = 'celebration_with_cert';
121-
footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
131+
footnote = <DashboardFootnote variant={visitEvent} />;
122132
break;
123133
case 'earned_but_not_available': {
124134
const endDate = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
@@ -141,7 +151,7 @@ const CourseCelebration = ({ intl }) => {
141151
</>
142152
);
143153
visitEvent = 'celebration_with_unavailable_cert';
144-
footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
154+
footnote = <DashboardFootnote variant={visitEvent} />;
145155
break;
146156
}
147157
case 'requesting':
@@ -162,12 +172,12 @@ const CourseCelebration = ({ intl }) => {
162172
certHeader = intl.formatMessage(messages.certificateHeaderRequestable);
163173
message = (<p>{intl.formatMessage(messages.requestCertificateBodyText)}</p>);
164174
visitEvent = 'celebration_with_requestable_cert';
165-
footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
175+
footnote = <DashboardFootnote variant={visitEvent} />;
166176
break;
167177
case 'unverified':
168178
certHeader = intl.formatMessage(messages.certificateHeaderUnverified);
169179
visitEvent = 'celebration_unverified';
170-
footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
180+
footnote = <DashboardFootnote variant={visitEvent} />;
171181
if (verificationStatus === 'pending') {
172182
message = (<p>{intl.formatMessage(messages.verificationPending)}</p>);
173183
} else {
@@ -239,7 +249,7 @@ const CourseCelebration = ({ intl }) => {
239249
if (verifiedMode.accessExpirationDate) {
240250
footnote = <UpgradeFootnote deadline={verifiedMode.accessExpirationDate} href={verifiedMode.upgradeUrl} />;
241251
} else {
242-
footnote = <DashboardFootnotePluginSlot variant={visitEvent} />;
252+
footnote = <DashboardFootnote variant={visitEvent} />;
243253
}
244254
} else {
245255
visitEvent = 'celebration_audit_no_upgrade';

‎src/courseware/course/course-exit/CourseInProgress.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { getConfig } from '@edx/frontend-platform';
1010
import { useModel } from '../../../generic/model-store';
1111

1212
import CatalogSuggestion from './CatalogSuggestion';
13-
import { DashboardFootnotePluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
13+
import DashboardFootnote from './DashboardFootnote';
1414
import messages from './messages';
1515
import { logClick, logVisit } from './utils';
1616

@@ -53,7 +53,7 @@ const CourseInProgress = ({ intl }) => {
5353
)}
5454
</div>
5555
</Alert>
56-
<DashboardFootnotePluginSlot variant="in_progress" />
56+
<DashboardFootnote variant="in_progress" />
5757
<CatalogSuggestion variant="in_progress" />
5858
</div>
5959
</>

‎src/courseware/course/course-exit/CourseNonPassing.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { getConfig } from '@edx/frontend-platform';
1010
import { useModel } from '../../../generic/model-store';
1111

1212
import CatalogSuggestion from './CatalogSuggestion';
13-
import { DashboardFootnotePluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
13+
import DashboardFootnote from './DashboardFootnote';
1414
import messages from './messages';
1515
import { logClick, logVisit } from './utils';
1616

@@ -53,7 +53,7 @@ const CourseNonPassing = ({ intl }) => {
5353
)}
5454
</div>
5555
</Alert>
56-
<DashboardFootnotePluginSlot variant="nonpassing" />
56+
<DashboardFootnote variant="nonpassing" />
5757
<CatalogSuggestion variant="nonpassing" />
5858
</div>
5959
</>

‎src/courseware/course/course-exit/DashboardFootnote.jsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
11
import PropTypes from 'prop-types';
2-
import { useSelector } from 'react-redux';
3-
import { getConfig } from '@edx/frontend-platform';
4-
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
52
import { useIntl } from '@edx/frontend-platform/i18n';
6-
import { Hyperlink } from '@openedx/paragon';
73
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
84

9-
import { useModel } from '../../../generic/model-store';
10-
5+
import { DashboardFootnoteLinkPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
116
import Footnote from './Footnote';
127
import messages from './messages';
13-
import { logClick } from './utils';
148

15-
const DashboardFootnote = ({ variant, content }) => {
9+
const DashboardFootnote = ({ variant }) => {
1610
const intl = useIntl();
17-
const { courseId } = useSelector(state => state.courseware);
18-
const { org } = useModel('courseHomeMeta', courseId);
19-
const { administrator } = getAuthenticatedUser();
20-
21-
const dashboardLink = (
22-
<Hyperlink
23-
style={{ textDecoration: 'underline' }}
24-
destination={content?.dashboardFootnoteUrl || `${getConfig().LMS_BASE_URL}/dashboard`}
25-
className="text-reset"
26-
onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
27-
>
28-
{intl.formatMessage(messages.dashboardLink)}
29-
</Hyperlink>
30-
);
11+
const dashboardLink = (<DashboardFootnoteLinkPluginSlot variant={variant} />);
3112

3213
return (
3314
<Footnote

src/plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot/README.md renamed to src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/README.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
# Course Exit Dashboard Footnote Plugin Slot
1+
# Course Exit Dashboard Footnote Link Plugin Slot
22

3-
### Slot ID: `course_exit_dashboard_footnote_slot`
3+
### Slot ID: `course_exit_dashboard_footnote_link_slot`
44
### Props:
55
* `variant`
6+
* `content: { destination }`
67

78
## Description
89

9-
This slot is used for modifying the footnote on the course exit page that links to the learner dashboard
10+
This slot is used for modifying the link to the learner dashboard in the footnote on the course exit page
1011

1112
## Example
1213

@@ -19,14 +20,14 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
1920

2021
const config = {
2122
pluginSlots: {
22-
course_exit_dashboard_footnote_slot: {
23+
course_exit_dashboard_footnote_link_slot: {
2324
keepDefault: true,
2425
plugins: [
2526
{
2627
op: PLUGIN_OPERATIONS.Modify,
2728
widgetId: 'default_contents',
2829
fn: (widget) => {
29-
widget.content.dashboardFootnoteUrl = 'http://www.example.com';
30+
widget.content.destination = 'http://www.example.com';
3031
return widget;
3132
}
3233
},

‎src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/index.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import PropTypes from 'prop-types';
2+
import { Hyperlink } from '@openedx/paragon';
3+
import { getConfig } from '@edx/frontend-platform';
4+
import { PluginSlot } from '@openedx/frontend-plugin-framework';
5+
import { useIntl } from '@edx/frontend-platform/i18n';
6+
import { useSelector } from 'react-redux';
7+
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
8+
import messages from '../../../courseware/course/course-exit/messages';
9+
import { logClick } from '../../../courseware/course/course-exit/utils';
10+
import { useModel } from '../../../generic/model-store';
11+
12+
const DashboardFootnoteLink = ({ variant, content }) => {
13+
const intl = useIntl();
14+
const { courseId } = useSelector(state => state.courseware);
15+
const { org } = useModel('courseHomeMeta', courseId);
16+
const { administrator } = getAuthenticatedUser();
17+
const { destination } = content;
18+
return (
19+
<Hyperlink
20+
style={{ textDecoration: 'underline' }}
21+
destination={destination}
22+
className="text-reset"
23+
onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
24+
>
25+
{intl.formatMessage(messages.dashboardLink)}
26+
</Hyperlink>
27+
);
28+
};
29+
30+
DashboardFootnoteLink.propTypes = {
31+
variant: PropTypes.string.isRequired,
32+
content: PropTypes.shape({
33+
destination: PropTypes.string.isRequired,
34+
}).isRequired,
35+
};
36+
37+
const DashboardFootnoteLinkPluginSlot = ({ variant }) => {
38+
const destination = `${getConfig().LMS_BASE_URL}/dashboard`;
39+
return (
40+
<PluginSlot id="course_exit_dashboard_footnote_link_slot">
41+
<DashboardFootnoteLink variant={variant} content={{ destination }} />
42+
</PluginSlot>
43+
);
44+
};
45+
46+
DashboardFootnoteLinkPluginSlot.propTypes = {
47+
variant: PropTypes.string.isRequired,
48+
};
49+
50+
export default DashboardFootnoteLinkPluginSlot;

‎src/plugin-slots/CourseExitPluginSlots/DashboardFootnotePluginSlot/index.jsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/plugin-slots/CourseExitPluginSlots/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import DashboardFootnotePluginSlot from './DashboardFootnotePluginSlot';
1+
import DashboardFootnoteLinkPluginSlot from './DashboardFootnoteLinkPluginSlot';
22
import CourseRecommendationsSlot from './CourseRecommendationsSlot';
33
import CourseExitViewCoursesPluginSlot from './CourseExitViewCoursesPluginSlot';
44

55
export {
6-
DashboardFootnotePluginSlot,
6+
DashboardFootnoteLinkPluginSlot,
77
CourseRecommendationsSlot,
88
CourseExitViewCoursesPluginSlot,
99
};

0 commit comments

Comments
 (0)