diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap
index 6e66374c..73431279 100644
--- a/src/course-home/data/__snapshots__/redux.test.js.snap
+++ b/src/course-home/data/__snapshots__/redux.test.js.snap
@@ -429,6 +429,7 @@ Object {
           "hasVisitedCourse": false,
           "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+Test+Block@12345abcde",
         },
+        "timeOffsetMillis": 0,
         "verifiedMode": Object {
           "accessExpirationDate": "2050-01-01T12:00:00",
           "currency": "USD",
diff --git a/src/course-home/outline-tab/widgets/UpgradeCard.jsx b/src/course-home/outline-tab/widgets/UpgradeCard.jsx
index 2635e8b3..61880b5f 100644
--- a/src/course-home/outline-tab/widgets/UpgradeCard.jsx
+++ b/src/course-home/outline-tab/widgets/UpgradeCard.jsx
@@ -4,17 +4,17 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { FormattedDate, FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 import { useModel } from '../../../generic/model-store';
 import { UpgradeButton } from '../../../generic/upgrade-button';
 
-function UpsellNoFBECardContent(){
+function UpsellNoFBECardContent() {
   return (
     <ul className="fa-ul">
       <li>
-      <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
         <FormattedMessage
           id="learning.outline.alert.upgradecard.verifiedCertLink"
           defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
@@ -26,7 +26,7 @@ function UpsellNoFBECardContent(){
         />
       </li>
       <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
         <FormattedMessage
           id="learning.outline.alert.upgradecard.nonProfitMission"
           defaultMessage="Support our {nonProfitMission} at edX"
@@ -57,19 +57,19 @@ function UpsellFBEFarAwayCardContent() {
         />
       </li>
       <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
         <FormattedMessage
           id="learning.outline.alert.upgradecard.unlock-graded"
           defaultMessage="Unlock your access to all course activities, including {gradedAssignments}"
           values={{
             gradedAssignments: (
-            <span className="font-weight-bold">graded assignments</span>
+              <span className="font-weight-bold">graded assignments</span>
             ),
           }}
         />
       </li>
       <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
         <FormattedMessage
           id="learning.outline.alert.upgradecard.fullAccess"
           defaultMessage="{fullAccess} to course content and materials, even after the course ends"
@@ -81,7 +81,7 @@ function UpsellFBEFarAwayCardContent() {
         />
       </li>
       <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
         <FormattedMessage
           id="learning.outline.alert.upgradecard.nonProfitMission"
           defaultMessage="Support our {nonProfitMission} at edX"
@@ -96,7 +96,7 @@ function UpsellFBEFarAwayCardContent() {
   );
 }
 
-function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
+function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) {
   return (
     <div>
       <p>
@@ -105,13 +105,15 @@ function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
           defaultMessage="You will lose all access to this course, {includingAnyProgress}, on {date}."
           values={{
             includingAnyProgress: (<span className="font-weight-bold">including any progress</span>),
-            date: (<FormattedDate
+            date: (
+              <FormattedDate
                 key="accessDate"
                 day="numeric"
                 month="long"
                 value={new Date(accessExpirationDate)}
                 {...timezoneFormatArgs}
-              />),
+              />
+            ),
           }}
         />
       </p>
@@ -120,7 +122,7 @@ function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
           id="learning.outline.alert.upgradecard.expirationVerifiedCert"
           defaultMessage="Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the {benefitsOfUpgrading}."
           values={{
-            benefitsOfUpgrading: ( <a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">benefits of upgrading</a>),
+            benefitsOfUpgrading: (<a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">benefits of upgrading</a>),
           }}
         />
       </p>
@@ -132,60 +134,71 @@ UpsellFBESoonCardContent.propTypes = {
   accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
   timezoneFormatArgs: PropTypes.shape({
     timeZone: PropTypes.string,
-  })
+  }),
 };
 
-function ExpirationCountdown({hoursToExpiration}){
-  let expirationText;
-  console.log(hoursToExpiration)
+UpsellFBESoonCardContent.defaultProps = {
+  timezoneFormatArgs: {},
+};
 
-  if(hoursToExpiration >= 24){
-    expirationText =<FormattedMessage
+function ExpirationCountdown({ hoursToExpiration }) {
+  let expirationText;
+
+  if (hoursToExpiration >= 24) {
+    expirationText = (
+      <FormattedMessage
         id="learning.outline.alert.upgradecard.expiration.days"
         defaultMessage={`{dayCount, number} {dayCount, plural, 
           one {day}
           other {days}} left`}
         values={{
-          dayCount: (Math.floor(hoursToExpiration/24)),
+          dayCount: (Math.floor(hoursToExpiration / 24)),
         }}
       />
-  } else if (hoursToExpiration >= 1){
-    expirationText= <FormattedMessage
-    id="learning.outline.alert.upgradecard.expiration.hours"
-    defaultMessage={`{hourCount, number} {hourCount, plural,
-      one {hour}
-      other {hours}} left`}
-    values={{
-      hourCount: (hoursToExpiration),
-    }}
-  />
+    );
+  } else if (hoursToExpiration >= 1) {
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.hours"
+        defaultMessage={`{hourCount, number} {hourCount, plural,
+          one {hour}
+          other {hours}} left`}
+        values={{
+          hourCount: (hoursToExpiration),
+        }}
+      />
+    );
   } else {
-    expirationText =<FormattedMessage
-    id="learning.outline.alert.upgradecard.expiration.minutes"
-    defaultMessage="Less than 1 hour left"
-  />
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.minutes"
+        defaultMessage="Less than 1 hour left"
+      />
+    );
   }
-  return(<div className="p-3 upsell-warning">{expirationText}</div>)
+  return (<div className="p-3 upsell-warning">{expirationText}</div>);
 }
 
 ExpirationCountdown.propTypes = {
   hoursToExpiration: PropTypes.number.isRequired,
 };
 
-function AccessExpirationDateBanner({accessExpirationDate, timezoneFormatArgs}){
+function AccessExpirationDateBanner({ accessExpirationDate, timezoneFormatArgs }) {
   return (
     <div className="p-3 upsell-warning-light">
       <FormattedMessage
         id="learning.outline.alert.upgradecard.expirationr"
         defaultMessage="Course access will expire {date}"
         values={{
-          date: (<FormattedDate
+          date: (
+            <FormattedDate
               key="accessExpireDate"
               day="numeric"
               month="long"
               value={accessExpirationDate}
               {...timezoneFormatArgs}
-            />),
+            />
+          ),
         }}
       />
     </div>
@@ -196,7 +209,11 @@ AccessExpirationDateBanner.propTypes = {
   accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
   timezoneFormatArgs: PropTypes.shape({
     timeZone: PropTypes.string,
-  })
+  }),
+};
+
+AccessExpirationDateBanner.defaultProps = {
+  timezoneFormatArgs: {},
 };
 
 function UpgradeCard({ courseId }) {
@@ -217,7 +234,6 @@ function UpgradeCard({ courseId }) {
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
   const correctedTime = new Date(Date.now() + timeOffsetMillis);
 
-
   if (!verifiedMode) {
     return null;
   }
@@ -256,9 +272,8 @@ function UpgradeCard({ courseId }) {
     });
   };
 
-  
-  /* 
-  There are 4 parts that change in the upgrade card: 
+  /*
+  There are 4 parts that change in the upgrade card:
     upgradeCardHeaderText
     expirationBanner
     upsellMessage
@@ -269,61 +284,76 @@ function UpgradeCard({ courseId }) {
   let upsellMessage;
   let offerCode;
 
-  if(!!accessExpiration && !!contentTypeGatingEnabled){
-    if(!!offer){ // if there's a first purchase discount, show it
+  if (!!accessExpiration && !!contentTypeGatingEnabled) {
+    if (offer) { // if there's a first purchase discount, show it
+      const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60);
 
-      const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) /1000/ 60 /60)
-      
-      upgradeCardHeaderText = <FormattedMessage
+      upgradeCardHeaderText = (
+        <FormattedMessage
           id="learning.outline.alert.upgradecard.firstTimeLearnerDiscount"
           defaultMessage="{percentage}% First-Time Learner Discount"
           values={{
             percentage: (offer.percentage),
           }}
         />
-      
-      expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration}/>
-      upsellMessage = <UpsellFBEFarAwayCardContent />
-      offerCode = <div className="bg-light p-3 text-center discount-info">
-      <FormattedMessage
-        id="learning.outline.alert.upgradecard.code"
-        defaultMessage="Use code {code} at checkout"
-        values={{
-          code: (<span className="font-weight-bold">{offer.code}</span>),
-        }}
-      />
-    </div>
-
+      );
+      expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration} />;
+      upsellMessage = <UpsellFBEFarAwayCardContent />;
+      offerCode = (
+        <div className="bg-light p-3 text-center discount-info">
+          <FormattedMessage
+            id="learning.outline.alert.upgradecard.code"
+            defaultMessage="Use code {code} at checkout"
+            values={{
+              code: (<span className="font-weight-bold">{offer.code}</span>),
+            }}
+          />
+        </div>
+      );
     } else {
-      const accessExpirationDate = new Date(accessExpiration.expirationDate)
-      const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) /1000/ 60 /60)
+      const accessExpirationDate = new Date(accessExpiration.expirationDate);
+      const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);
 
-      if(hoursToAccessExpiration >= (7*24)) {
-          upgradeCardHeaderText = <FormattedMessage
+      if (hoursToAccessExpiration >= (7 * 24)) {
+        upgradeCardHeaderText = (
+          <FormattedMessage
             id="learning.outline.alert.upgradecard.accessExpiration"
             defaultMessage="Upgrade your course today"
           />
-          expirationBanner = <AccessExpirationDateBanner accessExpirationDate={accessExpirationDate} timezoneFormatArgs={timezoneFormatArgs} />
-          upsellMessage = <UpsellFBEFarAwayCardContent />
-        } else { // more urgent messaging if there's less than 7 days left
-          upgradeCardHeaderText = <FormattedMessage
+        );
+        expirationBanner = (
+          <AccessExpirationDateBanner
+            accessExpirationDate={accessExpirationDate}
+            timezoneFormatArgs={timezoneFormatArgs}
+          />
+        );
+        upsellMessage = <UpsellFBEFarAwayCardContent />;
+      } else { // more urgent messaging if there's less than 7 days left
+        upgradeCardHeaderText = (
+          <FormattedMessage
             id="learning.outline.alert.upgradecard.accessExpirationUrgent"
             defaultMessage="Course Access Expiration"
           />
-          expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration}/>
-          upsellMessage = <UpsellFBESoonCardContent accessExpirationDate={accessExpirationDate} timezoneFormatArgs={timezoneFormatArgs} />
-        }
+        );
+        expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration} />;
+        upsellMessage = (
+          <UpsellFBESoonCardContent
+            accessExpirationDate={accessExpirationDate}
+            timezoneFormatArgs={timezoneFormatArgs}
+          />
+        );
       }
-  } else { //FBE is turned off
-    upgradeCardHeaderText = <FormattedMessage
+    }
+  } else { // FBE is turned off
+    upgradeCardHeaderText = (
+      <FormattedMessage
         id="learning.outline.alert.upgradecard.pursueAverifiedCertificate"
         defaultMessage="Pursue a verified certificate"
       />
-    upsellMessage = <UpsellNoFBECardContent />
+    );
+    upsellMessage = (<UpsellNoFBECardContent />);
   }
 
-
-
   return (
     <section className="mb-4 card">
       <h2 className="h5 m-3" id="outline-sidebar-upgrade-header">
@@ -346,12 +376,6 @@ function UpgradeCard({ courseId }) {
 
 UpgradeCard.propTypes = {
   courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  onLearnMore: PropTypes.func,
-};
-
-UpgradeCard.defaultProps = {
-  onLearnMore: null,
 };
 
 export default injectIntl(UpgradeCard);