feat: [BD-26][EDUCATOR-5808] Part-2 Add additional pages for onboardi…

…ng / practice exams (#17)

* feat: check for verification only for proctored exams (previously were checkin for practice and onboarding also)

* feat: add Error, Submitted and Verified instruction pages

* test: add tests for Error, Submitted and Verified instructions

* feat: add allowProctoringOptOut to examState and use getSequenceMetadata API

* feat: Use sequence from the learning app instead of hitting the endpoint

Co-authored-by: Viktor Rusakov <[email protected]>

src/data/index.js

@@ -13,6 +13,7 @@ export {
   getExamReviewPolicy,
   pingAttempt,
   resetExam,
+  getAllowProctoringOptOut,
 } from './thunks';
 
 export { default as store } from './store';

src/data/slice.js

@@ -7,12 +7,16 @@ export const examSlice = createSlice({
     isLoading: true,
     timeIsOver: false,
     activeAttempt: null,
+    allowProctoringOptOut: false,
     proctoringSettings: {},
     exam: {},
     verification: {},
     apiErrorMsg: '',
   },
   reducers: {
+    setAllowProctoringOptOut: (state, { payload }) => {
+      state.allowProctoringOptOut = payload.allowProctoringOptOut;
+    },
     setIsLoading: (state, { payload }) => {
       state.isLoading = payload.isLoading;
     },
@@ -46,7 +50,7 @@ export const examSlice = createSlice({
 export const {
   setIsLoading, setExamState, getExamId, expireExamAttempt,
   setActiveAttempt, setProctoringSettings, setVerificationData,
-  setReviewPolicy, setApiError,
+  setReviewPolicy, setApiError, setAllowProctoringOptOut,
 } = examSlice.actions;
 
 export default examSlice.reducer;

src/data/thunks.js

@@ -22,6 +22,7 @@ import {
   setVerificationData,
   setReviewPolicy,
   setApiError,
+  setAllowProctoringOptOut,
 } from './slice';
 import { ExamStatus } from '../constants';
 import { workerPromiseForEventNames, pingApplication } from './messages/handlers';
@@ -359,3 +360,9 @@ export function getExamReviewPolicy() {
     dispatch(setReviewPolicy({ policy: data.review_policy }));
   };
 }
+
+export function getAllowProctoringOptOut(allowProctoringOptOut) {
+  return (dispatch) => {
+    dispatch(setAllowProctoringOptOut({ allowProctoringOptOut }));
+  };
+}

src/exam/ExamWrapper.jsx

@@ -12,8 +12,8 @@ const ExamWrapper = ({ children, ...props }) => {
 
   const loadInitialData = async () => {
     await state.getExamAttemptsData(courseId, sequence.id);
+    await state.getAllowProctoringOptOut(sequence.allowProctoringOptOut);
     state.getProctoringSettings();
-    state.getVerificationData();
   };
 
   useEffect(() => {
@@ -31,6 +31,7 @@ ExamWrapper.propTypes = {
   sequence: PropTypes.shape({
     id: PropTypes.string.isRequired,
     isTimeLimited: PropTypes.bool,
+    allowProctoringOptOut: PropTypes.bool,
   }).isRequired,
   courseId: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,

src/instructions/EntranceInstructions.jsx

@@ -4,7 +4,7 @@ import { Container } from '@edx/paragon';
 import { ExamType } from '../constants';
 import { EntranceProctoredExamInstructions } from './proctored_exam';
 import { EntranceOnboardingExamInstructions } from './onboarding_exam';
-import EntrancePracticeExamInstructions from './practice_exam';
+import { EntrancePracticeExamInstructions } from './practice_exam';
 import { StartTimedExamInstructions, TimedExamFooter } from './timed_exam';
 import Footer from './proctored_exam/Footer';
 

src/instructions/ErrorInstructions.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@edx/paragon';
+import { ExamType } from '../constants';
+import { ErrorPracticeExamInstructions } from './practice_exam';
+import { ErrorOnboardingExamInstructions } from './onboarding_exam';
+import { ErrorProctoredExamInstructions } from './proctored_exam';
+import Footer from './proctored_exam/Footer';
+
+const ErrorExamInstructions = ({ examType }) => {
+  const renderInstructions = () => {
+    switch (examType) {
+      case ExamType.ONBOARDING:
+        return <ErrorOnboardingExamInstructions />;
+      case ExamType.PRACTICE:
+        return <ErrorPracticeExamInstructions />;
+      case ExamType.PROCTORED:
+        return <ErrorProctoredExamInstructions />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <Container className="border py-5 mb-4">
+        {renderInstructions()}
+      </Container>
+      {examType !== ExamType.TIMED && <Footer />}
+    </div>
+  );
+};
+
+ErrorExamInstructions.propTypes = {
+  examType: PropTypes.string.isRequired,
+};
+
+export default ErrorExamInstructions;