diff --git a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
index f5d0307a..b51b3a95 100644
--- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
FormattedMessage, FormattedDate, injectIntl, intlShape,
@@ -7,8 +7,18 @@ import { Hyperlink } from '@edx/paragon';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import messages from './messages';
+import AccessExpirationAlertMMP2P from './AccessExpirationAlertMMP2P';
function AccessExpirationAlert({ intl, payload }) {
+ /** [MM-P2P] Experiment */
+ const [showMMP2P, setShowMMP2P] = useState(!!window.experiment__home_alert_bShowMMP2P);
+ if (window.experiment__home_alert_showMMP2P === undefined) {
+ window.experiment__home_alert_showMMP2P = (val) => {
+ window.experiment__home_alert_bShowMMP2P = !!val;
+ setShowMMP2P(!!val);
+ };
+ }
+
const {
accessExpiration,
userTimezone,
@@ -49,6 +59,13 @@ function AccessExpirationAlert({ intl, payload }) {
);
}
+ /** [MM-P2P] Experiment */
+ if (showMMP2P) {
+ return (
+
+ );
+ }
+
let deadlineMessage = null;
if (upgradeDeadline && upgradeUrl) {
deadlineMessage = (
diff --git a/src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx b/src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx
new file mode 100644
index 00000000..15e703d0
--- /dev/null
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedDate, injectIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
+
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+import messages from './messages';
+
+function AccessExpirationAlertMMP2P({ payload }) {
+ const {
+ accessExpiration,
+ userTimezone,
+ } = payload;
+ const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+ if (!accessExpiration) {
+ return null;
+ }
+
+ const {
+ expirationDate,
+ upgradeDeadline,
+ upgradeUrl,
+ } = accessExpiration;
+
+ let deadlineMessage = null;
+ const formatDate = (val, key) => (
+
+ );
+
+ if (upgradeDeadline && upgradeUrl) {
+ deadlineMessage = (
+ <>
+ Upgrade by {formatDate(upgradeDeadline, 'upgradeDesc')} to unlock unlimited access to all course activities, including graded assignments.
+
+
+ {messages.upgradeNow.defaultMessage}
+
+ >
+ );
+ }
+
+ return (
+
+
+ Unlock full course content by {formatDate(upgradeDeadline, 'upgradeTitle')}
+
+
+ {deadlineMessage}
+
+ You lose all access to the first two weeks of scheduled content
+ on {formatDate(expirationDate, 'expirationBody')}.
+
+ );
+}
+
+AccessExpirationAlertMMP2P.propTypes = {
+ payload: PropTypes.shape({
+ accessExpiration: PropTypes.shape({
+ expirationDate: PropTypes.string.isRequired,
+ masqueradingExpiredCourse: PropTypes.bool.isRequired,
+ upgradeDeadline: PropTypes.string,
+ upgradeUrl: PropTypes.string,
+ }).isRequired,
+ userTimezone: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+export default injectIntl(AccessExpirationAlertMMP2P);
diff --git a/src/course-home/outline-tab/DateSummary.jsx b/src/course-home/outline-tab/DateSummary.jsx
index 2b10dfd9..b0a3ce02 100644
--- a/src/course-home/outline-tab/DateSummary.jsx
+++ b/src/course-home/outline-tab/DateSummary.jsx
@@ -1,7 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
import { FormattedDate } from '@edx/frontend-platform/i18n';
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { isLearnerAssignment } from '../dates-tab/utils';
import './DateSummary.scss';
@@ -12,6 +12,17 @@ export default function DateSummary({
}) {
const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+ /** [MM-P2P experiment] */
+ const [showMMP2P, setShowMMP2P] = useState(window.experiment__home_dates_bShowMMP2P);
+ if (window.experiment__home_dates_showMMP2P !== undefined) {
+ window.experiment__home_dates_showMMP2P = (value) => {
+ setShowMMP2P(!!value);
+ window.experiment__home_dates_bShowMMP2P = !!value;
+ };
+ }
+ const activateMMP2P = (showMMP2P && dateBlock.dateType === 'verified-upgrade-deadline');
+
return (
@@ -27,18 +38,34 @@ export default function DateSummary({
/>
-
-
- {linkedTitle
- &&
}
- {!linkedTitle
- &&
{dateBlock.title}
}
+ {activateMMP2P ? (
+
+
+
+ Last chance to upgrade
+
+
+
+ Don't miss the opportunity to highlight your knowledge and skills by earning a verified certificate.
+
+
+ {dateBlock.linkText}
+
- {dateBlock.description
- &&
{dateBlock.description}
}
- {!linkedTitle && dateBlock.link
- &&
{dateBlock.linkText}}
-
+ ) : (
+
+
+ {linkedTitle
+ &&
}
+ {!linkedTitle
+ &&
{dateBlock.title}
}
+
+ {dateBlock.description
+ &&
{dateBlock.description}
}
+ {!linkedTitle && dateBlock.link
+ &&
{dateBlock.linkText}}
+
+ )}
);
}