feat: added implementation for new sidebar (#1260)

* feat: added implementation for new sidebar

* test: fixed test cases

* refactor: fixed naming convention and combine useeffects

* refactor: improved sidebar UI and renamed sidebar flag

* refactor: remove additional states

* refactor: fixed UI and logic related issue

* refactor: simplified condition

* refactor: toggle sidebar action

* refactor: fixed toggle issues

* refactor: back arrow component

* refactor: changed useeffect position

---------

Co-authored-by: Awais Ansari <awais.ansari63@gmail.com>

src/courseware/course/sequence/Sequence.jsx

@@ -2,13 +2,14 @@
 import React, {
   useEffect, useState,
 } from 'react';
+import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
   sendTrackEvent,
   sendTrackingLogEvent,
 } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';
@@ -19,7 +20,9 @@ import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '../../
 
 import CourseLicense from '../course-license';
 import Sidebar from '../sidebar/Sidebar';
+import NewSidebar from '../new-sidebar/Sidebar';
 import SidebarTriggers from '../sidebar/SidebarTriggers';
+import NewSidebarTriggers from '../new-sidebar/SidebarTriggers';
 import messages from './messages';
 import HiddenAfterDue from './hidden-after-due';
 import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
@@ -32,8 +35,8 @@ const Sequence = ({
   unitNavigationHandler,
   nextSequenceHandler,
   previousSequenceHandler,
-  intl,
 }) => {
+  const intl = useIntl();
   const course = useModel('coursewareMeta', courseId);
   const {
     isStaff,
@@ -44,6 +47,7 @@ const Sequence = ({
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
   const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  const enableNewSidebar = getConfig().ENABLE_NEW_SIDEBAR;
 
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
@@ -159,7 +163,9 @@ const Sequence = ({
             handlePrevious();
           }}
         />
-        {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        {shouldDisplayNotificationTriggerInSequence && (
+          enableNewSidebar === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers />
+        )}
 
         <div className="unit-container flex-grow-1">
           <SequenceContent
@@ -185,7 +191,7 @@ const Sequence = ({
           )}
         </div>
       </div>
-      <Sidebar />
+      {enableNewSidebar === 'true' ? <NewSidebar /> : <Sidebar />}
     </div>
   );
 
@@ -221,7 +227,6 @@ Sequence.propTypes = {
   unitNavigationHandler: PropTypes.func.isRequired,
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
 Sequence.defaultProps = {
@@ -229,4 +234,4 @@ Sequence.defaultProps = {
   unitId: null,
 };
 
-export default injectIntl(Sequence);
+export default Sequence;