feat: SEB component integration POC

src/generic/SEBCourseAccessErrorPage.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
+import Footer from '@edx/frontend-component-footer';
+import { useParams } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Alert } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const SEBCourseAccessErrorPage = ({ intl }) => {
+
+  return (
+    <>
+      <Header />
+      <main id="main-content" className="container my-5 text-center" data-testid="access-denied-main">
+      <Alert variant="warning" icon={WarningFilled}>
+      <FormattedMessage
+        id="learning.accessDenied.alert"
+        description="Alert message shown to learner when access to the course is denied"
+        defaultMessage="Please use Safe Exam Browser to access this course."
+      />
+    </Alert>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default injectIntl(SEBCourseAccessErrorPage);

src/index.jsx

@@ -37,6 +37,7 @@ import LiveTab from './course-home/live-tab/LiveTab';
 import CourseAccessErrorPage from './generic/CourseAccessErrorPage';
 import DecodePageRoute from './decode-page-route';
 import { DECODE_ROUTES, ROUTES } from './constants';
+import SEBCourseAccessErrorPage from './generic/SEBCourseAccessErrorPage';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -50,6 +51,7 @@ subscribe(APP_READY, () => {
             <Routes>
               <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
               <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
+              <Route path={'/seb-openedx/courseware/access-denied/:courseId'} element={<SEBCourseAccessErrorPage />} />
               <Route
                 path={DECODE_ROUTES.ACCESS_DENIED}
                 element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}

src/shared/access.js

@@ -7,6 +7,9 @@ import { getLocale } from '@edx/frontend-platform/i18n';
 export function getAccessDeniedRedirectUrl(courseId, activeTabSlug, courseAccess, start) {
   let url = null;
   switch (courseAccess.errorCode) {
+    case 'seb_access_denied':
+      url = `/seb-openedx/courseware/access-denied/${courseId}`;
+      break;
     case 'audit_expired':
       url = `/redirect/dashboard?access_response_error=${courseAccess.additionalContextUserMessage}`;
       break;