diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
index 7a452c36..f15bf44d 100644
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, breakpoints, useWindowSize } from '@edx/paragon';
+import {
+ Alert, Hyperlink, breakpoints, useWindowSize,
+} from '@edx/paragon';
import { Locked } from '@edx/paragon/icons';
import messages from './messages';
import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
@@ -23,6 +25,8 @@ function LockPaywall({
}) {
const course = useModel('coursewareMeta', courseId);
const {
+ accessExpiration,
+ marketingUrl,
offer,
org,
verifiedMode,
@@ -39,6 +43,9 @@ function LockPaywall({
&& !notificationTrayVisible;
const shouldWrapTextOnButton = useWindowSize().width > breakpoints.extraSmall.minWidth;
+ const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;
+ const pastExpirationDeadline = accessExpiration ? new Date(Date.now()) > accessExpirationDate : false;
+
if (!verifiedMode) {
return null;
}
@@ -65,12 +72,18 @@ function LockPaywall({
{intl.formatMessage(messages['learn.lockPaywall.title'])}
+ {pastExpirationDeadline ? (
+
+ {intl.formatMessage(messages['learn.lockPaywall.content.pastExpiration'])}
+ {intl.formatMessage(messages['learn.lockPaywall.courseDetails'])}
+
+ ) : (
+
+ {intl.formatMessage(messages['learn.lockPaywall.content'])}
+
+ )}
-
- {intl.formatMessage(messages['learn.lockPaywall.content'])}
-
-
-
+
-
-
-
+ {pastExpirationDeadline
+ ? null
+ : (
+
+
+
+ )}
);
diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
index 9638c666..7bbee59b 100644
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
@@ -1,5 +1,6 @@
.alert-content.lock-paywall-container {
display: inline-flex;
+ width: 100%;
}
.lock-paywall-container svg {
diff --git a/src/courseware/course/sequence/lock-paywall/messages.js b/src/courseware/course/sequence/lock-paywall/messages.js
index 964d33a8..54f51990 100644
--- a/src/courseware/course/sequence/lock-paywall/messages.js
+++ b/src/courseware/course/sequence/lock-paywall/messages.js
@@ -11,6 +11,16 @@ const messages = defineMessages({
defaultMessage: 'Upgrade to gain access to locked features like this one and get the most out of your course.',
description: 'Message shown to indicate that a piece of content is unavailable to audit track users.',
},
+ 'learn.lockPaywall.content.pastExpiration': {
+ id: 'learn.lockPaywall.content.pastExpiration',
+ defaultMessage: 'The upgrade deadline for this course passed. To upgrade, enroll in the next available session. ',
+ description: 'Message shown to indicate that a piece of content is unavailable to audit track users in a course where the expiration deadline has passed.',
+ },
+ 'learn.lockPaywall.courseDetails': {
+ id: 'learn.lockPaywall.courseDetails',
+ defaultMessage: 'View Course Details',
+ description: 'Link to the course details page for this course with a past expiration date.',
+ },
'learn.lockPaywall.example.alt': {
id: 'learn.lockPaywall.example.alt',
defaultMessage: 'Example Certificate',