add access expiration stuff

src/course-home/outline-tab/messages.js

@@ -90,10 +90,6 @@ const messages = defineMessages({
     id: 'learning.outline.upgradeTitle',
     defaultMessage: 'Pursue a verified certificate',
   },
-  upsellFirstPurchaseDiscount: {
-    id: 'learning.outline.upsellFirstPurchaseDiscount',
-    defaultMessage: '15% First-Time Learner Discount',
-  },
   certAlt: {
     id: 'learning.outline.certificateAlt',
     defaultMessage: 'Example Certificate',

src/course-home/outline-tab/widgets/UpgradeCard.jsx

@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Icon } from '@edx/paragon';
+import { Check } from '@edx/paragon/icons';
 
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
@@ -251,6 +253,28 @@ function UpgradeCard({ courseId }) {
     ...eventProperties,
   };
 
+  function expirationHighlight(hoursToExpiration){
+    let expirationText;
+    if(hoursToExpiration < 24){
+      expirationText= <FormattedMessage
+      id="learning.outline.alert.upgradecard.expiration"
+      defaultMessage="{expiration} hours left"
+      values={{
+        expiration: (hoursToDiscountExpiration),
+      }}
+    />
+    } else {
+      expirationText =<FormattedMessage
+          id="learning.outline.alert.upgradecard.expiration"
+          defaultMessage="{expiration} days left"
+          values={{
+            expiration: (Math.floor(hoursToExpiration/24)),
+          }}
+        />
+    }
+    return(<div className="p-3 upsell-warning">{expirationText}</div>)
+  }
+
   useEffect(() => {
     sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.displayed', eventProperties);
     sendTrackEvent('Promotion Viewed', promotionEventProperties);