Add UpgradeCard to courseware and fix CSS to be usable for course-home and courseware

src/course-home/outline-tab/OutlineTab.jsx

@@ -228,6 +228,7 @@ function OutlineTab({ intl }) {
                   timeOffsetMillis={timeOffsetMillis}
                   courseId={courseId}
                   org={org}
+                  shouldDisplayBorder
                 />
               )}
             <CourseDates

src/courseware/course/Sidebar.jsx

@@ -6,18 +6,28 @@ import { Icon } from '@edx/paragon';
 import { ArrowBackIos, Close } from '@edx/paragon/icons';
 import messages from './messages';
 import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
+import { useModel } from '../../generic/model-store';
+import UpgradeCard from '../../generic/upgrade-card/UpgradeCard';
 
 function Sidebar({
-  intl, toggleSidebar,
+  intl, toggleSidebar, courseId,
 }) {
+  const course = useModel('coursewareMeta', courseId);
+
+  const {
+    accessExpiration,
+    contentTypeGatingEnabled,
+    offer,
+    org,
+    timeOffsetMillis,
+    userTimezone,
+    verifiedMode,
+  } = course;
+
   const shouldDisplayFullScreen = useWindowSize().width < responsiveBreakpoints.large.minWidth;
 
-  // REV-2130 TODO: temporary variable set to true, should be replaced with
-  // whether the course can be upgraded (ie. shouldDisplayUpgradeNotification)
-  const shouldDisplayNoNotification = true;
-
   return (
-    <section className={classNames('sidebar-container ml-0 ml-lg-4', { 'no-notification': shouldDisplayNoNotification && !shouldDisplayFullScreen })} aria-label={intl.formatMessage(messages.sidebarNotification)}>
+    <section className={classNames('sidebar-container ml-0 ml-lg-4', { 'no-notification': !verifiedMode && !shouldDisplayFullScreen })} aria-label={intl.formatMessage(messages.sidebarNotification)}>
       {shouldDisplayFullScreen ? (
         <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
           <Icon src={ArrowBackIos} />
@@ -31,9 +41,20 @@ function Sidebar({
           : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeSidebarButton)} />}
       </div>
       <div className="sidebar-divider" />
-      <div className="sidebar-content">
-        {/* REV-2130 TODO: replace logic to display upgrade expiration box if condition is true */}
-        {shouldDisplayNoNotification ? <p>{intl.formatMessage(messages.noNotificationsMessage)}</p> : null}
+      <div>{verifiedMode
+        ? (
+          <UpgradeCard
+            offer={offer}
+            verifiedMode={verifiedMode}
+            accessExpiration={accessExpiration}
+            contentTypeGatingEnabled={contentTypeGatingEnabled}
+            userTimezone={userTimezone}
+            timeOffsetMillis={timeOffsetMillis}
+            courseId={courseId}
+            org={org}
+            shouldDisplayBorder={false}
+          />
+        ) : <p className="sidebar-content">{intl.formatMessage(messages.noNotificationsMessage)}</p>}
       </div>
     </section>
   );
@@ -41,6 +62,7 @@ function Sidebar({
 
 Sidebar.propTypes = {
   intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
   toggleSidebar: PropTypes.func,
 };
 

src/courseware/course/Sidebar.scss

@@ -3,6 +3,7 @@
     border-radius: 4px;
     width: 20rem;
     vertical-align: top;
+    height: 100%;
 
     @media (max-width: -1 + map-get($grid-breakpoints, 'lg')) {
         position: fixed; 
@@ -11,7 +12,6 @@
         left: 0; 
         right: 0;
         width: 100%;
-        height: 100% !important;
         background-color: white;
         margin: 0;
         border: none;

src/courseware/course/sequence/Sequence.jsx

@@ -230,6 +230,7 @@ function Sequence({
         <Sidebar
           toggleSidebar={toggleSidebar}
           sidebarVisible={sidebarVisible}
+          courseId={courseId}
         />
       ) : null }
 

src/generic/upgrade-card/UpgradeCard.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -267,6 +268,7 @@ function UpgradeCard({
   timeOffsetMillis,
   userTimezone,
   verifiedMode,
+  shouldDisplayBorder,
 }) {
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
   const correctedTime = new Date(Date.now() + timeOffsetMillis);
@@ -393,7 +395,7 @@ function UpgradeCard({
   }
 
   return (
-    <section className="mb-4 card upgrade-card small">
+    <section className={classNames('upgrade-card small', { 'card mb-4': shouldDisplayBorder })}>
       <h2 className="h5 upgrade-card-header" id="outline-sidebar-upgrade-header">
         {upgradeCardHeaderText}
       </h2>
@@ -431,6 +433,7 @@ UpgradeCard.propTypes = {
     price: PropTypes.number.isRequired,
     upgradeUrl: PropTypes.string.isRequired,
   }),
+  shouldDisplayBorder: PropTypes.bool,
 };
 
 UpgradeCard.defaultProps = {
@@ -440,6 +443,7 @@ UpgradeCard.defaultProps = {
   timeOffsetMillis: 0,
   userTimezone: null,
   verifiedMode: null,
+  shouldDisplayBorder: null,
 };
 
 export default injectIntl(UpgradeCard);