79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { getLearnerPortalLinks } from '@edx/frontend-enterprise';
|
|
import { StatusAlert } from '@edx/paragon';
|
|
|
|
import apiClient from '../apiClient';
|
|
|
|
const LOCAL_STORAGE_KEY = 'has-viewed-enterprise-learner-portal-banner';
|
|
|
|
function getAlertHtml(learnerPortalLinks) {
|
|
let html = '';
|
|
for (let i = 0; i < learnerPortalLinks.length; i += 1) {
|
|
const link = learnerPortalLinks[i];
|
|
html += `<div class="copy-content">
|
|
${link.title} has a dedicated page where you can see all of your sponsored courses.
|
|
Go to <a href="${link.url}">your learner portal</a>.
|
|
</div>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function setViewedBanner() {
|
|
window.localStorage.setItem(LOCAL_STORAGE_KEY, true);
|
|
}
|
|
|
|
function hasViewedBanner() {
|
|
return window.localStorage.getItem(LOCAL_STORAGE_KEY) != null;
|
|
}
|
|
|
|
class EnterpriseLearnerPortalBanner extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.onClose = this.onClose.bind(this);
|
|
|
|
this.state = {
|
|
open: false,
|
|
alertHtml: '',
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (!hasViewedBanner()) {
|
|
getLearnerPortalLinks(apiClient).then((learnerPortalLinks) => {
|
|
this.setState({
|
|
open: true,
|
|
alertHtml: getAlertHtml(learnerPortalLinks),
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
onClose() {
|
|
this.setState({ open: false });
|
|
setViewedBanner();
|
|
}
|
|
|
|
render() {
|
|
const { alertHtml, open } = this.state;
|
|
|
|
if (open && alertHtml) {
|
|
return (
|
|
<div className="edx-enterprise-learner-portal-banner-wrapper">
|
|
<StatusAlert
|
|
className={['edx-enterprise-learner-portal-banner']}
|
|
open={open}
|
|
// eslint-disable-next-line react/no-danger
|
|
dialog={(<span dangerouslySetInnerHTML={{ __html: alertHtml }} />)}
|
|
onClose={this.onClose}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export { EnterpriseLearnerPortalBanner }; // eslint-disable-line import/prefer-default-export
|