From 8dafafc59b78f135dbfa2a3506ad9d685d409c52 Mon Sep 17 00:00:00 2001
From: Hamzah Ullah <hamzahullah@yahoo.com>
Date: Wed, 14 Aug 2024 14:49:07 -0400
Subject: [PATCH] feat: add date metadata for course run assignments on coures
 about page (#1145)

---
 src/components/app/data/utils.js              |  36 ++++
 .../course/course-header/CourseHeader.jsx     |  14 +-
 .../course-header/CourseImportantDates.jsx    | 133 +++++++++++++
 .../course/course-header/CoursePreview.jsx    |   6 +-
 .../course-header/tests/CourseHeader.test.jsx |  33 ++++
 .../tests/CourseImportantDates.test.jsx       | 182 ++++++++++++++++++
 src/components/course/data/constants.js       |   1 +
 src/components/course/data/utils.jsx          |  78 +++++++-
 .../course/styles/_CourseHeader.scss          |  22 ++-
 9 files changed, 480 insertions(+), 25 deletions(-)
 create mode 100644 src/components/course/course-header/CourseImportantDates.jsx
 create mode 100644 src/components/course/course-header/tests/CourseImportantDates.test.jsx

diff --git a/src/components/app/data/utils.js b/src/components/app/data/utils.js
index 97bac7d120..f71f237236 100644
--- a/src/components/app/data/utils.js
+++ b/src/components/app/data/utils.js
@@ -750,6 +750,26 @@ export function isEnrollmentUpgradeable(enrollment) {
   return canUpgradeToVerifiedEnrollment;
 }
 
+/**
+ * Determines if allocatedAssignments are courseRun based
+ *
+ * @param redeemableLearnerCreditPolicies
+ * @param courseKey
+ * @returns {
+ *   {
+ *     hasAssignedCourseRuns: boolean,
+ *    allocatedCourseRunAssignmentKeys: *,
+ *    allocatedCourseRunAssignments: *,
+ *    hasMultipleAssignedCourseRuns: boolean
+ *   } |
+ *   {
+ *    hasAssignedCourseRuns: boolean,
+ *    allocatedCourseRunAssignmentKeys: *[],
+ *    allocatedCourseRunAssignments: *[],
+ *    hasMultipleAssignedCourseRuns: boolean
+ *   }
+ * }
+ */
 export function determineAllocatedCourseRunAssignmentsForCourse({
   redeemableLearnerCreditPolicies,
   courseKey,
@@ -778,6 +798,22 @@ export function determineAllocatedCourseRunAssignmentsForCourse({
   };
 }
 
+/**
+ * Transform course metadata to display available runs with multiple allocated course runs
+ *
+ * @param hasMultipleAssignedCourseRuns
+ * @param courseMetadata
+ * @param allocatedCourseRunAssignmentKeys
+ * @returns {
+ * * |
+ *  (* &
+ *    {
+ *      courseRuns: *,
+ *      availableCourseRuns: *
+ *    }
+ *  )
+ * }
+ */
 export function transformCourseMetadataByAllocatedCourseRunAssignments({
   hasMultipleAssignedCourseRuns,
   courseMetadata,
diff --git a/src/components/course/course-header/CourseHeader.jsx b/src/components/course/course-header/CourseHeader.jsx
index 31d9201aaa..25008f771b 100644
--- a/src/components/course/course-header/CourseHeader.jsx
+++ b/src/components/course/course-header/CourseHeader.jsx
@@ -1,12 +1,7 @@
 import { useMemo } from 'react';
 import classNames from 'classnames';
 import {
-  Breadcrumb,
-  Container,
-  Row,
-  Col,
-  Badge,
-  Hyperlink,
+  Badge, Breadcrumb, Col, Container, Hyperlink, Row,
 } from '@openedx/paragon';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -15,10 +10,7 @@ import CourseSkills from '../CourseSkills';
 import CourseEnrollmentFailedAlert, { ENROLLMENT_SOURCE } from '../CourseEnrollmentFailedAlert';
 import CourseRunCards from './CourseRunCards';
 
-import {
-  getDefaultProgram,
-  formatProgramType,
-} from '../data/utils';
+import { formatProgramType, getDefaultProgram } from '../data/utils';
 import { useCoursePartners, useIsCourseAssigned } from '../data';
 import LicenseRequestedAlert from '../LicenseRequestedAlert';
 import SubsidyRequestButton from '../SubsidyRequestButton';
@@ -35,6 +27,7 @@ import {
   useEnterpriseCustomerContainsContent,
   useIsAssignmentsOnlyLearner,
 } from '../../app/data';
+import CourseImportantDates from './CourseImportantDates';
 
 const CourseHeader = () => {
   const location = useLocation();
@@ -136,6 +129,7 @@ const CourseHeader = () => {
               previewImage={courseMetadata.image?.src || courseMetadata.video?.image}
               previewVideoURL={courseMetadata.video?.src}
             />
+            <CourseImportantDates />
           </Col>
           <Col xs={12}>
             {containsContentItems && (
diff --git a/src/components/course/course-header/CourseImportantDates.jsx b/src/components/course/course-header/CourseImportantDates.jsx
new file mode 100644
index 0000000000..dba1a26235
--- /dev/null
+++ b/src/components/course/course-header/CourseImportantDates.jsx
@@ -0,0 +1,133 @@
+import {
+  Col, Icon, Row, Stack,
+} from '@openedx/paragon';
+import { Calendar } from '@openedx/paragon/icons';
+import dayjs from 'dayjs';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import {
+  DATE_FORMAT, DATETIME_FORMAT, getSoonestEarliestPossibleExpirationData, hasCourseStarted,
+} from '../data';
+import {
+  determineAllocatedCourseRunAssignmentsForCourse,
+  useCourseMetadata,
+  useRedeemablePolicies,
+} from '../../app/data';
+
+const messages = defineMessages({
+  importantDates: {
+    id: 'enterprise.course.about.page.important-dates.title',
+    defaultMessage: 'Important dates',
+    description: 'Title for the important dates section on the course about page',
+  },
+  enrollByDate: {
+    id: 'enterprise.course.about.page.important-dates.enroll-by-date',
+    defaultMessage: 'Enroll-by date',
+    description: 'Enroll-by date for the important dates section on the course about page',
+  },
+  courseStarts: {
+    id: 'enterprise.course.about.page.important-dates.course-starts',
+    defaultMessage: 'Course starts',
+    description: 'Course starts for the important dates section on the course about page in future tense',
+  },
+  courseStarted: {
+    id: 'enterprise.course.about.page.important-dates.course-started',
+    defaultMessage: 'Course started',
+    description: 'Course started the important dates section on the course about page in past tense',
+  },
+});
+
+const CourseImportantDate = ({
+  label,
+  children,
+}) => (
+  <Row className="course-important-date border-bottom mx-0 py-2.5">
+    <Col className="px-0">
+      <Stack direction="horizontal" gap={2}>
+        <Icon size="sm" src={Calendar} />
+        {label}
+      </Stack>
+    </Col>
+    <Col>
+      {children}
+    </Col>
+  </Row>
+);
+
+CourseImportantDate.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const CourseImportantDates = () => {
+  const { courseKey } = useParams();
+  const { data: redeemableLearnerCreditPolicies } = useRedeemablePolicies();
+  const { data: courseMetadata } = useCourseMetadata();
+  const intl = useIntl();
+  const {
+    allocatedCourseRunAssignments,
+    allocatedCourseRunAssignmentKeys,
+    hasAssignedCourseRuns,
+  } = determineAllocatedCourseRunAssignmentsForCourse({
+    redeemableLearnerCreditPolicies,
+    courseKey,
+  });
+
+  const [searchParams] = useSearchParams();
+  const courseRunKey = searchParams.get('course_run_key')?.replaceAll(' ', '+');
+  // Check if the corresponding course run key from query parameters matches an allocated assignment course run key
+  const doesNotHaveCourseRunAssignmentForCourseRunKey = !!courseRunKey && !allocatedCourseRunAssignmentKeys.includes(
+    courseRunKey,
+  );
+  if (!hasAssignedCourseRuns || doesNotHaveCourseRunAssignmentForCourseRunKey) {
+    return null;
+  }
+
+  // Retrieve soonest expiring enroll-by date
+  const { soonestExpirationDate, soonestExpiringAssignment } = getSoonestEarliestPossibleExpirationData({
+    assignments: allocatedCourseRunAssignments,
+    dateFormat: DATETIME_FORMAT,
+  });
+
+  // Match soonest expiring assignment to the corresponding course start date from course metadata
+  let soonestExpiringAllocatedAssignmentCourseStartDate = null;
+  if (soonestExpiringAssignment) {
+    soonestExpiringAllocatedAssignmentCourseStartDate = courseMetadata.availableCourseRuns.find(
+      (courseRun) => courseRun.key === soonestExpiringAssignment?.contentKey,
+    )?.start;
+  }
+
+  // Parse logic of date existence and labels
+  const enrollByDate = soonestExpirationDate ?? null;
+  const courseStartDate = soonestExpiringAllocatedAssignmentCourseStartDate
+    ? dayjs(soonestExpiringAllocatedAssignmentCourseStartDate).format(DATE_FORMAT)
+    : null;
+  const courseHasStartedLabel = hasCourseStarted(courseStartDate)
+    ? intl.formatMessage(messages.courseStarted)
+    : intl.formatMessage(messages.courseStarts);
+
+  if (!enrollByDate && !courseStartDate) {
+    return null;
+  }
+
+  return (
+    <section className="assignments-important-dates mt-4 small">
+      <h3>
+        {intl.formatMessage(messages.importantDates)}
+      </h3>
+      {enrollByDate && (
+        <CourseImportantDate label={intl.formatMessage(messages.enrollByDate)}>
+          {enrollByDate}
+        </CourseImportantDate>
+      )}
+      {courseStartDate && (
+        <CourseImportantDate label={courseHasStartedLabel}>
+          {courseStartDate}
+        </CourseImportantDate>
+      )}
+    </section>
+  );
+};
+
+export default CourseImportantDates;
diff --git a/src/components/course/course-header/CoursePreview.jsx b/src/components/course/course-header/CoursePreview.jsx
index d99ca68d06..f82ce09559 100644
--- a/src/components/course/course-header/CoursePreview.jsx
+++ b/src/components/course/course-header/CoursePreview.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 
 import { PlayCircleFilled } from '@openedx/paragon/icons';
-import { useToggle, Image, Skeleton } from '@openedx/paragon';
+import { Image, Skeleton, useToggle } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import DelayedFallbackContainer from '../../DelayedFallback/DelayedFallbackContainer';
 
@@ -34,11 +34,11 @@ const CoursePreview = ({ previewImage, previewVideoURL }) => {
             </div>
           ) : (
             <button
-              className="video-trigger mw-100"
+              className="video-trigger w-100"
               onClick={() => playVideo(true)}
               type="button"
             >
-              <Image src={previewImage} className="video-thumb" alt="" />
+              <Image src={previewImage} className="w-100" alt="" />
               <div className="video-trigger-cta btn btn-inverse-primary">
                 <PlayCircleFilled className="mr-1" />
                 <FormattedMessage
diff --git a/src/components/course/course-header/tests/CourseHeader.test.jsx b/src/components/course/course-header/tests/CourseHeader.test.jsx
index c1b2116c16..e53ecbc218 100644
--- a/src/components/course/course-header/tests/CourseHeader.test.jsx
+++ b/src/components/course/course-header/tests/CourseHeader.test.jsx
@@ -5,6 +5,7 @@ import '@testing-library/jest-dom/extend-expect';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
+import { useParams } from 'react-router-dom';
 import CourseHeader from '../CourseHeader';
 
 import { COURSE_PACING_MAP } from '../../data/constants';
@@ -18,6 +19,7 @@ import {
   useEnterpriseCustomer,
   useEnterpriseCustomerContainsContent,
   useIsAssignmentsOnlyLearner,
+  useRedeemablePolicies,
 } from '../../../app/data';
 import { renderWithRouterProvider } from '../../../../utils/tests';
 import { authenticatedUserFactory, enterpriseCustomerFactory } from '../../../app/data/services/data/__factories__';
@@ -33,6 +35,11 @@ jest.mock('../../LicenseRequestedAlert', () => function LicenseRequestedAlert()
   return <div data-testid="license-requested-alert" />;
 });
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
 jest.mock('../../../app/data', () => ({
   ...jest.requireActual('../../../app/data'),
   useEnterpriseCustomer: jest.fn(),
@@ -43,6 +50,7 @@ jest.mock('../../../app/data', () => ({
   useIsAssignmentsOnlyLearner: jest.fn(),
   useCourseReviews: jest.fn(),
   usePassLearnerCsodParams: jest.fn(),
+  useRedeemablePolicies: jest.fn(),
 }));
 
 jest.mock('../../data', () => ({
@@ -118,6 +126,29 @@ const mockEnterpriseCourseEnrollment = {
   linkToCourse: 'http://course.url',
   mode: COURSE_MODES_MAP.VERIFIED,
 };
+
+const mockBaseRedeemablePolicies = {
+  redeemablePolicies: [],
+  expiredPolicies: [],
+  unexpiredPolicies: [],
+  learnerContentAssignments: {
+    assignments: [],
+    hasAssignments: false,
+    allocatedAssignments: [],
+    hasAllocatedAssignments: false,
+    acceptedAssignments: [],
+    hasAcceptedAssignments: false,
+    canceledAssignments: [],
+    hasCanceledAssignments: false,
+    expiredAssignments: [],
+    hasExpiredAssignments: false,
+    erroredAssignments: [],
+    hasErroredAssignments: false,
+    assignmentsForDisplay: [],
+    hasAssignmentsForDisplay: false,
+  },
+};
+
 const mockAuthenticatedUser = authenticatedUserFactory();
 const CourseHeaderWrapper = () => (
   <IntlProvider locale="en">
@@ -130,6 +161,7 @@ const CourseHeaderWrapper = () => (
 describe('<CourseHeader />', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    useParams.mockReturnValue({ courseKey: 'edX+DemoX' });
     useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer });
     useEnterpriseCourseEnrollments.mockReturnValue({
       data: defaultCourseEnrollmentsState,
@@ -145,6 +177,7 @@ describe('<CourseHeader />', () => {
     useIsAssignmentsOnlyLearner.mockReturnValue(false);
     useIsCourseAssigned.mockReturnValue(false);
     useCourseReviews.mockReturnValue({ data: mockCourseReviews });
+    useRedeemablePolicies.mockReturnValue({ data: mockBaseRedeemablePolicies });
   });
 
   test('renders breadcrumb', () => {
diff --git a/src/components/course/course-header/tests/CourseImportantDates.test.jsx b/src/components/course/course-header/tests/CourseImportantDates.test.jsx
new file mode 100644
index 0000000000..5d9a498d1d
--- /dev/null
+++ b/src/components/course/course-header/tests/CourseImportantDates.test.jsx
@@ -0,0 +1,182 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { AppContext } from '@edx/frontend-platform/react';
+import { useParams } from 'react-router-dom';
+import dayjs from 'dayjs';
+import CourseImportantDates from '../CourseImportantDates';
+import { renderWithRouterProvider } from '../../../../utils/tests';
+import { authenticatedUserFactory } from '../../../app/data/services/data/__factories__';
+import { useCourseMetadata, useRedeemablePolicies } from '../../../app/data';
+import { COURSE_PACING_MAP, DATE_FORMAT, DATETIME_FORMAT } from '../../data';
+import { TEST_OWNER } from '../../tests/data/constants';
+
+const mockAuthenticatedUser = authenticatedUserFactory();
+
+jest.mock('../../../app/data', () => ({
+  ...jest.requireActual('../../../app/data'),
+  useRedeemablePolicies: jest.fn(),
+  useCourseMetadata: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+const futureEarliestExpiration = dayjs().add(5, 'days').toISOString();
+const pastEarliestExpiration = dayjs().subtract(5, 'days').toISOString();
+const now = dayjs().toISOString();
+
+const mockAllocatedAssignments = [{
+  parentContentKey: 'edX+DemoX',
+  contentKey: 'course-v1:edX+DemoX+2T2020',
+  isAssignedCourseRun: true,
+  earliestPossibleExpiration: {
+    date: dayjs().add(10, 'days').toISOString(),
+    reason: 'subsidy_expired',
+  },
+},
+{
+  parentContentKey: 'edX+DemoX',
+  contentKey: 'course-v1:edX+DemoX+2018',
+  isAssignedCourseRun: true,
+  earliestPossibleExpiration: {
+    date: now,
+    reason: 'subsidy_expired',
+  },
+},
+{
+  parentContentKey: null,
+  contentKey: 'edX+DemoX',
+  isAssignedCourseRun: false,
+  earliestPossibleExpiration: {
+    date: dayjs().add(20, 'days').toISOString(),
+    reason: 'subsidy_expired',
+  },
+}];
+const mockLearnerContentAssignments = {
+  allocatedAssignments: mockAllocatedAssignments,
+  hasAllocatedAssignments: mockAllocatedAssignments.length > 0,
+};
+
+const mockBaseRedeemablePolicies = {
+  redeemablePolicies: [],
+  expiredPolicies: [],
+  unexpiredPolicies: [],
+  learnerContentAssignments: {
+    assignments: [],
+    hasAssignments: false,
+    allocatedAssignments: [],
+    hasAllocatedAssignments: false,
+    acceptedAssignments: [],
+    hasAcceptedAssignments: false,
+    canceledAssignments: [],
+    hasCanceledAssignments: false,
+    expiredAssignments: [],
+    hasExpiredAssignments: false,
+    erroredAssignments: [],
+    hasErroredAssignments: false,
+    assignmentsForDisplay: [],
+    hasAssignmentsForDisplay: false,
+  },
+};
+
+const mockRedeemablePoliciesWithAllocatedAssignments = {
+  ...mockBaseRedeemablePolicies,
+  learnerContentAssignments: {
+    ...mockBaseRedeemablePolicies.learnerContentAssignments,
+    ...mockLearnerContentAssignments,
+  },
+};
+
+const mockCourseStartDate = dayjs().add(10, 'days').toISOString();
+
+const mockCourseRun = {
+  isEnrollable: true,
+  key: 'course-v1:edX+DemoX+2018',
+  pacingType: COURSE_PACING_MAP.SELF_PACED,
+  start: mockCourseStartDate,
+  availability: 'Current',
+  courseUuid: 'Foo',
+};
+
+const mockCourseMetadata = {
+  key: 'test-course-key',
+  subjects: [{
+    name: 'Test Subject 1',
+    slug: 'test-subject-slug',
+  }],
+  shortDescription: 'Course short description.',
+  title: 'Test Course Title',
+  owners: [TEST_OWNER],
+  programs: [],
+  image: {
+    src: 'http://test-image.url',
+  },
+  skills: [],
+  activeCourseRun: mockCourseRun,
+  courseRuns: [mockCourseRun],
+  availableCourseRuns: [mockCourseRun],
+};
+
+const CourseImportantDatesWrapper = () => (
+  <IntlProvider locale="en">
+    <AppContext.Provider value={{ authenticatedUser: mockAuthenticatedUser }}>
+      <CourseImportantDates />
+    </AppContext.Provider>
+  </IntlProvider>
+);
+
+describe('<CourseImportantDates />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useParams.mockReturnValue({ courseKey: 'edX+DemoX' });
+    useRedeemablePolicies.mockReturnValue({ data: mockBaseRedeemablePolicies });
+    useCourseMetadata.mockReturnValue({ data: mockCourseMetadata });
+  });
+  it('renders without crashing', () => {
+    useRedeemablePolicies.mockReturnValue({
+      data: mockRedeemablePoliciesWithAllocatedAssignments,
+    });
+
+    renderWithRouterProvider(<CourseImportantDatesWrapper />);
+
+    expect(screen.getByText('Important dates')).toBeInTheDocument();
+    expect(screen.getByText('Enroll-by date')).toBeInTheDocument();
+    expect(screen.getByText('Course starts')).toBeInTheDocument();
+
+    expect(screen.getByText(dayjs(now).format(DATETIME_FORMAT))).toBeInTheDocument();
+    expect(screen.getByText(dayjs(mockCourseStartDate).format(DATE_FORMAT))).toBeInTheDocument();
+  });
+  it.each([{
+    courseStartDate: futureEarliestExpiration,
+    expected: 'Course starts',
+  },
+  {
+    courseStartDate: pastEarliestExpiration,
+    expected: 'Course started',
+  }])('renders the correct tense based on course start date', ({
+    courseStartDate,
+    expected,
+  }) => {
+    const updatedMockCourseRun = {
+      ...mockCourseRun,
+      start: courseStartDate,
+    };
+    const updatedMockCourseMetadata = {
+      ...mockCourseMetadata,
+      activeCourseRun: updatedMockCourseRun,
+      courseRuns: [updatedMockCourseRun],
+      availableCourseRuns: [updatedMockCourseRun],
+    };
+    useRedeemablePolicies.mockReturnValue({
+      data: mockRedeemablePoliciesWithAllocatedAssignments,
+    });
+    useCourseMetadata.mockReturnValue({ data: updatedMockCourseMetadata });
+
+    renderWithRouterProvider(<CourseImportantDatesWrapper />);
+
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/course/data/constants.js b/src/components/course/data/constants.js
index e0fb6de18f..3663d9966e 100644
--- a/src/components/course/data/constants.js
+++ b/src/components/course/data/constants.js
@@ -122,4 +122,5 @@ export const DISABLED_ENROLL_USER_MESSAGES = {
 /* eslint-enable max-len */
 
 export const DATE_FORMAT = 'MMM D, YYYY';
+export const DATETIME_FORMAT = 'MMM D, YYYY h:mm, a';
 export const ZERO_PRICE = 0.00;
diff --git a/src/components/course/data/utils.jsx b/src/components/course/data/utils.jsx
index d21c778622..727b7739f0 100644
--- a/src/components/course/data/utils.jsx
+++ b/src/components/course/data/utils.jsx
@@ -3,6 +3,7 @@ import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { hasFeatureFlagEnabled } from '@edx/frontend-enterprise-utils';
 import { Button, Hyperlink, MailtoLink } from '@openedx/paragon';
 import isNil from 'lodash.isnil';
+import { logError } from '@edx/frontend-platform/logging';
 import dayjs from '../../../utils/dayjs';
 
 import {
@@ -21,12 +22,14 @@ import { PROGRAM_TYPE_MAP } from '../../program/data/constants';
 import { programIsMicroMasters, programIsProfessionalCertificate } from '../../program/data/utils';
 import { hasValidStartExpirationDates } from '../../../utils/common';
 import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
-import { findHighestLevelEntitlementSku, findHighestLevelSkuByEntityModeType, isEnrollmentUpgradeable } from '../../app/data';
+import {
+  findHighestLevelEntitlementSku,
+  findHighestLevelSkuByEntityModeType,
+  isEnrollmentUpgradeable,
+} from '../../app/data';
 
 export function hasCourseStarted(start) {
-  const today = new Date();
-  const startDate = new Date(start);
-  return startDate && today >= startDate;
+  return dayjs(start).isBefore(dayjs());
 }
 
 export function findUserEnrollmentForCourseRun({ userEnrollments, key }) {
@@ -870,3 +873,70 @@ export function transformedCourseMetadata({
   };
   return minimalCourseMetadata;
 }
+
+/**
+ * Takes assignments with the earliestPossibleExpirationDate field and sorts by the
+ * soonest expiring expiration date, along with returns relevant metadata
+ *
+ * @param assignmentObjectArray
+ * @param dateFormat
+ * @returns {
+ *  {
+ *    date: (*|string),
+ *    reason: string,
+ *    sortedExpirationDateData: *,
+ *    soonestExpirationDateData: *
+ *   } |
+ *   {
+ *    date: null,
+ *    reason: null,
+ *    sortedExpirationDateData: null
+ *   } |
+ *   {
+ *    date: null,
+ *    reason: null,
+ *    sortedByExpirationDate: null
+ *   }
+ * }
+ */
+export function getSoonestEarliestPossibleExpirationData({
+  assignments,
+  dateFormat = null,
+}) {
+  if (!assignments?.length) {
+    logError('[getSoonestEarliestPossibleExpirationData] no assignments provided in array');
+    return {
+      soonestExpirationDate: null,
+      soonestExpirationReason: null,
+      soonestExpiringAssignment: null,
+      sortedExpirationAssignments: null,
+    };
+  }
+  const assignmentsWithExpiration = assignments.filter(
+    assignment => !!assignment.earliestPossibleExpiration,
+  );
+  if (!assignmentsWithExpiration.length) {
+    logError(`[getSoonestEarliestPossibleExpirationData] [${assignments.map((assignment) => assignment.uuid).join(', ')}] allocated assignment uuids do not contain earliestPossibleExpiration field`);
+    return {
+      soonestExpirationDate: null,
+      soonestExpirationReason: null,
+      soonestExpiringAssignment: null,
+      sortedExpirationAssignments: null,
+    };
+  }
+
+  const sortedByExpirationDate = assignmentsWithExpiration.sort(
+    (a, b) => (dayjs(a.earliestPossibleExpiration.date).isBefore(b.earliestPossibleExpiration.date) ? -1 : 1),
+  );
+  let { date: soonestExpirationDate } = sortedByExpirationDate[0].earliestPossibleExpiration.date;
+  if (dateFormat) {
+    soonestExpirationDate = dayjs(soonestExpirationDate).format(dateFormat);
+  }
+
+  return {
+    soonestExpirationDate,
+    soonestExpirationReason: sortedByExpirationDate[0].earliestPossibleExpiration.reason,
+    soonestExpiringAssignment: sortedByExpirationDate[0],
+    sortedExpirationAssignments: sortedByExpirationDate,
+  };
+}
diff --git a/src/components/course/styles/_CourseHeader.scss b/src/components/course/styles/_CourseHeader.scss
index aca2c73e27..55f99d030e 100644
--- a/src/components/course/styles/_CourseHeader.scss
+++ b/src/components/course/styles/_CourseHeader.scss
@@ -18,7 +18,7 @@
     position: relative;
     border: none;
     padding: 0;
-  
+
     .video-trigger-cta {
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
       text-align: center;
@@ -27,36 +27,36 @@
       top: calc(50% - 15px);
       left: calc(50% - 75px);
       padding: 10px 0;
-  
+
       &.no-thumb {
         position: relative;
       }
     }
-  
+
     &:focus,
     &:hover {
       cursor: pointer;
-  
+
       .video-trigger-cta {
         border-color: $dark-500;
-  
+
         &:focus,
         &:hover {
           background-color: $dark !important;
           color: $light;
         }
-  
+
       }
     }
   }
-  
+
   .video-wrapper {
     position: relative;
     height: 0;
     padding: {
       bottom: 56.25%; /* 16:9 */
     }
-  
+
     .video-iframe {
       position: absolute;
       top: 0;
@@ -65,4 +65,10 @@
       height: 100%;
     }
   }
+
+  .assignments-important-dates {
+    .course-important-date:last-child {
+      border-bottom: none !important;
+    }
+  }
 }